@charset "utf-8";

:root {
    --white: #fff;
    --black: #000;
    --bluelight: #3ABFF0;
    --bluelight1: #eef2f8;
    --bluelight2: #e4eaf5;
    --blue: #0066B3;
    --bluedark: #0066B3;
    --green: #44AB48;
    --greenlight: #44AB4817;
    --red: #DC2323;
    --gray: #4d4d4d;
    --lightgrey: #BEC0C2;

    --assistant: 'Assistant', sans-serif;
}


/* 1. Create a Clean Base
------------------------------------------------------------------------------*/

html,
body,
br,
hr,
div,
span,
a,
object,
iframe,
ul,
ol,
dl,
li,
dt,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
q,
address,
small,
big,
cite,
dfn,
ins,
del,
i,
em,
b,
strong,
sup,
sub,
strike,
pre,
code,
samp,
kbd,
var,
tt,
form,
fieldset,
legend,
label,
input,
textarea,
option,
.nobox {
    background: transparent;
    border: 0;
    font-size: 100%;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
    direction: rtl !important;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section,
main {
    display: block;
    direction: rtl !important;
}

blockquote,
q {
    quotes: none;
}

br {
    height: 0;
}

ul,
ol,
dl,
li {
    margin: 0;
    padding: 0;
    color: var(--black);
    font-size: 14px;
    line-height: 24px;
}

html,
body {
    height: 100%;
    -webkit-appearance: none;
    border: none;
    -webkit-text-size-adjust: none;
}

body {
    position: relative;
}

/* Class for clearing floats */
.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

.cf:after,
.cf:before {
    display: table;
    content: ''
}

.cf:after {
    clear: both;
}

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    direction: rtl !important;
    font-family: var(--assistant);
}

/* 2. Define Base Typography
------------------------------------------------------------------------------*/

/* Create the Default Headers  */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--blue);
    font-weight: 600;
}

/* Specific Header Settings */
h1 {
    font-size: 36px;
}

h2,
.h2 {
    font-size: 50px;
    position: relative;
    line-height: 45px;
}

/* Figma section-title token, now global instead of re-declared per section:
   Assistant Bold 50/45, letter-spacing 0, right aligned.
   The 18px padding-bottom that used to sit on .h2 is gone - the token's box is
   exactly the 45px line. The 127x6 --bluelight bar below is KEPT: every .h2 on
   the site already switches it off individually, but `.overlay .h2:after` only
   OVERRIDES it (width/height/left) and would lose its content/position/colour if
   the base rule disappeared. */
h2,
.h2,
.h2-gradient {
    font-family: var(--assistant);
    font-weight: 700;
    letter-spacing: 0;
    text-align: right;
}

.h2:after {
    content: '';
    width: 127px;
    height: 6px;
    background-color: var(--bluelight);
    position: absolute;
    right: 0;
    bottom: 0;
}

h3 {
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
}

h4 {
    font-size: 24px;
    font-weight: 300;
    line-height: 1.1;
}

h5 {
    font-size: 14px;
}

h6 {
    font-size: 12px;
}

/* Create the Default Paragraphs */
p {
    color: var(--black);
    font-size: 18px;
    line-height: 1.4;
    font-weight: 300;
}

/* Other Typo */
strong {
    font-weight: bold;
}

ul {
    list-style: none;
}

/* 3. Images
------------------------------------------------------------------------------*/

/* Remove border around linked images */
img {
    border: 0;
    border-style: none;
    max-width: 100%;
}

/* 4. Links
------------------------------------------------------------------------------*/

/* Default Link Types */
a {
    color: var(--black);
    font-size: 18px;
    text-decoration: none;
    font-weight: 400;
    line-height: 1.1;
    display: inline-block;
}

a:hover,
a.active {
    color: var(--blue);
}


/* 5. Forms
------------------------------------------------------------------------------*/

input[type='submit'] {
    -webkit-appearance: none;
    -webkit-text-size-adjust: none;
    transition: 0.4s ease all;
    cursor: pointer;
}

div.tashDiv form.formTash input[type='submit'] {
    background-color: var(--blue) !important;
    padding: 14px 20px;
}

input[type='submit']:hover {
    background-color: var(--red) !important
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
    appearance: none;
}

input[type='text'],
input[type='tel'],
input[type='email'],
input[type='password'] {}

textarea {
    overflow: auto;
}

/* ::-webkit-input-placeholder {
    color: var(--blue);
    opacity: 1;
}

:-moz-placeholder {
    color: var(--blue);
    opacity: 1;
}

::-moz-placeholder {
    color: var(--blue);
    opacity: 1;
}

:-ms-input-placeholder {
    color: var(--blue);
    opacity: 1;
}

::-ms-input-placeholder {
    color: var(--blue);
    opacity: 1;
}

:placeholder-shown {
    color: var(--blue);
    opacity: 1;
} */

/* Removes fieldset borders. even on Opea 7 */
fieldset {
    border: 1px solid transparent;
}

/* 6. Tables
------------------------------------------------------------------------------*/

/* Table Fixes */
table {
    border-spacing: 0;
    border-collapse: collapse;
}

td {
    text-align: right;
    font-weight: normal;
}


/*

/*transition effect*/
.tra,
a,
.in,
.sub,
img {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

/* Page Layout */
body {
    font-family: var(--assistant);
}

#full_wrapper {
    min-height: 100%;
    height: auto !important;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}

.wrapper {
    width: 100%;
    margin: 0 auto;
    max-width: 1360px;
}

.home_page .wrapper,
footer .wrapper {
    max-width: unset !important;
}

/* Schema 90: content sections from the news ticker down are capped/centered here,
   independent from .wrapper (which the home page intentionally leaves full-bleed
   for the banner/big_bar). Only affects viewports wider than the cap. */
.home-container {
    width: 100%;
    /* 1216px content column. Desktop/tablet: 32px side padding so content
       never hugs the edges on sub-1280 viewports (client 20/07); mobile ≤767
       drops back to the Figma 16px (see the media query below). */
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 32px;
    padding-right: 32px;
}

@media only screen and (max-width: 767px) {
    .home-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.d_flex {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.d-flex {
    display: flex;
}

.d_flex_ac {
    align-items: center;
}

.d_flex_jb {
    justify-content: space-between;
}

.d_flex_jc {
    justify-content: center;
}

.bg {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    min-height: 300px;
}

.btn {
    background-color: var(--blue) !important;
    font-size: 18px;
    position: relative;
    border-radius: 0px 0px 20px 20px;
    padding: 14.5px 23px;
    color: var(--white) !important;
    width: 100%;
}

.sendToPay.btn {
    background: transparent !important;
}

.right_in .website_col {
    gap: 10px;
    display: flex;
    flex-direction: column;
}

.right_in .website_col a.btn {
    border-radius: 20px;
    height: 60px;
}

.btn:hover {
    background-color: var(--green);
    color: var(--white);
    border-color: var(--white);
}

/* Schema 90: floating contact rail - fixed to the left edge. Email + phone are
   standalone circles (white bg + blue ring baked into their SVGs); the social
   channels share one white pill container per the Figma. Each item renders only
   when that channel has real data on this mercaz. */
.floating-contact-rail {
    position: fixed;
    top: 172px;
    left: 23px;
    z-index: 500;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
}

.floating-contact-rail .rail-circle {
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    transition: transform 0.15s ease;
}

.floating-contact-rail .rail-circle:hover {
    transform: scale(1.08);
}

.floating-contact-rail .rail-circle img {
    width: 45px;
    height: 45px;
    display: block;
}

.rail-social-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 45px;
    padding: 18px 13px 13px;
    background-color: var(--white);
    border: 0.5px solid var(--blue);
    border-radius: 24px;
}

.rail-social-group a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.rail-social-group a:hover {
    transform: scale(1.12);
}

.rail-social-group a img {
    width: 25px;
    height: 25px;
    display: block;
}

@media only screen and (max-width: 767px) {
    .floating-contact-rail {
        display: none;
    }
}

/* Schema 90: mobile sticky contact bar - the phone replacement for the desktop
   rail (Figma 2130:920). Hidden by default; the max-width:767px block in
   responsive.css turns it on and lays it out. */
.mobile-sticky-contact {
    display: none;
}

/* Header*/
header:not(.billy-header) .bg {
    display: none;
}

/* Mobile-only menu-panel elements: hidden by default (desktop renders .right_col
   inline, with no transform, so without this they'd leak into the desktop menu
   row). The max-width:767px block in responsive.css turns them back on. */
.mobile-menu-close,
.mobile-search,
.mobile-special-btn,
.mobile-social,
.hambarger-wrapper {
    display: none;
}

/* footer accordion chevron: desktop keeps the columns always open, no chevron */
.footer-col-chevron {
    display: none;
}

header:not(.billy-header) {
    height: 140px;
    padding: 10px 26px 10px 0;
    background-color: var(--white);
    position: relative;
    top: 0;
    width: 100%;
    z-index: 99;
    justify-content: space-between;
    align-items: center;
}

/* 2px green->blue hairline closing the header, on every breakpoint (Figma shows
   it at the header's bottom edge on both the 1920 and the 390 frames; sampled
   #43AA49 at the start edge fading to #0066B1 at the end edge). Drawn as
   ::after so the 140px header box is not resized by a border. */
header:not(.billy-header)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
    pointer-events: none;
}

header:not(.billy-header).fixed {
    box-shadow: 0px 0px 10px #00000081;
}

header:not(.billy-header) .brand {
    margin-left: 0;
    margin-right: 0;
}

header:not(.billy-header) .brand img {
    max-width: 219px;
    max-height: 64px;
    width: auto;
    height: auto;
}

/* spacing between top-level menu items only (not dropdown lists) */
header:not(.billy-header) .mob_layer > ul > li:not(:last-child) {
    margin-left: 42px;
}

header:not(.billy-header) ul>li>a {
    color: var(--black);
    font-weight: 400;
    font-size: 20px;
}

header:not(.billy-header) ul>li>a:hover {
    color: var(--blue);
}

header:not(.billy-header) ul>li.active>a {
    font-weight: 600;
    color: var(--blue);
}

/* desktop only: the active top-level menu item gets the SAME outlined pill as the
   first item (see the li:first-child pill rule further down) - the mobile drawer
   keeps its own underline treatment */
@media only screen and (min-width: 768px) {
    header:not(.billy-header) .right_col .mob_layer > ul > li.active > a {
        display: inline-block;
        border: 1px solid var(--blue);
        border-radius: 26px;
        padding: 7px 16px;
        color: var(--blue);
        font-size: 20px;
        font-weight: 800;
    }
}

header:not(.billy-header) .search {
    height: 45px;
    width: 160px;
    position: relative;
}

header:not(.billy-header) .search .in {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--lightgrey);
    border-radius: 40px;
    color: var(--black);
    font-size: 17px;
    padding-right: 10px;
}

header:not(.billy-header) .search .in:focus {
    border-color: var(--blue);
}

header:not(.billy-header) .search .sub {
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 35px;
    width: 35px;
    border-radius: 50%;
    background-color: var(--blue);
    font-size: 0px;
    background-image: url(../images/site/search300.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 21px;
}

header:not(.billy-header) .social {
    margin-right: 23px;
}

header:not(.billy-header) .social a {
    margin: 0px 7px;
}

header:not(.billy-header) .social a img {
    width: auto;
    height: 21px;
}

header:not(.billy-header) .user {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background-color: var(--lightgrey);
    margin: 0 25px 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

header:not(.billy-header) .user img {
    height: 24px;
    margin-top: -4px;
}

header:not(.billy-header) .user:hover {
    background-color: var(--blue);
}

header:not(.billy-header) .user:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(1deg) brightness(108%) contrast(104%);
}

header:not(.billy-header) .contribution {
    height: 45px;
    border-radius: 40px;
    background-color: var(--red);
    color: var(--white);
    padding: 0px 15px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
}

header:not(.billy-header) .contribution:hover {
    background-color: var(--blue);
}

header:not(.billy-header) .contribution::before {
    content: '';
    background-image: url(../images/site/heartw.svg);
    width: 22px;
    height: 24px;
    background-repeat: no-repeat;
    margin-left: 7px;
    animation: rotate-anim infinite 1.8s;
}

header:not(.billy-header) .contribution:hover:before {
    background-image: url(../images/site/heart.svg);
}

@keyframes rotate-anim {
    0% {
        -moz-transform: rotate(25deg);
        -webkit-transform: rotate(25deg);
        -o-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
        transform: rotate(25deg);
    }

    50% {
        -moz-transform: rotate(-25deg);
        -webkit-transform: rotate(-25deg);
        -o-transform: rotate(-25deg);
        -ms-transform: rotate(-25deg);
        transform: rotate(-25deg);
    }

    100% {
        -moz-transform: rotate(25deg);
        -webkit-transform: rotate(25deg);
        -o-transform: rotate(25deg);
        -ms-transform: rotate(25deg);
        transform: rotate(25deg);
    }
}

header:not(.billy-header) .mob_layer>ul>li {
    position: relative;
}

header:not(.billy-header) .mob_layer>ul>li>span {
    width: 12px;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

header:not(.billy-header) .mob_layer>ul>li>span img {
    max-width: 100%;
}

header:not(.billy-header) ul>li.drop {
    position: relative;
}

/* invisible hover bridge: lets the pointer travel from the item into its dropdown
   without the hover state dropping (desktop only - would block taps in the drawer) */
@media only screen and (min-width: 768px) {
    header:not(.billy-header) .mob_layer > ul > li.drop::after {
        content: '';
        position: absolute;
        top: 100%;
        right: 0;
        width: 100%;
        height: 26px;
    }
}

header:not(.billy-header) ul>li.drop span img {
    width: 10px;
    margin-right: 5px;
    position: relative;
    top: -3px;
}

header:not(.billy-header) ul>li>ul {
    position: absolute;
    top: 100%;
    right: 0;
    margin: 0;
    min-width: 220px;
    background-color: var(--white);
    padding: 10px 0 !important;
    border-radius: 0 0 12px 12px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    box-shadow: 0px 8px 20px #00000024;
    z-index: 1000;
}

header:not(.billy-header) ul>li:hover ul {
    opacity: 1;
    pointer-events: all;
}

header:not(.billy-header) ul>li>ul>li>a {
    color: var(--black);
    line-height: 40px;
    font-weight: 400;
    display: block;
    padding: 0 18px;
}

header:not(.billy-header) ul>li>ul>li>a:hover {
    color: var(--blue);
}



.banner {
    min-height: 250px;
    position: relative;
    padding-top: 202px;
    height: 596px;
}

/* 5px brand-gradient bar along the banner's top edge, right under the header
   (Figma node 2003:495 on desktop; same bar on mobile) */
.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--green), var(--blue));
    z-index: 2;
}

/* Banner Content Styles */
.banner-content-wrapper {
    position: relative;
    z-index: 1;
    max-width: 80%;
    margin: 0 auto;
}

.banner-content {
    border-radius: 15px;
    text-align: center;
    max-width: 960px;
    margin: 0 auto;
}

.banner-content h1 {
    color: var(--white);
    font-size: 58px;
    font-weight: 800;
    margin-bottom: 0;
    line-height: 70px;
    text-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}

.banner-content p {
    color: var(--white);
    font-size: 55px;
    line-height: 70px;
    letter-spacing: -1.5px;
    margin-bottom: 23px;
    font-weight: 400;
    text-shadow: 0 4px 2px rgba(0, 0, 0, 0.25);
}

.banner-buttons {
    display: flex;
    gap: 31px;
    justify-content: center;
}

/* banner background slides - one per main_slide row (image, or video when the
   uploaded file is one); JS fades between them when there's more than one */
.banner .bg .banner-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease;
}

.banner .bg .banner-slide.active {
    opacity: 1;
}

.banner .bg .banner-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.banner-content .banner-btn {
    border-radius: 52px;
    font-size: 18px;
    line-height: 28px;
    padding: 0 34px;
    height: 80px;
    min-width: 272px;
    font-weight: 700;
    width: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--white) !important;
}

.banner-content .banner-btn-green {
    background-color: rgba(68, 171, 72, 0.91) !important;
}

.banner-content .banner-btn-blue {
    background-color: rgba(0, 102, 179, 0.87) !important;
}

.banner-content .banner-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.25);
}

.banner .number_col {
    margin-right: 47px;
}

.banner .number_col li a {
    width: 300px;
    background-color: #e2e9f4;
    border-radius: 40px;
    display: flex;
    justify-content: flex-start;
    height: 58px;
    border: 1px solid #cfcfcf;
    position: relative;
    margin-bottom: 30px;
    color: var(--black);
    font-size: 18px;
    font-weight: 400;
    padding: 0px 83px 0 30px;
    align-items: center;
}

.banner .number_col li a:hover {
    color: var(--blue);
}

.banner .number_col span {
    width: 73px;
    height: 73px;
    border-radius: 50%;
    background-color: var(--blue);
    color: var(--white);
    font-size: 14px;
    font-weight: 300;
    box-shadow: 0px 0px 5px #0000002d;
    position: absolute;
    right: -2px;
    top: 0;
    bottom: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: center;
    line-height: 0.7;
}

.banner .number_col span em {
    font-style: normal;
    font-size: 39px;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

/* Schema 90: big_bar strip - full-width white band at the bottom of the banner,
   framed top & bottom by the brand gradient. Icons come from big_bar as uploaded
   (no color styling on the images). */
.banner .news_link {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    padding: 40px 4% 22px;
    align-items: flex-start;
    /* item count is customer-driven, so the row is CENTERED (not edge-spread)
       and wraps gracefully as the viewport narrows, until the ≤767px 2-column
       grid takes over (responsive.css) */
    justify-content: center;
    flex-wrap: wrap;
    gap: 39px;
    border-top: 5px solid var(--blue);
    border-bottom: 5px solid var(--blue);
    border-image: linear-gradient(to left, var(--blue), var(--green)) 1;
}

.banner .news_link li {
    width: auto;
}

.banner .news_link li a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    color: var(--blue);
    font-weight: 700;
    text-align: center;
    line-height: 30px;
    max-width: 231px;
}

.banner .news_link li a:hover {
    color: var(--green);
}

.banner .news_link li a img {
    display: block;
    margin: 0 auto;
    width: 123px;
    height: 123px;
    object-fit: contain;
}

/* Schema 90: news ticker - slim strip, one item at a time, vertical auto-rotation
   (news table: tvOnly=0, pushToHomePage=1; date from estDate) */
.news_ticker_sec {
    background-color: var(--white);
    box-shadow: 0 0 15.9px rgba(0, 0, 0, 0.25);
    position: relative;
    z-index: 2;
}

.news-ticker {
    height: 96px;
    max-width: 1223px;
    margin: 0 auto;
    padding: 0 24px;
    gap: 18px;
}

.news-ticker-label {
    gap: 7px;
    color: var(--blue);
    font-weight: 800;
    font-size: 22px;
    white-space: nowrap;
}

.news-ticker-viewport {
    position: relative;
    overflow: hidden;
    height: 100%;
    flex: 1;
    min-width: 0;
}

.news-ticker-item {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.news-ticker-item.active {
    transform: translateY(0);
    opacity: 1;
}

.news-ticker-item a {
    color: var(--black);
    font-size: 18px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.news-ticker-item a b {
    font-weight: 800;
}

.news-ticker-item a:hover {
    color: var(--blue);
}

.news-ticker-controls {
    gap: 16px;
    /* never let the buttons get crushed by a long news line */
    flex-shrink: 0;
}

.nt-btn {
    position: relative;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 12px box rotated 45deg reads as the Figma's ~16x10 chevron */
.nt-prev::before,
.nt-next::before {
    content: "";
    position: absolute;
    left: 5px;
    width: 12px;
    height: 12px;
    border-bottom: 2px solid var(--black);
    border-right: 2px solid var(--black);
}

/* up chevron = previous (content slides up) */
.nt-prev::before {
    top: 8px;
    transform: rotate(-135deg);
}

/* down chevron = next (same direction as the auto-rotation) */
.nt-next::before {
    top: 2px;
    transform: rotate(45deg);
}

.nt-prev:hover::before,
.nt-next:hover::before {
    border-color: var(--blue);
}

/* pause bars / play triangle, swapped via .playing on the ticker */
.nt-toggle .nt-pause-icon {
    display: none;
    width: 10px;
    height: 11px;
    border-left: 3px solid var(--black);
    border-right: 3px solid var(--black);
}

.nt-toggle .nt-play-icon {
    display: inline-block;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 9px solid var(--black);
}

.news-ticker.playing .nt-toggle .nt-pause-icon {
    display: inline-block;
}

.news-ticker.playing .nt-toggle .nt-play-icon {
    display: none;
}

.nt-toggle:hover .nt-pause-icon {
    border-color: var(--blue);
}

.nt-toggle:hover .nt-play-icon {
    border-left-color: var(--blue);
}

@media only screen and (max-width: 767px) {
    /* mobile ticker: compact strip (client 20/07 - show the news on mobile too).
       Sits directly UNDER THE HEADER (above the banner) - .home_page becomes a
       flex column so the strip can be reordered without touching the DOM. */
    .home_page {
        display: flex;
        flex-direction: column;
    }

    .news_ticker_sec {
        order: -1;
    }

    .news-ticker {
        height: 56px;
        padding: 0 12px;
        gap: 10px;
    }

    /* mobile controls: up/down only (pause/play stays desktop-only) */
    .nt-toggle {
        display: none;
    }

    .news-ticker-label span {
        display: none;
    }

    .news-ticker-label svg {
        width: 32px;
        height: 24px;
    }

    .news-ticker-item a {
        font-size: 14px;
    }
}

/* Schema 90: shared brand-gradient section title (same direction as the banner/big_bar borders).
   The gradient spans the FULL header column (block + 100%), so right-aligned titles
   sample the blue end and centered titles sample the middle - matching how the
   Figma renders each variant. */
/* Figma's own declaration is
     linear-gradient(90deg, #44AB48 0%, #0066B3 100%)
   (the second layer it lists is rgba(...,0) -> rgba(...,0), i.e. fully
   transparent, so it is a no-op and is not reproduced).
   Per request the sweep is MIRRORED: #44AB48 now holds the first 75% and the
   ramp into #0066B3 is compressed into the final quarter. Because the text is
   RTL right-aligned, that quarter is where the wording BEGINS - so reading the
   title you get blue for its first quarter, then solid green.
   The box HUGS THE TEXT (fit-content) so those percentages measure the text -
   with the previous width:100% they measured the whole column, which is why
   these titles used to sample only the far end of the sweep and read near-solid. */
.h2-gradient {
    font-weight: 700;
    background: linear-gradient(90deg, var(--green) 0%, var(--green) 0%, var(--blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: block;
    width: fit-content;
    max-width: 100%;
}

/* the two centred titles relied on width:100% + text-align to centre; now that
   the box hugs the text they need the box itself centred */
.testimonial_sec .h2.h2-gradient,
.lecturers_sec .h2.h2-gradient {
    margin-inline: auto;
}

/* Figma "Section Tittle" token: Assistant Bold 50/45 (mobile blocks override to 30/35) */
.recommended_sec .h2,
.trips_sec .h2,
.oneoff_sec .h2,
.testimonial_sec .h2,
.lecturers_sec .h2 {
    line-height: 45px;
}

/* Schema 90: recommended programs (subscription events, eventType=56) */
.recommended_sec {
    padding: 97px 0;
    background-color: var(--white);
    border-bottom: 1px solid #F3F4F6;
}

.recommended_sec .h2 {
    text-align: right;
    font-size: 50px;
    margin-bottom: 0;
}

.recommended_sec .h2::after {
    display: none;
}

.sec-head-row {
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 14px;
    margin-bottom: 24px;
}

.recommended_sec .sec-subtitle,
.oneoff_sec .sec-head-row .sec-subtitle {
    text-align: right;
    color: var(--black);
    font-size: 18px;
    line-height: 22px;
    letter-spacing: 0;
    max-width: 672px;
    margin: 0;
}

/* oneoff subtitle column is narrower in the Figma (576 vs 672) */
.oneoff_sec .sec-head-row .sec-subtitle {
    max-width: 576px;
}

.recommended_sec .sec-cta,
.oneoff_sec .sec-cta {
    flex: 0 0 auto;
}

/* mobile-only copy of each section's CTA, rendered below the content
   (mobile Figma puts the button at the bottom center, not in the head row) */
.sec-cta-bottom {
    display: none;
}

/* mobile-only intro line for the one-time-events section */
.oneoff-mobile-subtitle {
    display: none;
}

@media only screen and (max-width: 767px) {
    .oneoff-mobile-subtitle {
        display: block;
        text-align: right;
        color: #000;
        font-size: 18px;
        line-height: 22px;
        /* 30px below the section title (the head row's own bottom margin is
           zeroed on mobile so this margin is the whole gap) */
        margin: 30px 0 18px;
    }
}

.outline-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: 1px solid var(--green);
    color: var(--green);
    background-color: var(--white);
    border-radius: 9px;
    width: 202px;
    height: 45px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
}

.outline-btn:hover {
    background-color: var(--greenlight);
}

/* small chevron pointing left (RTL "forward").
   Base box sized for the .outline-btn CTAs (drawn ≈5.55x9 per Figma). */
.chev {
    display: inline-block;
    width: 6.5px;
    height: 6.5px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* card "לפרטים נוספים" / "הבטח מקום עכשיו" rows: bigger chevron (drawn ≈8.3x13.5) */
.rec-more .chev,
.trip-more .chev {
    width: 9.5px;
    height: 9.5px;
}

.recommended-cards {
    gap: 32px;
    align-items: stretch;
}

.recommended-cards .rec-card {
    flex: 0 0 280px;
    width: 280px;
    min-width: 0;
    background-color: var(--white);
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    box-shadow: 0 4px 23.9px -12px #00000040;
    overflow: hidden;
}

.rec-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 18px;
}

/* full-bleed image: the card's overflow hidden + 16px top corners clip it */
.rec-card-img {
    border-radius: 0;
    overflow: hidden;
    height: 192px;
    margin-bottom: 0;
}

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

.rec-card h3 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    margin: 24px 24px 8px;
}

.rec-card p {
    color: var(--black);
    font-size: 16px;
    line-height: 22px;
    margin: 0 24px 16px;
    flex: 1;
}

.rec-card .rec-more {
    color: #0268B3;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 24px;
    align-self: flex-end;
    width: fit-content;
}

.rec-card a:hover h3,
.rec-card a:hover .rec-more {
    color: var(--green);
}

@media only screen and (max-width: 1199px) {
    .recommended-cards {
        flex-wrap: wrap;
    }

    .recommended-cards .rec-card {
        flex: 1 1 calc(50% - 12px);
        width: auto;
    }
}

@media only screen and (max-width: 767px) {
    /* mobile section titles: all five home sections share 30/35 (Figma) */
    .recommended_sec .h2,
    .trips_sec .h2,
    .oneoff_sec .h2,
    .testimonial_sec .h2,
    .lecturers_sec .h2 {
        font-size: 30px;
        line-height: 35px;
    }

    /* uniform 45px vertical section rhythm on mobile */
    .recommended_sec,
    .trips_sec,
    .oneoff_sec,
    .testimonial_sec,
    .lecturers_sec {
        padding-top: 45px;
        padding-bottom: 45px;
    }

    .recommended_sec {
        border-bottom: none;
    }

    .recommended-cards .rec-card {
        flex: 1 1 100%;
    }

    .recommended-cards {
        gap: 45px;
    }

    .sec-head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    /* rec section: 21px between the title and the subtitle row */
    .recommended_sec .sec-head-row {
        margin-top: 21px;
    }

    .recommended_sec .sec-subtitle {
        max-width: none;
    }

    /* mobile Figma: "more details" link sits on the RIGHT of the card */
    .rec-card .rec-more {
        align-self: flex-start;
    }

    /* section CTA moves from the head row to bottom-center on mobile */
    .sec-head-row .sec-cta {
        display: none;
    }

    .sec-cta-bottom {
        display: flex;
        justify-content: center;
        margin-top: 45px;
    }
}

/* Schema 90: upcoming trips (eventType=3), slick carousel, 3 per view on desktop */
.trips_sec {
    padding: 154px 0 72px;
    /* light blue band per the Figma (desktop and mobile) */
    background-color: rgba(0, 102, 179, 0.07);
}

.trips_sec .sec-head-row {
    margin-bottom: 38px;
}

.trips_sec .h2 {
    font-size: 50px;
    margin-bottom: 0;
}

.trips_sec .h2::after {
    display: none;
}

.trips-slider .slick-list {
    margin: 0 -16px;
    padding: 4px 0 10px;
}

.trips-slider .slick-track {
    display: flex;
}

.trips-slider .slick-slide {
    height: auto;
    float: none;
    padding: 0 16px;
}

.trip-card {
    height: 100%;
    background-color: var(--white);
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    overflow: hidden;
}

.trip-card a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 0 20px;
}

.trip-card-img {
    position: relative;
    height: 160px;
}

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

.trip-date-badge {
    position: absolute;
    top: 13px;
    right: 16px;
    width: 65px;
    height: 79px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.trip-date-badge .trip-day {
    display: block;
    color: #0268B3;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.15;
}

.trip-date-badge .trip-month {
    display: block;
    color: #3F9E5D;
    font-size: 16px;
    font-weight: 700;
}

.trip-when {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--black);
    font-size: 14px;
    font-weight: 700;
    padding: 16px 20px 0;
}

.trip-when .event-icon {
    width: 14px;
    height: 14px;
}

.trip-divider {
    border: none;
    border-top: 1px solid #C4C7C5;
    margin: 14px 24px;
}

/* the 2nd hr in each trip card (before the CTA/price row): lighter + 20px inset */
.trip-card .trip-foot-divider {
    border-top-color: #E5E7EB;
    margin: 0 20px;
}

.trip-card h3 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    padding: 0 24px;
    margin-bottom: 10px;
}

.trip-card p {
    color: var(--black);
    font-size: 16px;
    line-height: 19px;
    padding: 0 20px;
    flex: 1;
}

.trip-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Figma: CTA link on the LEFT, price on the RIGHT - reversed from RTL flex default */
    flex-direction: row-reverse;
    padding: 0 20px;
    margin-top: 8px;
}

.trip-more {
    color: #0268B3;
    font-size: 16px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.trip-price {
    color: #0268B3;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
}

.trip-card a:hover h3,
.trip-card a:hover .trip-more {
    color: var(--green);
}

/* trips slider is dots-only per the Figma (arrows: false in the slick init) */

/* Schema 90: shared slick dots style (brand-colored, reused by any carousel section) */
.slick-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 59px;
    padding: 0;
    list-style: none;
}

.slick-dots li {
    margin: 0;
    line-height: 0;
}

.slick-dots li button {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 1px solid #0268B3;
    border-radius: 50%;
    background-color: transparent;
    font-size: 0;
    cursor: pointer;
}

.slick-dots li.slick-active button {
    background-color: #0268B3;
}

@media only screen and (max-width: 767px) {
    .trips_sec .sec-head-row {
        /* DOM order is now [title, button] - plain column keeps title on top */
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .trip-card p {
        font-size: 18px;
        line-height: 19px;
        padding: 0 16px;
    }

    /* Figma mobile: 16px card insets (desktop uses 20/24) */
    .trip-card h3 {
        padding: 0 16px;
    }

    .trip-when {
        padding: 16px 16px 0;
    }

    .trip-divider {
        margin: 14px 16px;
    }

    .trips-slider .slick-dots {
        margin-top: 45px;
    }
}

/* Schema 90: one-time events (neither subscription nor trip), static 4-card grid */
.oneoff_sec {
    padding: 95px 0;
    background-color: var(--white);
}

.oneoff_sec .sec-head-row {
    /* Figma: subtitle sits 30px below the title */
    margin-top: 30px;
    margin-bottom: 40px;
}

.oneoff_sec .h2 {
    font-size: 50px;
    margin-bottom: 0;
}

.oneoff_sec .h2::after {
    display: none;
}

.oneoff-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 82px;
}

.oneoff-card {
    /* Figma spec: soft blue drop shadow (x0 y3 blur17.8 spread3, #0066B3 @ 20%),
       NOT a blue frame around the card */
    background-color: var(--white);
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    box-shadow: 0 3px 17.8px 3px #0066B333;
}

.oneoff-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: var(--white);
    border-radius: 16px;
    overflow: hidden;
}

.oneoff-card-inner:hover .oneoff-content h3,
.oneoff-card-inner:hover .trip-more {
    color: var(--green);
}

/* top row: full-bleed photo flush to the card's top+right edges (right via RTL
   DOM order) + content column with its own padding */
.oneoff-top {
    display: flex;
    align-items: stretch;
    gap: 24px;
    padding: 0;
    flex: 1;
}

.oneoff-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 24px 0 24px 24px;
}

.oneoff-img {
    flex: 0 0 37%;
}

.oneoff-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    /* only the top-right corner rounds (matches the card corner) */
    border-radius: 0 16px 0 0;
}

.oneoff-content .trip-when {
    padding: 0;
}

.oneoff-content .trip-divider {
    margin: 14px 0;
}

/* footer band: divider + CTA/price spanning the FULL card width */
.oneoff-card .oneoff-foot-divider {
    margin: 18px 20px 0;
    border-top-color: #E5E7EB;
}

.oneoff-card .trip-foot {
    /* Figma: CTA at the LEFT, price at the RIGHT - reversed from RTL flex default */
    flex-direction: row-reverse;
    padding: 0 24px;
    height: 79px;
    margin-top: 0;
}

.oneoff-content h3 {
    color: var(--blue);
    font-size: 18px;
    font-weight: 700;
    line-height: 25px;
    margin-bottom: 10px;
}

.oneoff-content p {
    color: var(--black);
    font-size: 16px;
    line-height: 19px;
    flex: 1;
}

@media only screen and (max-width: 991px) {
    .oneoff-grid {
        grid-template-columns: 1fr;
    }
}

@media only screen and (max-width: 767px) {
    /* stack: photo on TOP (flush to the card edges), content below (mobile Figma) -
       photo is already first in the DOM, so a plain column gives the right order */
    .oneoff-top {
        flex-direction: column;
        gap: 16px;
        padding: 0;
    }

    .oneoff-img {
        flex: none;
    }

    .oneoff-img img {
        width: 100%;
        height: 297px;
        /* BOTH top corners round on mobile (desktop rounds only the top-right) */
        border-radius: 16px 16px 0 0;
    }

    /* symmetric content padding - kills the desktop 24px-left asymmetry */
    .oneoff-content {
        padding: 16px;
    }

    /* Figma mobile: softer card shadow than desktop (blur 8.9 vs 17.8) */
    .oneoff-card {
        box-shadow: 0 3px 8.9px rgba(0, 102, 179, 0.2);
    }

    .oneoff-grid {
        gap: 45px;
    }

    .oneoff-card .oneoff-foot-divider {
        margin: 14px 16px 0;
    }

    .oneoff-card .trip-foot {
        padding: 12px 16px 16px;
    }

    .oneoff-content p {
        font-size: 18px;
        line-height: 19px;
    }

    .oneoff_sec .sec-head-row {
        /* DOM order is now [title, button] - plain column keeps title on top */
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        /* the mobile-only subtitle right below carries the 30px title gap */
        margin-bottom: 0;
    }
}

/* Schema 90: participant testimonial - skeleton only, data source TBD */
.testimonial_sec {
    position: relative;
    padding: 90px 0 70px;
    background-color: var(--white);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-top: 1px solid #F3F4F6;
    border-bottom: 1px solid #F3F4F6;
}

/* Figma spec: the landscape photo renders at 10% opacity over white.
   background-image can't take opacity, but a 90% white overlay above the
   full-strength image is mathematically the same result. */
.testimonial_sec::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
}

.testimonial_sec .home-container {
    position: relative;
    z-index: 1;
}

.testimonial_sec .h2 {
    /* .h2-gradient spans the full column now - text-align centers the text
       so it samples the middle of the gradient (per the Figma) */
    display: block;
    text-align: center;
    font-size: 50px;
    margin-bottom: 78px;
}

.testimonial-slider {
    /* exactly one 757px card visible - the list clips hard at the card width
       so adjacent slides can never peek in from the sides */
    max-width: 757px;
    margin: 0 auto;
}

.testimonial-slider .slick-list {
    overflow: hidden;
}

/* let the quote icon straddling the card's top edge paint above the slick clip:
   padding-top opens 46px of paint area inside the overflow, the negative margin
   cancels it visually, and height:auto keeps adaptiveHeight's inline height from
   swallowing the padding (border-box) */
.testimonial-slider .slick-list {
    padding-top: 46px;
    margin-top: -46px;
    height: auto !important;
}

.testimonial-slider .slick-dots {
    margin-top: 48px;
}

.testimonial-card {
    position: relative;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid var(--white);
    border-radius: 25px;
    padding: 16px;
    width: 100%;
    min-height: 252px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

/* 96x67 double-quotes decoration straddling the card's top edge (21px overlap) */
.testimonial-quote-icon {
    position: absolute;
    top: -46px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 67px;
}

.testimonial-quote {
    color: var(--black);
    font-size: 20px;
    line-height: 28px;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid #E5E7EB;
    background-color: var(--bluelight1);
    margin: 24px auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

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

.testimonial-avatar img.testimonial-avatar-placeholder {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

.testimonial-name {
    color: var(--black);
    font-size: 16px;
    font-weight: 700;
}

.testimonial-role {
    color: var(--black);
    font-size: 16px;
    margin-top: 4px;
}

@media only screen and (max-width: 767px) {
    /* section padding + title size come from the shared mobile rules above */
    .testimonial-card {
        border-radius: 18px;
        padding: 35px 16px;
        background-color: var(--white);
    }

    .testimonial-quote-icon {
        width: 86px;
        height: 60px;
    }
}

/* Schema 90: leading lecturers - skeleton only, workers.workerType convention TBD */
.lecturers_sec {
    padding: 64px 0 72px;
    /* full-bleed band (client 20/07) */
    background-color: rgba(0, 102, 179, 0.06);
}

.lecturers_sec .h2 {
    /* same text-align centering as the testimonial title (.h2-gradient is full-width) */
    display: block;
    text-align: center;
    font-size: 50px;
    margin-bottom: 18px;
}

/* no underline bar on the centered gradient titles (base .h2:after adds one) */
.lecturers_sec .h2::after,
.testimonial_sec .h2::after {
    display: none;
}

.lecturers_sec .sec-subtitle.centered {
    text-align: center;
    color: #166CAB;
    font-size: 18px;
    line-height: 24px;
    max-width: 672px;
    margin: 0 auto 40px;
}

.lecturers-slider {
    position: relative;
    margin-bottom: 40px;
}

.lecturers-slider .slick-list {
    /* Figma geometry: 4 x 280px cards + 3 x 32px gaps = exactly the 1216px container,
       so the gutter is 16px per slide side (list margin compensates at the edges) */
    margin: 0 -16px;
    padding: 4px 0 10px;
}

.lecturers-slider .slick-track {
    display: flex;
    align-items: stretch;
}

.lecturers-slider .slick-slide {
    height: auto;
    float: none;
}

/* The 32px Figma gap lives on the CARD (not the slick slide wrapper) - card
   styles are proven to apply on the live page, slide-wrapper padding was not.
   Desktop only: below 768px the carousel unslicks into a plain stacked list. */
@media only screen and (min-width: 768px) {
    .lecturers-slider .lecturer-card {
        margin: 0 16px;
    }
}

.lecturer-card {
    /* height must stay AUTO: the card is itself the slick-slide (flex child of
       the track), and flex-stretch equalizes row heights only when the item's
       cross-size is auto - an explicit 100% resolves against the track's
       indefinite height and collapses to content height (unequal cards) */
    height: auto;
    background-color: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    /* uniform cards regardless of missing role text: flex column pins the
       button to the bottom edge (slick-track flex + slide height:auto give
       all cards in a row the same height) */
    display: flex;
    flex-direction: column;
}

/* slick.css forces `.slick-initialized .slick-slide { display:block }` which
   outranks `.lecturer-card` - and the card IS the slide, so the flex column
   above silently lost while the slider was active. Re-assert with higher
   specificity (mobile's unslicked cards are covered by the base rule). */
.lecturers-slider .slick-slide.lecturer-card {
    display: flex;
}

/* empty role still occupies exactly one role line, so avatar/name/button
   rows line up across cards regardless of missing text */
.lecturer-card p {
    min-height: 16px;
}

.lecturer-card .lecturer-btn {
    margin-top: auto;
    align-self: center;
}

/* slider arrows: exact SVG assets (client 20/07) - blue circle + white
   chevron baked into the SVGs, no CSS-drawn glyphs */
.lecturers-slider .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 39px;
    height: 39px;
    font-size: 0;
    padding: 0;
    border: none;
    background: transparent center / 39px 39px no-repeat;
    z-index: 5;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.lecturers-slider .slick-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}

.lecturers-slider .slick-arrow:focus {
    outline: none !important;
}

.lecturers-slider .slick-arrow.slick-prev {
    right: -30px;
    background-image: url(../images/site/lecturers_arrow_right.svg);
}

.lecturers-slider .slick-arrow.slick-next {
    left: -30px;
    background-image: url(../images/site/lecturers_arrow_left.svg);
}

@media only screen and (max-width: 1500px) {
    .lecturers-slider .slick-arrow.slick-prev {
        right: -10px;
    }

    .lecturers-slider .slick-arrow.slick-next {
        left: -10px;
    }
}

/* Figma 2239:11626/11627: a 4px ring gap inside a 1.429px #E5E7EB hairline
   around a 71.429px image => an 82.29px outer circle. */
.lecturer-avatar {
    box-sizing: border-box;
    width: 82.29px;
    height: 82.29px;
    padding: 4px;
    border-radius: 50%;
    border: 1.429px solid #E5E7EB;
    background-color: var(--bluelight1);
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.lecturer-avatar img {
    width: 71.429px;
    height: 71.429px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.lecturer-avatar img.lecturer-avatar-placeholder {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

/* 2239:11629: Assistant Bold 18/28, #166CAB */
.lecturer-card h3 {
    color: #166CAB;
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
    margin-bottom: 13px;
}

.lecturer-card p {
    color: var(--black);
    font-size: 16px;
    line-height: 16px;
    margin-bottom: 13px;
}

.lecturer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* border matches the text color (desktop audit set both to #166CAB) */
    border: 1px solid #166CAB;
    color: #166CAB;
    /* 2239:11631 is a transparent 209x46 outline button, 14.87px/20px label */
    background-color: transparent;
    border-radius: 12px;
    width: 209px;
    height: 46px;
    font-size: 14.87px;
    line-height: 20px;
    font-weight: 400;
}

.lecturer-btn:hover {
    background-color: #0066B317;
}

.lecturers-cta {
    text-align: center;
}

.gradient-btn {
    display: inline-block;
    background: linear-gradient(to left, var(--blue), var(--green));
    color: var(--white);
    font-weight: 700;
    font-size: 16px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 36px;
    padding: 16px 40px;
}

.gradient-btn:hover {
    opacity: 0.9;
}

@media only screen and (max-width: 767px) {
    .lecturer-card p {
        font-size: 18px;
    }
}

.news_updates {
    padding: 45px 0px 74px;
    background-color: #e4eaf5;
}

.news_updates h2 {
    margin-bottom: 53px;
}

.news_updates ul {
    border: 1px solid var(--bluelight);
    border-bottom: none;
    border-radius: 20px 20px 0px 0px;
}

.news_updates ul li {
    width: 33.33%;
}

.news_updates ul li:first-child a {
    border-radius: 0px 20px 0px 0px;
}

.news_updates ul li:last-child a {
    border-radius: 20px 0px 0px 0px;
}

.news_updates ul li a {
    text-align: center;
    width: 100%;
    position: relative;
    line-height: 82px;
    font-size: 22px;
    font-weight: 400;
    color: var(--blue);
    background-color: #ffffff;
}

.news_updates ul li a:before {
    content: '';
    left: 0;
    width: 1px;
    top: 0;
    bottom: 0;
    height: 50px;
    background-color: #d9e2f0;
    position: absolute;
    margin: auto;
}

.news_updates ul li a.active:before {
    background-color: #517abc;
}

.news_updates ul li:last-child a::before {
    display: none;
}

.news_updates ul li a.active {
    background-color: #517abc;
    color: var(--white);
    font-weight: 600;
}

.news_updates ul li a span {
    display: block;
    margin: 0 auto;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--white);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s ease all;
    position: absolute;
    top: -40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-color: var(--white);
}

.news_updates ul li a span img {
    filter: brightness(0) saturate(100%) invert(15%) sepia(59%) saturate(4124%) hue-rotate(212deg) brightness(96%) contrast(93%);
    max-width: 37px;
    max-height: 37px;
}

.news_updates ul li a.active span,
.news_updates ul li a:hover span {
    background-color: var(--blue);
}

.news_updates ul li a.active span img,
.news_updates ul li a:hover span img {
    /* filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(1%) hue-rotate(75deg) brightness(103%) contrast(101%);  */
    filter: invert(1) brightness(1) grayscale(1) contrast(1);
    transform: rotate(360deg);
}

/* .news_updates ul li a:hover span{transform: rotate(360deg);} */
.news_updates .inner {
    background-color: #eef2f8;
    padding: 30px 15px;
    border: 1px solid var(--bluelight);
    border-top: none;
    border-radius: 0px 0px 20px 20px;
    position: relative;
}

.news_updates .inner>.btn {
    position: absolute;
    bottom: -25px;
    left: 0;
    right: 0;
    margin: auto;
    width: fit-content;
}

.news_updates .contant {
    display: none;
}

.news_updates .contant.active {
    display: flex;
}

.news_updates .col {
    border: 2px solid var(--white);
    border-radius: 10px;
    padding: 20px 15px;
    margin: 0px 15px 30px;
    width: 31%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 70px;
}

.news_updates .col .img {
    height: 235px;
    overflow: hidden;
    border-radius: 12px 12px 0px 0px;
}

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

.news_updates .col .event-title {
    padding: 15px 15px 10px;
}

.news_updates .col .event-title h3 {
    color: var(--blue);
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    min-height: 55px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news_updates .col .event-details {
    padding: 0 15px;
}

.news_updates .col .event-info {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    padding-top: 10px;
    border-top: 1px solid #376FA0;
}

.news_updates .col .event-info:first-child {
    border-top: 1px solid #376FA0;
}

.news_updates .col .btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    font-weight: 500;
}

.news_updates .col .date {
    width: 80px;
    background-color: var(--blue);
    color: var(--white);
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: bold;
    padding: 2px 15px;
    text-align: center;
    line-height: 1.3;
    border-radius: 10px 0px 0px 10px;
    align-items: flex-start;
    align-content: flex-start
}

.news_updates .col .date em {
    font-style: normal;
    width: 100%;
    text-align: center;
    font-size: 47px;
    font-weight: 300;
}

.events_sec,
.upcoming_events {
    padding: 25px 10%;
    /* margin-top: 60px; */
}

.upcoming_events {
    background-color: #EBF3F9 !important;
}

.events_sec h2,
.upcoming_events h2 {
    margin-bottom: 35px;
}

.events_sec .colin,
.upcoming_events .colin {
    width: 100%;
    padding-bottom: 33px;
}

.events_sec .col .img,
.upcoming_events .col .img {
    height: 235px;
    overflow: hidden;
    border-radius: 12px 12px 0px 0px;
}

.events_sec .col .img img,
.upcoming_events .col .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events_sec .col .event-title,
.upcoming_events .col .event-title {
    padding: 15px 15px 10px;
}

.events_sec .col .event-title h3,
.upcoming_events .col .event-title h3 {
    color: var(--blue);
    font-size: 22px;
    font-weight: 100;
    line-height: 1.3;
    min-height: fit-content;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.events_sec .col .event-details,
.upcoming_events .col .event-details {
    padding: 0 15px;
}

.events_sec .col .event-info,
.upcoming_events .col .event-info {
    display: flex;
    align-items: flex-start;
    padding-top: 10px;
    border-top: 1px solid #376FA0;
    padding: 16px 0px;
}

.events_sec .col .event-info img,
.upcoming_events .col .event-info img {
    margin-left: 18px;
}

.events_sec .col .event-info:last-child,
.upcoming_events .col .event-info:last-child {
    margin-bottom: 10px;
}

.events_sec .col .event-info:first-child,
.upcoming_events .col .event-info:first-child {
    border-top: 1px solid #376FA0;
}

.events_sec .col .btn,
.upcoming_events .col .btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    font-weight: 500;
}

/* For event card columns responsiveness */
@media (max-width: 992px) {

    .events_sec .colin,
    .upcoming_events .colin {
        width: 50%;
    }
}

@media (max-width: 576px) {

    .events_sec .colin,
    .upcoming_events .colin {
        width: 100%;
    }
}

.districts_sec {
    padding: 62px 0 168px;
    background-image: url(../images/site/districts_bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

.districts_sec .wrapper {
    padding: 0px 80px;
}

.districts_sec h2 {
    text-align: center;
    margin-bottom: 30px;
}

.districts_sec h2::after {
    left: 0;
    margin: 0 auto;
}

.districts_sec .col {
    width: 214px;
    height: 214px;
    border-radius: 50%;
    border: 1px solid #bdcee6;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;
    text-align: center;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.districts_sec .col:hover {
    border-color: #0a44a0;
}

.districts_sec .col h4 {
    font-size: 22px;
    font-weight: 300;
}

.districts_sec .col h5 {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
}

.districts_sec .col .tel {
    font-size: 24px;
    font-weight: 300;
    border-top: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
    line-height: 45px;
    color: var(--blue);
    margin: 8px 0px;
}

.districts_sec .col .text a:not(.tel) {
    display: block;
    text-align: center;
    max-width: 28px;
    margin: 0 auto;
}

.districts_sec .col .btn {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -25px;
    margin: 0 auto;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
}

.districts_sec .col .btn img {
    margin-right: 5px;
    width: 17px;
    height: 17px;
    position: relative;
    top: 1px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.logos_iteam {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 35px 0;
}

.logos_iteam a:hover {
    transform: scale(0.9);
}

.logos_iteam a:nth-child(2) {
    margin: 0px 131px;
}

.logos_iteam a img {
    max-height: 91px;
}


/* owl  */
.owl-nav {
    position: absolute;
    top: 150px;
    width: 100%;
    left: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transform: scale(1);
    transform-origin: center;
}

.owl-nav>div {
    position: relative;
    font-size: 0px;
    border-radius: 50%;
    background-color: #eaeef7;
    width: 110px;
    height: 110px;
    background-image: url(../images/site/arrow_right300.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
    pointer-events: all;
    right: -70px;
    transition: 0.4s ease all;
}

.owl-nav>div:hover {
    box-shadow: 0px 0px 10px var(--bluelight);
}

.owl-nav>div.owl-next {
    transform: scale(-1);
    right: auto;
    left: -70px;
}

.owl-dots {
    position: absolute;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.owl-dots .owl-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--bluedark);
    margin: 0px 2.5px;
}

.owl-dots .owl-dot.active {
    background-color: var(--bluedark);
}

/* Push */

.mobile_only {
    display: none;
}

/* Footer */
body footer {
    background-color: #EBF3F9 !important;
    position: relative;
    padding-top: 28px;
    padding-bottom: 0;
}

footer .mobile_only {
    display: none;
}

footer .contribution {
    height: 48px;
    border-radius: 40px;
    background-color: #dce2ec;
    color: var(--blue);
    padding: 0px 14px;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    left: 0px !important;
    top: 0px !important;
    width: fit-content;
    margin: 0 auto;
    margin-bottom: 25px;
    font-weight: 600;
}

footer .contribution img {
    margin-left: 6px;
    width: 20px;
    position: relative;
    top: -2px;
}

footer .star_col {
    position: relative;
    top: -80px;
    display: none;
}

footer .star_col a {
    color: var(--white);
    text-align: center;
    font-size: 25.5px;
    font-weight: 900;
}

footer .star_col a span {
    font-weight: 300;
}

footer .star_col a img {
    display: block;
    margin: 0 auto;
}

footer .wrap {
    max-width: 765px;
    margin: 0 auto;
}

footer .text {
    border-top: 2px solid #ffffff7e;
    border-bottom: 2px solid #ffffff7e;
}

footer .text p {
    font-size: 20px;
    color: var(--white);
    text-align: center;
    font-weight: 300;
    line-height: 1.2;
    padding: 20px 0;
}

footer .wraper {
    max-width: 1366px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 25px;
}

footer .col:first-child {
    width: 22%;
}

footer .col:first-child p {
    margin-bottom: 5px;
}

footer .col {
    width: fit-content;
}

footer .col h3 {
    font-size: 32px;
    font-weight: 500;
    color: var(--white);
    margin-bottom: 20px;
}

footer .col li {
    margin-bottom: 5px;
}

footer .col li a {
    font-weight: 200;
}

footer .col p,
footer .col a {
    color: var(--white);
    font-weight: 200;
}

footer .footer_bottom {
    background-color: #dde5f2;
}

footer .footer_bottom p {
    color: var(--blue);
    line-height: 40px;
    text-align: center;
}

.comman_sec {
    background-color: var(--bluelight2);
    padding-bottom: 10rem;
}

.comman_sec .right_col {
    width: 322px;
    padding-top: 50px;
}

.comman_sec .left_col {
    width: unset !important;
    background-color: var(--white);
    box-shadow: 0px 0px 25px 15px #0000001f;
    /* box-shadow: 0px 0px 20px #0000001f; */
    border-radius: 0 0 12px 12px;
}

.fliter_link {
    border-radius: 12px;
    overflow: hidden;
    background-color: var(--white);
    box-shadow: 0px 0px 20px #0000001f;
}

.fliter_link .title {
    background-color: var(--blue);
    padding: 16px 0px;
}

.fliter_link .title h3 {
    color: var(--white);
    font-size: 29px;
    font-weight: 400;
    padding: 0px 23px;
}

.fliter_link .search {
    height: 66px;
    width: calc(100% - 40px);
    position: relative;
    margin: 20px auto 10px;
}

.fliter_link .search .in {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border: 1px solid var(--blue);
    border-radius: 40px;
    color: var(--black);
    font-size: 21.5px;
    padding-right: 14px;
}

.fliter_link .search .sub {
    position: absolute;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
    height: 43px;
    width: 43px;
    border-radius: 50%;
    background-color: var(--bluedark);
    font-size: 0px;
    background-image: url(../images/site/search300.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 25px;
}


.fliter_link ul li a {
    line-height: 59px;
    border-bottom: 1px solid #b0b0b0;
    display: block;
    position: relative;
    padding-right: 28px;
    font-size: 16px;
    color: var(--gray);
}

.fliter_link ul li:last-child a {
    border-bottom: 0;
}

.fliter_link ul li a::before {
    content: '';
    background-image: url(../images/site/blue-k.svg);
    background-repeat: no-repeat;
    width: 13px;
    height: 13px;
    display: block;
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    margin: auto;
    transform: rotate(90deg);
}

.fliter_link ul li a:hover,
.fliter_link ul li a.active {
    color: var(--blue);
    font-weight: 600;
}

.fliter_link .address {
    padding: 30px 28px 15px;
    border-bottom: 1px solid var(--blue);
}

.fliter_link .address p {
    position: relative;
    padding-right: 24px;
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 400;
}

.fliter_link .address p a {
    font-size: 16px;
}

.fliter_link .address p img {
    position: absolute;
    right: 0;
    top: 5px;
    max-width: 16px;
}

.fliter_link .address p:nth-child(1) img {
    top: 3px;
    max-width: 18px;
}

.fliter_link .address p:nth-child(2) img {
    top: 0px;
    max-width: 17px;
}


.comman_sec .right_col .link {
    margin-top: 37px;
    margin-bottom: 100px;
}

.comman_sec .right_col .link a {
    text-align: center;
    color: var(--blue);
    font-size: 16px;
    font-weight: 500;
}

.comman_sec .right_col .link a span {
    width: 93px;
    height: 93px;
    margin-bottom: 2px;
    border-radius: 50%;
    border: 1px solid var(--blue);
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
}

.comman_sec .right_col .link a span img {
    max-height: 54px;
}

.breadcrumb_sec {
    background-image: url(../images/site/bb_layer.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 30px 32px;
    border-radius: 12px 12px 0px 0px;
    margin-top: -62px;
    width: 100%;
}

.breadcrumb_sec a,
.breadcrumb_sec p,
.breadcrumb_sec em {
    font-size: 18px;
    font-style: normal;
    color: var(--white);
    font-weight: 300;
}

.breadcrumb_sec p {
    font-weight: 500;
}

.breadcrumb_sec em {
    margin: 1px 6px 0px 6px;
    font-size: 0;
    background: url(../images/site/breadcum-arrow.svg) 0 center no-repeat;
    width: 6px;
    height: 11px;
    vertical-align: middle;
    display: inline-block;
}

.breadcrumb_sec h1 {
    font-size: 47px;
    color: var(--white);
    font-weight: 400;
    line-height: 1;
}

.comman_sec .contains_sec {
    padding: 20px 40px 80px;
    position: relative;
}

.comman_sec .contains_sec .btn {
    position: absolute;
    bottom: -33px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    padding: 21px 50px;
}

.comman_sec .contains_sec h4 {
    font-size: 20.5px;
    color: var(--blue);
    line-height: 1.2;
    font-weight: bold;
    margin: 20px 0;
}

.comman_sec .contains_sec p,
.comman_sec .contains_sec ul li {
    font-size: 16px;
    color: var(--black);
    line-height: 1.2;
    font-weight: 500;
}

.comman_sec .contains_sec p {
    margin-top: 20px;
}

.comman_sec .contains_sec ul li {
    margin-bottom: 5px;
}

.comman_sec .contains_sec p img {
    max-width: 275px;
    display: block;
}

.comman_sec .contains_sec p:has(img) {
    padding: 15px;
    border-radius: 12px;
    border: 2px solid #999999;
    float: right;
    margin-left: 15px;
}


.w_full .left_col {
    width: 100% !important;
}

.event_sec .left_col {
    width: 100% !important;
    padding: 85px 65px 60px;
}

.event_sec .right_in {
    width: 480px;
}

.event_sec .left_in {
    width: calc(100% - 525px);
}

.event_sec .right_in ul {
    margin-bottom: 25px;
}

.event_sec .right_in ul li {
    align-items: flex-start;
    border-bottom: 2px solid #c7c7c7;
    padding: 13px 0px;
}

.event_sec .right_in ul li:first-child {
    padding-top: 0px;
}

.event_sec .right_in ul li .img {
    width: 31px;
    padding-top: 2px;
}

.event_sec .right_in ul li .img img {
    width: 24px;
}

.event_sec .right_in ul li .text {
    width: calc(100% - 40px);
}

.event_sec .right_in ul li h3 {
    font-size: 24px;
    font-weight: 400;
    color: #0068ae;
}

.event_sec .right_in ul li p {
    font-size: 16px;
    font-weight: 500;
}

.event_sec .right_in ul li a {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 17px;
    color: #0068ae;
    margin-top: 8px;
}

.event_sec .right_in ul li a img {
    margin-left: 5px;
}

.event_sec .website_col {
    position: relative;
}

.event_sec .website_col a {
    font-weight: 600;
    font-size: 17px;
}

.event_sec .website_col a.btn {
    padding: 17px 23px;
}

.event_sec .website_col a img {
    margin-left: 5px;
    position: relative;
    top: 0px;
    vertical-align: middle;
}

.event_sec .website_col a.btn img {
    transition: none;
    -webkit-transition: none;
    -moz-transition: none;
}

.event_sec .website_col .add_diary {
    color: var(--red);
}

.event_sec .website_col .add_diary:hover {
    color: var(--white);
    background-color: var(--red);
}

.event_sec .website_col .add_diary:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(2981%) hue-rotate(355deg) brightness(110%) contrast(100%);
}

.event_sec .website_col .website {
    color: var(--white);
    background-color: var(--red);
    /* margin-right: 14px; */
}

.event_sec .website_col .website:hover {
    color: var(--red);
    background-color: var(--white);
    border-color: var(--red);
}

.event_sec .website_col .website:hover img {
    filter: brightness(0) saturate(100%) invert(16%) sepia(67%) saturate(5341%) hue-rotate(349deg) brightness(79%) contrast(98%);
}

.event_sec .website_col .add_diary img {
    width: 18px;
}

.event_sec .website_col .website img {
    width: 25px;
}

.event_sec .website_col .social_col {
    width: 56px;
    height: 56px;
    position: absolute;
    left: 0;
    top: 0;
}

.event_sec .website_col .social_col .socialicon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--blue);
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.event_sec .website_col .social_col .socialicon img {
    width: 26px;
}

.event_sec .website_col .social_col .swrap {
    padding: 65px 5px 15px;
    border: 1px solid var(--blue);
    border-radius: 50px;
    background-color: var(--white);
    position: absolute;
    top: 0;
    left: 0;
    box-shadow: 0px 0px 10px #00000052;
    transition: 0.5s ease all;
    opacity: 0;
}

.event_sec .website_col .social_col:hover .swrap {
    opacity: 1;
}

.event_sec .website_col .social_col .swrap a {
    width: 45px;
    height: 45px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.event_sec .website_col .social_col .swrap a+a {
    margin-top: 10px;
}

.event_sec .website_col .social_col .swrap a img {
    max-height: 40px;
    margin: 0 !important;
}

.event_sec .website_col .social_col .swrap a:hover img {
    filter: brightness(0) saturate(100%) invert(20%) sepia(98%) saturate(1441%) hue-rotate(203deg) brightness(93%) contrast(104%);
    transform: scale(0.8);
}


.event_sec .right_in label {
    background-color: #efefef;
    padding: 38px;
    border-radius: 12px;
    display: block;
    margin-top: 45px;
    font-size: 16px;
    font-weight: 400;
    color: var(--black);
    line-height: 1.5;
}

.left_col.d_flex.d_flex_jb .right_in label {
    padding: 12px;
}


.event_sec .left_in .event_image img {
    max-width: 100%;
    display: block;
    border-radius: 12px;
    height: 415px;
    object-fit: cover;
}

.events_interest {
    margin-top: 35px;
}

.events_interest h2 {
    font-size: 22px;
    font-weight: 600;
    color: #2e4679;
    margin-bottom: 12px;
}

.events_interest .wrap_ev .col {
    border: 2px solid #d0d0d0;
    border-radius: 12px;
    padding: 15px;
    width: calc(50% - 19px);
}

.events_interest .wrap_ev .col .img {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
}

.events_interest .wrap_ev .col .img img {
    display: block;
    max-width: 100%;
    border-radius: 12px;
}

.events_interest .wrap_ev .col .dis {
    width: calc(100% - 65px);
    padding-right: 15px;
}

.events_interest .wrap_ev .col p {
    font-size: 16px;
    line-height: 1.3;
    margin-top: 13px;
    font-weight: 500;
}

.events_interest .wrap_ev .col .date {
    width: 65px;
    background-color: var(--blue);
    color: var(--white);
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: 600;
    padding: 10px 15px 30px;
    text-align: center;
    line-height: 1.1;
    border-radius: 10px 0px 0px 10px;
    align-items: flex-start;
    align-content: flex-start;
}

.events_interest .wrap_ev .col .date em {
    font-style: normal;
    width: 100%;
    text-align: center;
    font-size: 40px;
    font-weight: 300;
}

.events_interest .wrap_ev .col h3 {
    font-size: 20px;
    font-weight: 600;
}

.team_details {
    padding: 50px 50px 30px;
}

.team_details h2 {
    margin-bottom: 25px;
    font-size: 24px;
    font-weight: 700;
}

.team_details h2 span {
    color: var(--blue);
    font-size: 17px;
    font-weight: 400;
    display: block;
    margin-top: 6px;
    margin-bottom: 6px;
}

.team_details .right {
    width: 297px;
}

.team_details .left {
    width: calc(100% - 297px);
    padding-right: 47px;
}

.team_details .left p {
    margin-top: 25px;
    font-weight: 500;
}

.team_col {
    border: 2px solid #cdcdcd;
    padding: 11px 11px 11px 11px;
    border-radius: 12px;
    position: relative;
    display: table;
    width: 100%;
}

.team_col .img {
    margin-bottom: 11px;
}

.team_col .img img {
    border-radius: 12px;
    vertical-align: top;
    width: 100%;
}

.team_col a:not(.btn) {
    line-height: 42px;
    display: flex;
    font-size: 16px;
    background-color: #e2e9f4;
    color: var(--blue);
    justify-content: flex-start;
    width: 100%;
    border-radius: 10px;
    margin-top: 6px;
    align-items: center;
    padding: 0px 18px;
}

.team_col a:not(.btn) img {
    margin-left: 5px;
    max-width: 20px;
}

.team_col a:not(.btn):hover {
    color: var(--white);
    background-color: var(--blue);
}

.team_col a:not(.btn):hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(156deg) brightness(100%) contrast(103%);
}

.team_col a.btn {
    position: absolute;
    bottom: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
}

.team_col a.btn img {
    margin-left: 5px;
    max-width: 22px;
    height: auto;
}

.team_col a.btn:hover img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(156deg) brightness(100%) contrast(103%);
}

.team_blog {
    padding: 40px 23px;
    position: relative;
}

.team_blog .team_col {
    margin: 0px 23px;
    width: calc(25% - 46px);
    margin-bottom: 85px;
    padding-bottom: 65px;
}

.team_blog>.btn {
    position: absolute;
    bottom: -33px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    color: var(--white);
    background-color: var(--red);
    box-shadow: 0px 0px 10px #000000a6;
}

.team_blog>.btn img {
    margin-right: 5px;
}

.news_blog {
    padding: 40px 15px 220px;
    position: relative;
}

.news_blog .wrap_ev .col {
    border: 2px solid #d0d0d0;
    border-radius: 12px;
    padding: 15px;
    width: calc(33.33% - 34px);
    margin: 0px 17px 30px;
}

.news_blog .wrap_ev .col .img {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 25px;
}

.news_blog .wrap_ev .col .img img {
    display: block;
    max-width: 100%;
    border-radius: 12px;
}

.news_blog .wrap_ev .col .dis {
    width: calc(100% - 75px);
    padding-right: 20px;
}

.news_blog .wrap_ev .col p {
    font-size: 20px;
    line-height: 1.3;
    margin-top: 13px;
}

.news_blog .wrap_ev .col .date {
    width: 75px;
    background-color: var(--blue);
    color: var(--white);
    display: flex;
    flex-wrap: wrap;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 9px 30px;
    text-align: center;
    line-height: 1.1;
    border-radius: 10px 0px 0px 10px;
    align-items: flex-start;
    align-content: flex-start;
}

.news_blog .wrap_ev .col .date em {
    font-style: normal;
    width: 100%;
    text-align: center;
    font-size: 60px;
    font-weight: 300;
}

.news_blog .wrap_ev .col h3 {
    font-size: 22px;
    font-weight: 600;
}

.news_blog>.btn {
    position: absolute;
    bottom: -33px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    padding: 21px 50px;
    /* box-shadow: 0px 0px 10px #000000a6; */
}

.news_blog>.btn:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    transform: rotate(45deg);
    border-bottom: 0.15rem solid var(--blue);
    border-left: 0.15rem solid var(--blue);
    margin-right: 7px;
    transition: all 0.4s ease;
}

.news_blog>.btn:hover:after {
    border-color: var(--white);
}

.news_blog>.btn img {
    display: none;
}

.news_blog .pagination {
    margin-top: 25px;
}


.pagination a {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    color: var(--black);
    font-size: 19.5px;
    font-weight: 400;
    text-align: center;
    line-height: 25px;
}

.pagination a:hover,
.pagination a.active {
    color: var(--white);
    background-color: var(--blue);
}

.pagination a.active {
    pointer-events: none;
}

.pagination a.next {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination a.next img {
    display: none;
}

.pagination a.next:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    transform: rotate(45deg);
    border-bottom: 0.15rem solid var(--blue);
    border-left: 0.15rem solid var(--blue);
    transition: all 0.4s ease;
    margin-left: 4px;
}

.pagination a.next:hover:after {
    border-color: var(--white);
}

.pagination a.prev {
    display: flex;
    align-items: center;
    justify-content: center;
}

.pagination a.prev img {
    display: none;
}

.pagination a.prev:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    transform: rotate(45deg);
    border-top: 0.15rem solid var(--blue);
    border-right: 0.15rem solid var(--blue);
    transition: all 0.4s ease;
    margin-right: 4px;
}

.pagination a.prev:hover:after {
    border-color: var(--white);
}

.about_links {
    padding: 40px 40px 100px;
    position: relative;
}

.about_links ul li {
    width: calc(50% - 26px);
    margin-bottom: 30px;
}

.about_links ul li a {
    background-color: #f0f0f0;
    line-height: 68px;
    font-size: 22px;
    color: var(--gray);
    padding: 0px 54px 0px 20px;
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
}

.about_links ul li a span {
    width: 35px;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background-color: #517abc;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about_links ul li a span img {
    width: 15px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
}

.about_links ul li a:hover {
    box-shadow: 0px 9px 10px #0000001c;
}

.about_links>.btn {
    position: absolute;
    bottom: -33px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    padding: 21px 50px;
    /* box-shadow: 0px 0px 10px #000000a6;  */
}

.about_links>.btn:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    transform: rotate(45deg);
    border-bottom: 0.15rem solid var(--blue);
    border-left: 0.15rem solid var(--blue);
    margin-right: 7px;
    transition: all 0.4s ease;
}

.about_links>.btn:hover:after {
    border-color: var(--white);
}

.about_links>.btn img {
    display: none;
}

.contact_form {
    padding: 50px 40px 100px;
    position: relative;
}

.contact_form h3 {
    font-size: 27px;
    font-weight: 400;
    margin-bottom: 25px;
}

.contact_form h5 {
    font-size: 23px;
    font-weight: 600;
    margin-bottom: 23px;
}

.contact_form .col {
    padding: 18px 35px 23px;
    border: 1px solid #eaeaea;
    margin-bottom: 10px;
}

.contact_form .col:last-child {
    margin-bottom: 0;
}

.contact_form .col .in {
    height: 50px;
    border: none;
    border-bottom: 2px solid #cbcbcb;
    color: var(--black);
    ;
    font-size: 23px;
    font-weight: 100;
    width: 100%;
    cursor: pointer;
}

.contact_form .col .in:focus {
    border-color: var(--blue);
}

.contact_form .col .in.error {
    border-color: var(--red);
}

.contact_form .col textarea.in {
    height: 200px;
    resize: none;
    border: none;
    background-image: url(../images/site/libe.png);
    background-repeat: repeat-y;
    line-height: 50px;
}

.contact_form .col label {
    color: #7c7c7c;
    font-size: 23px;
    font-weight: 600;
    cursor: pointer;
    margin-left: 12px;
}

.contact_form .col label:last-child {
    margin-left: 0;
}

.contact_form .col label input {
    margin-left: 2px;
}

.contact_form .btn {
    position: absolute;
    bottom: -33px;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 164px;
    box-shadow: 0px 0px 10px #00000038;
    padding: 21px 50px;
}

.admin_list {
    padding: 30px 40px;
}

.admin_list ul {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #cfcfcf;
}

.admin_list ul li {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 215px;
}

.admin_list ul li p,
.admin_list ul li a {
    line-height: 60px;
    color: var(--gray);
    font-size: 16px;
    font-weight: 400;
}

.admin_list ul li img {
    margin-left: 5px;
    max-width: 17px;
    height: auto;
}

.admin_list ul li+li {
    width: 150px;
}

.admin_list ul li+li+li {
    width: 250px;
}


.overlay {
    background-color: #00000086;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: 0.4s ease all;
}

.overlay.active {
    opacity: 1;
    pointer-events: all;
}

.overlay .close {
    position: absolute;
    right: 20px;
    top: 20px;
    cursor: pointer;
}

.overlay .btn {
    position: absolute;
    bottom: -33px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: fit-content;
    display: block;
}


.overlay .inner {
    background-color: var(--white);
    border-radius: 12px;
    text-align: center;
}

.overlay .h2 {
    font-size: 32px;
    font-weight: 400;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.overlay .h2:after {
    width: 100px;
    height: 3px;
    left: 0;
    margin: 0 auto;
}

.overlay em {
    font-style: normal;
    color: var(--blue);
}

.login_system .breadcrumb_sec {
    text-align: center;
}

.login_system .breadcrumb_sec .links {
    justify-content: center;
}

.step_warapper {
    background-color: var(--white);
    padding: 40px 100px 20px;
    min-height: 555px;
}

.step_title {
    display: flex;
    justify-content: center;
    align-items: center;
}

.step_title li {
    width: 230px;
    position: relative;
    font-size: 22px;
    text-align: center;
    font-weight: 400;
    color: #c9c9c9;
}

.step_title li::after {
    content: '';
    position: absolute;
    right: 100px;
    top: 30px;
    height: 1px;
    background-color: #c9c9c9;
    width: calc(100% - 10px);
}

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

.step_title li span {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #c9c9c9;
    font-size: 34px;
    color: #c9c9c9;
    font-weight: 400;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    margin-bottom: 12px;
    background-color: var(--white);
    z-index: 2;
    position: relative;
}

.step_title li.active span {
    color: var(--red);
    border-color: var(--red);
}

.step_title li.active {
    color: var(--red);
}


.step_wrap {
    margin-top: 60px;
}

.step_contant {
    display: none;
    padding-bottom: 30px;
}

.step_contant.active {
    display: block;
}

.step_contant h3 {
    font-size: 26px;
    font-weight: 400;
    text-align: center;
    color: #0068ae;
    margin-bottom: 30px;
}

.step_contant .colin {
    width: 335px;
    margin: 0 auto;
    display: block;
    margin-bottom: 35px;
    position: relative;
}

.step_contant .colin .in {
    border: none;
    border-bottom: 2px solid #c4c4c4;
    width: 100%;
    font-size: 22px;
    color: #c4c4c4;
    padding-bottom: 5px;
}

.step_contant .colin .in:focus {
    border-color: var(--blue);
}

.step_contant .btn {
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}






.step_contant .btn img {
    display: none;
}

.step_contant .btn:after {
    content: '';
    display: block;
    height: 8px;
    width: 8px;
    transform: rotate(45deg);
    border-bottom: 0.15rem solid var(--blue);
    border-left: 0.15rem solid var(--blue);
    margin-right: 7px;
    transition: all 0.4s ease;
}e 

.step_contant .btn:hover:after {
    border-color: var(--white);
}

.step_contant#step1 .colin .in {
    padding-left: 88px;
}

.step_contant#step1 .colin select {
    width: 81px;
    height: 29px;
    color: #575756;
    font-size: 25px;
    border: none;
    position: absolute;
    left: 0;
    top: 0px;
    outline: none !important;
    background-image: url(../images/site/dropdown_arrow_blue.svg);
    background-size: 18px auto;
    background-repeat: no-repeat;
    background-position: left center;
    padding-right: 15px;
    border-right: 2px solid #575756;
    line-height: 29px;
    background-color: transparent;
}

.calander_col {
    border: 2px solid #acacac;
    border-radius: 100px;
    margin: 0 auto;
    padding: 15px 25px;
    max-width: 760px;
    margin-bottom: 40px;
}

.calander_col .cal {
    width: 25%;
    text-align: center;
}

.calander_col .cal img {
    max-height: 40px;
}

.calander_col span {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 20px;
    color: var(--black);
    font-weight: 400;
    margin-top: 0px;
}

.step_contant h4 {
    font-size: 34.55px;
    font-weight: 400;
    color: #2460da;
    margin-left: 20px;
}

.step_contant .colwrap {
    margin-bottom: 40px;
}

select {
    width: 60px;
    height: 48px;
    color: #515151;
    font-size: 28px;
    border: none;
    outline: none !important;
    background-image: url(../images/site/drop.png);
    background-repeat: no-repeat;
    background-position: left 7px center;
    padding-right: 7px;
    border: 2px solid #919191;
    line-height: 30px;
    margin-left: 20px;
}

.step_contant .colwrap textarea {
    width: 360px;
    border: 2px solid #919191;
    height: 48px;
    color: #afafaf;
    font-size: 28px;
    padding-right: 15px;
}

.step_contant#step4 h3 {
    font-size: 56px;
    margin-bottom: 45px;
}

.step_contant .wrap {
    max-width: 1660px;
    justify-content: space-between !important;
}

.step_contant .order {
    width: calc(50% - 23px);
    padding: 48px 50px;
    border-radius: 12px;
    border: 1px solid #0068ae;
    margin-bottom: 46px;
    box-shadow: 0px 0px 20px #0068ae73;
}

.step_contant .order h5,
.step_contant .order p {
    font-size: 31px;
}

.step_contant .order h5 {
    color: #0068ae;
    font-weight: bold;
}

.step_contant .order p {
    color: #000000;
    font-weight: 400;
}

.step_contant .btn[type="submit"] {
    color: var(--white);
    background-color: var(--red);
    cursor: pointer;
}

.step_contant .btn[type="submit"]:hover {
    opacity: 0.8;
}

.step_contant .btn[type="submit"]:after {
    border-color: var(--white);
}

.step_contant .btn[type="submit"] img {
    display: none;
}

.mobile_onlytitle {
    display: none;
}


.news_updates .col .img,
.events_sec .col .img,
.upcoming_events .col .img,
.our_chance .col img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 12px 12px 0px 0px;
}

.our_chance .col img {
    border-radius: 12px;
}

.mob_layer .contribution {
    display: none;
}

.addsStrip {
    display: none;
}


/* from style */

.freeFormInstractions table {
    border: 1px solid black !important;
}

.freeFormInstractions td {
    border: 1px solid black !important;
}

/*   .ts-input label {
    color: unset !important;
  } */

.formLableBox {
    float: right;
    width: 45%;
    text-align: center;
}

.freeFormSubmit {
    float: right;
    margin-right: 40%;
    padding: 10px;
    background: orange;
    font-weight: bold;
    margin-top: 20px;
}

.freeFormText {
    width: 111%;
    border-radius: 2px !important;
    border-width: 1px;
    border-style: inset;
    border-color: rgb(118, 118, 118);
    border-image: initial;
    flex: 1.2;
}


.freeFormTextArea {
    border-radius: 2px !important;
    border-width: 1px;
    border-style: inset;
    border-color: rgb(118, 118, 118);
    border-image: initial;
}

.freeFormTextArea {
    width: 100%;
}

.red {
    color: red;
}

.checkBoxDiv {
    border: solid 1px;
    border-radius: 10px;
    margin-top: 10px;
    width: fit-content;
    padding: 5px;
    cursor: pointer;
}

.freeFromLine label {
    font-size: 17px;
    /*  flex: 1; */
    width: 100%;
}

.freeForm {
    /* width: 50%; */
    margin-right: 25%;
    background: #fff;
    border: 1px solid gray;
    padding: 1% !important;
}

.ts-main--width.form201 {
    margin-right: auto;
}

@media (max-width: 992px) {
    .freeForm {
        width: 75%;
        margin-right: 12.5%;
    }
}

@media (max-width: 650px) {
    .freeForm {
        width: 88%;
        margin-right: 6%;
    }
}

.freeForm ul {
    padding: 0;
}

.block-border--content form {
    display: block !important;
}

.freeForm .ts-input.input-submit {
    display: flex;
}

#regform input {
    padding: 10px;
    border-radius: 7px !important;
}

.formInfoBox,
legend,
.radiogroup legend {
    font-size: 16px !important;
    line-height: normal;
}

.formInputBox.form-checkbox {
    text-align: right;
}

.formInfoBox,
legend,
.radiogroup legend {
    font-size: 16px !important;
    line-height: normal;
}

.freeFromLine {
    border-bottom: 1px solid gray;
    display: block;
    float: right;
    padding-bottom: 10px;
    padding-top: 10px;
    width: 100%;
}

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

.formInputBox {
    float: right;
    width: 49%;
    margin-right: 1%;
    text-align: center;
}

.formInputBox.form-checkbox {
    text-align: right;
}

.block-border--content form .freeFromLine .ts-input select {
    width: 100% !important;
}

.block-border--content form .freeFromLine .ts-input input {
    width: 100% !important;
}

.full_height {
    height: 100dvh;
}


.flex_1 {
    flex: 1;
}

.flex-column {
    flex-direction: column;
}

.my_kabalot_header {
    margin-right: 10%;
    margin-top: 8rem;
}

.gencon_inn {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 3rem;
}

.userOrderList {
    width: 80%;
    margin-right: 10%;
}

.mt1 {
    margin-top: 1rem !important;
}

.mb1 {
    margin-bottom: 1rem !important;
}

.mb2 {
    margin-bottom: 2rem !important;
}

.mb3 {
    margin-bottom: 3rem !important;
}

.mb4 {
    margin-bottom: 4rem !important;
}

.mt4 {
    margin-top: 4rem !important;
}

.mb-5-em {
    margin-bottom: 5em;
}

.accordion1 {
    width: 750px;
    margin-right: 105px;
    margin-bottom: 30px;
    float: right;
}

/* .img {
    object-fit: contain;
    height: 200px;
} */

.my_events_header {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user_order_list_table {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 80%;
    /* Center and adjust the width */
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    direction: rtl;
    /* Ensure RTL direction */
}

/* Row styling */
.user_order_list_row {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

.user_order_list_row:last-child {
    border-bottom: none;
}

.user_order_list_header {
    background-color: #f5f5f5;
    font-weight: bold;
}

.user_order_list_cell {
    flex: 1;
    text-align: center;
    padding: 8px;
    border-left: 1px solid #ccc;
    /* Border on the left for RTL */
}

.user_order_list_cell:last-child {
    border-left: none;
    /* No border for the last child (on the left in RTL) */
}

/* Styling for alternating row colors */
.user_order_list_table .user_order_list_row:nth-child(even) {
    background-color: #f9f9f9;
}

.user_order_list_table .user_order_list_row:nth-child(odd) {
    background-color: #ffffff;
}

/* Responsive design for mobile */
@media (max-width: 768px) {
    .user_order_list_table {
        width: 100%;
        /* Full width on mobile */
    }

    .user_order_list_row {
        flex-direction: column;
        /* Stack cells vertically */
        align-items: flex-start;
        /* Align content to start */
    }

    .user_order_list_cell {
        text-align: right;
        /* Align content to the right */
        width: 100%;
        /* Full width */
        border-left: none;
        /* Remove left border on mobile */
        padding: 10px 0;
        /* Add padding to the top and bottom */
        border-bottom: 1px solid #ccc;
        /* Separate cells */
    }

    .user_order_list_cell:last-child {
        border-bottom: none;
        /* No bottom border for the last cell */
    }

    .user_order_list_header {
        display: none;
        /* Hide table headers on mobile */
    }

    /* Add labels for mobile to make the table more readable */
    .user_order_list_cell:before {
        content: attr(data-label);
        /* Add content before each cell */
        font-weight: bold;
        margin-right: 10px;
    }
}

.navigation_bar {
    display: flex;
    flex-direction: column;
    margin-top: 1rem;
}

.icon-printer {
    width: 48px;
    height: 48px;
    position: relative;
    overflow: hidden;
    margin-left: 25px;
    margin-bottom: 25px;
}

.icon-printer .printer-body {
    width: 80%;
    height: 42%;
    position: absolute;
    left: 50%;
    bottom: 5%;
    margin-left: -40%;
    background-color: #000;
    border-radius: 25% 25% 75% 75%;
}

.icon-printer .printer-top {
    width: 60%;
    height: 15%;
    position: absolute;
    left: 50%;
    top: 46%;
    margin-left: -30%;
    background-color: #151517;
    border-radius: 20%;
}

.icon-printer .printer-bottom {
    width: 60%;
    height: 60%;
    position: absolute;
    left: 50%;
    bottom: -38%;
    margin-left: -30%;
    background-color: #151517;
    border-radius: 15%;
}

.icon-printer .printer-file-bottom {
    width: 50%;
    height: 16%;
    position: absolute;
    left: 50%;
    bottom: 3%;
    margin-left: -25%;
    background-color: #000;
    border-radius: 20%;
}

.icon-printer .printer-file-top {
    width: 50%;
    height: 34%;
    position: absolute;
    left: 50%;
    margin-left: -25%;
    top: 23%;
    background-color: #000;
    border-radius: 10%;
}

.icon-printer .printer-dot {
    width: 6%;
    height: 6%;
    position: absolute;
    top: 65%;
    background-color: #151517;
    border-radius: 100%;
}

.icon-printer .printer-line {
    width: 24%;
    height: 4%;
    position: absolute;
    background-color: #151517;
    border-radius: 15%;
}

.user_order_list_navbar {
    background-color: #f8f9fa;
    /* Light background for the navbar */
    padding: 10px 0;
    border-bottom: 2px solid #ccc;
    /* Bottom border for separation */
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

.user_order_list_nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    /* Center align the nav items */
    gap: 15px;
    /* Space between items */
    flex-wrap: wrap;
    /* Allow wrapping of nav items for responsiveness */
}

.user_order_list_nav_item {
    display: inline-block;
}

.user_order_list_nav_item a {
    text-decoration: none;
    color: #007bff;
    /* Bootstrap's default link color */
    font-weight: bold;
    padding: 8px 15px;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.user_order_list_nav_item a:hover {
    background-color: #e9ecef;
    /* Light hover background */
    color: #0056b3;
    /* Darker hover color */
}

.user_order_list_nav_item a.active {
    background-color: #0056b3;
    /* Active background color */
    color: white;
    /* Active text color */
}


/* Responsive design for mobile */
@media (max-width: 768px) {
    .user_order_list_nav {
        flex-direction: column;
        /* Stack items vertically on small screens */
        gap: 10px;
        /* Smaller gap between items */
    }

    .user_order_list_nav_item {
        width: 100%;
        /* Make each item take the full width on mobile */
        text-align: center;
    }

    .user_order_list_nav_item a {
        display: block;
        padding: 10px;
        font-size: 16px;
    }
}

/* Schema 90: inline menu on desktop, hamburger drawer only below 1280px
   (drawer layout itself lives in responsive.css, max-width: 1279px block) */
header:not(.billy-header) .right_col {
    min-width: 0;
}

/* the 80px logo↔menu gap is DESKTOP-only: on mobile .right_col is the
   slide-in panel and any margin pushes it (and the hamburger) off the edge */
@media only screen and (min-width: 768px) {
    header:not(.billy-header) .right_col {
        margin-right: 80px;
    }
}

/* the logo copy inside the drawer is a mobile-only element */
header:not(.billy-header) .right_col .mob_layer .menu-logo {
    display: none;
}

/* one vertical axis for the whole menu row (links, pill, search icon) */
header:not(.billy-header) .right_col .mob_layer > ul {
    align-items: center;
}

/* The very first top_bar item: outlined pill, ExtraBold.
   The pill lives on the <li>, NOT the <a>: when that item has a dropdown the
   markup is `<a>label</a><span>chevron</span><ul class="submenu">`, so a border
   on the <a> left the chevron hanging outside the pill. Bordering the <li>
   wraps label + chevron together. The submenu is absolutely positioned on
   desktop, so it never stretches the pill. */
header:not(.billy-header) .right_col .mob_layer > ul > li:first-child {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--blue);
    border-radius: 26px;
    padding: 7px 16px;
}

header:not(.billy-header) .right_col .mob_layer > ul > li:first-child > a {
    display: inline-block;
    border: 0;
    border-radius: 0;
    padding: 0;
    color: var(--blue);
    font-size: 20px;
    font-weight: 800;
}

/* ...and its dropdown arrow is blue to match that label. The shared drop.png is
   dark, so swap in the blue vector the selects and filter chevrons already use
   (dropdown_arrow_blue.svg, path filled #0268B3) instead of filtering a raster. */
header:not(.billy-header) .right_col .mob_layer > ul > li:first-child > span {
    width: 12px;
    height: 8px;
    background: url(../images/site/dropdown_arrow_blue.svg) center / 12px 8px no-repeat;
}

header:not(.billy-header) .right_col .mob_layer > ul > li:first-child > span img {
    display: none;
}

@media only screen and (max-width: 767px) {
    header:not(.billy-header) .right_col .mob_layer .menu-logo {
        display: block;
        text-align: center;
        margin-bottom: 10px;
    }

    header:not(.billy-header) .right_col .mob_layer .menu-logo img {
        max-width: 170px;
    }

    /* submenu inside the drawer: flows in place, toggled via li.drop.active */
    header:not(.billy-header) .right_col ul > li > ul {
        display: none;
        position: static;
        width: 100%;
        padding: 10px !important;
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
        opacity: 1;
        pointer-events: all;
        box-shadow: none;
        transition: none;
    }

    header:not(.billy-header) .right_col ul > li.drop.active > ul {
        display: block;
    }

    header:not(.billy-header) ul > li.drop::before {
        display: none;
    }
}

/* Header */
header:not(.billy-header).d_flex {
    flex-wrap: nowrap;
    /* Prevent wrapping by default */
}

header:not(.billy-header) .rightcolin {
    flex: 1 1 auto;
    /* Grow and shrink as needed */
    min-width: 0;
    /* Allow content to determine min width */
    /* no overflow:hidden here - it would clip the menu dropdowns */
}

header:not(.billy-header) .left_col {
    flex: 0 0 auto;
    /* Don't grow or shrink */
}

header:not(.billy-header) .header-buttons {
    display: flex;
    align-items: center;
    /* uniform gap between accessibility/user/special (replaces the old margin: 0 8px) */
    gap: 30px;
}

/* Search Container */
header:not(.billy-header) .search-container {
    margin: 0 8px;
}

header:not(.billy-header) .search-wrapper,
.filter-item .search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background-color: #F2F7FB;
    border: none;
    border-radius: 40px;
    overflow: hidden;
    width: 200px;
    height: 45px;
    border: 1px var(--bluedark) solid;
}

header:not(.billy-header) .search-wrapper:hover,
.filter-item .search-wrapper:hover {
    border: 1px #0066B36E solid;
}

header:not(.billy-header) .search-input::placeholder,
.filter-item .search-wrapper .search-input::placeholder {
    color: var(--blue);
    opacity: 1;
}

header:not(.billy-header) .search-input:-ms-input-placeholder {
    color: var(--blue);
}

header:not(.billy-header) .search-input::-ms-input-placeholder {
    color: var(--blue);
}

header:not(.billy-header) .search-input::-webkit-input-placeholder {
    color: var(--blue);
}

header:not(.billy-header) .search-input:-moz-placeholder {
    color: var(--blue);
    opacity: 1;
}

header:not(.billy-header) .search-input::-moz-placeholder {
    color: var(--blue);
    opacity: 1;
}

header:not(.billy-header) .search-input,
.filter-item .search-wrapper .search-input {
    color: var(--blue);
}

header:not(.billy-header) .search-input {
    height: 45px;
    width: 100%;
    border: none;
    padding: 0 15px;
    font-size: 16px;
    color: var(--blue);
    background-color: var(--white);

}

header:not(.billy-header) .search-input:focus {
    outline: none;
}

header:not(.billy-header) .search-btn {
    position: absolute;
    left: 10px;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
}

header:not(.billy-header) .search-btn img {
    width: 24px;
    height: 24px;
}

/* Schema 90: search rests as an icon button and expands on click */
header:not(.billy-header) .search-wrapper {
    width: 29px;
    height: 29px;
    transition: width 0.3s ease;
}

header:not(.billy-header) .search-wrapper .search-input {
    height: 100%;
}

header:not(.billy-header) .search-wrapper:not(.expanded) .search-btn {
    left: 50%;
    transform: translateX(-50%);
}

header:not(.billy-header) .search-wrapper:not(.expanded) .search-input {
    opacity: 0;
}

header:not(.billy-header) .search-wrapper.expanded {
    width: 200px;
}

/* Schema 90: search sits inside the top menu as its last item - plain icon until opened */
header:not(.billy-header) .menu-search {
    display: flex;
    align-items: center;
}

header:not(.billy-header) .menu-search .search-wrapper {
    background-color: transparent;
    /* collapsed state keeps a visible hairline ring around the icon (Figma) */
    border-color: #222222;
    border-width: 0.5px;
}

header:not(.billy-header) .menu-search .search-wrapper.expanded {
    background-color: var(--white);
    border-color: var(--blue);
    border-width: 1px;
}

/* Contact Button */
header:not(.billy-header) .contact-btn {
    display: flex;
    align-items: center;
    background-color: #F2F7FB;
    padding: 0 15px;
    margin: 0 8px;
    color: var(--blue);
    font-weight: 500;
    border-radius: 40px;
    height: 45px;
    width: 168px;
    border: none;
}

header:not(.billy-header) .contact-btn:hover {
    background-color: #0066B317;
}

header:not(.billy-header) .contact-btn img {
    width: 22px;
    height: 22px;
    margin-left: 0;
    margin-right: 6px;
    /* Changed to margin-right since image comes first */
}

header:not(.billy-header) .contact-btn span {
    font-size: 16px;
    margin-right: 12px;
}

/* Schema 90: highlighted top_bar item (topClass="special") shown among the header actions */
header:not(.billy-header) .special-btn {
    display: flex;
    align-items: center;
    background-color: var(--greenlight);
    padding: 0 18px;
    margin: 0;
    color: #3264B1;
    font-weight: 600;
    font-size: 20px;
    border-radius: 40px;
    height: 50px;
    white-space: nowrap;
}

header:not(.billy-header) .special-btn:hover {
    background-color: #44AB482E;
}

/* User Button */
header:not(.billy-header) .user-btn {
    display: flex;
    align-items: center;
    background-color: #F2F7FB;
    padding: 0 18px;
    margin: 0;
    color: #3264B1;
    font-weight: 600;
    border-radius: 40px;
    height: 50px;
    width: auto;
    white-space: nowrap;
    border: none;
}

header:not(.billy-header) .user-btn:hover {
    background-color: #0066B317
}

header:not(.billy-header) .user-btn span {
    font-size: 20px;
    margin-right: 12px;
}

header:not(.billy-header) .user-btn img {
    width: 17px;
    height: 17px;
    margin-right: 6px;
    /* Changed to margin-right since image comes first */
}

/* Accessibility Button - right-rounded tab flush to the viewport's left edge */
header:not(.billy-header) .accessibility-btn {
    width: 52px;
    height: 50px;
    border-radius: 0 20px 20px 0;
    background-color: #3264B1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    position: relative;
    left: 0;
}

header:not(.billy-header) .accessibility-btn:hover {
    background-color: var(--green);
}

header:not(.billy-header) .accessibility-btn img {
    width: 32px;
    height: 32px;
}

/* Schema 90: footer - full redesign per Figma, not the schema-88 layout.
   Gradient runs green (left) -> blue (right) per the Figma reference. */
footer {
    position: relative;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
}

.footer-top {
    padding: 56px 0 40px;
}

/* footer content column: 1552px at 1920 (184px side gaps, Figma Container
   2003:477), scaling proportionally (~9.6vw per side) on narrower screens
   so the footer never hugs the viewport edges */
.footer-top .home-container,
.footer-bottom .home-container {
    /* 1552px content at 1920 (184px side gaps) with the container's 32px pads */
    max-width: 1616px;
    width: calc(100% - 19.2vw + 64px);
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 68px;
    align-items: start;
}

.footer-col h4 {
    color: var(--white);
    font-size: 18px;
    font-weight: 800;
    height: 38px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    margin-bottom: 12px;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    /* the 24px line-height alone carries the Figma's 24-25px row pitch */
    margin-bottom: 0;
}

.footer-col ul li a {
    color: var(--white);
    font-size: 16px;
    line-height: 24px;
}

.footer-col ul li a:hover {
    text-decoration: underline;
}

.footer-brand .brand {
    display: block;
    max-width: 256px;
    height: 81px;
    border-bottom: 1px solid var(--white);
    margin-bottom: 18px;
}

.footer-brand .brand img {
    max-width: 229px;
    max-height: 81px;
    /* Render the logo as white ARTWORK on a transparent background, even for
       flattened JPGs with a baked-in white background: grayscale+invert turns
       the white background black and dark artwork light, brightness pushes the
       artwork to pure white, and screen-blending drops the black background so
       the footer gradient shows through. (Plain brightness(0) invert(1) whitened
       the entire rectangle on JPGs.) */
    filter: grayscale(1) invert(1) brightness(1.75);
    mix-blend-mode: screen;
}

.footer-about {
    color: var(--white);
    font-size: 16px;
    line-height: 19px;
    margin-bottom: 18px;
}

.footer-contact {
    margin-bottom: 18px;
}

.footer-contact div {
    color: var(--white);
    font-size: 16px;
    margin-bottom: 16px;
}

.footer-contact a {
    color: var(--white);
}

.footer-contact a:hover {
    text-decoration: underline;
}

.footer-social {
    display: flex;
    gap: 11px;
    margin-bottom: 24px;
}

/* white glyph icons straight on the gradient - no circle backgrounds (Figma) */
.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s ease;
}

.footer-social a:hover {
    transform: scale(1.12);
}

.footer-social a img {
    width: 27px;
    height: 27px;
    display: block;
}

.footer-join-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 256px;
    height: 50px;
    background-color: var(--white);
    color: #0268B2;
    font-weight: 800;
    font-size: 20px;
    border-radius: 39px;
    padding: 0;
}

/* the top_bar.icon graphic inside the join pill (Figma ~37x31; DOM-after the
   text so it renders on the text's LEFT in RTL) */
.footer-join-btn .footer-join-icon {
    height: 31px;
    max-width: 38px;
    width: auto;
    display: block;
}

.footer-join-btn:hover {
    opacity: 0.9;
}

.footer-bottom {
    /* Figma: ~28px breathing room below the bottom bar (footer 530 tall, bar ends 501.5) */
    padding-bottom: 28px;
}

.footer-bottom-row {
    /* hairline sits on the row INSIDE the 1552px container, not full-width */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    /* Figma: the ~47px bar hugs its texts to the bottom edge */
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    height: 47px;
    padding: 0;
}

.footer-bottom .copyright,
.footer-bottom .atarix-credit {
    color: var(--white);
    font-size: 11px;
}

.footer-bottom .atarix-credit:hover {
    text-decoration: underline;
}

@media only screen and (max-width: 1199px) {
    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-brand {
        grid-column: 1 / -1;
        order: -1;
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    /* Figma mobile: 45px top padding */
    .footer-top {
        padding-top: 45px;
    }

    /* mobile keeps the standard 16px container sides (kill the desktop vw shrink) */
    .footer-top .home-container,
    .footer-bottom .home-container {
        width: auto;
    }

    .footer-bottom-row {
        flex-direction: column;
        text-align: center;
    }
}

.billy-active-button {
    display: none;
}

.events_sec .inner,
.upcoming_events .inner {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.events_sec .colin,
.upcoming_events .colin {
    width: 30%;
    padding: 0 15px;
    margin-bottom: 40px;
}

.events_sec .col,
.upcoming_events .col {
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-bottom: 70px;
}

.events_sec .col .img,
.upcoming_events .col .img {
    height: 235px;
    overflow: hidden;
    border-radius: 12px 12px 0px 0px;
}

.events_sec .col .img img,
.upcoming_events .col .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.events_sec .col .event-title,
.upcoming_events .col .event-title {
    padding: 15px 15px 10px;
}

.events_sec .col .event-details,
.upcoming_events .col .event-details {
    padding: 0 15px;
}

.events_sec .col .btn,
.upcoming_events .col .btn {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 100%;
    font-weight: 500;
}

.events_sec .col .btn:hover,
.upcoming_events .col .btn:hover,
.news_blog .btn:hover {
    background-color: var(--red) !important;
}

.calendar-card .col {
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calendar-header {
    padding: 15px;
    text-align: center;
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.calendar-date {
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--red);
}

.calendar-body {
    padding: 10px 15px;
    flex-grow: 1;
}

.days-of-week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: bold;
    margin-bottom: 10px;
}

.dow {
    padding: 5px;
    color: #666;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border-radius: 50%;
}

.day.empty {
    background-color: transparent;
}

.day.today {
    background-color: var(--red);
    color: white;
    font-weight: bold;
}

.upcoming_events .inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.upcoming_events .colin {
    flex: 0 0 calc(50% - 20px);
}

.calendar-column {
    flex: 0 0 calc(33.333% - 20px);
    display: none;
    border: 2px solid #d0d0d0;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100%;
}

.custom-calendar {
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    background: #fff;
    direction: rtl;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.calendar-title {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.calendar-nav {
    color: #0068AE;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding: 0 10px;
}

.month-year {
    font-weight: bold;
    font-size: 18px;
    color: #0068AE;
}

.current-date {
    color: var(--red);
    font-size: 36px;
    padding-bottom: 16px;
}

.days-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: #0069b4;
    color: white;
    padding: 10px 0;
}

.days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: min(5px, 1vw);
    padding: min(12px, 2vw);
}

.days-grid div {
    padding: 0;
    border-radius: 50%;
    width: min(40px, calc(100% - 4px));
    height: 40px;
    max-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: clamp(12px, 2.5vw, 16px);
}

.days-grid div.current {
    background-color: var(--red);
    color: white;
    width: 40px;
}

.days-grid div.selected {
    background-color: var(--red);
    color: white;
    width: 40px;
}

.days-grid div:not(.other-month):hover {
    background-color: rgba(230, 57, 70, 0.5);
    color: white;
}

.days-grid div.other-month {
    color: #ccc;
    cursor: default;
}


.field-invalid {
    border: 1.5px solid var(--red) !important;
}

input.field-invalid,
input[type="text"].field-invalid,
input[type="email"].field-invalid,
input[type="tel"].field-invalid,
input[type="password"].field-invalid,
input[type="number"].field-invalid,
input[type="url"].field-invalid,
input[type="search"].field-invalid,
input[type="date"].field-invalid,
input[type="datetime-local"].field-invalid,
input[type="time"].field-invalid,
input[type="month"].field-invalid,
input[type="week"].field-invalid {
    border: 1.5px solid var(--red) !important;
    outline: none !important;
}

textarea.field-invalid {
    border: 1.5px solid var(--red) !important;
    outline: none !important;
}

select.field-invalid {
    border: 1.5px solid var(--red) !important;
    outline: none !important;
}

input[type="radio"].field-invalid {
    outline: 1.5px solid var(--red) !important;
    outline-offset: 1px !important;
}

input[type="checkbox"].field-invalid {
    outline: 1.5px solid var(--red) !important;
    outline-offset: 1px !important;
}

input[type="file"].field-invalid {
    border: 1.5px solid var(--red) !important;
    outline: none !important;
}

input[type="range"].field-invalid {
    outline: 1.5px solid var(--red) !important;
    outline-offset: 1px !important;
}

input[type="color"].field-invalid {
    border: 1.5px solid var(--red) !important;
    outline: none !important;
}

.custom-select.field-invalid,
.custom-input.field-invalid,
.custom-checkbox.field-invalid,
.custom-radio.field-invalid {
    border: 1.5px solid var(--red) !important;
}

.radio-group.field-invalid,
.checkbox-group.field-invalid {
    border: 1.5px solid var(--red) !important;
    /* border-radius: 4px !important;
    padding: 5px !important; */
}

fieldset.field-invalid {
    border: 1.5px solid var(--red) !important;
}

.field-invalid:focus {
    border-color: var(--blue) !important;
}

.form-control.field-invalid,
.form-select.field-invalid,
.form-check-input.field-invalid {
    border: 1.5px solid var(--red) !important;
}

.input-wrapper.field-invalid,
.select-wrapper.field-invalid {
    border: 1.5px solid var(--red) !important;
}

.events-filter {
    margin-bottom: 30px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    align-items: center;
}

.filter-item {
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.filter-item .search-wrapper {
    width: 100%;
    border-color: var(--blue);
    background-color: unset;
}

.filter-item .search-wrapper .search-input {
    padding-right: 32px;
    width: 100%;
    font-size: 16px !important;
}

.filter-item select.search-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url('../images/site/dropdown_arrow_blue.svg');
    background-repeat: no-repeat;
    background-position: left 10px center;
    background-size: 14px;
    padding-left: 30px;
    cursor: pointer;
    border: unset;
    background-color: var(--white);
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--red);
    color: white;
    border: none;
    border-radius: 40px;
    padding: 0 20px;
    height: 45px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    width: 100%;
}

.filter-btn span {
    margin-right: 8px;
    color: white;
}

.filter-btn img {
    width: 22px;
    height: 22px;
}

.filter-btn:hover {
    background-color: #B91C1C;
}

/* Styling for the form container */
.altertableEbox.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px 15px;
}

.altertableEbox.container form {
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Styling for form elements */
.altertableEbox #orderQuantity,
.altertableEbox #orderComment {
    width: 100%;
    max-width: 500px;
    margin: 15px 0;
    float: none;
    text-align: right !important;
}

.altertableEbox .form-group {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
}

.altertableEbox label.labelBold {
    font-weight: 600;
    color: var(--blue);
    margin-bottom: 10px;
    font-size: 20px;
    vertical-align: middle;
}

.altertableEbox #amount {
    width: 100%;
    max-width: 180px;
    height: 45px;
    border: 1px solid var(--blue);
    border-radius: 8px;
    padding: 0 15px;
    font-size: 16px;
    color: var(--gray);
    text-align: center;
}

.altertableEbox #comment {
    width: 100%;
    max-width: 300px;
    border: 1px solid var(--blue);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 16px;
    color: var(--gray);
    margin-top: 5px;
    resize: vertical;
    vertical-align: middle;
}

.altertableEbox .orderSubmit65 {
    margin-top: 15px;
    width: 100%;
    max-width: 300px;
    height: 50px;
    border-radius: 25px;
    font-size: 18px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.altertableEbox .orderSubmit65:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.container.d-flex.altertableEbox.altertableEboxSchema83,
.altertableEboxSchema83 {
    border: 2px solid var(--blue);
}

.navigation_bar.d_flex {
    position: relative;
    margin-bottom: 100px;
}

.right_in label table[dir="RTL"] td {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-align: right !important;
    vertical-align: top;
    padding: 6px 8px;
    box-sizing: border-box;
    max-width: 200px;
    word-break: break-all !important;
    overflow: hidden !important;
}

.right_in label table[dir="RTL"] {
    width: 100% !important;
}

.right_in label table[dir="RTL"] p,
.right_in label table[dir="RTL"] span {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    margin: 0;
    color: var(--black);
    font-size: 16px;
    font-weight: 400;
}

.dis div {
    height: 150px;
    overflow: hidden;
    position: relative;
}

.dis p {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 10px;
}

.dis div:after {
    content: "...";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    text-align: right;
    padding-right: 5px;
}

.stars_row {
    display: flex;
    gap: 18px;
    justify-content: center;
    align-items: center;
    margin: 24px 0;
}

.star.fa-layers.fa-fw {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 12px rgba(2, 104, 179, 0.15), 0 1.5px 4px rgba(0, 0, 0, 0.08);
    border: 2px solid var(--bluelight);
    width: 72px;
    height: 72px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    transition: box-shadow 0.2s, border-color 0.2s, background 0.2s;
    font-size: 2.2rem;
    user-select: none;
}

.star.fa-layers.fa-fw:hover,
.star.fa-layers.fa-fw.active {
    box-shadow: 0 4px 18px rgba(2, 104, 179, 0.22), 0 2px 8px rgba(0, 0, 0, 0.12);
    border-color: var(--blue);
    background: var(--bluelight1);
}

.star.fa-layers.fa-fw.checked {
    border-color: var(--red) !important;
    background: #fff0f0 !important;
    box-shadow: 0 4px 18px rgba(220, 35, 35, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    -webkit-text-stroke-color: var(--red) !important;
    -webkit-text-stroke-width: 1px !important;
    color: var(--red) !important;
}

.star.fa-layers.fa-fw .fa-star {
    color: var(--bluelight);
    transition: color 0.2s;
}

.star.fa-layers.fa-fw:hover .fa-star,
.star.fa-layers.fa-fw.active .fa-star {
    color: var(--blue);
}

.star.fa-layers.fa-fw.checked .fa-star {
    color: var(--red) !important;
}

.star.fa-layers.fa-fw .fa-layers-text {
    font-size: 1.3rem !important;
    /* color: var(--red); */
    /* font-weight: 900; */
    pointer-events: none;
}

.star.fa-layers.fa-fw.active .fa-layers-text {
    color: var(--red);
}

.star.fa-layers.fa-fw.checked .fa-layers-text {
    color: var(--red) !important;
}

.star.fa-layers.fa-fw:active {
    transform: scale(0.96);
}

.stars_row span.fa-layers-text.fa-inverse.fa-5x {
    margin-left: unset !important;
}

.notes_row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    margin: 24px 0;
    width: 100%;
    max-width: 500px;
    place-self: anchor-center;
}

.notes_row label {
    font-size: 1.1rem;
    color: var(--blue);
    font-weight: 600;
    margin-bottom: 4px;
    align-self: center;
}

.notes_row .notes {
    width: 100%;
    min-height: 80px;
    max-width: 100%;
    border: 2px solid var(--bluelight);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 1rem;
    color: var(--black);
    background: var(--bluelight1);
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
    font-family: inherit;
}

.notes_row .notes:focus {
    border-color: var(--blue);
    box-shadow: 0 2px 8px rgba(2, 104, 179, 0.12);
    outline: none;
}

.notes_row .notes.field-invalid {
    border-color: var(--red);
    background: #fff0f0;
}

.wrapper .left_col .contains_sec.content_page * {
    margin: revert !important;
    padding: revert !important;
    border: revert !important;
    font: revert !important;
    color: revert !important;
    background: revert !important;
    text-align: revert !important;
    line-height: revert !important;
}

.wrapper .left_col .contains_sec.content_page,
.wrapper .left_col .contains_sec.content_page * {
    all: revert !important;
}

/* .wrapper .left_col .contains_sec.content_page h1,
.wrapper .left_col .contains_sec.content_page h2,
.wrapper .left_col .contains_sec.content_page h3,
.wrapper .left_col .contains_sec.content_page h4,
.wrapper .left_col .contains_sec.content_page h5,
.wrapper .left_col .contains_sec.content_page h6,
.wrapper .left_col .contains_sec.content_page p,
.wrapper .left_col .contains_sec.content_page ul,
.wrapper .left_col .contains_sec.content_page ol,
.wrapper .left_col .contains_sec.content_page li,
.wrapper .left_col .contains_sec.content_page a,
.wrapper .left_col .contains_sec.content_page strong,
.wrapper .left_col .contains_sec.content_page em,
.wrapper .left_col .contains_sec.content_page span,
.wrapper .left_col .contains_sec.content_page div,
.wrapper .left_col .contains_sec.content_page table,
.wrapper .left_col .contains_sec.content_page td,
.wrapper .left_col .contains_sec.content_page tr {
    all: unset !important;
    display: revert !important;
} */

.wrapper .left_col .contains_sec.content_page {
    padding: 32px !important;
}

.step_contant.active input[name="logPhone"] {
    color: #000 !important;
}

.step_warapper .select-for-person{
    display: none !important;
}

.goToTop{
    display: none !important;
}
/* =========================================================================
   Schema 90 inner pages - shared form pattern (addWorker "הוספת בעל תפקיד",
   reusable for other inside/* form pages). Card on desktop; single-column
   stacked blocks on mobile (no table markup on these pages).
   ========================================================================= */
.inside-form-sec {
    padding: 64px 0 96px;
}

.inside-form-title {
    font-size: 50px;
    line-height: 45px;
    margin-bottom: 32px;
}

/* Self-contained banner wrapper (breadcrumb + title only), matching the
   same pattern as .contact-hero / .s90-content-hero / .lecturers-page-hero -
   position:relative + overflow:hidden so the shared dot decoration (see the
   grouped ::before rule near .contact-hero) is fully self-contained and can
   never bleed into the form card below. */
.s90-addworker-hero {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /* this page has no Figma frame of its own, so it uses the same scenery
       banner as the Content page (scenery SVG strip along the bottom over
       the green->blue gradient) - see the shared background rule below. */
    padding: 40px 0 56px;
    min-height: 332px;
}

.s90-addworker-hero .home-container {
    position: relative;
    z-index: 1;
}

/* same convention as .contact-hero-title / .s90-content-title / .lecturers-page-title:
   Assistant ExtraBold 58/55, solid --blue (NOT gradient) */
.s90-addworker-title {
    margin: 0;
    font-family: var(--assistant);
    font-weight: 800;
    font-size: 58px;
    line-height: 55px;
    color: var(--blue);
    text-align: right;
}

@media only screen and (max-width: 767px) {
    .s90-addworker-title {
        font-size: 30px;
        line-height: 35px;
    }
}

.s90-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--gray);
    margin-bottom: 24px;
}

/* Separator is an exported 6.783x11 #666666 chevron (2239:420 / 2575:532), not a
   text glyph. The markup still emits &rsaquo; for no-CSS/older fallback, so the
   glyph is zeroed out and the asset painted in its place. (The pre-existing
   breadcum-arrow.svg is a raster-in-SVG lookalike - this is the real vector.) */
.s90-breadcrumb > span:not(.active) {
    flex: 0 0 auto;
    width: 6.783px;
    height: 11px;
    font-size: 0;
    line-height: 0;
    background: url(../images/site/breadcrumb_chevron.svg) center / 6.783px 11px no-repeat;
}

.s90-breadcrumb a {
    color: var(--gray);
}

.s90-breadcrumb a:hover {
    color: var(--blue);
}

.s90-breadcrumb .active {
    color: var(--blue);
    font-weight: 700;
}

.s90-form-msg {
    max-width: 900px;
    margin-bottom: 20px;
    padding: 14px 20px;
    border-radius: 12px;
    background: var(--greenlight);
    color: #3264B1;
    font-weight: 700;
}

.inside-form-card {
    background: #fff;
    border: 1px solid #F3F4F6;
    border-radius: 16px;
    box-shadow: 0 4px 23.9px -12px rgba(0, 0, 0, 0.25);
    padding: 40px;
    max-width: 900px;
}

.s90-form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 32px;
}

.s90-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s90-field--full {
    grid-column: 1 / -1;
}

.s90-field label {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue);
}

.s90-field input {
    height: 52px;
    width: 100%;
    box-sizing: border-box;
    /* design-system input: 1px green->blue gradient border, radius 8
       (addWorker has no Figma frame of its own; matches the confirmed
       contact / lecturers input style) */
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 16px;
    font-size: 16px;
    font-family: var(--assistant);
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #44AB48 0%, #0066B3 100%) border-box;
}

.s90-field input:focus {
    outline: none;
}

.s90-submit {
    align-self: flex-start;
    border: none;
    cursor: pointer;
    background: linear-gradient(to left, var(--blue), var(--green));
    color: var(--white);
    font-weight: 700;
    font-size: 18px;
    height: 56px;
    padding: 0 48px;
    border-radius: 36px;
    margin-top: 8px;
}

.s90-submit:hover {
    opacity: 0.92;
}

@media only screen and (max-width: 767px) {
    .inside-form-sec {
        padding: 45px 0;
    }

    .inside-form-title {
        font-size: 30px;
        line-height: 35px;
        margin-bottom: 24px;
    }

    .inside-form-card {
        padding: 24px;
    }

    /* single column = each field a stacked block (mobile "cards", no table) */
    .s90-form {
        grid-template-columns: 1fr;
    }

    .s90-submit {
        width: 100%;
        text-align: center;
    }
}

/* ============================ SCHEMA-90 INNER PAGES (built 21/07/2026) ============================ */

/* ---- Contact page (contactUs/90.php) ---- */
/* =============================================================================
   CONTACT PAGE - schema 90 (Avshalom)  [append to css/schema90/css/screen.css]
   Figma "contact - Desktop 1920 - Light" (node 2239:411). New rules only;
   reuses .home-container, .h2/.h2-gradient, .s90-breadcrumb, .s90-form-msg.
   Brand blues per element: #0066B3 (--blue) brand, #0268B3 link/focus accent.
   ========================================================================= */

/* ---- HERO band (full-bleed): pale-blue gradient + mountains illustration ---- */
.contact-hero {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    /* Figma 2239:416: the breadcrumb wrapper has 6px of top padding and the
       breadcrumb ROW is 56px tall with its text vertically centred, which is what
       lands the text 24px below the band edge (140 + 6 + 18 = 164). */
    padding: 6px 0 28px;
    min-height: 332px;
    /* illustration (transparent PNG) over the shared band gradient. The exact
       declaration from the design ("gradiant" style, node 2575:527) is a
       LOW-ALPHA brand sweep over white - which is why it reads as a pale green
       fading to near-white, and why viewing it without opacity looks like the
       saturated green->blue brand gradient. */
    background-color: var(--white);
    background-image: url(../images/site/contact_hero_bg.png),
                      linear-gradient(86.0527deg,
                          rgba(68, 171, 72, 0.30) 6.092%,
                          rgba(34, 136, 126, 0.10) 50.432%,
                          rgba(0, 102, 179, 0.03) 94.954%);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center;
    /* cover so the wide-but-short illustration zooms to fill the band's full
       height (no top/bottom gaps); anchored bottom keeps the mountains in view */
    background-size: cover, cover;
}

/* Figma node 2239:611 - fading blue halftone-dot flourish, flush to each
   banner's top-left corner, stretched to reach the banner's full height
   (whatever it renders to - short or long content). Exported directly from
   Figma as a bitmap (500+ individually-gradiented dots - not
   hand-reconstructable as inline SVG) and post-processed to recover real
   alpha transparency (the raw Figma export was flattened onto opaque white).
   ONE shared rule, reused identically on every schema-90 inner-page banner
   (contact / content / lecturers / addWorker). */
/* Unified inner-page banner (client 21/07): ALL inner-page banners use the
   Contact banner treatment - the full-bleed mountains illustration PNG over
   the pale blue gradient - because it reads best and sits full-width to the
   edges. content / addWorker / lecturers all share it with contact. */
.s90-addworker-hero,
.lecturers-page-hero,
.s90-content-hero {
    background-color: var(--white);
    background-image: url(../images/site/contact_hero_bg.png),
                      linear-gradient(86.0527deg,
                          rgba(68, 171, 72, 0.30) 6.092%,
                          rgba(34, 136, 126, 0.10) 50.432%,
                          rgba(0, 102, 179, 0.03) 94.954%);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center;
    /* cover: zoom the wide-short illustration to fill the full band height */
    background-size: cover, cover;
}

.contact-hero::before,
.s90-content-hero::before,
.lecturers-page-hero::before,
.s90-addworker-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 0;
    width: 506px;
    height: 100%;
    /* ?v=2 cache-busts the PNG itself - unlike this stylesheet (loaded with a
       fresh per-request ?ver= timestamp from header90.php), a plain url(...)
       reference has no versioning of its own, so browsers can keep serving a
       stale (pre-transparency-fix) copy under the same unchanged filename */
    background: url('../images/site/contact_dots_decoration.png?v=2') no-repeat top left / 100% 100%;
    pointer-events: none;
    z-index: 0;
}

.contact-hero .home-container {
    position: relative;
    z-index: 1;
}

/* breadcrumb reused from .s90-breadcrumb; hero uses #666, not the gray/blue
   default. 2239:417 is a 56px row (text centred), then a 16px gap to the title
   (2239:416 gap-16); the mobile frame tightens that gap to 3px. */
.contact-hero .s90-breadcrumb {
    height: 56px;
    margin-bottom: 16px;
}
.contact-hero .s90-breadcrumb a,
.contact-hero .s90-breadcrumb .active {
    color: #666;
}
.contact-hero .s90-breadcrumb .active {
    font-weight: 700;
}

.contact-hero-title {
    margin: 0;
    font-family: var(--assistant);
    font-weight: 800;              /* Assistant ExtraBold */
    font-size: 58px;
    line-height: 55px;
    color: var(--blue);            /* #0066B3 solid (not the gradient) */
    text-align: right;
}

.contact-hero-sub {
    max-width: 507px;
    margin: 21px 0 0 auto;         /* RTL: margin-left auto keeps the box on the right */
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 25px;
    line-height: 35px;
    color: #000;
    text-align: right;
}

/* ---- CONTACT section ---- */
/* Figma 2239:436/2239:437: the body block starts 46px under the hero band and
   the section runs 99px clear of the footer. Content column is 1278-1280 wide
   (2239:437), so raise the .home-container cap to 1344 to get a true 1280
   content box - the 32px pads still protect sub-1344 viewports. */
/* Figma 2239:429 / 2575:541 - branch pills under the hero copy. 141x59 on
   desktop, three equal 40px pills on mobile, right-aligned, 10px apart.
   Unselected = #dcf0ff with a 1px --blue hairline; selected = solid --blue,
   white label. Colours sampled off the reference render. */
/* 2239:429 desktop / 2575:541 mobile. Values are the design's own, not rounded:
   141.35x59.516, 0.744px hairline, 38.685px radius, 25.294px side padding,
   10.415px gutter, 16px/20.83px Assistant Regular in BLACK on #dcf0ff.
   Selected swaps to solid --blue with SemiBold white text plus a 2.864px
   rgba(0,102,179,.2) bloom. */
.cf-branches {
    display: flex;
    flex-wrap: wrap;
    gap: 10.415px;
    margin-top: 21px;
    padding: 0;
    list-style: none;
}

.cf-branch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 141.35px;
    height: 59.516px;
    padding: 13.391px 25.294px;
    border: 0.744px solid var(--blue);
    border-radius: 38.685px;
    background: #dcf0ff;
    color: #000;
    font-family: var(--assistant);
    font-size: 16px;
    font-weight: 400;
    line-height: 20.83px;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.cf-branch:hover {
    background: #cbe7fb;
}

.cf-branch.is-active {
    background: var(--blue);
    color: var(--white);
    font-weight: 600;               /* Assistant SemiBold */
    filter: drop-shadow(0 0 2.864px rgba(0, 102, 179, 0.2));
}

.contact-90 {
    padding: 46px 0 99px;
}

.contact-hero .home-container,
.contact-90 .home-container {
    max-width: 1344px;
}

/* section heading reuses .h2.h2-gradient (green->blue), sized to the Figma
   "Section Tittle" token 50/45 and with the base .h2 underline bar suppressed */
.cf-section-title.h2 {
    font-size: 50px;
    line-height: 45px;
    padding-bottom: 0;
    margin: 0 0 52px;
    text-align: right;
}
.cf-section-title.h2::after {
    display: none;
}

.cf-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;   /* RTL: form (1st child) hugs the right */
    gap: 58px;
}

/* form = right column (487), info = left column (604); auto-wrap when cramped */
.cf-form-col {
    flex: 1 1 487px;
    max-width: 487px;
}

/* =============================== FORM =============================== */
.cf-form {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.cf-grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 19px;
}

.cf-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cf-field--full {
    width: 100%;
}

.cf-field label {
    font-family: var(--assistant);
    font-size: 14px;
    font-weight: 400;
    color: #2A3039;
    text-align: right;
}

.cf-input {
    box-sizing: border-box;
    width: 100%;
    height: 48px;
    /* Figma: 1px GREEN->BLUE gradient border, radius 8 (rendered border-image;
       double-background keeps the rounded corners) */
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0 12px;
    font-family: var(--assistant);
    font-size: 16px;
    color: #2A3039;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #44AB48 0%, #0066B3 100%) border-box;
}
.cf-input:focus {
    outline: none;
}

.cf-textarea {
    height: auto;
    min-height: 88px;
    padding: 12px;
    line-height: 1.4;
    resize: vertical;
}

/* select: chevron on the left (RTL start), value text right-aligned */
.cf-select-wrap {
    position: relative;
}
.cf-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-left: 40px;
    /* chevron layer on top of the same white-fill + gradient-border stack */
    background:
        url(../images/site/dropdown_arrow_blue.svg) left 12px center / 16px no-repeat,
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #44AB48 0%, #0066B3 100%) border-box;
}
.cf-select option {
    direction: rtl;
}

/* chips = single-select radios styled as pills (Figma "תחום עניין") */
.cf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cf-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 4px 16px;
    /* 1px green->blue gradient border, radius 28 pill (Figma) */
    border: 1px solid transparent;
    border-radius: 28px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #44AB48 0%, #0066B3 100%) border-box;
    color: #000;
    font-family: var(--assistant);
    font-size: 16px;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.cf-chip span {
    line-height: 28px;
}
.cf-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.cf-chip:hover {
    border-color: var(--blue);
}
.cf-chip.is-selected,
.cf-chip:has(input:checked) {
    background: var(--blue);       /* #0066B3 */
    border-color: var(--blue);
    color: #fff;
    box-shadow: 0 0 2.8px rgba(0, 102, 179, 0.2);
}

.cf-recaptcha {
    display: flex;
    justify-content: flex-end;
}

/* invisible widget: Figma's submit row (2239:609) is a bare 487x48 button with no
   captcha box, so the wrapper must not occupy a row in the 19px form stack */
.cf-recaptcha--invisible {
    display: none;
}

.cf-submit {
    width: 100%;
    height: 48px;
    border: none;
    border-radius: 8px;
    background: var(--blue);       /* solid #0066B3 rectangle (not the pill .s90-submit) */
    color: #fff;
    font-family: var(--assistant);
    font-size: 19px;
    font-weight: 400;
    cursor: pointer;
}
.cf-submit:hover {
    opacity: .92;
}

/* Figma 2396:621 - two 26px rows on a 28px pitch */
.cf-consent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;       /* RTL column: flex-start = the right (start) edge */
    gap: 2px;
    margin-top: 6px;
}
.cf-check {
    display: flex;
    align-items: center;
    gap: 10px;                     /* checkbox is 1st child -> right in RTL */
    font-family: var(--assistant);
    font-size: 14px;
    color: #000;
    cursor: pointer;
}
.cf-check input {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: var(--blue);
}
.cf-check a {
    color: #0268B3;
    text-decoration: underline;
}

/* =============================== INFO ============================== */
/* Figma 2239:440 "Frame 4" = 604 wide, made up of
   10px rail + 51px gap + 482px content + 61px trailing space.
   The rail is NOT a 6px pill-capped bar: it is the same construct as the
   content page's copy rail (.s90-richtext) - a 10px right border on a box with
   only its right corners rounded, so the browser mitres the border into the
   corner arc and both ends taper to a point leaning inward. Measured off the
   reference render: x 1047..1056 (10px), y 506..1077, #0066B3, with a ~9px
   taper at each end. A plain ::before with border-radius:8px gives symmetric
   pill caps instead, which is what was wrong here. */
.cf-info {
    position: relative;
    flex: 1 1 604px;
    max-width: 604px;
    box-sizing: border-box;
    padding: 0 51px 0 61px;
    border-right: 10px solid var(--blue);
    /* 10px radius => a ~10px taper at each end, matching the reference render */
    border-radius: 0 10px 10px 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;       /* RTL column: flex-start = the right (start) edge */
}

/* Figma 2239:441 - 482x63: 35px of text, then the 1px rule on the bottom edge */
.cf-info-title {
    width: 100%;
    margin: 0 0 41px;
    padding-bottom: 27px;
    border-bottom: 1px solid var(--blue);
    font-family: var(--assistant);
    font-weight: 700;
    font-size: 30px;
    line-height: 35px;
    color: var(--blue);
    text-align: right;
}

.cf-info-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 34px;
    width: 100%;
}
.cf-info-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;                     /* icon is 1st child -> right in RTL */
}
.cf-info-icon {
    flex-shrink: 0;
    width: 27px;
    height: 27px;
    /* 1px green->blue gradient border, radius 4 (Figma) */
    border: 1px solid transparent;
    border-radius: 4px;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(90deg, #44AB48 0%, #0066B3 100%) border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cf-info-icon img {
    width: 16px;
    height: 16px;
    object-fit: contain;
}
.cf-info-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;       /* RTL column: flex-start = the right (start) edge */
    gap: 5px;
    text-align: right;
}
.cf-info-label {
    font-family: var(--assistant);
    font-size: 14px;
    font-weight: 400;
    color: #666;
    line-height: 1;
}
.cf-info-value,
a.cf-info-value {
    font-family: var(--assistant);
    font-size: 18px;
    font-weight: 400;
    color: #2A3039;
    line-height: 1.2;
    text-decoration: none;
}
.cf-info-value--multiline {
    line-height: 1.35;
}

.cf-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 223px;
    height: 48px;
    margin-top: 41px;
    padding: 0 24px;
    border-radius: 39px;
    background: var(--blue);
    color: #fff;
    font-family: var(--assistant);
    font-size: 19px;
    font-weight: 400;
    text-decoration: none;
}
.cf-info-btn:hover {
    opacity: .92;
    color: #fff;
}

/* =============================== MOBILE =========================== */
@media only screen and (max-width: 991px) {
    /* the rail only reads as a divider while the two columns sit side by side */
    .cf-info {
        border-right: 0;
        border-radius: 0;
        padding-right: 0;
    }
}

/* Figma "Mobile Contact" (node 2575:21935). The hero copy stays RIGHT-aligned
   here - unlike the CMS content page's mobile hero, which centres. */
@media only screen and (max-width: 767px) {
    /* 2575:527 - 284px band, breadcrumb 24px in, 42px of air under the buttons.
       The 390 contact frame carries the base gradient ONLY: no mountains
       illustration (there is no child frame for one, unlike the 1920 frame's
       2246:12226) and no halftone-dot layer (unlike the 390 CONTENT frame, which
       does keep its dots). Verified by pixel-probing 2575:527: a perfectly smooth
       #C7E6C8 -> #F8FBFC horizontal ramp, constant vertically, with zero periodic
       variation - our build was painting #edf7ff plus a blue dot grid. */
    /* 6 + 56 (row) + 3 + 177 (title/lead/pills) + 41 = 283 => the 284px band */
    .contact-hero {
        padding: 6px 0 41px;
        min-height: 284px;
        /* the 390 frame drops BOTH overlays and keeps only the gradient, and it
           closes the band with a 3px rule (2575:527: border-b-3) */
        background-image: linear-gradient(86.0527deg,
                              rgba(68, 171, 72, 0.30) 6.092%,
                              rgba(34, 136, 126, 0.10) 50.432%,
                              rgba(0, 102, 179, 0.03) 94.954%);
        background-size: auto;
    }
    /* 3px green->blue rule closing the band; drawn as ::after for the same
       reason the header's is (no border-image slicing, no box-height shift) */
    .contact-hero::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
        pointer-events: none;
        z-index: 2;
    }
    .contact-hero::before {
        display: none;
    }
    /* 2575:528 gap-3 (the 56px row already carries the optical spacing) */
    .contact-hero .s90-breadcrumb {
        margin-bottom: 3px;
    }
    /* 2575:537 - 122x55 for "צור קשר", i.e. 36px on a 55px line */
    .contact-hero-title {
        font-size: 36px;
        line-height: 55px;
    }
    /* 2575:539 - full 358 measure, two lines at 28px */
    .contact-hero-sub {
        max-width: 100%;
        margin-top: 13px;
        font-size: 20px;
        line-height: 28px;
    }
    /* 2575:541 - the three pills go flex-1 and share the 358 column, 40px tall.
       The declared 25.294px side padding cannot survive a ~112px pill with a
       nowrap label, so it compresses here (Figma overflows at that width). */
    .cf-branches {
        gap: 10.415px;
        margin-top: 13px;
    }
    .cf-branch {
        flex: 1 0 0;
        width: auto;
        min-width: 0;
        height: 40px;
        padding: 0 4px;
    }

    /* 2575:550/2575:551 - h2 24px under the band, body 26px under the h2 */
    .contact-90 {
        padding: 24px 0 24px;
    }
    /* 2575:550 - 358x45: one line, so ~38px on the same 45px leading */
    .cf-section-title.h2 {
        font-size: 38px;
        line-height: 45px;
        margin-bottom: 26px;
    }

    /* 2575:655 form (809) then 2575:552 info (455), 44px apart */
    .cf-body {
        flex-direction: column;
        gap: 44px;
    }
    .cf-form-col,
    .cf-info {
        flex: 1 1 auto;
        max-width: 100%;
        width: 100%;
    }
    .cf-grid2 {
        grid-template-columns: 1fr;
    }
    /* 2575:552 - content inset 16px inside the column, no rail */
    .cf-info {
        padding: 0 16px;
    }
    /* 2575:553 - 45px title frame, so the rule sits tight under the text */
    .cf-info-title {
        padding-bottom: 4px;
        font-size: 25px;
        line-height: 35px;
    }
    /* 2575:654 - full-width button */
    .cf-info-btn {
        width: 100%;
        min-width: 0;
    }
}

/* ---- Content page (byshemea/page90.php) ---- */
/* ============================================================================
   Schema 90 (Avshalom) - CMS CONTENT PAGE
   Figma: "Content • Desktop 1920 • Light" (node 2225:20614, the image-bearing variant)
   Rendered by pages/byshemea/page90.php. Append-only; reuses existing schema-90
   tokens (--blue/--green/--assistant), .home-container and .s90-breadcrumb.
   Every value below is measured from Figma. NEW rules only.
   ============================================================================ */

/* --- HERO BAND -------------------------------------------------------------
   Full-bleed 482px band. Background = the exact Figma gradient (green->blue wash
   from the top-left, node 2210:1877) with the faint scenery silhouette
   (node 2225:20473, opacity baked in) anchored along the bottom edge. */
.s90-content-hero {
    position: relative;
    overflow: hidden;
    /* background comes from the shared unified-banner rule above (contact
       mountains PNG + pale gradient) */
}

/* Content column = 1280px, NOT the shared 1216px (Figma node 2212:2277 pill
   grid, 2574:479 card and 2212:2278 band are all 1275-1280 wide, sitting at
   ~320px from each page edge on the 1920 frame). .home-container caps at
   1280px and then eats 32px of padding per side, so this page raises the cap
   to 1344 to end up with a true 1280 content box; the padding still protects
   sub-1344 viewports. Scoped to this page only. */
.s90-content-hero .home-container,
.s90-content-body .home-container {
    max-width: 1344px;
}

.s90-content-hero .home-container {
    min-height: 482px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Figma pins the hero copy to the TOP of the 482px band (breadcrumb row
   2224:257 sits at the band's y=0, text baseline 24px in) while the image is
   optically centred - so this row is flex-start, not center. */
.s90-content-hero-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    width: 100%;
    padding: 19px 0 26px;
}

/* right-hand text column (breadcrumb + title + lead) */
.s90-content-hero-text {
    flex: 1 1 auto;
    min-width: 0;
    text-align: right;
}

/* the shared .s90-breadcrumb already sets 16px gray + 24px bottom margin;
   the Figma pins it to the top of the column, so add the gap before the title */
.s90-content-hero-text .s90-breadcrumb {
    margin-bottom: 0;
}

/* Same treatment as the contact banner: both crumbs are #666666 in the Figma -
   the current-page crumb is distinguished by WEIGHT only, not by colour
   (sampled straight off the reference render: every glyph of both crumbs is
   #666666, the active one simply has bolder stems). */
.s90-content-hero .s90-breadcrumb a,
.s90-content-hero .s90-breadcrumb .active {
    color: #666;
}

.s90-content-hero .s90-breadcrumb .active {
    font-weight: 700;
}

/* Figma 2224:271: 392x110 text box, right-aligned to the column edge. The cap
   is what breaks "…העמוד בין" onto its own line; a longer CMS title just wraps
   to more lines at the same measure. */
.s90-content-title {
    font-family: var(--assistant);
    font-size: 58px;
    line-height: 55px;
    font-weight: 800;           /* Assistant ExtraBold */
    color: var(--blue);         /* #0066B3 */
    text-align: right;
    max-width: 392px;
    margin-right: 0;
    margin-left: auto;
    margin-top: 75px;           /* breadcrumb text bottom -> title top */
    margin-bottom: 0;
}

/* Figma 2224:273: 507x113 */
.s90-content-lead {
    font-family: var(--assistant);
    font-size: 25px;
    line-height: 35px;
    font-weight: 400;
    color: var(--black);
    text-align: right;
    max-width: 507px;
    margin: 36px 0 0 auto;
}

/* left-hand rounded lead image (Figma 2225:20507 - 726x437, three corners
   rounded 47.83px, top-left square). It sits at page x=290 on the 1920 frame,
   i.e. ~30px OUTSIDE the 1280 content column, so it keeps a negative start
   margin rather than being squeezed to fit beside the copy. */
.s90-content-hero-media {
    flex: 0 0 auto;
    width: 726px;
    max-width: 60%;
    margin-left: -30px;
}

.s90-content-hero-media img {
    display: block;
    width: 100%;
    aspect-ratio: 726 / 437;
    max-height: 437px;
    object-fit: cover;
    border-radius: 0 47.83px 47.83px 47.83px;
}

/* no image: let the text breathe a little wider */
.s90-content-hero--noimg .s90-content-hero-text {
    max-width: 900px;
}

/* --- BODY (rich TinyMCE content) ------------------------------------------
   Typography scoped to .s90-richtext so it styles the CMS body faithfully
   (Figma content block node 2212:2035) without leaking into the rest of the
   page or being overridden by the global reset. */
/* Figma 2212:894: the body section runs 46px clear of the hero band and 46px
   clear of the footer; the first h2 sits 10px into the copy block. */
.s90-content-body {
    padding: 56px 0 46px;
    background-color: var(--white);
}

.s90-richtext {
    color: var(--black);
    font-family: var(--assistant);
    text-align: right;
    line-height: 24px;
    /* The Figma content block hangs off a solid --blue rail pinned to the RTL
       start edge of the content column, running the full height of the body
       copy. Drawn as the block's own right border so it always ends exactly
       where the copy ends; the right-corner radius reproduces the tapered
       caps of the Figma shape (top/bottom border widths are 0, so the browser
       mitres the rail into the corner arc and it narrows to a point). */
    border-right: 10px solid var(--blue);
    border-radius: 0 12px 12px 0;
    padding-right: 41px;
    /* Figma 2212:895 - the body copy is NOT the full content column: it is an
       800px block hugging the column's start edge, holding a 749px measure
       (749 + 41 gap + 10 rail = 800). The pill grid / card / band below DO span
       the full 1280. */
    max-width: 800px;
    margin-right: 0;
    margin-left: auto;
}

/* subtitle: Assistant Bold 50/45, green->blue gradient text, right-aligned, no bar */
.s90-richtext h1,
.s90-richtext h2 {
    font-family: var(--assistant);
    font-size: 50px;
    line-height: 45px;
    font-weight: 700;
    text-align: right;
    /* 29px is the single vertical rhythm inside the Figma copy block: h2->p,
       p->pill, pill->h2 and h2->p are all 29px (2212:2035 children) */
    margin: 29px 0;
    width: fit-content;
    max-width: 100%;
    background-image: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
    /* The Figma gradient is NOT stretched to the glyph run: the heading's own
       box occupies only the last ~32% of the sweep, so its start edge lands at
       t≈0.68 (a teal #167C8F) rather than full green. Sampled off the reference
       render: leftmost glyph rgb(22,124,143), rightmost rgb(0,102,178). Anchor
       the sweep's end to the heading's right edge and blow it up 310%. */
    background-size: 310% 100%;
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.s90-richtext > h1:first-child,
.s90-richtext > h2:first-child {
    margin-top: 0;
}

/* keep the 60px block gaps below exact, whatever the CMS body ends with */
.s90-richtext > *:last-child {
    margin-bottom: 0;
}

.s90-richtext h3 {
    font-size: 28px;
    line-height: 34px;
    font-weight: 700;
    color: var(--blue);
    text-align: right;
    margin: 28px 0 14px;
}

.s90-richtext h4 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 700;
    color: var(--blue);
    text-align: right;
    margin: 24px 0 12px;
}

.s90-richtext p {
    font-family: var(--assistant);
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: var(--black);
    text-align: right;
    margin: 0 0 29px;
}

.s90-richtext a {
    display: inline;            /* override the global reset a{display:inline-block} */
    color: var(--blue);
    font-weight: 700;
    text-decoration: none;
    font-size: inherit;
    line-height: inherit;
}

.s90-richtext a:hover {
    text-decoration: underline;
}

.s90-richtext strong,
.s90-richtext b {
    font-weight: 700;
}

/* CMS body copy is locked to the design font. The manager side already strips
   font-family as content is parsed (manager/Classes/tinyMce.php, merSchema 90)
   and the font picker is gone, but rows SAVED BEFORE that still carry inline
   fonts from old pastes - so neutralise them at render time too.
   Deliberately narrow: only elements that actually declare a font (or legacy
   <font> tags) inside the CMS wrappers. NOT a blanket `* { font-family }`,
   which is what previously broke 1:1 contract rendering elsewhere. */
.s90-richtext [style*="font-family"],
.s90-richtext [style*="font-Family"],
.s90-richtext font,
.contact-hero-sub [style*="font-family"],
.contact-hero-sub font {
    font-family: var(--assistant) !important;
}

/* Bullet lists: blue 8px disc flush to the RTL start edge, 24px between items.
   Figma 2396:668 runs the list on a NARROWER 633px measure than the 749px
   paragraphs, still right-aligned; each row is 615px of text + 10px gap + the
   8px disc (2396:653). */
.s90-richtext ul {
    list-style: none;
    max-width: 633px;
    margin: 0 0 29px auto;
    padding: 0;
}

.s90-richtext ul > li {
    position: relative;
    padding-right: 18px;
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 24px;
    color: var(--black);
    text-align: right;
}

.s90-richtext ul > li:last-child {
    margin-bottom: 0;
}

.s90-richtext ul > li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--blue);
}

.s90-richtext ol {
    margin: 0 0 24px;
    padding-right: 22px;
}

.s90-richtext ol > li {
    font-size: 18px;
    line-height: 24px;
    color: var(--black);
    margin-bottom: 12px;
    text-align: right;
}

.s90-richtext img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 12px 0;
}

.s90-richtext iframe,
.s90-richtext video {
    max-width: 100%;
}

/* CMS tables (TinyMCE) - light blue header, subtle borders, horizontal scroll */
.s90-richtext {
    overflow-x: auto;
}

.s90-richtext table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    direction: rtl;
}

.s90-richtext th,
.s90-richtext td {
    padding: 12px 15px;
    text-align: right;
    border: 1px solid #e0e0e0;
    font-size: 16px;
}

.s90-richtext th,
.s90-richtext thead td {
    background-color: #dcf0ff;
    color: var(--blue);
    font-weight: 700;
}

.s90-richtext tbody tr:nth-child(even) {
    background-color: #f8fbff;
}

/* --- CONTENT-EDITOR DESIGN TOKENS -----------------------------------------
   Blocks the Figma content frame documents for TinyMCE authors. No CMS data
   source drives them, so they are plain classes an editor drops into the body
   copy. Every one is measured off the reference render of node 2225:20614.

   Shared across all three: the 28px "chevron in a ring" glyph - a TRANSPARENT
   core, a 1px green->blue gradient ring, a matching gradient chevron and a
   soft green halo (Figma has no solid fill here; the earlier solid-gradient
   disc with a white chevron was wrong). It is emitted as ::before so authored
   markup stays a bare <a>/<h3> and lands on the RTL start (right) edge.
   ------------------------------------------------------------------------- */
/* 38x38 box (Figma 2212:2213) holding a 26px gradient ring (2212:2216) and a
   7.4x12 chevron (2575:35801); the remaining 6px is the soft green bloom, baked
   into the SVG as a radial fill so no box-shadow is needed. */
.s90-cta-pill::before,
.s90-linkpill::before {
    content: '';
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2344AB48'/%3E%3Cstop offset='1' stop-color='%230066B3'/%3E%3C/linearGradient%3E%3CradialGradient id='h'%3E%3Cstop offset='.42' stop-color='%2344AB48' stop-opacity='.22'/%3E%3Cstop offset='1' stop-color='%2344AB48' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='19' cy='19' r='19' fill='url(%23h)'/%3E%3Ccircle cx='19' cy='19' r='12.5' fill='none' stroke='url(%23g)' stroke-width='1.2'/%3E%3Cpath d='M22.7 13 15.3 19l7.4 6' fill='none' stroke='url(%23g)' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* inline mid-copy call to action (Figma node 2396:669):
   <a class="s90-cta-pill" href="...">קריאה לפעולה</a> */
/* Figma 2396:669 (desktop) / 2575:35793 (mobile) - identical box on both:
   345x62, 15px start pad, 8px to the ring, 12px end pad. */
.s90-cta-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    /* two-layer trick: flat fill on the padding box, gradient on the border
       box, so the 1px hairline runs green (start) -> blue (end) like Figma */
    background:
        linear-gradient(#dcf0ff, #dcf0ff) padding-box,
        linear-gradient(90deg, var(--green) 0%, var(--blue) 100%) border-box;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 11px 12px 11px 15px;
    color: #333;
    font-size: 20px;
    line-height: 38px;
    font-weight: 400;
    text-decoration: none;
}

.s90-cta-pill:hover {
    text-decoration: none;
    box-shadow: 0 4px 14px -6px rgba(0, 102, 179, 0.45);
}

/* three-up grid of related-link pills (Figma 2225:20614, rows below the copy):
   <div class="s90-linkpills"><a class="s90-linkpill" href="#">tab</a>...</div> */
.s90-linkpills {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Figma 2212:2220: three 407px cells + two 27px gutters = the 1275 column */
    column-gap: 27px;
    row-gap: 24px;
    margin: 60px 0 0;
    padding: 0;
    list-style: none;
}

.s90-linkpill {
    display: flex;
    align-items: center;
    /* RTL row: the ::before ring is the first child, so it lands on the right
       and the label sits to its left, both packed against the cell's start
       (right) edge - exactly the Figma cell. Do NOT use row-reverse here, it
       mirrors the pair to the left-hand end. */
    justify-content: flex-start;
    gap: 8px;
    min-height: 62px;
    padding: 11px 12px;
    background:
        linear-gradient(#dcf0ff, #dcf0ff) padding-box,
        linear-gradient(90deg, var(--green) 0%, var(--blue) 100%) border-box;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #333;
    font-family: var(--assistant);
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    text-align: right;
    text-decoration: none;
}

.s90-linkpill:hover {
    text-decoration: none;
    box-shadow: 0 4px 14px -6px rgba(0, 102, 179, 0.45);
}

/* "מידע חשוב" callout card:
   <div class="s90-infobox">
     <h3 class="s90-infobox-title">מידע חשוב</h3>
     <h4>קהל יעד</h4><p>...</p>
   </div>                                                                   */
.s90-infobox {
    /* 60px, measured pill-grid bottom -> card top on the Figma render */
    margin: 60px 0 0;
    padding: 32px;
    background:
        linear-gradient(#f4faff, #f4faff) padding-box,
        linear-gradient(90deg, var(--green) 0%, var(--blue) 100%) border-box;
    border: 1px solid transparent;
    border-radius: 8px;
}

.s90-infobox .s90-infobox-title {
    display: flex;
    align-items: center;
    /* icon first => right-hand side in RTL (see .s90-linkpill) */
    justify-content: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--blue);
    font-family: var(--assistant);
    font-size: 20px;
    line-height: 28px;
    font-weight: 700;
    /* no gradient text here - the Figma title is solid --blue */
    background: none;
    -webkit-text-fill-color: currentColor;
}

/* same ring, an "i" instead of the chevron */
.s90-infobox-title::before {
    content: '';
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    box-shadow: 0 0 9px 2px rgba(68, 171, 72, 0.20);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cdefs%3E%3ClinearGradient id='i' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%2344AB48'/%3E%3Cstop offset='1' stop-color='%230066B3'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='14' cy='14' r='13.4' fill='none' stroke='url(%23i)' stroke-width='1.2'/%3E%3Cpath d='M14 12.4v7' fill='none' stroke='url(%23i)' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='9.1' r='1.1' fill='url(%23i)'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* the card's own sub-labels are bold black, NOT the blue h4 of the body copy */
.s90-infobox h4 {
    color: var(--black);
    font-size: 18px;
    line-height: 24px;
    font-weight: 700;
    margin: 0 0 2px;
}

.s90-infobox p:last-child {
    margin-bottom: 0;
}

/* Rich-text interop: the generic .s90-richtext a / ul / li rules above are all
   (0,1,1) and would otherwise beat these single-class components when an editor
   drops them into the CMS body - forcing the pills back to inline/blue/700 and
   hanging a blue bullet off every grid cell. Restated here at (0,2,x). */
.s90-richtext a.s90-cta-pill {
    display: inline-flex;
    color: #333;
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
}

.s90-richtext a.s90-linkpill {
    display: flex;
    color: #333;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
}

/* works whether the grid is authored as a <div> or a <ul> */
.s90-richtext .s90-linkpills {
    margin: 60px 0 0;
    padding: 0;
    list-style: none;
}

.s90-richtext .s90-linkpills > li {
    margin-bottom: 0;
    padding-right: 0;
}

.s90-richtext .s90-linkpills > li::before {
    content: none;
}

/* --- PAGE-FOOT CTA BAND ----------------------------------------------------
   The gradient band that closes the Figma content frame: copy + compass
   watermark on the RTL start (right) edge, ghost .outline-btn on the end edge.
   128px tall, 8px radius, the same green->blue sweep as the footer. */
/* Figma 2212:2278 - 1275x127, 13px end pad to the 96px compass, 40px start pad
   to the 202x45 ghost button, 490px copy block. */
.s90-page-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 127px;
    margin-top: 60px;
    padding: 0 13px 0 40px;
    border-radius: 8px;
    background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
}

.s90-page-cta-main {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

.s90-page-cta-copy {
    max-width: 490px;
}

/* 96x96 outline compass (Figma 2225:20511 / 2575:35874) */
.s90-page-cta-icon {
    flex: 0 0 auto;
    width: 96px;
    height: 96px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96' fill='none' stroke='%23fff' stroke-width='1.7'%3E%3Ccircle cx='48' cy='53' r='42'/%3E%3Ccircle cx='48' cy='53' r='31'/%3E%3Ccircle cx='48' cy='6' r='5'/%3E%3Ccircle cx='48' cy='53' r='5'/%3E%3Cpath d='M48 31v4M48 71v4M26 53h4M66 53h4' stroke-linecap='round'/%3E%3Cpath d='M67 34 54.6 60.6 29 72 41.4 45.4Z' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Figma 2212:2336 - 490x45 single line, so 45px leading not 34 */
.s90-page-cta-title {
    margin: 0 0 4px;
    color: var(--white);
    font-family: var(--assistant);
    font-size: 28px;
    line-height: 45px;
    font-weight: 700;
    text-align: right;
    /* the CMS body h2 gradient-clips its text - this heading must stay solid */
    background: none;
    -webkit-text-fill-color: currentColor;
}

.s90-page-cta-sub {
    margin: 0;
    color: var(--white);
    font-family: var(--assistant);
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    text-align: right;
}

/* white ghost variant of the shared 202x45 CTA button */
.s90-page-cta .outline-btn {
    flex: 0 0 auto;
    border-color: var(--white);
    color: var(--white);
    background-color: transparent;
}

.s90-page-cta .outline-btn:hover {
    background-color: rgba(255, 255, 255, 0.15);
}

/* --- MOBILE (single column) ------------------------------------------------
   Figma "Content • Mobile 390 • Light" (node 2575:35066). Structural deltas vs
   desktop, all verified on the reference render:
     * the whole hero column is CENTRE-aligned (breadcrumb, title, lead and the
       image all share the 195px column centre) - desktop is right-aligned;
     * the hero band closes with the same 2px green->blue hairline as the header
       (desktop has no line at the band's bottom edge);
     * the lead image sits BELOW the copy, centred, and is NOT full-bleed;
     * the blue rail is dropped entirely - the body copy runs to the column edge;
     * the related-link pills collapse to a single column;
     * the foot CTA band restacks: compass on top, then copy, then the button,
       all centre-aligned.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 767px) {
    .s90-content-hero .home-container {
        min-height: 0;
    }

    .s90-content-hero::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
        pointer-events: none;
        z-index: 2;
    }

    /* 2575:35704 - 436px band: 24px to the breadcrumb, 27px under the image */
    .s90-content-hero-inner {
        flex-direction: column;
        align-items: center;
        gap: 0;
        padding: 24px 0 27px;
    }

    .s90-content-hero-text {
        width: 100%;
        text-align: center;
    }

    .s90-content-hero .s90-breadcrumb {
        justify-content: center;
    }

    /* 2575:35715 - 244x80, two lines at 40px leading, centred */
    .s90-content-title {
        font-size: 32px;
        line-height: 40px;
        text-align: center;
        max-width: none;
        margin: 18px auto 0;
    }

    /* 2575:35717 - full 358 measure, two lines at 28px leading */
    .s90-content-lead {
        font-size: 20px;
        line-height: 28px;
        text-align: center;
        max-width: none;
        margin: 13px auto 0;
    }

    /* 2575:35720 - 275x174, centred, NOT full-bleed and not the desktop crop */
    /* also cancels the desktop -30px start bleed */
    .s90-content-hero-media {
        width: 100%;
        max-width: 275px;
        margin: 21px auto 0;
    }

    /* 275x174 crop, but the 47.83px three-corner radius is unchanged from
       desktop (corner profile measured off the 390 frame: square top-left,
       ~48px on the other three) */
    .s90-content-hero-media img {
        aspect-ratio: 275 / 174;
        max-height: none;
    }

    .s90-content-body {
        padding: 34px 0 40px;
    }

    /* the rail and the 800px measure are desktop-only */
    .s90-richtext {
        border-right: 0;
        border-radius: 0;
        padding-right: 0;
        max-width: none;
    }

    /* the mobile h2 keeps the desktop 50/45 (2575:35790 is 358x45) */
    .s90-richtext p {
        margin-bottom: 21px;
    }

    .s90-richtext h1,
    .s90-richtext h2 {
        margin: 21px 0;
    }

    .s90-richtext h3 {
        font-size: 24px;
        line-height: 30px;
    }

    /* 2575:35804 - the list runs the full 358 on mobile */
    .s90-richtext ul {
        max-width: none;
        margin-bottom: 21px;
    }

    /* 2575:35930 - one column, 62px rows, 27px apart */
    .s90-linkpills {
        grid-template-columns: 1fr;
        row-gap: 27px;
        margin-top: 24px;
    }

    .s90-richtext .s90-linkpills {
        margin-top: 24px;
    }

    .s90-infobox {
        margin-top: 24px;
    }

    /* 2575:35873 - 358x381: compass on top, then copy, then button, all centred,
       25px band padding with 27px between the three stacked parts */
    .s90-page-cta {
        flex-direction: column;
        align-items: center;
        gap: 27px;
        min-height: 0;
        margin-top: 24px;
        padding: 25px 16px;
    }

    .s90-page-cta-main {
        flex-direction: column;
        gap: 27px;
    }

    .s90-page-cta-copy {
        max-width: 326px;
    }

    .s90-page-cta-title,
    .s90-page-cta-sub {
        text-align: center;
    }

    .s90-page-cta-title {
        margin-bottom: 8px;
    }

    .s90-page-cta-sub {
        line-height: 19px;
    }
}

/* ---- Lecturers listing page (worker/by_schema/parent90.php) ---- */
/* =========================================================================
   Schema-90 (Avshalom) - LECTURERS listing page
   Append to css/schema90/css/screen.css. NEW rules only.
   Reuses existing shared classes: .home-container, .s90-breadcrumb,
   .lecturer-card, .lecturer-avatar, .lecturer-avatar-placeholder,
   .lecturer-card h3/p, .lecturer-btn. Every value taken from Figma
   (file 3toaWovkMHhqORLi1ipsF0, frame "lecturers • Desktop 1920 • Light").
   ========================================================================= */

.lecturers-page-sec {
    padding-bottom: 80px;
}

/* Self-contained banner wrapper (breadcrumb + head only - NOT the grid below)
   so the decorative flourish can never bleed into/behind the cards. Matches
   the Figma intent: 606px header column right-aligned (RTL start edge),
   decorative dots filling the empty space to its left. */
.lecturers-page-hero {
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    padding: 40px 0 56px;
    min-height: 332px;
}

.lecturers-page-hero .home-container {
    position: relative;
    z-index: 1;
}

/* ---- Page header (Figma frame 2396:1032, right column, width 606, pb 41) ---- */
.lecturers-page-head {
    width: 606px;
    max-width: 100%;
    padding-bottom: 41px;
    text-align: right;
}

/* Figma 2396:1034: Assistant ExtraBold 58/55, solid --blue #0066B3 (NOT gradient) */
.lecturers-page-title {
    margin: 0;
    font-family: var(--assistant);
    font-weight: 800;
    font-size: 58px;
    line-height: 55px;
    color: var(--blue);
    text-align: right;
}

/* Figma 2396:1036: Assistant Regular 25/35, black, 28px below the title */
.lecturers-page-sub {
    margin: 28px 0 0;
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 25px;
    line-height: 35px;
    color: var(--black);
    text-align: right;
}

/* Search field, Figma 2396:1038 verbatim: `bg-white border border-black
   border-solid h-[62px] justify-between p-[12px] rounded-[8px] w-full`.
   The border is a 1px SOLID BLACK hairline - the green->blue gradient that was
   here is not in the design (the rule's own comment already said 1px #000). */
.lecturers-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    height: 62px;
    box-sizing: border-box;
    margin-top: 28px;
    padding: 12px;
    border: 1px solid var(--black);
    border-radius: 8px;
    background-color: var(--white);
}

.lecturers-search-input {
    flex: 1;
    min-width: 0;
    height: 100%;
    border: none;
    background: transparent;
    outline: none;
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 18px;      /* Figma placeholder 2396:1048 */
    color: #333;          /* Secondary/Text color #333333 */
    text-align: right;
}

.lecturers-search-input::placeholder {
    color: #333;
    opacity: 1;
}

/* 38px icon (Figma 2396:1039): magnifier inside a green->blue gradient-ring circle */
.lecturers-search-btn {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: none;
    background: transparent url(../images/site/lecturers_search_icon.svg) center / 38px 38px no-repeat;
    cursor: pointer;
}

/* "חיפוש מתקדם" link under the search field. Figma 2575:28262 places it on the
   390 frame only (358x28, 13px under the box); the 1920 frame has no such link,
   so it stays hidden at desktop widths. */
.lecturers-advanced {
    display: none;
}

@media only screen and (max-width: 767px) {
    .lecturers-advanced {
        display: block;
        width: 100%;
        margin-top: 13px;
        padding: 0;
        border: 0;
        background: none;
        font-family: var(--assistant);
        font-size: 18px;
        line-height: 28px;
        font-weight: 400;
        color: var(--blue);
        text-align: center;
        text-decoration: underline;
        cursor: pointer;
    }
}

/* Results count, Figma 2239:11542 verbatim: Assistant Regular 30px on a 35px
   line in #2A3039 (Basic/Dark - Headline), with the "6 מתוך 15" run in Bold.
   It was 18px/black. */
.lecturers-count {
    margin: 48px 0 24px;
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 30px;
    line-height: 35px;
    color: #2A3039;
    text-align: right;
}

.lecturers-count b {
    font-weight: 700;
}

/* ---- Card grid (Figma: 3 columns x 2 rows = 6 per page, row-gap 36) ----
   3 cols in the reused .home-container (1216) with 30px column-gap; matches
   the Figma 3-up layout. Pagination (6/page) handled server-side in parent90.php. */
/* Figma 2396:1093: FOUR 280px cards across the 1278 column with 52.67px
   gutters (4*280 + 3*52.67 = 1278) and a 36px row gap - not three at 30px. */
.lecturers-page-sec .home-container {
    max-width: 1344px;
}

.lecturers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 52.67px;
    row-gap: 36px;
    align-items: stretch;
}

/* The shared .lecturer-card is tuned for the home page's coloured background
   (near-invisible rgba-white bg + border). On this white page it needs the
   Figma card border (2240:11758: 0.5px solid #666) so cards read as cards.
   Everything else (radius 16, padding 25, avatar, h3, p, .lecturer-btn) is
   reused unchanged. */
.lecturers-grid .lecturer-card {
    height: 100%;
    /* 2396:1094 keeps the 0.8-alpha white fill; only the border differs from
       the home-page card */
    background-color: rgba(255, 255, 255, 0.8);
    border: 0.5px solid #666;
}

/* ---- Card ticket badge + subject tags (Figma 2240:11648 / 2240:11645) -------
   Two elements the card has never rendered. Both need a worker-category data
   model that does not exist yet (the filter dropdowns are the same scaffold),
   so the PHP emits them only when a source is wired up - the styling is ready.

   Ticket: sits on the avatar row, flush to the card's RIGHT edge, with only its
   LEFT corners rounded (rounded-bl/tl-16) so it reads as a tab off the edge.
   The row is 280 wide inside a 230 content box, i.e. it deliberately spills the
   card's 25px padding to reach the edge. */
.lecturer-head {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 54px;
    width: 280px;
    max-width: none;
    margin: -25px -25px 0;          /* cancel the card padding to reach the edge */
    box-sizing: border-box;
}

.lecturer-head .lecturer-avatar {
    margin: 0;
}

.lecturer-ticket {
    flex: 0 0 auto;
    padding: 4px 12px;
    border-radius: 16px 0 0 16px;   /* RTL: rounds the inner (left) corners */
    background: var(--blue);
    color: var(--white);
    font-family: var(--assistant);
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
}

/* Subject tags: #F3F4F6 pills, 0.51px #666 hairline, radius 16, 13/16 */
.lecturer-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-bottom: 13px;
    padding: 0;
    list-style: none;
}

.lecturer-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 8px;
    border: 0.51px solid #666;
    border-radius: 16px;
    background: #F3F4F6;
    color: var(--black);
    font-family: var(--assistant);
    font-size: 13px;
    line-height: 16px;
    font-weight: 400;
    white-space: nowrap;
}

/* Empty-search state */
.lecturers-empty {
    margin: 24px 0 40px;
    padding: 20px;
    font-family: var(--assistant);
    font-size: 18px;
    color: var(--black);
    text-align: center;
}

/* ---- Pagination (Figma 2396:1098): 32x35 boxes, 0.5px #666, radius 4,
   active #9aadb2 white, 10px gap; RTL so page 1 sits on the right ---- */
.lecturers-pagination {
    direction: rtl;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 48px 0 8px;
}

.lecturers-pagination a,
.lecturers-pagination span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 35px;
    box-sizing: border-box;
    border: 0.5px solid #666;
    border-radius: 4px;
    background: var(--white);
    color: var(--black);
    font-family: var(--assistant);
    font-size: 14px;
    line-height: 35px;
    text-decoration: none;
}

.lecturers-pagination a:hover {
    border-color: var(--blue);
}

.lecturers-pagination .lp-active {
    background: #9aadb2;
    color: var(--white);
    border-color: #666;
}

/* chevron arrows drawn in CSS (Figma uses a 24px chevron glyph) */
.lecturers-pagination .lp-arrow::before {
    content: "";
    width: 8px;
    height: 8px;
    border-top: 1.5px solid #3F4C5E;
    border-right: 1.5px solid #3F4C5E;
}

.lecturers-pagination .lp-back::before {
    transform: rotate(45deg);       /* points right > (RTL: previous page) */
    margin-right: 2px;
}

.lecturers-pagination .lp-forward::before {
    transform: rotate(-135deg);     /* points left < (RTL: next page) */
    margin-left: 2px;
}

.lecturers-pagination .lp-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* ---- Responsive: grid collapses, header type scales ---- */
@media only screen and (max-width: 1100px) {
    .lecturers-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .lecturers-page-head {
        width: 100%;
    }

    .lecturers-page-title {
        font-size: 32px;
        line-height: 36px;
    }

    .lecturers-page-sub {
        font-size: 18px;
        line-height: 24px;
    }

    .lecturers-count {
        margin-top: 32px;
    }
}

@media only screen and (max-width: 520px) {
    .lecturers-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   Schema 90 lecturers page - filter bar + toolbar (Figma 2400:29055 filter
   pill, 2239:11563 sort/toggle row). 23/07/2026.
   Filter dropdowns are a VISUAL scaffold (no worker-category data model yet);
   the grid/list view toggle is fully functional. Card badges/category chips
   are intentionally not fabricated (need real data).
   ========================================================================= */

/* ---- Filter bar (gradient pill: חפש button + 5 dropdown shells) ---- */
.lec-filter {
    /* RTL-native: DOM ordered right->left (תחום rightmost ... חפש leftmost) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    width: 100%;
    box-sizing: border-box;
    min-height: 130px;
    padding: 0 24px;
    margin-bottom: 8px;
    border: 0.5px solid #0066B3;
    border-radius: 68px;
    background: linear-gradient(60.86deg,
        rgba(0, 102, 179, 0.20) 2.93%,
        rgba(161, 213, 163, 0.20) 13.75%,
        rgba(255, 255, 255, 0.20) 62.20%,
        rgba(68, 171, 72, 0.20) 86.66%,
        rgba(0, 102, 179, 0.20) 100.77%);
}

.lec-filter-btn {
    flex-shrink: 0;
    width: 136px;
    height: 48px;
    border: none;
    border-radius: 26px;
    background: var(--blue);
    color: var(--white);
    font-family: var(--assistant);
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 0 8.5px -1px rgba(23, 26, 31, 0.08);
}

.lec-filter-field {
    direction: rtl;                 /* label right, chevron left */
    flex-shrink: 0;
    width: 186px;
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 2400:29126: the inner row starts 21px from the LEFT edge (chevron side)
       and the label clears the right edge by 17px - these were swapped */
    padding: 0 17px 0 21px;
    background: var(--white);
    border: 1px solid #dee1e6;
    border-radius: 26px;
    cursor: pointer;
}

.lec-filter-field > span {
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 18px;
    line-height: 22px;
    color: #565d6d;
}

/* shared chevron-down (filter + sort) */
.lec-chev {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: url(../images/site/dropdown_arrow_blue.svg) center / 12px 8px no-repeat;
}

/* ---- Toolbar row: count (right) + view toggle & sorts (left) ---- */
.lec-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 28px;
    flex-wrap: wrap;
}

.lec-toolbar .lecturers-count {
    margin: 0;                      /* override the standalone count margins */
}

.lec-toolbar-left {
    /* RTL-native: DOM ordered [מיין, סוג, toggle] -> toggle renders leftmost */
    display: flex;
    align-items: flex-end;
    gap: 19px;
}

/* View toggle, Figma 2241:11949/11953: two 43x48 cells, each `border border-black`,
   forming one 8px-radius pill. The GRADIENT is the active cell's fill, not the
   wrapper's border - the border is a plain 1px black hairline. */
.lec-view-toggle {
    display: flex;
    height: 48px;
    border: 1px solid var(--black);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--white);
}

.lec-view {
    width: 43px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #2A3039;                 /* inactive icon */
    cursor: pointer;
    padding: 0;
}

.lec-view.is-active {
    background: linear-gradient(90deg, #44AB48 0%, #0066B3 100%);
    color: var(--white);            /* active icon */
}

/* sort dropdown (label above a gradient-bordered box) */
.lec-sort-field {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 171px;
}

.lec-sort-field label {
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 14px;
    color: #2A3039;
    text-align: right;
}

.lec-sort-box {
    /* RTL-native: DOM ordered [value, chevron] -> value right, chevron left */
    height: 48px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    background:
        linear-gradient(var(--white), var(--white)) padding-box,
        linear-gradient(90deg, #44AB48 0%, #0066B3 100%) border-box;
    cursor: pointer;
}

.lec-sort-box > span {
    font-family: var(--assistant);
    font-size: 16px;
    color: #2A3039;
}

.lec-sort-box .lec-chev {
    background-size: 14px 9px;
}

/* ---- List view (real toggle): cards become full-width horizontal rows ---- */
.lecturers-page-sec.is-list .lecturers-grid {
    grid-template-columns: 1fr;
}

.lecturers-page-sec.is-list .lecturer-card {
    flex-direction: row;
    align-items: center;
    text-align: right;
    gap: 24px;
    padding: 20px 25px;
}

.lecturers-page-sec.is-list .lecturer-card .lecturer-avatar {
    margin: 0;
    flex-shrink: 0;
}

.lecturers-page-sec.is-list .lecturer-card h3,
.lecturers-page-sec.is-list .lecturer-card p {
    text-align: right;
}

.lecturers-page-sec.is-list .lecturer-card .lecturer-btn {
    margin: 0 auto 0 0;             /* push the button to the row's left edge */
}

@media only screen and (max-width: 1100px) {
    /* filter bar wraps on narrower desktop/tablet */
    .lec-filter {
        flex-wrap: wrap;
        min-height: 0;
        padding: 20px 24px;
        border-radius: 32px;
    }
    .lec-toolbar { align-items: center; }
}

/* ===================== MOBILE (Figma "Mobile lecturers", 2575:21936) =========
   Deltas from desktop, all read off the frame:
     * 299px band (2575:21973), copy CENTRED - unlike the contact page's mobile
       hero, which stays right-aligned;
     * the search field drops 62px -> 50px and gains a "חיפוש מתקדם" link under it
       (2575:28262) that desktop does not have;
     * the toolbar loses the view toggle entirely and stacks the two sort boxes
       full-width, 19px apart (2575:28425);
     * the card grid is TWO 176px columns, 19px apart, 27px row gap (2997:47794);
     * the card's avatar shrinks to 79.43px, its ticket to 43x27 and its button
       to 144x46.
   ========================================================================== */
@media only screen and (max-width: 767px) {
    .lecturers-page-hero {
        min-height: 299px;
        padding: 6px 0 27px;
    }

    /* 2575:21975 / 2575:21983: breadcrumb and title both centre on the 358 column */
    .lecturers-page-hero .s90-breadcrumb {
        height: 56px;
        justify-content: center;
        margin-bottom: 3px;
    }

    .lecturers-page-head {
        width: 100%;
        padding-bottom: 0;
        text-align: center;
    }

    .lecturers-page-title {
        font-size: 36px;
        line-height: 55px;
        text-align: center;
    }

    .lecturers-page-sub {
        margin-top: 13px;
        font-size: 20px;
        line-height: 28px;
        text-align: center;
    }

    /* 2575:28249: 50px tall, 38px icon inset 12px, placeholder 12px off the end */
    .lecturers-search {
        height: 50px;
        margin-top: 13px;
        padding: 6px 12px;
    }

    .lecturers-search-input {
        font-size: 16px;
    }

    /* 2575:28422 + 2575:28425: count right-aligned, sorts stacked full-width */
    .lec-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        padding-bottom: 28px;
    }

    .lec-toolbar .lecturers-count {
        text-align: right;
    }

    .lec-toolbar-left {
        flex-direction: column;
        align-items: stretch;
        gap: 19px;
    }

    .lec-sort-field,
    .lec-dd--sort {
        width: 100%;
    }

    /* no view toggle on the 390 frame */
    .lec-view-toggle {
        display: none;
    }

    /* The 390 frame has NO filter bar - 2575:28462 goes hero -> toolbar -> cards.
       That is exactly what the "חיפוש מתקדם" link is for, so the bar is collapsed
       here and the link reveals it. */
    .lec-filter {
        display: none;
    }

    .lec-filter.is-open {
        display: flex;
    }

    /* 2997:47794: two 176px cards, 19px gutter, 27px rows */
    .lecturers-grid {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 19px;
        row-gap: 27px;
    }

    .lecturers-grid .lecturer-card {
        padding: 25px 0 0;
    }

    /* 2997:47800: 71.43px image + 4px pad + hairline = 79.43px outer */
    .lecturer-avatar {
        width: 79.43px;
        height: 79.43px;
    }

    .lecturer-head {
        width: 176px;
        margin: -25px 0 0;
    }

    /* 2997:47798: 43x27 */
    .lecturer-ticket {
        min-width: 43px;
        padding: 5px 8px;
    }

    /* 2997:47810: 144x46 */
    .lecturer-btn {
        width: 144px;
        max-width: 100%;
    }
}

/* ---- lecturers filter/sort: custom dropdown (styled trigger + popup) ---- */
.lec-controls { display: block; }
.lec-chev { transition: transform 0.2s ease; }

.lec-dd { position: relative; box-sizing: border-box; }

.lec-dd-trigger {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    font-family: var(--assistant);
}
.lec-dd-label {
    flex: 1;
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* filter-bar variant: 186x48 white pill, #dee1e6 border (Figma) */
.lec-dd--filter {
    width: 186px;
    height: 48px;
    /* 2400:29126: the inner row starts 21px from the LEFT edge (chevron side)
       and the label clears the right edge by 17px - these were swapped */
    padding: 0 17px 0 21px;
    background: var(--white);
    border: 1px solid #dee1e6;
    border-radius: 26px;
}
.lec-dd--filter .lec-dd-label { font-size: 18px; color: #565d6d; }

/* Toolbar sort variant, Figma 2241:11904: `bg-white border border-black
   rounded-[8px] h-[48px] px-[8px]` with a 24px chevron - a plain black hairline,
   not the green->blue gradient border that was here. */
.lec-dd--sort {
    width: 171px;
    height: 48px;
    padding: 0 8px;
    border-radius: 8px;
    border: 1px solid var(--black);
    background-color: var(--white);
}
.lec-dd--sort .lec-dd-label { font-size: 16px; color: #2A3039; }

/* the sort boxes use the 24px chevron (2226:228); the filter pills keep 16px */
.lec-dd--sort .lec-chev {
    width: 24px;
    height: 24px;
    background-size: 16px 10px;
}

/* popup: drops straight from the field, SAME width, gradient border to match */
.lec-dd-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 50;
    margin: 0;
    padding: 6px;
    list-style: none;
    border: 1px solid transparent;
    border-radius: 12px;
    background:
        linear-gradient(var(--white), var(--white)) padding-box,
        linear-gradient(90deg, #44AB48 0%, #0066B3 100%) border-box;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 280px;
    overflow-y: auto;
    display: none;
}
.lec-dd.open .lec-dd-menu { display: block; }
.lec-dd.open .lec-chev { transform: rotate(180deg); }

.lec-dd-opt {
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--assistant);
    font-size: 16px;
    color: #2A3039;
    text-align: right;
}
.lec-dd-opt:hover { background: var(--greenlight); }
.lec-dd-opt.is-sel { background: var(--bluelight1); font-weight: 700; }

/* data-less filters (תחום/קטגוריה/שפה): clearly non-interactive triggers */
.lec-dd.is-disabled {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    background: #f6f7f9;
    cursor: not-allowed;
}
.lec-dd.is-disabled .lec-dd-label { color: #9aa3af; }
.lec-dd.is-disabled .lec-chev { opacity: 0.5; }

/* ============================================================================
   Schema 90 (Avshalom) - SINGLE LECTURER / MENTOR PROFILE
   Figma "lecturer - Desktop 1920 - Light" (2745:6233), spec 13.1.1.5.
   Rendered by worker/by_schema/worker90.php. Every value is the design's own,
   read via get_design_context - not measured off a render.
   ============================================================================ */

/* --- HERO (2745:6270 - 382px band; the portrait deliberately overflows it) --- */
.wk90-hero {
    position: relative;
    box-sizing: border-box;
    min-height: 382px;
    padding: 6px 0 0;
    background-color: var(--white);
    background-image: url(../images/site/contact_hero_bg.png),
                      linear-gradient(86.0527deg,
                          rgba(68, 171, 72, 0.30) 6.092%,
                          rgba(34, 136, 126, 0.10) 50.432%,
                          rgba(0, 102, 179, 0.03) 94.954%);
    background-repeat: no-repeat, no-repeat;
    background-position: center bottom, center;
    background-size: cover, cover;
}

.wk90-hero .home-container,
.wk90-body .home-container {
    max-width: 1344px;              /* => a true 1280 content column */
}

.wk90-hero-inner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    position: relative;
    z-index: 1;
}

/* 2745:6281 - 606px column, 20px between ident / affiliation / teaser */
.wk90-hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;          /* RTL column: flex-end = the left edge */
    gap: 20px;
    width: 606px;
    max-width: 100%;
    padding-bottom: 41px;
    text-align: right;
}

/* the 56px breadcrumb row (2745:6274) is the shared schema-90 pattern; the 16px
   Figma gap is the 20px column gap less this 4px pull-up */
.wk90-hero .s90-breadcrumb {
    height: 56px;
    width: 100%;
    margin-bottom: -4px;
}

.wk90-hero .s90-breadcrumb a,
.wk90-hero .s90-breadcrumb .active {
    color: #666;
}

.wk90-hero .s90-breadcrumb .active {
    font-weight: 700;
}

/* 2748:11987 - name + role pair, 6px apart */
.wk90-ident {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    width: 100%;
}

/* 2745:6283 - Assistant ExtraBold 58/55 #0066B3 */
.wk90-name {
    margin: 0;
    font-family: var(--assistant);
    font-weight: 800;
    font-size: 58px;
    line-height: 55px;
    color: var(--blue);
    text-align: right;
}

/* 2745:6285 - Assistant Regular 25/35 black, 507px measure */
.wk90-role {
    margin: 0;
    max-width: 507px;
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 25px;
    line-height: 35px;
    color: var(--black);
    text-align: right;
}

/* 2748:11980 - 464x44 strip, 1px --blue on TOP AND BOTTOM only, content right */
.wk90-affil {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    box-sizing: border-box;
    width: 464px;
    max-width: 100%;
    height: 44px;
    border-top: 1px solid var(--blue);
    border-bottom: 1px solid var(--blue);
}

/* 2748:11982 - Assistant Regular 14/16 black */
.wk90-affil-text {
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: var(--black);
    text-align: right;
}

/* 2749:12015 - 14x14 academic-cap glyph, exported from the design */
.wk90-affil-icon {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    background: url(../images/site/wk_affiliation.svg) center / 14px 14px no-repeat;
}

/* 2748:11978 - Assistant Regular 16/22 black, 484px measure */
.wk90-teaser {
    width: 484px;
    max-width: 100%;
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: var(--black);
    text-align: right;
}

/* 2748:11968 - 490x533 portrait. The band is only 382 tall, so the image hangs
   below it exactly as the design has it; the negative margin stops it inflating
   the band. */
.wk90-hero-photo {
    flex: 0 0 auto;
    width: 490px;
    max-width: 42%;
    margin-bottom: -151px;
    position: relative;
    z-index: 2;
}

.wk90-hero-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 490 / 533;
    object-fit: cover;
}

/* --- BODY (2745:6298) - blocks inset 51px from the column end, 42px apart --- */
.wk90-body {
    padding: 80px 0 46px;
    background-color: var(--white);
}

.wk90-block {
    box-sizing: border-box;
    padding-left: 51px;             /* RTL: 51px clear of the column end edge */
    margin-bottom: 42px;
}

.wk90-block:last-child {
    margin-bottom: 0;
}

/* 2749:12090 - the bio block runs on an 800px measure, the others on 1176 */
.wk90-block--bio .wk90-bio,
.wk90-block--bio .wk90-sec-title {
    max-width: 800px;
    margin-left: auto;
}

/* 2749:12095 / 12110 / 12162 - Assistant Bold 30/35, green->blue clipped text.
   NOTE: this desktop page uses the 30px section-title token, not the 50px one
   the other desktop pages use. */
.wk90-sec-title {
    margin: 0 0 13px auto;
    width: fit-content;
    max-width: 100%;
    font-family: var(--assistant);
    font-weight: 700;
    font-size: 30px;
    line-height: 35px;
    letter-spacing: 0;
    text-align: right;
    background-image: linear-gradient(90deg, var(--green) 0%, var(--blue) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

/* 2749:12099 - Assistant Regular 20/28 black */
.wk90-bio {
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 20px;
    line-height: 28px;
    color: var(--black);
    text-align: right;
}

.wk90-bio p {
    margin: 0 0 28px;
}

.wk90-bio p:last-child {
    margin-bottom: 0;
}

/* 2749:12116 - 36px chips, radius 28, 1px BLACK hairline, 16/28, 10px gaps */
.wk90-block--tags .wk90-sec-title,
.wk90-block--events .wk90-sec-title {
    margin-bottom: 20px;
}

.wk90-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 10px;
}

.wk90-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 36px;
    padding: 4px 16px;
    border: 1px solid var(--black);
    border-radius: 28px;
    background: transparent;
    color: var(--black);
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
}

/* 2749:12149 - the selected chip */
.wk90-chip.is-active {
    background: var(--blue);
    color: var(--white);
    filter: drop-shadow(0 0 2.8px rgba(0, 102, 179, 0.2));
}

/* --- lectures / meetings cards (2751:12340) - 3 x 366.67 at 38px gaps ------ */
.wk90-events {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 38px;
}

/* 2749:12186 - white, 0.5px #C4C7C5, radius 10, 16px block / 24px inline pads */
.wk90-ev {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 21px;
    box-sizing: border-box;
    min-height: 210px;
    padding: 16px 24px;
    border: 0.5px solid #C4C7C5;
    border-radius: 10px;
    background: var(--white);
}

/* 2749:12194 - date line, underlined, icon on the RTL start edge */
.wk90-ev-date {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 24px;
    border-bottom: 1px solid #C4C7C5;
}

.wk90-ev-date-text {
    flex: 1 1 auto;
    font-family: var(--assistant);
    font-weight: 700;
    font-size: 14px;
    line-height: 16px;
    color: var(--black);
    text-align: right;
}

.wk90-ev-ico {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
}

.wk90-ev-ico--cal {
    background: url(../images/site/calendar-icon.svg) center / 14px 14px no-repeat;
}

.wk90-ev-ico--pin {
    background: url(../images/site/wk_pin.svg) center / 14px 14px no-repeat;
}

.wk90-ev-mid {
    display: flex;
    flex-direction: column;
}

/* 2749:12203 - Assistant Bold 18/25 #0066B3 */
.wk90-ev-title {
    margin: 0;
    font-family: var(--assistant);
    font-weight: 700;
    font-size: 18px;
    line-height: 25px;
    color: var(--blue);
    text-align: right;
}

.wk90-ev-place {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    height: 24px;
}

.wk90-ev-place-text {
    flex: 1 1 auto;
    font-family: var(--assistant);
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: var(--black);
    text-align: right;
}

/* 2751:12235 - the footer rule is #9AADB2, NOT the card border colour */
.wk90-ev-foot {
    display: flex;
    align-items: center;
    padding: 12px 0 0;
    border-top: 1px solid #9AADB2;
}

/* 2751:12240 - Assistant Bold 16/20 #0268B3 with the 8.325x13.5 chevron */
.wk90-ev-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--assistant);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: #0268B3;
    text-decoration: none;
}

.wk90-ev-cta:hover {
    text-decoration: underline;
}

.wk90-ev-chev {
    flex: 0 0 auto;
    width: 8.325px;
    height: 13.5px;
    background: url(../images/site/wk_ev_chevron.svg) center / 8.325px 13.5px no-repeat;
}

/* 2751:12335 - the sold-out variant replaces the CTA with a plain label */
.wk90-ev-full {
    font-family: var(--assistant);
    font-weight: 700;
    font-size: 16px;
    line-height: 20px;
    color: var(--black);
}