@import url(../libs/swiper/swiper.min.css);
@import url(../libs/fancybox/fancybox.css);
* {
  margin: 0;
  padding: 0;
  /*outline: none;*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  line-height: 1;
  min-width: 320px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  position: relative;
}

article,
aside,
details,
figure,
figfz-x-sm,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: block;
  max-width: 100%;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.hidden,
[hidden],
template {
  display: none;
}
html{
  scroll-behavior: smooth;
}
a {
  text-decoration: none;
  background: transparent;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
}

a:active, a:hover {
  /*outline: 0;*/
}

a img {
  border: 0;
}

b,
strong {
  font-weight: bold;
}

small {
  font-size: 75%;
}

sub,
sup {
  font-size: .5em;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -1em;
}

sub {
  bottom: -.25em;
}

svg:not(:root) {
  overflow: hidden;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  border: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  text-transform: none;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /*outline: none !important;*/
  background-clip: padding-box;
  background-color: transparent;
}

button,
html input[type='button'] {
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

textarea::-webkit-input-placeholder {
  color: inherit;
  -webkit-transition: .3s all;
  transition: .3s all;
}

textarea::-moz-placeholder {
  color: inherit;
  -moz-transition: .3s all;
  transition: .3s all;
}

textarea:-ms-input-placeholder {
  color: inherit;
  -ms-transition: .3s all;
  transition: .3s all;
}

textarea::-ms-input-placeholder {
  color: inherit;
  -ms-transition: .3s all;
  transition: .3s all;
}

textarea::placeholder {
  color: inherit;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
}

textarea:focus::-webkit-input-placeholder {
  color: transparent;
}

textarea:focus::-moz-placeholder {
  color: transparent;
}

textarea:focus:-ms-input-placeholder {
  color: transparent;
}

textarea:focus::-ms-input-placeholder {
  color: transparent;
}

textarea:focus::placeholder {
  color: transparent;
}

input {
  line-height: normal;
}

input::-webkit-input-placeholder {
  color: inherit;
  -webkit-transition: .3s all;
  transition: .3s all;
}

input::-moz-placeholder {
  color: inherit;
  -moz-transition: .3s all;
  transition: .3s all;
}

input:-ms-input-placeholder {
  color: inherit;
  -ms-transition: .3s all;
  transition: .3s all;
}

input::-ms-input-placeholder {
  color: inherit;
  -ms-transition: .3s all;
  transition: .3s all;
}

input::placeholder {
  color: inherit;
  -webkit-transition: .3s all;
  -o-transition: .3s all;
  transition: .3s all;
}

input:focus::-webkit-input-placeholder {
  color: transparent !important;
}

input:focus::-moz-placeholder {
  color: transparent !important;
}

input:focus:-ms-input-placeholder {
  color: transparent !important;
}

input:focus::-ms-input-placeholder {
  color: transparent !important;
}

input:focus::placeholder {
  color: transparent !important;
}

input[type='reset'], input[type='submit'] {
  cursor: pointer;
  -webkit-appearance: button;
  -moz-appearance: button;
  appearance: button;
}

input[type='checkbox'], input[type='radio'] {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0;
}

input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button {
  height: auto;
}

input[type='search'] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

input[type='search']::-webkit-search-cancel-button, input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

textarea {
  resize: none;
  overflow: auto;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

td,
th {
  padding: 0;
}

ol,
ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 0;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

@font-face {
  font-family: "Shitufim";
  src: url("../fonts/shitufim.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poeti AAA";
  src: url("../fonts/poeti_aaa_300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poeti AAA";
  src: url("../fonts/poeti_aaa_400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Poeti AAA";
  src: url("../fonts/poeti_aaa_700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Noto Sans Hebrew New — new brand font per Figma design (2026-07-16) */
@font-face {
  font-family: "Noto Sans Hebrew New";
  src: url("../fonts/NotoSansHebrew-Regular.woff2") format("woff2"),
       url("../fonts/NotoSansHebrew-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Hebrew New";
  src: url("../fonts/NotoSansHebrew-Medium.woff2") format("woff2"),
       url("../fonts/NotoSansHebrew-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Hebrew New";
  src: url("../fonts/NotoSansHebrew-SemiBold.woff2") format("woff2"),
       url("../fonts/NotoSansHebrew-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Hebrew New";
  src: url("../fonts/NotoSansHebrew-Bold.woff2") format("woff2"),
       url("../fonts/NotoSansHebrew-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Hebrew New";
  src: url("../fonts/NotoSansHebrew-ExtraBold.woff2") format("woff2"),
       url("../fonts/NotoSansHebrew-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Hebrew New";
  src: url("../fonts/NotoSansHebrew-Thin.woff2") format("woff2"),
       url("../fonts/NotoSansHebrew-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Hebrew New";
  src: url("../fonts/NotoSansHebrew-Black.woff2") format("woff2"),
       url("../fonts/NotoSansHebrew-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}






:root {
  /* Brand palette — updated 2026-07-16 to match the new Figma design (קווים אדומים לתכנות רינת). Old names kept so every existing var() usage repaints automatically; new names added for Phase 2/3 work. */
  --color-purple_300: #722b8f;
  --color-purple_200: #722b8f;
  --color-red_400: #722b8f;
  --color-red_300: #722b8f;
  --color-red_200: #722b8f;
  --color-red_100: #722b8fbd;
  --color-orange_200: #f6882c;
  --color-orange_100: #f6882c;
  --color-brown_100: #a36a3b;
  --color-black: #515865;
  --color-white: #fff;
  --color-gray_700: #6E7988;
  --color-gray_600: #768293;
  --color-gray_500: #768293;
  --color-gray_400: #cfcfcf;
  --color-gray_300: #3b3b3b29;
  --color-gray_200: #252526;

  /* New tokens from the Figma design */
  --color-purple: #722b8f;
  --color-purple-light: #faf5ff;
  --color-purple-sticky-menu-bg: #f1ebf6;
  --color-orange: #f6882c;
  --color-text: #515865;
  --color-text-secondary: #768293;
  --color-text-muted: #6E7988;

  /* Neutral surfaces. The theme had drifted into four near-identical light
     greys - #f8f9fb (body, partners, information page), #f9f9f9 (cards,
     updates card, select dropdown), #f3f3f3 (active tab, explain card) and
     #f1f1f1 (active select item). The first two differ by less than one step
     and were indistinguishable on screen, as were the last two, so they
     collapse into one surface pair. */
  --color-surface: #f8f9fb;
  --color-surface-alt: #f3f3f3;

  --gradient-brand: var(--color-purple);
  --font-family-base: "Noto Sans Hebrew New", "Poeti AAA", sans-serif;
  --shadow-card: 0 10px 32px -4px rgba(24, 39, 75, 0.10), 0 6px 14px -6px rgba(24, 39, 75, 0.12);

  /* Type scale — desktop (Figma "Desktop/*" text styles). Fixed px, matching the Figma spec
     exactly at any viewport width.
     BACKUP (2026-07-20): a fluid vw version of this block (basis 1440px) was tried and reverted
     the same day — on any viewport wider than 1440px (e.g. the very common 1920px) it rendered
     noticeably larger than the Figma spec, which is why we went back to fixed px. Kept here in
     case fluid sizing (properly clamp()-ed next time) is revisited later:
       --font-size-h1: 5.55556vw;          --font-size-h4: 1.66667vw;      --font-size-button-small: 0.97222vw;
       --font-size-h2: 3.61111vw;          --font-size-h5: 1.38889vw;      --font-size-caption: 1.11111vw;
       --font-size-h3: 2.08333vw;          --font-size-body: 1.18056vw;
                                            --font-size-button: 1.25vw; */
  --font-size-h1: 80px;
  --line-height-h1: 1;
  --font-size-h2: 52px;
  --line-height-h2: 45.36px;
  --letter-spacing-h2: 0.864px;
  --font-size-h3: 30px;
  --line-height-h3: 1.3;
  --font-size-h4: 24px;
  --line-height-h4: 1.3;
  --font-weight-h4: 600;
  --font-size-h5: 20px;
  --line-height-h5: 1.2;
  --font-size-body: 17px;
  --line-height-body: 1.3;
  --letter-spacing-body: -0.101px;
  --font-size-button: 18px;
  --line-height-button: 1.3;
  --font-weight-button: 500;
  --font-size-button-small: 14px;
  --line-height-button-small: 20px;
  --font-family-caption: var(--font-family-base);
  --font-size-caption: 16px;

  /* Type scale — mobile. Fixed px, matching the Figma spec exactly at any viewport width.
     BACKUP (2026-07-20): fluid vw version (basis 375px), reverted alongside the desktop set
     above for the same oversizing-at-wider-viewports reason (this range is used up to 768px):
       --font-size-h1-mobile: 9.33333vw;   --font-size-h3-mobile: 5.86667vw;   --font-size-body-mobile: 4.26667vw;
       --font-size-h2-mobile: 9.33333vw;   --font-size-h4-mobile: 4.8vw;       --font-size-caption-mobile: 3.73333vw; */
  --font-size-h1-mobile: 35px;
  --line-height-h1-mobile: 1.1;
  --font-size-h2-mobile: 35px;
  --line-height-h2-mobile: 1.2;
  --font-size-h3-mobile: 22px;
  --line-height-h3-mobile: 1.3;
  --font-size-h4-mobile: 18px;
  --line-height-h4-mobile: 1.3;
  --font-size-body-mobile: 16px;
  --line-height-body-mobile: 1.3;
  --font-size-caption-mobile: 14px;
  --line-height-caption-mobile: 1.3;
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes run {
  from {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

@keyframes run {
  from {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
  }
  to {
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}

body {
  color: var(--color-black);
  font-size: var(--font-size-body);
  font-family: var(--font-family-base);
  background-color: var(--color-surface);
}

body.fixed {
  overflow: hidden;
}

.container {
  width: 85.42vw;
  margin: 0 auto;
}

.blank-page-container {
  max-width: 40.88542vw;
  margin: 0 auto;
}

.blank-page .breadcrumbs {
  margin-bottom: 0;
}

/* This page used to pull its breadcrumbs out of the flow
   (position:absolute; top:32px; right:24px), which put them in a different
   spot from every other desktop page. Left in the normal flow they inherit
   the shared .breadcrumbs placement and line up with the rest of the site. */

@media screen and (max-width: 768px) {
  .blank-page .breadcrumbs {
    margin-bottom: 5.33333vw;
  }
}

.blank-title {
  font-size: var(--font-size-h2);
  text-align: center;
  margin-bottom: 0.44286em;
}

@media screen and (max-width: 768px) {
  .blank-title {
    font-size: var(--font-size-h2-mobile);
    margin-bottom: 0.4em;
  }
}

.blank-section {
  padding-bottom: 4.32292vw;
}

@media screen and (max-width: 768px) {
  .blank-section {
    padding-bottom: 20.66667vw;
  }
}

@media (max-width: 1240px) {
  .container, .blank-page-container {
    max-width: none;
    width: 94vw;
  }
}

@media (max-width: 768px) {
  .container, .blank-page-container {
    width: 92.66667vw;
  }
}

.page,
.footer {
  position: relative;
}

/* Guarantees a minimum content-to-footer gap on every page. Kept as padding
   (not margin) on the <main class="page"> element itself, not on .footer,
   so the space stays inside .page's box and inherits its :before
   background-pattern texture (see ".page:before, .footer:before" below)
   instead of showing bare body background and creating a visible seam
   above the footer. Scoped to "main.page" rather than just ".page" -
   WordPress's body_class() also adds a plain "page" class to <body> on
   every Page post type, and a bare ".page" selector was matching that too,
   adding the same padding a second time at the very bottom of <body>
   (i.e. below the footer). */
main.page {
  padding-bottom: 50px;
}

.page .container,
.footer .container {
  position: relative;
  z-index: 4;
}

/* The page-body texture (bg-pattern.png) was removed site-wide on 2026-07-29
   so every page shows the flat #f8f9fb surface. Previously the pattern was
   painted here on every .page and killed only on page-information (per-template
   rule further down), which is why the Knowledge Centre alone looked clean and
   the rest looked textured. The empty pseudo-elements are kept so the z-index
   stacking with `.page .container { z-index: 4 }` is undisturbed; `.footer:before`
   is already separately neutralized to `background: none` near the footer rules. */
.page:before,
.footer:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.knowledge .buttons__section:before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: var(--color-purple-light) !important;
  z-index: -1;
}
main.page {
  padding-top: 6.18vw;
}

.form__select {
  position: relative;
  font-size: var(--font-size-button);
}

@media screen and (max-width: 768px) {
  .form__select {
    font-size: var(--font-size-body-mobile);
  }
}

.form__select.opened .form__select-button {
  color: var(--color-purple);
}

.form__select.opened .form__select-button:before {
  -webkit-transform: translateY(-50%) scaleY(-1);
  -ms-transform: translateY(-50%) scaleY(-1);
  transform: translateY(-50%) scaleY(-1);
}

.form__select.opened .form__select-dropdown {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.form__select-button {
  position: relative;
  z-index: 3;
}

html[dir="ltr"] .form__select-button {
  padding: 0.5vw 1.7vw 0.5vw 1vw;
}

html[dir="rtl"] .form__select-button {
  padding: 0.5vw 1vw 0.5vw 1.7vw;
}

.form__select-button:before {
  content: "\e904";
  font-family: "Shitufim", serif;
  position: absolute;
  z-index: 3;
  font-size: 0.5vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

html[dir="ltr"] .form__select-button:before {
  right: 1em;
}

html[dir="rtl"] .form__select-button:before {
  left: 1em;
}

@media screen and (max-width: 768px) {
  .form__select-button:before {
    font-size: 2.8vw;
  }
  html[dir="ltr"] .form__select-button:before {
    right: 5.86667vw;
  }
  html[dir="rtl"] .form__select-button:before {
    left: 5.86667vw;
  }
}

@media screen and (max-width: 768px) {
  .form__select-button {
    font-size: var(--font-size-body-mobile);
  }
}

.form__select-button:hover {
  color: var(--color-purple);
}

.form__select-dropdown {
  position: absolute;
  list-style: none;
  top: 100%;
  right: 0;
  left: 0;
  padding-bottom: 0.6vw;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-2vw);
  -ms-transform: translateY(-2vw);
  transform: translateY(-2vw);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.form__select-dropdown:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -2vw;
  right: 0;
  left: 0;
  bottom: 0;
  padding-bottom: 0.6vw;
  background-color: var(--color-surface);
  -webkit-box-shadow: 1vw 1vw 1vw 0 rgba(0, 0, 0, 0.1);
  box-shadow: 1vw 1vw 1vw 0 rgba(0, 0, 0, 0.1);
  border-radius: 0.6vw;
}

.form__select-item {
  cursor: pointer;
  padding: 0.3vw 1vw;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.form__select-item.active, .form__select-item:hover {
  background-color: var(--color-surface-alt);
}

.form__checkbox {
  display: inline-block;
  font-size: var(--font-size-caption);
  position: relative;
  cursor: pointer;
}

.form__checkbox:hover {
  color: var(--color-red_300);
}

.form__checkbox span {
  position: relative;
  display: block;
  z-index: 2;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.form__checkbox span:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -0.5vw;
  right: -0.5vw;
  bottom: -0.5vw;
  left: -0.5vw;
  border-radius: 2vw;
  background-color: var(--color-red_300);
  opacity: 0;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}

.form__checkbox input {
  /*visibility: hidden;*/
  position: absolute;
}

.form__checkbox input:checked + span {
  color: var(--color-white);
}

.form__checkbox input:checked + span:before {
  opacity: 1;
}

a,
button,
.button {
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"] {
  padding: 0.62vw 0;
  border-bottom: 1px solid var(--color-white);
  color: var(--color-white);
  font-weight: 400;
}

input[type="text"]::-webkit-input-placeholder, input[type="email"]::-webkit-input-placeholder, input[type="tel"]::-webkit-input-placeholder, input[type="password"]::-webkit-input-placeholder, input[type="number"]::-webkit-input-placeholder {
  color: var(--color-white);
}

input[type="text"]::-moz-placeholder, input[type="email"]::-moz-placeholder, input[type="tel"]::-moz-placeholder, input[type="password"]::-moz-placeholder, input[type="number"]::-moz-placeholder {
  color: var(--color-white);
}

input[type="text"]:-ms-input-placeholder, input[type="email"]:-ms-input-placeholder, input[type="tel"]:-ms-input-placeholder, input[type="password"]:-ms-input-placeholder, input[type="number"]:-ms-input-placeholder {
  color: var(--color-white);
}

input[type="text"]::-ms-input-placeholder, input[type="email"]::-ms-input-placeholder, input[type="tel"]::-ms-input-placeholder, input[type="password"]::-ms-input-placeholder, input[type="number"]::-ms-input-placeholder {
  color: var(--color-white);
}

input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="password"]::placeholder,
input[type="number"]::placeholder {
  color: var(--color-white);
}

input[type="text"].dark,
input[type="email"].dark,
input[type="tel"].dark,
input[type="password"].dark,
input[type="number"].dark {
  color: var(--color-black);
}

input[type="text"].dark::-webkit-input-placeholder, input[type="email"].dark::-webkit-input-placeholder, input[type="tel"].dark::-webkit-input-placeholder, input[type="password"].dark::-webkit-input-placeholder, input[type="number"].dark::-webkit-input-placeholder {
  color: var(--color-black);
}

input[type="text"].dark::-moz-placeholder, input[type="email"].dark::-moz-placeholder, input[type="tel"].dark::-moz-placeholder, input[type="password"].dark::-moz-placeholder, input[type="number"].dark::-moz-placeholder {
  color: var(--color-black);
}

input[type="text"].dark:-ms-input-placeholder, input[type="email"].dark:-ms-input-placeholder, input[type="tel"].dark:-ms-input-placeholder, input[type="password"].dark:-ms-input-placeholder, input[type="number"].dark:-ms-input-placeholder {
  color: var(--color-black);
}

input[type="text"].dark::-ms-input-placeholder, input[type="email"].dark::-ms-input-placeholder, input[type="tel"].dark::-ms-input-placeholder, input[type="password"].dark::-ms-input-placeholder, input[type="number"].dark::-ms-input-placeholder {
  color: var(--color-black);
}

input[type="text"].dark::placeholder,
input[type="email"].dark::placeholder,
input[type="tel"].dark::placeholder,
input[type="password"].dark::placeholder,
input[type="number"].dark::placeholder {
  color: var(--color-black);
}
.join__form input[type="text"],
.join__form input[type="email"],
.join__form input[type="tel"],
.join__form input[type="password"],
.join__form input[type="number"] {
  padding: 0.62vw 0;
  border-bottom: 1px solid var(--color-gray_500);
  color: var(--color-black);
  font-weight: 400;
}

.join__form input[type="text"]::-webkit-input-placeholder, .join__form input[type="email"]::-webkit-input-placeholder, .join__form input[type="tel"]::-webkit-input-placeholder, .join__form input[type="password"]::-webkit-input-placeholder, .join__form input[type="number"]::-webkit-input-placeholder {
  color: var(--color-gray_500);
}

.join__form input[type="text"]::-moz-placeholder, .join__form input[type="email"]::-moz-placeholder, .join__form input[type="tel"]::-moz-placeholder, .join__form input[type="password"]::-moz-placeholder, .join__form input[type="number"]::-moz-placeholder {
  color: var(--color-gray_500);
}

.join__form input[type="text"]:-ms-input-placeholder, .join__form input[type="email"]:-ms-input-placeholder, .join__form input[type="tel"]:-ms-input-placeholder, .join__form input[type="password"]:-ms-input-placeholder, .join__form input[type="number"]:-ms-input-placeholder {
  color: var(--color-gray_500);
}

.join__form input[type="text"]::-ms-input-placeholder, .join__form input[type="email"]::-ms-input-placeholder, .join__form input[type="tel"]::-ms-input-placeholder, .join__form input[type="password"]::-ms-input-placeholder, .join__form input[type="number"]::-ms-input-placeholder {
  color: var(--color-gray_500);
}

.join__form input[type="text"]::placeholder,
.join__form input[type="email"]::placeholder,
.join__form input[type="tel"]::placeholder,
.join__form input[type="password"]::placeholder,
.join__form input[type="number"]::placeholder {
  color: var(--color-gray_500);
}







.button {
  position: relative;
  z-index: 2;
  height: 2.4vw;
  padding: 0 1em;
  border-radius: 1.5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border: 0.11vw solid var(--color-purple);
  color: var(--color-purple);
}

.button:hover {
  border-color: var(--color-orange_200);
  color: var(--color-orange_200);
}

.button_dark {
  color: var(--color-white);
  background-color: var(--color-purple);
}

.button_dark:hover {
  background-color: var(--color-gray_700);
  border-color: var(--color-gray_700);
  color: var(--color-white);
}
.button.gradient-border-button {
  border-radius: 30.5px;
  width: 247px;
  height: 61px;
  flex-shrink: 0;
}
.button.gradient-border-button:hover {
  background: var(--gradient-brand);
  color: var(--color-white);
}
.curved-path {
  position: absolute;
  visibility: hidden;
  top: 0;
}

.curved-text {
  direction: ltr;
  fill: none;
}

.split .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.split__text {
  width: 50%;
  padding: 2.8vw 6.1vw 0;
}

.split__text p,.split__addition p , .split__text li {
  line-height: 1.67;
}

html[dir="ltr"] .split__text p {
  margin: 0 0 1vw 0.25vw;
}

html[dir="rtl"] .split__text p {
  margin: 0 0.25vw 1vw 0;
}

/* Section titles all share --font-size-h2. .split__title and .explain__title
   used to take --font-size-h1 (80px), which put them a full step above the
   other section headings on the same page (cards/wivlists/about_goal at
   52.5px) - see the "מה זאת אלימות בזוגיות" page. h1 stays reserved for the
   page hero. */
.split__title {
  margin-bottom: 1.33vw;
  font-size: var(--font-size-h2);
  line-height: 1.07;
}

.split__title mark {
  display: inline-block;
  background: var(--color-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.split__addition {
  width: 50%;
}

.split__buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 2.55vw 0 0;
}

html[dir="ltr"] .split__buttons .button {
  margin-right: 1vw;
}

html[dir="rtl"] .split__buttons .button {
  margin-left: 1vw;
}

html[dir="ltr"] .split__buttons .button:last-child {
  margin-right: 0;
}

html[dir="rtl"] .split__buttons .button:last-child {
  margin-left: 0;
}

.tabs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.tabs__wrapper > div:not(:first-of-type) {
  display: none;
}

.tabs__button {
  width: 10vw;
  height: 3vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background-color: rgba(255, 255, 255, 0.31);
  font-size: var(--font-size-h4);
}

.tabs__button:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.tabs__button.active {
  background-color: var(--color-surface-alt);
}

.plates {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -1.822vw -1.115vw;
}

.plates_two .plates__item {
  width: 50%;
}

.plates_two .plates__item:nth-child(2n) {
  -webkit-transform: translateY(8.35vw);
  -ms-transform: translateY(8.35vw);
  transform: translateY(8.35vw);
}

.plates__item {
  padding: 1.822vw 1.115vw;
  width: 100%;
  height: auto;
}

.parallax__item {
  -webkit-transition: -webkit-transform 0.3s;
  transition: -webkit-transform 0.3s;
  -o-transition: transform 0.3s;
  transition: transform 0.3s;
  transition: transform 0.3s, -webkit-transform 0.3s;
}

.group__title:after {
  content: "\e90b";
  font-family: "Shitufim", sans-serif;
  position: absolute;
  top: 50%;
  font-size: 3.6vw;
  -webkit-transform: translate(0, -50%) rotate(90deg);
  -ms-transform: translate(0, -50%) rotate(90deg);
  transform: translate(0, -50%) rotate(90deg);
  visibility: hidden;
}

html[dir="ltr"] .group__title:after {
  right: 4.93333vw;
}

html[dir="rtl"] .group__title:after {
  left: 4.93333vw;
}

.page-hero {
  padding-top: 5.72917vw;
}

/* Story page: tighten the breadcrumbs-to-title gap to ~64px (matching the
   "מה זאת אלימות" page) - the shared .page-hero padding-top above put ~102px
   there, which read as too much empty space below the breadcrumbs. Scoped to
   _story so the other .page-hero templates keep their spacing. */
.page-hero_story {
  padding-top: 3.1vw;
}

.page-hero .container {
  padding-top: 1.35417vw;
  padding-bottom: 18.22917vw;
}

.page-hero__title {
  margin-bottom: 0.3125vw;
  text-align: center;
  font-size: var(--font-size-h1);
  font-weight: 700;
  line-height: calc(151 / 144);
}

.page-hero__description {
  margin: 0 auto;
  font-size: var(--font-size-body);
  line-height: 1.5;
  text-align: center;
  color: var(--color-gray_700);
}

.page-hero__image {
  position: absolute;
  z-index: -1;
}

.page-hero__blur {
  position: absolute;
  z-index: -2;
  background-color: var(--color-orange_200);
  opacity: 0.08;
  border-radius: 50%;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}
.page-hero_information .page-hero__blur {
  z-index: 0;
  background-color: var(--color-purple_300);
}
.page-hero__blur_01 {
  width: 35.26042vw;
  height: 31.09375vw;
  top: -6.14583vw;
}

html[dir="ltr"] .page-hero__blur_01 {
  right: -16.71875vw;
}

html[dir="rtl"] .page-hero__blur_01 {
  left: -16.71875vw;
}

html[dir="rtl"] .page-hero_information  .page-hero__ball_01 {
  left: auto;
  top: -1vw;
  right: 2vw;
}
.page-hero__blur_02 {
  width: 26.82292vw;
  height: 28.125vw;
  bottom: -5.72917vw;
}

html[dir="ltr"] .page-hero__blur_02 {
  left: -8.33333vw;
}

html[dir="rtl"] .page-hero__blur_02 {
  right: -8.33333vw;
}

.page-hero__ball {
  position: absolute;
  z-index: -1;
}

.page-hero__ball_01 {
  top: -2.76042vw;
  width: 5.9375vw;
}

html[dir="ltr"] .page-hero__ball_01 {
  right: -0.46875vw;
}

html[dir="rtl"] .page-hero__ball_01 {
  left: -0.46875vw;
}

@media screen and (max-width: 768px) {
  .page-hero__ball_01 {
    width: 15.2vw;
  }
  html[dir="ltr"] .page-hero__ball_01 {
    right: 0;
  }
  html[dir="rtl"] .page-hero__ball_01 {
    left: 0;
  }
}

.page-hero__ball_02 {
  top: 2.76042vw;
  width: 2.29167vw;
}

html[dir="ltr"] .page-hero__ball_02 {
  right: 9.32292vw;
}

html[dir="rtl"] .page-hero__ball_02 {
  left: 9.32292vw;
}

@media screen and (max-width: 768px) {
  .page-hero__ball_02 {
    width: 5.86667vw;
    top: 9.76042vw;
  }
  html[dir="ltr"] .page-hero__ball_02 {
    right: 31.33333vw;
  }
  html[dir="rtl"] .page-hero__ball_02 {
    left: 31.33333vw;
  }
}
.page_wiv .hero.has_video{
  padding-top: 0;
}

.has_video .hero__box .hero__title{
  width: 100%;
  margin: 0 0 1vw;
}
.has_video .hero__box{
  align-items: center;
  max-width: 90%;
    margin: auto;
}
.has_video .hero__box .hero__box_text_wrap {
    width: 58%;
}
.has_video .hero__box .hero__box_video_wrap {
    display: inline-flex;
    width: 42%;
    justify-content: flex-start;
    flex-direction: column;
    height: 100%;
}
.hero__box_video_wrap iframe {
    border-radius: 20px;
    margin-right: 3vw;
    display: block;
    margin-left: 0;
    max-width: 100%;
    width: 100%;
    height: 367px;
}
.page_wiv .has_video  .decor__image_02{
  display: none;
}


.swiper-scrollbar {
  width: 29.42708vw;
  margin: 1.14583vw auto 0;
  opacity: 1 !important;
  padding-bottom: 1px;
  position: relative;
}

.swiper-scrollbar:before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  margin-top: -1px;
  border-bottom: 1px solid var(--color-gray_400);
}

.swiper-scrollbar-drag {
    border-bottom: 8px solid var(--color-black);
    opacity: 1 !important;
    width: 100px !important;
}


.flex-row{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row-reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}

/* .flex-row wraps a number and a "%" span in the /about/ stats block
   (about_features-item). The base rule sets `flex-direction: row-reverse`
   because the DOM order is <number><%> but Hebrew and Arabic read
   right-to-left, so reversing puts the number to the right of the %.

   English happens to bake the "%" into the value itself (an empty
   type span), so it renders correctly there. Russian ACF splits the
   value and the "%" into two elements, so the reversal produced
   "%10,8" with the "%" on the wrong side. Scoped to Russian only,
   so English keeps its current behaviour untouched. */
html[lang="ru-RU"] .flex-row{
  flex-direction: row;
}
.type{
  font-size: 2vw;
}
@media (max-width: 1240px) {
  .header,
  .page,
  .footer {
    font-size: var(--font-size-button-small);
  }
  /*.page {
    padding-top: 11.18vw;
  }*/
  .form__select {
    font-size: var(--font-size-body);
  }
  .form__select:before {
    top: 44%;
    font-size: 0.8vw;
  }
  html[dir="ltr"] .form__select-button {
    padding: 1vw 2.4vw 1vw 1.5vw;
  }
  html[dir="rtl"] .form__select-button {
    padding: 1vw 1.5vw 1vw 2.4vw;
  }
  .form__select-dropdown:before {
    top: -4vw;
  }
  .form__select-item {
    padding: 0.9vw 1.5vw;
  }
  .form__checkbox {
    font-size: var(--font-size-button-small);
  }
  html[dir="ltr"] .split__text {
    padding: 1vw 2vw 0 3vw;
  }
  html[dir="rtl"] .split__text {
    padding: 1vw 3vw 0 2vw;
  }
  html[dir="ltr"] .split__addition {
    padding-left: 2vw;
  }
  html[dir="rtl"] .split__addition {
    padding-right: 2vw;
  }
  html[dir="ltr"] .split__buttons .button {
    margin-right: 2vw;
  }
  html[dir="rtl"] .split__buttons .button {
    margin-left: 2vw;
  }
  .button {
    height: 3.5vw;
    width: 14vw;
    border-radius: 2.5vw;
  }
  .tabs__button {
    width: 16vw;
    height: 4vw;
    font-size: var(--font-size-caption);
  }
  .page-hero__description {
    font-size: var(--font-size-body);
  }
}
@media (min-width: 1090px) {
  .external-links-grid  {   max-width: 76vw;
  margin: 0 auto;
  }
  }
@media (max-width: 768px) {
  .header,
  .page,
  .footer {
    font-size: var(--font-size-body-mobile);
  }
  .page {
    padding-top: 15.13333vw;
  }
  .form__select {
    font-size: var(--font-size-body-mobile);
  }
  .form__select:before {
    top: 44%;
    font-size: 2.8vw;
  }
  .form__select-button {
    padding: 3.6vw 0;
    width: 100%;
  }
  html[dir="ltr"] .form__select-button {
    text-align: left;
  }
  html[dir="rtl"] .form__select-button {
    text-align: right;
  }
  .form__select-dropdown:before {
    top: -4vw;
  }
  .form__select-item {
    padding: 0.9vw 1.5vw;
  }
  .form__checkbox {
    font-size: 2.66667vw;
  }
  .button {
    width: 61.86667vw;
    height: 11.33333vw;
    border-radius: 5.73333vw;
  }
  .subscription__form .button {
    width: 32.86667vw;
  }
  .split .container {
    display: block;
  }
  .split__text, .split__addition {
    width: 100%;
    padding: 0;
  }
  .split__text {
    padding: 0;
    text-align: center;
  }
  .split__text p {
    line-height: calc(40 / 30);
    margin: 0 0 2.8vw;
  }
  .split__title {
    line-height: calc(73 / 70);
    font-size: var(--font-size-h2-mobile);
    margin-bottom: 5.6vw;
  }
  .split__buttons {
    margin-top: 10.4vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .split__buttons .button {
    margin: 1.53333vw 0 1.53333vw;
  }
  .tabs__button {
    width: 30.66667vw;
    height: 8.8vw;
    font-size: var(--font-size-caption-mobile);
  }
  .group__title {
    position: relative;
  }
  .group__title:after {
    visibility: visible;
  }
  .group .group__title {
    cursor: pointer;
  }
  .group__title + .group__content {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
  }
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  input[type="number"] {
    padding: 2.26667vw 0;
  }
  .page-hero .container {
    padding-top: 22.4vw;
  }
  .page-hero__title {
    font-size: var(--font-size-h1);
    margin-bottom: 5.46667vw;
  }
  .page-template-page-sites .page-hero__title {
    font-size: var(--font-size-h1);
    margin-bottom: 5.46667vw;
    margin-top: 25vw;
}
  .page-hero__description {
    font-size: var(--font-size-body-mobile);
    line-height: calc(40 / 30);
  }
  .page-hero_story .page-hero__description {
    width: auto;
  }
  .page-hero_story .page-hero__image {
    width: 32vw;
    bottom: -14vw;
  }
  html[dir="ltr"] .page-hero_story .page-hero__image {
    left: 5.86667vw;
  }
  html[dir="rtl"] .page-hero_story .page-hero__image {
    right: 5.86667vw;
  }
  .external-links-grid {
    margin-top: 1rem;
  }

  .has_video .hero__box .hero__box_text_wrap ,
  .has_video .hero__box .hero__box_video_wrap {
      display: inline-flex;
      width: 100%;
  }
  .has_video .hero__box .hero__box_text_wrap, 
  .has_video .hero__box .hero__box_video_wrap,
  .page_wiv .hero__box ,
  .has_video .hero__box{
    flex-direction: column !important;
    gap:1rem;
  }
}

.post-content {
  font-size: var(--font-size-button);
  line-height: 1.66667em;
}

@media screen and (max-width: 768px) {
  .post-content {
    font-size: var(--font-size-body-mobile);
  }
}

.post-content h2,
.post-content h3,
.post-content h4 {
  font-weight: 600;
  margin-bottom: 0.5em;
}

.post-content p,
.post-content li {
  font-size: 1em;
}

.post-content p:not(:last-child),
.post-content li:not(:last-child) {
  margin-bottom: 1em;
}

.post-content ol,
.post-content ul {
  padding-left: 2em;
  margin: 1em 0;
}

.post-content ol:first-child,
.post-content ul:first-child {
  margin-top: 0;
}

.post-content ol:last-child,
.post-content ul:last-child {
  margin-bottom: 0;
}

.post-content ul {
  list-style: disc;
}

.post-content ol {
  list-style: decimal;
}

.post-content a {
  color: var(--color-red_400);
  font-weight: 600;
}

.post-content a:hover {
  text-decoration: underline;
}

.btn-wrapper {
  margin-top: 1.5625vw;
}

@media screen and (max-width: 768px) {
  .btn-wrapper {
    margin-top: 10vw;
    text-align: center;
  }
}

.download-btn {
  color: var(--color-red_400);
  position: relative;
  display: inline-block;
}

html[dir="ltr"] .download-btn {
  padding-left: 1.66667vw;
}

html[dir="rtl"] .download-btn {
  padding-right: 1.66667vw;
}

.download-btn span {
  text-decoration: underline;
}

@media screen and (max-width: 768px) {
  html[dir="ltr"] .download-btn {
    padding-left: 6.93333vw;
  }
  html[dir="rtl"] .download-btn {
    padding-right: 6.93333vw;
  }
}

.download-btn::before {
  position: absolute;
  content: "";
  width: 0.88542vw;
  height: 1.09375vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='16.29' height='20.383' viewBox='0 0 16.29 20.383'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_437' data-name='Rectangle 437' width='16.29' height='20.383' transform='translate(0 0)' fill='%23722b8f' stroke='%23722b8f' stroke-width='0.4'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_10420' data-name='Group 10420' transform='translate(0 0)'%3E%3Cg id='Group_8777' data-name='Group 8777' transform='translate(0 0)' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_23442' data-name='Path 23442' d='M11.712.3A1,1,0,0,0,11,0H1.009A1.011,1.011,0,0,0,0,1.009V19.374a1.011,1.011,0,0,0,1.009,1.01H15.281a1.011,1.011,0,0,0,1.009-1.01V5.291a1,1,0,0,0-.3-.714Zm.052,1.727,2.5,2.5h-2.5ZM1.185,19.2V1.185h9.395V4.7a1.01,1.01,0,0,0,1.009,1.009h3.517V19.2Z' transform='translate(0 0)' fill='%23722b8f' stroke='%23722b8f' stroke-width='0.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
}

html[dir="ltr"] .download-btn::before {
  left: 0;
}

html[dir="rtl"] .download-btn::before {
  right: 0;
}

@media screen and (max-width: 768px) {
  .download-btn::before {
    width: 3.73333vw;
    height: 4.53333vw;
  }
}

.page-404 {
  position: relative;
  padding-bottom: 7.96875vw;
  min-height: 100vh;
}

.page-404 .img {
  max-width: 39.89583vw;
  margin: 0 auto;
  -webkit-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
}

@media screen and (max-width: 768px) {
  .page-404 .img {
    max-width: 100%;
  }
}

.page-404 .text-404 {
  margin-top: -2.08333vw;
}

.page-404 .text-404 h1 {
  font-weight: 400;
  font-size: var(--font-size-button);
  margin-bottom: 1.66667em;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .page-404 .text-404 h1 {
    font-size: var(--font-size-body-mobile);
  }
}

.page-404 .text-404 .button {
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .page-404 .text-404 {
    margin-top: 19.33333vw;
  }
}

.page-404 .ball__item {
  display: inline-block;
  position: absolute;
}

.page-404 .ball__item_1 {
  top: 3.125vw;
  width: 7.8125vw;
}

html[dir="ltr"] .page-404 .ball__item_1 {
  right: 10.72917vw;
}

html[dir="rtl"] .page-404 .ball__item_1 {
  left: 10.72917vw;
}

@media screen and (max-width: 768px) {
  .page-404 .ball__item_1 {
    width: 17.46667vw;
    top: 6.66667vw;
  }
  html[dir="ltr"] .page-404 .ball__item_1 {
    right: 3.73333vw;
  }
  html[dir="rtl"] .page-404 .ball__item_1 {
    left: 3.73333vw;
  }
}

.page-404 .ball__item_2 {
  top: 19.58333vw;
  width: 2.60417vw;
}

html[dir="ltr"] .page-404 .ball__item_2 {
  right: 21.14583vw;
}

html[dir="rtl"] .page-404 .ball__item_2 {
  left: 21.14583vw;
}

@media screen and (max-width: 768px) {
  .page-404 .ball__item_2 {
    width: 6.13333vw;
    top: 28.26667vw;
  }
  html[dir="ltr"] .page-404 .ball__item_2 {
    right: 23.33333vw;
  }
  html[dir="rtl"] .page-404 .ball__item_2 {
    left: 23.33333vw;
  }
}

.page-404 .ball__item_3 {
  bottom: 7.96875vw;
  width: 9.53125vw;
}

html[dir="ltr"] .page-404 .ball__item_3 {
  left: 16.51042vw;
}

html[dir="rtl"] .page-404 .ball__item_3 {
  right: 16.51042vw;
}

@media screen and (max-width: 768px) {
  .page-404 .ball__item_3 {
    width: 20.93333vw;
    top: 93.33333vw;
    bottom: auto;
  }
  html[dir="ltr"] .page-404 .ball__item_3 {
    left: 5.06667vw;
  }
  html[dir="rtl"] .page-404 .ball__item_3 {
    right: 5.06667vw;
  }
}

.page-404 .ball__item_4 {
  width: 1.25vw;
  top: 15.41667vw;
}

html[dir="ltr"] .page-404 .ball__item_4 {
  left: 10.57292vw;
}

html[dir="rtl"] .page-404 .ball__item_4 {
  right: 10.57292vw;
}

@media screen and (max-width: 768px) {
  .page-404 .ball__item_4 {
    width: 3.2vw;
    top: 86.66667vw;
  }
  html[dir="ltr"] .page-404 .ball__item_4 {
    left: 5.06667vw;
  }
  html[dir="rtl"] .page-404 .ball__item_4 {
    right: 5.06667vw;
  }
  li#menu-item-304 > a {
    width: 220px;
    text-align: center;
    margin: auto;
}
li#menu-item-304 ul li{
  text-align: center;
}
#sticky_new_button_exit.not_expended {
  bottom: 2% !important;
  width: 19vw;
}
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: var(--color-white);
  z-index: 100;
}

.loading-animation {
  text-align: center;
  display: none;
}

.loading-animation svg {
  width: 6.25vw;
  height: 6.25vw;
  opacity: 0.5;
}

.just-search .partners__filters {
  display: block;
  padding: 0;
  border-radius: 10px;
  margin-bottom: 2vw;
  width: 100%;
}


@media screen and (max-width: 768px) {
  .just-search .partners__filters {
    padding: 1vw;
  }
}

@media screen and (max-width: 768px) {
  .just-search .partners__filters .partners__search-button {
    margin-top: 4.5vw;
    -webkit-transform: translateY(5vw);
    -ms-transform: translateY(5vw);
    transform: translateY(5vw);
  }
}

.just-search .partners__filters input {
  display: block;
  color: var(--color-black);
  width: 90%;
  margin-right: 1vw;
  font-size: 1rem;
  padding: .9vw 1.66667vw;
  text-align: right;
  background-image: url("data:image/svg+xml,%3Csvg id='Group_2' data-name='Group 2' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='23' height='23.666' viewBox='0 0 23 23.666'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_5' data-name='Rectangle 5' width='23' height='23.666'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_1' data-name='Group 1' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M22.669,21.819l-5.4-5.153a9.957,9.957,0,1,0-1.618,1.417L21.19,23.37a1.07,1.07,0,0,0,1.514-.036,1.072,1.072,0,0,0-.035-1.515M1.928,9.943a8.016,8.016,0,1,1,8.016,8.015A8.024,8.024,0,0,1,1.928,9.943'/%3E%3C/g%3E%3C/svg%3E%0A");
  background-size: 1.25vw;
  background-position: right center;
  background-repeat: no-repeat;
}
html[dir="ltr"] .just-search .partners__filters input {
  padding-right: 1.66667vw;
  text-align: left;
  background-position: left center;
  margin-left: 1vw;
}
@media screen and (max-width: 768px) {
  .just-search .partners__filters input {
    background-size: 3.2vw;
    padding: 0.78125vw 4.26667vw;
  }
}

.just-search .partners__filters input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.just-search .partners__filters input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.just-search .partners__filters input:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.just-search .partners__filters input::-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.5);
}

.just-search .partners__filters input::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

main {
  position: relative;
  overflow: hidden;
}

.sticky-menu {
  position: fixed;
  width: 7.656vw;
  background: var(--color-white);
  top: 22%;
  left: 0;
  z-index: 10;
  padding: 1.76vw 1.396vw 1.76vw 1.068vw;
  border-radius: 0 1.563vw 1.563vw 0;
  -webkit-box-shadow: 0 0.625vw 1.302vw rgba(33, 33, 33, 0.16);
  box-shadow: 0 0.625vw 1.302vw rgba(33, 33, 33, 0.16);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 1.375vw;
}

@media (max-width: 768px) {
  .sticky-menu {
    top: unset;
    bottom: 0;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    width: 100%;
    gap: 0;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-radius: 3.333vw 3.333vw 0 0;
    padding: 3.907vw 0 2.867vw;
  }
}

.sticky-menu__item {
  border-bottom: 0.104vw solid var(--color-gray_400);
  padding-bottom: 1.375vw;
}

@media (max-width: 768px) {
  .sticky-menu__item {
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    border: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: 0;
    position: relative;
  }
}

@media (max-width: 768px) {
  .sticky-menu__item::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 50%;
    width: 0.267vw;
    height: 55.5%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: var(--color-gray_400);
  }
}

@media (max-width: 768px) {
  html[dir="rtl"] .sticky-menu__item:first-of-type::after {
    display: none;
  }
}

.sticky-menu__item:last-of-type {
  border-bottom: none;
  padding-bottom: 0;
}

@media (max-width: 768px) {
  html[dir="ltr"] .sticky-menu__item:last-of-type::after {
    display: none;
  }
}

.sticky-menu__item-img {
  text-align: center;
  margin-bottom: 0.365vw;
}

@media (max-width: 768px) {
  .sticky-menu__item-img {
    margin-bottom: 2.3vw;
  }
}

@media (max-width: 768px) {
  .sticky-menu__item-img img {
    max-width: unset;
    width: auto;
    min-height: 6.933vw;
    max-height: 6.933vw;
  }
}

.sticky-menu__item > a {
  color: var(--color-black);
  text-align: right;
  display: inline-block;
  width: 100%;
  position: relative;
  font-size: var(--font-size-button);
}

html[dir="ltr"] .sticky-menu__item > a {
  padding-right: 0.604vw;
}

html[dir="rtl"] .sticky-menu__item > a {
  padding-left: 0.604vw;
}

@media (max-width: 768px) {
  .sticky-menu__item > a {
    text-align: center;
    font-size: 2.933vw;
    color: var(--color-text);
  }
  html[dir="ltr"] .sticky-menu__item > a {
    padding-right: 0;
  }
  html[dir="rtl"] .sticky-menu__item > a {
    padding-left: 0;
  }
}

.sticky-menu__item > a::after {
  content: "\e902";
  font-family: Shitufim, sans-serif;
  position: absolute;
  font-size: 0.573vw;
  top: 50%;
}

html[dir="ltr"] .sticky-menu__item > a::after {
  -webkit-transform: translateY(-50%) rotate(180deg);
  -ms-transform: translateY(-50%) rotate(180deg);
  transform: translateY(-50%) rotate(180deg);
}

html[dir="rtl"] .sticky-menu__item > a::after {
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

html[dir="ltr"] .sticky-menu__item > a::after {
  right: 0;
}

html[dir="rtl"] .sticky-menu__item > a::after {
  left: 0;
}

@media (max-width: 768px) {
  .sticky-menu__item > a::after {
    display: none;
  }
}

.header {
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;
  z-index: 10;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.header.opened, .header.fixed {
  background-color: var(--color-white);
  box-shadow: 0 0.26vw 0.94vw rgba(24, 39, 75, 0.08);
}

/* No mobile idle background on purpose: leaving the header transparent lets
   whatever the page background is show through, so the two can never be a
   near-miss pair of off-whites. .header.opened/.fixed above still paint it
   white once the menu opens or the page is scrolled. */

.header.fixed .container {
  padding: 0;
}

@media screen and (max-width: 768px) {
  .header.fixed .container .nav__wrap {
    top: 17.06667vw;
    /* Restored from `height: 100vh !important`, which had replaced the
       original calc below. The panel is offset 17.06667vw (~64px at 375px)
       from the top, so a full 100vh pushed its bottom that same ~64px past
       the fold - the panel scrolls internally, so the tail of the menu ended
       up outside the scrollable area and could not be reached. Subtracting
       the offset makes the panel end exactly at the viewport bottom, which is
       what main.min.css (the pre-refactor stylesheet) still does.
       !important kept because the previous author needed it to win here. */
    height: calc(100vh - 17.06667vw) !important;
  }
  #menu-item-3938{
    margin-bottom: 100px;
  }
}

.header.anim {
  -webkit-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  transform: translateY(-100%);
}

.header .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-top: 0.52083vw;
  padding-bottom: 0.52083vw;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

@media screen and (max-width: 768px) {
  /* Figma mobile header (node 149:477): search trigger / centered logo /
     burger menu, laid out as 3 grid columns instead of the desktop's
     flex+margin scheme (that relied on the wide desktop nav filling the
     space between logo and edge - meaningless on mobile, where it just
     pushed the logo off-center). Explicit grid-column numbers place each
     piece by physical side regardless of dir: column 1 is the
     writing-direction start (right, in RTL) and column 3 is the end
     (left) - only the numbers need swapping for LTR, not the markup. */
  .header .container {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 16px;
  }
  /* grid-row:1 is pinned explicitly on all three - leaving it to
     auto-placement broke into 2 separate rows here, because these items'
     column order (3, 2, 1) runs opposite to their DOM order, which trips
     up the sparse-packing cursor (it only ever advances, never goes back
     to an earlier column within a row once a later column's been used). */
  html[dir="rtl"] .header .container .burger-btn {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
  }
  html[dir="rtl"] .header .container .header__logo {
    grid-column: 2;
    grid-row: 1;
  }
  html[dir="rtl"] .header .container .header__search-button--mobile {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
  }
  html[dir="ltr"] .header .container .header__search-button--mobile {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
  }
  html[dir="ltr"] .header .container .header__logo {
    grid-column: 2;
    grid-row: 1;
  }
  html[dir="ltr"] .header .container .burger-btn {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }
  .header .container .header__logo {
    justify-self: center;
    width: auto;
    height: 48px;
    margin: 0;
  }
  .header .container .header__logo img {
    width: auto;
    height: 100%;
  }
}

.header__logo {
  display: block;
  width: 8.79vw;
}

html[dir="ltr"] .header__logo {
  margin: 0 17.95vw 0 -0.61vw;
}

html[dir="rtl"] .header__logo {
  margin: 0 -0.61vw 0 17.95vw;
}

.header__logo img {
  width: 100%;
}

.header__logo2 {
  display: block;
  min-width: 6.771vw;
  max-width: 6.771vw;
}

html[dir="ltr"] .header__logo2 {
  margin: 0 -2.6vw 0 2.708vw;
}

html[dir="rtl"] .header__logo2 {
  margin: 0 2.708vw 0 -2.6vw;
}

.header__logo2 img {
  width: 100%;
}

.header .nav__wrap .menu > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 768px) {
  .header .nav__wrap .menu > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .header .nav__wrap .menu > ul > li {
    padding: 4vw 0;
  }
}

html[dir="ltr"] .header .nav__wrap .menu > ul > li:not(:last-child) {
  margin-right: 1.4vw;
}

html[dir="rtl"] .header .nav__wrap .menu > ul > li:not(:last-child) {
  margin-left: 1.4vw;
}

@media screen and (max-width: 768px) {
  .header .nav__wrap .menu > ul > li:not(:last-child) {
    border-bottom: 1px solid var(--color-gray_400);
  }
  html[dir="ltr"] .header .nav__wrap .menu > ul > li:not(:last-child) {
    margin-right: 0;
  }
  html[dir="rtl"] .header .nav__wrap .menu > ul > li:not(:last-child) {
    margin-left: 0;
  }
}

.header .nav__wrap .menu a {
  color: var(--color-text);
  padding: 4px 8px;
}
.header .nav__wrap .menu ul a {
  padding: 12px 8px;
}
.header .nav__wrap .menu a:hover {
  color: var(--color-purple);
}

.header__nav {
  font-size: var(--font-size-button-small);
  letter-spacing: 0.023vw;
}

@media screen and (max-width: 768px) {
  .header__nav {
    width: 92.66667vw;
    min-height: 120vh;
  }
  .header__nav a {
    font-size: var(--font-size-caption-mobile);
    font-weight: 700;
  }
}

.header__nav > ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 768px) {
  .header__nav > ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .header__nav > ul > li {
    padding: 4vw 0;
  }
}

html[dir="ltr"] .header__nav > ul > li:not(:last-child) {
  margin-right: 1.4vw;
}

html[dir="rtl"] .header__nav > ul > li:not(:last-child) {
  margin-left: 1.4vw;
}

@media screen and (max-width: 768px) {
  .header__nav > ul > li:not(:last-child) {
    border-bottom: 1px solid var(--color-gray_400);
  }
  html[dir="ltr"] .header__nav > ul > li:not(:last-child) {
    margin-right: 0;
  }
  html[dir="rtl"] .header__nav > ul > li:not(:last-child) {
    margin-left: 0;
  }
}

.header__nav a {
  color: var(--color-text);
  display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.header__nav a:hover {
  color: var(--color-purple);
}

.header__search-button {
  width: 2vw;
  height: 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

html[dir="ltr"] .header__search-button {
  margin-left: auto;
}

html[dir="rtl"] .header__search-button {
  margin-right: 3vw !important;
}

.header__search-button--mobile {
  display: none;
}

.header__search-button:before {
  content: "\e908";
  font-family: "Shitufim", serif;
  font-size: 1.25vw;
}

.header__search-button:hover {
  color: var(--color-purple);
}

/* Must stay AFTER the .header__search-button:before rule above: the mobile
   override below has identical specificity (one class + pseudo-element), so
   whichever comes last wins. Placed earlier, the icon-font glyph kept
   winning and rendered on top of the PNG - two overlapping icons. */
@media screen and (max-width: 768px) {
  .header__search-button {
    display: none;
  }
  /* Separate from .header__search-button's own mobile display:none above -
     that one lives inside #nav__wrap's search overlay; this is the always-
     visible trigger in the top bar itself (Figma node 149:471/149:472). */
  .header__search-button--mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin: 0 !important;
  }
  .header__search-button--mobile:before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    background: url("../img/search-icon.png") center / contain no-repeat;
  }
}

html[dir="ltr"] .header__language {
  margin-left: 0.65vw;
  margin-right: -0.35vw;
}

html[dir="rtl"] .header__language {
  margin-right: 0.65vw;
  margin-left: -0.35vw;
}

.header__language .form__select-item a {
  color: var(--color-text);
}

.header__language .form__select-button {
  color: var(--color-text);
}

.header__language .form__select-dropdown:before {
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.header__language .form__select-item.active,
.header__language .form__select-item:hover {
  background-color: var(--color-purple-light);
}

.header__language .form__select-item.disabled {
  display: none;
}

@media screen and (max-width: 768px) {
  .header__language {
    width: 92.66667vw;
    margin: 0;
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    margin-bottom: 9.33333vw;
  }
}

.menu-item-has-children {
  position: relative;
}
.menu-item-has-children > a:after {
  display: inline-block;
  content: "\e904";
  font-family: "Shitufim", sans-serif;
  font-size: 0.5vw;
  position: relative;
  z-index: 3;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

html[dir="ltr"] .menu-item-has-children > a:after {
  padding-left: 5px;
}

html[dir="rtl"] .menu-item-has-children > a:after {
  padding-right: 5px;
}

@media screen and (max-width: 768px) {
  .menu-item-has-children >  a:after {
    font-size: 2.93333vw;
  }
}

.menu-item-has-children > a {
  position: relative;
  z-index: 3;
}
.menu-item-has-children ul {
  max-width: 400px;
  min-width: 235px;
  /* white-space: nowrap; */
  position: absolute;
  top: 100%;
  right: -1vw;
  left: -1vw;
  padding: 1.6vw 0 .5vw;
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(-0.2vw);
  -ms-transform: translateY(-0.2vw);
  transform: translateY(-0.2vw);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
@media screen and (max-width: 1200px) {
  .menu-item-has-children ul {
    top:99px;
  }
}
@media screen and (max-width: 768px) {
  .menu-item-has-children ul {
    max-height: 0;
    position: static;
    padding: 0;
    width: 100%;
  }
  .menu-item-has-children ul::before {
    display: none;
  }
}

.menu-item-has-children ul:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1vw;
  right: 0;
  left: 0;
  bottom: 0;
  border-radius: 0.83vw;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.menu-item-has-children ul li {
  margin: 0;
  min-width: 163px;
}
.header .nav__wrap .menu li#menu-item-304 > a {
  background: var(--color-purple);
  width: 100%;
  height: 100%;
  border-radius: 40px;
  padding: 2px 12px !important;
  z-index: 3;
}
li#menu-item-304 > a,li#menu-item-304 > a:after{
  color: var(--color-white);
}

@media screen and (max-width: 768px) {
  .menu-item-has-children ul li:first-of-type {
    padding-top: 2em;
  }
}

.menu-item-has-children ul a {
  display: block;
  padding: 0.5vw 1vw;
  /* overflow: hidden;
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis; */
  font-weight: 400;
}

@media screen and (max-width: 768px) {
  .menu-item-has-children ul a {
    padding-left: 0;
    padding-right: 0;
  }
}

.menu-item-has-children ul a:hover {
  background-color: var(--color-purple-light);
  color: var(--color-text);
}

.menu-item-has-children:hover:after {
  -webkit-transform: scaleY(-1);
  -ms-transform: scaleY(-1);
  transform: scaleY(-1);
}

.menu-item-has-children:hover ul {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

@media screen and (max-width: 768px) {
  .menu-item-has-children:hover ul {
    max-height: 66.66667vw;
  }
}

.menu-item-has-children:hover > a {
  color: var(--color-purple);
}

.nav__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 2;
  -ms-flex-positive: 2;
  flex-grow: 2;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width: 1240px) {
  .logos .header__logo {
    width: 12vw;
  }
  html[dir="ltr"] .logos .header__logo {
    margin: 0 3vw 0 0;
  }
  html[dir="rtl"] .logos .header__logo {
    margin: 0 0 0 3vw;
  }
  .logos .header__logo2 {
    width: 12vw;
  }
  html[dir="ltr"] .logos .header__logo2 {
    margin: 0 0 0 3vw;
  }
  html[dir="rtl"] .logos .header__logo2 {
    margin: 0 3vw 0 0;
  }
  .header__logo {
    width: 15vw;
  }
  html[dir="ltr"] .header__logo {
    margin: 0 6vw 0 0;
  }
  html[dir="rtl"] .header__logo {
    margin: 0 0 0 6vw;
  }
  .header__logo2 {
    width: 15vw;
  }
  html[dir="ltr"] .header__logo2 {
    margin: 0 0 0 3vw;
  }
  html[dir="rtl"] .header__logo2 {
    margin: 0 0 0 3vw;
  }
  .header__nav {
    font-size: var(--font-size-button-small);
  }
  .header__search-button {
    width: 4vw;
    height: 4vw;
  }
  .header__search-button:before {
    font-size: 2vw;
  }
  .nav__inner:after {
    font-size: 0.8vw;
  }
  .nav__inner ul:before {
    top: -3vw;
  }
  .nav__inner ul a {
    padding: 0.9vw 1.5vw;
  }
}

@media (max-width: 768px) {
  .logos .header__logo {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin: 0;
    width: 30.4vw;
    height: 17.06667vw;
  }
  html[dir="ltr"] .logos .header__logo {
    margin-right: auto;
  }
  html[dir="rtl"] .logos .header__logo {
    margin-right: auto;
  }
  .logos .header__logo2 {
    display: none;
  }
  /* Scoped to .logos (added when a second/partner logo is configured) to
     match the rest of this block's siblings above - these two were
     missing the prefix, so they were unconditionally re-overriding every
     mobile header's .container padding and logo size (undoing the grid
     header rework further up this file, which comes earlier in the
     cascade and loses ties at equal specificity). */
  .logos .header .container {
    padding-top: 3.06667vw;
    padding-bottom: 0;
  }
  html[dir="ltr"] .logos .header .container {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .logos .header__logo {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
    margin: 0;
    width: 30.4vw;
    height: 17.06667vw;
  }
  html[dir="ltr"] .logos .header__logo {
    margin-right: auto;
  }
  html[dir="rtl"] .logos .header__logo {
    margin-right: auto;
  }
}

.burger-btn {
  position: relative;
  width: 7.2vw;
  height: 3.3vh;
  z-index: 100;
  display: none;
}

.burger-btn span {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 0.4vw;
  background-color: var(--color-black);
  border-radius: 2rem;
  -webkit-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

html[dir="ltr"] .burger-btn span {
  right: 0;
}

html[dir="rtl"] .burger-btn span {
  left: 0;
}

.burger-btn span:nth-of-type(1) {
  top: 0;
}

.burger-btn span:nth-of-type(2) {
  top: 50%;
}

.burger-btn span:nth-of-type(3) {
  top: 100%;
}

.burger-btn.isActive span:nth-of-type(1) {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 8px;
}

.burger-btn.isActive span:nth-of-type(2) {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  opacity: 0;
}

.burger-btn.isActive span:nth-of-type(3) {
  top: 8px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* Must stay AFTER every base .burger-btn/.burger-btn span rule above - the
   `.burger-btn span { display: none }` below has the same specificity as
   the base `.burger-btn span` block, so order decides. Placed earlier, the
   base rule kept the three CSS bars visible and they drew on top of the
   PNG icon - two overlapping icons.
   Fixed px instead of vw/vh: at narrow widths the old 7.2vw/3.3vh sizing
   made the bars nearly invisible-thin and the tap target inconsistent
   between phones. 24px matches Figma (node 149:473). The <span>s are
   hidden rather than removed so the JS that toggles .isActive still has
   its expected DOM; the open state draws its own X from two
   pseudo-elements, since only a closed-state icon was supplied. */
@media screen and (max-width: 768px) {
  .burger-btn {
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url("../img/bar-icon.png") center / contain no-repeat;
  }
  .burger-btn span {
    display: none;
  }
  .burger-btn.isActive {
    background: none;
  }
  .burger-btn.isActive:before,
  .burger-btn.isActive:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-gray_700);
  }
  .burger-btn.isActive:before {
    transform: rotate(45deg);
  }
  .burger-btn.isActive:after {
    transform: rotate(-45deg);
  }
}

@media screen and (max-width: 768px) {
  .nav__wrap {
    position: absolute;
    padding-top: 13.33333vw;
    width: 100vw;
    height: calc(100vh - 20vw);
    display: block;
    top: 20.53333vw;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    background-color: var(--color-white);
    opacity: 0;
    visibility: hidden;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    overflow: auto;
  }
  html[dir="ltr"] .nav__wrap {
    left: 0;
  }
  html[dir="rtl"] .nav__wrap {
    right: 0;
  }
  .nav__wrap.opened {
    opacity: 1;
    visibility: visible;
  }
}

.search__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 0.57292vw 0;
  margin-bottom: 1.04167vw;
}

@media screen and (max-width: 768px) {
  .search__header {
    display: none;
  }
}

.search__header .header__logo {
  margin-left: 3.33333vw;
}

.search__block {
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--color-white) url("../img/bg-pattern.png") left top repeat;
}

@media screen and (max-width: 768px) {
  .search__block {
    background: var(--color-white);
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
    width: 100%;
    height: auto;
    position: static;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    display: block !important;
  }
}

.search__block .container {
  display: block;
  overflow: auto;
  height: 100vh;
  padding-bottom: 8vh;
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: -moz-scrollbars-none;
}

.search__block .container::-webkit-scrollbar {
  width: 0;
}

@media screen and (max-width: 768px) {
  .search__block .container {
    overflow: unset;
    height: auto;
    padding: 0;
  }
}

.search__field {
  position: relative;
  padding: 0.78125vw 0;
  margin-bottom: 4.47917vw;
}

@media screen and (max-width: 768px) {
  .search__field {
    padding: 0 0 3.6vw 0;
    margin-bottom: 3.6vw;
  }
}

.search__field::before {
  position: absolute;
  content: "";
  width: 100vw;
  height: 1px;
  background-color: var(--color-gray_400);
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .search__field::before {
    width: 100%;
    left: 0;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
  }
}

.search__form {
  width: 100%;
}

.search__form input {
  width: 100%;
  text-align: center;
  padding: 0;
  border: 0;
}

@media screen and (max-width: 768px) {
  .search__form input {
    font-size: var(--font-size-body-mobile);
    font-weight: 700;
    background-repeat: no-repeat;
    background-size: 5.33333vw;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='38.389' height='39.501' viewBox='0 0 38.389 39.501'%3E%3Cdefs%3E%3CclipPath id='clip-path'%3E%3Crect id='Rectangle_5' data-name='Rectangle 5' width='38.389' height='39.501' stroke='%23fff' stroke-width='0.5'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg id='Group_1' data-name='Group 1' clip-path='url(%23clip-path)'%3E%3Cpath id='Path_1' data-name='Path 1' d='M37.836,36.418l-9.02-8.6a16.619,16.619,0,1,0-2.7,2.366l9.253,8.824a1.787,1.787,0,0,0,2.526-.061,1.79,1.79,0,0,0-.059-2.528M3.218,16.6A13.379,13.379,0,1,1,16.6,29.974,13.394,13.394,0,0,1,3.218,16.6' stroke='%23fff' stroke-width='0.5'/%3E%3C/g%3E%3C/svg%3E%0A");
  }
  html[dir="ltr"] .search__form input {
    text-align: left;
    padding-left: 8vw;
    background-position: left center;
  }
  html[dir="rtl"] .search__form input {
    text-align: right;
    padding-right: 8vw;
    background-position: right center;
  }
}

.search__close {
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
  .search__close {
    display: none;
  }
}

.search__close:before {
  content: "\e90c";
  width: 2vw;
  height: 2vw;
  font-family: "Shitufim";
  font-size: 1.09375vw;
}

.search__result {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  gap: 3.64583vw;
}
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  gap: 2.64583vw;
}

.external-card{
  background-color: var(--color-orange_000);
  
  height: 100%;
  min-height: 333px;
border-radius: 10px;
  padding: 2vw;
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
.external-card:after{
  content: "";
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 10px;
  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 72%);
  z-index: 0;
}
.external-card:hover:after{
  background: rgb(0,0,0,0.6 );
}
.external-card img{
  margin: auto;
  text-align: center;
  
}
.external-card .image{
  position: absolute;
  padding: 1rem;
  text-align: center;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}
.external-card .text-info h3{
  font-size: var(--font-size-h3);
  line-height: 1.2;
  color: var(--color-white);
  margin-bottom:1vw;
  z-index: 1;
}
.external-card .text-info p{
  margin-bottom: 0.41667vw;
  font-size: var(--font-size-body);
  line-height: calc(42 / 35);
  color: var(--color-white);
}
.external-card .button{
  margin-top: auto;
  display: inline-block;
  font-size: var(--font-size-h4);
  background: var(--color-orange);
  background: -o-linear-gradient(198deg, var(--color-purple) 0%, var(--color-purple) 46%, var(--color-orange) 100%);
  background: var(--gradient-brand);
  border-radius: 20px;
  color: var(--color-white);
  padding: 0.7vw 1.5vw 0.8vw 1.5vw;
  border-color: transparent;
  height: auto;
 }
.external-card  .arrow-left::before {
  margin-right: 1vw;
  width: 1.5625vw;
  height: 0.9375vw;
  content: "\e903";
  color: var(--color-white);
  font-family: "Shitufim", serif;
}
.external-card .main-info.text-info{
  margin-top: auto;
  z-index: 1;
}
.external-card .hidden-desc{height: 0;display: none;}

.external-card:hover .hidden-desc{
  display: block;
  height: 10vw;
  -webkit-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
@media screen and (max-width: 768px) {
  .external-card{
    padding: 4vw;
  }
  .external-card .text-info h3{
    font-size: var(--font-size-h3-mobile);
    margin-bottom: 3vw;
  }
  .external-card .text-info p, .external-card .button{
    font-size: var(--font-size-body-mobile);
    
  }
  .external-card .button{
    text-align: center;
    padding:  3vw 5vw;
    width: 45vw;

  }
  .search__result , .grid {
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 9.33333vw;
  }
}

.result__item {
  font-size: var(--font-size-h5);
  padding-top: 1.35417vw;
  line-height: 1.5;
  border-top: 1px solid var(--color-gray_400);
}

@media screen and (max-width: 768px) {
  .result__item {
    display: none;
    font-size: var(--font-size-caption-mobile);
  }
  .result__item:first-of-type {
    border-top: 0;
  }
}

.result__item .arrow-left {
  display: inline-block;
  margin-top: 1.5625vw;
  color: var(--color-black);
}

.result__item .arrow-left:hover {
  color: var(--color-red_400);
}

.result__item .arrow-left::before {
  width: 1.5625vw;
  height: 0.9375vw;
  content: "\e903";
  font-family: "Shitufim", serif;
}

.result__title {
  margin-bottom: 0.7em;
  font-weight: 700;
}

.result__title a {
  color: var(--color-black);
}

.result__title a:hover {
  color: var(--color-red_400);
}

.hero .container {
  position: relative;
  padding-top: 2.2vw;
  padding-bottom: 8vw;
}
.hero__title_wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hero__title h1, h1.hero__title, h2.hero__title ,.hero__title h2, .explain__title h1, .explain__title h2 {
    margin-bottom: 1vw;
    font-size: var(--font-size-h1) ;
    line-height: 0.9;
    color: var(--color-purple);
}

html[lang="ar"] .hero .container {
    padding-top: 4vw;
    padding-bottom: 0;
}
html[lang="ar"] .hero__description {
  margin-bottom: 2vw;
  }
html[lang="ar"] .hero__title {
    margin-bottom: 1vw;
    font-size: 5vw;
    line-height: 1.2 !important;
}

.hero__title mark, .explain__title mark {
  display: inline-block;
  color: var(--color-orange) !important;
  width: 100%;
  background: transparent;
}

.hero__description {
  color: var(--color-gray_700);
  letter-spacing: -0.007vw;
  margin: 0 auto 2.8vw;
  font-size: var(--font-size-body);
  line-height: 1.36;
  width: 30vw;
}
html[lang="ar"] .hero__description{
  width: 37vw;
}

html[dir="ltr"] .hero__description {
  /* margin-left was 0.2vw, which overrode the base rule's `margin: 0 auto`
     and killed the horizontal centring - in LTR the standfirst was pinned
     hard to the left while the centred h1 above it stayed put, so the two
     no longer lined up. Restored to auto so both directions centre the
     paragraph the same way. */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1.6vw;
  width: 51vw;
}

html[dir="rtl"] .hero__description {
  margin-bottom: 1.6vw;
}
html[lang="ar"] .home main.page {
  padding-top: 1.18vw;
}
/* Figma home (node 1:4611): "אני רוצה" is 20px bold in the dark text color
   (#515865 = --color-text), not an h3-sized heading. */
.hero__case-caption {
  font-weight: 700;
  letter-spacing: 0.03vw;
  margin-bottom: 1.2vw;
  font-size: 20px;
  color: var(--color-text);
}

/* Figma home (node 1:4605): the "אני רוצה" cards sit in a fixed 3-column ×
   2-row grid of equal-width cards (335px each in the 1440 frame, ~36px row
   gap, ~97px column gap). A grid replaces the old wrap-flex + .flex-break
   arrangement so 6 items always land 3+3 (and 5 items land 3+2) without
   markup-driven line breaks. */
.hero__case-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5vw 6.7vw;
}

/* The template still prints a <span class="flex-break"> before the 3rd item
   (the old flex layout needed it); in a grid it would occupy a cell of its
   own and shift everything after it, so it's removed from layout here. */
.hero__case-list .flex-break {
  display: none;
}
[lang="ru-RU"] .hero__case-list {
  row-gap: 2vw;
}
.hero__case-link {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  color: var(--color-gray_700);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  border-radius: 0.52083vw;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.4vw 0.8vw 0 rgba(110, 110, 110, 0.16);
  box-shadow: 0 0.4vw 0.8vw 0 rgba(110, 110, 110, 0.16);
  flex-basis: 25%; 
  box-sizing: border-box; 
}

html[dir="ltr"] .hero__case-link {
  margin-right: 1.8vw;
  padding: 1.69vw 2.65vw 1.95vw 1.5vw;
}

html[dir="rtl"] .hero__case-link {
  margin-left: 1.8vw;
  padding: 1.69vw 1.5vw 1.95vw 2.65vw;
}

.hero__case-link:first-of-type {
  flex-basis: 100%; 
}
.hero__case-link:after {
  content: "\e902";
  font-family: "Shitufim", sans-serif;
  position: absolute;
  font-size: 0.7vw;
  top: 50%;
  margin-top: -0.7em;
}

html[dir="ltr"] .hero__case-link:after {
  right: 1.5vw;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

html[dir="rtl"] .hero__case-link:after {
  left: 1.5vw;
}

.hero__case-link:hover {
  color: var(--color-red_300);
}

.hero__case-ico {
  width: 2.87vw;
  height: 2.87vw;
  -o-object-fit: contain;
  object-fit: contain;
}

.hero__case-title {
  font-size: var(--font-size-h5);
}

html[dir="ltr"] .hero__case-title {
  margin-left: 2.2vw;
  margin-right: 1.2vw;
}
html[dir="rtl"] .hero__case-link-h .hero__case-title {
  margin-right: 2.2vw;
}
.hero__case-link-h{
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
}

/* Removed an LTR-only rule here that pulled the LAST case button to the front
   (order:-3). Combined with the highlight rule below (which also targeted
   :last-of-type on LTR), it made the last row the prominent "first" button on
   the English/Russian homepages. But the content authors the highlighted
   "immediate help" button as the FIRST row in every language (same as the
   Hebrew/RTL layout), so on LTR the wrong button was promoted and highlighted
   - e.g. Russian showed "immediate help" second. LTR now follows source order
   like RTL: the first row is first, and highlighted by the rule below. */
.hero__case-link-h .hero__case-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  color: var(--color-gray_700);
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  border-radius: 0.52083vw;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.4vw 0.8vw 0 rgba(110, 110, 110, 0.16);
  box-shadow: 0 0.4vw 0.8vw 0 rgba(110, 110, 110, 0.16);
}
/* Figma (node 1:4614): the highlighted first card is flat brand purple with
   bold text - the old gradient fill is replaced by the solid color. */
.hero__case-link-h:first-of-type .hero__case-title{
  background: var(--color-purple);
  color: var(--color-white);
  font-weight: 700;
}
html[dir="ltr"] .hero__case-link-h .hero__case-title{
  margin-right: 1.8rem;
  padding: 1vw 1vw 1vw 5vw;
}


html[dir="rtl"] .hero__case-link-h .hero__case-title {
  margin-left: 0;
  padding: 1vw 5vw 1vw 1vw;
}

.hero__case-link-h .hero__case-title:hover {
  color: var(--color-red_300);
}
.hero__case-link-h:first-of-type .hero__case-title:hover {
  background: var(--color-white);
}
.hero__case-link-h .hero__case-icon-wrap {
  background-color: var(--color-white);
  border-radius: 50%;
  display: flex;
  position: absolute;
  /* Centred on the card instead of hung from its top edge (same approach the
     mobile rules already use), so a circle taller than the card body overhangs
     evenly and never lands on the row above or below. */
  top: 50%;
  transform: translateY(-50%);
  right: -5px;
  left: 0;
  bottom: auto;
  /* Capped at its 1440px size (5.87vw x 1440 = 84.5px). The card body is sized
     in px (min-height + the px type scale), so an uncapped vw circle outgrew it
     on wide viewports and spilled into the row below - visible overlap from
     ~2000px up. Same reasoning as the type scale above, which was moved off vw
     for exactly this. min() leaves everything at or below 1440px untouched. */
  width: min(5.87vw, 84px);
  height: min(5.87vw, 84px);
  z-index: 3;
}
.hero__case-link-h .hero__case-icon {
  display: inline-block;
  position: relative;
  top: 0;
  right: 0;
  z-index: 1;
  padding: min(.6vw, 9px);
  width: min(4.87vw, 70px);
  height: min(4.87vw, 70px);
  -o-object-fit: contain;
  object-fit: contain;
  background: var(--color-orange);
  border-radius: 50%;
  margin: auto;
}

/* Full grid-cell width so all six cards render identical, per Figma. */
.hero__case-link-h .hero__case-title {
  font-size: var(--font-size-h5);
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: 57px;
}

html[dir="ltr"] .hero__case-link-h .hero__case-title {
  margin-left: 1.2vw;
  margin-right: 0;
}

.hero__image {
  position: absolute;
  z-index: -1;
  top: -1.3vw;
  width: 34.5vw;
}

html[dir="ltr"] .hero__image {
  right: 0;
  top: 3vw;
  width: 30vw;
}

html[dir="rtl"] .hero__image {
  left: 6%;
  top: 0vw;
}

.hero__arrow {
  position: absolute;
  bottom: 10.3vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

html[dir="ltr"] .hero__arrow {
  right: -3.78vw;
}

html[dir="rtl"] .hero__arrow {
  left: -3.78vw;
}

.hero__arrow .curved-text {
  width: 7.3vw;
  font-size: 0.67rem;
  position: absolute;
  bottom: 100%;
  margin-bottom: 0.2vw;
}

html[dir="ltr"] .hero__arrow .curved-text {
  right: 50%;
  margin-right: -3.65vw;
}

html[dir="rtl"] .hero__arrow .curved-text {
  left: 50%;
  margin-left: -3.65vw;
}
.hero__blur {
  position: absolute;
  z-index: -2;
  background-color: var(--color-orange_200);
  opacity: 0.08;
  border-radius: 50%;
  -webkit-filter: blur(50px);
  filter: blur(50px);
}

.hero__blur_01 {
  width: 44.323vw;
  height: 47.24vw;
  left: 19vw;
  top: 12.82vw;
}

.hero__blur_02 {
  width: 19.89vw;
  height: 20.83vw;
  right: 1.25vw;
  top: -5.9vw;
}
@media (min-width: 1390px) {
  .hero__case-link-h .hero__case-title {
    font-size: var(--font-size-h5);
    min-height: 69px;
  }
}
@media (min-width: 1240px) {
  .hero__case-list {
    max-width: 89vw;
    row-gap: 2.5vw;
  }
  .menu-item-has-children ul{
    top: 10px;
  }
  
  .hero__case-link-h .hero__case-title {
    font-size: var(--font-size-h5);
    min-height: 69px;
  }
html[lang="ar"] .hero__arrow {
  position: absolute;
  bottom: 1.3vw;
}
html[dir="ltr"] .hero__image {
  right: 0;
  top: 1vw;
  width: 27vw;
}

}
@media (max-width: 1239px) {
  .hero__description {
    font-size: var(--font-size-body);
    width: 42vw;
  }
  html[lang="ar"] .hero__description {
    width: 53vw;
}
html[lang="ar"] .hero__case-link-h .hero__case-title {
  margin-left: .4rem;
}
  .hero__case-caption {
    font-size: var(--font-size-h5);
  }
  .hero__case-link {
    padding: 1.69vw 1.5vw 1.65vw 3.65vw;
  }
  .hero__case-link:after {
    font-size: 1.3vw;
  }
  .hero__case-title {
    font-size: var(--font-size-body);
  }
  .hero__case-ico {
    width: 4vw;
    height: 4vw;
  }
  html[dir="ltr"] .hero__arrow {
    right: 1.2vw;
  }
  html[dir="rtl"] .hero__arrow {
    left: -3vw;
  }
  .hero__case-link-h .hero__case-title {
    max-width: none;
  }
}

@media (max-width: 769px) {
  .hero__case-link-h {
    flex-basis: 47%;
  }
  section#parallax__wrap_01 .container {
    display: flex;
    flex-direction: column;
}
  .hero {
    position: relative;
  }
  .hero .container {
    padding-top: 4.26667vw;
    padding-bottom: 19.33333vw;
  }
  .home .hero .container {
        padding-bottom: 2vw;
    }
  .hero__title {
    line-height: 1;
    font-size: var(--font-size-h1-mobile);
    text-align: center;
  }
  /* margin-bottom belongs on this selector group, not on the plain
     `.hero__title` above: the desktop rule sets it via `h1.hero__title`
     (element+class), which outranks a bare class no matter the order.
     Figma mobile home (node 1:5049): 15px title-to-description gap. */
  .hero__title h1, h1.hero__title, h2.hero__title ,.hero__title h2, .explain__title h1, .explain__title h2 {
    font-size: var(--font-size-h1-mobile) ;
    line-height: var(--line-height-h1-mobile) !important;
    margin-bottom: 15px;
  }
  .hero__description {
    font-size: var(--font-size-body-mobile);
    line-height: 1.3;
    /* Figma keeps the paragraph narrower than the container (263px in the
       360px frame) so it wraps to the same 5 lines as the design. */
    max-width: 263px;
    margin: 0 auto !important;
    text-align: center;
    width: auto !important;
  }
  .hero__image {
    position: static;
    width: 89.06667vw;
    display: block;
    margin: -3.86667vw auto 3.2vw;
  }
  /* Figma mobile home (node 1:5053): 18px bold (--font-size-h4-mobile),
     centered, 11px above the card list, 25px below the description. */
  .hero__case {
    margin-top: 25px;
  }
  .hero__case-caption {
    margin-bottom: 11px;
    text-align: center;
    font-size: var(--font-size-h4-mobile);
    line-height: var(--line-height-h4-mobile);
  }
  .hero__image {
    margin: 5vw auto 1vw;
}
.hero__case-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  /* Figma: 12px between stacked cards (76px pitch - 64px card height). */
  gap: 12px;
  list-style: none;
  margin: 0;
  /* Design insets the cards 20px from the viewport edge; .container already
     supplies ~13px (92.66667vw), so this adds the remainder. Kept in vw so
     it stays proportional across phone widths instead of only matching at
     the 360px design width. */
  padding: 0 1.9vw;
}

.hero__case-link-h {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-content: center;
  flex: 0 0 100%;
  width: 100%;
}

.flex-break {
  flex-basis: 100%;
  width: 0; height: 0;       
  padding: 0; margin: 0;
}

  .hero__case-link {
    min-width: 20.66667vw;
    flex-direction: column;
    padding: 2.13333vw 2.93333vw 1.6vw;
    border-radius: 2vw;
  }
  .hero__case-link:after {
    font-size: 2.13333vw;
    left: 3.33333vw;
    bottom: 2.66667vw;
    top: auto;
  }
  /* Figma mobile (node 1:5057): the 58px icon sits fully inside the card,
     vertically centred and ~3px from its trailing edge - it doesn't hang
     off the top-right corner the way the old -4px/-5px offsets had it. */
  .hero__case-link-h .hero__case-icon-wrap{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 3px;
    left: auto;
    bottom: auto;
    width: 58px;
    height: 58px;
  }
  html[dir="ltr"] .hero__case-link-h .hero__case-icon-wrap{
    right: auto;
    left: 3px;
  }
  .hero__case-link-h .hero__case-icon{
    height: 50px;
    width: 50px;
    display: flex;
  }
  .hero__case-link-h .hero__case-icon img{
    height: 30px;
    width: 30px;
    margin: auto;
  }
  .hero__case-ico {
    width: 100%;
    height: 12.53333vw;
    -o-object-fit: contain;
    object-fit: contain;
  }
  /* Figma mobile card (node 1:5055/1:5061): 64px tall, 16px radius, 16px
     body text right-aligned (not centred), with room kept clear on the
     trailing side for the 58px icon. */
  .hero__case-link-h .hero__case-title {
    font-size: var(--font-size-body-mobile);
    line-height: var(--line-height-body-mobile);
    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 64px;
    padding: 8px 77px 8px 20px !important;
    margin: 0 !important;
    border-radius: 16px;
    text-align: right;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.1);
  }
  html[dir="ltr"] .hero__case-link-h .hero__case-title {
    padding: 8px 20px 8px 77px !important;
    text-align: left;
  }
  html[lang="ru-RU"] .hero__case-link-h .hero__case-title {
    font-size: 3vw;
  }
  html[lang="ru-RU"] main.page {
    padding-top: 1.18vw;
}
  html[lang="ru-RU"] .hero .container {
  padding-top: 2.26667vw;
}
  .hero__arrow {
    display: none;
  }
  .order-1{
    order: 1;
  }
  .order-2{
    order: 2;
    margin-top: 6vw;
  }
  .order-3{
    order: 3;
  } 
  li#menu-item-304:hover:before{
    top: -3px;
    right: -10px;
    padding: 0.2vw 1vw;
  }
}

.explain .container {
  padding-top: 6.5vw;
  padding-bottom: 9.75vw;
}

.explain__card {
  width: 48vw;
  margin: 0 auto;
  padding: 3.2vw 6vw 2.6vw;
  border-radius: 1.33333vw;
  -webkit-box-shadow: 6.13333vw 5.33333vw 4vw 0 rgba(0, 0, 0, 0.08);
  box-shadow: 6.13333vw 5.33333vw 4vw 0 rgba(0, 0, 0, 0.08);
  background-color: var(--color-surface-alt);
  text-align: center;
}

/* Section title - see the note on .split__title above. */
.explain__title {
  margin-bottom: 1.2vw;
  font-size: var(--font-size-h2);
  letter-spacing: -0.025vw;
}

.explain__description {
  margin: 0 2.5vw 1.4vw;
  line-height: 1.83;
}
.explain__description_free {
    font-size: 1.2rem;
    line-height: 1.4;
    max-width: 50vw;
    margin: auto;
}
.explain__more {
  color: var(--color-red_300);
  position: relative;
  display: inline-block;
}

.explain__more:after {
  content: "\e902";
  font-family: "Shitufim", sans-serif;
  font-size: 0.65vw;
  position: absolute;
  top: 0.10417vw;
}

html[dir="ltr"] .explain__more:after {
  left: 100%;
  margin-left: 0.6vw;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

html[dir="rtl"] .explain__more:after {
  right: 100%;
  margin-right: 0.6vw;
}

@media (max-width: 1240px) {
  .explain__card {
    width: 64vw;
  }
}

@media (max-width: 768px) {
  .explain .container {
    padding-top: 12vw;
    padding-bottom: 20vw;
  }
  .explain__card {
    width: 83.46667vw;
    border-radius: 1.33333vw;
    padding: 16.93333vw 8vw 14.26667vw;
  }
  .explain__title {
    font-size: var(--font-size-h2-mobile);
    line-height: 1.043;
    margin-bottom: 6vw;
  }
  .explain__description {
    font-size: var(--font-size-body-mobile);
    line-height: calc(40 / 30);
    margin: 0 0 8.4vw;
  }
  .explain__more {
    font-size: var(--font-size-body-mobile);
  }
  .explain__more:after {
    font-size: 2.66667vw;
  }
  html[dir="ltr"] .explain__more:after {
    margin-left: 2.4vw;
  }
  html[dir="rtl"] .explain__more:after {
    margin-right: 2.4vw;
  }
}

.running-line {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  padding-top: 2.4vw;
  padding-bottom: 2.3vw;
  border-top: 1px solid var(--color-gray_400);
  border-bottom: 1px solid var(--color-gray_400);
}

.running-line__text {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  font-size: 0;
  will-change: transform;
  -webkit-transform: translateX(0%);
  -ms-transform: translateX(0%);
  transform: translateX(0%);
  -webkit-animation: run 20s 0s infinite linear;
  animation: run 20s 0s infinite linear;
  display: inline-block;
}

.hero__arrow textPath.stop,
.indication__circle textPath.stop,
.running-line.stop,
.running-line__text.stop{
  -webkit-animation: run -1s 0s infinite linear;
  animation: run -1s 0s infinite linear;
}

.running-line__text span {
  font-size: var(--font-size-h2);
}

.running-line__text span:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: 0 1.3vw;
  width: 0.3vw;
  height: 0.3vw;
  background-color: var(--color-black);
  border-radius: 50%;
}

@media (max-width: 768px) {
  .running-line {
    padding-top: 6vw;
    padding-bottom: 5.33333vw;
  }
  .running-line__text span {
    font-size: 8.13333vw;
  }
}

.indication .container {
  padding-top: 11vw;
  padding-bottom: 11.3vw;
}

.indication__circle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 215%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.indication__circle .curved-text {
  width: 100%;
  font-size: 0.168rem;
  letter-spacing: 0.0066rem;
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
}

.indication__mark {
  position: relative;
  margin-right: 3.1vw;
  width: 32.3vw;
  height: 32.3vw;
  border-radius: 50%;
  background: #edeceb url("../img/exclamation.svg") center/26% 71% no-repeat;
}

.indication__mark:after {
  content: "";
  width: 130%;
  height: 90%;
  position: absolute;
  left: 10%;
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
  top: 25%;
  background: -o-radial-gradient(#000 0%, rgba(255, 255, 255, 0) 70%);
  background: radial-gradient(#000 0%, rgba(255, 255, 255, 0) 70%);
  opacity: 0.1;
  -webkit-filter: blur(0px);
  filter: blur(0px);
  border-radius: 50%;
  z-index: -1;
  opacity: 0.3;
}

@media (max-width: 768px) {
  .indication .container {
    padding-top: 17.06667vw;
    padding-bottom: 9.2vw;
  }
  .indication__mark {
    width: 72vw;
    height: 72vw;
    margin: 22.93333vw auto 16vw;
  }
}

.partners .container {
  padding: 4vw;
}

.partners__header {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 3vw 20vw 3vw;
}

.partners__title {
  font-size: var(--font-size-h2);
  letter-spacing: 0.06vw;
  line-height: 1.05;
  margin-bottom: 1.2vw;
  padding: 0 7vw;
}
.partners__description, .search__description {
  font-size: var(--font-size-body);
  line-height: 1.4;
}
.search__description {
  text-align: center;
  max-width: 30vw;
  line-height: 1.4;
  margin: 2vw auto ;
}
#partners .container {
    border-radius: 10px;
    background: var(--color-surface);
    box-shadow: 0 9px 18.749px 0 rgba(33, 33, 33, 0.16);
    padding: 4vw 1vw 0;
    margin-bottom: 4vw;
  }

/* ---- "מאגר המענים המלא" hero (Figma node 1:4663) ----
   The shared hero rule sizes this <h2> with the H1 step (80px), which wrapped
   the heading onto two lines; Figma labels it "Heading 2" and sets the H2
   step, keeping it on one line. Scoped to this page (the .page-id-4367 hook
   the breadcrumbs rule above already relies on) so the other templates
   sharing .hero__title are untouched. */
/* Desktop only. The mobile frame (node 1:5158) is a different composition -
   35px heading broken over two lines, and the white panel wrapping only the
   search box rather than the heading too - so none of the sizing below may
   leak past the breakpoint. */
@media screen and (min-width: 769px) {
  .page-id-4367 #partners .hero__title,
  .page-id-4367 #partners h2.hero__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    letter-spacing: var(--letter-spacing-h2);
  }

  /* The sitewide `.hero__title mark` rule is display:inline-block;width:100%,
     which puts the orange half of the heading on its own line - that's the
     treatment the other heroes want, and it is also what the mobile frame
     wants here. Only desktop keeps "מי יכול/ה לעזור לי?" on one line with
     the colour change mid-sentence, so the mark shrinks to its own width. */
  .page-id-4367 #partners .hero__title mark {
    display: inline;
    width: auto;
  }

  /* Figma holds the standfirst to 652px so it breaks over two lines. The base
     rule gives it a fixed vw width (432px here), so that has to be released
     before max-width can take effect. */
  .page-id-4367 #partners .hero__description {
    width: auto;
    max-width: 652px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* The two controls inside the search bar - the "חיפוש חופשי" label and the
   "הצגת תוצאות" button beside it - are 14px in Figma (nodes 1:4688 /
   1:4690). The larger standalone "הצגת תוצאות" button below the filters is
   a different, 20px control (node 1:4753), so .partners__search-button is
   excluded here. */
/* The pill had padding: 0 10px 0 0 and justify-content:normal, so its label
   sat 13px/10px off-centre. Symmetric padding plus centring evens it out. */
.page-id-4367 label.on-top {
  font-size: 16px;
  justify-content: center;
  padding-left: 12px;
  padding-right: 12px;
}

/* Sized by an #id rule (`#partnerSimplySearch { font-size: var(--font-size-h5) }`),
   so the override has to out-rank an ID selector - hence matching on the id
   rather than on .button_dark. */
.page-id-4367 #partnerSimplySearch {
  font-size: 16px;
}

/* Checkbox labels: muted grey (#6E7988) rather than the darker body colour,
   and a single explicit row-gap so the vertical rhythm is uniform. The gap
   used to come from 7.2px top+bottom padding on every cell, which totalled
   the same 14.4px but left the spacing implicit and dependent on the
   padding staying symmetrical.
   The two columns share grid rows, so a row containing a label that wraps
   to two lines is taller than the single-line label next to it. Centring
   that shorter label splits the leftover space evenly above and below it
   instead of dumping all of it underneath, which is what made the rhythm
   look uneven. */
.page-id-4367 .partners__group-content {
  row-gap: 14px;
  /* Without a column gap the longest labels ran straight into the adjacent
     column's checkbox on wide screens. 24px keeps the two columns apart and
     lets the long labels wrap instead. */
  column-gap: 24px;
  align-items: center;
}

.page-id-4367 .partners__filters-cell {
  padding-top: 0;
  padding-bottom: 0;
}

/* Only the unselected labels change colour - a ticked filter keeps the
   purple it already uses to show it is active. */
.page-id-4367 .partners__group-content .form__checkbox input:not(:checked):not(.active) + span {
  color: var(--color-text-muted);
}

/* Figma (node 1:4674) starts the white panel above the breadcrumb trail so
   the trail sits inside it. The trail is a separate <section> before
   #partners in the markup, so instead of re-parenting it the panel is
   stretched upwards with a negative top margin and the same amount added
   back as padding, keeping its own content where it was. The trail then
   needs a stacking context of its own to paint over the panel - it already
   carries z-index:10 but was position:static, which made that inert. */
/* Desktop only: on mobile the trail sits in normal flow above a heading that
   is no longer inside the panel, so it needs neither the stacking context nor
   the panel's negative offset. */
@media screen and (min-width: 769px) {
  /* The trail already carries z-index:10 but was position:static, which made
     that inert - it needs its own stacking context to paint over the panel
     (which is position:relative; z-index:4). */
  .page-id-4367 .breadcrumbs {
    position: relative;
    z-index: 5;
  }

  /* -27px lifts the panel's top edge from just below the trail to 13px above
     the trail's text, so the trail ends up inside the frame (Figma has the
     panel starting at y=93 with the trail at y=106). 63px of top padding then
     puts the heading 63px below that edge, as in the design - it replaces the
     4vw the panel had, which would otherwise have ridden up with the panel. */
  .page-id-4367 #partners .container {
    margin-top: -27px;
    padding-top: 63px;
    /* Slightly wider than the sitewide .container (85.42vw) the breadcrumb
       trail still uses, so the panel's edge clears the trail instead of
       sitting flush with it - Figma ends the trail ~17px inside the panel. */
    width: 88vw;
  }
}

/* ---- Mobile (Figma node 1:5158) ----
   Different composition from desktop: the heading and standfirst sit on the
   page background, and the white rounded panel wraps only the search box and
   its two filter accordions. */
@media screen and (max-width: 768px) {
  /* Strip the desktop panel treatment off the wrapper - it moves to
     .partners__search below. */
  .page-id-4367 #partners .container {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
    /* Back to the sitewide mobile container width, which is also the design's
       333.5px panel width at 360px. */
    width: 92.66667vw;
  }

  .page-id-4367 #partners h2.hero__title {
    font-size: var(--font-size-h2-mobile);
    line-height: var(--line-height-h2-mobile);
    letter-spacing: normal;
  }

  /* 229px in the 360px frame, so the standfirst breaks over four lines. */
  .page-id-4367 #partners .hero__description {
    width: auto;
    max-width: 229px;
    margin-left: auto;
    margin-right: auto;
  }

  /* This is the white card in the mobile design: 333.5px wide, inset 13px,
     starting 34px below the standfirst. */
  .page-id-4367 .partners__search {
    background-color: var(--color-white);
    border-radius: 10px;
    box-shadow: 0 9px 18.749px 0 rgba(33, 33, 33, 0.16);
    width: auto;
    margin: 34px -6px 0;
    padding: 0;
  }

  /* Accordion headers: 18px, 56px tall, matching nodes 1:5218 / 1:5222. */
  .page-id-4367 .group__title {
    font-size: var(--font-size-h4-mobile);
    line-height: var(--line-height-h4-mobile);
  }

  /* Node 1:5226 - 172x39 centred pill. */
  .page-id-4367 .partners__search-button {
    width: 172px;
    height: 39px;
    margin: 16px auto;
  }

  /* The mobile design drops the "חיפוש חופשי" pill - the purple magnifier
     button carries the meaning instead. Visually hidden rather than
     display:none, because this is the <label for="s"> for the search input,
     so removing it from the accessibility tree would leave that field with
     no accessible name. */
  .page-id-4367 label.on-top {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* The ✔ glyph was set at 17.92px inside the checkbox's 14.36px content box
   (18px square minus its 1.82px borders), so it overflowed and rendered
   clipped and off-centre. Sizing the pseudo-element to the whole box and
   centring a smaller glyph inside it fixes both. */
.page-id-4367 .partners__group-content .form__checkbox input::before {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 11px;
  line-height: 1;
}

/* Hover/focus state for both "הצגת תוצאות" buttons: pale purple field with
   a purple outline and label, rather than the darker default. */
.page-id-4367 #partnerSimplySearch:hover,
.page-id-4367 #partnerSimplySearch:focus-visible,
.page-id-4367 .partners__search-button:hover,
.page-id-4367 .partners__search-button:focus-visible {
  background-color: var(--color-purple-light);
  border: 1px solid var(--color-purple);
  color: var(--color-purple);
}
.partners__search {
  position: relative;
  padding: 2vw 6vw;
  border-radius: 10px;
  z-index: 3;
}
.search__title{
  text-align: center;
}
.partners__search-button {
  width: 13.85vw;
  height: 3.2vw;
  margin: 2.5vw auto 2vw;
  font-size: var(--font-size-h5);
}
#partnerSimplySearch {
  width: 10vw;
  font-size: var(--font-size-h5);
  height: 3.2vw;
  border-radius: 10px 0 0 10px;
}
.partners__search-button:after {
  content: "\e908";
  font-family: "Shitufim", sans-serif;
  margin-right: 0.6vw;
}
html[dir="ltr"] .partners__search-button{border-radius:  0 10px 10px 0;}
html[dir="ltr"] .partners__search-button:after {
  margin-left: 0.6vw;
}
.tab__search-field{
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
  background: var(--color-white);
  -webkit-box-shadow: 0 0.625vw 1.302vw rgba(33, 33, 33, 0.16);
  box-shadow: 0 0.625vw 1.302vw rgba(33, 33, 33, 0.16);
  border-radius: 10px;
}
.tab__search-field .on-top{
  position: relative;
  background-color: var(--color-white);
  padding-right: 10px;
  width: 8vw;
  height: 3.2vw;
  display: flex;
  align-items: center;
  -webkit-box-shadow: 0 0.625vw 1.302vw rgba(33, 33, 33, 0.16);
  box-shadow: 0 0.625vw 1.302vw rgba(33, 33, 33, 0.16);
  border-radius: 40px 10px 10px 40px;
  z-index: 1;
}
html[dir="ltr"]  .tab__search-field .on-top{border-radius: 10px 40px 40px 10px;
 padding-right: 0;
 padding-left: 10px;
}
.partners__group {
  margin: 0;
  padding: 2vw !important;
  border-radius: 10px;
  background-color: var(--color-white);
  -webkit-box-shadow: 0 0.625vw 1.302vw rgba(33, 33, 33, 0.16);
  box-shadow: 0 0.625vw 1.302vw rgba(33, 33, 33, 0.16);
}

.partners__filters {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;

  gap: 2vw;
}
.partners__filters .form__checkbox span{display: inline-flex;}
.partners__filters .partners__filters-cell .form__checkbox input[type="checkbox"] {
  -webkit-appearance:none;
  cursor:pointer;
  position:relative;
  -webkit-transition: .10s;
  position: absolute;
  top: 0px;
  right: 0;
  height: 18px;
  width: 18px;
  background-color: var(--color-white);
  border: 2px solid var(--color-black);
  border-radius: 2px;
  }
  .partners__filters .partners__filters-cell .form__checkbox input[type="checkbox"]:checked {
    background-color: var(--color-red_300);
    border-color: var(--color-red_300);
  }
  .partners__filters .partners__filters-cell .form__checkbox input[type="checkbox"]:before,.partners__filters .partners__filters-cell .form__checkbox  input[type="checkbox"]:checked:before {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  line-height:1em;
  text-align:center;
  color:white;
  }
  .partners__filters .partners__filters-cell .form__checkbox input[type="checkbox"]:checked:before {
  content: '✔';
  }
  html[dir="ltr"]  .partners__filters .partners__filters-cell .form__checkbox input[type="checkbox"] ,  .partners__filters .partners__filters-cell .form__checkbox input[type="checkbox"]:before,.partners__filters .partners__filters-cell .form__checkbox  input[type="checkbox"]:checked:before {
    left:0;
    right: auto;
  }
.partners__filters-cell {
  position: relative;
  padding: 0.5vw 0;
  flex: 0 0 46%;
}
.partners__filters .partners__group{
  flex: 0 0 48%;
}
.partners__filters .form__checkbox span:before{
  display: none;
}
.form__checkbox input:checked + span{
  color: var(--color-red_300);
}
@media screen and (min-width: 768px) {
  .search__title{
    font-size: 2vw;
  }
}
@media screen and (max-width: 767px) {
  .tab__search-field{
    height: 12vw;
  }
  .partners__filters-cell {
    text-align: center;
  }
  .partners__filters-cell:last-of-type {
    padding-bottom: 5vw;
  }
  .tab__search-field .on-top{
    font-size: 0.9rem;
    width: 43vw;
    height: 100%;
  }
  .just-search .partners__filters input{background-image: none;}
  #partnerSimplySearch {
    width: 14vw; 
    font-size: 2vw;
    color: transparent;
    height: 100%;
    display: inline-block;
    background-image: url(../img/search-icon.svg);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: center;
    fill:var(--color-white)
  }
  .search__title{
    display: none;
  }
  .search__description {
    max-width: 90vw;
    font-size: var(--font-size-h2);
    display: none;
  }
  .partners__search,.just-search .partners__filters {
    padding: 0;
  }
  .partners__group {
    background: transparent;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    
  }
}
html[dir="ltr"] .partners__filters .partners__filters-cell .form__checkbox input[type="checkbox"] {
  text-align: left;
  padding-left: 0;
}


html[dir="ltr"] .partners__group:first-of-type {
  padding-left: 0;
  border: none;
}

html[dir="rtl"] .partners__group:first-of-type {
  padding-right: 0;
}

@media (max-width: 768px) {
  html[dir="ltr"] .partners__group:first-of-type {
    border-bottom: 1px solid rgba(207, 207, 207, 0.4);
  }
}

html[dir="ltr"] .partners__group:last-of-type {
  padding-right: 0;
}

html[dir="rtl"] .partners__group:last-of-type {
  padding-left: 0;
  border: none;
}

.partners__group-title {
  margin: 0 0 1.1vw 0;
  font-weight: 700;
  font-size: var(--font-size-h3);
  cursor: default;
}


@media screen and (max-width: 768px) {
  .partners__group-content {
    padding: 0 4vw;
  }
}

.partners__group_first {
  /*width: 50%;*/
  width: 42%;
}

.search__wrapper .partners__group-content {
  display: grid !important;
  -ms-grid-columns: (auto)[2];
  grid-template-columns: repeat(2, auto);

}
@media screen and (min-width: 1024px) {
  .about_partners-items .swiper-slide{
    width: 5.46875vw !important;
    height: 5.46875vw !important;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin: 0 3.64583vw;
  }
  .partners__group_third,
  .partners__group_second,
  .partners__group_first{
    width: 46%!important;
  }

}
@media screen and (max-width: 768px) {
  
  .partners .form__checkbox span{
    font-size: var(--font-size-body-mobile) !important;
  }

  .partners__filters-cell {
    padding: 0.5vw 0 2vw 0 !important;
  }
  .partners .form__checkbox span{
    padding: 0.5vw !important;
  }
}

.partners__group_second {
  width: 28.4%;
}

.partners__group_third {
  width: 21.6%;
}

.partners__group .form__checkbox {
  display: flex;
  align-items: center;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: right;
  padding-right: 2rem;
  font-size: 1.12rem;
}
html[dir="ltr"]  .partners__group .form__checkbox{
  text-align: left;
  padding-left: 2rem;
}
.partners-result {
  overflow: visible;
}

.partners-result .swiper-slide-duplicate {
  display: none;
}

@media screen and (max-width: 768px) {
  .partners-result .swiper-slide-duplicate {
    display: block;
  }
}

html[dir="ltr"] .partners-result .swiper-slide:nth-of-type(2n + 1) {
  border-right: 1px solid var(--color-gray_400);
}

html[dir="rtl"] .partners-result .swiper-slide:nth-of-type(2n + 1) {
  border-left: 1px solid var(--color-gray_400);
}

html[dir="ltr"] .partners-result .swiper-slide:nth-of-type(2n + 1) .partners-result__item:before {
  right: 0;
}

html[dir="rtl"] .partners-result .swiper-slide:nth-of-type(2n + 1) .partners-result__item:before {
  left: 0;
}

html[dir="ltr"] .partners-result .swiper-slide:nth-of-type(2n) .partners-result__item:before {
  right: -10vw;
}

html[dir="rtl"] .partners-result .swiper-slide:nth-of-type(2n) .partners-result__item:before {
  left: -10vw;
}

.partners-result__wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-transform: none;
  -ms-transform: none;
  transform: none;
}

.partners-result__item {
  height: 100%;
  padding: 3.15vw 3.281vw 2.7vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.partners-result__item:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -1px;
  bottom: 0;
  border-top: 1px solid var(--color-gray_400);
  border-bottom: 1px solid var(--color-gray_400);
}

html[dir="ltr"] .partners-result__item:before {
  left: -10vw;
}

html[dir="rtl"] .partners-result__item:before {
  right: -10vw;
}

.partners-result__logo {
  width: 10vw;
}

.partners-result__info {
  width: calc(100% - 10vw);
}

html[dir="ltr"] .partners-result__info {
  padding-left: 2.15vw;
}

html[dir="rtl"] .partners-result__info {
  padding-right: 2.15vw;
}

.partners-result__title {
  font-size: var(--font-size-h5);
  line-height: 1.2;
  margin-bottom: 0.7vw;
}

.partners-result__description {
  line-height: 1.666;
  margin-bottom: 0.65vw;
}

.partners-result__contacts {
  list-style: none;
  line-height: 1.666;
  display: -ms-grid;
  display: grid;
  grid-column-gap: 1vw;
  grid-column-gap: 1vw;

}

html[dir="ltr"] .partners-result__contacts {
  margin-right: 6vw;
}

html[dir="rtl"] .partners-result__contacts {
  margin-left: 6vw;
}

.partners-result__contacts li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: 0.3vw 0;
}

.partners-result__contacts li:before {
  margin-left: 0.4vw;
  line-height: 0;
  font-family: "Shitufim", sans-serif;
}

html[dir="ltr"] .partners-result__contacts li:before {
  margin-right: 0.599vw;
}

.partners-result__contacts a {
  color: var(--color-black);
}

.partners-result__contacts a:hover {
  color: var(--color-red_300);
}

.partners-result__location:before {
  content: "\e907";
  font-size: 1.1vw;
}

.partners-result__email:before {
  content: "\e905";
  font-size: 0.85vw;
}

.partners-result__tel:before {
  content: "\e909";
  font-size: 1.55vw;
}

.partners-result__url:before {
  content: "\e90a";
  font-size: 1.06vw;
}

.partners-result .swiper-slide {
  height: auto;
}

@media screen and (min-width: 769px) {
  .partners-result .swiper-slide {
    width: 50% !important;
  }
}

html[dir="ltr"] .partners-result .swiper-slide:nth-child(2n + 1) .partners-result__item {
  padding-left: 1vw;
}

html[dir="rtl"] .partners-result .swiper-slide:nth-child(2n + 1) .partners-result__item {
  padding-right: 1vw;
}

html[dir="ltr"] .partners-result .swiper-slide:nth-child(2n + 1) .partners-result__info {
  padding-left: 0.55vw;
}

html[dir="rtl"] .partners-result .swiper-slide:nth-child(2n + 1) .partners-result__info {
  padding-right: 0.55vw;
}

.partners-result .swiper-slide:nth-child(2n) .partners-result__item {
  padding-left: 1vw;
}

.partners__more {
  text-decoration: underline;
  color: var(--color-black);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

html[dir="ltr"] .partners__more {
  padding-right: 1vw;
}

html[dir="rtl"] .partners__more {
  padding-left: 1vw;
}

.partners__more:hover {
  color: var(--color-red_300);
}

.partners__more:after {
  content: "\e904";
  font-family: "Shitufim", sans-serif;
  font-size: 0.4vw;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

html[dir="ltr"] .partners__more:after {
  right: 0;
}

html[dir="rtl"] .partners__more:after {
  left: 0;
}

.partners__more-wrap {
  margin: 1.85vw 0;
  text-align: center;
}
.partners-result__part span,
.partners-result__lang span{
  margin-right: 0.3vw;
}
html[dir="ltr"] .partners-result__part span,
html[dir="ltr"] .partners-result__lang span{
  margin-left: 0.3vw;
}
.partners-result__contacts .partners-result__tel a{
  color: var(--color-purple);
  font-weight: 600;
}
.partners-result__contacts .partners-result__tel:before{
  color: var(--color-purple) !important;
}
.sliding-menu-title mark{
  color: var(--color-purple);
  background-color: transparent;

}
@media (max-width: 1240px) {
  html[dir="ltr"] .partners-result__part span,
  html[dir="ltr"] .partners-result__lang span{
    margin-left: 1vw;
  }

  .partners-result__part span,
  .partners-result__lang span{
    margin-right: 1vw;
  }
  .partners__header {
    padding: 6.55vw 15vw 14.35vw;
  }
 
  html[dir="ltr"] .partners__search-tabs {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse;
  }
  .partners__search-button {
    width: 16vw;
    height: 4vw;
    font-size: var(--font-size-caption);
  }
  html[dir="ltr"] .partners-result__item:nth-child(2n + 1) .partners-result__info {
    padding-left: 2vw;
  }
  html[dir="rtl"] .partners-result__item:nth-child(2n + 1) .partners-result__info {
    padding-right: 2vw;
  }
  .partners-result__title {
    font-size: var(--font-size-caption);
  }
}

@media (max-width: 768px) {
  .page-id-4367 main#mainContent{
    position: relative;
  }
  .partners__search {
        margin-top: 4vw;
    }
  #partners .container {
    padding-top: 13vw;
  }
  .partners__header {
    padding: 17.46667vw 0 34.13333vw;
  }
  .partners__title {
    padding: 0;
    margin-bottom: 4.4vw;
    line-height: 1.125;
    font-size: 10.66667vw;
  }
  .partners__description {
    line-height: calc(40 / 30);
    margin: 0 3.33333vw;
  }

  .partners__search-button {
    width: 42.66667vw;
    height: 11.33333vw;
    margin: -1.6vw auto -5.6vw;
    font-size: var(--font-size-body-mobile);
  }
  .partners__search-button:after {
    margin-right: 4.26667vw;
  }
  .partners__tabs-content {
    padding: 0;
    margin: 0 0.93333vw 17.46667vw;
    border-radius: 2.66667vw;
  }
  .partners__filters {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .partners__group {
    width: 100%;
    padding: 0;
    border-bottom: 1px solid var(--color-gray_400);
  }
  .partners__group:last-of-type {
    border-bottom: none;
  }
  .partners__group-title {
    font-size: var(--font-size-body-mobile);
    margin: 0;
    width: 100%;
    text-align: start;
    padding: 5.73333vw 4vw 5.73333vw;
  }
  .partners-result {
    margin-left: -3.66667vw;
  }
  .partners-result .swiper-slide {
    width: auto;
    padding-left: 5.33333vw;
  }
  .partners-result__wrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
  .partners-result__item {
    width: 73.33333vw;
    background-color: var(--color-white);
    border-radius: 1.33333vw;
    padding: 5.6vw 4vw 10.13333vw 10.66667vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
  }
  html[dir="ltr"] .partners-result__item:nth-child(2n + 1) {
    padding-left: 4vw !important;
  }
  html[dir="rtl"] .partners-result__item:nth-child(2n + 1) {
    padding-right: 4vw;
  }
  .partners-result__item:nth-child(2n + 1) .partners-result__info {
    padding-right: 0;
  }
  .partners-result__item:nth-child(2n) {
    padding-left: 10.66667vw;
    border: none;
  }
  .partners-result__item:before {
    display: none;
  }
  .partners-result__logo {
    width: 22.4vw;
    margin-bottom: 2.93333vw;
  }
  .partners-result__info {
    padding-right: 0;
    width: 100%;
  }
  .partners-result__title {
    margin-bottom: 2.66667vw;
    line-height: calc(40 / 34);
    font-size: var(--font-size-body-mobile);
  }
  .partners-result__description {
    margin-bottom: 6.26667vw;
    font-size: var(--font-size-caption-mobile);
    line-height: calc(34 / 26);
  }
  .partners-result__contacts {
    font-size: 3.06667vw;
    line-height: calc(32 / 23);
    grid-column-gap: 2.66667vw;
  }
  html[dir="ltr"] .partners-result__contacts {
    margin-right: -3.6vw;
  }
  html[dir="rtl"] .partners-result__contacts {
    margin-left: -3.6vw;
  }
  .partners-result__contacts li {
    margin: 0.8vw 0;
  }
  .partners-result__contacts li:before {
    margin-left: 2.26667vw;
  }
  .partners-result__location:before {
    font-size: 3.06667vw;
  }
  .partners-result__email:before {
    font-size: 2.4vw;
  }
  .partners-result__tel:before {
    font-size: 4.8vw;
  }
  .partners-result__url:before {
    font-size: 2.93333vw;
  }
  .partners__more {
    font-size: var(--font-size-body-mobile);
    font-weight: 700;
  }
  html[dir="ltr"] .partners__more {
    padding-right: 3.33333vw;
  }
  html[dir="rtl"] .partners__more {
    padding-left: 3.33333vw;
  }
  .partners__more:after {
    font-size: 1.86667vw;
    font-weight: 400;
  }
  html[dir="ltr"] .partners__more:after {
    right: -1.73333vw;
    -webkit-transform: translateY(-50%) rotate(0);
    -ms-transform: translateY(-50%) rotate(0);
    transform: translateY(-50%) rotate(0);
  }
  html[dir="rtl"] .partners__more:after {
    left: -1.73333vw;
    -webkit-transform: translateY(-50%) rotate(0);
    -ms-transform: translateY(-50%) rotate(0);
    transform: translateY(-50%) rotate(0);
  }
  .partners__more-wrap {
    margin: 7.73333vw 0;
  }
}

@media (min-width: 768px) {
  .partners-result__wrap {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
  }
}

.community .container {
  padding-top: 3.95vw;
  padding-bottom: 8vw;
}

html[dir="ltr"] .community .split__text {
  padding-right: 4vw;
}

html[dir="rtl"] .community .split__text {
  padding-left: 4vw;
}

.community .split__addition {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.community .split__addition img {
  -webkit-transform: translate(-1.1vw, 0.9vw);
  -ms-transform: translate(-1.1vw, 0.9vw);
  transform: translate(-1.1vw, 0.9vw);
}

@media (max-width: 768px) {
  .community .container {
    padding-top: 9.46667vw;
  }
  .community .split__title {
    margin-bottom: 8.13333vw;
  }
  html[dir="ltr"] .community .split__text {
    padding-right: 0;
  }
  html[dir="rtl"] .community .split__text {
    padding-left: 0;
  }
  .community .split__text p {
    margin-bottom: 4.93333vw;
  }
  .community .split__buttons {
    margin-top: 6.26667vw;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .community .split__addition {
    padding-bottom: 10.8vw;
  }
  .community .split__addition img {
    width: 95.06667vw;
    height: 61.73333vw;
    -webkit-transform: translate(5.33333vw, 6.4vw);
    -ms-transform: translate(5.33333vw, 6.4vw);
    transform: translate(5.33333vw, 6.4vw);
  }
}

.updates .container {
  padding-top: 6.6vw;
  padding-bottom: 17.2vw;
}

.updates__card {
  position: relative;
  padding: 2.3vw 2.2vw;
  z-index: 2;
  height: 25.3vw;
  -webkit-transition: color 0.2s;
  -o-transition: color 0.2s;
  transition: color 0.2s;
  background-color: var(--color-surface);
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 1vw 1vw 1vw 0 rgba(0, 0, 0, 0.1);
  box-shadow: 1vw 1vw 1vw 0 rgba(0, 0, 0, 0.1);
}

.updates__card p {
  margin-bottom: 1.75vw;
  line-height: 1.389;
}

.updates__card-arrow {
  font-family: "Shitufim", sans-serif;
  color: var(--color-black);
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

.updates__card-arrow::after {
  content: "\e903";
  font-family: "Shitufim", sans-serif;
  position: absolute;
  bottom: 3.1vw;
  -webkit-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

html[dir="ltr"] .updates__card-arrow::after {
  right: 2.4vw;
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

html[dir="rtl"] .updates__card-arrow::after {
  left: 2.4vw;
}

.updates__card:hover {
  color: var(--color-white);
}

.updates__card:hover .updates__title a {
  color: var(--color-white);
}

.updates__card:hover a {
  color: var(--color-white);
}

.updates__card:hover .updates__card-arrow::after {
  bottom: 2.1vw;
}

html[dir="ltr"] .updates__card:hover .updates__card-arrow::after {
  right: 1.4vw;
}

html[dir="rtl"] .updates__card:hover .updates__card-arrow::after {
  left: 1.4vw;
}

.updates__card:hover .updates__image {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

.updates__card:hover .updates__link {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
}

.updates__image {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-transition: all 0.4s;
  -o-transition: all 0.4s;
  transition: all 0.4s;
  opacity: 0;
  border-radius: 10px;
  overflow: hidden;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
}

.updates__image:before, .updates__image:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.updates__image:before {
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 2;
}

.updates__image:after {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color-purple)), color-stop(46%, var(--color-purple)), to(var(--color-orange))) 0% 0% no-repeat padding-box;
  background: -o-linear-gradient(top, var(--color-purple) 0%, var(--color-purple) 46%, var(--color-orange) 100%) 0% 0% no-repeat padding-box;
  background: var(--gradient-brand) 0% 0% no-repeat padding-box;
  opacity: 0.5;
  z-index: 3;
}

.updates__image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -webkit-filter: grayscale(1);
  filter: grayscale(1);
}

.updates__title {
  font-size: 1.823vw;
  line-height: 1.2;
  font-weight: 700;
  margin-bottom: 0.34vw;
}

.updates__title a {
  color: var(--color-black);
}

.updates__link {
  display: inline-block;
  position: relative;
  color: var(--color-white);
  text-decoration: underline;
  opacity: 0;
  -webkit-transform: translateY(0.2vw);
  -ms-transform: translateY(0.2vw);
  transform: translateY(0.2vw);
  -webkit-transition: all 0.3s ease-in-out 0.2s;
  -o-transition: all 0.3s ease-in-out 0.2s;
  transition: all 0.3s ease-in-out 0.2s;
}

html[dir="ltr"] .updates__link {
  margin-left: 1.3vw;
}

html[dir="rtl"] .updates__link {
  margin-right: 1.3vw;
}

.updates__link:hover {
  text-decoration: none;
}

.updates__link:before {
  content: "\e906";
  position: absolute;
  font-size: 1.05vw;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-family: "Shitufim", sans-serif;
}

html[dir="ltr"] .updates__link:before {
  left: -1.3vw;
}

html[dir="rtl"] .updates__link:before {
  right: -1.3vw;
}

.updates .split__addition {
  padding: 0 2.55vw 0 0.7vw;
}

.updates .split__text {
  padding-top: 8.6vw;
  padding-right: 6.45vw;
}

.updates .split__text p {
  margin-left: 7vw;
}

.updates .updates_swiper {
  overflow: visible;
}

@media (max-width: 1240px) {
  .updates__card p {
    margin-bottom: 1.5vw;
    font-size: var(--font-size-button-small);
  }
}

@media (max-width: 768px) {
  .updates__title a {
    color: var(--color-white);
  }
  .updates__card {
    height: 100%;
    padding: 6vw 4.13333vw;
  }
  .updates__card .updates__image {
    opacity: 1;
  }
  .updates__card .updates__title {
    color: var(--color-white);
    font-size: 7.33333vw;
    line-height: 1.3;
    margin-bottom: 1.33333vw;
  }
  .updates__card p {
    font-size: var(--font-size-caption-mobile);
    margin-bottom: 6vw;
    color: var(--color-white);
  }
  .updates__card .updates__link {
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
    opacity: 1;
    color: var(--color-white);
  }
  html[dir="ltr"] .updates__card .updates__link {
    margin-left: 5vw;
  }
  html[dir="rtl"] .updates__card .updates__link {
    margin-right: 5vw;
  }
  .updates__card .updates__link:before {
    font-size: 3vw;
  }
  html[dir="ltr"] .updates__card .updates__link:before {
    left: -5vw;
  }
  html[dir="rtl"] .updates__card .updates__link:before {
    right: -5vw;
  }
  .updates__card-arrow {
    color: var(--color-white);
  }
  .updates .split__text {
    padding: 0 0 13.33333vw;
  }
  .updates .split__text p {
    margin: 0 2.66667vw 1.06667vw;
  }
  .updates .split__buttons {
    margin-top: 0;
  }
  .updates .split__addition {
    padding: 5.73333vw 0 0;
  }
  .updates .split__text {
    padding: 0 5.33333vw;
    padding-bottom: 15.06667vw;
  }
  .updates .split__text p {
    margin-left: 0;
  }
  .updates .container {
    padding-top: 18.93333vw;
    width: 100%;
  }
  .updates .updates_swiper {
    overflow: hidden;
    padding: 4vw;
    margin-bottom: 0;
  }
  .updates .updates_swiper .plates {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    margin: 0;
  }
  .updates .updates_swiper .plates .plates__item {
    -webkit-transform: none !important;
    -ms-transform: none !important;
    transform: none !important;
    width: 74.93333vw;
    height: 90vw;
    padding: 0;
    padding-left: 5.33333vw;
  }
}

.button-wrapper {
  width: 100%;
  text-align: center;
  -webkit-box-ordinal-group: 11;
  -ms-flex-order: 10;
  order: 10;
}

.button-wrapper button {
  margin: 0 auto;
}

.breadcrumbs {
  padding-top: 0.41667vw;
}

.breadcrumbs ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  list-style: none;
}

.breadcrumbs li {
  position: relative;
  font-size: 14px;
}

.breadcrumbs li::after {
  content: "/";
  margin: 0 0.26042vw;
}

.breadcrumbs li:last-child::after {
  display: none;
}

.breadcrumbs a {
  color: var(--color-black);
}

/* Only the crumb for the page you are actually on is purple. Scoped to
   [aria-current="page"] rather than every <span>, because trails with an
   intermediate crumb (see the map in parts/breadcrumbs.php) render that
   middle one as a non-link <span> too, and it should stay neutral. */
.breadcrumbs [aria-current="page"] span {
  color: var(--color-purple);
}

.breadcrumbs a:hover {
  color: var(--color-red_300);
}

@media (max-width: 768px) {
  .breadcrumbs {
    margin-bottom: 10px;
  }
  /* Wrap between crumbs instead of inside them. With nowrap the flex items
     were shrinking and each crumb's own text broke mid-phrase ("עמוד /
     הבית"), which is what made a long trail look ragged on a narrow screen.
     Letting the row wrap while each crumb stays intact keeps it readable. */
  .breadcrumbs ul {
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 2px;
  }
  .breadcrumbs li {
    white-space: nowrap;
  }
  .breadcrumbs li:after {
    margin: 0 0.8vw;
  }
}

.about_hero {
  margin-bottom: 6.92708vw;
}

@media screen and (max-width: 768px) {
  .about_hero {
    margin-bottom: 6.66667vw;
  }
}

.about_hero .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  position: relative;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  text-align: center;
  padding-top: 5.72917vw;
}


html[dir="ltr"] .about_hero .container::before {
  right: 0.1vw;
}

html[dir="rtl"] .about_hero .container::before {
  left: 0.1vw;
}

.about_hero-title {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
}

html[dir="ltr"] .about_hero-title {
  padding-right: 5.10417vw;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
}

html[dir="rtl"] .about_hero-title {
  padding-left: 5.10417vw;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

@media screen and (max-width: 768px) {
  .about_hero-title {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    padding-left: 0;
    text-align: center;
  }
}

@media (max-width: 768px) {
  html[dir="ltr"] .about_hero-title {
    padding-right: 0;
  }
  html[dir="rtl"] .about_hero-title {
    padding-left: 0;
  }
}

.about_hero-title h1 {
  font-size: var(--font-size-h1);
  font-weight: bold;
  line-height: 4.375vw;
}

@media screen and (max-width: 768px) {
  .about_hero-title h1 {
    font-size: var(--font-size-h1-mobile);
    line-height: 1;
    margin: 0 auto;
    padding-bottom: 29.6vw;
    margin-bottom: 4.26667vw;
  }
}

.about_hero-title h1 mark ,h1.page-hero__title  mark{
  background: var(--color-orange);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about_hero-title .img {
  position: absolute;
  right: 12.5%;
  bottom: -1vw;
  background-image: url(../img/about_hero_decor.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  width: 9.47917vw;
  height: 8.22917vw;
}

@media screen and (max-width: 768px) {
  .about_hero-title .img {
    width: 29.06667vw;
    height: 25.33333vw;
    right: auto;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    bottom: 0;
  }
}

.about_hero-text {
  font-size: var(--font-size-button);
  line-height: 1.5625vw;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  padding-left: 3.125vw;
  max-width: 36.45833vw;
  padding-top: 0.9375vw;
  position: relative;
}

@media screen and (max-width: 768px) {
  .about_hero-text {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    padding-left: 0;
    max-width: none;
    text-align: center;
  }
}

.about_hero-text p {
  margin-bottom: 1.25vw;
  line-height: 1.6;
}

@media screen and (max-width: 768px) {
  .about_hero-text p {
    font-size: var(--font-size-body-mobile);
    margin-bottom: 1em;
  }
}

.about_hero-text p:last-child {
  margin-bottom: 0;
}

.about_features {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
  margin-bottom: 8.85417vw;
}

@media screen and (max-width: 768px) {
  .about_features {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

.about_features-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  border: 1px solid var(--color-gray_400);
  border-left: none;
  border-collapse: collapse;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 4.16667vw 2.60417vw;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .about_features-item {
    -webkit-box-flex: unset;
    -ms-flex: unset;
    flex: unset;
    width: 50%;
  }
  .about_features-item:first-of-type {
    width: 100%;
  }
}

html[dir="rtl"] .about_features-item:last-child {
  border-right: none;
}

html[dir="ltr"] .about_features-item:first-child {
  border-right: none;
}

@media (max-width: 768px) {
  html[dir="ltr"] .about_features-item:nth-child(2n + 2) {
    border-right: none;
  }
  html[dir="rtl"] .about_features-item:nth-child(2n + 2) {
    border-left: none;
  }
}

@media (max-width: 768px) {
  html[dir="ltr"] .about_features-item:nth-child(2n + 3) {
    border-left: none;
  }
  html[dir="rtl"] .about_features-item:nth-child(2n + 3) {
    border-right: none;
  }
}

.about_features-item h4 {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: 3.64583vw;
  line-height: 1.2;
}

@media screen and (max-width: 768px) {
  .about_features-item h4 {
    font-size: var(--font-size-h1-mobile);
  }
}

.about_features-item p {
  font-size: var(--font-size-body);
  line-height: 1.25;
  color: var(--color-gray_700);
}

@media screen and (max-width: 768px) {
  .about_features-item p {
    font-size: var(--font-size-body-mobile);
  }
}

.split.mission {
  margin-bottom: 9.89583vw;
}

@media screen and (max-width: 768px) {
  .split.mission {
    margin-bottom: 18vw;
  }
}

.split.mission .split__text {
  padding: 4vw 6.5vw 0 6.5vw;
}

.split.mission .split__addition {
  padding-right: 4.2vw;
  margin-top: -0.4vw;
}

@media screen and (max-width: 768px) {
  .split.mission .split__addition {
    padding-right: 0;
    margin-top: 8vw;
  }
}

.split.mission .split__addition img {
  max-width: 34.63542vw;
}

@media screen and (max-width: 768px) {
  .split.mission .split__addition img {
    max-width: 100%;
  }
}

.split.model {
  padding-top: 10.26042vw;
  padding-bottom: 7.29167vw;
  border-bottom: 1px solid var(--color-gray_300);
}

@media screen and (max-width: 768px) {
  .split.model {
    padding-top: 14.4vw;
    padding-bottom: 4.66667vw;
  }
}

.split.model .split__text {
  padding: 0.3vw 6.5vw 0 6vw;
}

.split.model .split__text .split__title {
  margin-bottom: 2.2vw;
}

.split.model .split__addition {
  padding-right: 1.6vw;
}

@media screen and (max-width: 768px) {
  .split.model .split__addition {
    padding-right: 0;
    margin-top: 24.66667vw;
  }
}

.split.model .split__addition img {
  max-width: 42.08333vw;
}

@media screen and (max-width: 768px) {
  .split.model .split__addition img {
    max-width: 100%;
  }
}

.about_goal {
  width: 100%;
}

.about_goal-title {
  padding: 1.5625vw 0;
  border-top: 1px solid var(--color-gray_300);
  border-collapse: collapse;
}

@media screen and (max-width: 768px) {
  .about_goal-title {
    padding: 5.06667vw 0 7.33333vw;
  }
}

.about_goal-title h2 {
  /* Was 3.64583vw - 52.5px at the 1440px design width, but 70px at 1920px,
     which drifted away from the other section titles. The token is fixed px
     on purpose (see the :root note about the reverted fluid scale). */
  font-size: var(--font-size-h2);
  font-weight: bold;
  line-height: 1.2;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .about_goal-title h2 {
    font-size: var(--font-size-h2-mobile);
  }
}

.about_goal-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media screen and (max-width: 768px) {
  html[dir="ltr"] .about_goal-items {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
}

.about_goal-item {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
  border: 1px solid var(--color-gray_300);
  border-left: none;
  border-bottom: none;
  border-collapse: collapse;
  padding: 9.63542vw 6.77083vw;
}

@media screen and (max-width: 768px) {
  .about_goal-item {
    padding: 13.33333vw 8vw;
  }
}

@media (max-width: 768px) {
  .about_goal-item {
    border-right: none;
    border-left: none;
  }
}

.about_goal-item:last-child {
  border-right: none;
}

.about_goal-item .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin-bottom: 1.97917vw;
  max-width: 8.22917vw;
  max-height: 4.32292vw;
}

@media screen and (max-width: 768px) {
  .about_goal-item .icon {
    max-width: 30.66667vw;
    max-height: 18.66667vw;
    margin-bottom: 4vw;
  }
}

.about_goal-item .icon img {
  max-width: 100%;
  max-height: 100%;
}

.about_goal-item h3 {
  font-size: var(--font-size-h5);
  color: var(--color-red_300);
  margin-bottom: 0.625vw;
  display: inline-block;
}

@media screen and (max-width: 768px) {
  .about_goal-item h3 {
    font-size: var(--font-size-caption-mobile);
  }
}

.about_goal-item p {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 50%;
  flex: 0 0 50%;
  text-transform: uppercase;
  font-size: var(--font-size-body);
  line-height: 1.3;
}

@media screen and (max-width: 768px) {
  .about_goal-item p {
    font-size: var(--font-size-body-mobile);
  }
}

.about_partners {
  width: 100%;
  padding-bottom: 5.20833vw;
  border-bottom: 1px solid var(--color-gray_300);
}

@media screen and (max-width: 768px) {
  .about_partners {
    padding-top: 17.46667vw;
    padding-bottom: 15.86667vw;
  }
}

.about_partners h2 {
  text-align: center;
  font-size: var(--font-size-h4);
  line-height: 1;
  margin-bottom: 2.23958vw;
}

@media screen and (max-width: 768px) {
  .about_partners h2 {
    font-size: var(--font-size-body-mobile);
    margin-bottom: 10.13333vw;
  }
}

.about_partners-items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

html[dir="rtl"] .about_partners-items {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

@media screen and (max-width: 768px) {
  .about_partners-items {
    gap: 9.33333vw 0;
  }
}

.about_partners-item {
  width: 5.46875vw;
  height: 5.46875vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  margin: 0 3.64583vw;
}

@media screen and (max-width: 768px) {
  .about_partners-item {
    margin: 0;
    width: 50%;
    height: auto;
  }
  .about_partners-item img {
    width: 60%;
  }
}

.about_team {
  padding-top: 10.41667vw;
  padding-bottom: 8.85417vw;
}

.about_team .container {
  width: 87.5vw;
}

@media screen and (max-width: 768px) {
  .about_team {
    padding-top: 19.86667vw;
    padding-bottom: 26.93333vw;
  }
}

.about_team-slider {
  width: 69.5%;
}

@media screen and (max-width: 768px) {
  .about_team-slider {
    width: 100%;
  }
}

@media screen and (min-width: 769px) {
  .about_team-slider .swiper-wrapper {
    -webkit-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: (1fr)[3];
    grid-template-columns: repeat(3, 1fr);
    gap: 3.125vw 2.60417vw;
  }
}

.about_team .split__text {
  width: 30.5%;
  padding: 0;
  padding-top: 8.59375vw;
}

html[dir="ltr"] .about_team .split__text {
  padding-right: 7.8125vw;
}

html[dir="rtl"] .about_team .split__text {
  padding-left: 7.8125vw;
}

@media screen and (max-width: 768px) {
  .about_team .split__text {
    width: 100%;
    max-width: none;
    padding: 0;
  }
}

.about_team .plates__item {
  padding: 0;
  height: 25.46875vw;
}

@media screen and (max-width: 768px) {
  .about_team .plates__item {
    height: 82.53333vw;
    padding-left: 5.33333vw;
  }
}

@media screen and (min-width: 769px) {
  .about_team .plates__item {
    width: auto !important;
  }
  .about_team .plates__item:nth-of-type(2), .about_team .plates__item:nth-of-type(5) {
    margin-top: -5.20833vw;
  }
}

.about_team-card {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding: 2.1875vw 1.5625vw;
  min-height: 25.46875vw;
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 1.04167vw 0.88542vw 2.08333vw 0vw rgba(0, 0, 0, 0.25);
  box-shadow: 1.04167vw 0.88542vw 2.08333vw 0vw rgba(0, 0, 0, 0.25);
}

@media screen and (max-width: 768px) {
  .about_team-card {
    padding: 5.6vw 4vw;
  }
}

.about_team-card::before {
  opacity: 0;
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  -webkit-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, var(--color-purple)), color-stop(46%, var(--color-purple)), to(var(--color-orange)));
  background: -o-linear-gradient(top, var(--color-purple) 0, var(--color-purple) 46%, var(--color-orange) 100%);
  background: var(--gradient-brand);
}

.about_team-card .image {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}

.about_team-card .image:before {
  content: "";
  position: absolute;
  background-color: var(--color-black);
  opacity: 0.25;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.about_team-card .image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.about_team-card .main-info {
  z-index: 2;
  -webkit-transition: 0.2s ease;
  -o-transition: 0.2s ease;
  transition: 0.2s ease;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  width: 100%;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  height: 100%;
  padding: 2.1875vw 1.5625vw;
  position: absolute;
  bottom: 0;
  left: 0;
}

html[dir="ltr"] .about_team-card .main-info {
  text-align: left;
}

html[dir="rtl"] .about_team-card .main-info {
  text-align: right;
}

@media screen and (max-width: 768px) {
  .about_team-card .main-info {
    padding: 5.6vw 4vw;
  }
}

.about_team-card .additional-info {
  z-index: 2;
  position: relative;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  opacity: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.2s ease 0.1s;
  -o-transition: 0.2s ease 0.1s;
  transition: 0.2s ease 0.1s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.about_team-card .text-info h4 {
  font-size: var(--font-size-h3);
  line-height: 1.3;
  margin-bottom: 0.625vw;
  font-weight: bold;
  color: var(--color-white);
}

@media screen and (max-width: 768px) {
  .about_team-card .text-info h4 {
    font-size: var(--font-size-h4-mobile);
  }
}

.about_team-card .text-info p {
  font-size: var(--font-size-body);
  line-height: 1.2;
  margin-bottom: 0.78125vw;
  font-weight: 300;
  color: var(--color-white);
}

@media screen and (max-width: 768px) {
  .about_team-card .text-info p {
    font-size: 2.66667vw;
  }
}

.about_team-card .text-info p:last-child {
  margin-bottom: 0;
}

.about_team-card .text-info a.mail {
  color: var(--color-white);
  position: relative;
  display: inline-block;
  line-height: 1.3;
  text-decoration: underline;
  margin-top: auto;
}

html[dir="ltr"] .about_team-card .text-info a.mail {
  margin-left: 2.08333vw;
}

html[dir="rtl"] .about_team-card .text-info a.mail {
  margin-right: 2.08333vw;
}

.about_team-card .text-info a.mail::after {
  content: "";
  position: absolute;
  top: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  width: 1.30208vw;
  height: 0.98958vw;
  background-image: url(../img/mail-icon.svg);
}

html[dir="ltr"] .about_team-card .text-info a.mail::after {
  left: -2.08333vw;
}

html[dir="rtl"] .about_team-card .text-info a.mail::after {
  right: -2.08333vw;
}

.about_team-card:hover::before {
  opacity: 0.8;
}

.about_team-card:hover .main-info {
  opacity: 0;
  visibility: hidden;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
}

.about_team-card:hover .additional-info {
  visibility: visible;
  opacity: 1;
}

.explain_about .container {
  padding-bottom: 6.3vw;
}

.story {
  padding-bottom: 5.625vw;
}

.story .container {
  padding-top: 4.42708vw;
}

.story__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -ms-flex-direction: column-reverse;
  flex-direction: column-reverse;
  position: relative;
  padding-bottom: 15.05208vw;
}

.story__list:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  border-right: 1px solid var(--color-gray_400);
}

.story__list:after {
  content: "";
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: 0;
  border-bottom: 1px solid var(--color-gray_400);
}

.story__item {
  position: relative;
  padding: 0 1.875vw;
  margin-bottom: 11.14583vw;
}

.story__item:first-child {
  margin-bottom: 0;
}

.story__item:nth-child(2n + 1) {
  padding-right: 51.45833vw;
}

.story__item:nth-child(2n) {
  padding-left: 51.45833vw;
}

.story__year {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 8.4375vw;
  height: 8.4375vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-size: var(--font-size-h3);
  font-weight: 700;
}

.story__year:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  border-radius: 50%;
  background-color: var(--color-white);
}

.story__year:after {
  content: "";
  position: absolute;
  left: -0.41667vw;
  top: -0.46875vw;
  width: 12.91667vw;
  height: 11.77083vw;
  z-index: -2;
  background: url("../img/shadow_year.png") 0 0/cover no-repeat;
}

.story__event {
  line-height: calc(30 / 18);
  padding: 0 0.36458vw;
}

.story__event h3 {
  margin: 0 -0.36458vw 1.14583vw;
  font-size: var(--font-size-h2);
  line-height: calc(60 / 50);
}

.story__event p {
  margin-bottom: 0.67708vw;
}

.story__event a {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: var(--color-red_300);
  text-decoration: underline;
  padding-right: 1.66667vw;
  position: relative;
}

.story__event a:hover {
  text-decoration: none;
}

.story__event a:before {
  content: "\e906";
  font-family: "Shitufim";
  margin-left: 0.78125vw;
  font-size: 1.04167vw;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.story__event li {
  list-style: none;
  line-height: 1.5;
}

.story__event ul li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0.41667vw;
  height: 0.41667vw;
  margin-left: 0.41667vw;
  border-radius: 50%;
  background-color: var(--color-black);
}

.story__event ol {
  counter-reset: list;
}

.story__event ol li:before {
  content: counter(list) ".";
  counter-increment: list;
  margin-left: 0.52083vw;
  font-weight: 700;
}

.story__event ul,
.story__event ol {
  margin-bottom: 1.04167vw;
}

.story__gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 4.6875vw -2.44792vw 0 -4.94792vw;
}

.story__gallery-image {
  background-color: var(--color-white);
  padding: 0.36458vw;
  max-width: 50%;
  -webkit-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}

.story__gallery-image:nth-child(2n) {
  -webkit-transform: translate(2.13542vw, -0.98958vw) rotate(6deg);
  -ms-transform: translate(2.13542vw, -0.98958vw) rotate(6deg);
  transform: translate(2.13542vw, -0.98958vw) rotate(6deg);
}

.story__gallery-image:nth-child(3n) {
  -webkit-transform: rotate(6deg);
  -ms-transform: rotate(6deg);
  transform: rotate(6deg);
}

.story__gallery-image:nth-child(4n) {
  -webkit-transform: translate(2.13542vw, -0.98958vw) rotate(-4deg);
  -ms-transform: translate(2.13542vw, -0.98958vw) rotate(-4deg);
  transform: translate(2.13542vw, -0.98958vw) rotate(-4deg);
}

.story__gallery img {
  width: 100%;
  display: block;
}

.page-hero_story .page-hero__description {
  margin-top: 1vw;
  width: 50vw;
}

.page-hero_story .page-hero__image {
  width: 17.86458vw;
  right: -0.88542vw;
  bottom: 4.6875vw;
}

@media (max-width: 1240px) {
  .story__item {
    padding: 0;
  }
  .story__item:nth-child(2n + 1) {
    padding-right: 53vw;
  }
  .story__item:nth-child(2n) {
    padding-left: 53vw;
  }
  .page-hero_story .page-hero__description {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .story {
    padding-bottom: 1.6vw;
  }
  .story .container {
    padding-top: 39.73333vw;
  }
  .story__list:before, .story__list:after {
    display: none;
  }
  .story__item {
    padding: 17.2vw 0 0;
    text-align: center;
    margin-bottom: 24.8vw;
  }
  .story__item:nth-child(2n + 1) {
    padding-right: 0;
  }
  .story__item:nth-child(2n) {
    padding-left: 0;
  }
  .story__year {
    width: 21.6vw;
    height: 21.6vw;
    font-size: var(--font-size-h4-mobile);
  }
  .story__year:before {
    -webkit-box-shadow: 4vw 2.4vw 7.33333vw rgba(0, 0, 0, 0.16);
    box-shadow: 4vw 2.4vw 7.33333vw rgba(0, 0, 0, 0.16);
  }
  .story__year:after {
    display: none;
  }
  .story__event {
    line-height: calc(37 / 30);
  }
  .story__event h3 {
    margin-bottom: 2.13333vw;
    font-size: var(--font-size-h1-mobile);
  }
  .story__event ol,
  .story__event ul {
    text-align: start;
    margin: 0 4vw 4vw;
  }
  .story__event ul li:before {
    width: 1.6vw;
    height: 1.6vw;
  }
  .story__event p {
    margin-bottom: 2.93333vw;
  }
  .story__event a {
    padding-right: 6.93333vw;
  }
  .story__event a:before {
    font-size: 4.4vw;
  }
  .story__gallery {
    margin: 12vw 0 0;
  }
  .page-hero_story .page-hero__image {
    width: 32.26667vw;
    right: 5.86667vw;
    bottom: -13.86667vw;
  }
}
/* Matches the sitewide body background (and Figma's #f8f9fb page frame).
   Was #FCFCFC - a near-identical but not equal off-white, which showed as a
   visible seam against the header's #F8F9FB on this template. */
.page-template-page-information{
  background-color: var(--color-surface);
}
/* The shared `.page:before` bg-pattern texture has to be killed on BOTH
   elements that end up matching `.page` here: <main class="page"> and
   <body>, which WordPress also gives a bare `page` class on Page post
   types. Disabling only one leaves the other still painting the texture
   over the content, which then reads as a different shade than the flat
   header above it. */
.page-template-page-information::before,
.page-template-page-information main.page::before{
  display: none;
}
/* ===== Knowledge Center (page-information.php) — rebuilt per Figma node 1:151 ===== */

.info-tabs {
  /* position:sticky was tried first, but the sitewide `main { overflow:
     hidden }` rule clips any sticky descendant to main's own box (and
     unclipping main broke the page layout - see inline script comment on
     this page). JS toggles .is-stuck to switch this to position:fixed
     instead, once scrolled to the nav's natural position. */
  z-index: 5;
  background: transparent;
}

.info-tabs.is-stuck {
  /* `top` is set inline by the script on this page (measures the header's
     real rendered height - it's vw-based, so a fixed px value here would
     only be right at one viewport width) - so it always sits flush against
     the header with no gap, regardless of the header's current height. This
     is just a sane fallback. */
  position: fixed;
  top: 78px;
  left: 0;
  right: 0;
  height: 65px;
  display: flex;
  align-items: center;
  background: var(--color-purple-sticky-menu-bg);
}

.info-tabs.is-stuck .info-tabs__pill {
  padding: 4px;
}

/* The nav's .container also matches ".page-hero_information .container"
   (the nav lives inside that hero section), inheriting its 2vw bottom
   padding - which makes the container taller than the 65px stuck bar and
   pushes the pill off-center (flush to the top). Neutralized while stuck
   so align-items:center gives equal space above and below the pill. */
.info-tabs.is-stuck .container {
  padding-bottom: 0;
}

.info-tabs.is-stuck .info-tabs__item {
  padding: 8px 22px;
}

.info-tabs__spacer {
  height: 0;
}

/* Baseline offset so a tab anchor jump (or a direct visit to
   #info-section-N) lands the section heading below the fixed header + the
   stuck .info-tabs strip instead of behind them. page-information.php's
   inline script overrides this per element with the exact measured
   header+nav height on load/resize (breakpoint-accurate); this value only
   covers the brief window before that script runs and the initial hash
   scroll on a cold page load. */
.information__row[id^="info-section-"] {
  scroll-margin-top: 170px;
}

.info-tabs__pill {
  /* Sits at the RTL start edge (right, below the hero description) on
     desktop per Figma - only mobile centers it (see @media 768px below). */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 6px;
  border-radius: 999px;
  background: var(--color-purple-sticky-menu-bg);
  overflow-x: auto;
}

.info-tabs__item {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.info-tabs__item:hover {
  color: var(--color-purple);
}

.info-tabs__item.is-active {
  background: var(--color-purple);
  color: var(--color-white);
  font-weight: 700;
  box-shadow: 0 6px 8px rgba(110, 42, 140, 0.3);
}

.information .container {
  padding-top: 16px;
  padding-bottom: 96px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

.information__row {
  display: flex;
  align-items: flex-start;
  gap: 85px;
}

.information__row--reverse {
  flex-direction: row-reverse;
}

.information__row-heading {
  flex: 0 0 32%;
  max-width: 392px;
  position: sticky;
  top: 160px;
}

.information__row-title {
  margin: 0 0 12px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: 700;
  color: var(--color-purple);
}

.information__row-divider {
  display: block;
  width: 48px;
  height: 4px;
  margin-bottom: 20px;
  border-radius: 2px;
  background: var(--color-orange);
}

.information__row-section-image {
  margin: 12px 0 20px;
}

.information__row-section-image img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

.information__row-desc {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.information__row-media {
  margin-top: 24px;
}

.information__row-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
}

.information__list {
  flex: 1 1 auto;
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* #info-section-1's list otherwise centers within its flex space, leaving
   a large gap between the cards and the container's true right edge -
   the same edge the sibling rows' headings sit flush against. Push it
   flush right instead so this row starts at the same point as the rows
   above/below it. The leftover slack moves to the heading's own left
   margin below, so it lands outside the heading (true left edge) instead
   of between the heading and the cards - keeping the heading-to-cards
   gap equal to the row's normal 85px gap, same as the other rows. */
#info-section-1.information__row--reverse .information__list {
  margin: 0;
}

#info-section-1.information__row--reverse .information__row-heading {
  margin-left: auto;
}

/* The scrollbar div is always in the markup, but Swiper (and the drag
   scrollbar it needs) is only initialized below the 768px breakpoint -
   on desktop this just shows the shared .swiper-scrollbar's line
   (:before) with nothing to scroll. Hidden here, restored in the mobile
   breakpoint below. */
.information__list .swiper-scrollbar {
  display: none;
}

/* The prev/next buttons flanking the mobile card carousel's scrollbar.
   Kept hidden on desktop (no swiper instance there to drive them - see
   informationListSwiperMode in main.js, which only inits below 768px). */
.information__list-nav {
  display: none;
}

.information__list-nav-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.information__list-nav-btn:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background-color: var(--color-purple);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 19l-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.information__list-nav-btn--next:before {
  transform: rotate(180deg);
}

.information__list-nav-btn.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* Desktop: the track is just a structural wrapper (Swiper needs a
   dedicated wrapper element below 768px, see the mobile block) — collapse
   it out of the flow so .information__card items lay out directly as
   .information__list's flex children, same as before it existed. */
.information__list-track {
  display: contents;
}
button.swiper-button-prev, button.swiper-button-next {
  position: absolute;
  display: inline-block;
  top: 45%;
  right: 0;
  left: auto;
  width: 42px;
  height: 42px;
  z-index: 1000;
}
button.swiper-button-prev {
  left: 0;
  right: auto;
}
button.swiper-button-disabled svg circle{
  fill: var(--color-white) !important;
  stroke: var(--color-purple_300) !important;
}
button.swiper-button-disabled svg path{
  fill: var(--color-purple_300) !important;
}
.information__card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 28px;
  background: var(--color-white);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.information__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px -4px rgba(24, 39, 75, 0.16), 0 8px 18px -6px rgba(24, 39, 75, 0.16);
}

.information__card-media {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
}

.information__card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.information__card-body {
  flex: 1 1 auto;
  min-width: 0;
}

.information__card-title {
  margin: 0 0 4px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: 700;
  color: var(--color-text);
}

.information__card-title a {
  color: var(--color-text);
  transition: color 0.2s ease;
}

.information__card-title a:hover {
  color: var(--color-purple);
}

.information__card-subtitle {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.information__card-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.information__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-button-small);
  line-height: var(--line-height-button-small);
  font-weight: 700;
  white-space: nowrap;
  color: var(--color-purple);
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.information__button:after {
  content: "\e903";
  font-family: "Shitufim";
  font-size: 14px;
  line-height: 1;
}

.information__button--download:after {
  content: "\e906";
}

.information__button--primary {
  background: var(--color-purple-sticky-menu-bg);
}

.information__button--primary:hover {
  background: var(--color-purple);
  color: var(--color-white);
}

.information__button--secondary {
  background: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-purple-sticky-menu-bg);
}

.information__button--secondary:hover {
  background: var(--color-purple);
  color: var(--color-white);
  box-shadow: inset 0 0 0 1px var(--color-purple);
}

/* Shared class (section-1.php, section-15.php, page-knowledge.php) — restored verbatim,
   not part of this page's rebuild, do not remove. */
.gradient-button.button:after {
  content: "\e903";
  font-family: "Shitufim";
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 0.8vw;
  margin-right: 1vw;
}
.gradient-button.button {
  background: var(--color-orange);
  /* Was rgb(211,81,40) -> rgb(127,0,127): both off-palette, the second an
     off-brand purple close to but not equal to --color-purple. */
  background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-purple) 63%);
  border-radius: 40px;
  color: var(--color-white);
  padding: 14px 30px 11px;
  font-size: 1.15rem;
  text-align: center;
  width: auto;
  margin: 1rem auto 0;
  min-height: 40px;
}

.videos__slider .embed-container {
  max-width: 400px;
  margin: 2rem 30px;
}

.page-hero_information {
  padding-top: 1vw;
}

.page-hero_information .container {
  padding-top: 0;
  padding-bottom: 2vw;
}

/* Figma: illustration on the left, title+description right-aligned in a
   column flush with the container's right edge (content div comes first
   in markup so it lands at the RTL inline-start/right side by default;
   the media div follows, landing at inline-end/left — no flex-direction
   override needed). */
.page-hero_information .information-hero {
  display: flex;
  align-items: center;
  gap: 3.5vw;
  text-align: right;
}

.page-hero_information .information-hero__content {
  flex: 1 1 auto;
  max-width: 39.5vw;
  margin-left: 3vw;
}

.hero__title-break-mobile {
  display: none;
}

.page-hero_information .hero__title h1 {
  max-width: 700px;
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
}

.page-hero_information .hero__description {
  width: auto;
  margin: 1.2vw 0 0;
}

.page-hero_information .information-hero__media {
  flex: 0 0 auto;
  width: 20.5vw;
  max-width: 295px;
}

.page-hero_information .information-hero__media img {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1240px) {
  .page-hero_information .information-hero__media {
    width: 24vw;
  }
  .page-hero_information .information-hero__content {
    max-width: 50vw;
  }
}

@media (max-width: 768px) {
  .info-tabs{
    margin: 30px 0;
  }
  /* The 30px margin above is for the nav's normal in-flow position. Once
     JS switches it to position:fixed (.is-stuck), that margin still shifts
     the fixed box down from its `top` value instead of being collapsed
     away - leaving a gap between the nav and the header above it. */
  .info-tabs.is-stuck {
    margin: 0;
  }
  /* Figma mobile (node 25:835): the tabs are a full-bleed #F1EBF6 strip,
     56px tall, not a floating rounded pill like desktop. The pill element
     keeps its name but is restyled as that strip; items scroll
     horizontally when they don't fit. */
  .info-tabs__pill {
    margin: 0;
    width: 100%;
    max-width: none;
    justify-content: flex-start;
    border-radius: 0;
    padding: 6px 16px;
    min-height: 56px;
    background: var(--color-purple-sticky-menu-bg);
  }
  .info-tabs__item {
    padding: 10px 14px;
    font-size: 13px;
  }
  .info-tabs__item.is-active {
    padding: 12px 18px;
  }
  .information .container {
    padding-top: 0;
    padding-bottom: 88px;
    gap: 48px;
  }
  .information__card-media{
    display: none;
  }
  .information__row,
  .information__row--reverse {
    flex-direction: column;
    gap: 24px;
    margin-bottom: 3rem;
  }
  .information__row-heading {
    position: static;
    max-width: none;
    flex-basis: auto;
  }
  /* Figma mobile (node 25:300): the only illustration on the page is the
     hero one - the per-section images that sit in each row's heading on
     desktop are dropped entirely on mobile. */
  .information__row-section-image,
  .information__row-media {
    display: none;
  }
  .information__row-title {
    font-size: 24px;
    line-height: 1.3;
  }
  .information__row-desc {
    font-size: 14px;
    line-height: 1.4;
  }
  /* Each row's card list becomes a swipeable carousel on mobile (Swiper
     init scoped to this breakpoint in main.js, wrapperClass/slideClass
     pointed at these existing BEM names instead of the default
     swiper-wrapper/swiper-slide, so swiper.min.css's unconditional
     .swiper-wrapper{display:flex} rule never touches the desktop
     layout). */
  .information__list {
    display: block;
    position: relative;
    overflow: hidden;
  }
  .information__list-track {
    display: flex;
    gap: 16px;
  }
  /* The shared .swiper-scrollbar rule (used by other carousels on the
     site) is a fixed 29.42708vw - tuned for whatever narrower carousel
     it was originally built for, not this card carousel's full row
     width. Scoped override so the drag bar spans the same width as the
     cards above it, instead of looking off-center/too short. */
  .information__list .swiper-scrollbar {
    display: block;
    width: 100%;
  }
  .information__list-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
  }
  .information__list-nav .swiper-scrollbar {
    flex: 1 1 auto;
  }
  /* Figma mobile card (node 25:491): right-aligned content (not centered),
     20px bold title, 14px subtitle, and a pair of equal 44px pill buttons
     across the card's full width. */
  .information__card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 20px;
    flex-shrink: 0;
    width: 280px !important;
    font-size: var(--font-size-caption-mobile);
  }
  .information__card-actions {
    width: 100%;
    gap: 12px;
    margin-top: 8px;
  }
  .information__button {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
    font-size: var(--font-size-button-small);
    padding: 12px;
  }
  .information__card-subtitle {
    font-size: 14px;
    line-height: 1.4;
  }
  .page-hero_information .container {
    padding-top: 0;
    padding-bottom:0;
  }
  .page-hero_information .information-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6vw;
  }
  .page-hero_information .information-hero__content {
    max-width: none;
  }
  .page-hero_information .hero__title h1 {
    font-size: 35px;
    line-height: 1.2;
    margin-bottom: 1.2vw;
  }
  .hero__title-break-mobile {
    display: block;
  }
  /* Figma mobile hero description (node 25:302): 14px muted gray, centered,
     kept narrow (~273px in the 360px frame) so it wraps like the design. */
  .page-hero_information .hero__description {
    text-align: center;
    margin: 12px auto 0;
    max-width: 300px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--color-text-secondary);
  }
  .page-hero_information .information-hero__media {
    width: 43vw;
    max-width: 160px;
  }
}

.news .container {
  padding-top: 5.72917vw;
  padding-bottom: 8.95833vw;
}

.news__list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: -2.57813vw -1.9974vw;
}

.news__list .updates__card {
  margin: 2.57813vw 1.9974vw;
  width: calc(25% - 3.99479vw);
}

.page-hero_news .container {
  padding-bottom: 20.05208vw;
}

.page-hero_news .page-hero__image {
  width: 12.1875vw;
  height: 8.64583vw;
  right: -1.92708vw;
  bottom: 7.8125vw;
}

@media (max-width: 768px) {
  .news .container {
    padding-top: 6vw;
  }
  .news__list {
    margin: -3.6vw 0;
  }
  .news__list .updates__card {
    margin: 3.6vw 8.4vw;
    width: calc(100% - 16.8vw);
    padding: 10.26667vw 7.46667vw;
    min-height: 98.66667vw;
  }
  .news__list .updates__card p {
    margin-bottom: 5.86667vw;
    line-height: calc(35 / 29);
  }
  .news__list .updates__title {
    margin-bottom: 0.26667vw;
  }
  .news__list .updates__link {
    margin-top: 10vw;
  }
  .news__list .updates__link:before {
    font-size: 3.46667vw;
  }
  .page-hero_news .container {
    padding-bottom: 35.2vw;
  }
  .page-hero_news .page-hero__image {
    width: 31.2vw;
    height: 22.13333vw;
    right: -3.6vw;
    bottom: 10.13333vw;
  }
}

.article .container {
  padding-bottom: 4.94792vw;
}

.article__content, .article__share {
  width: 40.98958vw;
  margin: 0 auto;
}

.article__content {
  margin-bottom: 1.92708vw;
}

.article__content h1 {
  text-align: center;
  font-size: 3.64583vw;
  margin-bottom: 1.61458vw;
}

.article__content h1 + h3 {
  margin-top: -1.45833vw;
}

.article__content h3 {
  margin-bottom: 1.61458vw;
  text-align: center;
  font-weight: 400;
  font-size: var(--font-size-h4);
  line-height: calc(30 / 23);
}

.article__content p {
  margin-bottom: 1.61458vw;
  line-height: calc(30 / 18);
}

.article__content h1 + .wp-block-image, .article__content h1 .wp-block-video, .article__content h1 .wp-block-embed,
.article__content h2 + .wp-block-image,
.article__content h2 .wp-block-video,
.article__content h2 .wp-block-embed,
.article__content h3 + .wp-block-image,
.article__content h3 .wp-block-video,
.article__content h3 .wp-block-embed {
  margin-top: 0;
}

.article__content a {
  color: var(--color-red_300);
}

.article__content .wp-block-embed__wrapper {
  aspect-ratio: 16 / 9;
}

.article__content .wp-block-embed__wrapper iframe {
  width: 100%;
  height: 100%;
  border-radius: 0.52083vw;
}

.article__content .wp-block-image, .article__content .wp-block-video, .article__content .wp-block-embed {
  display: block;
  position: relative;
  z-index: 2;
  margin-bottom: 2.70833vw;
  margin-top: 0.72917vw;
  font-size: 0;
}

.article__content .wp-block-image:before, .article__content .wp-block-video:before, .article__content .wp-block-embed:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0.20833vw;
  left: 0;
  right: -2.65625vw;
  bottom: -2.65625vw;
  background: url("../img/shadow-image.png") left top/100% 100% no-repeat;
}

.article__content .wp-block-image img, .article__content .wp-block-image video, .article__content .wp-block-video img, .article__content .wp-block-video video, .article__content .wp-block-embed img, .article__content .wp-block-embed video {
  width: 100%;
  border-radius: 0.52083vw;
}

.article__content .wp-block-file a:not(.wp-block-file__button) {
  display: none;
}

.article__content .wp-block-file__button {
  font-size: 1em;
  position: relative;
  text-decoration: underline !important;
  color: var(--color-red_300) !important;
  background-color: transparent;
  padding: 0 1.61458vw 0 0;
}

.article__content .wp-block-file__button:hover {
  text-decoration: none !important;
}

.article__content .wp-block-file__button:before {
  content: "\e906";
  font-family: "Shitufim";
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 1.04167vw;
}

.article__video.fancybox:after {
  content: "";
  position: absolute;
  width: 4.375vw;
  height: 4.375vw;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  -webkit-transition: background-color 0.3s;
  -o-transition: background-color 0.3s;
  transition: background-color 0.3s;
  background: url("../img/ico-play.svg") center/cover no-repeat;
}

.article__video.fancybox:hover:after {
  background-color: rgba(0, 0, 0, 0.2);
}

.article__share-title {
  font-size: var(--font-size-button);
  margin-bottom: 0.72917vw;
}

.article__share-links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.article__share-links li {
  margin-left: 0.72917vw;
}

.article__share-links li:last-child {
  margin-left: 0;
}

.article__share-links button {
  width: 2.13542vw;
  height: 2.13542vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 1px solid var(--color-black);
  border-radius: 50%;
}

.article__share-links button:hover {
  border-color: var(--color-red_300);
}

.article__share-links button:hover img {
  -webkit-filter: invert(9%) sepia(100%) saturate(6144%) hue-rotate(24deg) brightness(94%) contrast(130%);
  filter: invert(9%) sepia(100%) saturate(6144%) hue-rotate(24deg) brightness(94%) contrast(130%);
}

.article__share-links img {
  max-width: 60%;
  max-height: 60%;
}

@media (max-width: 1240px) {
  .article__content, .article__share {
    width: 62.5vw;
  }
  .article__content h1 {
    font-size: var(--font-size-h2);
  }
  .article__content h3 {
    font-size: var(--font-size-h4);
  }
  .article__share-title {
    font-size: var(--font-size-h5);
  }
  .article__share-links a {
    width: 3.125vw;
    height: 3.125vw;
  }
}

@media (max-width: 768px) {
  .article .container {
    padding-top: 11.73333vw;
    padding-bottom: 14.13333vw;
  }
  .article__content, .article__share {
    width: 91.5vw;
  }
  .article__image, .article__video {
    margin-top: 3.06667vw;
    margin-bottom: 11.6vw;
    border-radius: 1.33333vw;
    -webkit-box-shadow: 4vw 2.4vw 7.33333vw 0 rgba(0, 0, 0, 0.16);
    box-shadow: 4vw 2.4vw 7.33333vw 0 rgba(0, 0, 0, 0.16);
  }
  .article__image:before, .article__video:before {
    display: none;
  }
  .article__image img,
  .article__image iframe, .article__video img,
  .article__video iframe {
    border-radius: 1.33333vw;
  }
  .article__video.fancybox:after {
    width: 15.46667vw;
    height: 15.46667vw;
  }
  .article__content {
    padding-bottom: 16vw;
    margin-bottom: 0;
  }
  .article__content h1 {
    font-size: 10.66667vw;
  }
  .article__content h1 + h2,
  .article__content h1 + h3 {
    margin-top: -6.53333vw;
  }
  .article__content h1,
  .article__content h2,
  .article__content h3 {
    margin-bottom: 8.4vw;
  }
  .article__content h3 {
    font-size: var(--font-size-body-mobile);
  }
  .article__content p {
    line-height: calc(52 / 32);
    margin-bottom: 6.53333vw;
  }
  .article__file {
    display: table;
    margin: 10.26667vw auto 0;
    font-size: var(--font-size-caption-mobile);
    padding-right: 6.13333vw;
  }
  .article__file:before {
    font-size: 4.53333vw;
  }
  .article__share {
    padding-top: 10.26667vw;
    padding-bottom: 13.86667vw;
    position: relative;
    z-index: 2;
  }
  .article__share:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    right: -10vw;
    left: -10vw;
    border-top: 1px solid var(--color-gray_400);
    border-bottom: 1px solid var(--color-gray_400);
  }
  .article__share-title {
    font-size: var(--font-size-body-mobile);
    text-align: center;
    margin-bottom: 5.2vw;
  }
  .article__share-links {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
  .article__share-links li {
    margin-left: 3.73333vw;
  }
  .article__share-links a {
    width: 11.2vw;
    height: 11.2vw;
  }
  .article__share-links img {
    min-width: 50%;
    min-height: 50%;
  }
}

.partners-popup {
  direction: rtl;
  display: none;
  position: absolute;
  padding: 0;
  z-index: 100;
  width: 45.78125vw;
  background-color: var(--color-white);
  border-radius: 0.52083vw;
  -webkit-box-shadow: 0 0.15625vw 0.78125vw rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.15625vw 0.78125vw rgba(0, 0, 0, 0.1);
}

.partners-popup__logo {
  height: 6.19792vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  border-bottom: 1px solid var(--color-gray_400);
}

.partners-popup__logo img {
  max-height: 80%;
  -o-object-fit: scale-down;
  object-fit: scale-down;
}

.partners-popup__description {
  padding: 1.5625vw 3.64583vw;
  border-bottom: 1px solid var(--color-gray_400);
  line-height: calc(30 / 18);
}
.overlay_new_pop .partners-popup__description{
  padding: 1.5625vw 1.64583vw;
  border-bottom: 1px solid var(--color-gray_400);
  line-height: calc(30 / 18);
  display: flex;
  justify-content: space-between;
}
.overlay_new_pop .partners-popup__contacts {
  list-style: none;
  padding: 2.13542vw 0 2.13vw 4.5vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
a.close_button {
  /* margin-left: 1vw; */
  position: absolute;
  left: 1vw;
  top: 1vw;
}
.overlay_new_pop .partners-popup__description div{
  flex: 0 0 48%;
}
.overlay_new_pop .partners-popup__description div p{
  width: 95%;
}
.overlay_new_pop .partners-popup__description div:first-child{
  border-left: 1px solid var(--color-gray_400);
}
.partners-popup__description h3 {
  font-size: var(--font-size-button);
  font-weight: 700;
  margin: 1.51042vw 0 0.3125vw;
}

.partners-popup__description h3:first-child {
  margin-top: 0;
}

.partners-popup__contacts {
  list-style: none;
  padding: 2.13542vw 3.64583vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.partners-popup__contacts li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
}

.partners-popup__contacts li:before {
  margin-left: 0.41667vw;
  font-family: "Shitufim", sans-serif;
}

.partners-popup__contacts a {
  color: var(--color-black);
}

.partners-popup__contacts a:hover {
  color: var(--color-red_300);
}

.partners-popup__location:before {
  content: "\e907";
  font-size: 1.1vw;
}

.partners-popup__email:before {
  content: "\e905";
  font-size: 0.85vw;
}

.partners-popup__tel:before {
  content: "\e909";
  font-size: 1.55vw;
}

.partners-popup__url:before {
  content: "\e90a";
  font-size: 1.06vw;
}

.page-hero_partners .page-hero__description {
  width: 32vw;
}

.page-hero_partners .page-hero__image {
  right: -5.15625vw;
  bottom: 5.05208vw;
  width: 23.17708vw;
  height: 18.28125vw;
}

@media (max-width: 1240px) {
  .overlay_new_pop .partners-popup__description{
    flex-direction: column;
    padding: 0 4.64583vw;
  }
  a.close_button {
    /* margin-left: 1vw; */
    position: absolute;
    left: 2vw;
    top: 2vw;
}
.overlay_new_pop .partners-popup__description div p {
    width: 92%;
}
.overlay_new_pop .partners-popup__description div {
    margin-top: 4vw;
}
  .overlay_new_pop .partners-popup__description div:first-child {
    border-bottom: 1px solid var(--color-gray_400);
    border-left: unset !important;
  }
  .partners-popup {
    width: 65vw;
  }
  .partners-popup__description h3 {
    font-size: var(--font-size-caption);
  }
}

@media (max-width: 768px) {
  .partners-popup {
    width: 88vw;
    border-radius: 1.33333vw;
  }
  .partners-popup__logo {
    height: 23.06667vw;
  }
  .partners-popup__description {
    padding: 6.8vw 5.06667vw;
  }
  .partners-popup__description h3 {
    font-size: var(--font-size-body-mobile);
    line-height: calc(40 / 31);
    margin: 0.8vw 0 3.06667vw;
  }
  .partners-popup__description p {
    font-size: var(--font-size-body-mobile);
    line-height: calc(34 / 30);
  }
  .partners-popup__contacts {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 4vw 6.66667vw;
    font-size: var(--font-size-caption-mobile);
  }
  .partners-popup__contacts li {
    margin: 1.86667vw;
  }
  .partners-popup__contacts li:before {
    margin-left: 1.33333vw;
    line-height: 0;
  }
  .partners-popup__location {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1;
  }
  .partners-popup__location:before {
    font-size: 3.46667vw;
  }
  .partners-popup__email {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
  }
  .partners-popup__email:before {
    font-size: 2.66667vw;
  }
  .partners-popup__tel {
    -webkit-box-ordinal-group: 4;
    -ms-flex-order: 3;
    order: 3;
  }
  .partners-popup__tel:before {
    font-size: 5.33333vw;
  }
  .partners-popup__url {
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4;
  }
  .partners-popup__url:before {
    font-size: 3.46667vw;
  }
  .page-hero_partners .container {
    padding-bottom: 41.86667vw;
  }
  .page-hero_partners .page-hero__description {
    width: 100%;
  }
  .page-hero_partners .page-hero__image {
    right: -3.46667vw;
    bottom: 12.66667vw;
    width: 42.13333vw;
    height: 32.8vw;
  }
}

.footer {
  /* Redesigned 2026-07-16 to match the new Figma footer (flat purple field +
     orange top accent border — replaces the old ellipse gradient blob below,
     which is superseded/removed). Shared .footer:before pattern-texture rule
     (declared jointly with .page:before near the top of this file) is left
     untouched — it's out of scope here since it also drives .page. */
  color: var(--color-white);
  background-color: var(--color-purple);
  border-top: 0.34722vw solid var(--color-orange);
  position: relative;
  overflow: hidden;
  padding: 2.98611vw 0 1.01852vw;
}

.footer a {
  color: var(--color-white);
}

/* Neutralize the shared .page/.footer background-pattern texture for the
   footer only — the new Figma footer is a flat solid color. Same specificity
   as the shared ".page:before, .footer:before" rule above; wins here because
   it comes later in the cascade. The shared rule itself is untouched so
   .page keeps its texture. */
.footer:before {
  background: none;
}

.footer__row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  row-gap: 2.98611vw;
  column-gap: 5.09722vw;
  margin-bottom: 1.76563vw;
}

html[dir="rtl"] .footer__row {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

.footer__col-title {
  font-family: var(--font-family-base);
  font-weight: 600;
  font-size: var(--font-size-caption);
  line-height: 1;
  color: var(--color-white);
  margin: 0 0 0.69444vw;
  text-align: right;
}

html[dir="ltr"] .footer__col-title {
  text-align: left;
}

.footer__subscription {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 24.02778vw;
  flex: 0 0 24.02778vw;
  max-width: 100%;
  text-align: right;
}

html[dir="ltr"] .footer__subscription {
  text-align: left;
}

.footer__subscription .inputs-wrapper, .join__form .inputs-wrapper{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  align-items: flex-end;
}
.join__form .inputs-wrapper{    flex-direction: row-reverse;
}
.footer__subscription .inputs-wrapper span, .join__form .inputs-wrapper span {
  display: block;
  /* width: 100%; */
}

.footer__subscription .inputs-wrapper span input, .join__form .inputs-wrapper span input {
  display: block;
  width: 100%;
}
.wpcf7 form.invalid .wpcf7-response-output{
  border-color: unset !important;
  border: none !important;
}
.wpcf7-not-valid-tip{
  color: white !important;
  margin-top: 0.5vw;
}
.footer__subscription .inputs-wrapper .w-50{
  width: calc(50% - 3vw);
}
.join__form .inputs-wrapper .w-50{
  width: calc(50% - 2vw);
}
html[dir="rtl"] .footer__subscription .inputs-wrapper .w-50{
  margin-right: 3vw;
}

html[dir="rtl"] .join__form .inputs-wrapper *{
 direction: rtl;
}
.join__form .inputs-wrapper .w-25{
  width: calc(25% - 2vw);
}
.contact_box{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2rem;
}
.contact_box img{
  width: 100%;
  max-width: 126px;
  height: auto;
  margin: 1rem auto 0.8rem;
} 
.contact_box h3{
  font-size: 1.6rem;
  font-weight: bold;
  margin: 1rem 0 1rem;
}
.contact_box .contact__name{
  font-weight: bold;
}
.contact_box p{
  font-size: 1.25rem;
  margin: 0.2rem 0;
}
.contact_box a{
  color: var(--color-gray_200);
}
.contact_box a:hover{
  color: var(--color-purple_300);
}

@media screen and (max-width: 768px) {
  .footer__subscription .inputs-wrapper .w-50, .join__form .inputs-wrapper .w-50, .footer__subscription .inputs-wrapper .w-25, .join__form .inputs-wrapper .w-25{
    width: 100%;
    margin-bottom: 1rem;
  }
}

.footer__subscription .inputs-wrapper .w-100{
  width: 100%;
}
.join__form .inputs-wrapper .w-100 {
  margin-top: 1.5vw;
  width: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
}

.footer__subscription br {
  display: none;
}

.footer__contact {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 15.48611vw;
  flex: 0 0 15.48611vw;
  max-width: 100%;
  text-align: right;
}

html[dir="ltr"] .footer__contact {
  text-align: left;
}

.footer__contact-email {
  display: block;
  text-align: inherit;
  font-size: var(--font-size-caption-mobile);
  line-height: var(--line-height-caption-mobile);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer__contact-email:hover {
  color: var(--color-white);
}

/* Legal / Follow-Us / About-Us columns used to live inside a
   .footer__link-columns wrapper (its own nested flex row) so they visually
   grouped together while structurally different from Subscription/Contact.
   Figma's footer (node 1:6813) is 5 flat auto-width siblings under
   .footer__row instead, so each .footer__link-col is now sized directly -
   the wrapper is gone, .footer__row's own justify-content/gap spaces all
   5 columns evenly. */
.footer__link-col {
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  max-width: 100%;
  text-align: right;
}

html[dir="ltr"] .footer__link-col {
  text-align: left;
}

.footer__links {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.69444vw;
}

.footer__links a {
  font-size: var(--font-size-caption-mobile);
  line-height: var(--line-height-caption-mobile);
  color: rgba(255, 255, 255, 0.8);
}

.footer__links a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.footer__social-links {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  gap: 0.69444vw;
}

.footer__social-links a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end;
  gap: 0.5vw;
  font-size: var(--font-size-caption-mobile);
  line-height: var(--line-height-caption-mobile);
  color: rgba(255, 255, 255, 0.8);
}

html[dir="rtl"] .footer__social-links a {
  -webkit-box-pack: start;
  -ms-flex-pack: start;
  justify-content: flex-start;
}

.footer__social-links a:hover {
  color: var(--color-white);
}

.footer__social-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: 1.11111vw;
  height: 1.11111vw;
}

.footer__social-icon img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}

.footer__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 0.5vw 1.5vw;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 2.28542vw;
}

.footer__copyright,
.footer__credit {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
}

.footer__credit:hover {
  color: var(--color-white);
}

.subscription__title {
  margin-bottom: 0;
  font-weight: 600;
  font-size: var(--font-size-caption);
  line-height: 1;
}

.subscription__description {
  margin: 0.5vw 0 1.5vw;
  font-size: var(--font-size-caption-mobile);
  line-height: var(--line-height-caption-mobile);
  color: rgba(255, 255, 255, 0.8);
}

.subscription__form {
  width: 100%;
  margin: 0;
  display: block;
}

.subscription__form .inputs-wrapper {
  position: relative;
  display: block;
}

/* Contact Form 7 wraps each field's input in its own <p> (browser default
   margin ~1em) - invisible extra height below the visible pill that made
   the gap above "יצירת קשר" (the next footer column) look bigger than the
   gap below it, even though the row-gap value itself is the same on both
   sides. */
.subscription__form .inputs-wrapper p {
  margin: 0;
}

/* Contact Form 7's own plugin stylesheet normally keeps this spinner
   invisible until a submit is in flight - it isn't loaded here, so the
   spinner (an inline-block icon) sits fully visible-sized next to the
   submit button, adding invisible-looking empty height below the pill. */
.subscription__form .wpcf7-spinner {
  display: none;
}

.subscription__form .inputs-wrapper span {
  display: block;
}

.subscription__form input[type="email"],
.subscription__form input[type="text"],
.subscription__form .wpcf7-form-control:not(.wpcf7-submit) {
  width: 100%;
  height: 2.77778vw;
  min-height: 34px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 2.05556vw;
  color: var(--color-white);
  font-size: var(--font-size-caption-mobile);
  text-align: right;
  padding: 0 1.25vw 0 8.5vw;
}

html[dir="ltr"] .subscription__form input[type="email"],
html[dir="ltr"] .subscription__form input[type="text"],
html[dir="ltr"] .subscription__form .wpcf7-form-control:not(.wpcf7-submit) {
  text-align: left;
  padding: 0 8.5vw 0 1.25vw;
}

.subscription__form input::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.subscription__form input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.subscription__form input[type="submit"],
.subscription__form .wpcf7-submit,
.subscription__form .button {
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  height: 2.77778vw;
  min-height: 34px;
  margin: 0;
  padding: 0 1.5vw;
  border: none;
  border-radius: 2.05556vw;
  background-color: var(--color-orange);
  color: var(--color-white);
  font-weight: 700;
  font-size: var(--font-size-caption-mobile);
  white-space: nowrap;
}

html[dir="rtl"] .subscription__form input[type="submit"],
html[dir="rtl"] .subscription__form .wpcf7-submit,
html[dir="rtl"] .subscription__form .button {
  right: auto;
  left: 0;
}

.subscription__form .wpcf7-response-output {
  color: var(--color-white);
  margin-top: 0.5vw;
}

@media (max-width: 1240px) {
  .footer__row {
    row-gap: 6vw;
  }
  .footer__subscription,
  .footer__contact {
    -ms-flex-preferred-size: 45%;
    flex-basis: 45%;
  }
  /* .footer__link-col stays flex: 0 0 auto (base rule) - narrower than
     subscription/contact's 45%, so the 3 of them wrap onto their own
     shared line together once .footer__row wraps, without needing a
     grouping wrapper. .footer__row's own justify-content:space-between
     spaces that wrapped line the same way it spaces the others. */
}

@media (max-width: 768px) {
  .footer {
    /* Recomputed 2026-07-23 from Figma node 1:6531 (mobile footer) metadata:
       Container sits ~3.64px from the Footer frame's top edge and the first
       heading starts 31.43px into Container (~35px total to first text,
       vs. the previous 13.33333vw ≈ 48px - noticeably more top padding
       than the design has). Bottom: Copyright's container ends ~27px
       before the Footer frame's bottom edge, vs. the previous 6vw ≈ 21.6px. */
    padding-top: 9.72vw;
    padding-bottom: 7.5vw;
    overflow: hidden;
  }
  /* Mobile footer layout confirmed against Figma node 1:6531 (mobile Home
     frame 1:5049) via screenshot - it is its own distinct arrangement, not
     just the desktop row reflowed: Newsletter and Contact each get a full
     line; Legal + About-Us share one line side by side (Legal on the
     right, About-Us on the left, matching RTL row-reverse); Follow-Us
     (heading + a horizontal Facebook/Instagram pair, not the desktop's
     stacked list) gets its own line below that; everything is centered
     rather than right/left-aligned. `order` repositions Follow-Us after
     Legal/About-Us without touching DOM source order (which stays in the
     desktop RTL reading sequence: Legal, Follow-Us, About-Us, Contact,
     Newsletter). */
  .footer__row {
    row-gap: 40px;
    /* Base rule's justify-content:space-between only makes sense for the
       full-width single-item lines (Newsletter/Contact/Follow-Us). For the
       About+Legal pair sharing one line, space-between shoves them to the
       two edges of the row; centering keeps them close together (with just
       the column-gap between) while the pair as a whole stays centered. */
    justify-content: center;
    /* +5px over the base 5.09722vw (~19px at this width) between the
       About/Legal pair. */
    column-gap: 24px;
  }
  .footer__subscription,
  .footer__contact {
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
  .footer__subscription {
    order: 1;
    text-align: center;
  }
  /* The mobile Figma footer has no description line under "לקבלת עדכונים" -
     just the heading and the form. */
  .subscription__description {
    display: none;
  }
  .footer__contact {
    order: 2;
    text-align: center;
  }
  /* Figma mobile footer: אודותינו (About) sits on the left, משפטי (Legal) on
     the right - swapped from the desktop row's RTL reading order, so About
     gets the lower order number to land first (left) in this row-reverse
     wrapped line. */
  .footer__link-col--about {
    order: 3;
  }
  .footer__link-col--legal {
    order: 4;
  }
  .footer__link-col--social {
    order: 5;
    -ms-flex-preferred-size: 100%;
    flex-basis: 100%;
  }
  .footer__link-col {
    text-align: center;
  }
  .footer__col-title {
    text-align: center;
    /* Base rule hardcodes line-height:1, matching Figma's desktop Caption
       spec (100%) - but the mobile Caption variable (confirmed via
       get_variable_defs on node 1:6531: "Mobile/Caption/Mobile", Noto Sans
       Hebrew New Regular 14/lineHeight 1.3) wants 1.3 here instead. */
    line-height: var(--line-height-caption-mobile);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
  }
  .footer__links {
    gap: 10px;
  }
  .footer__links a,
  .footer__social-links a {
    font-size: 16px;
    line-height: 1.4;
  }
  .footer__contact-email {
    font-size: 16px;
    line-height: 1.6;
  }
  /* Figma mobile footer (node 25:424): "לקבלת עדכונים" is 18px bold, larger
     than the 14px column titles around it. */
  .subscription__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 16px;
  }
  .footer__copyright,
  .footer__credit {
    font-size: 12px;
    line-height: var(--line-height-caption-mobile);
  }
  .footer__links {
    align-items: center;
  }
  .footer__social-links {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    gap: 6vw;
  }
  .footer__social-icon {
    width: 15px;
    height: 15px;
  }
  .footer__bottom {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    padding-top: 6vw;
  }
  .footer__copyright,
  .footer__credit {
    width: 100%;
    text-align: center;
  }
  /* Figma mobile form (node 25:430 + the reference screenshot): one tall
     fully-rounded pill with the orange submit inset inside its left end. */
  .subscription__form input[type="email"],
  .subscription__form input[type="text"],
  .subscription__form .wpcf7-form-control:not(.wpcf7-submit) {
    height: 60px;
    padding: 0 20px 0 130px;
    border-radius: 999px;
    font-size: 16px;
  }
  .subscription__form input[type="submit"],
  .subscription__form .wpcf7-submit,
  .subscription__form .button {
    height: 52px;
    min-width: 110px;
    margin: 4px;
    padding: 0 24px;
    border-radius: 999px;
    font-size: 16px;
  }
}

@media (min-width: 1024px) {
  .partners-popup__img img{
    width: 1.3vw;
    height: auto
  }
  .sticky-menu.showsticky{
    display: flex;
  }
  .sticky-menu{
    display: none;
  }
}
@media (max-width: 1024px) {
  .partners-popup__img img{
    width: 6vw;
    height: auto;
    margin-left: 1.5vw;
  }
  .sticky-menu.showstickymob{
    display: flex;
  }
  .sticky-menu{
    display: none;
  }
}
a.read-more {
  color: var(--color-orange);
}

html[dir="rtl"] .read-more.he {
  display: block;
}
html[dir="rtl"] .read-more.en {
  display: none;
}

html[dir="ltr"] .read-more.he {
  display: none;
}
html[dir="ltr"] .read-more.en {
  display: block;
}
.readless{
  display: none;
  color: var(--color-orange);
}
.no_margin{
  margin-bottom: unset !important;
}

.page-template-views .information__desc{
  text-align: center;
  font-weight: 500;
  font-size: 2vw;
  max-width: 985px;
  margin: 1vw auto 2.76042vw;
  line-height: 1.5;
}



@media (max-width: 1024px) {
  .information__desc{
    font-size: var(--font-size-h2);
    margin-bottom: 6.76042vw;
    margin-top: 4vw;

  }

}
@media screen and (max-width: 1200px) {
  li#menu-item-304 > a {
    border-radius: 20px;
  }
  }


/* #Tabs
================================================== */
.tabs .tab-panel {
  height: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
  display: none;
  transition: opacity .8s ease, visibility .8s ease;
}

.tabs .tab-panel.active {
  height: auto;
  opacity: 1;
  visibility: visible;
  display: block
}
@media (min-width: 1024px) {
  .partners-popup__img span{
    margin-top: auto;
    margin-right: 0.4vw;
  }
  .close {
    position: absolute;
    top: 1vw;
    left: 1vw;
    font-family: cursive;
    font-size: var(--font-size-h3);
    cursor: pointer;
  }
}

.partners-popup h2{
  padding-top: 2vw;
  text-align: center;
  margin: auto;
}


/* ::-webkit-scrollbar {
  -webkit-appearance: none;
} */

@media (max-width: 1024px) {
  .close {
    position: absolute;
    top: 3vw;
    left: 3vw;
    font-family: cursive;
    font-size: 6.5vw;
    cursor: pointer;
  }
  #partners-popup span{
    font-size: 4vw;
  }
  .partners-popup h2{
    padding-top: 6vw;
    text-align: center;
    margin: auto;
    font-size: var(--font-size-h2);
  }
}
::-webkit-scrollbar:vertical {
width: 6px;
} 

::-webkit-scrollbar:horizontal {
height: 5px;
}

::-webkit-scrollbar-thumb {
background-color: var(--color-purple);
border-radius: 16px;
border: 1px solid var(--color-purple);
}

::-webkit-scrollbar-track {
border-radius: 16px;
background-color:var(--color-white);
}


html[dir="ltr"] .partners-popup__description{
  direction: ltr;
}
html[dir="ltr"] .close {
  right: 1vw;
}


.indication__circle textPath {
  animation: run 20s 0s infinite linear;
}
.hero__arrow textPath {
  animation: run 20s 0s infinite linear;
}
.split__buttons.center{
  justify-content: center;
}

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transition: opacity 500ms;
  display: none;
  z-index: 10;
  background: #ffffffd6;
  overflow: hidden;
  justify-content: center;
}
.overlay.showbb{
  display: flex !important;
}
.overlay.showbb .partners-popup{
  display: block !important;
  top: 15%;
}
.popup_shown{
  overflow: hidden;
}


.play-icon {
    display: block !important;
    position: absolute;
    z-index: 10;
    top: 0;
    bottom: 0;
    top: auto;
    right: 0;
    margin: 1%;
    width: 4%;
    position: fixed;
}

.play-icon img{
    max-width: 3vw;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media(max-width: 1024px){

    .play-icon img{
        max-width: 10vw;
    }
    .play-icon {
        width: 10%;
    }
}
.swiper-scrollbar{
  cursor: pointer !important;
}

@media screen and (min-width: 768px) {
  .collapsible ul li{
          margin-bottom: 0.5vw;
  }
  .swiper-scrollbar {
    height: 2vw;
}
.swiper-scrollbar:before {
    top: 6%;
}
html[dir="rtl"] .join__form .inputs-wrapper .w-50{
  margin-right: 2vw;
}
}


.cards__section {
  padding: 4.89583vw 0 7.8125vw;
  border-top: 1px solid var(--color-gray_300);
}

@media screen and (max-width: 768px) {
  .cards__section {
    padding: 8vw 0 19.73333vw;
    border-top: 0;
  }
}

.cards__section .container {
  width: 100%;
  padding: 0 5.20833vw 0 5.78125vw;
}

@media screen and (max-width: 768px) {
  .cards__section .container {
    padding: 0 6vw;
  }
}

.cards__section-title {
  font-size: var(--font-size-h2);
  font-weight: 700;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .cards__section-title {
    font-size: var(--font-size-h2-mobile);
  }
}

.cards__section-text {
  text-align: center;
  font-size: var(--font-size-body);
  margin-top: 0.3125vw;
}

@media screen and (max-width: 768px) {
  .cards__section-text {
    font-size: var(--font-size-body-mobile);
    margin-top: 1em;
  }
}

.cards__section .cards__list {
  margin-top: 3.90625vw;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[4];
  grid-template-columns: repeat(4, 1fr);
  gap: 3.125vw 4.16667vw;
}

@media screen and (max-width: 768px) {
  .cards__section .cards__list {
    margin-top: 9.33333vw;
    padding: 0 6vw;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 3.33333vw;
  }
}
body:not(.page-template-page-when-to-consult) #behaviors.cards__section .card__item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    /* height:auto is required to override the shared `.cards__section
       .card__item { height: 25.88542vw }` (~373px) rule below - without it the
       cards inherit that fixed 373px and show large empty top/bottom gaps.
       With height:auto + min-height:0 each card hugs its content and the grid
       stretches every card in a row to the tallest, so rows stay even while
       being as short as the text allows. */
    height: auto;
    min-height: 0;
    padding: 1.5rem;
    border-radius: 30px;
    background: var(--color-white);
    box-shadow: 0 6px 14px -6px rgba(24, 39, 75, 0.12), 0 10px 32px -4px rgba(24, 39, 75, 0.10);
}
/* Tighter 30px gutters between the behaviour cards (was 3.125vw/4.16667vw =
   45px/60px at 1440 from the shared .cards__section .cards__list rule). */
#behaviors.cards__section .cards__list {
    gap: 30px;
}
body:not(.page-template-page-when-to-consult) #behaviors .card__item-icon{
  max-width: 3.80208vw;
  /* Was margin-top:-43px, which pulled the icon up so it straddled/sat above
     the card's top edge. 0 keeps the icon inside the box, per request. */
  margin: 0 auto 12px;
}
.cards__section .card__item {
  position: relative;
  background-color: var(--color-surface);
  border-radius: 0.52083vw;
  padding: 4.0625vw 2.08333vw 2.91667vw 0.625vw;
  height: 25.88542vw;
  -webkit-box-shadow: 1.45833vw 2.08333vw 1vw 0 rgba(0, 0, 0, 0.08);
          box-shadow: 1.45833vw 2.08333vw 1vw 0 rgba(0, 0, 0, 0.08);
}

@media screen and (max-width: 768px) {
  .cards__section .card__item {
    border-radius: 1.33333vw;
    padding: 10vw 6.4vw 18.66667vw 5.06667vw;
    height: auto;
    -webkit-box-shadow: 3.73333vw 5.33333vw 2vw 0 rgba(0, 0, 0, 0.08);
            box-shadow: 3.73333vw 5.33333vw 2vw 0 rgba(0, 0, 0, 0.08);
  }
}

.cards__section .card__item-icon {
  max-width: 3.80208vw;
  margin-bottom: 0.52083vw;
}

@media screen and (max-width: 768px) {
  .cards__section .card__item-icon {
    max-width: 13.33333vw;
    margin-bottom: 2.13333vw;
  }
}

.cards__section .card__item-title {
  font-size: var(--font-size-h5) !important;
  font-weight: 700;
  margin-bottom: 0.5em;
}

@media screen and (max-width: 768px) {
  .cards__section .card__item-title {
    /* Two bugs kept every card title on mobile at the desktop 20px:
       --font-size-h5-mobile is not a real token (the mobile scale stops at
       h4), so this declaration was invalid and dropped; and even valid it
       would have lost to the !important on the base rule above. Same fix the
       when-to-consult template already applies to itself further down - the
       mobile step for a card title is h4/18px (Figma node 1:5844). */
    font-size: var(--font-size-h4-mobile) !important;
    line-height: var(--line-height-h4-mobile);
  }
}

.cards__section .card__item-content p:not(:last-child) {
  margin-bottom: 1em;
}
[lang="ru-RU"] .wivlists__section .wivlists__items ul li::before{
  content: unset !important;
}

/* ==========================================================================
   Help / Response Directory — "מאגר המענים" (views/page-partners.php)
   Figma: node 1:4663 (desktop 1440) / 1:5158 (mobile 360), file
   ebKRH2xH6KaHfRLy7kvvrn, page תכנות.

   This restyles the page's hero + the LIVE help-post search/filter panel
   (the checkbox filters + free search + AJAX results already wired up via
   sections/section-4.php's markup conventions / custom-ajax.js /
   ajax_partners_filter() & ajax_partners_search()). Every selector below is
   scoped to either `.page-hero_partners` / `.help-directory` (markup that
   only exists on this template) or the `.page-template-page-partners` body
   class WordPress adds for this template specifically — none of it touches
   the shared bare selectors (.partners__group, .form__checkbox,
   .partners__filters-cell, .partners-result__*, .group__title, etc.) that
   sections/section-4.php also uses, since that section can be placed on
   other pages via the numbered-section system (list_of_sections) and must
   keep rendering unchanged there.
   ========================================================================== */

/* Hero container spacing (moved here from page-partners.php's old inline
   <style> block — same rule, same scope, just out of the template file). */
@media screen and (min-width: 1024px) {
  .page-template-page-partners .page-hero {
    padding-top: unset !important;
  }
  .page-template-page-partners .page-hero .container {
    padding-top: 1.35417vw;
    padding-bottom: 10.22917vw;
  }
}

.page-hero_partners .page-hero__title {
  max-width: 700px;
  margin: 0 auto 0.3125vw;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  font-weight: 700;
  color: var(--color-purple);
}

.page-hero_partners .page-hero__title-accent {
  display: inline;
  color: var(--color-orange);
}

.page-hero_partners .page-hero__description {
  max-width: 45vw;
  margin: 0 auto;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

@media screen and (max-width: 768px) {
  .page-hero_partners .page-hero__title {
    font-size: var(--font-size-h2-mobile);
    line-height: var(--line-height-h2-mobile);
    letter-spacing: normal;
  }
  .page-hero_partners .page-hero__description {
    max-width: 100%;
    font-size: var(--font-size-body-mobile);
  }
}

/* ---- Filter + search panel ---- */

.help-directory {
  position: relative;
  z-index: 1;
  padding-bottom: 4vw;
}

.help-directory__panel {
  background-color: var(--color-white);
  border-radius: 24px;
  box-shadow: var(--shadow-card);
  padding: 2.5vw 3vw 3vw;
}

.help-directory__search-form {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1vw 1.2vw;
}

.help-directory__search-label {
  flex: 0 0 auto;
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.help-directory__search-field {
  position: relative;
  flex: 1 1 260px;
}

.help-directory__search-input {
  width: 100%;
  height: 3.2vw;
  min-height: 44px;
  border: 1px solid rgba(81, 88, 101, 0.2);
  border-radius: 12px;
  padding: 0 3vw 0 1.2vw;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  color: var(--color-text);
  background-color: var(--color-white);
}

html[dir="rtl"] .help-directory__search-input {
  padding: 0 1.2vw 0 3vw;
}

.help-directory__search-input::placeholder {
  color: var(--color-text-muted);
}

.help-directory__search-icon {
  position: absolute;
  top: 50%;
  right: 1.1vw;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  background-color: var(--color-text-muted);
  -webkit-mask: url("../img/search-icon.svg") center / contain no-repeat;
  mask: url("../img/search-icon.svg") center / contain no-repeat;
  pointer-events: none;
}

html[dir="ltr"] .help-directory__search-icon {
  right: auto;
  left: 1.1vw;
}

.help-directory__submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5vw;
  height: 3.2vw;
  min-height: 44px;
  padding: 0 1.8vw;
  border: 0;
  border-radius: 12px;
  background-color: var(--color-purple);
  color: var(--color-white);
  font-family: var(--font-family-base);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  line-height: var(--line-height-button);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.help-directory__submit:hover,
.help-directory__submit:focus-visible {
  background-color: var(--color-orange);
}

.help-directory__filters-wrap {
  margin-top: 2vw;
}

.help-directory__filters {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.help-directory__groups {
  display: flex;
  align-items: flex-start;
  gap: 2vw;
  width: 100%;
}

.help-directory .partners__group {
  flex: 1 1 0;
  width: auto !important;
  margin: 0 !important;
  padding: 1.8vw 2vw !important;
  border-radius: 16px;
  background-color: var(--color-white);
  box-shadow: var(--shadow-card);
}

.help-directory .group__title {
  display: block;
  width: 100%;
  margin: 0 0 1.4vw;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h5);
  font-weight: 700;
  color: var(--color-text);
  cursor: default;
}

.help-directory .group__title:after {
  content: none;
}

.help-directory .partners__group-content {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9vw 1.5vw;
}

.help-directory .partners__filters-cell {
  flex: none;
  padding: 0;
}

.help-directory .form__checkbox {
  display: flex !important;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 !important;
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  color: var(--color-text);
}

.help-directory .form__checkbox:hover {
  color: var(--color-purple);
}

.help-directory .form__checkbox span {
  display: flex !important;
  align-items: center;
  gap: 0.55vw;
}

.help-directory .form__checkbox span:before {
  content: none !important;
}

.help-directory .form__checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: static !important;
  flex: none;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1.5px solid var(--color-text-muted);
  border-radius: 4px;
  background-color: var(--color-white);
  cursor: pointer;
}

.help-directory .form__checkbox input[type="checkbox"]:checked {
  border-color: var(--color-purple);
  background-color: var(--color-purple);
}

.help-directory .form__checkbox input:checked + span {
  color: var(--color-purple);
  font-weight: 700;
}

.help-directory__submit--filters {
  margin: 2.2vw auto 0;
  min-width: 14vw;
}

/* Mobile-only accordion chevron on each group title (JS toggles .is-open —
   see the <script> at the bottom of page-partners.php). Desktop always
   shows both groups expanded, matching the Figma desktop frame. */
.help-directory__group-title {
  position: relative;
}

@media screen and (max-width: 768px) {
  .help-directory__panel {
    padding: 6vw 4vw;
    border-radius: 16px;
  }

  .help-directory__search-form {
    gap: 3vw;
  }

  .help-directory__search-label {
    display: none;
  }

  .help-directory__search-input {
    height: 12vw;
    font-size: var(--font-size-body-mobile);
  }

  .help-directory__submit {
    height: 12vw;
    font-size: var(--font-size-body-mobile);
  }

  .help-directory__groups {
    flex-direction: column;
    gap: 3vw;
  }

  .help-directory .partners__group {
    width: 100% !important;
    padding: 0 !important;
    box-shadow: none;
    border-bottom: 1px solid rgba(81, 88, 101, 0.15);
    border-radius: 0;
  }

  .help-directory .group__title {
    padding: 4vw 6vw !important;
    margin: 0;
    text-align: start;
    font-size: var(--font-size-body-mobile);
  }

  .help-directory__group-title:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 6vw;
    width: 2.6vw;
    height: 2.6vw;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-70%) rotate(45deg);
    transition: transform 0.2s ease;
  }

  html[dir="ltr"] .help-directory__group-title:after {
    left: auto;
    right: 6vw;
  }

  .help-directory__group.is-open .help-directory__group-title:after {
    transform: translateY(-30%) rotate(225deg);
  }

  .help-directory .partners__group-content {
    display: none !important;
    padding: 0 6vw 4vw;
    grid-template-columns: 1fr;
    gap: 3vw;
  }

  .help-directory__group.is-open .partners__group-content {
    display: grid !important;
  }

  .help-directory .form__checkbox span {
    font-size: var(--font-size-caption-mobile) !important;
  }

  .help-directory__submit--filters {
    width: 100%;
    min-width: 0;
    margin-top: 5vw;
  }
}

/* ---- Disclaimer paragraph ---- */

.help-directory__disclaimer {
  max-width: 62vw;
  margin: 1.6vw auto 0;
  text-align: center;
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  line-height: var(--line-height-body);
  color: var(--color-text-muted);
}

@media screen and (max-width: 768px) {
  .help-directory__disclaimer {
    max-width: 100%;
    padding: 0 4vw;
    font-size: var(--font-size-caption-mobile);
  }
}

/* ==========================================================================
   When/Whether to Seek Help — "מתי והאם כדאי להתייעץ" (views/page-when-to-consult.php)
   Figma: node 1:4780 (desktop 1440) / 1:5836 (mobile 360), file
   ebKRH2xH6KaHfRLy7kvvrn, page תכנות.

   This page is assembled entirely from the existing numbered flexible
   sections (list_of_sections repeater / inc/switch-fields.php) — see
   figma-design-analysis.md §5. Row 1 = Section 1 (Centered Text Block,
   reused here as the H1+subtitle hero — no separate hero_* ACF field on
   this template), row 2 = Section 12 (Cards Grid, the 8-card
   "על מה חשוב להסתכל?" grid), row 3 = Section 11 (Regular Page Content,
   the bordered callout box), row 4 = Section 19 (Text with Button Group,
   the final question + external CTA button).

   Every rule below is scoped to the `.page-template-page-when-to-consult`
   body class WordPress adds automatically for this template file, so none
   of it touches the shared bare selectors (.explain*, .cards__section*,
   .card__item*, .post-content, .buttons__section*, .button__item,
   .gradient-border-button) that sections 1/11/12/19 also render on up to
   6 other page templates (page-home, page-additional, page-violence,
   page-sites, page-landing, page-knowledge) via the same list_of_sections
   system. .post-content in particular is also the theme's generic
   WYSIWYG-content class used well beyond the section system, so it is
   especially important this stays scoped by the body class ancestor.
   ========================================================================== */

/* ---- Row 1 — Section 1 used as the plain (no card-box) hero ----
   Base .explain__card renders a shadowed gray box (used elsewhere as a
   highlighted content block); the Figma hero has no box at all, just
   centered text on the page background, so we strip it here. */

.page-template-page-when-to-consult .explain .container {
  padding-top: 4vw;
  padding-bottom: 3vw;
}

.page-template-page-when-to-consult .explain__card {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  padding: 0;
  background-color: transparent !important;
  box-shadow: none;
  border-radius: 0;
  text-align: center;
}

.page-template-page-when-to-consult .explain__title {
  margin-bottom: 1vw;
  font-family: var(--font-family-base);
  font-size: var(--font-size-h2);
  line-height: var(--line-height-h2);
  letter-spacing: var(--letter-spacing-h2);
  font-weight: 700;
  color: var(--color-purple);
  text-align: center;
  /* Lets an editor-entered line break in the (plain-text) title field
     become a real line break without needing section-1.php's shared
     markup to change — see the two-tone accent rule right below. */
  white-space: pre-line;
}

/* Figma shows part of the hero title in orange, rest in purple. Relies on
   the existing sitewide .hero__title mark / .explain__title mark rule
   (see line ~3209) — the accent portion must be wrapped in a literal
   <mark>...</mark> tag inside the (plain-text) title field's value, same
   convention as the Home hero's accent word. A ::first-line-based version
   was tried here instead but reverted: it colors whatever text happens to
   render on the first line rather than the actual intended accent span,
   so a short title that fits on one line turned entirely orange. */

.page-template-page-when-to-consult .explain__description {
  margin: 0 auto;
  max-width: 45vw;
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-secondary);
}

@media screen and (max-width: 768px) {
  .page-template-page-when-to-consult .explain .container {
    padding-top: 8vw;
    padding-bottom: 6vw;
  }
  .page-template-page-when-to-consult .explain__title {
    font-size: var(--font-size-h2-mobile);
    line-height: var(--line-height-h2-mobile);
    letter-spacing: normal;
  }
  .page-template-page-when-to-consult .explain__description {
    max-width: 100%;
    font-size: var(--font-size-body-mobile);
  }
}

/* ---- Row 2 — Section 12 cards grid ("על מה חשוב להסתכל?") ----
   Base .cards__section already uses a 4-column desktop grid, which
   matches Figma's 2×4 layout exactly, so only color/shadow/radius/spacing
   need correcting here (base uses an old #F9F9F9 card + flat rgba shadow
   that pre-dates the --shadow-card token, and desktop row/column gaps
   were swapped relative to the new design). */
.page-id-188 .info-tabs{
  display: none;
}
.page-template-page-when-to-consult .cards__section {
  border-top: 0;
  padding: 2vw 0 4vw;
}

/* The shared .cards__section .container is full-bleed with asymmetric
   padding (0 5.20833vw 0 5.78125vw), which made the grid ~1276px wide and
   off-centre. Figma spans the 8 cards from x=102 to x=1337 in the 1440
   frame - 1235px centred - which is what the sitewide .container width
   already gives (85.42vw = 1230px), so this restores it for this page. */
.page-template-page-when-to-consult .cards__section .container {
  width: 85.42vw;
  /* Caps the grid at Figma's own width (4 x 287 cards + 3 x 29 gaps). Without
     it, 85.42vw keeps widening past ~1445px viewports while the cards stay
     capped at 287px, so all the extra space collects between them and the
     cards drift far apart on large monitors. */
  max-width: 1235px;
  padding: 0;
  margin: 0 auto;
}

.page-template-page-when-to-consult .cards__section-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-h3);
  line-height: var(--line-height-h3);
  font-weight: 700;
  color: var(--color-purple);
}

/* Fixed px, not vw: 4.16667vw/2.01389vw happen to equal Figma's 60px/29px
   at exactly 1440px, but keep growing past it - on a 1850px screen the
   column gap became 37px and the cards visibly drifted apart. */
.page-template-page-when-to-consult .cards__section .cards__list {
  gap: 60px 29px;
}

/* Figma card (node 1:4785): 287x232, 30px radius. padding-top is 0 because
   the icon badge is pulled up out of the card by its own negative margin
   below - the card's own top inset is the icon's 27px overhang plus the
   10px below it, not padding. Side padding 40px keeps the text column at
   Figma's 206px inside a 287px card. */
.page-template-page-when-to-consult .cards__section .card__item {
  position: relative;
  background-color: var(--color-white);
  border-radius: 30px;
  box-shadow: 0 6px 14px rgba(24, 39, 75, 0.12), 0 10px 32px rgba(24, 39, 75, 0.1);
  padding: 0 2.8125vw 2vw;
  height: auto;
  min-height: 232px;
  max-width: 287px;
  /* `margin: auto` (all sides) was centring each card vertically inside its
     grid row. Any row containing one card whose text needs more than 232px
     then showed an uneven gap - the shorter cards floated in the middle of
     the taller track instead of lining up. Horizontal centring only, so
     cards keep align-self:stretch and share one height per row. */
  margin: 0 auto;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-template-page-when-to-consult .cards__section .card__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px -4px rgba(24, 39, 75, 0.16), 0 8px 18px -6px rgba(24, 39, 75, 0.16);
}

/* Lets the icon straddle the card's top edge, matching the Figma badge
   treatment, without needing section-12.php's flat icon/title/content
   markup to change. Figma (group top 521 vs card top 548) puts exactly
   27px of the 58px badge above the card, then a 10px gap before the title.
   The circle and its orange outline are baked into the uploaded SVG, so no
   background/border is needed here. */
.page-template-page-when-to-consult .cards__section .card__item-icon {
  width: 58px;
  max-width: 58px;
  margin: -27px auto 10px;
}

/* Without this the inline <img> adds a few px of line-box descender space
   below it, so the badge measured 60px tall instead of 58 and pushed the
   title off Figma's 41px-from-card-top position. */
.page-template-page-when-to-consult .cards__section .card__item-icon img {
  display: block;
  width: 100%;
  height: auto;
}

.page-template-page-when-to-consult .cards__section .card__item-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: 700;
  color: var(--color-text);
}

.page-template-page-when-to-consult .cards__section .card__item-content,
.page-template-page-when-to-consult .cards__section .card__item-content p {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: var(--letter-spacing-body);
  color: var(--color-text-muted);
}

/* Figma offsets the body 38px from the title's top; the title's own line
   box is 24px (20px x 1.2), leaving a 14px gap. */
.page-template-page-when-to-consult .cards__section .card__item-content {
  margin-top: 14px;
}

@media screen and (max-width: 768px) {
  .page-template-page-when-to-consult .cards__section-title {
    font-size: var(--font-size-h3-mobile);
  }

  /* The unscoped desktop rule above sets this container to 85.42vw (~307px
     on a 360px phone) which is narrower than Figma's mobile cards. Here the
     inset is a flat 20px per side, giving the 320px-wide rows the design
     uses, and the list itself adds no further padding. */
  .page-template-page-when-to-consult .cards__section .container {
    width: auto;
    max-width: none;
    padding: 0 20px;
  }

  .page-template-page-when-to-consult .cards__section .cards__list {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 0;
  }

  /* Figma's mobile frame swaps the card layout from a stacked/centered
     card to a horizontal list row (icon on one side, title+description
     stacked on the other). Reflowed with CSS grid areas so the same flat
     icon/title/content markup from section-12.php can be rearranged
     without any template changes. */
  /* Mobile Figma (node 1:5841) is a different card entirely from desktop:
     a full-width horizontal row - text block beside a 49px inline icon,
     16px apart - with a 16px radius, a light border and a much flatter
     shadow. None of the desktop card's box treatment carries over, so the
     radius/border/shadow/width/padding are all restated here. */
  .page-template-page-when-to-consult .cards__section .card__item {
    display: grid;
    /* In RTL, grid column 1 is the right-hand one, so the icon area has to
       come first to sit on the right as it does in Figma. */
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "icon title"
      "icon content";
    align-items: start;
    column-gap: 16px;
    text-align: right;
    padding: 13px 21px;
    min-height: 0;
    max-width: none;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    box-shadow: 0 1px 1.5px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.1);
  }

  /* The desktop rule pulls the badge up out of the card (margin-top:-27px)
     so it straddles the top edge; on mobile it sits inline beside the text
     instead, vertically centred, so that offset has to be cleared. */
  .page-template-page-when-to-consult .cards__section .card__item-icon {
    grid-area: icon;
    align-self: center;
    margin: 0;
    width: 49px;
    max-width: 49px;
  }

  /* Two separate problems were keeping this at 20px:
     1. the previous value was var(--font-size-h5-mobile), which is not a
        real token - the mobile type scale stops at h4 - so the declaration
        was invalid and dropped;
     2. the shared base `.cards__section .card__item-title` sets its
        font-size with !important, so no amount of extra specificity here
        can win - matching it with !important is the only way to override.
     Figma (node 1:5844) wants 18px, i.e. the h4 mobile step. */
  .page-template-page-when-to-consult .cards__section .card__item-title {
    grid-area: title;
    font-size: var(--font-size-h4-mobile) !important;
    line-height: var(--line-height-h4-mobile);
    /* The shared base rule adds margin-bottom:0.5em (9px at 18px), which
       stacked on top of the 4px below to make a 13px gap. Zeroed so the
       content's own 4px is the entire title-to-text gap Figma specifies. */
    margin-bottom: 0;
  }

  .page-template-page-when-to-consult .cards__section .card__item-content {
    grid-area: content;
    margin-top: 4px;
    font-size: var(--font-size-caption-mobile);
    line-height: var(--line-height-caption-mobile);
  }
}

/* ---- Row 3 — Section 11 used as the bordered callout box ----
   sections/section-11.php has no class of its own on its <section>
   wrapper — only the inner `.post-content` div — so the box styling is
   applied directly to `.post-content`, still fully scoped by the page
   body class ancestor (`.post-content` alone is also this theme's
   generic WYSIWYG-content class, used well beyond the section system). */

.page-template-page-when-to-consult .post-content {
  max-width: 907px;
  margin: 2vw auto 4vw;
  /* 18px block padding lands the box at Figma's 134px total height around
     the 4-line, 24px-line-height copy (was 1.6vw = 23px, giving 144px). */
  padding: 18px 3vw;
  border: 1px solid var(--color-purple);
  border-radius: 12px;
  text-align: center;
  font-family: var(--font-family-base);
  /* Figma (node 1:4947): 20px bold, 1.2 line-height - the h5 step, not the
     17px body step this used to inherit. */
  font-size: var(--font-size-h5);
  font-weight: 700;
  line-height: var(--line-height-h5);
  color: var(--color-purple);
}

/* Figma wraps the callout copy at 668px inside the 907px box rather than
   letting it run the full width. */
.page-template-page-when-to-consult .post-content p {
  max-width: 668px;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile-only shorter wording (rendered by sections/section-11.php) - the
   desktop copy is the one held in ACF. */
.callout__mobile-copy {
  display: none;
}

@media screen and (max-width: 768px) {
  /* Figma mobile (node 1:6008): the box lines up with the cards - same 320px
     width and 20px page inset - with a 16px radius, 21px padding and a
     lighter 30%-opacity purple border. */
  .page-template-page-when-to-consult .post-content {
    width: auto;
    max-width: 320px;
    margin: 32px auto;
    padding: 21px;
    border-color: rgba(114, 43, 143, 0.3);
    border-radius: 16px;
    font-size: var(--font-size-h4-mobile);
    line-height: var(--line-height-h4-mobile);
  }
  /* Swap the long ACF copy for the short mobile wording. */
  .page-template-page-when-to-consult .post-content > p:not(.callout__mobile-copy) {
    display: none;
  }
  .page-template-page-when-to-consult .post-content .callout__mobile-copy {
    display: block;
    max-width: none;
    margin: 0;
  }
}

/* ---- Row 4 — Section 19 final question + external CTA button ----
   Figma's question text is dark/neutral (--color-text), not purple —
   confirmed against the design file, not assumed. The button is a plain
   purple pill outline with a leading arrow, not the shared reddish
   gradient .button__item/.gradient-border-button currently render (that
   gradient is left untouched for the other templates that use it). */

.page-template-page-when-to-consult .buttons__section {
  padding: 2vw 0 5vw;
}

.page-template-page-when-to-consult .buttons__section-title {
  font-family: var(--font-family-base);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-h4);
  line-height: var(--line-height-h4);
  color: var(--color-text);
  margin-bottom: 1.5vw;
}

.page-template-page-when-to-consult .buttons__section-text {
  font-family: var(--font-family-base);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text-secondary);
}

.page-template-page-when-to-consult .button__item {
  background: none;
  padding: 0;
}

/* Figma CTA (node 1:4941): 381x65 pill, fully rounded (35.6px), on a very
   pale purple tint rather than plain white. */
.page-template-page-when-to-consult .gradient-border-button {
  gap: 0.6vw;
  padding: 0.85vw 2.2vw;
  border: 1px solid var(--color-purple);
  background-color: var(--color-purple-light);
  border-radius: 35.6px;
  font-family: var(--font-family-base);
  font-size: var(--font-size-button);
  font-weight: var(--font-weight-button);
  color: var(--color-purple);
  min-width: 381px;
  min-height: 65px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.page-template-page-when-to-consult .gradient-border-button::before {
  content: "\e902";
  font-family: "Shitufim", sans-serif;
  font-size: 0.85vw;
  /* The button is a flex row and its label is an anonymous flex item at the
     default order:0, so this ::before would otherwise sit at the flex start
     - the right-hand side in RTL. order:1 moves the arrow after the label,
     putting it on the left as in Figma (node 1:4944, which sits at ml-0
     with the text offset to ml-27). */
  order: 1;
}

html[dir="ltr"] .page-template-page-when-to-consult .gradient-border-button::before {
  transform: rotate(180deg);
}

.page-template-page-when-to-consult .gradient-border-button:hover,
.page-template-page-when-to-consult .gradient-border-button:focus-visible {
  background-color: var(--color-purple);
  color: var(--color-white);
}

@media screen and (max-width: 768px) {
  .page-template-page-when-to-consult .buttons__section-title {
    font-size: var(--font-size-h4-mobile);
  }
  .page-template-page-when-to-consult .buttons__section-text {
    font-size: var(--font-size-body-mobile);
  }
  /* The desktop rule's min-width:381px is wider than a 360px phone, which
     forced the page to scroll sideways. Mobile Figma (node 1:5836) runs the
     button to the same 320px width as the cards instead. */
  /* .button__item is a flex item that otherwise shrinks to its label, which
     capped the button at 288px; letting it fill the row lets the button
     itself reach the same 320px as the cards and the callout. */
  .page-template-page-when-to-consult .button__item {
    width: 100%;
  }

  .page-template-page-when-to-consult .gradient-border-button {
    font-size: var(--font-size-body-mobile);
    font-weight: 700;
    padding: 14px 20px;
    min-width: 0;
    width: 100%;
    max-width: 320px;
    min-height: 65px;
    margin: 0 auto;
    box-sizing: border-box;
    text-align: center;
  }
}

/* ==========================================================================
   Inner-page heading scale
   --------------------------------------------------------------------------
   Applies to exactly six pages, by request:

     .page-template-page-information       /information-h2/
     .page-template-page-when-to-consult   /מתי-והאם-כדאי-להתייעץ/
     .page-template-page-violence          /מה-זאת-אלימות-בזוגיות-2/
     .page-template-page-story             /story/
     .page-template-page-partners          /partners/
     .page-about                           /about/ + its 3 language versions

   The scale:
     h1 (the page's first, large title)  52px / --font-size-h2, --color-purple,
                                         with any <mark> portion in --color-orange
     h2 (section headings)               30px / --font-size-h3, --color-purple

   WHY BY TAG AND NOT BY CLASS: the same class means different levels on
   different pages - .explain__title is the <h1> on when-to-consult but an
   <h2> section heading on violence and about, and .split__title is an h2 on
   both. Keying off the tag is the only way to size each page's real title
   correctly. h3 and below are deliberately untouched: they are component
   titles (information__card-title, the .count statistics on /about/, the
   sub-headings inside sections), not section headings.

   WHY .page-about FOR /about/: it shares page-template-page-additional with
   /מי-יכול-ה-לעזור-לי/ (page-id-4367), which is NOT in scope, so the template
   class alone would catch both. `page-about` is added by the body_class filter
   in functions.php, which lists the About page's post ID in each language -
   see that filter for why a class is needed instead of a single ID.

   Mobile uses the matching steps of the mobile scale (35px / 22px) rather
   than the desktop px values, so headings stay in proportion on a 375px frame.
   ========================================================================== */

.page-template-page-information main h1,
.page-template-page-when-to-consult main h1,
.page-template-page-violence main h1,
.page-template-page-story main h1,
.page-template-page-partners main h1,
.page-about main h1 {
  font-size: var(--font-size-h2);
  color: var(--color-purple);
}

.page-template-page-information main h1 mark,
.page-template-page-when-to-consult main h1 mark,
.page-template-page-violence main h1 mark,
.page-template-page-story main h1 mark,
.page-template-page-partners main h1 mark,
.page-about main h1 mark {
  color: var(--color-orange) !important;
  background: transparent;
}

/* The excluded h2s are not section headings:
   .hero__case-caption is the standfirst under the hero (20px by design),
   .story__year is the absolutely-positioned year badge in the timeline
   circles, .sr-only is visually hidden for screen readers, and
   .partners__item-title is the card title inside the partner directory
   (sized by the "Partners directory" block at the end of this file). */
.page-template-page-information main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
.page-template-page-when-to-consult main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
.page-template-page-violence main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
.page-template-page-story main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
.page-template-page-partners main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
.page-about main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title) {
  font-size: var(--font-size-h3);
  color: var(--color-purple);
}

@media screen and (max-width: 768px) {
  .page-template-page-information main h1,
  .page-template-page-when-to-consult main h1,
  .page-template-page-violence main h1,
  .page-template-page-story main h1,
  .page-template-page-partners main h1,
  .page-about main h1 {
    font-size: var(--font-size-h2-mobile);
  }

  .page-template-page-information main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
  .page-template-page-when-to-consult main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
  .page-template-page-violence main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
  .page-template-page-story main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
  .page-template-page-partners main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title),
  .page-about main h2:not(.hero__case-caption):not(.story__year):not(.sr-only):not(.partners__item-title) {
    font-size: var(--font-size-h3-mobile);
  }
}

/* Story page hero: tighten the gap between the hero and the timeline below.
   The shared .page-hero .container rule uses 18.22917vw, which grows with the
   viewport (233px at 1280, 262px at 1440, 350px at 1920); this page wants a
   fixed 150px instead. Scoped to the Story template only - every other
   .page-hero keeps the shared spacing.

   Desktop only: below 768px the shared formula already resolves to ~68px, so
   applying 150px there would enlarge the gap rather than reduce it. */
@media screen and (min-width: 769px) {
  .page-template-page-story .page-hero .container {
    padding-bottom: 150px;
  }
}

/* Story page headings.
   The h1 itself is already sized by the inner-page heading block above
   (.page-template-page-story main h1 -> 52px, purple); these two rules add
   the page-specific parts. */

/* Accent word in the hero heading. page-story.php wraps the first word of
   hero_title in <mark>. The shared `h1.page-hero__title mark` rule only
   clears the browser's default yellow background, so the colour is set here.
   !important matches the sitewide `.hero__title mark` rule's own use of it,
   which would otherwise win on other templates sharing this markup. */
.page-template-page-story .page-hero__title mark {
  background: transparent;
  color: var(--color-orange) !important;
  /* The shared `h1.page-hero__title mark` rule is a gradient-text treatment:
     background-clip:text plus a transparent text fill, so the glyphs show
     whatever background sits behind them. Its background resolves to nothing
     here, which rendered the accent word invisible - and because
     -webkit-text-fill-color wins over `color` when painting, setting the
     colour alone was not enough. Both have to be put back. */
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--color-orange);
}

/* Timeline step titles, previously 52px - larger than the h1 itself.
   Scoped to .story__event so the 20px .information__card-title h3s in the
   "סיכומי מפגשי רשת השותפות" card grid further down the page are not
   enlarged to 30px, which would break that grid. */
.page-template-page-story .story__event h3 {
  font-size: var(--font-size-h3);
  color: var(--color-purple);
}

@media screen and (max-width: 768px) {
  .page-template-page-story .story__event h3 {
    font-size: var(--font-size-h3-mobile);
  }
}

/* Story page, mobile spacing.
   Scoped to the Story template and to <=768px only - the shared rules these
   override are used by every other page and at every other width. */
@media screen and (max-width: 768px) {
  /* Timeline section: was 39.73333vw (149px at 375px). */
  .page-template-page-story .story .container {
    padding-top: 26px;
  }

  /* Breadcrumbs-to-heading gap: was 116px, made of three stacked pieces -
     the trail's own 10px margin-bottom, 21.5px of .page-hero padding-top and
     84px (22.4vw) on .page-hero .container. Zeroing the two paddings leaves
     the trail's margin as the single lever, set to the requested 20px, so
     the spacing is now stated in one place instead of three. */
  .page-template-page-story .breadcrumbs {
    margin-bottom: 20px;
  }
  .page-template-page-story .page-hero {
    padding-top: 0;
  }
  .page-template-page-story .page-hero .container {
    padding-top: 0;
  }
}

/* ==========================================================================
   About page hero - two-column, aligned to the reading edge
   --------------------------------------------------------------------------
   Was a centred stack: decorative sphere, then the heading, then a 432px
   centred paragraph. Now the heading sits in the leading column and the body
   copy in the trailing one, both flush to the reading edge, matching the
   supplied design.

   Scoped to .page-about rather than the template class: page-additional.php is
   shared with /מי-יכול-ה-לעזור-לי/ (page-id-4367), which uses the same
   .hero__title_wrap / .hero__description class names for a different hero and
   must keep its own layout. The class covers all four language versions -
   see the body_class filter in functions.php.
   ========================================================================== */

/* The sphere is already gone from page-additional.php; this is a safety net
   so the layout is still correct if the stylesheet is deployed ahead of the
   template. */
.page-about .hero__title_wrap .hero__title .img {
  display: none;
}

/* Mobile keeps the heading and body copy centred - the flush-right treatment
   belongs to the two-column desktop layout only, where the text sits against
   the column edge. Stated explicitly rather than left to inheritance so the
   two breakpoints read as one decision. */
@media screen and (max-width: 768px) {
  .page-about .hero__title_wrap .hero__title,
  .page-about .hero__title_wrap .hero__title h1,
  .page-about .hero__title_wrap .hero__description {
    text-align: center;
  }
}

@media screen and (min-width: 769px) {
  .page-about .hero__title_wrap .hero__title,
  .page-about .hero__title_wrap .hero__title h1,
  .page-about .hero__title_wrap .hero__description {
    text-align: right;
  }

  html[dir="ltr"] .page-about .hero__title_wrap .hero__title,
  html[dir="ltr"] .page-about .hero__title_wrap .hero__title h1,
  html[dir="ltr"] .page-about .hero__title_wrap .hero__description {
    text-align: left;
  }

  /* In RTL the first flex item lands on the right, so .hero__title needs no
     explicit ordering - it is already first in the markup. */
  .page-about .hero__title_wrap .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    gap: 5.5vw;
  }

  .page-about .hero__title_wrap .hero__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 42%;
            flex: 0 0 42%;
    max-width: 42%;
  }

  /* English needs a wider heading column than the other three.
     The orange opening phrase is the initiative name, and it is meant to sit
     on one line the way "קווים אדומים" does. "Drawing the Lines" measures
     494px at the 55px heading size, while 42% of the container is 459px at a
     1280px viewport - so it broke over two lines. 50% clears it down to
     roughly a 1160px viewport; below that the name wraps again, because the
     phrase is simply wider than the column at this type size. Only the
     English page is touched - the Hebrew, Arabic and Russian names are short
     enough to fit at 42%. */
  html[lang="en-GB"] .page-about .hero__title_wrap .hero__title {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
    max-width: 50%;
  }

  /* Releases the shared 432px fixed width so the copy fills the left column. */
  .page-about .hero__title_wrap .hero__description {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
            flex: 1 1 auto;
    width: auto;
    max-width: none;
  }
}

/* Statistics row reading order.
   .about_features is laid out `row-reverse`, which under RTL puts the first
   item on the left and runs left-to-right. The same declaration mirrors under
   LTR, so English and Russian showed the five figures in the opposite order to
   Hebrew and Arabic (measured at 1440px: the first item sat at x=0 in Hebrew
   and x=1148 in English). `row` under LTR gives all four languages the same
   left-to-right order. Scoped to the About page because section-7 is a shared
   section and other pages may rely on the mirrored order. */
html[dir="ltr"] .page-about .about_features {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

/* Inner-page h1 line height.
   --line-height-h2 is a fixed 45.36px, tuned in Figma for a single-line 52px
   heading. On the h1 - which wraps to two or three lines on most of these
   pages - 45.36px is below the 52px font size, so consecutive lines overlap
   and glyphs get clipped. Measured overflow on the Knowledge Centre h1:
   12px in Hebrew (Noto Sans Hebrew New), 19px in Arabic (brando-arabic),
   whose ascenders, descenders and diacritics need more room.
   A unitless ratio is used so it scales with the mobile heading step too. */
.page-template-page-information main h1,
.page-template-page-when-to-consult main h1,
.page-template-page-violence main h1,
.page-template-page-story main h1,
.page-template-page-partners main h1,
.page-about main h1 {
  line-height: 1.15;
}

html[lang="ar"] .page-template-page-information main h1,
html[lang="ar"] .page-template-page-when-to-consult main h1,
html[lang="ar"] .page-template-page-violence main h1,
html[lang="ar"] .page-template-page-story main h1,
html[lang="ar"] .page-template-page-partners main h1,
html[lang="ar"] .page-about main h1 {
  /* Measured on the Knowledge Centre h1: line-box overflow falls 12px -> 8px
     -> 3px -> 0 as the ratio goes 1.15 -> 1.3 -> 1.5 -> 1.8. 1.8 is far too
     loose for a heading; 1.4 clears the line overlap and leaves only a few px
     of glyph overshoot below the final line, which paints into the margin and
     is not clipped. 1.4 is also a normal heading ratio for Arabic. */
  line-height: 1.4;
}

/* ==========================================================================
   Partners directory (/partners/)
   --------------------------------------------------------------------------
   The tabbed partner-CPT directory restored in views/page-partners.php.
   Its old styles existed only in main.min.css, which is no longer enqueued,
   so the section is restyled here from scratch in the current design
   language: white cards on the shared surface, brand purple for titles and
   controls, the standard card shadow and 16px radius (same treatment as the
   Knowledge Centre cards).
   ========================================================================== */

.partners__section {
  padding: 1vw 0 6vw;
}

/* Category filter pills */
.partners__category {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 12px;
  margin: 0 0 40px;
  padding: 0;
}

.partners-switcher {
  display: inline-block;
  padding: 10px 22px;
  border: 1px solid var(--color-purple);
  border-radius: 40px;
  background: var(--color-white);
  color: var(--color-purple);
  font-family: var(--font-family-base);
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.partners-switcher:hover {
  background: var(--color-purple-light);
}

.partners-switcher.active {
  background: var(--color-purple);
  color: var(--color-white);
}

/* Card grid */
.partners__list {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.partners__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background: var(--color-white);
  border-radius: 16px;
  -webkit-box-shadow: var(--shadow-card);
          box-shadow: var(--shadow-card);
  padding: 28px 24px;
  color: var(--color-text);
  text-decoration: none;
  text-align: start;
  -webkit-transition: -webkit-transform 0.2s;
  transition: -webkit-transform 0.2s;
  -o-transition: transform 0.2s;
  transition: transform 0.2s;
  transition: transform 0.2s, -webkit-transform 0.2s;
}

.partners__item:hover,
.partners__item:focus-visible {
  -webkit-transform: translateY(-4px);
      -ms-transform: translateY(-4px);
          transform: translateY(-4px);
}

/* The markup order is title / logo / text (shared with the AJAX renders);
   the design wants the logo on top, so it is reordered visually. */
.partners__item .partners__info {
  -webkit-box-ordinal-group: 0;
      -ms-flex-order: -1;
          order: -1;
  min-height: 72px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 16px;
}

.partners__item .partners__info img {
  max-height: 72px;
  max-width: 160px;
  width: auto;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

.partners__item-title {
  font-size: var(--font-size-h5);
  line-height: var(--line-height-h5);
  font-weight: 700;
  color: var(--color-purple);
  margin-bottom: 8px;
}

.partners__item p {
  font-size: var(--font-size-body);
  line-height: 1.5;
  color: var(--color-text);
  margin: 0;
}

@media screen and (max-width: 1240px) {
  .partners__list {
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 768px) {
  .partners__section {
    padding: 4vw 0 12vw;
  }
  .partners__category {
    gap: 8px;
    margin-bottom: 24px;
  }
  .partners-switcher {
    padding: 8px 16px;
    font-size: var(--font-size-caption-mobile);
  }
  .partners__list {
    -ms-grid-columns: (1fr)[1];
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Partners hero spacing and alignment.
   Scoped to the Partners template: .hero .container and .hero__description
   are shared by several pages, and the previous round established that these
   hero tweaks are meant per-page, not sitewide. */
.page-template-page-partners .hero .container {
  /* Was 62px at this width (a vw value that grew with the viewport). */
  padding-bottom: 15px;
}

/* Heading and standfirst are both centred - the block is centred in the
   container and the text is centred within it. (An earlier revision pinned
   the standfirst flush to the inline start so it lined up with the heading;
   that was replaced by centring both.) */
.page-template-page-partners .hero__title,
.page-template-page-partners .hero__description {
  text-align: center;
}

.page-template-page-partners .hero__description {
  margin-right: auto;
  margin-left: auto;
}

/* Main navigation type size, desktop.
   The two halves of the nav bar were on different scales: the menu links
   inherited --font-size-button-small (14px) from .header__nav, while the
   language switcher sits outside that element and picked up 17px instead.
   Both are set to 16px here so the bar reads as one row.
   A literal 16px rather than a token: --font-size-caption happens to be 16px
   too, but naming the nav "caption" would be misleading, and this size is
   meant to track the nav, not that token.
   Desktop only - below 769px the burger menu has its own larger type. */
@media screen and (min-width: 769px) {
  .header__nav,
  .header__nav a,
  .header__language .form__select-button,
  .header__language .form__select-item,
  .header__language .form__select-item a {
    font-size: 16px;
  }
}

/* Anchor landing offset for the Story page row headings.
   The header is fixed (110px desktop / ~80px mobile) and this page also has
   a sticky tab bar, so a plain #anchor jump would leave the heading tucked
   underneath them. scroll-margin-top stops the scroll that much higher.
   Applies only where an id was actually rendered, so the ordinary headings
   on other templates are untouched. */
.page-template-page-story .information__row[id],
.page-template-page-story .information__row-title[id] {
  scroll-margin-top: 150px;
}

@media screen and (max-width: 768px) {
  .page-template-page-story .information__row[id],
  .page-template-page-story .information__row-title[id] {
    scroll-margin-top: 110px;
  }
}

/* ==========================================================================
   Mobile header + menu adjustments
   ========================================================================== */
@media screen and (max-width: 768px) {

  /* Logo raised from 48px to 55px.
     The selector has to be `.header .container .header__logo` (0,3,0) to
     match the existing mobile rule further up this file - a plain
     .header__logo (0,1,0) loses to it no matter how late it appears.
     The paired `.header .container .header__logo img { height: 100% }` rule
     up there means the image follows automatically, so only the anchor's
     height is set here.
     The container height is pinned to the 80px it already was, so nothing
     below the header moves: the mobile nav panel is positioned with a vw
     offset that assumes that height. The extra 7px of logo eats into the
     container's own 16px padding rather than growing the bar. */
  .header .container {
    grid-template-rows: auto;
    height: 80px;
  }

  .header .container .header__logo {
    height: 55px;
    width: auto;
  }

  /* The removed top-bar search button (see header.php) leaves grid column 3
     empty on purpose: the columns stay 44px / 1fr / 44px so the logo in
     column 2 remains optically centred rather than sliding toward the edge. */

  /* Menu type size: the page names inherited 14px from .header__nav while the
     language switcher and the search field were already at 16px. Levelling
     the links up so the whole panel is one size. */
  .nav__wrap .header__nav,
  .nav__wrap .header__nav a {
    font-size: 16px;
  }
}

/* ==========================================================================
   Help directory - search controls (all languages, LTR included)
   --------------------------------------------------------------------------
   Three defects seen on the English /who-can-help-me/ page:

   1. "Show results" wrapped onto two lines. The buttons compute to 114px and
      177px wide at font-size 20px, which fits the 11-character Hebrew label
      but not the longer Latin one. white-space:nowrap plus a width floor
      keeps every translation on one line.
   2. The submit button was rounded on one side only. The base rule sets
      border-radius:10px 0 0 10px for the RTL layout, where the button butts
      up against the search field; the LTR override at line ~4479 only
      mirrors that, so it stayed half-square in English too. Rounded on all
      four corners instead - it reads as a standalone control here.
   3. The free-search field needed more breathing room around its text.
   ========================================================================== */

.partners__search-button,
.help-directory__submit,
#partnerSimplySearch {
  white-space: nowrap;
  width: auto;
  min-width: 12vw;
  padding-left: 1.6vw;
  padding-right: 1.6vw;
}

/* The radius needs its own rule carrying an ID selector.
   The half-round corners come from `#partnerSimplySearch { border-radius:
   10px 0 0 10px }` - an ID, specificity (1,0,0) - so no class-based selector
   can override it however late it appears. Matching the ID here is what
   makes it win; the class selectors alongside cover the sibling buttons that
   get the same treatment from `.partners__search-button`. */
#partnerSimplySearch,
html[dir="ltr"] #partnerSimplySearch,
.partners__search-button,
html[dir="ltr"] .partners__search-button,
.help-directory__submit {
  border-radius: 10px;
}

/* Free-search field: more padding around the input.
   Measured first - the field already carried 11.5px / 21.3px, so the
   original 0.9vw/1.4vw here would have SHRUNK it (1.4vw = 20px at 1440).
   These values are set above what was there so the field genuinely gains
   room rather than losing it. */
.just-search .partners__filters input,
.help-directory__search-input,
#free-search input[type="text"] {
  padding: 1.1vw 2vw;
}

.tab__search-field,
.help-directory__search-field {
  padding: 0.3vw;
}

@media screen and (max-width: 768px) {
  .partners__search-button,
  .help-directory__submit,
  #partnerSimplySearch {
    min-width: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .just-search .partners__filters input,
  .help-directory__search-input,
  #free-search input[type="text"] {
    padding: 12px 16px;
  }
}

/* ==========================================================================
   Help directory controls - not tied to one page ID
   --------------------------------------------------------------------------
   The Hebrew page (page-id-4367) had its own hover treatment:

     .page-id-4367 #partnerSimplySearch:hover { background: --color-purple-light;
                                                color: --color-purple }

   Every translation is a separate post with its own ID - the English page is
   page-id-4471 - so none of them matched, and they fell through to the
   generic `.button_dark:hover`, turning grey (#6E7988) instead of the light
   purple (#faf5ff) Hebrew shows. Keying off the button instead of the page
   makes the hover identical in all four languages, and stops the next
   translated page from regressing the same way.
   ========================================================================== */

#partnerSimplySearch:hover,
#partnerSimplySearch:focus-visible,
.partners__search-button:hover,
.partners__search-button:focus-visible,
.help-directory__submit:hover,
.help-directory__submit:focus-visible {
  background-color: var(--color-purple-light);
  color: var(--color-purple);
}

/* "Free search" label pill.
   Wrapped onto two lines in English (87px wide, padding 0 0 0 10px - room on
   one side only). Symmetric padding plus nowrap keeps every translation on a
   single line; the label is a flex pill, so it grows to fit its text. */
/* Specificity has to match `html[dir="ltr"] .tab__search-field .on-top`
   (0,3,1), which sets padding: 0 0 0 10px - a plain `label.on-top` (0,1,1)
   loses to it and the pill keeps its one-sided padding. Both directions are
   covered so RTL and LTR get the same symmetric pill. */
html[dir="rtl"] .tab__search-field .on-top,
html[dir="ltr"] .tab__search-field .on-top,
.tab__search-field .on-top,
.help-directory__search-label {
  white-space: nowrap;
  padding: 0 18px;
  width: auto;
}

@media screen and (max-width: 768px) {
  html[dir="rtl"] .tab__search-field .on-top,
  html[dir="ltr"] .tab__search-field .on-top,
  .tab__search-field .on-top,
  .help-directory__search-label {
    padding: 0 14px;
  }
}

/* Filter checkbox grid - even spacing for long, wrapping labels.
   The grid had no row-gap at all (measured gaps: 0, 0, -1px), so rows sat
   flush against each other and the only separation came from each cell's
   6.4px padding. That reads fine in Hebrew, where every label is one line,
   but the English labels wrap to two and three lines ("Counseling and
   assistance in legal and medical procedures") and the rhythm collapses.
   A real row-gap plus top-aligned rows keeps the spacing even no matter how
   many lines a translation needs - which is what Arabic and Russian will
   need too. */
/* Columns, not a grid.
   As a 2-column grid, every row stretched to its tallest cell, so a
   one-line item sitting beside a four-line one inherited that height and the
   vertical rhythm broke - measured gaps of 88px, 16px, 16px down a single
   column. CSS columns flow the items independently, so each entry takes only
   the height its own text needs and the spacing between them is identical
   everywhere, whatever the translation's line count.
   break-inside stops an entry splitting across the column boundary. */
/* Must carry !important and match (0,2,0): three earlier rules force
   `display: grid !important` on this container
   (.search__wrapper .partners__group-content and two
   .help-directory .partners__group-content), so a plain class selector is
   ignored outright - which is why the layout never changed. */
.search__wrapper .partners__group-content,
.help-directory .partners__group-content,
.help-directory__group .help-directory__group-content,
.partners__group .partners__group-content {
  display: block !important;
  -webkit-columns: 2;
     -moz-columns: 2;
          columns: 2;
  -webkit-column-gap: 24px;
     -moz-column-gap: 24px;
          column-gap: 24px;
  grid-template-columns: none;
}

/* The mobile accordion opens the panel with
   `.help-directory__group.is-open ... { display: grid !important }` (0,3,0),
   so the open state needs its own matching override. */
.help-directory__group.is-open .partners__group-content,
.help-directory__group.is-open .help-directory__group-content {
  display: block !important;
}

/* The label is the visible box; the cell around it can be taller than its
   text. Spacing therefore goes on the label, not the cell, so the distance
   between two visible rows is exactly this value regardless of how many
   lines each entry wraps to. 16px matches the Hebrew page's rhythm. */
.partners__filters-cell,
.help-directory__cell {
  -webkit-column-break-inside: avoid;
     page-break-inside: avoid;
          break-inside: avoid;
  display: block;
  padding: 0;
  margin: 0 0 16px;
}

.partners__filters-cell:last-child,
.help-directory__cell:last-child {
  margin-bottom: 0;
}

/* Checkbox and its text aligned to the first line rather than centred on the
   whole block, so the box lines up with the label's first line on multi-line
   entries instead of floating at their vertical middle.
   Selector must be at least (0,2,0) to beat the existing
   `.partners__group .form__checkbox { align-items: center }`. */
.partners__group .form__checkbox,
.help-directory__group .form__checkbox,
.partners__filters-cell .form__checkbox,
.help-directory__cell .form__checkbox {
  align-items: flex-start;
  gap: 10px;
  line-height: 1.35;
}

.partners__group .form__checkbox input,
.help-directory__group .form__checkbox input,
.partners__filters-cell .form__checkbox input,
.help-directory__cell .form__checkbox input {
  flex: 0 0 auto;
  margin-top: 2px;
}

@media screen and (max-width: 768px) {
  .partners__group-content,
  .help-directory__group-content {
    row-gap: 12px;
    column-gap: 16px;
  }
}

/* ==========================================================================
   Help directory - breadcrumb / panel overlap, all languages
   --------------------------------------------------------------------------
   The treatment that tucks the breadcrumb trail inside the white panel was
   written as `.page-id-4367 ...` - the Hebrew page. Every translation is its
   own post (English 4471, Arabic 4480, Russian 4484), so none of them
   matched: their trail sat 17px lower, outside the panel, while Hebrew's sat
   at y=79 inside it.

   Re-scoped to the template instead of the page ID, so it applies to the
   Hebrew original and to every translation - including ones not created yet.
   The values are unchanged from the rules above; only the selector differs.
   RTL and LTR both get it: the offset is vertical, so it needs no mirroring
   and the Russian/English trail stays on its own inline start.
   ========================================================================== */
@media screen and (min-width: 769px) {
  .page-template-page-additional .breadcrumbs {
    position: relative;
    z-index: 5;
  }

  .page-template-page-additional #partners .container {
    margin-top: -27px;
    padding-top: 63px;
    width: 88vw;
  }
}

/* "Anonymous questionnaire" CTA - breathing room for wrapping labels.
   line-height was 18px against an 18px font - a ratio of 1.0, so the lines
   sat directly on top of one another. Hebrew never showed it because the
   label fits on one line; English wraps to two and Russian to three
   ("Анонимный опросник Министерства социального обеспечения"), where the
   text reads as a solid block.
   1.45 opens the leading, and min-height becomes a floor rather than a fixed
   height so a three-line label grows the button instead of overflowing it.
   Applies to every language, including any added later. */
.page-template-page-when-to-consult .gradient-border-button,
.buttons__section .gradient-border-button,
.buttons__section a.button {
  line-height: 1.45;
  min-height: 65px;
  height: auto;
  padding-top: 14px;
  padding-bottom: 14px;
  align-items: center;
}

@media screen and (max-width: 768px) {
  .page-template-page-when-to-consult .gradient-border-button,
  .buttons__section .gradient-border-button,
  .buttons__section a.button {
    line-height: 1.4;
    padding-top: 12px;
    padding-bottom: 12px;
  }
}

/* Uniform page-title (H1) size: 55px on desktop, every page and language.
   The site's first headings previously ranged from 52px to 96px depending
   on template: --font-size-h1 (80px) on the hero/page-hero templates,
   --font-size-h2 (52px) on blank/when-to-consult, 4.16667vw on workshops,
   3.33333vw on guide, and 5vw for the Arabic hero override. 55px matches
   the size the Modular template already uses inline (h1.hero__title).
   The HOMEPAGE is deliberately excluded. The exclusion tests the template as
   well as the .home class, because only the four language front pages carry
   .home - the Hebrew duplicates /בית/ and /בית-bk/ use the same home template
   without it, and they must keep the same hero as the live front page.
   !important is required because several of the rules above
   (html[lang="ar"], inline template <style> blocks, main.css which loads
   after this file) would otherwise win by order or specificity. The one
   rule it could not beat - a 5.5vw !important at (0,3,0) in header.php and
   header-mini.php - was removed there instead.
   Mobile (<=769px) is untouched - first headings there already share
   --font-size-h1-mobile (35px). */
@media screen and (min-width: 769px) {
  body:not(.home):not(.page-template-page-home) .page-hero__title,
  body:not(.home):not(.page-template-page-home) .hero__title h1,
  body:not(.home):not(.page-template-page-home) h1.hero__title,
  /* Section 4 (sections/section-4.php) renders the hero heading as an
     H2.hero__title - it is the page title on /מי-יכול-ה-לעזור-לי/ and its
     EN/AR/RU translations, which is why those four stayed at 80px. */
  body:not(.home):not(.page-template-page-home) .hero__title_wrap > h2.hero__title,
  body:not(.home):not(.page-template-page-home) #partners .hero__title,
  body:not(.home):not(.page-template-page-home) .explain__title h1,
  body:not(.home):not(.page-template-page-home) h1.explain__title,
  body:not(.home):not(.page-template-page-home) .about_hero-title h1,
  body:not(.home):not(.page-template-page-home) .knowledge_hero-title h1,
  body:not(.home):not(.page-template-page-home) .blank-title,
  body:not(.home):not(.page-template-page-home) .page-hero__workshops h1,
  body:not(.home):not(.page-template-page-home) .guide__text h1,
  body:not(.home):not(.page-template-page-home) h1.page-title,
  body:not(.home):not(.page-template-page-home) .article__content h1,
  body:not(.home):not(.page-template-page-home) .text-404 h1 {
    font-size: 55px !important;
  }

  /* Its line-height was a fixed 4.375vw (84px), sized for the old 80px
     font - at 55px that leaves a visible gap, so make it proportional. */
  body:not(.home):not(.page-template-page-home) .about_hero-title h1 {
    line-height: 1.05 !important;
  }
}

/* Hero headings that opened purple - colour order corrected to orange first.
   The site's convention is orange opening phrase, purple closing phrase. On
   "מתי והאם כדאי להתייעץ" and on "אודות" the <mark> (orange) wraps the SECOND
   phrase instead, so those headings read purple-then-orange - in every
   language, because each set of ACF fields was written with the same
   wrapping. The wrapping is page content, so the swap is done here: the
   unmarked opening phrase takes orange and the <mark> takes purple.
   !important is needed because the sitewide `.hero__title mark,
   .explain__title mark` rule sets the orange with !important itself.
   Scoped to these two page sets, so no other hero heading is affected. */
.page-template-page-when-to-consult .explain__title,
.page-about .hero__title h1 {
  color: var(--color-orange) !important;
}

.page-template-page-when-to-consult .explain__title mark,
.page-about .hero__title h1 mark {
  color: var(--color-purple) !important;
}

/* The rules above split the Hebrew, Arabic and Russian About headings by
   the <mark> in their content: name orange, remainder purple. The ENGLISH
   field is authored differently - it wraps the WHOLE title in one <mark>,
   so there is no boundary for those rules to colour and it renders entirely
   purple. We cannot fix that in the content (no wp-admin access) and the
   PHP that used to rebuild the split was dropped, so the split is done here
   in CSS instead, English only.

   How it works: the whole heading is purple (via the <mark> above), and
   ::first-line repaints just the first visual line orange. The one subtlety
   that cost several attempts: the selector must be `mark::first-line`, NOT
   `h1::first-line`. In Blink/Chrome ::first-line does not reach text that
   sits inside a nested inline element, and here every word is inside the
   <mark> - so h1::first-line left the line purple. Targeting the <mark>'s
   own first line (the text is its direct child) is what actually paints.
   Verified by sampling rendered pixels: h1::first-line -> purple,
   mark::first-line -> orange.

   The heading is then pinned to a width where that first line is exactly the
   initiative name "Drawing the Lines" - wide enough to hold the name on one
   line, too narrow for the next word ("to") to join it. 545px hits that band
   at the 55px heading size; max-width:100% keeps it from overflowing the
   column on narrower desktops. Result across desktop widths: line 1 orange,
   the rest purple. Mobile uses the same idea at 330px for the 35px heading.
   Scoped to html[lang="en-GB"], so the other three languages (which already
   split via their own <mark>) are untouched.

   If the English field is ever edited to carry its own <mark> around the
   second phrase like the others, this block stays harmless: the first line
   is already orange and this repaints it the same colour. */
@media screen and (min-width: 769px) {
  html[lang="en-GB"] .page-about .hero__title h1 {
    width: 545px;
    max-width: 100%;
  }
}

@media screen and (max-width: 768px) {
  html[lang="en-GB"] .page-about .hero__title h1 {
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
  }
}

html[lang="en-GB"] .page-about .hero__title h1 mark::first-line {
  color: var(--color-orange) !important;
}