/* 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');
}


/* 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: #0A43B5;
  --secondary: #F68B00;
  --accent: #FFB23A;
  --bg-light: #F8F8F6;
  --bg-dark: #12305F;
  --text-dark: #12305F;
  --text-light: #F8F8F6;
  --text-muted: #6C7A92;
  --border-light: #D9E1EC;
  --border-dark: #31507F;
  --nav-bg: transparent;
  --nav-text: #F8F8F6;
  --nav-text-hover: #FFB23A;

  --radius-sm: 6px;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-img: 12px;
  --radius-badge: 6px;
  --radius-input: 6px;
  --shadow-subtle: 0 2px 16px rgba(26,58,107,0.09);
  --shadow-card: 0 4px 20px rgba(26,58,107,0.08);
  --shadow-elevated: 0 10px 40px rgba(26,58,107,0.12);
  --shadow-btn-hover: 0 10px 40px rgba(247,148,29,0.3);
  --spacing-section: 96px;
  --spacing-section-mobile: 56px;
  --spacing-card-padding: 32px;
  --spacing-card-gap: 24px;
  --spacing-element-gap: 16px;
  --transition-default: all 0.25s ease;
  --transition-hover: all 0.2s ease;

  --gradient-primary: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  --gradient-gold-shine: linear-gradient(90deg, #F7941D 0%, #FFC107 50%, #F7941D 100%);
  --gradient-secondary: linear-gradient(135deg, #1A3A6B 0%, #0D2147 100%);
  --gradient-gold-accent: linear-gradient(135deg, #FFC107 0%, #F7941D 100%);
  --gradient-dark-section: linear-gradient(180deg, #1A3A6B 0%, #0D2147 100%);
  --gradient-overlay-dark: linear-gradient(135deg, rgba(13,33,71,0.85) 0%, rgba(26,58,107,0.7) 100%);
  --gradient-light-section: linear-gradient(180deg, #FFFFFF 0%, #EEF2F7 100%);
  --gradient-overlay-light: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.95) 100%);
}

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

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Rubik', sans-serif;
  color: var(--text-dark);
  font-weight: 700;
  letter-spacing: -0.01em;
}

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;
}

h4 {
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
  margin-bottom: 0.75rem !important;
  margin-top: 0.5rem !important;
}

h5 {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
}

h6 {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-bottom: 0.5rem !important;
  margin-top: 0.5rem !important;
}

p {
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1.7 !important;
  margin-bottom: 1rem !important;
  font-family: 'Rubik', sans-serif;
}

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

span,
div,
li,
td,
th,
label,
input,
textarea,
select,
button {
  font-family: 'Rubik', sans-serif;
}

a {
  color: var(--accent, var(--primary));
  text-decoration: none;
  transition: var(--transition-hover);
}

a:hover {
  color: var(--secondary);
  text-decoration: none;
}

.site-footer a {
  color: inherit;
}

.site-footer a:hover {
  color: var(--accent);
}

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

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

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

input,
textarea,
select,
button {
  font-family: 'Rubik', sans-serif;
  font-size: inherit;
  border: none;
  outline: none;
  background: none;
}

button {
  cursor: pointer;
}

hr {
  border: none;
  border-top: 1px solid var(--border-light);
  margin: 1.5rem 0;
}

@media (max-width: 1024px) {
  h1 {
    font-size: 36px !important;
  }

  h2 {
    font-size: 28px !important;
  }

  h3 {
    font-size: 20px !important;
  }

  p {
    font-size: 15px !important;
  }
}

@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;
  }

  :root {
    --spacing-section: var(--spacing-section-mobile);
  }
}

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

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

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

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

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

.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--gradient-primary);
  color: #ffffff;
  border-color: transparent;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #e8850a 0%, #f0b000 100%);
  color: #ffffff;
  box-shadow: var(--shadow-btn-hover);
}

.btn-secondary {
  background: var(--gradient-secondary);
  color: var(--text-light);
  border-color: transparent;
}

.btn-secondary:hover {
  background: linear-gradient(135deg, #0D2147 0%, #1A3A6B 100%);
  color: var(--text-light);
  box-shadow: var(--shadow-elevated);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline:hover {
  background: var(--primary);
  color: #ffffff;
  box-shadow: var(--shadow-card);
}

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

.btn-outline-light:hover {
  background: var(--text-light);
  color: var(--text-dark);
  box-shadow: var(--shadow-card);
}

.btn-sm {
  padding: 10px 20px;
  font-size: 14px;
}

.btn-lg {
  padding: 18px 36px;
  font-size: 18px;
}

.section {
  padding: var(--spacing-section) 0;
}

.section-light {
  background-color: var(--bg-light);
}

.section-dark {
  background: var(--gradient-dark-section);
  color: var(--text-light);
}

.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6,
.section-dark p {
  color: var(--text-light);
}

.card {
  background: #ffffff;
  border-radius: var(--radius-card);
  padding: var(--spacing-card-padding);
  box-shadow: var(--shadow-card);
  transition: var(--transition-default);
}

.card:hover {
  box-shadow: var(--shadow-elevated);
  transform: translateY(-4px);
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--radius-badge);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}

.badge-primary {
  background: rgba(10, 67, 181, 0.1);
  color: var(--primary);
}

.badge-accent {
  background: rgba(255, 178, 58, 0.15);
  color: var(--secondary);
}

.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.text-muted { color: var(--text-muted) !important; }
.text-light { color: var(--text-light) !important; }
.text-dark { color: var(--text-dark) !important; }
.text-primary { color: var(--primary) !important; }
.text-accent { color: var(--accent) !important; }
.text-secondary { color: var(--secondary) !important; }

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-block { display: block; }
.d-none { display: none; }
.align-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-sm { gap: var(--spacing-element-gap); }
.gap-md { gap: var(--spacing-card-gap); }

.mt-0 { margin-top: 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.mt-1 { margin-top: 0.5rem !important; }
.mb-1 { margin-bottom: 0.5rem !important; }
.mt-2 { margin-top: 1rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mt-3 { margin-top: 1.5rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mt-4 { margin-top: 2rem !important; }
.mb-4 { margin-bottom: 2rem !important; }

.w-100 { width: 100%; }
.h-100 { height: 100%; }

.img-rounded {
  border-radius: var(--radius-img);
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 768px) {
  .container {
    padding: 0 16px;
  }

  .section {
    padding: var(--spacing-section-mobile) 0;
  }

  .card {
    padding: 20px;
  }

  .btn {
    padding: 12px 22px;
    font-size: 15px;
  }

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

  .d-none-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .d-none-desktop {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 12px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .btn + .btn {
    margin-top: 8px;
  }
}

.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;
}

/* Navbar Styles */
:root {
  --nav-bg: transparent;
  --nav-text: #F8F8F6;
  --nav-text-hover: #FFB23A;
  --primary: #0A43B5;
  --secondary: #F68B00;
  --accent: #FFB23A;
  --bg-light: #F8F8F6;
  --bg-dark: #12305F;
  --text-dark: #12305F;
  --text-light: #F8F8F6;
  --text-muted: #6C7A92;
  --border-light: #D9E1EC;
  --border-dark: #31507F;
}

.navbar {
  background: var(--nav-bg);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  direction: rtl;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(18, 48, 95, 0.72) 0%, rgba(18, 48, 95, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.nav-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 72px;
  gap: 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 40px;
}

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

.logo {
  max-height: 40px;
  height: auto;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  flex: 1;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-block;
  color: var(--nav-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 16px;
  left: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.2s ease;
}

.nav-link:hover {
  color: var(--nav-text-hover);
  background: rgba(255, 178, 58, 0.08);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-cta-container {
  margin-right: auto;
  margin-left: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #F8F8F6;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}

.nav-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,178,58,0.15) 0%, transparent 60%);
  
  transition: opacity 0.2s ease;
}

.nav-cta-btn:hover {
  background: #0d52d9;
  border-color: var(--accent);
  box-shadow: 0 10px 40px rgba(247, 148, 29, 0.3);
  transform: translateY(-1px);
  color: #F8F8F6;
}

.nav-cta-btn:hover::before {
  opacity: 1;
}

.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--nav-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: all 0.2s ease;
}

.mobile-toggle:hover {
  background: rgba(255, 178, 58, 0.15);
  border-color: var(--accent);
}

.phone-header-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--nav-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: all 0.2s ease;
}

.phone-header-btn:hover {
  background: rgba(255, 178, 58, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 16px;
    background: rgba(18, 48, 95, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .navbar::before {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .phone-header-btn {
    display: flex;
  }

  .nav-container {
    height: 64px;
    justify-content: center;
  }

  .nav-brand {
    margin-left: 0;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 64px;
    right: 0;
    left: 0;
    flex-direction: column;
    background: rgba(18, 48, 95, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 16px 0 24px;
    gap: 4px;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-item {
    width: 100%;
    text-align: center;
  }

  .nav-link {
    display: block;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 0;
  }

  .nav-link::after {
    display: none;
  }

  .nav-cta-container {
    display: none;
  }
}
:root {
  --nav-bg: transparent;
  --nav-text: #F8F8F6;
  --nav-text-hover: #FFB23A;
  --primary: #0A43B5;
  --secondary: #F68B00;
  --accent: #FFB23A;
  --bg-light: #F8F8F6;
  --bg-dark: #12305F;
  --text-dark: #12305F;
  --text-light: #F8F8F6;
  --text-muted: #6C7A92;
  --border-light: #D9E1EC;
  --border-dark: #31507F;
}

.navbar {
  background: var(--nav-bg);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  padding: 0 24px;
  box-sizing: border-box;
  direction: rtl;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

.navbar::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(18, 48, 95, 0.72) 0%, rgba(18, 48, 95, 0) 100%);
  pointer-events: none;
  z-index: 0;
}

.nav-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: row;
  height: 72px;
  gap: 0;
}

.nav-brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 40px;
}

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

.logo {
  max-height: 40px;
  height: auto;
  width: auto;
  display: block;
}

.nav-menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 8px;
  flex: 1;
}

.nav-item {
  position: relative;
}

.nav-link {
  display: inline-block;
  color: var(--nav-text);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
  white-space: nowrap;
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  right: 16px;
  left: 16px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.2s ease;
}

.nav-link:hover {
  color: var(--nav-text-hover);
  background: rgba(255, 178, 58, 0.08);
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-cta-container {
  margin-right: auto;
  margin-left: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.nav-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--primary);
  color: #F8F8F6;
  text-decoration: none;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1;
  position: relative;
  overflow: hidden;
}

.nav-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,178,58,0.15) 0%, transparent 60%);
  
  transition: opacity 0.2s ease;
}

.nav-cta-btn:hover {
  background: #0d52d9;
  border-color: var(--accent);
  box-shadow: 0 10px 40px rgba(247, 148, 29, 0.3);
  transform: translateY(-1px);
  color: #F8F8F6;
}

.nav-cta-btn:hover::before {
  opacity: 1;
}

.mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--nav-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: all 0.2s ease;
}

.mobile-toggle:hover {
  background: rgba(255, 178, 58, 0.15);
  border-color: var(--accent);
}

.phone-header-btn {
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--nav-text);
  cursor: pointer;
  padding: 8px;
  border-radius: 6px;
  position: absolute;
  left: 56px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  transition: all 0.2s ease;
}

.phone-header-btn:hover {
  background: rgba(255, 178, 58, 0.15);
  border-color: var(--accent);
  color: var(--accent);
}

@media (max-width: 768px) {
  .navbar {
    padding: 0 16px;
    background: rgba(18, 48, 95, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }

  .navbar::before {
    display: none;
  }

  .mobile-toggle {
    display: flex;
  }

  .phone-header-btn {
    display: flex;
  }

  .nav-container {
    height: 64px;
    justify-content: center;
  }

  .nav-brand {
    margin-left: 0;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 64px;
    right: 0;
    left: 0;
    flex-direction: column;
    background: rgba(18, 48, 95, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 16px 0 24px;
    gap: 4px;
    border-top: 1px solid var(--border-dark);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  }

  .nav-menu.is-open {
    display: flex;
  }

  .nav-item {
    width: 100%;
    text-align: center;
  }

  .nav-link {
    display: block;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 0;
  }

  .nav-link::after {
    display: none;
  }

  .nav-cta-container {
    display: none;
  }
}


/* ============================================
   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, #0A43B5));
  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) {
  /* 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: 50%;
    transform: translateY(-50%);
    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;
    height: 36px !important;
    color: var(--nav-text, var(--text-light)) !important;
  }
  
  .phone-header-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    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;
    height: 36px !important;
    color: var(--nav-text, var(--text-light)) !important;
  }
  
  /* 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;
  }
  
  /* 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;
     !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;
     !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: hidden !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:hidden anchors
      the navbar to the real layout viewport on all mobile browsers.
   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: hidden !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 { margin-top: 0 !important; padding-top: 0 !important; }


/* Footer Styles */
.site-footer {
  --primary: #0A43B5;
  --secondary: #F68B00;
  --accent: #FFB23A;
  --bg-light: #F8F8F6;
  --bg-dark: #12305F;
  --text-dark: #12305F;
  --text-light: #F8F8F6;
  --text-muted: #6C7A92;
  --border-light: #D9E1EC;
  --border-dark: #31507F;

  background-color: var(--bg-dark);
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
  direction: rtl;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: -120px;
  left: -120px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(246,139,0,0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.site-footer::after {
  content: '';
  position: absolute;
  bottom: -80px;
  right: -80px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(10,67,181,0.13) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.footer-top {
  padding: 4rem 0 3rem;
  position: relative;
  z-index: 1;
}

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

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1.3fr 1.4fr;
  gap: 2.5rem;
  align-items: start;
}

/* Brand Column */
.footer-col--brand .footer-logo-wrap {
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
}

.footer-col--brand .logo {
  display: block;
  max-width: 150px;
  height: auto;
  object-fit: contain;
  background: rgba(255,255,255,0.06);
  border-radius: 8px;
  padding: 6px 10px;
}

.footer-tagline {
  font-size: 0.88rem;
  line-height: 1.75;
  color: rgba(248,248,246,0.70);
  margin: 0 0 1.5rem;
  max-width: 280px;
}

/* Social */
.footer-social {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
}

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

.footer-social a:hover {
  background: var(--secondary);
  border-color: var(--secondary);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(246,139,0,0.35);
}

/* Headings */
.footer-heading {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.footer-heading-accent {
  display: inline-block;
  width: 18px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  flex-shrink: 0;
}

/* Quick Links */
.footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links li a {
  color: rgba(248,248,246,0.72);
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.2s ease;
  padding: 0.15rem 0;
  border-radius: 4px;
}

.footer-links li a::before {
  content: '\2190';
  font-size: 0.75rem;
  color: var(--secondary);
  
  transform: translateX(4px);
  transition: all 0.2s ease;
  display: inline-block;
}

.footer-links li a:hover {
  color: var(--accent);
  padding-right: 4px;
}

.footer-links li a:hover::before {
  opacity: 1;
  transform: translateX(0);
}

/* Contact */
.footer-contact {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

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

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(246,139,0,0.15);
  color: var(--secondary);
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 1px;
  border: 1px solid rgba(246,139,0,0.25);
}

.contact-text {
  font-size: 0.88rem;
  color: rgba(248,248,246,0.72);
  line-height: 1.6;
}

.contact-text a {
  color: rgba(248,248,246,0.72);
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-text a:hover {
  color: var(--accent);
}

/* CTA Column */
.footer-col--cta .footer-cta-text {
  font-size: 0.87rem;
  color: rgba(248,248,246,0.68);
  line-height: 1.7;
  margin: 0 0 1.2rem;
}

.footer-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--secondary);
  color: #fff;
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.65rem 1.3rem;
  border-radius: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 2px 16px rgba(246,139,0,0.25);
  margin-bottom: 1.3rem;
}

.footer-cta-btn:hover {
  background: var(--accent);
  color: var(--bg-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(246,139,0,0.38);
}

.footer-cta-btn i {
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.footer-cta-btn:hover i {
  transform: translateX(-3px);
}

.footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-dark);
  border-radius: 8px;
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  color: rgba(248,248,246,0.65);
}

.footer-badge i {
  color: var(--accent);
  font-size: 0.85rem;
}

/* Divider */
.footer-divider {
  height: 1px;
  background: linear-gradient(to left, transparent, var(--border-dark), transparent);
  margin: 0 2rem;
  position: relative;
  z-index: 1;
}

/* Bottom Bar */
.footer-bottom {
  padding: 1.4rem 0;
  position: relative;
  z-index: 1;
}

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

.footer-copyright {
  font-size: 0.82rem;
  color: rgba(248,248,246,0.50);
  margin: 0;
}

.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.footer-legal a {
  font-size: 0.82rem;
  color: rgba(248,248,246,0.55);
  text-decoration: none;
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.footer-legal a:hover {
  color: var(--accent);
  background: rgba(255,178,58,0.08);
}

.footer-legal-sep {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--border-dark);
  border-radius: 1px;
  flex-shrink: 0;
}

.zappy-attribution {
  font-size: 0.80rem !important;
  color: rgba(248,248,246,0.40) !important;
  text-decoration: none;
  transition: color 0.2s ease;
}

.zappy-attribution:hover {
  color: var(--accent) !important;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem 2rem;
  }
}

@media (max-width: 767px) {
  .footer-top {
    padding: 3rem 0 2rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-tagline {
    max-width: 100%;
  }

  .footer-bottom-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }

  .footer-legal {
    gap: 0.25rem;
  }

  .footer-divider {
    margin: 0 1rem;
  }

  .footer-container {
    padding: 0 1.25rem;
  }
}


/* 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: #6C7A92 !important;
}
.site-footer .contact-list a:hover,
.site-footer .footer-legal a:hover,
.site-footer .footer-bottom a:hover {
  color: #F8F8F6 !important;
}
.site-footer .footer-legal .separator {
  color: #31507F !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; }
/* index-hero */
.index-hero-section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: visible;
  background-color: #12305F;
  color: var(--text-light);
  padding-bottom: 90px;
  direction: rtl;
}

/* Background Image */
.index-hero-section .index-hero-bg-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.index-hero-section .index-hero-bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  border-radius: 0;
}

/* Scrim Overlay */
.index-hero-section .index-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image:
    linear-gradient(to left, rgba(10, 30, 70, 0.92) 0%, rgba(13, 33, 71, 0.85) 40%, rgba(13, 33, 71, 0.55) 70%, rgba(13, 33, 71, 0.2) 100%),
    linear-gradient(to top, rgba(10, 25, 60, 0.75) 0%, transparent 60%);
}

/* Solar Rays Decoration */
.index-hero-section .index-hero-solar-rays {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  width: 500px;
  height: 500px;
  z-index: 2;
  pointer-events: none;
  opacity: 1;
}

/* Container */
.index-hero-section .index-hero-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 100vh;
}

/* Content Group — anchored to start (right) side */
.index-hero-section .index-hero-content {
  max-width: 640px;
  padding-top: 80px;
  padding-bottom: 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  text-align: right;
}

/* Label */
.index-hero-section .index-hero-label {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255, 178, 58, 0.12);
  border: 1px solid rgba(255, 178, 58, 0.3);
  border-radius: 6px;
  padding: 6px 14px;
  text-align: right;
}

/* H1 */
.index-hero-section .index-hero-h1 {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.15;
  color: var(--text-light);
  letter-spacing: -0.01em;
  margin: 0;
  text-shadow: 0 2px 20px rgba(10, 25, 60, 0.6);
  text-align: right;
}

.index-hero-section .index-hero-accent {
  background: linear-gradient(135deg, #F7941D 0%, #FFB23A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline;
}

/* Subtitle H3 */
.index-hero-section .index-hero-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.75;
  color: rgba(248, 248, 246, 0.88);
  margin: 0;
  text-shadow: 0 1px 8px rgba(10, 25, 60, 0.5);
  text-align: right;
  max-width: 580px;
}

/* CTA Buttons */
.index-hero-section .index-hero-ctas {
  display: flex;
  flex-direction: row;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}

.index-hero-section .index-hero-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #F7941D 0%, #FFB23A 100%);
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 10px 40px rgba(247, 148, 29, 0.35);
  white-space: nowrap;
}

.index-hero-section .index-hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(247, 148, 29, 0.5);
  background: linear-gradient(135deg, #e8850a 0%, #F7941D 100%);
}

.index-hero-section .index-hero-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 13px 27px;
  border-radius: 8px;
  border: 2px solid rgba(248, 248, 246, 0.65);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
}

.index-hero-section .index-hero-btn-secondary:hover {
  background: rgba(248, 248, 246, 0.12);
  border-color: var(--text-light);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(10, 25, 60, 0.25);
}

/* Trust Line */
.index-hero-section .index-hero-trust {
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(248, 248, 246, 0.7);
  margin: 0;
  text-align: right;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

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

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

/* ── RESPONSIVE ────────────────────────────────────────────────── */

@media (min-width: 768px) {
  .index-hero-section .index-hero-h1 {
    font-size: 3.6rem;
  }

  .index-hero-section .index-hero-content {
    padding-top: 100px;
  }
}

@media (max-width: 767px) {
  .index-hero-section {
    min-height: 100svh;
    padding-bottom: 90px;
    align-items: flex-end;
  }

  .index-hero-section .index-hero-container {
    padding: 0 16px;
    min-height: 100svh;
    align-items: flex-end;
    padding-bottom: 110px;
  }

  .index-hero-section .index-hero-content {
    max-width: 100%;
    padding-top: 100px;
    padding-bottom: 0;
    gap: 16px;
  }

  .index-hero-section .index-hero-h1 {
    font-size: 2.1rem;
    line-height: 1.2;
  }

  .index-hero-section .index-hero-subtitle {
    font-size: 0.95rem;
    line-height: 1.7;
  }

  .index-hero-section .index-hero-ctas {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

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

  .index-hero-section .index-hero-solar-rays {
    width: 280px;
    height: 280px;
    opacity: 0.6;
  }

  .index-hero-section .index-hero-trust {
    font-size: 0.8rem;
  }

  .index-hero-section .index-hero-scrim {
    background-image:
      linear-gradient(to left, rgba(10, 30, 70, 0.95) 0%, rgba(13, 33, 71, 0.9) 50%, rgba(13, 33, 71, 0.75) 100%),
      linear-gradient(to top, rgba(10, 25, 60, 0.9) 0%, transparent 60%);
  }
}

/* index-about */
.index-about-section {
  position: relative;
  background: #FFFFFF;
  color: var(--text-dark);
  padding: 96px 24px 128px;
  overflow: visible;
  direction: rtl;
}

/* Dot grid decorative background */
.index-about-section__dot-grid {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 50%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(26,58,107,0.05) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

.index-about-section__container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: 72px;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── CONTENT COLUMN ── */
.index-about-section__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.index-about-section__label {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  background: rgba(246, 139, 0, 0.1);
  border: 1px solid rgba(246, 139, 0, 0.25);
  border-radius: 6px;
  padding: 4px 12px;
  margin-bottom: 18px;
}

.index-about-section__heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 14px 0;
  text-align: right;
}

.index-about-section__heading-accent {
  display: block;
  color: var(--primary);
}

.index-about-section__accent-bar {
  width: 48px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  margin-bottom: 28px;
}

.index-about-section__body {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-dark);
  text-align: right;
  margin: 0 0 16px 0;
  max-width: 560px;
}

/* ── EXPERTISE LIST ── */
.index-about-section__expertise-list {
  list-style: none;
  margin: 24px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}

.index-about-section__expertise-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  align-items: center;
  gap: 14px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 16px rgba(26,58,107,0.06);
  transition: all 0.25s ease;
}

.index-about-section__expertise-item:hover {
  box-shadow: 0 6px 24px rgba(26,58,107,0.12);
  transform: translateY(-2px);
  border-color: var(--primary);
}

.index-about-section__expertise-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(10,67,181,0.08) 0%, rgba(10,67,181,0.14) 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
}

.index-about-section__expertise-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.index-about-section__expertise-text strong {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
}

.index-about-section__expertise-text span {
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── IMAGE COLUMN ── */
.index-about-section__image-col {
  position: relative;
  display: flex;
  align-items: stretch;
}

.index-about-section__image-wrapper {
  position: relative;
  width: 100%;
}

.index-about-section__img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(26,58,107,0.18);
  display: block;
  transition: transform 0.25s ease;
}

.index-about-section__img:hover {
  transform: scale(1.02);
}

/* Orange emblem decorative motif — bottom-start corner (left in RTL) */
.index-about-section__orange-emblem {
  position: absolute;
  bottom: -32px;
  inset-inline-start: -36px;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 2;
  filter: drop-shadow(0 8px 24px rgba(246,139,0,0.3));
}

.index-about-section__orange-emblem svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Floating stat badge */
.index-about-section__stat-badge {
  position: absolute;
  top: 28px;
  inset-inline-end: -24px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 10px 40px rgba(26,58,107,0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 130px;
  text-align: center;
  z-index: 3;
}

.index-about-section__stat-number {
  font-family: 'Rubik', sans-serif;
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--primary);
  line-height: 1.1;
}

.index-about-section__stat-label {
  font-family: 'Rubik', sans-serif;
  font-size: 0.75rem;
  color: var(--text-muted);
  line-height: 1.4;
  text-align: center;
}

/* ── BOTTOM DIVIDER ── */
.index-about-section__divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  pointer-events: none;
  z-index: 5;
}

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

/* ══════════════════════════════════════
   RESPONSIVE — TABLET
══════════════════════════════════════ */
@media (max-width: 1024px) {
  .index-about-section__container {
    grid-template-columns: 1fr 380px;
    gap: 48px;
  }

  .index-about-section__stat-badge {
    inset-inline-end: -12px;
  }
}

/* ══════════════════════════════════════
   RESPONSIVE — MOBILE
══════════════════════════════════════ */
@media (max-width: 768px) {
  .index-about-section {
    padding: 56px 16px 96px;
  }

  .index-about-section__container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .index-about-section__heading {
    font-size: 1.625rem;
  }

  .index-about-section__body {
    max-width: 100%;
  }

  .index-about-section__image-col {
    
  }

  .index-about-section__img {
    height: 280px;
  }

  .index-about-section__orange-emblem {
    width: 80px;
    height: 80px;
    bottom: -20px;
    inset-inline-start: -16px;
  }

  .index-about-section__stat-badge {
    position: static;
    margin-top: 16px;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
    min-width: unset;
    width: 100%;
    box-sizing: border-box;
  }

  .index-about-section__stat-number {
    font-size: 1.25rem;
  }

  .index-about-section__dot-grid {
    width: 100%;
  }
}
/* ZAPPY_POSTGEN_GUARD_RTL_ORDER:בית-about — stripped 1 order declaration(s) conflicting with RTL grid */


/* index-benefits */
.index-benefits-section {
  position: relative;
  overflow: visible;
  background-color: #EEF2F7;
  background-image: none;
  color: var(--text-dark);
  padding: 96px 24px 120px;
  direction: rtl;
  font-family: 'Rubik', sans-serif;
}

/* Dot grid decorative background */
.index-benefits-section .index-benefits-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26,58,107,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

/* Container */
.index-benefits-section .index-benefits-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.index-benefits-section .index-benefits-header {
  text-align: center;
  margin-bottom: 56px;
}

.index-benefits-section .index-benefits-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  background-color: rgba(246, 139, 0, 0.1);
  border: 1px solid rgba(246, 139, 0, 0.25);
  border-radius: 6px;
  padding: 4px 14px;
  margin-bottom: 14px;
}

.index-benefits-section .index-benefits-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 auto 12px;
  max-width: 600px;
}

.index-benefits-section .index-benefits-accent-bar {
  width: 48px;
  height: 3px;
  background-color: var(--secondary);
  border-radius: 2px;
  margin: 0 auto 20px;
}

.index-benefits-section .index-benefits-subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* Benefits Grid — 4 columns on desktop */
.index-benefits-section .index-benefits-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  direction: rtl;
}

/* Individual Card */
.index-benefits-section .index-benefits-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(26,58,107,0.08);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  z-index: 1;
}

.index-benefits-section .index-benefits-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.12);
}

/* Icon Badge */
.index-benefits-section .index-benefits-icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.index-benefits-section .index-benefits-icon-badge--blue {
  background-color: rgba(10, 67, 181, 0.1);
  color: var(--primary);
}

.index-benefits-section .index-benefits-icon-badge--orange {
  background-color: rgba(246, 139, 0, 0.12);
  color: var(--secondary);
}

/* Card Content */
.index-benefits-section .index-benefits-card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  width: 100%;
}

.index-benefits-section .index-benefits-card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0 0 10px 0;
  text-align: right;
}

.index-benefits-section .index-benefits-card-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  text-align: right;
}

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

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

/* ─── Responsive: 2 columns on tablet ─── */
@media (max-width: 1024px) {
  .index-benefits-section .index-benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ─── Responsive: Mobile ─── */
@media (max-width: 768px) {
  .index-benefits-section {
    padding: 56px 16px 100px;
  }

  .index-benefits-section .index-benefits-header {
    margin-bottom: 36px;
  }

  .index-benefits-section .index-benefits-title {
    font-size: 1.6rem;
  }

  .index-benefits-section .index-benefits-subtitle {
    font-size: 1rem;
  }

  .index-benefits-section .index-benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .index-benefits-section .index-benefits-card {
    padding: 24px 20px;
    flex-direction: column;
    align-items: flex-end;
  }

  .index-benefits-section .index-benefits-icon-badge {
    width: 48px;
    height: 48px;
    margin-bottom: 14px;
  }

  .index-benefits-section .index-benefits-divider-wrapper {
    height: 50px;
  }
}

/* index-process */
.index-process-section {
  position: relative;
  overflow: visible;
  background-color: #12305F;
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(255,178,58,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(246,139,0,0.06) 0%, transparent 50%),
    linear-gradient(135deg, #1A3A6B 0%, #0D2147 100%);
  color: var(--text-light);
  padding: 96px 24px 130px;
  direction: rtl;
}

/* Dot grid decoration */
.index-process-section__dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

.index-process-section__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Header ── */
.index-process-section__header {
  text-align: center;
  margin-bottom: 72px;
}

.index-process-section__label {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,178,58,0.12);
  border: 1px solid rgba(255,178,58,0.3);
  border-radius: 6px;
  padding: 4px 14px;
  margin-bottom: 18px;
}

.index-process-section__title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0 0 16px;
  max-width: none !important;
}

.index-process-section__subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(248,248,246,0.72);
  margin: 0 auto;
  max-width: 560px;
}

/* ── Timeline Grid ── */
.index-process-section__timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0 8px;
  align-items: start;
  margin-bottom: 64px;
}

/* Horizontal connector line (desktop) */
.index-process-section__connector-line {
  position: absolute;
  top: 28px;
  right: calc(100% / 12);
  left: calc(100% / 12);
  height: 2px;
  background: linear-gradient(to left, rgba(255,178,58,0.15) 0%, rgba(255,178,58,0.55) 50%, rgba(255,178,58,0.15) 100%);
  z-index: 0;
  pointer-events: none;
}

/* ── Individual Step ── */
.index-process-section__step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 4px;
}

/* Marker area */
.index-process-section__step-marker {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
}

.index-process-section__step-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F68B00 0%, #FFB23A 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 4px rgba(255,178,58,0.18), 0 4px 20px rgba(246,139,0,0.35);
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}

.index-process-section__step-ring--last {
  background: linear-gradient(135deg, #FFB23A 0%, #F68B00 100%);
  box-shadow: 0 0 0 6px rgba(255,178,58,0.25), 0 6px 28px rgba(246,139,0,0.45);
}

.index-process-section__step-number {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #12305F;
  line-height: 1;
  letter-spacing: -0.01em;
}

.index-process-section__step-dot {
  width: 2px;
  height: 16px;
  background: rgba(255,178,58,0.35);
  margin-top: 2px;
}

/* Step content */
.index-process-section__step-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.index-process-section__step-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(248,248,246,0.75);
  flex-shrink: 0;
}

.index-process-section__step-icon--accent {
  background: rgba(255,178,58,0.15);
  border-color: rgba(255,178,58,0.3);
  color: var(--accent);
}

.index-process-section__step-title {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-light);
  margin: 0;
}

.index-process-section__step-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.65;
  color: rgba(248,248,246,0.65);
  margin: 0;
}

/* ── CTA ── */
.index-process-section__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}

.index-process-section__cta-btn {
  font-family: 'Rubik', sans-serif;
  background: linear-gradient(135deg, #F68B00 0%, #FFB23A 100%);
  color: #12305F !important;
  padding: 14px 32px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 6px 24px rgba(246,139,0,0.35);
}

.index-process-section__cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(247,148,29,0.45);
}

.index-process-section__cta-note {
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(248,248,246,0.55);
  margin: 0;
}

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

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

/* ── RESPONSIVE — TABLET ── */
@media (max-width: 1024px) {
  .index-process-section__timeline {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 16px;
  }

  .index-process-section__connector-line {
    display: none;
  }
}

/* ── RESPONSIVE — MOBILE ── */
@media (max-width: 768px) {
  .index-process-section {
    padding: 56px 16px 110px;
  }

  .index-process-section__header {
    margin-bottom: 48px;
  }

  .index-process-section__title {
    font-size: 1.5rem;
  }

  .index-process-section__timeline {
    grid-template-columns: 1fr !important;
    gap: 0;
    padding-inline-start: 16px;
  }

  .index-process-section__connector-line {
    display: none;
  }

  /* Vertical timeline layout on mobile */
  .index-process-section__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: start;
    gap: 16px;
    padding: 0 0 32px 0;
    position: relative;
  }

  /* Vertical line between steps */
  .index-process-section__step:not(:last-child)::before {
    content: '';
    position: absolute;
    top: 56px;
    right: 27px;
    width: 2px;
    bottom: 0;
    background: rgba(255,178,58,0.25);
    z-index: 0;
  }

  .index-process-section__step-marker {
    flex-direction: column;
    align-items: center;
    margin-bottom: 0;
    flex-shrink: 0;
  }

  .index-process-section__step-dot {
    display: none;
  }

  .index-process-section__step-ring {
    width: 54px;
    height: 54px;
  }

  .index-process-section__step-content {
    align-items: flex-start;
    gap: 8px;
    padding-top: 4px;
  }

  .index-process-section__step-icon {
    width: 38px;
    height: 38px;
  }

  .index-process-section__step-title {
    font-size: 1rem;
  }

  .index-process-section__step-desc {
    font-size: 0.875rem;
  }

  .index-process-section__cta-btn {
    width: 100%;
    max-width: 360px;
    justify-content: center;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .index-process-section__step {
    align-items: center;
    text-align: center;
  }
}

/* index-cta */
.index-cta-section {
  position: relative;
  overflow: visible;
  background-color: #F8F8F6;
  background-image:
    radial-gradient(ellipse at 10% 80%, rgba(10, 67, 181, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 20%, rgba(246, 139, 0, 0.07) 0%, transparent 50%),
    linear-gradient(135deg, #FFFFFF 0%, #F8F8F6 100%);
  color: var(--text-dark);
  padding: 96px 24px;
  direction: rtl;
}

/* Decorative dot grid */
.index-cta-section .index-cta-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10, 67, 181, 0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

/* Decorative solar rays SVG */
.index-cta-section .index-cta-rays {
  position: absolute;
  top: -40px;
  inset-inline-end: 0;
  width: 420px;
  height: 420px;
  pointer-events: none;
  z-index: 0;
}

/* Container */
.index-cta-section .index-cta-container {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Badge */
.index-cta-section .index-cta-badge {
  display: inline-block;
  background: rgba(10, 67, 181, 0.08);
  color: var(--primary);
  border: 1.5px solid rgba(10, 67, 181, 0.18);
  border-radius: 6px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 16px;
  margin-bottom: 24px;
  text-transform: uppercase;
}

/* Heading */
.index-cta-section .index-cta-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 8px 0;
  max-width: none !important;
}

/* Orange underline accent on heading */
.index-cta-section .index-cta-heading::after {
  content: '';
  display: block;
  width: 56px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  margin: 14px auto 0;
}

/* Supporting text */
.index-cta-section .index-cta-subtext {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 24px 0 36px 0;
  max-width: 560px;
  text-align: center;
}

/* Buttons wrapper */
.index-cta-section .index-cta-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 380px;
  margin-bottom: 40px;
}

/* Primary CTA button */
.index-cta-section .index-cta-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--secondary);
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 16px 28px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(246, 139, 0, 0.22);
}

.index-cta-section .index-cta-btn-primary:hover {
  background: #e07e00;
  box-shadow: 0 10px 40px rgba(247, 148, 29, 0.3);
  transform: translateY(-2px);
}

.index-cta-section .index-cta-btn-primary i {
  font-size: 1rem;
}

/* Secondary CTA button */
.index-cta-section .index-cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  color: var(--primary);
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 8px;
  border: 2px solid var(--primary);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.index-cta-section .index-cta-btn-secondary:hover {
  background: var(--primary);
  color: var(--text-light);
  box-shadow: 0 10px 40px rgba(26, 58, 107, 0.12);
  transform: translateY(-2px);
}

.index-cta-section .index-cta-btn-secondary i {
  font-size: 1rem;
}

/* Micro-assurance strip */
.index-cta-section .index-cta-assurance {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 28px;
}

.index-cta-section .index-cta-assurance span {
  white-space: nowrap;
}

.index-cta-section .index-cta-dot {
  color: var(--secondary);
  font-size: 1rem;
  line-height: 1;
  font-weight: 700;
}

/* Green accent line */
.index-cta-section .index-cta-green-accent {
  width: 72px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #2ECC71 0%, #27AE60 100%);
  margin: 0 auto;
  opacity: 0.7;
}

/* ── RESPONSIVE ── */
@media (min-width: 768px) {
  .index-cta-section {
    padding: 96px 48px;
  }

  .index-cta-section .index-cta-heading {
    font-size: 2.6rem;
  }

  .index-cta-section .index-cta-buttons {
    max-width: 420px;
  }

  .index-cta-section .index-cta-rays {
    width: 500px;
    height: 500px;
    top: -60px;
  }
}

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

  .index-cta-section .index-cta-rays {
    width: 260px;
    height: 260px;
    top: -20px;
    opacity: 0.6;
  }

  .index-cta-section .index-cta-heading {
    font-size: 1.7rem;
  }

  .index-cta-section .index-cta-subtext {
    font-size: 16px;
    margin: 20px 0 28px 0;
  }

  .index-cta-section .index-cta-buttons {
    max-width: 100%;
    gap: 12px;
    margin-bottom: 28px;
  }

  .index-cta-section .index-cta-btn-primary,
  .index-cta-section .index-cta-btn-secondary {
    font-size: 0.95rem;
    padding: 14px 20px;
  }

  .index-cta-section .index-cta-assurance {
    font-size: 0.75rem;
    gap: 4px 8px;
  }

  .index-cta-section .index-cta-dot {
    display: none;
  }

  .index-cta-section .index-cta-assurance span {
    white-space: normal;
    text-align: center;
  }
}

/* about-intro */
.about-intro-section {
  position: relative;
  overflow: visible;
  background-color: #12305F;
  background-image:
    radial-gradient(ellipse at 10% 80%, rgba(246,139,0,0.10) 0%, transparent 55%),
    linear-gradient(135deg, #1A3A6B 0%, #0D2147 100%);
  color: var(--text-light);
  padding: 140px 24px 96px;
  direction: rtl;
}

/* Dot grid decoration */
.about-intro-section .about-intro-dot-grid {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 45%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(248,248,246,0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

.about-intro-section .about-intro-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Header Block ── */
.about-intro-section .about-intro-header {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 56px;
}

.about-intro-section .about-intro-eyebrow {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,178,58,0.12);
  border: 1px solid rgba(255,178,58,0.3);
  border-radius: 6px;
  padding: 6px 16px;
  margin-bottom: 20px;
}

.about-intro-section .about-intro-title {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-light);
  margin: 0 0 20px;
  text-align: center;
}

.about-intro-section .about-intro-accent-bar {
  width: 48px;
  height: 4px;
  background: var(--secondary);
  border-radius: 2px;
  margin: 0 auto 24px;
}

.about-intro-section .about-intro-lead {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: rgba(248,248,246,0.85);
  text-align: center;
  margin: 0;
  max-width: none !important;
}

/* ── Two-Image Mosaic ── */
.about-intro-section .about-intro-mosaic {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 0;
  margin-bottom: 56px;
  min-height: 480px;
}

.about-intro-section .about-intro-mosaic-main {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.about-intro-section .about-intro-img-main {
  display: block;
  width: 100%;
  height: 460px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  transition: transform 0.25s ease;
}

.about-intro-section .about-intro-img-main:hover {
  transform: scale(1.02);
}

/* Orange corner accent on main image */
.about-intro-section .about-intro-img-accent {
  position: absolute;
  bottom: -12px;
  inset-inline-start: -12px;
  width: 80px;
  height: 80px;
  border-inline-start: 4px solid var(--secondary);
  border-bottom: 4px solid var(--secondary);
  border-radius: 0 0 0 8px;
  pointer-events: none;
  z-index: 2;
}

/* Peek tile */
.about-intro-section .about-intro-mosaic-peek {
  position: absolute;
  bottom: -28px;
  inset-inline-end: -20px;
  width: 300px;
  z-index: 4;
}

.about-intro-section .about-intro-img-peek {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(26,58,107,0.45);
  border: 4px solid #12305F;
  transition: transform 0.25s ease;
}

.about-intro-section .about-intro-img-peek:hover {
  transform: scale(1.02);
}

/* ── Mission Statement Band ── */
.about-intro-section .about-intro-mission {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 32px 40px;
  margin-top: 60px;
}

.about-intro-section .about-intro-mission-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.about-intro-section .about-intro-mission-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  flex: 1 1 180px;
  min-width: 160px;
}

.about-intro-section .about-intro-mission-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  background: rgba(255,178,58,0.15);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.about-intro-section .about-intro-mission-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.about-intro-section .about-intro-mission-text strong {
  font-family: 'Rubik', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-light);
  line-height: 1.3;
}

.about-intro-section .about-intro-mission-text span {
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  color: rgba(248,248,246,0.65);
  line-height: 1.5;
}

.about-intro-section .about-intro-mission-divider {
  width: 1px;
  height: 48px;
  background: var(--border-dark);
  flex-shrink: 0;
  align-self: center;
}

/* ── Bottom Stepped Divider ── */
.about-intro-section .about-intro-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  pointer-events: none;
  z-index: 5;
}

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

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .about-intro-section .about-intro-mosaic-peek {
    width: 240px;
    inset-inline-end: -10px;
  }
}

@media (max-width: 900px) {
  .about-intro-section .about-intro-mission-divider {
    display: none;
  }
  .about-intro-section .about-intro-mission-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

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

  .about-intro-section .about-intro-title {
    font-size: 2rem;
  }

  .about-intro-section .about-intro-header {
    margin-bottom: 36px;
  }

  .about-intro-section .about-intro-mosaic {
    flex-direction: column;
    min-height: auto;
    gap: 16px;
    align-items: stretch;
    margin-bottom: 80px;
  }

  .about-intro-section .about-intro-mosaic-main {
    width: 100%;
  }

  .about-intro-section .about-intro-img-main {
    height: 260px;
    border-radius: 12px;
  }

  .about-intro-section .about-intro-mosaic-peek {
    position: static;
    width: 100%;
    inset-inline-end: auto;
    bottom: auto;
  }

  .about-intro-section .about-intro-img-peek {
    height: 180px;
    width: 100%;
    border: 3px solid #12305F;
  }

  .about-intro-section .about-intro-img-accent {
    display: none;
  }

  .about-intro-section .about-intro-mission {
    padding: 24px 20px;
    margin-top: 24px;
  }

  .about-intro-section .about-intro-mission-inner {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .about-intro-section .about-intro-mission-divider {
    display: none;
  }

  .about-intro-section .about-intro-dot-grid {
    width: 100%;
    opacity: 0.5;
  }
}

/* about-story */
.about-story-section {
  position: relative;
  overflow: visible;
  background-color: #FFFFFF;
  background-image:
    radial-gradient(ellipse at 10% 90%, rgba(10,67,181,0.04) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, rgba(246,139,0,0.06) 0%, transparent 50%),
    linear-gradient(160deg, #FFFFFF 0%, #F8F8F6 100%);
  color: var(--text-dark);
  padding: 96px 24px 144px;
  direction: rtl;
}

/* Dot grid decoration */
.about-story-section .about-story-dot-grid {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 55%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(10,67,181,0.07) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

.about-story-section .about-story-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  direction: rtl;
}

/* ── TEXT COLUMN ── */
.about-story-section .about-story-text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.about-story-section .about-story-label {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 14px;
  text-align: right;
}

.about-story-section .about-story-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  text-align: right;
}

.about-story-section .about-story-accent-bar {
  width: 48px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  margin-bottom: 28px;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

.about-story-section .about-story-body {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text-muted);
  text-align: right;
  margin: 0 0 20px 0;
}

.about-story-section .about-story-body:last-child {
  margin-bottom: 0;
}

/* ── PRINCIPLES COLUMN ── */
.about-story-section .about-story-principles {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about-story-section .about-story-principle-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(26,58,107,0.08);
  padding: 28px 28px 28px 24px;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  direction: rtl;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border-inline-start: 3px solid transparent;
}

.about-story-section .about-story-principle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.12);
  border-inline-start-color: var(--secondary);
}

.about-story-section .about-story-principle-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(246,139,0,0.12) 0%, rgba(255,178,58,0.10) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--secondary);
  flex-shrink: 0;
}

.about-story-section .about-story-principle-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.about-story-section .about-story-principle-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-dark);
  margin: 0;
  text-align: right;
}

.about-story-section .about-story-principle-content p {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  text-align: right;
}

/* ── BOTTOM WAVE DIVIDER ── */
.about-story-section .about-story-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 72px;
  pointer-events: none;
  z-index: 5;
}

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

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .about-story-section .about-story-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .about-story-section .about-story-dot-grid {
    width: 100%;
    opacity: 0.5;
  }
}

@media (max-width: 768px) {
  .about-story-section {
    padding: 56px 16px 120px;
  }

  .about-story-section .about-story-container {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0;
  }

  .about-story-section .about-story-heading {
    font-size: 1.625rem;
  }

  .about-story-section .about-story-principle-card {
    padding: 20px 18px;
    grid-template-columns: 40px 1fr;
    gap: 14px;
  }

  .about-story-section .about-story-principle-icon {
    width: 40px;
    height: 40px;
  }

  .about-story-section .about-story-principle-title {
    font-size: 1rem;
  }

  .about-story-section .about-story-divider-wrapper {
    height: 48px;
  }
}

/* about-team */
.about-team-section {
  position: relative;
  background-color: #F8F8F6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%231A3A6B' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  color: var(--text-dark);
  padding: 96px 24px 130px;
  overflow: visible;
  direction: rtl;
}

/* Dot grid decoration */
.about-team-section .about-team-dot-grid {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Ccircle cx='2' cy='2' r='1.5' fill='%231A3A6B' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

.about-team-section .about-team-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Header */
.about-team-section .about-team-header {
  text-align: center;
  margin-bottom: 56px;
}

.about-team-section .about-team-badge {
  display: inline-block;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  color: #12305F;
  font-family: 'Rubik', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 6px 18px;
  border-radius: 6px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.about-team-section .about-team-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.3;
  margin: 0 0 16px 0;
}

.about-team-section .about-team-accent-line {
  width: 48px;
  height: 3px;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  border-radius: 2px;
  margin: 0 auto 20px auto;
}

.about-team-section .about-team-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

/* Grid */
.about-team-section .about-team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  direction: rtl;
}

/* Cards */
.about-team-section .about-team-card {
  position: relative;
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
  padding: 32px;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: right;
}

.about-team-section .about-team-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26, 58, 107, 0.12);
}

/* Card background motif — subtle solar grid lines */
.about-team-section .about-team-card-bg-motif {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 28px,
      rgba(26, 58, 107, 0.03) 28px,
      rgba(26, 58, 107, 0.03) 29px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 28px,
      rgba(26, 58, 107, 0.03) 28px,
      rgba(26, 58, 107, 0.03) 29px
    );
  pointer-events: none;
  z-index: 0;
}

/* Icon emblem */
.about-team-section .about-team-icon-emblem {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #EEF4FF 0%, #D6E4FF 100%);
  border: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.about-team-section .about-team-card:hover .about-team-icon-emblem {
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  border-color: #F7941D;
  color: #FFFFFF;
}

/* Card content */
.about-team-section .about-team-card-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about-team-section .about-team-card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--text-dark);
  line-height: 1.4;
  margin: 0;
}

.about-team-section .about-team-card-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
}

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

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

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .about-team-section .about-team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .about-team-section {
    padding: 56px 16px 110px;
  }

  .about-team-section .about-team-header {
    margin-bottom: 36px;
  }

  .about-team-section .about-team-title {
    font-size: 1.6rem;
  }

  .about-team-section .about-team-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .about-team-section .about-team-card {
    padding: 24px;
  }

  .about-team-section .about-team-icon-emblem {
    width: 52px;
    height: 52px;
  }

  .about-team-section .about-team-divider-wrapper {
    height: 60px;
  }

  .about-team-section {
    padding-bottom: 80px;
  }
}

/* about-vision */
.about-vision-section {
  position: relative;
  overflow: visible;
  background-color: #12305F;
  background-image:
    radial-gradient(ellipse at 50% 0%, rgba(255,178,58,0.08) 0%, transparent 60%),
    linear-gradient(160deg, #1A3A6B 0%, #0D2147 100%);
  color: var(--text-light);
  padding: 96px 24px 120px;
  direction: rtl;
  text-align: right;
}

/* Decorative rays */
.about-vision-section .about-vision-rays {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.about-vision-section .about-vision-rays svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Container */
.about-vision-section .about-vision-container {
  position: relative;
  z-index: 2;
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

/* Label */
.about-vision-section .about-vision-label {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,178,58,0.12);
  border: 1px solid rgba(255,178,58,0.3);
  border-radius: 6px;
  padding: 6px 16px;
}

/* Heading */
.about-vision-section .about-vision-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0;
  max-width: 720px;
  text-align: center;
}

/* Line motif */
.about-vision-section .about-vision-line-motif {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 500px;
}

.about-vision-section .motif-line {
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,178,58,0.6), rgba(255,178,58,0.9));
  border-radius: 2px;
  flex-shrink: 0;
}

.about-vision-section .motif-line--short {
  width: 48px;
  background: linear-gradient(270deg, transparent, rgba(255,178,58,0.6), rgba(255,178,58,0.9));
}

.about-vision-section .motif-line--long {
  flex: 1;
  max-width: 200px;
  background: linear-gradient(90deg, rgba(255,178,58,0.9), rgba(255,178,58,0.3), transparent);
}

.about-vision-section .motif-sun {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Body */
.about-vision-section .about-vision-body {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.85;
  color: rgba(248,248,246,0.88);
  margin: 0;
  max-width: 700px;
  text-align: center;
}

/* Image strip */
.about-vision-section .about-vision-image-strip {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 48px auto 0;
  padding: 0 24px;
}

.about-vision-section .about-vision-image-wrapper {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(10,20,50,0.45);
}

.about-vision-section .about-vision-image-wrapper img {
  display: block;
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.4s ease;
}

.about-vision-section .about-vision-image-wrapper:hover img {
  transform: scale(1.02);
}

/* Image overlay: top dark fade + bottom dark fade for seamless blend */
.about-vision-section .about-vision-image-overlay {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background:
    linear-gradient(
      to bottom,
      rgba(13,33,71,0.55) 0%,
      rgba(13,33,71,0.10) 40%,
      rgba(13,33,71,0.10) 60%,
      rgba(13,33,71,0.65) 100%
    );
  pointer-events: none;
  z-index: 1;
}

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

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

/* ─── RESPONSIVE ──────────────────────────────────────────── */
@media (min-width: 768px) {
  .about-vision-section {
    padding: 112px 40px 140px;
  }

  .about-vision-section .about-vision-heading {
    font-size: 2.4rem;
  }

  .about-vision-section .about-vision-image-wrapper img {
    height: 380px;
  }
}

@media (max-width: 767px) {
  .about-vision-section {
    padding: 72px 16px 100px;
  }

  .about-vision-section .about-vision-container {
    gap: 18px;
  }

  .about-vision-section .about-vision-heading {
    font-size: 1.6rem;
    line-height: 1.35;
  }

  .about-vision-section .about-vision-body {
    font-size: 1rem;
    line-height: 1.75;
  }

  .about-vision-section .about-vision-image-strip {
    padding: 0 0;
    margin-top: 32px;
  }

  .about-vision-section .about-vision-image-wrapper img {
    height: 200px;
  }

  .about-vision-section .motif-line--long {
    max-width: 100px;
  }

  .about-vision-section .motif-line--short {
    width: 28px;
  }
}

/* about-assurance */
.about-assurance-section {
  position: relative;
  background: #F8F8F6;
  background-color: var(--bg-light);
  color: var(--text-dark);
  padding: 96px 24px;
  overflow: hidden;
  direction: rtl;
}

/* Dot grid decorative background */
.about-assurance-section .about-assurance-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10, 67, 181, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

/* Container */
.about-assurance-section .about-assurance-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Section Header */
.about-assurance-section .about-assurance-header {
  text-align: center;
  margin-bottom: 56px;
}

.about-assurance-section .about-assurance-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 12px 0;
}

.about-assurance-section .about-assurance-accent-bar {
  width: 48px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  margin: 0 auto 20px auto;
}

.about-assurance-section .about-assurance-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

/* Cards Grid */
.about-assurance-section .about-assurance-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
  direction: rtl;
}

/* Individual Card */
.about-assurance-section .about-assurance-card {
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.about-assurance-section .about-assurance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26, 58, 107, 0.12);
}

/* Card Icon */
.about-assurance-section .about-assurance-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: #EEF2F7;
  border-radius: 12px;
  flex-shrink: 0;
  color: var(--primary);
}

/* Card Content */
.about-assurance-section .about-assurance-card-content {
  flex: 1;
}

.about-assurance-section .about-assurance-card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0 0 10px 0;
  text-align: right;
}

.about-assurance-section .about-assurance-card-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  text-align: right;
}

.about-assurance-section .about-assurance-card-text strong {
  color: var(--text-dark);
  font-weight: 600;
}

/* CTA Block */
.about-assurance-section .about-assurance-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  padding: 40px 32px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(26, 58, 107, 0.08);
}

.about-assurance-section .about-assurance-cta-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  text-align: center;
}

/* CTA Button */
.about-assurance-section .about-assurance-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--secondary);
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  direction: rtl;
}

.about-assurance-section .about-assurance-btn:hover {
  background: var(--accent);
  color: var(--text-dark);
  box-shadow: 0 10px 40px rgba(247, 148, 29, 0.3);
  transform: translateY(-2px);
}

.about-assurance-section .about-assurance-btn i {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.about-assurance-section .about-assurance-btn:hover i {
  transform: translateX(-3px);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .about-assurance-section .about-assurance-cards {
    grid-template-columns: 1fr 1fr;
  }
}

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

  .about-assurance-section .about-assurance-header {
    margin-bottom: 36px;
  }

  .about-assurance-section .about-assurance-title {
    font-size: 1.6rem;
  }

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

  .about-assurance-section .about-assurance-card {
    padding: 24px;
    flex-direction: row;
    align-items: flex-start;
  }

  .about-assurance-section .about-assurance-card-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
  }

  .about-assurance-section .about-assurance-cta {
    padding: 28px 20px;
    gap: 16px;
  }

  .about-assurance-section .about-assurance-btn {
    width: 100%;
    justify-content: center;
    font-size: 0.95rem;
    padding: 14px 20px;
  }
}

/* solutions-financing-services */
.solutions-financing-services-section {
  position: relative;
  background-color: var(--bg-light);
  background-image:
    radial-gradient(circle at 90% 10%, rgba(10,67,181,0.05) 0%, transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(246,139,0,0.06) 0%, transparent 50%);
  color: var(--text-dark);
  padding: 96px 24px 130px;
  overflow: visible;
  direction: rtl;
}

/* Dot grid decoration */
.solutions-financing-services-section .sfs-dot-grid {
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 55%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(10,67,181,0.07) 1.5px, transparent 1.5px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

/* Container */
.solutions-financing-services-section .sfs-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Intro layout */
.solutions-financing-services-section .sfs-intro {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 48px;
  margin-bottom: 56px;
}

.solutions-financing-services-section .sfs-intro-start {
  flex: 0 0 auto;
  max-width: 420px;
}

.solutions-financing-services-section .sfs-intro-end {
  flex: 1;
  padding-top: 16px;
}

.solutions-financing-services-section .sfs-intro-end p {
  color: var(--text-muted);
  line-height: 1.75;
  text-align: right;
  margin: 0;
}

/* Label */
.solutions-financing-services-section .sfs-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--secondary);
  background: rgba(246,139,0,0.1);
  border-radius: 6px;
  padding: 4px 12px;
  margin-bottom: 14px;
}

/* Heading */
.solutions-financing-services-section .sfs-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  text-align: right;
}

.solutions-financing-services-section .sfs-heading-accent {
  color: var(--primary);
}

/* Orange accent bar */
.solutions-financing-services-section .sfs-accent-bar {
  width: 48px;
  height: 4px;
  background: var(--secondary);
  border-radius: 2px;
  margin-inline-start: auto;
  margin-inline-end: 0;
}

/* ── SERVICES GRID ── */
.solutions-financing-services-section .sfs-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  direction: rtl;
}

/* Standard card */
.solutions-financing-services-section .sfs-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(26,58,107,0.08);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.solutions-financing-services-section .sfs-card::before {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 0 12px 12px 0;
  
  transition: opacity 0.25s ease;
}

.solutions-financing-services-section .sfs-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.12);
}

.solutions-financing-services-section .sfs-card:hover::before {
  opacity: 1;
}

/* Card icon wrapper */
.solutions-financing-services-section .sfs-card-icon-wrap {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(10,67,181,0.08) 0%, rgba(246,139,0,0.08) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.solutions-financing-services-section .sfs-card:hover .sfs-card-icon-wrap {
  background: linear-gradient(135deg, rgba(10,67,181,0.15) 0%, rgba(246,139,0,0.12) 100%);
}

/* Card body */
.solutions-financing-services-section .sfs-card-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.solutions-financing-services-section .sfs-card h3 {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-dark);
  margin: 0;
  text-align: right;
}

.solutions-financing-services-section .sfs-card p {
  color: var(--text-muted);
  line-height: 1.7;
  margin: 0;
  text-align: right;
}

/* ── FEATURED CARD ── */
.solutions-financing-services-section .sfs-card--featured {
  grid-column: span 2;
  background: linear-gradient(135deg, #0A43B5 0%, #12305F 100%);
  border-color: transparent;
  color: var(--text-light);
  padding: 0;
  overflow: hidden;
}

.solutions-financing-services-section .sfs-card--featured::before {
  display: none;
}

.solutions-financing-services-section .sfs-card--featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.22);
}

.solutions-financing-services-section .sfs-featured-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  height: 100%;
}

.solutions-financing-services-section .sfs-featured-content {
  flex: 1;
  padding: 36px 36px 36px 24px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

.solutions-financing-services-section .sfs-card-icon-wrap--featured {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: rgba(255,255,255,0.12);
  color: var(--accent);
  flex-shrink: 0;
}

.solutions-financing-services-section .sfs-card--featured h3 {
  color: var(--text-light);
  font-size: 1.25rem;
  margin: 0 0 10px 0;
}

.solutions-financing-services-section .sfs-card--featured p {
  color: rgba(248,248,246,0.82);
  margin: 0;
}

.solutions-financing-services-section .sfs-featured-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--bg-dark);
  background: var(--accent);
  border-radius: 6px;
  padding: 3px 10px;
  margin-bottom: 10px;
}

/* Featured decorative sun */
.solutions-financing-services-section .sfs-featured-visual {
  flex: 0 0 160px;
  height: 100%;
  min-height: 180px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.solutions-financing-services-section .sfs-featured-sun {
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,178,58,0.45) 0%, rgba(246,139,0,0.18) 55%, transparent 75%);
  position: relative;
}

.solutions-financing-services-section .sfs-featured-sun::before {
  content: '';
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg, rgba(255,178,58,0.12) 8deg, transparent 16deg,
    transparent 30deg, rgba(255,178,58,0.12) 38deg, transparent 46deg,
    transparent 60deg, rgba(255,178,58,0.12) 68deg, transparent 76deg,
    transparent 90deg, rgba(255,178,58,0.12) 98deg, transparent 106deg,
    transparent 120deg, rgba(255,178,58,0.12) 128deg, transparent 136deg,
    transparent 150deg, rgba(255,178,58,0.12) 158deg, transparent 166deg,
    transparent 180deg, rgba(255,178,58,0.12) 188deg, transparent 196deg,
    transparent 210deg, rgba(255,178,58,0.12) 218deg, transparent 226deg,
    transparent 240deg, rgba(255,178,58,0.12) 248deg, transparent 256deg,
    transparent 270deg, rgba(255,178,58,0.12) 278deg, transparent 286deg,
    transparent 300deg, rgba(255,178,58,0.12) 308deg, transparent 316deg,
    transparent 330deg, rgba(255,178,58,0.12) 338deg, transparent 346deg
  );
}

/* ── BOTTOM DIVIDER ── */
.solutions-financing-services-section .sfs-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  pointer-events: none;
  z-index: 5;
}

.solutions-financing-services-section .sfs-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── RESPONSIVE ── */

/* Tablet: 2-col grid */
@media (max-width: 1024px) {
  .solutions-financing-services-section .sfs-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .solutions-financing-services-section .sfs-card--featured {
    grid-column: span 2;
  }

  .solutions-financing-services-section .sfs-intro {
    flex-direction: column;
    gap: 24px;
  }

  .solutions-financing-services-section .sfs-intro-start {
    max-width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .solutions-financing-services-section {
    padding: 56px 16px 110px;
  }

  .solutions-financing-services-section .sfs-grid {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .solutions-financing-services-section .sfs-card--featured {
    grid-column: span 1 !important;
  }

  .solutions-financing-services-section .sfs-featured-inner {
    flex-direction: column;
  }

  .solutions-financing-services-section .sfs-featured-content {
    flex-direction: column;
    padding: 28px 24px 20px;
    gap: 16px;
  }

  .solutions-financing-services-section .sfs-featured-visual {
    flex: 0 0 auto;
    width: 100%;
    min-height: 80px;
    height: 80px;
  }

  .solutions-financing-services-section .sfs-featured-sun {
    width: 70px;
    height: 70px;
  }

  .solutions-financing-services-section .sfs-intro {
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
  }

  .solutions-financing-services-section .sfs-heading {
    font-size: 1.6rem;
  }

  .solutions-financing-services-section .sfs-card {
    padding: 24px 20px;
  }

  .solutions-financing-services-section .sfs-dot-grid {
    display: none;
  }

  .solutions-financing-services-section .sfs-divider-wrapper {
    height: 60px;
  }
}

/* solutions-financing-financing */
.solutions-financing-financing-section {
  position: relative;
  overflow: visible;
  background: #FFFFFF;
  background-image:
    radial-gradient(ellipse at 90% 10%, rgba(255,178,58,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(10,67,181,0.05) 0%, transparent 50%),
    linear-gradient(160deg, #FFFFFF 0%, #F8F8F6 100%);
  background-color: #FFFFFF;
  color: var(--text-dark);
  padding: 96px 24px 110px;
  direction: rtl;
}

/* Dot grid decorative background */
.solutions-financing-financing-section .sff-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10,67,181,0.055) 1.2px, transparent 1.2px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

.solutions-financing-financing-section .sff-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* ── GRID ────────────────────────────────── */
.solutions-financing-financing-section .sff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  direction: rtl;
}

/* ── TEXT COLUMN ─────────────────────────── */
.solutions-financing-financing-section .sff-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.solutions-financing-financing-section .sff-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(10,67,181,0.08);
  color: var(--primary);
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid rgba(10,67,181,0.15);
  margin-bottom: 20px;
}

.solutions-financing-financing-section .sff-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 16px 0;
  text-align: right;
}

.solutions-financing-financing-section .sff-heading-accent {
  color: var(--primary);
  position: relative;
  display: inline-block;
}

.solutions-financing-financing-section .sff-accent-bar {
  width: 48px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  margin-bottom: 28px;
  margin-inline-start: 0;
}

.solutions-financing-financing-section .sff-body {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-dark);
  text-align: right;
  margin: 0 0 18px 0;
}

/* ── DISCLAIMER ──────────────────────────── */
.solutions-financing-financing-section .sff-disclaimer {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  background: rgba(10,67,181,0.04);
  border: 1px solid var(--border-light);
  border-inline-start: 3px solid var(--accent);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 32px;
  margin-top: 4px;
}

.solutions-financing-financing-section .sff-disclaimer-icon {
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
}

.solutions-financing-financing-section .sff-disclaimer small {
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: right;
  display: block;
}

/* ── CTA BUTTON ──────────────────────────── */
.solutions-financing-financing-section .sff-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--secondary);
  color: #FFFFFF;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 20px rgba(246,139,0,0.25);
}

.solutions-financing-financing-section .sff-cta-btn:hover {
  background: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(247,148,29,0.3);
  color: #FFFFFF;
}

/* ── IMAGE COLUMN ────────────────────────── */
.solutions-financing-financing-section .sff-image-col {
  position: relative;
}

.solutions-financing-financing-section .sff-image-wrapper {
  position: relative;
  display: block;
}

.solutions-financing-financing-section .sff-amber-glow {
  position: absolute;
  top: -24px;
  inset-inline-end: -24px;
  width: 75%;
  height: 75%;
  background: radial-gradient(ellipse at center, rgba(255,178,58,0.22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.solutions-financing-financing-section .sff-main-image {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(26,58,107,0.18);
  display: block;
  transition: transform 0.25s ease;
}

.solutions-financing-financing-section .sff-main-image:hover {
  transform: scale(1.02);
}

/* Floating badge on image */
.solutions-financing-financing-section .sff-image-badge {
  position: absolute;
  bottom: -20px;
  inset-inline-start: -20px;
  z-index: 2;
  background: #FFFFFF;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(26,58,107,0.14);
  border: 1px solid var(--border-light);
  padding: 14px 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}

.solutions-financing-financing-section .sff-badge-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary) 0%, #1A3A6B 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FFFFFF;
  font-size: 1.1rem;
}

.solutions-financing-financing-section .sff-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
}

.solutions-financing-financing-section .sff-badge-text strong {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
}

.solutions-financing-financing-section .sff-badge-text small {
  font-size: 0.75rem;
  color: var(--text-muted);
  display: block;
  line-height: 1.4;
}

/* ── BOTTOM DIVIDER ──────────────────────── */
.solutions-financing-financing-section .sff-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 5;
}

.solutions-financing-financing-section .sff-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── RESPONSIVE ──────────────────────────── */
@media (max-width: 900px) {
  .solutions-financing-financing-section .sff-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .solutions-financing-financing-section .sff-image-col {
    order: -1;
  }

  .solutions-financing-financing-section .sff-image-badge {
    bottom: -16px;
    inset-inline-start: 12px;
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .solutions-financing-financing-section {
    padding: 56px 16px 100px;
  }

  .solutions-financing-financing-section .sff-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .solutions-financing-financing-section .sff-heading {
    font-size: 1.6rem;
  }

  .solutions-financing-financing-section .sff-image-badge {
    position: static;
    margin-top: 16px;
    min-width: unset;
    width: 100%;
    border-radius: 8px;
  }

  .solutions-financing-financing-section .sff-amber-glow {
    display: none;
  }

  .solutions-financing-financing-section .sff-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* solutions-financing-capabilities */
.solutions-financing-capabilities-section {
  position: relative;
  background-color: #12305F;
  background-image:
    radial-gradient(ellipse at 80% 10%, rgba(246,139,0,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(10,67,181,0.18) 0%, transparent 50%),
    linear-gradient(135deg, #1A3A6B 0%, #0D2147 100%);
  color: var(--text-light);
  padding: 96px 24px 120px;
  overflow: visible;
  direction: rtl;
}

/* Background pattern */
.solutions-financing-capabilities-section .sfcs-bg-pattern {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 1;
}

/* Glow accent */
.solutions-financing-capabilities-section .sfcs-glow-accent {
  position: absolute;
  top: -60px;
  inset-inline-end: 10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(246,139,0,0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  border-radius: 50%;
}

/* Container */
.solutions-financing-capabilities-section .sfcs-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header */
.solutions-financing-capabilities-section .sfcs-header {
  text-align: center;
  margin-bottom: 64px;
}

.solutions-financing-capabilities-section .sfcs-label-tag {
  display: inline-block;
  background: rgba(246,139,0,0.15);
  border: 1px solid rgba(246,139,0,0.35);
  color: var(--accent);
  font-family: 'Rubik', sans-serif;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 6px;
  margin-bottom: 20px;
}

.solutions-financing-capabilities-section .sfcs-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0 0 16px;
}

.solutions-financing-capabilities-section .sfcs-title-underline {
  width: 48px;
  height: 3px;
  background: var(--secondary);
  margin: 0 auto 24px;
  border-radius: 2px;
}

.solutions-financing-capabilities-section .sfcs-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(248,248,246,0.75);
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

/* Pillars grid */
.solutions-financing-capabilities-section .sfcs-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  direction: rtl;
  margin-bottom: 56px;
}

/* Individual pillar card */
.solutions-financing-capabilities-section .sfcs-pillar {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: right;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
  position: relative;
  overflow: hidden;
}

.solutions-financing-capabilities-section .sfcs-pillar::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(246,139,0,0.5), transparent);
  
  transition: opacity 0.25s ease;
}

.solutions-financing-capabilities-section .sfcs-pillar:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.25);
  background: rgba(255,255,255,0.08);
}

.solutions-financing-capabilities-section .sfcs-pillar:hover::before {
  opacity: 1;
}

/* Emblem */
.solutions-financing-capabilities-section .sfcs-pillar-emblem {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(246,139,0,0.12);
  border: 1.5px solid rgba(246,139,0,0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  color: var(--accent);
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.solutions-financing-capabilities-section .sfcs-pillar:hover .sfcs-pillar-emblem {
  background: rgba(246,139,0,0.20);
  border-color: rgba(246,139,0,0.55);
}

/* Pillar content */
.solutions-financing-capabilities-section .sfcs-pillar-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.solutions-financing-capabilities-section .sfcs-pillar-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-light);
  margin: 0;
}

.solutions-financing-capabilities-section .sfcs-pillar-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(248,248,246,0.70);
  margin: 0;
  flex: 1;
}

.solutions-financing-capabilities-section .sfcs-pillar-accent {
  width: 32px;
  height: 2px;
  background: var(--secondary);
  border-radius: 2px;
  margin-top: 8px;
}

/* Stats bar */
.solutions-financing-capabilities-section .sfcs-stats-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 28px 40px;
  direction: rtl;
  flex-wrap: wrap;
}

.solutions-financing-capabilities-section .sfcs-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 40px;
  flex: 1;
  min-width: 160px;
}

.solutions-financing-capabilities-section .sfcs-stat-number {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
  margin-bottom: 6px;
}

.solutions-financing-capabilities-section .sfcs-stat-label {
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(248,248,246,0.65);
}

.solutions-financing-capabilities-section .sfcs-stat-divider {
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.12);
  flex-shrink: 0;
}

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

.solutions-financing-capabilities-section .sfcs-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

.solutions-financing-capabilities-section .sfcs-green-accent-line {
  position: absolute;
  bottom: 68px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #22c55e 20%, #16a34a 50%, #22c55e 80%, transparent 100%);
  opacity: 0.55;
  z-index: 6;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 1100px) {
  .solutions-financing-capabilities-section .sfcs-pillars {
    grid-template-columns: repeat(2, 1fr);
  }

  .solutions-financing-capabilities-section .sfcs-stat {
    padding: 0 24px;
    min-width: 130px;
  }
}

@media (max-width: 768px) {
  .solutions-financing-capabilities-section {
    padding: 56px 16px 100px;
  }

  .solutions-financing-capabilities-section .sfcs-header {
    margin-bottom: 40px;
  }

  .solutions-financing-capabilities-section .sfcs-title {
    font-size: 1.6rem;
  }

  .solutions-financing-capabilities-section .sfcs-pillars {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .solutions-financing-capabilities-section .sfcs-pillar {
    padding: 24px 20px;
  }

  .solutions-financing-capabilities-section .sfcs-pillar-emblem {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
  }

  .solutions-financing-capabilities-section .sfcs-stats-bar {
    flex-direction: column;
    padding: 24px 16px;
    gap: 0;
  }

  .solutions-financing-capabilities-section .sfcs-stat {
    padding: 16px 0;
    width: 100%;
    min-width: unset;
  }

  .solutions-financing-capabilities-section .sfcs-stat-divider {
    width: 80%;
    height: 1px;
    align-self: center;
  }

  .solutions-financing-capabilities-section .sfcs-stat-number {
    font-size: 1.6rem;
  }

  .solutions-financing-capabilities-section .sfcs-glow-accent {
    width: 220px;
    height: 220px;
    inset-inline-end: 0;
  }
}

/* solutions-financing-faq */
.solutions-financing-faq-section {
  background: #F8F8F6;
  color: var(--text-dark);
  padding: 96px 24px 60px;
  position: relative;
  overflow: visible;
  direction: rtl;
  font-family: 'Rubik', sans-serif;
}

.solutions-financing-faq-section .faq-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ── Header ── */
.solutions-financing-faq-section .faq-header {
  text-align: center;
  margin-bottom: 56px;
}

.solutions-financing-faq-section .faq-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  background: rgba(246, 139, 0, 0.1);
  border: 1px solid rgba(246, 139, 0, 0.25);
  border-radius: 6px;
  padding: 4px 14px;
  margin-bottom: 16px;
}

.solutions-financing-faq-section .faq-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 16px;
}

.solutions-financing-faq-section .faq-subtitle {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 640px;
  margin: 0 auto 20px;
}

.solutions-financing-faq-section .faq-accent-bar {
  width: 48px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  margin: 0 auto;
}

/* ── Grid ── */
.solutions-financing-faq-section .faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  direction: rtl;
}

/* ── Card ── */
.solutions-financing-faq-section .faq-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(26,58,107,0.08);
  padding: 32px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.solutions-financing-faq-section .faq-card::before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--primary) 0%, var(--secondary) 100%);
  border-radius: 0 0 0 12px;
  
  transition: opacity 0.25s ease;
}

.solutions-financing-faq-section .faq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.12);
}

.solutions-financing-faq-section .faq-card:hover::before {
  opacity: 1;
}

/* ── Card Icon ── */
.solutions-financing-faq-section .faq-card-icon {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, rgba(10,67,181,0.08) 0%, rgba(246,139,0,0.08) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  border: 1px solid var(--border-light);
}

/* ── Card Content ── */
.solutions-financing-faq-section .faq-card-content {
  flex: 1;
  min-width: 0;
}

.solutions-financing-faq-section .faq-question {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0 0 10px;
  text-align: right;
}

.solutions-financing-faq-section .faq-answer {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  text-align: right;
}

/* ── CTA Strip ── */
.solutions-financing-faq-section .faq-cta-strip {
  margin-top: 56px;
  background: linear-gradient(135deg, #1A3A6B 0%, #0D2147 100%);
  border-radius: 12px;
  padding: 36px 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 10px 40px rgba(26,58,107,0.12);
}

.solutions-financing-faq-section .faq-cta-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-light);
  margin: 0;
  font-weight: 500;
  text-align: right;
}

.solutions-financing-faq-section .faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--secondary);
  color: #FFFFFF;
  padding: 14px 28px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 1rem;
  font-family: 'Rubik', sans-serif;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.solutions-financing-faq-section .faq-cta-btn:hover {
  background: var(--accent);
  box-shadow: 0 10px 40px rgba(247,148,29,0.3);
  transform: translateY(-2px);
  color: #FFFFFF;
}

/* ── Divider ── */
.solutions-financing-faq-section .faq-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 5;
}

.solutions-financing-faq-section .faq-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ── Dot grid decoration ── */
.solutions-financing-faq-section::after {
  content: '';
  position: absolute;
  inset-inline-end: 0;
  top: 0;
  width: 40%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(26,58,107,0.05) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

/* ── Desktop grid ── */
@media (min-width: 768px) {
  .solutions-financing-faq-section {
    padding: 96px 40px 60px;
  }

  .solutions-financing-faq-section .faq-grid {
    grid-template-columns: 1fr 1fr;
  }

  .solutions-financing-faq-section .faq-title {
    font-size: 2rem;
  }
}

/* ── Mobile ── */
@media (max-width: 767px) {
  .solutions-financing-faq-section {
    padding: 56px 16px 60px;
  }

  .solutions-financing-faq-section .faq-grid {
    grid-template-columns: 1fr !important;
  }

  .solutions-financing-faq-section .faq-card {
    padding: 20px 16px;
    gap: 14px;
  }

  .solutions-financing-faq-section .faq-card-icon {
    width: 44px;
    height: 44px;
  }

  .solutions-financing-faq-section .faq-question {
    font-size: 1rem;
  }

  .solutions-financing-faq-section .faq-header {
    margin-bottom: 36px;
  }

  .solutions-financing-faq-section .faq-cta-strip {
    flex-direction: column;
    padding: 28px 20px;
    text-align: center;
    align-items: center;
  }

  .solutions-financing-faq-section .faq-cta-text {
    text-align: center;
  }

  .solutions-financing-faq-section .faq-cta-btn {
    width: 100%;
    justify-content: center;
  }
}

/* solutions-financing-conversion */
.solutions-financing-conversion-section {
  position: relative;
  overflow: visible;
  direction: rtl;
  background-color: #0D2147;
  background-image:
    radial-gradient(ellipse at 70% 50%, rgba(255,178,58,0.08) 0%, transparent 60%),
    linear-gradient(135deg, #1A3A6B 0%, #0D2147 100%);
  color: var(--text-light);
  padding: 96px 24px;
  text-align: center;
}

.solutions-financing-conversion-section .sfcs-rays-decoration {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.solutions-financing-conversion-section .sfcs-rays-decoration svg {
  width: 100%;
  height: 100%;
  display: block;
}

.solutions-financing-conversion-section .sfcs-container {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Badge */
.solutions-financing-conversion-section .sfcs-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,178,58,0.15);
  border: 1px solid rgba(255,178,58,0.35);
  border-radius: 6px;
  padding: 6px 16px;
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 700;
  font-family: 'Rubik', sans-serif;
  letter-spacing: 0.02em;
  margin-bottom: 28px;
}

.solutions-financing-conversion-section .sfcs-badge i {
  font-size: 0.9rem;
  color: var(--accent);
}

/* Heading */
.solutions-financing-conversion-section .sfcs-heading {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0 0 16px 0;
  text-align: center;
  max-width: none !important;
}

/* Orange accent underline */
.solutions-financing-conversion-section .sfcs-heading-accent {
  width: 48px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  margin: 0 auto 32px auto;
}

/* Description */
.solutions-financing-conversion-section .sfcs-description {
  font-family: 'Rubik', sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: rgba(248,248,246,0.85);
  text-align: center;
  max-width: 640px;
  margin: 0 auto 36px auto;
}

/* Trust row */
.solutions-financing-conversion-section .sfcs-trust-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-bottom: 40px;
}

.solutions-financing-conversion-section .sfcs-trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  color: var(--text-light);
  font-family: 'Rubik', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
}

.solutions-financing-conversion-section .sfcs-trust-item i {
  color: var(--accent);
  font-size: 1rem;
  flex-shrink: 0;
}

/* CTA group */
.solutions-financing-conversion-section .sfcs-cta-group {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-bottom: 28px;
}

/* Primary button */
.solutions-financing-conversion-section .sfcs-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--secondary);
  color: #FFFFFF;
  padding: 14px 32px;
  border-radius: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 10px 40px rgba(247,148,29,0.3);
}

.solutions-financing-conversion-section .sfcs-btn-primary:hover {
  background: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 14px 48px rgba(247,148,29,0.45);
  color: #FFFFFF;
}

.solutions-financing-conversion-section .sfcs-btn-primary i {
  font-size: 1rem;
}

/* Outline button */
.solutions-financing-conversion-section .sfcs-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  color: var(--text-light);
  padding: 13px 31px;
  border-radius: 8px;
  border: 2px solid rgba(248,248,246,0.5);
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.25s ease;
}

.solutions-financing-conversion-section .sfcs-btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.2);
}

.solutions-financing-conversion-section .sfcs-btn-outline i {
  font-size: 1rem;
}

/* Footnote */
.solutions-financing-conversion-section .sfcs-footnote {
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: rgba(248,248,246,0.55);
  text-align: center;
  margin: 0;
}

/* ─── RESPONSIVE ─────────────────────────────────── */
@media (max-width: 768px) {
  .solutions-financing-conversion-section {
    padding: 56px 16px;
  }

  .solutions-financing-conversion-section .sfcs-heading {
    font-size: 1.6rem;
  }

  .solutions-financing-conversion-section .sfcs-cta-group {
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .solutions-financing-conversion-section .sfcs-btn-primary,
  .solutions-financing-conversion-section .sfcs-btn-outline {
    width: 100%;
    max-width: 320px;
    justify-content: center;
  }

  .solutions-financing-conversion-section .sfcs-trust-row {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .solutions-financing-conversion-section .sfcs-description {
    font-size: 16px;
  }
}

/* contact-contact-intro */
.contact-contact-intro-section {
  position: relative;
  background: #FFFFFF;
  color: var(--text-dark);
  padding: 140px 24px 96px;
  overflow: visible;
  direction: rtl;
  text-align: right;
}

/* Dot grid decorative pattern */
.contact-contact-intro-section .cci-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10,67,181,0.06) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

.contact-contact-intro-section .cci-container {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Heading block */
.contact-contact-intro-section .cci-heading-block {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.contact-contact-intro-section .cci-eyebrow {
  display: inline-block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  background: rgba(246,139,0,0.09);
  border: 1px solid rgba(246,139,0,0.22);
  border-radius: 6px;
  padding: 5px 14px;
}

.contact-contact-intro-section .cci-title {
  font-family: 'Rubik', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-dark);
  margin: 0;
  text-align: center;
  max-width: none !important;
}

.contact-contact-intro-section .cci-title span {
  color: var(--secondary);
}

.contact-contact-intro-section .cci-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-dark);
  max-width: 620px;
  text-align: center;
  margin: 0;
}

.contact-contact-intro-section .cci-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  background: rgba(10,67,181,0.04);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 12px 20px;
  max-width: 560px;
  text-align: center;
  margin: 0;
}

.contact-contact-intro-section .cci-note i {
  color: var(--primary);
  font-size: 0.9rem;
  flex-shrink: 0;
}

/* Decorative divider row */
.contact-contact-intro-section .cci-divider-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 520px;
}

.contact-contact-intro-section .cci-divider-line {
  flex: 1;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
  border-radius: 2px;
}

.contact-contact-intro-section .cci-solar-emblem {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-light);
  border-radius: 50%;
  box-shadow: 0 2px 16px rgba(26,58,107,0.09);
  flex-shrink: 0;
}

.contact-contact-intro-section .cci-solar-emblem--small {
  width: 32px;
  height: 32px;
}

/* Trust badges row */
.contact-contact-intro-section .cci-trust-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 0;
  width: 100%;
  max-width: 720px;
}

.contact-contact-intro-section .cci-trust-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
}

.contact-contact-intro-section .cci-trust-item i {
  color: var(--primary);
  font-size: 1rem;
}

.contact-contact-intro-section .cci-trust-sep {
  width: 1px;
  height: 20px;
  background: var(--border-light);
  flex-shrink: 0;
}

/* Bottom wave divider */
.contact-contact-intro-section .cci-wave-divider {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 64px;
  pointer-events: none;
  z-index: 5;
}

.contact-contact-intro-section .cci-wave-divider svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Padding bottom to accommodate wave */
.contact-contact-intro-section {
  padding-bottom: 96px;
}

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

  .contact-contact-intro-section .cci-container {
    gap: 28px;
  }

  .contact-contact-intro-section .cci-title {
    font-size: 2rem;
  }

  .contact-contact-intro-section .cci-subtitle {
    font-size: 1rem;
  }

  .contact-contact-intro-section .cci-note {
    font-size: 0.8rem;
    padding: 10px 14px;
    text-align: right;
    justify-content: flex-start;
  }

  .contact-contact-intro-section .cci-trust-row {
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
  }

  .contact-contact-intro-section .cci-trust-sep {
    display: none;
  }

  .contact-contact-intro-section .cci-trust-item {
    padding: 0 4px;
    font-size: 0.8rem;
  }

  .contact-contact-intro-section .cci-divider-row {
    max-width: 100%;
  }

  .contact-contact-intro-section .cci-solar-emblem {
    width: 36px;
    height: 36px;
  }

  .contact-contact-intro-section .cci-solar-emblem--small {
    width: 26px;
    height: 26px;
  }
}

/* contact-contact-form */
.contact-contact-form-section {
  position: relative;
  background-color: #EEF2F7;
  background-image:
    radial-gradient(circle at 90% 10%, rgba(10,67,181,0.06) 0%, transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(246,139,0,0.05) 0%, transparent 50%),
    linear-gradient(160deg, #F8F8F6 0%, #EEF2F7 100%);
  color: var(--text-dark);
  padding: 96px 24px 140px;
  overflow: visible;
  direction: rtl;
}

/* Dot grid decoration */
.contact-contact-form-section .ccf-dot-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(10,67,181,0.07) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

/* Container */
.contact-contact-form-section .ccf-container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
  direction: rtl;
}

/* ── FORM COLUMN ── */
.contact-contact-form-section .ccf-form-col {
  position: relative;
}

.contact-contact-form-section .ccf-form-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(26,58,107,0.08);
  padding: 40px;
  transition: box-shadow 0.25s ease;
}

.contact-contact-form-section .ccf-form-card:hover {
  box-shadow: 0 10px 40px rgba(26,58,107,0.12);
}

.contact-contact-form-section .ccf-form-header {
  margin-bottom: 32px;
}

.contact-contact-form-section .ccf-label-badge {
  display: inline-block;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-family: 'Rubik', sans-serif;
}

.contact-contact-form-section .ccf-form-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 12px;
  text-align: right;
}

.contact-contact-form-section .ccf-form-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  text-align: right;
}

/* Fields */
.contact-contact-form-section .ccf-field-group {
  margin-bottom: 20px;
}

.contact-contact-form-section .ccf-label {
  display: block;
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 7px;
  text-align: right;
}

.contact-contact-form-section .ccf-input {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  color: var(--text-dark);
  background: #FAFBFD;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-sizing: border-box;
  direction: rtl;
  text-align: right;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}

.contact-contact-form-section .ccf-input::placeholder {
  color: #A0AABB;
}

.contact-contact-form-section .ccf-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(10,67,181,0.1);
  background: #FFFFFF;
}

.contact-contact-form-section .ccf-textarea {
  resize: vertical;
  min-height: 130px;
}

/* Privacy consent */
.contact-contact-form-section .privacy-consent {
  margin-bottom: 24px;
  color: var(--text-dark);
}

.contact-contact-form-section .privacy-consent-label {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: right;
}

.contact-contact-form-section .privacy-consent-checkbox {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--primary);
  cursor: pointer;
}

.contact-contact-form-section .privacy-consent-label a {
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
}

.contact-contact-form-section .privacy-consent-label a:hover {
  color: var(--secondary);
}

/* Submit button */
.contact-contact-form-section .ccf-submit-btn {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #F7941D 0%, #E07B00 100%);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 16px 28px;
  font-family: 'Rubik', sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: all 0.25s ease;
  box-shadow: 0 4px 16px rgba(247,148,29,0.25);
}

.contact-contact-form-section .ccf-submit-btn:hover {
  background: linear-gradient(135deg, #FFB23A 0%, #F7941D 100%);
  box-shadow: 0 10px 40px rgba(247,148,29,0.3);
  transform: translateY(-2px);
}

.contact-contact-form-section .ccf-submit-btn svg {
  flex-shrink: 0;
}

/* ── INFO COLUMN ── */
.contact-contact-form-section .ccf-info-col {
  position: relative;
}

.contact-contact-form-section .ccf-info-inner {
  padding: 8px 0 0;
}

/* Orange accent underline */
.contact-contact-form-section .ccf-orange-accent {
  width: 48px;
  height: 4px;
  background: linear-gradient(90deg, #F7941D, #FFB23A);
  border-radius: 3px;
  margin-bottom: 18px;
  margin-inline-start: 0;
}

.contact-contact-form-section .ccf-info-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 20px;
  text-align: right;
}

.contact-contact-form-section .ccf-info-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--text-muted);
  margin: 0 0 36px;
  text-align: right;
}

/* Reassurance list */
.contact-contact-form-section .ccf-reassurance-list {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-contact-form-section .ccf-reassurance-item {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  align-items: flex-start;
  direction: rtl;
}

.contact-contact-form-section .ccf-ri-icon {
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, rgba(10,67,181,0.08) 0%, rgba(10,67,181,0.04) 100%);
  border: 1px solid rgba(10,67,181,0.12);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
}

.contact-contact-form-section .ccf-ri-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

.contact-contact-form-section .ccf-ri-title {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--text-dark);
  display: block;
}

.contact-contact-form-section .ccf-ri-text {
  font-family: 'Rubik', sans-serif;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text-muted);
  display: block;
}

/* Contact block */
.contact-contact-form-section .ccf-contact-block {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 2px 16px rgba(26,58,107,0.09);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-contact-form-section .ccf-contact-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  direction: rtl;
}

.contact-contact-form-section .ccf-contact-icon {
  color: var(--secondary);
  font-size: 1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.contact-contact-form-section .ccf-contact-link {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
  text-align: right;
}

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

.contact-contact-form-section .ccf-contact-text {
  font-family: 'Rubik', sans-serif;
  font-size: 0.9375rem;
  color: var(--text-dark);
  text-align: right;
}

/* ── DIAGONAL DIVIDER ── */
.contact-contact-form-section .ccf-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 5;
}

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

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .contact-contact-form-section .ccf-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .contact-contact-form-section .ccf-form-col {
    
  }

  .contact-contact-form-section .ccf-info-col {
    
  }
}

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

  .contact-contact-form-section .ccf-container {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  .contact-contact-form-section .ccf-form-card {
    padding: 24px 20px;
  }

  .contact-contact-form-section .ccf-form-title {
    font-size: 1.5rem;
  }

  .contact-contact-form-section .ccf-info-title {
    font-size: 1.5rem;
  }

  .contact-contact-form-section .ccf-reassurance-item {
    grid-template-columns: 40px 1fr;
    gap: 12px;
  }

  .contact-contact-form-section .ccf-ri-icon {
    width: 40px;
    height: 40px;
  }

  .contact-contact-form-section .ccf-contact-block {
    padding: 18px 16px;
  }

  .contact-contact-form-section .ccf-submit-btn {
    font-size: 1rem;
    padding: 14px 20px;
  }
}
/* ZAPPY_POSTGEN_GUARD_RTL_ORDER:צור קשר-contact-form — stripped 2 order declaration(s) conflicting with RTL grid */


/* contact-process-summary */
.contact-process-summary-section {
  position: relative;
  overflow: visible;
  background-color: #12305F;
  background-image:
    radial-gradient(ellipse at 10% 50%, rgba(246,139,0,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 20%, rgba(255,178,58,0.07) 0%, transparent 50%),
    linear-gradient(135deg, #1A3A6B 0%, #0D2147 100%);
  color: var(--text-light);
  padding: 96px 24px 110px;
  direction: rtl;
}

.contact-process-summary-section .contact-process-summary-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.contact-process-summary-section .contact-process-summary-header {
  text-align: center;
  margin-bottom: 64px;
}

.contact-process-summary-section .contact-process-summary-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-light);
  margin: 0 0 16px 0;
  position: relative;
  display: inline-block;
}

.contact-process-summary-section .contact-process-summary-title::after {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: var(--secondary);
  margin: 12px auto 0;
  border-radius: 2px;
}

.contact-process-summary-section .contact-process-summary-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(248,248,246,0.72);
  margin: 0;
  max-width: 520px;
  margin-inline: auto;
}

.contact-process-summary-section .contact-process-summary-steps {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  direction: rtl;
}

.contact-process-summary-section .contact-process-step {
  flex: 1;
  min-width: 250px;
  max-width: 340px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.contact-process-summary-section .contact-process-step::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--secondary) 0%, var(--accent) 100%);
  border-radius: 12px 12px 0 0;
  
  transition: opacity 0.25s ease;
}

.contact-process-summary-section .contact-process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.22);
}

.contact-process-summary-section .contact-process-step:hover::before {
  opacity: 1;
}

.contact-process-summary-section .contact-process-step-marker {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--secondary) 0%, var(--accent) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(246,139,0,0.35);
}

.contact-process-summary-section .contact-process-step-number {
  font-family: 'Rubik', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: 0.02em;
}

.contact-process-summary-section .contact-process-step-content {
  flex: 1;
}

.contact-process-summary-section .contact-process-step-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-light);
  margin: 0 0 12px 0;
  text-align: right;
}

.contact-process-summary-section .contact-process-step-desc {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(248,248,246,0.78);
  margin: 0;
  text-align: right;
}

.contact-process-summary-section .contact-process-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 8px;
  align-self: center;
}

.contact-process-summary-section .contact-process-connector svg {
  transform: scaleX(-1);
  opacity: 0.8;
}

.contact-process-summary-section .contact-process-summary-divider-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
  z-index: 5;
}

.contact-process-summary-section .contact-process-summary-divider-wrapper svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 900px) {
  .contact-process-summary-section .contact-process-summary-steps {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .contact-process-summary-section .contact-process-step {
    max-width: 100%;
    width: 100%;
  }

  .contact-process-summary-section .contact-process-connector {
    padding: 8px 0;
    transform: rotate(90deg);
  }

  .contact-process-summary-section .contact-process-connector svg {
    transform: scaleX(-1);
  }
}

@media (max-width: 768px) {
  .contact-process-summary-section {
    padding: 56px 16px 90px;
  }

  .contact-process-summary-section .contact-process-summary-header {
    margin-bottom: 40px;
  }

  .contact-process-summary-section .contact-process-summary-title {
    font-size: 1.6rem;
  }

  .contact-process-summary-section .contact-process-step {
    padding: 24px 20px;
  }

  .contact-process-summary-section .contact-process-summary-divider-wrapper {
    height: 50px;
  }
}

/* contact-reassurance */
.contact-reassurance-section {
  background: #FFFFFF;
  color: var(--text-dark);
  padding: 80px 24px 80px;
  position: relative;
  overflow: hidden;
  direction: rtl;
}

.contact-reassurance-section .contact-reassurance-dot-pattern {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(26,58,107,0.05) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
  aria-hidden: true;
}

.contact-reassurance-section .contact-reassurance-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.contact-reassurance-section .contact-reassurance-header {
  text-align: center;
  margin-bottom: 52px;
}

.contact-reassurance-section .contact-reassurance-title {
  font-family: 'Rubik', sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-dark);
  margin: 0 0 14px 0;
}

.contact-reassurance-section .contact-reassurance-accent-bar {
  width: 48px;
  height: 3px;
  background: var(--secondary);
  border-radius: 2px;
  margin: 0 auto 20px auto;
}

.contact-reassurance-section .contact-reassurance-subtitle {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  max-width: 680px;
  margin: 0 auto;
  text-align: center;
}

.contact-reassurance-section .contact-reassurance-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  direction: rtl;
}

.contact-reassurance-section .contact-reassurance-card {
  background: #FFFFFF;
  border-radius: 12px;
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(26,58,107,0.08);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-align: right;
}

.contact-reassurance-section .contact-reassurance-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(26,58,107,0.12);
}

.contact-reassurance-section .contact-reassurance-card-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 64px;
  height: 64px;
  background: linear-gradient(135deg, rgba(10,67,181,0.07) 0%, rgba(246,139,0,0.07) 100%);
  border-radius: 12px;
  flex-shrink: 0;
  align-self: flex-end;
  color: var(--text-dark);
}

.contact-reassurance-section .contact-reassurance-card-icon-wrap svg {
  display: block;
}

.contact-reassurance-section .contact-reassurance-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-reassurance-section .contact-reassurance-card-title {
  font-family: 'Rubik', sans-serif;
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-dark);
  margin: 0;
  text-align: right;
}

.contact-reassurance-section .contact-reassurance-card-text {
  font-family: 'Rubik', sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text-muted);
  margin: 0;
  text-align: right;
}

@media (max-width: 1024px) {
  .contact-reassurance-section .contact-reassurance-cards {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .contact-reassurance-section {
    padding: 56px 16px 56px;
  }

  .contact-reassurance-section .contact-reassurance-header {
    margin-bottom: 36px;
  }

  .contact-reassurance-section .contact-reassurance-title {
    font-size: 1.6rem;
  }

  .contact-reassurance-section .contact-reassurance-cards {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }

  .contact-reassurance-section .contact-reassurance-card {
    padding: 24px 20px;
    gap: 16px;
  }

  .contact-reassurance-section .contact-reassurance-card-icon-wrap {
    width: 52px;
    height: 52px;
  }
}



/* 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: hidden !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;
  }

  /* 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 */

/* === NAVBAR STYLE OVERRIDES START === */
.navbar { background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(0,0,0,var(--nav-overlay-opacity,0.35)), transparent) !important; transition: background-color 0.3s ease, background-image 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease, box-shadow 0.3s ease !important; }
.zappy-catalog-menu, #zappy-catalog-menu { background-image: linear-gradient(to bottom, rgba(0,0,0,var(--nav-overlay-opacity,0.35)), transparent) !important; transition: background 0.3s ease, background-image 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease !important;}
.navbar .nav-menu > li > a,
.navbar .nav-menu > .nav-item > a,
.navbar .nav-link,
.navbar .navbar-nav .nav-link,
.navbar a:not(.nav-cta-btn) { color: #F8F8F6 !important; }
.navbar .nav-menu > li > a:hover,
.navbar .nav-menu > .nav-item > a:hover,
.navbar .nav-link:hover,
.navbar a:not(.nav-cta-btn):hover { color: #FFB23A !important; }
.navbar .navbar-brand, .navbar .navbar-brand a { color: #F8F8F6 !important; }
.navbar .dropdown-toggle { color: #F8F8F6 !important; }
.navbar .dropdown-toggle:hover { color: #FFB23A !important; }
.navbar .mobile-hamburger-btn, .navbar .mobile-close-btn { color: #F8F8F6 !important; }
.navbar-toggler { color: #F8F8F6 !important; border-color: #F8F8F644 !important; }
.navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23F8F8F6' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; }
.navbar .dropdown-menu { background-color: #12305F !important; }
.navbar .dropdown-menu li a,
.navbar .dropdown-menu .dropdown-item { color: #F8F8F6 !important; }
.navbar .dropdown-menu li a:hover,
.navbar .dropdown-menu .dropdown-item:hover { color: #FFB23A !important; background-color: rgba(128,128,128,0.1) !important; }
.navbar .sub-menu,
.navbar ul.sub-menu,
nav.navbar .sub-menu { background-color: #12305F !important; }
.navbar .sub-menu a,
.navbar .sub-menu li a,
.navbar .nav-menu .sub-menu a,
.navbar .nav-menu .sub-menu li a,
.navbar .zappy-products-dropdown .sub-menu a,
nav.navbar .sub-menu li a { color: #F8F8F6 !important; }
.navbar .sub-menu a:hover,
.navbar .sub-menu li a:hover,
nav.navbar .sub-menu li a:hover { color: #FFB23A !important; background-color: rgba(128,128,128,0.1) !important; }
.navbar .mobile-submenu-toggle { color: #F8F8F6 !important; }
.navbar .phone-header-btn { color: #F8F8F6 !important; }
.navbar .nav-search-input,
.navbar .nav-search-box .nav-search-input { color: #12305F !important; }
.navbar .nav-search-input::placeholder { color: var(--text-muted, rgba(128,128,128,0.6)) !important; }
@media (min-width: 769px) {
  .navbar .nav-search-box .nav-search-btn { color: #12305F !important; }
  .navbar .nav-search-box .nav-search-btn svg { stroke: #12305F !important; fill: none !important; }
}
.navbar .nav-search-result-name { color: #12305F !important; }
.navbar .nav-search-result-item a { color: #12305F !important; }
.navbar .nav-search-result-price { color: var(--accent, var(--primary)) !important; }
.navbar .nav-search-no-results,
.navbar .search-no-results { color: var(--text-muted, rgba(128,128,128,0.6)) !important; }
.zappy-catalog-menu, #zappy-catalog-menu { background: transparent !important; }
.zappy-catalog-menu .catalog-menu-item,
.zappy-catalog-menu .catalog-menu-all { color: #F8F8F6 !important; }
.zappy-catalog-menu .catalog-menu-item:hover,
.zappy-catalog-menu .catalog-menu-all:hover { color: #FFB23A !important; background: rgba(128,128,128,0.1) !important; }
.navbar .cart-link.nav-cart,
.navbar .login-link.nav-login,
.navbar .nav-search-toggle,
.navbar .search-toggle { background: var(--bg-light, #ffffff) !important; color: var(--text-dark, #1a1a1a) !important; }
.navbar .cart-link.nav-cart:hover,
.navbar .login-link.nav-login:hover,
.navbar .nav-search-toggle:hover,
.navbar .search-toggle:hover { background: rgba(128,128,128,0.15) !important; color: var(--text-dark, #1a1a1a) !important; }
.navbar .cart-link.nav-cart svg, .navbar .login-link.nav-login svg, .navbar .nav-search-toggle svg, .navbar .search-toggle svg { color: inherit !important; fill: none !important; stroke: currentColor !important; }

@media (min-width: 769px) {
  .navbar:not(.scrolled) .dropdown-menu { background-color: #12305F !important; }
  .navbar:not(.scrolled) .dropdown-menu li a,
  .navbar:not(.scrolled) .dropdown-menu .dropdown-item { color: #F8F8F6 !important; }
  .navbar:not(.scrolled) .dropdown-menu li a:hover,
  .navbar:not(.scrolled) .dropdown-menu .dropdown-item:hover { color: var(--nav-text-hover, var(--accent)) !important; }
  .navbar:not(.scrolled) .sub-menu { background-color: #12305F !important; }
  .navbar:not(.scrolled) .sub-menu a,
  .navbar:not(.scrolled) .sub-menu li a,
  .navbar:not(.scrolled) .nav-menu .sub-menu a,
  .navbar:not(.scrolled) .zappy-products-dropdown .sub-menu a { color: #F8F8F6 !important; }
  .navbar:not(.scrolled) .sub-menu a:hover,
  .navbar:not(.scrolled) .sub-menu li a:hover { color: var(--nav-text-hover, var(--accent)) !important; }
}
.navbar.scrolled { background-color: rgba(18,48,95,0.85) !important; background-image: none !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; box-shadow: 0 2px 16px rgba(0,0,0,0.12) !important; }
.navbar.scrolled::before, .navbar.scrolled::after { background: transparent !important; opacity: 0 !important; }
.navbar.scrolled ~ .zappy-catalog-menu, .navbar.scrolled ~ #zappy-catalog-menu, .zappy-catalog-menu.scrolled, #zappy-catalog-menu.scrolled { background: rgba(18,48,95,0.85) !important; background-image: none !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; }
.zappy-catalog-menu.scrolled .catalog-menu-item,
.zappy-catalog-menu.scrolled .catalog-menu-all,
#zappy-catalog-menu.scrolled .catalog-menu-item,
#zappy-catalog-menu.scrolled .catalog-menu-all,
.navbar.scrolled ~ .zappy-catalog-menu .catalog-menu-item,
.navbar.scrolled ~ .zappy-catalog-menu .catalog-menu-all,
.navbar.scrolled ~ #zappy-catalog-menu .catalog-menu-item,
.navbar.scrolled ~ #zappy-catalog-menu .catalog-menu-all { color: var(--frosted-text, #F8F8F6) !important; }
.zappy-catalog-menu.scrolled .catalog-menu-item:hover,
.zappy-catalog-menu.scrolled .catalog-menu-all:hover,
#zappy-catalog-menu.scrolled .catalog-menu-item:hover,
#zappy-catalog-menu.scrolled .catalog-menu-all:hover,
.navbar.scrolled ~ .zappy-catalog-menu .catalog-menu-item:hover,
.navbar.scrolled ~ .zappy-catalog-menu .catalog-menu-all:hover,
.navbar.scrolled ~ #zappy-catalog-menu .catalog-menu-item:hover,
.navbar.scrolled ~ #zappy-catalog-menu .catalog-menu-all:hover { color: var(--nav-text-hover, var(--accent)) !important; }
.navbar.scrolled .nav-menu > li > a,
.navbar.scrolled .nav-menu > .nav-item > a,
.navbar.scrolled .nav-link,
.navbar.scrolled a:not(.nav-cta-btn) { color: var(--frosted-text, #F8F8F6) !important; }
.navbar.scrolled .nav-menu > li > a:hover,
.navbar.scrolled .nav-menu > .nav-item > a:hover,
.navbar.scrolled .nav-link:hover,
.navbar.scrolled a:not(.nav-cta-btn):hover { color: var(--nav-text-hover, var(--accent)) !important; }
.navbar.scrolled .navbar-brand, .navbar.scrolled .navbar-brand a { color: var(--frosted-text, #F8F8F6) !important; }
.navbar.scrolled .dropdown-toggle { color: var(--frosted-text, #F8F8F6) !important; }
.navbar.scrolled .mobile-hamburger-btn, .navbar.scrolled .mobile-close-btn { color: var(--frosted-text, #F8F8F6) !important; }
.navbar.scrolled .phone-header-btn { color: var(--frosted-text, #F8F8F6) !important; }
.navbar.scrolled .mobile-toggle { color: var(--frosted-text, #F8F8F6) !important; }
.navbar.scrolled .mobile-toggle svg { color: inherit !important; }
.navbar.scrolled .mobile-toggle svg path { stroke: currentColor !important; }
.navbar.scrolled .mobile-hamburger-btn svg,
.navbar.scrolled .mobile-close-btn svg,
.navbar.scrolled .phone-header-btn svg,
.navbar.scrolled .navbar-brand svg,
.navbar.scrolled .logo-link svg { color: inherit !important; stroke: currentColor !important; }
.navbar.scrolled .mobile-hamburger-btn svg path,
.navbar.scrolled .mobile-close-btn svg path,
.navbar.scrolled .phone-header-btn svg path,
.navbar.scrolled .navbar-brand svg path,
.navbar.scrolled .logo-link svg path { stroke: currentColor !important; }
.navbar.scrolled .nav-search-btn { color: var(--frosted-text, #F8F8F6) !important; }
.navbar.scrolled .nav-search-btn svg { stroke: var(--frosted-text, #F8F8F6) !important; fill: none !important; }
@media (min-width: 769px) {
  .navbar.scrolled .sub-menu,
  .navbar.scrolled ul.sub-menu,
  nav.navbar.scrolled .sub-menu { background-color: var(--bg-light, #ffffff) !important; border-radius: 8px !important; box-shadow: 0 4px 20px rgba(0,0,0,0.15) !important; }
  .navbar.scrolled .sub-menu a,
  .navbar.scrolled .sub-menu li a,
  .navbar.scrolled .nav-menu .sub-menu a,
  .navbar.scrolled .nav-menu .sub-menu li a,
  .navbar.scrolled .zappy-products-dropdown .sub-menu a,
  nav.navbar.scrolled .sub-menu li a { color: #12305F !important; }
  .navbar.scrolled .sub-menu a:hover,
  .navbar.scrolled .sub-menu li a:hover,
  .navbar.scrolled .nav-menu .sub-menu a:hover,
  nav.navbar.scrolled .sub-menu li a:hover { color: #FFB23A !important; background-color: rgba(128,128,128,0.1) !important; }
  .navbar.scrolled .dropdown-menu { background-color: var(--bg-light, #ffffff) !important; }
  .navbar.scrolled .dropdown-menu li a,
  .navbar.scrolled .dropdown-menu .dropdown-item { color: #12305F !important; }
  .navbar.scrolled .dropdown-menu li a:hover,
  .navbar.scrolled .dropdown-menu .dropdown-item:hover { color: #FFB23A !important; background-color: rgba(128,128,128,0.1) !important; }
  .navbar.scrolled .mobile-submenu-toggle { color: #12305F !important; }
}

.navbar.scrolled .cart-link.nav-cart,
.navbar.scrolled .login-link.nav-login,
.navbar.scrolled .nav-search-toggle,
.navbar.scrolled .search-toggle { background: var(--bg-light, #ffffff) !important; color: var(--text-dark, #1a1a1a) !important; }
@media (max-width: 768px) {
  .navbar { background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
  .zappy-catalog-menu, #zappy-catalog-menu { background-image: none !important; }
  .navbar::before, .navbar::after { background: transparent !important; opacity: 0 !important; }
  body.menu-open .navbar, body.nav-open .navbar, body.mobile-menu-open .navbar, .navbar.scrolled, .navbar.active, .navbar.open, .navbar.show, .navbar.menu-open, .navbar:has(.nav-menu.active), .navbar:has(#navMenu.active), .navbar:has(.mobile-menu.active), .navbar:has(.mobile-toggle.active), .navbar:has(#mobileToggle.active) { background-color: #12305F !important; }
  .nav-menu, .nav-menu.active, .nav-menu.nav-menu-active, #navMenu, #navMenu.active, .mobile-menu, .mobile-menu.active, .mobile-nav, .mobile-nav.active { background-color: #12305F !important; background: #12305F !important; }
  .nav-menu.active, .nav-menu.nav-menu-active, #navMenu.active, .mobile-menu.active, .mobile-nav.active { max-height: calc(100dvh - 70px) !important; overflow-y: auto !important; }
  .nav-menu a, .nav-menu > li > a, #navMenu a, #navMenu > li > a { color: #F8F8F6 !important; }
  .nav-menu a:hover, .nav-menu > li > a:hover { color: #FFB23A !important; }
  .nav-menu .dropdown-menu { background: rgba(128,128,128,0.06) !important; }
  .nav-menu .dropdown-menu a, .nav-menu .dropdown-menu li a { color: #F8F8F6 !important; }
  .nav-menu .dropdown-menu a:hover { color: #FFB23A !important; }
  .nav-menu .sub-menu a { color: #F8F8F6 !important; white-space: normal !important; }
  .nav-menu .sub-menu a:hover { color: #FFB23A !important; }
  .nav-menu > li { position: relative !important; }
  .navbar .nav-menu .mobile-submenu-toggle { color: #F8F8F6 !important; position: static !important; height: auto !important; flex-shrink: 0 !important; align-self: stretch !important; }
  .mobile-toggle { color: #F8F8F6 !important; }
  .mobile-toggle svg { color: inherit !important; }
  .mobile-toggle svg path { stroke: currentColor !important; }
  
  /* When menu is open or navbar is scrolled in mobile, the background is dropdownBg, so text should be mobileMenuText */
  .navbar.scrolled .mobile-toggle, .navbar.scrolled .mobile-hamburger-btn, .navbar.scrolled .mobile-close-btn,
  .navbar.scrolled .navbar-brand, .navbar.scrolled .dropdown-toggle, .navbar.scrolled .phone-header-btn,
  body.menu-open .navbar .mobile-toggle, body.nav-open .navbar .mobile-toggle, body.mobile-menu-open .navbar .mobile-toggle,
  .navbar.active .mobile-toggle, .navbar.open .mobile-toggle, .navbar.show .mobile-toggle, .navbar.menu-open .mobile-toggle,
  .navbar:has(.nav-menu.active) .mobile-toggle, .navbar:has(#navMenu.active) .mobile-toggle, .navbar:has(.mobile-menu.active) .mobile-toggle, .navbar:has(.mobile-toggle.active) .mobile-toggle,
  body.menu-open .navbar .navbar-brand, body.nav-open .navbar .navbar-brand, body.mobile-menu-open .navbar .navbar-brand,
  .navbar.active .navbar-brand, .navbar.open .navbar-brand, .navbar.show .navbar-brand, .navbar.menu-open .navbar-brand,
  .navbar:has(.nav-menu.active) .navbar-brand, .navbar:has(#navMenu.active) .navbar-brand, .navbar:has(.mobile-menu.active) .navbar-brand, .navbar:has(.mobile-toggle.active) .navbar-brand,
  body.menu-open .navbar .phone-header-btn, body.nav-open .navbar .phone-header-btn, body.mobile-menu-open .navbar .phone-header-btn,
  .navbar.active .phone-header-btn, .navbar.open .phone-header-btn, .navbar.show .phone-header-btn, .navbar.menu-open .phone-header-btn,
  .navbar:has(.nav-menu.active) .phone-header-btn, .navbar:has(#navMenu.active) .phone-header-btn, .navbar:has(.mobile-menu.active) .phone-header-btn, .navbar:has(.mobile-toggle.active) .phone-header-btn {
    color: #F8F8F6 !important;
  }
  .navbar.scrolled .mobile-toggle svg, .navbar.scrolled .mobile-hamburger-btn svg, .navbar.scrolled .mobile-close-btn svg,
  .navbar.scrolled .navbar-brand svg, .navbar.scrolled .dropdown-toggle svg, .navbar.scrolled .phone-header-btn svg,
  body.menu-open .navbar .mobile-toggle svg, body.nav-open .navbar .mobile-toggle svg, body.mobile-menu-open .navbar .mobile-toggle svg,
  .navbar.active .mobile-toggle svg, .navbar.open .mobile-toggle svg, .navbar.show .mobile-toggle svg, .navbar.menu-open .mobile-toggle svg,
  .navbar:has(.nav-menu.active) .mobile-toggle svg, .navbar:has(#navMenu.active) .mobile-toggle svg, .navbar:has(.mobile-menu.active) .mobile-toggle svg, .navbar:has(.mobile-toggle.active) .mobile-toggle svg,
  body.menu-open .navbar .phone-header-btn svg, body.nav-open .navbar .phone-header-btn svg, body.mobile-menu-open .navbar .phone-header-btn svg,
  .navbar.active .phone-header-btn svg, .navbar.open .phone-header-btn svg, .navbar.show .phone-header-btn svg, .navbar.menu-open .phone-header-btn svg,
  .navbar:has(.nav-menu.active) .phone-header-btn svg, .navbar:has(#navMenu.active) .phone-header-btn svg, .navbar:has(.mobile-menu.active) .phone-header-btn svg, .navbar:has(.mobile-toggle.active) .phone-header-btn svg,
  body.menu-open .navbar .navbar-brand svg, body.nav-open .navbar .navbar-brand svg, body.mobile-menu-open .navbar .navbar-brand svg,
  .navbar.active .navbar-brand svg, .navbar.open .navbar-brand svg, .navbar.show .navbar-brand svg, .navbar.menu-open .navbar-brand svg,
  .navbar:has(.nav-menu.active) .navbar-brand svg, .navbar:has(#navMenu.active) .navbar-brand svg, .navbar:has(.mobile-menu.active) .navbar-brand svg, .navbar:has(.mobile-toggle.active) .navbar-brand svg {
    color: #F8F8F6 !important;
    stroke: currentColor !important;
  }
  .navbar.scrolled .mobile-toggle svg path, .navbar.scrolled .mobile-hamburger-btn svg path, .navbar.scrolled .mobile-close-btn svg path,
  .navbar.scrolled .navbar-brand svg path, .navbar.scrolled .dropdown-toggle svg path, .navbar.scrolled .phone-header-btn svg path,
  body.menu-open .navbar .mobile-toggle svg path, body.nav-open .navbar .mobile-toggle svg path, body.mobile-menu-open .navbar .mobile-toggle svg path,
  .navbar.active .mobile-toggle svg path, .navbar.open .mobile-toggle svg path, .navbar.show .mobile-toggle svg path, .navbar.menu-open .mobile-toggle svg path,
  .navbar:has(.nav-menu.active) .mobile-toggle svg path, .navbar:has(#navMenu.active) .mobile-toggle svg path, .navbar:has(.mobile-menu.active) .mobile-toggle svg path, .navbar:has(.mobile-toggle.active) .mobile-toggle svg path,
  body.menu-open .navbar .phone-header-btn svg path, body.nav-open .navbar .phone-header-btn svg path, body.mobile-menu-open .navbar .phone-header-btn svg path,
  .navbar.active .phone-header-btn svg path, .navbar.open .phone-header-btn svg path, .navbar.show .phone-header-btn svg path, .navbar.menu-open .phone-header-btn svg path,
  .navbar:has(.nav-menu.active) .phone-header-btn svg path, .navbar:has(#navMenu.active) .phone-header-btn svg path, .navbar:has(.mobile-menu.active) .phone-header-btn svg path, .navbar:has(.mobile-toggle.active) .phone-header-btn svg path,
  body.menu-open .navbar .navbar-brand svg path, body.nav-open .navbar .navbar-brand svg path, body.mobile-menu-open .navbar .navbar-brand svg path,
  .navbar.active .navbar-brand svg path, .navbar.open .navbar-brand svg path, .navbar.show .navbar-brand svg path, .navbar.menu-open .navbar-brand svg path,
  .navbar:has(.nav-menu.active) .navbar-brand svg path, .navbar:has(#navMenu.active) .navbar-brand svg path, .navbar:has(.mobile-menu.active) .navbar-brand svg path, .navbar:has(.mobile-toggle.active) .navbar-brand svg path {
    stroke: currentColor !important;
  }
  
  .navbar.scrolled .mobile-toggle svg { color: inherit !important; }
  .navbar.scrolled .mobile-toggle svg path { stroke: currentColor !important; }
  
  .navbar.scrolled .nav-menu > li > a,
  .navbar.scrolled .nav-menu > .nav-item > a,
  .navbar.scrolled .nav-link,
  .navbar.scrolled a:not(.nav-cta-btn) { color: #F8F8F6 !important; }
  .cart-link.nav-cart,
  .login-link.nav-login,
  .nav-search-toggle,
  .search-toggle { background: var(--bg-light, #ffffff) !important; color: var(--text-dark, #1a1a1a) !important; }
  .cart-link.nav-cart svg,
  .login-link.nav-login svg,
  .nav-search-toggle svg,
  .search-toggle svg { stroke: var(--text-dark, #1a1a1a) !important; color: var(--text-dark, #1a1a1a) !important; }
  .mobile-search-panel { color: #F8F8F6 !important; }
  .mobile-search-panel input { color: #F8F8F6 !important; background: rgba(255,255,255,0.12) !important; }
  .mobile-search-panel .close-search { color: #F8F8F6 !important; background: rgba(255,255,255,0.15) !important; }
  .mobile-search-panel .close-search svg { stroke: #F8F8F6 !important; color: #F8F8F6 !important; }
  .mobile-search-panel .close-search:hover { color: #F8F8F6 !important; background: rgba(255,255,255,0.25) !important; }
  .mobile-search-panel .close-search:hover svg { stroke: #F8F8F6 !important; color: #F8F8F6 !important; }
  .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; opacity: 0 !important; visibility: hidden !important;
    pointer-events: none !important; box-shadow: none !important; border: none !important;
    padding: 0 !important; transform: none !important;
  }
  .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; opacity: 0 !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;
  }
}
/* === NAVBAR STYLE OVERRIDES END === */

/* 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: #0a43b5;
  --cc-btn-primary-color: #ffffff;
  --cc-btn-primary-border: #0a43b5;
  --cc-btn-primary-hover-bg: #002a9c;
  --cc-btn-primary-hover-border: #002a9c;
  --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: #0a43b5;
}

#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(10, 67, 181, 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: #0a43b5 !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: #002a9c !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: #12305F;
}

/* 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;
}

/* 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(18, 48, 95, 0.1) !important;
  background: rgba(18, 48, 95, 0.1) !important;
  box-shadow: 0 2px 8px rgba(18, 48, 95, 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: #12305F !important;
  stroke: #12305F !important;
  color: #12305F !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: #12305F !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: #12305F !important;
  color: #12305F !important;
  background-color: rgba(18, 48, 95, 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: #12305F !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;
}

/* AI-generated section */
/* ============================================================
   SUNVEX ENERGY — Contact Form Section
   Section ID: index-contact-form-section
   ============================================================ */

.ics-contact-section {
  background: #0b1f4a;
  background-image:
    radial-gradient(ellipse at 10% 20%, rgba(10, 67, 181, 0.35) 0%, transparent 55%),
    radial-gradient(ellipse at 90% 80%, rgba(247, 148, 29, 0.12) 0%, transparent 50%);
  padding: 90px 20px;
  font-family: system-ui, sans-serif;
  direction: rtl;
  position: relative;
  overflow: hidden;
}

.ics-contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
}

/* Container */
.ics-container {
  max-width: 1180px;
  margin: 0 auto;
}

/* ── Section Header ── */
.ics-header {
  text-align: center;
  margin-bottom: 56px;
}

.ics-title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 14px 0;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.ics-title span {
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.ics-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  font-weight: 400;
}

/* ── Content Grid ── */
.ics-content-grid {
  display: grid;
  grid-template-columns: 1fr 1.7fr;
  gap: 36px;
  align-items: start;
}

/* ── Contact Info Column ── */
.ics-contact-info {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 36px 30px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  height: 100%;
  box-sizing: border-box;
}

.ics-info-badge {
  display: inline-block;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  color: #1a1a1a;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 14px;
  border-radius: 100px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.ics-info-title {
  font-size: 1.45rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 12px 0;
  line-height: 1.3;
}

.ics-info-desc {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.7;
  margin: 0 0 32px 0;
}

/* Contact List */
.ics-contact-list {
  list-style: none;
  padding: 0;
  margin: 0 0 32px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ics-contact-item {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ics-contact-icon {
  width: 46px;
  height: 46px;
  min-width: 46px;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  flex-shrink: 0;
}

.ics-contact-detail {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ics-contact-label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.5);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ics-contact-value {
  font-size: 1rem;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.ics-contact-value:hover {
  color: #FFC107;
}

/* Trust Badges */
.ics-trust-badges {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ics-trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.75);
  font-weight: 500;
}

.ics-trust-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  background: rgba(247, 148, 29, 0.2);
  border: 1px solid rgba(247, 148, 29, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F7941D;
  font-size: 0.75rem;
  font-weight: 800;
}

/* ── Form Card ── */
.ics-form-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 44px 40px;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.28),
    0 4px 16px rgba(0, 0, 0, 0.12);
  position: relative;
  overflow: hidden;
}

.ics-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  border-radius: 20px 20px 0 0;
}

/* Form Layout */
.ics-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

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

.ics-form-group {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.ics-form-group--full {
  grid-column: 1 / -1;
}

/* Label */
.ics-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: #1e2d50;
  letter-spacing: 0.01em;
}

.ics-required {
  color: #e53e3e;
  margin-right: 2px;
}

/* Input Wrapper */
.ics-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.ics-textarea-wrapper {
  align-items: flex-start;
}

.ics-input-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

.ics-textarea-wrapper .ics-input-icon {
  top: 14px;
  transform: none;
}

/* Input Fields */
.ics-input {
  width: 100%;
  padding: 13px 44px 13px 16px;
  font-size: 0.97rem;
  font-family: system-ui, sans-serif;
  color: #1e2d50;
  background: #f8faff;
  border: 1.5px solid #dde3f0;
  border-radius: 10px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.2s ease;
  box-sizing: border-box;
  direction: rtl;
}

.ics-input[dir="ltr"] {
  direction: ltr;
  text-align: right;
}

.ics-input::placeholder {
  color: #a0aec0;
  font-family: system-ui, sans-serif;
}

.ics-input:focus {
  border-color: var(--primary, #0A43B5);
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(10, 67, 181, 0.12);
}

.ics-input:hover:not(:focus) {
  border-color: #b0bcd8;
}

/* Textarea */
.ics-textarea {
  resize: vertical;
  min-height: 110px;
  padding-top: 13px;
  padding-bottom: 13px;
  line-height: 1.6;
}

/* Error State */
.ics-input.ics-input--error {
  border-color: #e53e3e;
  box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.1);
}

.ics-error-msg {
  font-size: 0.8rem;
  color: #e53e3e;
  font-weight: 500;
  min-height: 1.1em;
  display: block;
}

/* Form Footer */
.ics-form-footer {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}

/* Submit Button */
.ics-submit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 17px 32px;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  color: #1a1a1a;
  font-size: 1.08rem;
  font-weight: 700;
  font-family: system-ui, sans-serif;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 6px 20px rgba(247, 148, 29, 0.4);
  letter-spacing: 0.01em;
}

.ics-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(247, 148, 29, 0.5);
  filter: brightness(1.05);
}

.ics-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(247, 148, 29, 0.35);
}

.ics-submit-btn:focus-visible {
  outline: 3px solid var(--primary, #0A43B5);
  outline-offset: 3px;
}

.ics-btn-arrow {
  font-size: 1.2rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.ics-submit-btn:hover .ics-btn-arrow {
  transform: translateX(-4px);
}

/* Loading state */
.ics-submit-btn.ics-loading {
  opacity: 0.75;
  pointer-events: none;
  cursor: not-allowed;
}

/* Privacy Note */
.ics-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.8rem;
  color: #718096;
  line-height: 1.55;
  margin: 0;
}

.ics-privacy-note svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: #94a3b8;
}

/* ── Success Message ── */
.ics-success-msg {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  gap: 16px;
}

.ics-success-msg.ics-visible {
  display: flex;
}

.ics-success-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #F7941D 0%, #FFC107 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #1a1a1a;
  animation: ics-pop-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes ics-pop-in {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.ics-success-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: #1e2d50;
  margin: 0;
}

.ics-success-text {
  font-size: 1rem;
  color: #4a5568;
  line-height: 1.65;
  margin: 0;
  max-width: 380px;
}

/* ── Responsive ── */
@media (max-width: 960px) {
  .ics-content-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ics-contact-info {
    order: 2;
  }

  .ics-form-card {
    order: 1;
  }

  .ics-contact-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .ics-trust-badges {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .ics-trust-item {
    flex: 0 0 auto;
  }
}

@media (max-width: 640px) {
  .ics-contact-section {
    padding: 60px 16px;
  }

  .ics-header {
    margin-bottom: 36px;
  }

  .ics-form-card {
    padding: 28px 20px;
    border-radius: 16px;
  }

  .ics-form-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .ics-contact-list {
    grid-template-columns: 1fr;
  }

  .ics-trust-badges {
    flex-direction: column;
  }

  .ics-contact-info {
    padding: 24px 20px;
  }

  .ics-submit-btn {
    padding: 15px 24px;
    font-size: 1rem;
  }
}

@media (max-width: 400px) {
  .ics-title {
    font-size: 1.6rem;
  }

  .ics-form-card {
    padding: 22px 16px;
  }
}

.navbar .logo {
  filter: brightness(0) invert(1) sepia(1) saturate(3) hue-rotate(5deg);
}
/* 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 (e.g. height:234px) collapse to 0px wide on mobile
     because nothing in the subtree pushes back on the cross-axis. Force them
     to fill the parent container so the wrapper's aspect-ratio chain resolves. */
  .zappy-inserted-element:has(> [data-zappy-zoom-wrapper="true"]) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !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;
  }
  
  /* ========== 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: hidden !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; }

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