/* ============================================
   USER CUSTOM STYLES
   Add your custom CSS overrides here
   ============================================ */

/* This file is loaded after template.min.css
   Use this file to add your custom styles without 
   modifying the main template CSS */

/* Example custom styles: */

/* Custom brand colors */
:root {
    --primary-color: #0066cc;
    --secondary-color: #ff6600;
    --text-color: #333333;
    --background-color: #ffffff;
}

/* Bootstrap container max-width override */
@media (width >= 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1440px;
    }
}

/* Add your custom styles below */

/* ============================================
   Accessibility — skip-to-content link
   Visually hidden until it receives keyboard focus.
   ============================================ */
.skip-link {
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 1px solid #3DCBFF;
    background: #ffffff;
    color: #0066cc;
    text-decoration: none;
    z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
    width: auto;
    height: auto;
    padding: 12px 16px;
    margin: 8px;
    clip: auto;
    overflow: visible;
    font-weight: 600;
    border-radius: 4px;
    color: #0066cc;
    background: #ffffff;
    outline: 3px solid #3DCBFF;
    outline-offset: 2px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#main-content.skip-target-focus,
#main-content:focus {
    outline: 3px solid #0066cc;
    outline-offset: -3px;
    box-shadow: inset 0 0 0 3px #0066cc;
}

/* Smart Slider headings — :focus and :focus-visible (outline clipped by .n2-ss-align overflow) */
.n2-ss-slider [class*="-heading"].skip-target-focus,
.n2-ss-slider [class*="-heading"]:focus,
.n2-ss-slider [class*="-heading"]:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 4px;
    box-shadow: inset 0 0 0 3px #0066cc;
}

/* ============================================
   PARTNERS PAGE STYLES
   ============================================ */

/* Partners Page Body Class */
body.partners-article-view {
    background-color: #f8f7ec; /* Extra light yellow from design */
}
.hero-section{
    min-height: unset;
}

/* Partners Hero Section */
.partners-hero {
    position: relative;
    height: 600px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
}

.partners-hero .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(144.53deg, rgba(0, 0, 0, 0.09) 10.095%, rgba(0, 0, 0, 0.3) 74.423%);
    pointer-events: none;
}

.partners-hero .hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Header Main Regular in Hero */
.partners-hero .header-main-regular {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    height: 100px;
    background: transparent;
}

.partners-hero .side-links {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 40px;
    padding: 4px 0;
}

.partners-hero .options-buttons {
    display: flex;
    gap: 16px;
    align-items: center;
}

.partners-hero .option-button {
    background: #1e2438;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 4px 16px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    letter-spacing: 0.85px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.partners-hero .option-button:hover {
    background: rgba(30, 36, 56, 0.8);
}

.partners-hero .option-button .menu-icon {
    width: 30px;
    height: 30px;
}

.partners-hero .logo-section {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 290px;
}

.partners-hero .main-logo {
    height: 70px;
    width: auto;
}

/* Hero Titles */
.partners-hero .hero-titles {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 60px 240px 60px 0;
    color: white;
    text-align: right;
    gap: 16px;
}

.partners-hero .hero-subtitle {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 26px;
    line-height: 35px;
    letter-spacing: 0.52px;
    margin: 0;
    width: 100%;
    /*max-width: 1040px;*/
}

.partners-hero .hero-title {
    /*font-family: 'BarLev AAA Bold', sans-serif;*/
    font-size: 150px;
    font-weight: 400;
    line-height: 118px;
    letter-spacing: 0;
    margin: 0;
    text-shadow: 0px 4px 20px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
}

.partners-hero .hero-title .title-main {
    color: white;
}

.partners-hero .hero-title .title-dot {
    color: #00ab4e;
}

/* Responsive Design for Partners Hero */
@media (max-width: 1600px) {
    .partners-hero .hero-titles {
        padding-left: 0;
        padding-right: 120px;
    }
}

@media (max-width: 1200px) {
    .partners-hero .hero-titles {
        padding-left: 0;
        padding-right: 60px;
    }
    
    .partners-hero .hero-title {
        font-size: 120px;
        line-height: 100px;
    }
}

@media (max-width: 768px) {
    .partners-hero {
        height: 400px;
    }
    
    .partners-hero .hero-titles {
        padding: 40px 20px;
    }
    
    .partners-hero .hero-title {
        font-size: 80px;
        line-height: 70px;
    }
    
    .partners-hero .hero-subtitle {
        font-size: 20px;
        line-height: 28px;
    }
}

/* ============================================
   MOD_ARTICLES PARTNERS TEMPLATE OVERRIDE
   ============================================ */

/* Partners List from mod_articles */
.partners-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 32px 0;
}

/* Partner Item */
.partners-list .partner-item {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0px 0px 24px 0px rgba(30, 36, 56, 0.1);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.partners-list .partner-item:hover {
    transform: translateY(-2px);
    box-shadow: 0px 4px 32px 0px rgba(30, 36, 56, 0.15);
}

.partners-list .partner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    text-align: right;

}
.partners-list .partner-content p{
    margin-bottom: unset;
    max-width: 66.66%;
}
.partners-list .partner-title {
    font-family: 'Heebo', sans-serif;
    font-weight: 500;
    font-size: 23px;
    line-height: 25px;
    color: black;
    margin: 0;
    width: 100%;
}

.partners-list .partner-social {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 20px;
    width: 100%;
    /*max-width: 820px;*/
}

.partners-list .social-btn {
    width: 32px;
    height: 32px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #ddd;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
}

.partners-list .social-btn:hover {
    background: #1e2438;
    color: white;
    border-color: #1e2438;
}

.partners-list .social-btn svg {
    width: 20px;
    height: 20px;
}

.partners-list .partner-description {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 22px;
    color: black;
    margin: 0;
    width: 100%;
    max-width: 754px;
}

.partners-list .partner-more-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    color: #4b5060; /* Dark blue 80% */
    text-decoration: none;
    transition: all 0.3s ease;
}
.partners-list  button, .partners-list .btn, .partners-list .button, .partners-list .partner-more-btn{
padding: 0!important;
}
.partners-list .partner-more-btn:hover {
    color: #1e2438;
}

.partners-list .partner-more-btn .btn-text {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 20px;
    letter-spacing: 0.85px;
}

.partners-list .partner-more-btn .btn-arrow {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.partners-list .partner-logo {
    flex-shrink: 0;
    width: 167.5px;
    height: 167.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.partners-list .partner-logo-img {
    width: fit-content;
    height: auto;
    object-fit: cover;
    object-position: center;
}
.partner-social a i {
    color: #333333;
    border: unset;
}

/* Responsive Design for mod_articles Partners */
@media (max-width: 1200px) {
    .partners-list .partner-item {
        flex-direction: column-reverse;
        align-items: center;
        text-align: center;
        gap: 32px;
    }
    
    .partners-list .partner-content {
        align-items: center;
        text-align: center;
    }
    
    .partners-list .partner-social {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .partners-list .partner-item {
        padding: 24px;
        gap: 24px;
    }
    
    .partners-list .partner-title {
        font-size: 20px;
        line-height: 24px;
    }
    
    .partners-list .partner-description {
        font-size: 14px;
        line-height: 20px;
    }
    
    .partners-list .partner-social {
        gap: 12px;
    }
    
    .partners-list .partner-logo {
        width: fit-content;
        /*height: 120px;*/
    }
}

/* ============================================
   BUTTON HOVER EFFECTS - Fill from Right to Left (Hebrew RTL)
   ============================================ */

/* General Button Base Styles with Hover Effect Preparation */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
a.btn {
    position: relative;
    overflow: hidden;
    border: 1px solid #000;
    background-color: transparent;
    color: #000;
    transition: color 0.4s ease;
    z-index: 1;
}

/* Dark Section Button Styles - White text and border */
.section-dark button,
.section-dark .btn,
.section-dark .button,
.section-dark input[type="submit"],
.section-dark input[type="button"],
.section-dark a.btn,
.wcci-dark button,
.wcci-dark .btn,
.wcci-dark .button,
.wcci-dark input[type="submit"],
.wcci-dark input[type="button"],
.wcci-dark a.btn,
.facility-dark button,
.facility-dark .btn,
.facility-dark .button,
.facility-dark input[type="submit"],
.facility-dark input[type="button"],
.facility-dark a.btn {
    border-color: #fff;
    color: #fff;
}

/* Create the hover fill effect using pseudo-element - Right to Left (Hebrew RTL) */
button::before,
.btn::before,
.button::before,
input[type="submit"]::before,
input[type="button"]::before,
a.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* Start hidden on the right side */
    width: 100%;
    height: 100%;
    background-color: #000;
    transition: left 0.4s ease;
    z-index: -1;
}

/* Dark Section Hover Fill - Use white as fill color */
.section-dark button::before,
.section-dark .btn::before,
.section-dark .button::before,
.section-dark input[type="submit"]::before,
.section-dark input[type="button"]::before,
.section-dark a.btn::before,
.wcci-dark button::before,
.wcci-dark .btn::before,
.wcci-dark .button::before,
.wcci-dark input[type="submit"]::before,
.wcci-dark input[type="button"]::before,
.wcci-dark a.btn::before,
.facility-dark button::before,
.facility-dark .btn::before,
.facility-dark .button::before,
.facility-dark input[type="submit"]::before,
.facility-dark input[type="button"]::before,
.facility-dark a.btn::before {
    background-color: #fff;
}

/* Hover state - fill animation from right to left */
button:hover::before,
.btn:hover::before,
.button:hover::before,
input[type="submit"]:hover::before,
input[type="button"]:hover::before,
a.btn:hover::before {
    left: 0; /* Slides in from right to left */
}

/* Change text color on hover */
button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover {
    color: #ffffff;
}

/* Dark Section Hover Text - Use black text when hovering over white fill */
.section-dark button:hover,
.section-dark .btn:hover,
.section-dark .button:hover,
.section-dark input[type="submit"]:hover,
.section-dark input[type="button"]:hover,
.section-dark a.btn:hover,
.wcci-dark button:hover,
.wcci-dark .btn:hover,
.wcci-dark .button:hover,
.wcci-dark input[type="submit"]:hover,
.wcci-dark input[type="button"]:hover,
.wcci-dark a.btn:hover,
.facility-dark button:hover,
.facility-dark .btn:hover,
.facility-dark .button:hover,
.facility-dark input[type="submit"]:hover,
.facility-dark input[type="button"]:hover,
.facility-dark a.btn:hover {
    color: #000;
}

/* ============================================
   FACILITY-SPECIFIC BUTTON COLORS
   Based on Custom Field ID 38
   ============================================ */

/* Light Section Facility Colors - Use facility color for text/border and fill */
body.facility-page button,
body.facility-page .btn,
body.facility-page .button,
body.facility-page input[type="submit"],
body.facility-page input[type="button"],
body.facility-page a.btn {
    border-color: var(--facility-color, #000);
    color: var(--facility-color, #000);
}

body.facility-page button::before,
body.facility-page .btn::before,
body.facility-page .button::before,
body.facility-page input[type="submit"]::before,
body.facility-page input[type="button"]::before,
body.facility-page a.btn::before {
    background-color: var(--facility-color, #000);
}

/* Dark Section Facility Colors - Use facility color for text/border and fill */
body.facility-page .section-dark button,
body.facility-page .section-dark .btn,
body.facility-page .section-dark .button,
body.facility-page .section-dark input[type="submit"],
body.facility-page .section-dark input[type="button"],
body.facility-page .section-dark a.btn,
body.facility-page .wcci-dark button,
body.facility-page .wcci-dark .btn,
body.facility-page .wcci-dark .button,
body.facility-page .wcci-dark input[type="submit"],
body.facility-page .wcci-dark input[type="button"],
body.facility-page .wcci-dark a.btn,
body.facility-page .facility-dark button,
body.facility-page .facility-dark .btn,
body.facility-page .facility-dark .button,
body.facility-page .facility-dark input[type="submit"],
body.facility-page .facility-dark input[type="button"],
body.facility-page .facility-dark a.btn {
    border-color: var(--facility-color, #fff);
    color: var(--facility-color, #fff);
}

body.facility-page .section-dark button::before,
body.facility-page .section-dark .btn::before,
body.facility-page .section-dark .button::before,
body.facility-page .section-dark input[type="submit"]::before,
body.facility-page .section-dark input[type="button"]::before,
body.facility-page .section-dark a.btn::before,
body.facility-page .wcci-dark button::before,
body.facility-page .wcci-dark .btn::before,
body.facility-page .wcci-dark .button::before,
body.facility-page .wcci-dark input[type="submit"]::before,
body.facility-page .wcci-dark input[type="button"]::before,
body.facility-page .wcci-dark a.btn::before,
body.facility-page .facility-dark button::before,
body.facility-page .facility-dark .btn::before,
body.facility-page .facility-dark .button::before,
body.facility-page .facility-dark input[type="submit"]::before,
body.facility-page .facility-dark input[type="button"]::before,
body.facility-page .facility-dark a.btn::before {
    background-color: var(--facility-color, #fff);
}

/* Exception for buttons that already have background colors (don't override them) */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark {
    border: none;
    background-color: initial;
}

.btn-primary::before,
.btn-secondary::before,
.btn-success::before,
.btn-danger::before,
.btn-warning::before,
.btn-info::before,
.btn-light::before,
.btn-dark::before {
    display: none;
}

/* ============================================
   TOP ITEMS MENU - 3 Level Dropdown Menu
   ============================================ */

.topbar-menu {
    position: relative;
}

/* Top Items Menu Container */
.top-items-menu .top-items-nav {
    position: relative;
}

/* Level 1 - Main Navigation Items */
.top-items-menu .nav-item.dropdown {
    position: relative;
}

@media (min-width: 992px) {
    /* Keep hero top-items independent from header mod-menu-desktop-dropdowns rules */
    .top-items-menu .navbar-nav .dropdown-menu,
    .top-items-menu .top-items-dropdown {
        position: absolute;
    }

    .top-items-menu .nav-item.dropdown > .dropdown-menu.mega-dropdown.top-items-dropdown {
        min-width: 800px;
        width: auto;
        max-width: min(1200px, 95vw);
        margin-top: 0.25rem;
    }
}

.top-items-menu .nav-link.dropdown-toggle {
    padding: 2px 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.top-items-menu .nav-link:hover {
    color: var(--primary-color, #0066cc);
}

/* Active / current menu item */
.top-items-menu li.active > a,
.top-items-menu li.current > a {
    background-color: #616573;
}
/* Center nudge for the main nav. The homepage uses #mainmenu; the homepage-style
   override pages reuse the same header markup but with their own wrapper id, so they
   must be listed here too or their menu sits shifted toward the start (right in RTL). */
#mainmenu,
#mainabout-mainmenu,
#rental-mainmenu,
#tender-mainmenu,
#team-mainmenu{
    position: relative;
    right: 7vw;
}

/* Heading-type menu items render as <button> (WCAG: keyboard-focusable
   dropdown toggle without href). Reset native button styling so it
   visually matches the surrounding <a class="nav-link"> items, and
   neutralise the site-wide button:hover fill animation. */
#mainmenu button.nav-link,
.navbar-nav button.nav-link {
    background: transparent;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: inherit;
}
/* Kill the global ::before fill animation (defined ~line 537) */
#mainmenu button.nav-link::before,
.navbar-nav button.nav-link::before,
#mainmenu button.nav-link:hover::before,
.navbar-nav button.nav-link:hover::before {
    content: none;
    background: none;
    left: auto;
}
/* Kill the global :hover text-color override */
#mainmenu button.nav-link:hover,
.navbar-nav button.nav-link:hover {
    color: inherit;
    background: transparent;
}
#mainmenu button.nav-link:focus-visible,
.navbar-nav button.nav-link:focus-visible {
    outline: 2px solid #3DCBFF;
    outline-offset: 2px;
}
/* Open state — match the level2-title gradient inside the dropdown
   (dark blue gradient + white text). Selectors cover both <a> and
   <button> markup. Scoped to .mega-menu-root <li> (unique enough to
   not need a parent scope, so it works in both #mainmenu and
   .site-top-bar.bg-white contexts). */
li.mega-menu-root > .nav-link.dropdown-toggle[aria-expanded="true"],
li.mega-menu-root > .nav-link.dropdown-toggle.show,
li.mega-menu-root > .nav-link.dropdown-toggle[aria-expanded="true"]:hover,
li.mega-menu-root > .nav-link.dropdown-toggle.show:hover {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: #ffffff;
    border-radius: 0.25rem;
}

@media (min-width: 992px) {
    /* Bootstrap sets .navbar-nav .dropdown-menu { position: static } for collapsed nav —
       scoped to header menus only; .top-items-menu keeps its own positioning. */
    #mainmenu ul.mod-menu-desktop-dropdowns,
    .topbar-menu ul.mod-menu-desktop-dropdowns {
        align-items: center;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown {
        align-self: center;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns .dropdown-menu:not(.mega-dropdown) {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        z-index: 1050;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root),
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) {
        position: relative;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) {
        min-width: 12rem;
        width: max-content;
        max-width: min(24rem, 95vw);
        padding: 0.5rem 0;
        margin-top: 0.25rem;
        border: 0;
        border-radius: 0.375rem;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        background-color: #1e2438;
        list-style: none;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) > .nav-item,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) > .nav-item {
        width: 100%;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item,
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        padding: 0.5rem 1rem;
        color: #ffffff;
        white-space: nowrap;
        border-radius: 0;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:hover,
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:focus,
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:hover,
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:focus,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:hover,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .dropdown-item:focus,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:hover,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown) .nav-link:focus {
        background-color: rgba(255, 255, 255, 0.08);
        color: #ffffff;
    }

    /* Standard dropdowns: hover + keyboard focus-within (WCAG 2.1.1); parent <a> click navigates */
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root):hover > .dropdown-menu:not(.mega-dropdown),
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root):focus-within > .dropdown-menu:not(.mega-dropdown),
    #mainmenu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown).show,
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root):hover > .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root):focus-within > .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns > .nav-item.dropdown:not(.mega-menu-root) > .dropdown-menu:not(.mega-dropdown).show {
        display: block;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns > li.mega-menu-root,
    .topbar-menu ul.mod-menu-desktop-dropdowns > li.mega-menu-root {
        position: relative;
    }

    #mainmenu li.mega-menu-root > .mega-dropdown.top-items-dropdown,
    .topbar-menu li.mega-menu-root > .mega-dropdown.top-items-dropdown {
        position: absolute;
        top: 100%;
        inset-inline-start: 0;
        width: 840px;
        max-width: min(1200px, 95vw);
    }

    html[dir="rtl"] #mainmenu li.mega-menu-root:last-child > .mega-dropdown.top-items-dropdown,
    html[dir="rtl"] .topbar-menu li.mega-menu-root:last-child > .mega-dropdown.top-items-dropdown {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    html[dir="ltr"] #mainmenu li.mega-menu-root:last-child > .mega-dropdown.top-items-dropdown,
    html[dir="ltr"] .topbar-menu li.mega-menu-root:last-child > .mega-dropdown.top-items-dropdown {
        inset-inline-start: auto;
        inset-inline-end: 0;
    }

    #mainmenu li.mega-menu-root:hover > .mega-dropdown.top-items-dropdown,
    #mainmenu li.mega-menu-root:focus-within > .mega-dropdown.top-items-dropdown,
    #mainmenu li.mega-menu-root > .mega-dropdown.top-items-dropdown.show,
    .topbar-menu li.mega-menu-root:hover > .mega-dropdown.top-items-dropdown,
    .topbar-menu li.mega-menu-root:focus-within > .mega-dropdown.top-items-dropdown,
    .topbar-menu li.mega-menu-root > .mega-dropdown.top-items-dropdown.show {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #mainmenu li.mega-menu-root > .dropdown-menu.mega-dropdown.top-items-dropdown {
        border: none;
        border-radius: 16px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    }

    #mainmenu .dropdown-header.level2-title,
    #mainmenu .mega-dropdown h6.level2-title,
    #mainmenu .mega-dropdown a.level2-title {
        background: linear-gradient(135deg, #0066cc, #004499);
        color: #ffffff;
        text-transform: none;
        letter-spacing: normal;
        font-size: 1rem;
        line-height: 1.35;
        font-weight: 700;
        padding: 0.75rem 1rem;
        margin: 0 0 1rem;
        border-radius: 0.25rem;
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    #mainmenu .mega-dropdown a.level2-title.level2-title-link,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:link,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:visited,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:hover,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:focus,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:active {
        text-decoration: none;
        cursor: pointer;
        color: #ffffff;
    }

    #mainmenu .mega-dropdown a.level2-title.level2-title-link:hover,
    #mainmenu .mega-dropdown a.level2-title.level2-title-link:focus-visible {
        text-decoration: underline;
    }

    #mainmenu .mega-dropdown h6.level2-title-label {
        cursor: default;
    }

    #mainmenu .level3-item {
        color: #1e2438;
        border-inline-start: 3px solid transparent;
        white-space: normal;
    }

    #mainmenu .level3-item:hover,
    #mainmenu .level3-item:focus {
        background-color: #f8f9fa;
        color: #1e2438;
        border-inline-start-color: #3DCBFF;
        transform: translateX(-5px);
    }

    #mainmenu .col-md-8 .level3-items.row > .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    #mainmenu ul.mod-menu-desktop-dropdowns .dropdown-menu:not(.mega-dropdown),
    .topbar-menu ul.mod-menu-desktop-dropdowns .dropdown-menu:not(.mega-dropdown) {
        overflow: visible;
    }

    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .dropdown-menu {
        top: 0;
        margin-top: 0;
    }

    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend:hover > .dropdown-menu,
    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend:focus-within > .dropdown-menu {
        display: block;
    }

    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .dropdown-item::after,
    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .nav-link::after,
    #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .mod-menu__separator.dropdown-toggle::after {
        content: '\203A';
        display: inline-block;
        margin-inline-start: 0.45em;
        font-size: 1.1em;
        line-height: 1;
        vertical-align: middle;
        border: none;
    }

    html[dir="ltr"] #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .dropdown-item::after,
    html[dir="ltr"] #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .nav-link::after,
    html[dir="ltr"] #mainmenu .dropdown-menu:not(.mega-dropdown) .dropend > .mod-menu__separator.dropdown-toggle::after {
        content: '\2039';
    }
}

/* Mega Dropdown Container — homepage hero top-items module */
.top-items-menu .top-items-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 800px;
    max-width: 1200px;
    background: #1e2438;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 0;
    z-index: 1050;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* Shared mega panel class (also used by header mega-menu-root) */
.top-items-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 800px;
    max-width: 1200px;
    background: #1e2438;
    border: 1px solid #e9ecef;
    border-radius: 0.375rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    padding: 1.5rem 0;
    z-index: 1050;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

/* Show dropdown on hover or Bootstrap .show (keyboard / click) */
.top-items-menu .dropdown:hover .top-items-dropdown,
.top-items-menu .dropdown:focus-within .top-items-dropdown,
.top-items-menu .top-items-dropdown.show,
.top-items-dropdown.show,
#mainmenu li.mega-menu-root:hover > .mega-dropdown.top-items-dropdown,
#mainmenu li.mega-menu-root:focus-within > .mega-dropdown.top-items-dropdown,
#mainmenu li.mega-menu-root > .mega-dropdown.top-items-dropdown.show {
    display: block;
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

/* Level 2 - Title Headers (Blue Section) */
.top-items-dropdown .level2-title {
    background: linear-gradient(135deg, #0066cc, #004499);
    color: #ffffff;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
}

.top-items-dropdown .level2-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.top-items-dropdown .level2-title:hover::before {
    left: 100%;
}

.top-items-menu .top-items-dropdown a.level2-title.level2-title-link,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:link,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:visited,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:hover,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:focus,
.top-items-menu .top-items-dropdown a.level2-title.level2-title-link:active {
    display: block;
    text-decoration: none !important;
    cursor: pointer;
}

/* Level 3 - Menu Items Container */
.level3-items {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Level 3 - Individual Menu Items */
.level3-item {
    padding: 0.5rem 1rem;
    color: #333333;
    text-decoration: none;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    border-left: 3px solid transparent;
}

.level3-item:hover {
    background-color: #f8f9fa;
    color: var(--primary-color, #0066cc);
    /*border-left-color: var(--primary-color, #0066cc);*/
    transform: translateX(5px);
    text-decoration: none;
}

.level3-item:focus {
    outline: 2px solid var(--primary-color, #0066cc);
    outline-offset: 2px;
}

@media (min-width: 992px) {
    .top-items-dropdown .level3-items.row .col-md-6 {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .top-items-dropdown {
        position: static;
        min-width: 100%;
        transform: none;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        border: none;
        padding: 1rem;
        background: #f8f9fa;
    }
    
    .top-items-dropdown .container {
        padding: 0;
    }
    
    .top-items-dropdown .row {
        margin: 0;
    }
    
    .top-items-dropdown .col-md-4 {
        padding: 0.5rem 0;
        border-bottom: 1px solid #e9ecef;
    }
    
    .top-items-dropdown .col-md-4:last-child {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .top-items-dropdown .level2-title {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
    
    .level3-item {
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
    }
}

/* Animation for dropdown appearance */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.top-items-dropdown.show {
    animation: fadeInDown 0.3s ease-out;
}

/* homepage styles */

.dark-section-color-light, h2.dark-section-color-light{
    color: #fff;
}
.dark-section-color-dark{
    color: #00B3F0;
}

.font-barlev{
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
}
h3.font-barlev{
    font-size: 50px!important;
}

.info-section-short-description {
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-size: 100px;
    line-height: 81px;
}

#article-color-stripe-container {
    justify-content: flex-start;
}

.info-section-item {
    width: 80%;
    margin: 0 auto;
}
@media(min-width: 992px) {
    .info-section-item{
        max-width:  696px;
    }
}

.info-section-stripe-container {
    width: 100%;
    margin-top: 30px;
}

.info-section-stripe-container .color-stripe-image-container {
    width: 100%;
}

.info-section-stripe-container .color-stripe-image {
    width: 100%;
}

.sub-heading{
    font-family: Heebo;
    font-weight: 500;
    font-style: Medium;
    font-size: 23px;
    line-height: 30px;
    text-align: right;
    margin: 50px 0 40px;
    color: #d3d2d7;
}

/* ============================================
   Useful Info Section (WCCI Dark)
   ============================================ */
.wcci-dark {
    background-color: #1E2438;
    color: #fff;
}

.facility-info-bar {
    padding: 45px 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-bottom: unset;
}

.facility-info-bar .info-title {
    text-align: right; /* Assuming RTL */
    margin-bottom: 30px;
}

.facility-info-bar .info-title h4 {
    font-weight: 600;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0;
}

.useful-info-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; /* Start from right in RTL */
    margin: 0 -10px; /* Negative margin to offset item padding */
    padding: 0;
    list-style: none;
}

.useful-info-item {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    padding: 0; /* Remove padding from li */
    margin: 0 10px; /* Add margin for gutters instead */
}

.useful-info-link {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    text-decoration: none !important;
    color: #fff !important;
    text-align: right;
    min-width: 120px;
    padding: 20px 15px;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
    /* Remove border and border-radius */
}

/* Create hover fill effect for useful-info-link - Right to Left (Hebrew RTL) */
.useful-info-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* Start hidden on the right side */
    width: 100%;
    height: 100%;
    background-color: #3DCBFF; /* Default site color for home page */
    transition: left 0.4s ease;
    z-index: -1;
}

/* Hover state - fill animation from right to left */
.useful-info-link:hover::before {
    left: 0; /* Slides in from right to left */
}

.useful-info-link:hover {
    color: #fff !important; /* White text on colored background */
}

/* Make sure icon and text change color on hover */
.useful-info-link:hover .useful-info-icon {
    filter: brightness(0) invert(1); /* White icons */
}

.useful-info-link:hover .useful-info-text {
    color: #fff !important; /* White text */
}

/* Facility page useful-info with facility colors from field id=38 */
.facility-category-view .useful-info-link::before {
    background-color: var(--facility-color, #3DCBFF); /* Use facility color, fallback to default if empty */
}

.facility-category-view .useful-info-link:hover {
    color: #fff !important; /* Keep white text on facility color background */
}

.facility-category-view .useful-info-link:hover .useful-info-icon {
    filter: brightness(0) invert(1); /* Keep white icons */
}

.facility-category-view .useful-info-link:hover .useful-info-text {
    color: #fff !important; /* Keep white text */
}

/* Useful Info hover contrast — #facility-useful-info (getUsefulInfoHoverStyle) */
#facility-useful-info .useful-info-link::before {
    background-color: var(--facility-color, #3DCBFF);
}

#facility-useful-info .useful-info-link:hover,
#facility-useful-info .useful-info-link:hover .useful-info-text {
    color: var(--useful-info-hover-text, #ffffff) !important;
}

#facility-useful-info .useful-info-link:hover .useful-info-icon {
    filter: var(--useful-info-hover-icon-filter, brightness(0) invert(1));
}

.useful-info-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    margin: 0;
    filter: brightness(0) invert(1);
}

.useful-info-text {
    font-size: 1.1rem;
    font-weight: 500;
}

/* Hide breadcrumb divider icon in facility top bar */
.facility-top-bar .breadcrumb .divider .icon-location,
.facility-top-bar .breadcrumb .divider.icon-location {
    display: none !important;
}
.facility-breadcrumbs ol li a span, .facility-breadcrumbs ol li span {
    font-size: 13px;
    font-weight: 400;
}

.facility-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='2.5'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
    padding: 0 3px;
    vertical-align: middle;
}

.facility-breadcrumbs .breadcrumb-item a {
    color: #fff;
    text-decoration: none;
    opacity: 0.85;
}

.facility-breadcrumbs .breadcrumb-item a:hover {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.facility-breadcrumbs .breadcrumb-item.active,
.facility-breadcrumbs .breadcrumb-item.active span {
    color: #fff;
    opacity: 1;
}

/* עיצוב בסיסי לכפתור */
.btn.faciilty-btn {
    display: inline-block;
    padding: 3px 17px;
    background-color: #e9e9ed; /* צבע הרקע מהתמונה */
    color: #3f4652;            /* צבע הטקסט מהתמונה */
    border: 1px solid #c9c9cf;  /* מסגרת עדינה שקיימת בתמונה */
    border-radius: 50px;       /* יוצר את צורת ה-Pill */
    text-decoration: none;     /* ביטול קו תחתון של קישור */
    font-family: sans-serif;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.3s ease; /* אנימציה חלקה למעבר */
    cursor: pointer;
    text-align: center;
    margin-left: 13px;
}

/* אפקט Hover - היפוך צבעים */
.btn.faciilty-btn:hover {
    background-color: #3f4652; /* הרקע הופך לצבע הטקסט המקורי */
    color: #e9e9ed;            /* הטקסט הופך לצבע הרקע המקורי */
    border-color: #3f4652;     /* התאמת המסגרת לצבע החדש */
}

/* ============================================
   Facility Top Bar – 3-Column Layout
   ============================================ */

/* Wrapper */
.facility-top-bar {
    gap: 1rem;
    flex-wrap: nowrap;
    align-items: center;
}

/* Hide the site-wide facilities mega-menu inside the facility top bar –
   it belongs only on the homepage header, not on inner facility pages. */
.ftb-header-right .dark-heading-menu-module {
    display: none;
}

/* Right column: logo + breadcrumbs */
.ftb-logo-breadcrumbs {
    flex-shrink: 0;
    align-items: flex-start;
    margin-top: -37px;
}

.facility-top-logo-img {
    max-height: 110px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 4px;
    margin-top: 9px;
}

/* Center: facility menu */
.ftb-menu {
    flex: 1 1 auto;
}
@media(min-width: 992px) {
    .ftb-menu, .ftb-actions {
        margin-top:-69px;
    }
    .facility-top-bar.ftb-ctx-info .ftb-header-right .finder-dropdown-wrapper, .facility-top-bar.ftb-ctx-info .ftb-header-right .mod-languages__list{
        background-color: #F4F4F5;
/*        color: #1E2438;*/
    }
    .facility-top-bar.ftb-ctx-info .ftb-header-right .finder-dropdown-wrapper a, 
    .facility-top-bar.ftb-ctx-info .ftb-header-right .mod-languages__list a{
        color: #1E2438!important;
    }
    .facility-top-bar{
        padding-left: 30px;
        padding-right: 30px;
    }
}

.ftb-menu ul li.list-inline-item {
    margin-right: unset;
}

/* Left column: actions (language + search + info button) */
.ftb-actions {
    flex-shrink: 0;
    gap: 0.75rem;
    align-items: center;
}

/* Inherit homepage header appearance inside the facility bar */
.ftb-header-left,
.ftb-header-right {
    display: flex;
    align-items: center;
}
.ftb-header-left .header-left,
.ftb-header-right .header-right {
    margin: 0 !important;
}
.ftb-header-left .mod-languages a,
.ftb-header-right .mod-languages a {
    color: #fff;
}
.ftb-header-right .mod-languages,
.ftb-header-right .mod-search {
    color: #fff;
}

/* ---- Active facility menu item – dark pill ---- */
.facility-menu-link {
    padding: 4px 13px;
    border-radius: 50px;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.facility-menu-link.active {
    background: #616573;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff !important;
    padding: 4px 16px 4px;
}

.facility-menu-link:not(.active):hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff !important;
}

/* ---- Info button ("מידע שימושי") ---- */
.ftb-info-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 14px;
    background: rgba(10, 10, 10, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease;
    line-height: 1.4;
}

.ftb-ctx-info .ftb-info-btn{
    background-color: #F4F4F5;
    color: #1E2438!important;
}

.ftb-info-btn:hover {
    background: rgba(10, 10, 10, 0.85);
    color: #fff;
    text-decoration: none;
}

.ftb-info-icon {
    font-size: 14px;
    flex-shrink: 0;
}

/* Responsive: hide facility top bar on small screens */
/* !important needed because the element carries Bootstrap's d-flex (!important) directly in the markup */
@media (max-width: 991px) {
    .facility-top-bar {
        display: none !important;
    }
}
/* Category Image Overlay Styles */
.category-item-withimage .category-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 323 / 264;;
}

.category-item-withimage .category-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.category-item-withimage:hover .category-image {
    transform: rotate(3deg) scale(1.1);
}

.category-item-withimage .category-overlay-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10;
    padding: 1.5rem 1rem;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    pointer-events: none;
}

.category-item-withimage .category-overlay-content .category-title {
    color: #fff;
    margin: 0;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    font-weight: 600;
    position: relative;
    top: -5px;
    font-weight: 300;
    
}
.category-item-withimage .category-overlay-content .category-title a{
    text-decoration: none;
}

/* ============================================
   DPCalendar Upcoming Card Styles
   ============================================ */
.mod-dpcalendar-upcoming-card__events {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.mod-dpcalendar-upcoming-card__event {
    /*background: #fff;
    border-radius: 8px;*/
    overflow: hidden;
    /*box-shadow: 0 2px 10px rgba(0,0,0,0.1);*/
    display: flex;
    flex-direction: column;
}

.mod-dpcalendar-upcoming-card__image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.mod-dpcalendar-upcoming-card__location {
    padding: 0px 15px;
    color: #fff;
    font-size: 0.9em;
    font-weight: 500;
    position: relative;
    top: -30px;
    max-width: 74%;
    /* Ensure text contrasts well with event color background */
}

.mod-dpcalendar-upcoming-card__content {
    /*padding: 15px;*/
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.mod-dpcalendar-upcoming-card__title {
    margin: 0 0 10px 0;
    font-size: 1.2rem;
    line-height: 1.4;
    font-weight: 600;
}

.mod-dpcalendar-upcoming-card__title a {
    color: inherit;
    text-decoration: none;
    padding: unset;
}

.mod-dpcalendar-upcoming-card__date {
    margin-bottom: 15px;
    color: #666;
    font-size: 0.95rem;
}

.mod-dpcalendar-upcoming-card__readmore {
    margin-top: auto;
    color: var(--primary-color, #0066cc);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mod-dpcalendar-upcoming-card__readmore .readmore-arrow-holder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    aspect-ratio: 1 / 1;
    border-radius: 30px;
    background: #D9D9D9;
    flex-shrink: 0;
}

.mod-dpcalendar-upcoming-card__readmore .readmore-arrow {
    color: #000;
}

.mod-dpcalendar-upcoming-card__readmore:hover .readmore-arrow {
    color: #fff;
}

/* ============================================
   WCCI Footer Form Styles
   ============================================ */
#wcci-footer-form {
    /* Ensure RTL Layout */
    direction: rtl; 
    text-align: right;
}

/* Container for relative positioning of absolute elements */
#wcci-footer-form .col-md-12 {
    position: relative;
}

/* Hide labels that are not needed visually */
#wcci-footer-form .rsform-block-news-letter-subscriube .formControlLabel,
#wcci-footer-form .rsform-block-footer-submit .formControlLabel,
#wcci-footer-form .rsform-block-privacy-policy-confirm .formControlLabel {
    display: none;
}

/* Force form controls to take full width since we hide labels */
#wcci-footer-form .formControls {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0 15px; /* Maintain standard gutters */
}

/* Input Field Style */
#wcci-footer-form #news-letter-subscriube {
    border-radius: 50px;
    background-color: transparent;
    border: 1px solid #ffffff;
    color: #ffffff;
    padding: 12px 20px 12px 50px; /* padding-left extra for the button on the left */
    box-shadow: none;
    width: 100%;
}

#wcci-footer-form #news-letter-subscriube::placeholder {
    color: #ffffff;
    opacity: 0.9;
}

#wcci-footer-form #news-letter-subscriube:focus {
    background-color: rgba(255,255,255,0.1);
    outline: none;
    box-shadow: none;
    border-color: #fff;
}

/* Submit Button - Positioned absolute */
#wcci-footer-form .rsform-block-footer-submit {
    position: relative;
    top: -105PX;
    /* left: 20px; */
    margin: 0 !important;
    z-index: 10;
    width: auto;
    height: 44px;
    display: flex;
    align-items: center;
    pointer-events: none;
    justify-content: space-evenly;
    border: 1px solid #fff;
    max-width: 43px;
    right: 84%;
    border-radius: 100px;
}

#wcci-footer-form .rsform-block-footer-submit .formControls {
    padding: 0;
    width: auto;
    flex: none;
}

#wcci-footer-form #footer-submit {
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 20px;
    padding: 5px 10px;
    cursor: pointer;
    pointer-events: auto; /* Re-enable clicks */
    transition: transform 0.2s;
}

#wcci-footer-form #footer-submit:hover {
    transform: scale(1.1);
}

/* Checkbox Style */
#wcci-footer-form .rsform-block-privacy-policy-confirm {
    margin-top: 10px;
}

#wcci-footer-form .rsform-block-privacy-policy-confirm .formControls {
    display: flex;
    align-items: center;
}

#wcci-footer-form .form-check-inline {
    display: flex;
    align-items: center;
    margin-right: 0;
}

#wcci-footer-form .form-check-input {
    background-color: transparent;
    border: 1px solid #ffffff;
    width: 18px;
    height: 18px;
    margin-left: 10px;
    margin-top: 0;
    cursor: pointer;
    flex-shrink: 0;
}

#wcci-footer-form .form-check-input:checked {
    background-color: #ffffff;
    border-color: #ffffff;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

#wcci-footer-form .form-check-label {
    color: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
    opacity: 0.9;
}

#wcci-footer-form .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(255, 255, 255, 0.25);
    border-color: #fff;
}

/* ============================================
   Footer Module Grid Styles
   ============================================ */
.footer-module-grid {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr 1fr 3fr;
    gap: 1.5rem;
    align-items: start;
}
.footer-module-grid a, .footer-module-grid p{
    padding-bottom: unset!important;
    
}

.footer-module-grid p{
    line-height: 22px;
}
/* Ensure direct children (modules) take up the grid space */
.footer-module-grid > * {
    width: 100%;
}

/* Mobile: Stack footer grid items vertically */
@media (max-width: 991px) {
    .footer-module-grid {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }
}

/* Separator Line */
.footer-separator {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin: 1.5rem 0;
    opacity: 1;
}
@media (min-width: 992px) {
    .footer-left-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        padding-right: 5vw;
    }
    .footer-left-wrapper h3{
        font-size: 15px!important;
    }
    .footer-left-wrapper a{
        padding-right: unset!important;
        font-size: 15px!important;
        font-weight: 400!important;
    }
}

/* ============================================
   Footer contact block (Custom HTML module)
   סידור כמו במקור: שתי עמודות, ריווח 16px, ללא שינוי במבנה הטקסט
   ============================================ */
footer .footer-contact-block,
.section-dark .footer-contact-block {
    direction: rtl;
    color: inherit;
    text-align: right;
}

.footer-contact-block .footer-contact-title {
    margin: 0;
}

.footer-contact-block .footer-contact-subtitle {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-block .footer-contact-columns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    margin-top: 8px;
}

.footer-contact-block .footer-contact-col-address {
    flex: 0 0 auto;
}

.footer-contact-block .footer-contact-col-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.footer-contact-block .footer-contact-address {
    font-size: 14px;
    margin: 0;
    line-height: 1.7;
    opacity: 0.85;
}

/* מבנה חד-עמודתי: כותרת → כתובת → שורות קשר → רשתות (בלי .footer-contact-columns) */
.footer-contact-block:has(> .footer-contact-address) {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.footer-contact-block:has(> .footer-contact-address) .footer-contact-title {
    margin: 0;
}

.footer-contact-block:has(> .footer-contact-address) .footer-contact-address {
    margin: 0;
}

.footer-contact-block:has(> .footer-contact-address) .footer-contact-row {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-block:has(> .footer-contact-address) .footer-social-row {
    margin-top: 0;
}

.footer-contact-block .footer-contact-row {
    margin: 0;
}

.footer-contact-block .footer-contact-row p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
}

.footer-contact-block .footer-contact-label {
    font-weight: 400;
}

.footer-contact-block .footer-contact-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.footer-contact-block .footer-contact-link:hover {
    opacity: 0.95;
}

.footer-contact-block .footer-social-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}

.footer-contact-block .footer-social-row .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    opacity: 0.9;
}

.footer-contact-block .footer-social-row .social-btn:hover {
    opacity: 1;
}

@media (max-width: 991px) {
    .footer-contact-block .footer-contact-columns {
        flex-direction: column;
    }
}

/* ============================================
   Rentsorizontal Module Overrides
   ============================================ */
.mod-articlesnews-rentsorizontal .category-item-withimage .category-image-wrapper {
    aspect-ratio: 323 / 264;
}

.mod-articlesnews-rentsorizontal .category-item-withimage .category-image {
    transition-duration: 2s;
}

.mod-articlesnews-rentsorizontal .category-item-withimage:hover .category-image {
    transform: rotate(16deg) scale(1.08);
}

/* ============================================
   Footer Background
   ============================================ */
footer .section-dark {
    background-image: url('../images/footer-bg.png');
    background-position: right bottom;
    background-repeat: no-repeat;
    /* Optional: background-size: contain; if you want to scale it */
}


/* slider style */
#n2-ss-2item2{
    line-height: 111px;
}

/* Slider text at 150% zoom */
@media (min-resolution: 1.44dppx) and (max-resolution: 1.99dppx) {
    div#n2-ss-2 .n2-font-3c51920f845b22fdd33bb0ed4de60d25-hover {
        font-size: 500% !important;
    }
}

.header-menu {
    /* margin-right removed — was 320px fixed, caused overlap at 150% zoom */
}

.finder-dropdown-wrapper {
    padding: 0;
}

@media screen and (min-width: 992px) {
    .finder-dropdown-wrapper,
    #language_btn_124,
    .btn-outline-primary {
        padding: 13px 4px 9px;
    }
    .ftb-ctx-info .ftb-menu  .dark-heading-menu-module{
        padding: 13px 4px 9px;
        background-color: #1E24380D;
    }
            
}


/* ============================================
   Finder / Search Dropdown Styles
   ============================================ */
.finder-dropdown-wrapper {
    position: relative;
    display: inline-block;
    padding: 0;
}

.finder-dropdown-container {
    position: absolute;
    top: 100%;
    right: 0;
    /* Align to right for LTR, or left for RTL if needed, usually right for navbars */
    z-index: 1000;
    min-width: 350px;
    background-color: #1E2438!important; /* Dark Blue from image */
    padding: 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    border-radius: 16px;
    margin-top: 15px;
}

/* RTL support for Hebrew */
html[dir="rtl"] .finder-dropdown-container {
    right: auto;
    left: -70px;
}

.finder-toggle {
    font-size: 1.2rem;
    color: inherit;
    text-decoration: none;
}

/* Form Styles inside Dropdown to match image */
.finder-dropdown-container .form-search .input-group {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50px;
    padding: 5px;
    display: flex;
    align-items: center;
}

.finder-dropdown-container .form-control {
    background: transparent;
    border: none;
    color: #fff;
    box-shadow: none;
}

.finder-dropdown-container .form-control::placeholder {
    color: rgba(255, 255, 255, 0.7);
}

.finder-dropdown-container .btn {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.2rem;
}

/* Back button specific styling if present, or search icon */
.finder-dropdown-container .btn:hover {
    color: #fff;
    opacity: 0.8;
}


.finder-dropdown-wrapper custom-search{
    background-color: #1e2438;
}

.mod-languages__list{
    background-color: #1e2438;
    padding: 11px 0!important;
    border-radius: 36px;
}
.mod-languages__item{
    background-color: #1e2438;
    padding: 5px 10px;
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #fff;
    border-radius: 5px;
    margin: 5px 0;
    border: 1px solid #fff;
}
.mod-languages__item a{
    color: #fff!important;
}
.mod-languages__item a:hover{
    color: #fff;
}
.mod-languages__item a:active{
    color: #fff;
}

/* ============================================
   Slick Slider Custom Styles
   ============================================ */
.mod-articles-slick-wrapper {
    position: relative;
    width: 100%;
    max-width: 100%;
    /* visible — overflow:hidden clipped focus outlines on slide links */
    overflow: visible;
}

.mod-articles-slick-slider {
    width: 100%;
    margin: 0 auto;
    padding: 0 40px; /* Space for arrows */
}

/* Fixed width items with 100px spacing */
.mod-articles-slick-slider .slick-slide {
    width: 200px !important; /* 100px for image + 100px for spacing */
    padding: 0 50px; /* 50px on each side = 100px total spacing between items */
    box-sizing: border-box;
}

.mod-articles-slick-slider .slick-slide-item {
    width: 100%;
}

/* WCAG 2.4.7 — focus indicator on img via a:focus-visible; inset ring avoids overflow clip */
.mod-articles-slick-slider .slick-slide-item a:focus {
    outline: none;
}

.mod-articles-slick-slider .slick-slide-item a:focus-visible img {
    box-shadow:
        inset 0 0 0 3px #fff,
        inset 0 0 0 6px #1E2438;
}

.mod-articles-slick-slider .slick-slide-item img {
    width: 100px; /* Fixed 100px width for the actual image */
    height: 100px; /* Fixed square aspect */
    object-fit: contain;
    display: block;
    border-radius: 8px;
    margin: 0 auto;
    background: #f8f9fa; /* Light background if image doesn't fill */
}

/* Custom Arrows - Simple text-based */
.mod-articles-slick-slider .slick-prev,
.mod-articles-slick-slider .slick-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 28px;
    text-align: center;
    background: rgba(255,255,255,0.8);
    border: 1px solid #ddd;
    border-radius: 50%;
    color: #333;
    cursor: pointer;
    z-index: 1000;
    outline: none;
    transition: all 0.2s ease;
}

.mod-articles-slick-slider .slick-prev:hover,
.mod-articles-slick-slider .slick-next:hover {
    background: rgba(255,255,255,1);
    color: #000;
}

/* Remove Slick's default before content */
.mod-articles-slick-slider .slick-prev:before,
.mod-articles-slick-slider .slick-next:before {
    display: none;
}

/* Positions */
.mod-articles-slick-slider .slick-prev {
    left: 5px;
}
.mod-articles-slick-slider .slick-next {
    right: 5px;
}

/* RTL Support for Arrows */
html[dir="rtl"] .mod-articles-slick-slider .slick-prev {
    left: auto;
    right: 5px;
}
html[dir="rtl"] .mod-articles-slick-slider .slick-next {
    right: auto;
    left: 5px;
}

/* Track styling */
.mod-articles-slick-slider .slick-track {
    display: flex;
    align-items: center;
}

div.mod-languages a{
    color: #ffffff!important;
}

/* ============================================
   Facility Color Stripe Section
   ============================================ */
.facility-color-stripe-section {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.color-stripe-image-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-stripe-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    max-width: 100%;
}

/* Responsive adjustments for color stripe */
@media (max-width: 768px) {
    .facility-color-stripe-section {
        margin: 10px 0;
    }
    
    .color-stripe-image {
        height: auto;
        min-height: 80px;
    }
}

@media (min-width: 1200px) {
    .color-stripe-image {
        max-height: 150px;
        object-fit: cover;
    }
}

/* ============================================
   Facility Events Section Styling
   ============================================ */

/* Facility Events Container */
.dp-upcoming-facility {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Individual Facility Event Item */
.dp-facility-item {
    flex: 1 1 280px;
    max-width: 320px;
    display: flex;
    flex-direction: column;
    background: transparent;
    position: relative;
}

/* Event Image */
.dp-facility-item .dp-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

/* Event Title / Location */
.dp-facility-item .dp-location__title {
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.4;
    color: #1E2438;
    margin-bottom: 8px;
}

/* Event Date */
.dp-facility-item .dp-date__start {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: #666;
    margin-bottom: 15px;
}

/* Read More Link */
.dp-facility-item .read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: var(--facility-color, #3DCBFF);
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0;
}

.dp-facility-item .read-more-link:hover {
    color: var(--facility-color, #00B3F0);
    transform: translateX(-5px);
}

/* Chevron Icon */
.dp-facility-item .read-more-link .icon-chevron-left {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.dp-facility-item .read-more-link:hover .icon-chevron-left {
    transform: translateX(-3px);
}

/* Facility Events in Light Section */
.facility-light .dp-facility-item .dp-location__title {
    color: #1E2438;
}

.facility-light .dp-facility-item .dp-date__start {
    color: #666;
}

.facility-light .dp-facility-item .read-more-link {
    color: var(--facility-color, #3DCBFF);
}

/* ============================================
   Facility Spaces Section Styling (Dark)
   ============================================ */
#facility-spaces.facility-dark {
    background-color: #1E2438 !important;
    color: #fff !important;
}

#facility-spaces.facility-dark .facility-section-title,
#facility-spaces.facility-dark h2,
#facility-spaces.facility-dark h3 {
    color: #fff;
}

/* ============================================
   FAQ Section Styling
   ============================================ */
#facility-faq.facility-faq {
    background-color: #F8F7EC;
    padding: 60px 0;
}

#facility-faq .facility-section-title {
    color: #1E2438;
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 50px !important;
    margin-bottom: 40px;
}

#facility-faq .faq-accordion {
    width: 100%;
    /*border-top: 1px solid #d9d9d9;*/
}

#facility-faq .faq-item {
   /* border-bottom: 1px solid #d9d9d9;*/
    background: transparent;
    transition: background-color 0.3s ease;
    margin-bottom: 0;
    padding: 10px 21px;
}
#facility-faq .faq-item:hover, .faq-item.faq-item-open {
    background-color: #fff !important;
}

#facility-faq .faq-question {
    background-color: transparent;
    padding: 22px 0;
    cursor: pointer;
    font-family: 'Heebo', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #1E2438;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
    border: none;
    width: 100%;
    text-align: right;
}

/* Neutralise site-wide button ::before fill animation */
#facility-faq .faq-question::before,
#facility-faq .faq-question:hover::before,
body.facility-page #facility-faq .faq-question::before,
body.facility-page #facility-faq .faq-question:hover::before {
    content: none;
    background: none;
    left: auto;
}

#facility-faq .faq-question:hover,
body.facility-page #facility-faq .faq-question:hover {
    color: #1E2438;
    background-color: transparent;
}

#facility-faq .faq-item-open .faq-question {
    background-color: transparent;
}

#facility-faq .faq-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1.5px solid #b0b0b0;
    font-size: 28px;
    font-weight: 300;
    line-height: 1;
    color: #1E2438;
    background: transparent;
    margin-right: 0;
    margin-left: 0;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    transform: none !important;
}

#facility-faq .faq-item-open .faq-icon {
    background-color: var(--facility-color, #1E2438);
    color: #fff;
    border-color: var(--facility-color, #1E2438);
}

#facility-faq .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
    background-color: transparent;
}

#facility-faq .faq-answer-content {
    padding: 0 0 22px 0;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    border: unset;
}

/* ============================================
   Mobile Navbar Toggler (Hamburger) Styling
   ============================================ */
@media (max-width: 991.98px) {
    .navbar-toggler {
        background-color: #fff !important;
        border: none !important;
        border-radius: 24px;
        padding: 8px 10px;
    }
    
    /* Make the 3 lines black */
    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23000000' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    }
    
    .navbar-toggler:focus {
        box-shadow: none;
        outline: none;
    }
}

/* ============================================
   SCROLL ANIMATIONS - Fade & Slide Up Effects
   ============================================ */

/* Base state: Hidden before animation */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Animated state: Visible after entering viewport */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for child elements */
.animate-on-scroll.delay-1 { transition-delay: 0.1s; }
.animate-on-scroll.delay-2 { transition-delay: 0.2s; }
.animate-on-scroll.delay-3 { transition-delay: 0.3s; }
.animate-on-scroll.delay-4 { transition-delay: 0.4s; }
.animate-on-scroll.delay-5 { transition-delay: 0.5s; }

/* ============================================
   SCROLL ANIMATIONS - Applied to all sections
   EXCEPT footer and below-footer
   ============================================ */

/* Content-top section */
.section-fullwidth.section-dark:has(.content-top) .content-top {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-dark:has(.content-top).is-visible .content-top {
    opacity: 1;
    transform: translateY(0);
}

/* Before-footer section */
.section-fullwidth.section-light:has(.before-footer) .before-footer {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-light:has(.before-footer).is-visible .before-footer {
    opacity: 1;
    transform: translateY(0);
}

/* Before-footer-dark section */
.section-fullwidth.section-dark:has(.before-footer-dark) .before-footer-dark {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-dark:has(.before-footer-dark).is-visible .before-footer-dark {
    opacity: 1;
    transform: translateY(0);
}

/* Above-footer-light section */
.section-fullwidth.section-light:has(.above-footer-light) .above-footer-light {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-light:has(.above-footer-light).is-visible .above-footer-light {
    opacity: 1;
    transform: translateY(0);
}

/* Above-footer-white section */
.section-fullwidth.section-white:has(.above-footer-white) .above-footer-white {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.section-fullwidth.section-white:has(.above-footer-white).is-visible .above-footer-white {
    opacity: 1;
    transform: translateY(0);
}

/* Main content area (siteBody) */
.siteBody main {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.siteBody.is-visible main {
    opacity: 1;
    transform: translateY(0);
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll,
    .section-fullwidth.section-dark:has(.content-top) .content-top,
    .section-fullwidth.section-light:has(.before-footer) .before-footer,
    .section-fullwidth.section-dark:has(.before-footer-dark) .before-footer-dark,
    .section-fullwidth.section-light:has(.above-footer-light) .above-footer-light,
    .section-fullwidth.section-white:has(.above-footer-white) .above-footer-white,
    .siteBody main {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ============================================
   Hero Color Strip
   ============================================ */
.hero-color-strip {
    width: 100%;
    line-height: 0;
    font-size: 0;
    POSITION: RELATIVE;
    MARGIN-TOP: -18PX;
    Z-INDEX: 100000;
}

.hero-color-strip .color-strip-image {
    width: 100%;
    height: auto;
    display: block;
    max-width: 1117px;
}

/* ============================================
   Footer Color Strip (above footer light)
   ============================================ */
.footer-color-strip {
    width: 100%;
    line-height: 0;
    font-size: 0;
    text-align: left;
    position: relative;
    top: -19px;
}

.footer-color-strip .color-strip-image {
    height: auto;
    display: block;
    max-width: 1117px;
    position: absolute;
    left: 0;
}

/* ============================================
   Cards Category Layout
   תצוגת כרטיסיות לקטגוריה
   ============================================ */

/* CSS Variables for Cards */
:root {
    --dark-blue-20: #D2D3D7;
    --cards-border-radius: 24px;
    --cards-shadow: 0 0 8px 0 var(--dark-blue-20, #D2D3D7);
    --cards-bg: #FFF;
}

/* Main container */
.cards-category-view {
    padding: 3rem 0;
}

/* ── Light theme: facility top bar overrides ── */
.cards-category-view.light .facility-top-bar {
    /*background-color: #1E24380D;*/
}

.cards-category-view.light .facility-top-bar,
.cards-category-view.light .facility-top-bar a {
    color: #1E2438;
}

/* Force dark text + transparent background on menu links in light theme,
   overriding Bootstrap text-white (!important) and dark-heading-menu-module backgrounds */
.cards-category-view.light .ftb-menu a,
.cards-category-view.light .ftb-menu .facility-menu-link {
    color: #1E2438 !important;
    background: rgba(30, 36, 56, 0.00) !important;
    border-color: transparent !important;
}
.cards-category-view.light .ftb-ctx-info .ftb-menu a.dropdown-item{
    color: #fff!important;
}

/* Active item in light theme: subtle tinted pill, dark text */
.cards-category-view.light .ftb-menu .facility-menu-link.active {
    background: rgba(30, 36, 56, 0.12) !important;
    border: 1px solid rgba(30, 36, 56, 0.15) !important;
    color: #1E2438 !important;
}

/* Hover in light theme */
.cards-category-view.light .ftb-menu .facility-menu-link:not(.active):hover {
    background: rgba(30, 36, 56, 0.08) !important;
    color: #1E2438 !important;
}

.cards-category-view.light .facility-breadcrumbs,
.cards-category-view.light .facility-breadcrumbs a,
.cards-category-view.light .facility-breadcrumbs .breadcrumb-item,
.cards-category-view.light .facility-breadcrumbs .breadcrumb-item.active,
.cards-category-view.light .facility-breadcrumbs.text-white {
    color: #1E2438 !important;
}

.cards-category-view.light .facility-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%231E2438' stroke-opacity='0.8' stroke-width='2.5'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

/* Parent Facility Title */
.cards-category-view .facility-parent-title {
    font-family: Heebo, sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #666;
    margin-top: 48px;
    margin-bottom: 0.25rem;
}

.cards-category-view .category-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 2rem;
    margin-top: 72;
    margin-bottom: 1.5rem;
    color: #1E2438;
}

.cards-category-view .category-desc {
    margin-bottom: 2rem;
    line-height: 1.8;
}

/* Cards Grid */
.cards-items-grid {
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Card Wrapper - Full Width */
.cards-item-wrapper {
    width: 100%;
}

/* Individual Card Item */
.cards-item {
    border-radius: 24px;
    background: #FFF;
    box-shadow: 0 0 8px 0 var(--dark-blue-20, #D2D3D7);
    overflow: hidden;
    width: 100%;
}

/* Card Image */
.cards-item-image {
    width: 100%;
    max-height: 300px;
    overflow: hidden;
}

.cards-item-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Card Content */
.cards-item-content {
    padding: 1.5rem 2rem;
}

/* Card Title */
.cards-item-title {
    font-family: Heebo, sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    line-height: 1.4;
    color: #222;
}

/* Card Body - Full Content */
.cards-item-body {
    font-size: 1rem;
    line-height: 1.8;
    color: #444;
}

.cards-item-body p {
    margin-bottom: 1rem;
}

.cards-item-body p:last-child {
    margin-bottom: 0;
}

.cards-item-body ul,
.cards-item-body ol {
    padding-right: 1.5rem;
    margin-bottom: 1rem;
}

.cards-item-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Restricted Content */
.cards-item-restricted {
    font-size: 0.875rem;
    color: #999;
    font-style: italic;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
    .cards-category-view .category-title {
        font-size: 1.5rem;
    }
    
    .cards-item-content {
        padding: 1.25rem;
    }
    
    .cards-item-title {
        font-size: 1.25rem;
    }
    
    .cards-item-image {
        max-height: 200px;
    }
}

/* ============================================
   Facility Social Icons - Hover Animation
   Same RTL sliding effect as useful-info-link
   ============================================ */
.facility-social-icons a {
    display: inline-block;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 0;
    margin: unset;
    transition: all 0.4s ease;
    border-radius: 8px;
}

/* Create hover fill effect - Right to Left (Hebrew RTL) */
.facility-social-icons a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%; /* Start hidden on the right side */
    width: 100%;
    height: 100%;
    background-color: #3DCBFF; /* Default site color */
    transition: left 0.4s ease;
    z-index: -1;
    border-radius: 8px;
}

/* Hover state - fill animation from right to left */
.facility-social-icons a:hover::before {
    left: 0; /* Slides in from right to left */
}

/* Facility page social icons with facility color */
.facility-category-view .facility-social-icons a::before {
    background-color: var(--facility-color, #3DCBFF);
}

/* ============================================
   RENTAL ARTICLE VIEW STYLES
   ============================================ */

/* Hide the internal page header from index.php */
body:has(.rental-article-view) .site-header.internal-header,
body:has(.rental-article-view) > .site-header:first-of-type {
    display: none !important;
}

/* Also hide hero-color-strip from index.php if exists */
body:has(.rental-article-view) .hero-color-strip {
    display: none !important;
}

.rental-article-view {
    width: 100%;
}

/* ----------------------------------------- */
/* RENTAL HEADER (Homepage-style) */
/* ----------------------------------------- */
.rental-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 15px 0;
}

.rental-header .navbar-transparent {
    background-color: transparent !important;
}

.rental-header .header-wrapper {
    gap: 1.5rem; /* match homepage header (.header-wrapper) so the menu sits in the same place */
}

.rental-header .header-logo1,
.rental-header .header-logo2 {
    flex-shrink: 0;
}

.rental-header .logo-image {
    /* match homepage header: logos render at natural size (no max-height cap) */
    width: auto;
}

.rental-header .header-menu {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.rental-header .header-left,
.rental-header .header-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rental-header .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

.rental-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Mobile menu styling */
.rental-header .navbar-collapse {
    background-color: rgba(0, 0, 0, 0.9);
    padding: 1rem;
    border-radius: 8px;
    margin-top: 1rem;
}

@media (min-width: 992px) {
    .rental-header .navbar-collapse {
        background-color: transparent;
        padding: 0;
        margin-top: 0;
    }
}

/* ----------------------------------------- */
/* RENTAL HERO SECTION */
/* ----------------------------------------- */
.rental-hero-section {
    position: relative;
    min-height: 66vh;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    color: #fff;
}

.rental-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%);
    z-index: 1;
}

.rental-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding: 120px 0 60px;
    width: 100%;
}

.rental-hero-inner {
    text-align: right;
    max-width: 650px;
}

.rental-hero-category {
    margin-bottom: 1.5rem;
}

.rental-hero-category .category-label {
    display: inline-block;
    background-color: var(--facility-color, #3DCBFF);
    color: #fff;
    padding: 0.5rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.rental-hero-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
    line-height: 1.2;
}

.rental-hero-title .title-dot {
    font-size: inherit;
}

.rental-hero-subheading {
    font-family: Heebo, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    opacity: 0.9;
    margin-bottom: 1.5rem;
}

/* Hero CTA Button */
.rental-hero-cta {
    margin-top: 2rem;
}

.btn-hero-cta {
    display: inline-block;
    padding: 0.875rem 2.5rem;
    background-color: var(--facility-color, #3DCBFF);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: 2px solid var(--facility-color, #3DCBFF);
}

.btn-hero-cta:hover {
    background-color: transparent;
    color: #fff;
    border-color: #fff;
}

/* White outline button for hero area */
.btn-hero-white,
body.facility-page .btn-hero-white,
body.facility-page a.btn-hero-white {
    display: inline-block;
    padding: 0.75rem 2rem;
    background-color: transparent;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 50px;
    border: 2px solid #fff !important;
    transition: all 0.3s ease;
}

.btn-hero-white:hover,
body.facility-page .btn-hero-white:hover,
body.facility-page a.btn-hero-white:hover {
    background-color: #fff;
    color: var(--facility-color, #3DCBFF) !important;
    border-color: #fff !important;
}

/* Lottie Section */
.rental-lottie-section {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    width: 75%;
    margin: 0;
}

.rental-lottie-section .lottie-animation-container {
    width: 100%;
    height: auto;
}

/* ----------------------------------------- */
/* RENTAL SECTION 2: DARK INFO SECTION */
/* ----------------------------------------- */
.rental-info-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #1a2634;
    color: #fff;
    padding: 80px 0;
}

.rental-info-header {
    margin-bottom: 50px;
}

.rental-info-title-h3 {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 50px !important;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #3DCBFF;
}

/* Description Text */
.rental-info-description {
    font-family: Heebo, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto 2rem;
}

.rental-info-description p {
    margin-bottom: 0;
}

/* Share Divider */
.rental-share-divider {
    width: 200px;
    height: 1px;
    background-color: rgba(255,255,255,0.3);
    margin: 2rem auto;
}

/* Share Section */
.rental-share-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    flex-direction: row-reverse;
}

.rental-share-section .share-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.7);
    font-family: Heebo, sans-serif;
}

.rental-share-section .share-buttons {
    display: flex;
    gap: 0.5rem;
    flex-direction: row-reverse;
}

.rental-share-section .share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    overflow: hidden;
    background-color: transparent;
    color: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.3);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.rental-share-section .share-btn::before {
    display: none;
}

.rental-share-section .share-btn:hover {
    background-color: var(--facility-color, #3DCBFF);
    border-color: var(--facility-color, #3DCBFF);
    color: #fff;
}

.rental-share-section .share-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    overflow: visible;
}

.component {
    margin-top: 5vh;
}

/* Marketing Grid */
.rental-marketing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin: 50px 0;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.marketing-item {
    text-align: center;
}

.marketing-icon {
    margin-bottom: 1rem;
}

.marketing-icon img,
.marketing-icon svg {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.marketing-icon i {
    font-size: 48px;
    color: var(--facility-color, #3DCBFF);
}

.marketing-text {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.5;
}

/* CTA Button */
.rental-cta {
    margin: 40px 0 60px;
}

.btn-rental-cta {
    display: inline-block;
    padding: 1rem 3rem;
    background-color: var(--facility-color, #3DCBFF);
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.btn-rental-cta:hover {
    background-color: #fff;
    color: var(--facility-color, #3DCBFF);
}

/* Image Slider - Full Width */
.rental-slider-container {
    position: relative;
    overflow: hidden;
    margin-top: 60px;
    /* Break out of container to full width */
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 0;
}

.rental-slider {
    overflow: hidden;
    max-width: 100%;
}

.rental-slider-container .slider-track {
    display: flex;
    direction: ltr;
    transition: transform 0.5s ease;
}

.rental-slider-container .slider-slide {
    flex: 0 0 40%;
    padding: 0 15px;
    transition: all 0.5s ease;
}

.rental-slider-container .slider-slide img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 0;
}

.rental-slider-container .slider-slide:not(.active),
.rental-slider-container .slider-slide.active {
    opacity: 1;
    transform: scale(1);
}

.rental-slider-container .slider-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    margin: 0;
}

.rental-slider-container .slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgba(0,0,0,0.35);
    border: 2px solid rgba(255,255,255,0.5);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    z-index: 10;
}

.rental-slider-container .slider-btn::before {
    display: none;
}

.rental-slider-container .slider-btn:active {
    background-color: rgba(0,0,0,0.5);
}

.rental-slider-container .slider-btn svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    pointer-events: none;
}

.rental-slider-container .slider-prev {
    left: 15px;
}

.rental-slider-container .slider-next {
    right: 15px;
}

.rental-slider-container .slider-btn:hover {
    background-color: var(--facility-color, #3DCBFF);
    border-color: var(--facility-color, #3DCBFF);
}

/* ----------------------------------------- */
/* RENTAL SECTION 3: EVENT TYPES */
/* ----------------------------------------- */
.rental-events-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #f8f9ec;
    padding: 80px 0;
}

.rental-events-section .section-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 60px;
    color: #1a2634;
}

.event-types-list {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.event-type-item {
    position: relative;
}

.event-type-image img {
    width: 100%;
    height: auto;
    border-radius: 0;
}

.event-type-content {
    padding: 30px;
}

.event-type-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #1a2634;
}

.event-type-text {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
}

.event-type-color-strip {
    margin-top: 20px;
}

.event-type-color-strip .color-strip-img {
    width: 100%;
    /*max-width: 300px;*/
    height: auto;
}

.event-type-stripe {
    height: 4px;
    width: 100px;
    margin-top: 20px;
}

/* ----------------------------------------- */
/* RENTAL SECTION 4: TESTIMONIALS */
/* ----------------------------------------- */
.rental-testimonials-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: 80px 0;
}

/* --- Right column: header --- */
.testimonials-header {
    padding-inline-end: 30px;
    margin-bottom: 40px;
}

.testimonials-subtitle {
    font-size: 1rem;
    color: #777;
    margin-bottom: 0.5rem;
    text-align: start;
}

.testimonials-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1a2634;
    text-align: start;
}

/* --- Logo grid --- */
.testimonials-logos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.testimonials-logo-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    min-height: 80px;
}

.testimonials-logo-cell img {
    max-width: 100%;
    max-height: 56px;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.75;
    transition: filter 0.2s, opacity 0.2s;
}

.testimonials-logo-cell:hover img {
    filter: grayscale(0);
    opacity: 1;
}

/* --- Left column: slider --- */
.testimonials-slider-wrapper {
    padding-inline-start: 30px;
    position: relative;
}

.testimonials-quotes-icon {
    color: var(--facility-color, #3DCBFF);
    margin-bottom: 20px;
    line-height: 1;
}

/* Slide: only active slide is visible */
.testimonial-slide {
    display: none;
}

.testimonial-slide.active {
    display: block;
    animation: testimonial-fadein 0.4s ease;
}

@keyframes testimonial-fadein {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.testimonial-content {
    font-size: 1rem;
    line-height: 1.75;
    color: #333;
    margin-bottom: 24px;
}

.testimonial-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.testimonial-name {
    font-weight: 700;
    font-size: 17px;
    color: #1a2634;
}

.testimonial-role {
    font-size: 0.875rem;
    color: #777;
}

/* --- Dots --- */
.testimonials-dots {
    display: flex;
    gap: 16px;
    margin-top: 28px;
    align-items: center;
    justify-content: flex-end;
}

.testimonials-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #bbb;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.2s, background-color 0.2s;
}

.testimonials-dot.active {
    border-color: var(--facility-color, #3DCBFF);
    background-color: var(--facility-color, #3DCBFF);
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .testimonials-header {
        padding-inline-end: 0;
        text-align: center;
        margin-bottom: 30px;
    }

    .testimonials-subtitle,
    .testimonials-title {
        text-align: center;
    }

    .testimonials-logos-grid {
        grid-template-columns: repeat(3, 1fr);
        margin-bottom: 48px;
    }

    .testimonials-slider-wrapper {
        padding-inline-start: 0;
    }

    .testimonials-title {
        font-size: 2rem;
    }
}

/* ----------------------------------------- */
/* RENTAL SECTION 5: CONTACT */
/* ----------------------------------------- */
.rental-contact-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #f8f9ec;
    padding: 90px 0 80px;
}

.rental-contact-row {
    row-gap: 48px;
}

.rental-contact-section .contact-form-wrapper {
    padding: 0 20px;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.rental-contact-form-heading {
    margin-bottom: 28px;
    text-align: start;
}

.rental-contact-kicker {
    margin: 0 0 4px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.4;
}

.rental-contact-title {
    margin: 0;
    color: #1e2438;
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
    font-weight: 700;
    line-height: 1.25;
}

.rental-contact-section .contact-details-wrapper {
    padding: 0 20px;
    min-height: 300px;
}

.rental-contact-details-heading {
    margin-bottom: 20px;
    text-align: center;
}

.rental-contact-details-title {
    margin: 0;
    color: #555;
    font-size: 1rem;
    line-height: 1.5;
}

.rental-contact-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    direction: ltr;
}

.rental-contact-card {
    display: flex;
    min-height: 78px;
    padding: 15px 18px;
    align-items: flex-end;
    justify-content: space-between;
    flex-direction: column;
    color: #1e2438;
    border: 1px solid rgba(30, 36, 56, 0.16);
    background-color: transparent;
    text-decoration: none;
    transition: background-position 0.35s ease, color 0.25s ease, border-color 0.2s ease, transform 0.2s ease;
}

.rental-contact-card:hover,
.rental-contact-card:focus-visible {
    text-decoration: none;
    transform: translateY(-2px);
}

.rental-contact-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.rental-contact-card__text {
    width: 100%;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: end;
    overflow-wrap: anywhere;
}

.rental-contact-color-strip {
    margin-top: 34px;
    width: 100%;
    overflow: hidden;
}

.rental-contact-color-strip img {
    display: block;
    width: 100%;
    height: 8px;
    object-fit: cover;
}

.rental-contact-section .formContainer,
.rental-contact-section .rsform,
.rental-contact-section form {
    max-width: 100%;
}

.rental-contact-section .rsform-block {
    margin-bottom: 18px;
}

.rental-contact-section .formControlLabel {
    display: block;
    margin-bottom: 0;
    color: #1e2438;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    text-align: start;
}

.rental-contact-section .formControls input[type="text"],
.rental-contact-section .formControls input[type="email"],
.rental-contact-section .formControls input[type="tel"],
.rental-contact-section .formControls input[type="number"],
.rental-contact-section .formControls textarea,
.rental-contact-section .formControls select {
    width: 100%;
    padding: 8px 0 10px;
    color: #1e2438;
    border: 0;
    border-bottom: 1px solid rgba(30, 36, 56, 0.28);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 1rem;
    text-align: start;
}

.rental-contact-section .formControls textarea {
    min-height: 90px;
    resize: vertical;
}

.rental-contact-section .formControls input:focus,
.rental-contact-section .formControls textarea:focus,
.rental-contact-section .formControls select:focus {
    outline: none;
    border-bottom-color: var(--facility-color, #3dcbff);
    box-shadow: none;
}

.rental-contact-section .formControls input::placeholder,
.rental-contact-section .formControls textarea::placeholder {
    color: rgba(30, 36, 56, 0.45);
}

.rental-contact-section .rsform-block-privacy-policy-confirm,
.rental-contact-section .rsform-block-rent-item-user-submit {
    text-align: end;
}

/* RSForm 6 (contact) — ghost button, fills right-to-left with facility color on hover.
   Uses gradient-position technique (not ::before) because <input> ignores pseudo-elements. */
#rsform_6_page_0 .rsform-block-rent-item-user-submit .rsform-submit-button,
#rsform_6_page_0 #rent_item_user_submit.rsform-submit-button {
    display: inline-block;
    padding: 0.5rem 3rem;
    background: linear-gradient(to left, var(--facility-color, #3dcbff) 50%, transparent 50%);
    background-size: 200% 100%;
    background-position: 0% center;
    color: #1e2337;
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: 25px;
    border: 1px solid #1e2337;
    transition: background-position 0.4s ease, color 0.4s ease;
    cursor: pointer;
    width: 240px;
}

#rsform_6_page_0 .rsform-block-rent-item-user-submit .rsform-submit-button:hover,
#rsform_6_page_0 #rent_item_user_submit.rsform-submit-button:hover {
    background-position: 100% center;
    color: #1e2337;
}

/* ----------------------------------------- */
/* RENTAL SECTION 6: RENTAL-ALL */
/* ----------------------------------------- */
.rental-all-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #1a2634;
    padding: 60px 0;
}

/* ----------------------------------------- */
/* RENTAL RESPONSIVE */
/* ----------------------------------------- */
@media (max-width: 992px) {
    .rental-header .header-left,
    .rental-header .header-right,
    .rental-header .header-logo2 {
        display: none !important;
    }
    
    .rental-hero-title {
        font-size: 2.5rem;
    }
    
    .rental-hero-subheading {
        font-size: 1.2rem;
    }
    
    .rental-info-title-h3 {
        font-size: 36px !important;
    }
    
    .rental-slider-container .slider-slide {
        flex: 0 0 80%;
    }
    
    .testimonials-header {
        padding-right: 0;
        margin-bottom: 40px;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .rental-hero-section {
        min-height: 80vh;
        background-attachment: scroll;
    }
    
    .rental-hero-content {
        padding: 100px 15px 40px;
    }
    
    .rental-hero-title {
        font-size: 2rem;
    }
    
    .rental-header .logo-image {
        max-height: 35px;
    }
    
    .rental-lottie-section {
        width: 100%;
    }
    
    .rental-marketing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rental-slider-container .slider-slide {
        flex: 0 0 100%;
    }
    
    .rental-slider-container .slider-slide img {
        height: 250px;
    }
    
    .event-type-content {
        padding: 20px 0;
    }
    
    .rental-contact-section .contact-form-wrapper,
    .rental-contact-section .contact-details-wrapper {
        padding: 0;
    }

    .rental-contact-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   MOD_ARTICLES RENTAL LAYOUT STYLES
   Horizontal Cards with Side Badge
   ============================================ */

/* Main Container */
.mod-articles-rental {
    width: 100%;
}

/* Grid Layout */
.rental-items-grid {
    display: grid;
    gap: 24px;
}

/* Grid Columns */
.rental-items-grid.rental-cols-1 {
    grid-template-columns: 1fr;
}

.rental-items-grid.rental-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.rental-items-grid.rental-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.rental-items-grid.rental-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* Individual Card */
.rental-card {
    position: relative;
    background-color: #1E2438;
    border-radius: unset;
    overflow: hidden;
    display: flex;
    flex-direction: row;
}

/* Card Inner (Content Area) */
.rental-card-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; /* Prevent flex overflow */
}

/* Side Badge - Vertical (RTL: on the left side) */
.rental-card-badge {
    position: absolute;
    top: 0;
    right:  0; /* RTL: Badge on left side */
    bottom: 0;
    width: 32px;
    background-color: #00C853; /* Green - default */
    background-color: var(--facility-color, #00C853);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    max-height: 302px;
    height: fit-content;
    top: 12px;
    padding: 11px 0;
}

/* LTR: Badge on right side */
html[dir="ltr"] .rental-card-badge {
    left: auto;
    right: 0;
}

.rental-card-badge .badge-text {
    color: #1E2438;
    font-family: Heebo, sans-serif;
    font-size: 14px;
    font-weight: 600;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
    letter-spacing: 0.5px;
    transform: rotate(180deg);
}

/* RTL Badge Text - No rotation needed */
html[dir="rtl"] .rental-card-badge .badge-text {
    transform: rotate(180deg);
}

/* Card with badge - Add padding to prevent overlap */
.rental-card:has(.rental-card-badge) .rental-card-inner {
    margin-right: 32px; /* RTL: Space for badge on left */
}

html[dir="ltr"] .rental-card:has(.rental-card-badge) .rental-card-inner {
    margin-left: 0;
    margin-right: 32px;
}

/* Card Image */
.rental-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 323 / 264;
    overflow: hidden;
}

.rental-card-image a {
    display: block;
    width: 100%;
    height: 100%;
}

.rental-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card Content */
.rental-card-content {
    padding: 20px 24px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Card Title */
/* Card Intro Text */
.rental-card-intro {
    font-family: Heebo, sans-serif;
    font-size: 0.9rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 16px;
    flex: 1;
}

.rental-card-intro p {
    margin: 0;
}

/* Tags Container */
.rental-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: auto;
}

/* Individual Tag */
.rental-tag {
    display: inline-block;
    padding: 8px 16px;
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    color: #fff;
    font-family: Heebo, sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Tag Hover Effect - RTL Fill Animation */
.rental-tag::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--facility-color, #00C853);
    transition: left 0.4s ease;
    z-index: -1;
}

.rental-tag:hover::before {
    left: 0;
}

.rental-tag:hover {
    border-color: var(--facility-color, #00C853);
    color: #1E2438;
}

/* ----------------------------------------- */
/* MOD_ARTICLES RENTAL - RESPONSIVE */
/* ----------------------------------------- */

@media (max-width: 1199.98px) {
    .rental-items-grid.rental-cols-4 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .rental-items-grid.rental-cols-3,
    .rental-items-grid.rental-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .rental-card-title {
        font-size: 1.1rem;
    }
    
    .rental-card-content {
        padding: 16px 20px 20px;
    }
}

@media (max-width: 767.98px) {
    .rental-items-grid.rental-cols-2,
    .rental-items-grid.rental-cols-3,
    .rental-items-grid.rental-cols-4 {
        grid-template-columns: 1fr;
    }
    
    .rental-card-badge {
        width: 28px;
    }
    
    .rental-card-badge .badge-text {
        font-size: 12px;
    }
    
    .rental-card:has(.rental-card-badge) .rental-card-inner {
        margin-left: 28px;
    }
    
    html[dir="ltr"] .rental-card:has(.rental-card-badge) .rental-card-inner {
        margin-left: 0;
        margin-right: 28px;
    }
    
    .rental-card-content {
        padding: 14px 16px 18px;
    }
    
    .rental-tag {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

/* ============================================
   TENDER ARTICLE VIEW STYLES
   ============================================ */
.tender-article-view {
    display: flex;
    flex-direction: column;
    gap: 24px;
    direction: rtl;
    margin-top: 20vh;
    margin-bottom: 10vh;
}

.tender-back-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 8px;
    color: #1E2438;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
}

.tender-back-link:hover {
    color: #1E2438;
    text-decoration: underline;
}

.tender-back-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 1px solid #e5e7eb;
    border-radius: 50%;
}

.tender-header-card,
.tender-side-card,
.tender-docs-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(30, 36, 56, 0.08);
    padding: 24px;
}

.tender-header-card {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.tender-header-top {
    flex: 1 1 auto;
}

.tender-header-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.tender-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1E2438;
    margin: 0 0 12px;
}

.tender {
    font-size: 36px!important;
}

.tender-article-view .tender-title {
    line-height: 21px !important;
    font-family: Heebo, sans-serif;
    font-size: 22px !important;
    font-weight: 700;
}

.tender-number {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: #6b7280;
    font-size: 0.95rem;
}

.tender-status {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 6px 16px;
    border-radius: 999px;
    background: #d1d5db;
    color: #1E2438;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.tender-status.is-active {
    background: #01833C;
    color: #fff;
}

.tender-status.is-closed {
    background: #E42311;
    color: #fff;
}

.tender-meta {
    flex: 0 0 min(38%, 420px);
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-inline-start: 24px;
    border-inline-start: 1px solid #e5e7eb;
}

.tender-meta-row,
.tender-side-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    color: #1E2438;
}

.tender-label {
    color: #6b7280;
    font-weight: 500;
}

.tender-value {
    color: #1E2438;
    font-weight: 500;
}

.tender-topics {
    display: flex;
    justify-content: center;
}

.tender-topics-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.tender-topic-item {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    color: #6b7280;
    font-size: 0.95rem;
}

.tender-topic-en {
    direction: ltr;
    unicode-bidi: embed;
}

.tender-section-title {
    font-family: Heebo, sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: normal !important;
    color: #1E2438;
    margin-top: 0;
    margin-bottom: 16px !important;
}

.tender-comments {
    margin-top: 24px;
}

.tender-docs-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tender-docs-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1E2438;
    text-decoration: none;
    font-weight: 500;
}

.tender-docs-pdf-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tender-docs-link-text {
    display: inline-block;
}

.tender-docs-link:hover {
    color: #0f172a;
    text-decoration: underline;
}

.tender-docs-divider {
    margin: 18px 0 14px;
    border-block-start: 1px solid #e5e7eb;
}

.tender-docs-download-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #1E2438;
    font-weight: 500;
    text-decoration: none;
}

.tender-docs-download-all-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tender-docs-download-all:hover {
    color: #0f172a;
    text-decoration: underline;
}

.tender-empty {
    color: #9ca3af;
    font-size: 0.95rem;
}

/* ============================================
   Tender Category Cards
   ============================================ */
.tender-category-view {
    direction: rtl;
    margin-bottom: 75px;
}

.tender-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 24px;
}

.tender-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(30, 36, 56, 0.08);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.tender-card-title {
    font-family:  Heebo, sans-serif;
    font-size: 1.2rem;
    font-weight: 500;
    margin: 0 0 8px;
    color: #1E2438;
}

.tender-card-number {
    display: flex;
    gap: 8px;
    align-items: baseline;
    color: #6b7280;
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.tender-card-status {
    align-self: flex-start;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    background: #d1d5db;
    color: #1E2438;
}

.tender-card-status.is-active {
    background: #01833C;
    color: #fff;
}

.tender-card-status.is-closed {
    background: #E42311;
    color: #fff;
}

.tender-card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    row-gap: 10px;
    align-items: baseline;
    color: #1E2438;
    font-size: 0.95rem;
}

.tender-card-row {
    display: contents;
}

.tender-card-label {
    color: #6b7280;
    font-weight: 500;
    text-align: start;
}

.tender-card-value {
    color: #1E2438;
    font-weight: 500;
    text-align: start;
}

.tender-card-footer {
    margin-top: auto;
}

.tender-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #1E2438;
    border-radius: 999px;
    padding: 10px 18px;
    text-decoration: none;
    color: #1E2438;
    font-weight: 600;
    transition: all 0.2s ease;
}

.tender-card-link:hover {
    background: #1E2438;
    color: #fff;
}

@media (max-width: 575.98px) {
    .tender-card-body {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .tender-card-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (min-width: 992px) {
    .tender-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991.98px) {
    .tender-header-card {
        flex-direction: column;
        gap: 20px;
    }

    .tender-header-top {
        width: 100%;
    }

    .tender-meta {
        flex-basis: auto;
        width: 100%;
        padding-inline-start: 0;
        border-inline-start: 0;
    }

    .tender-meta-row,
    .tender-side-row {
        flex-direction: column;
        align-items: flex-start;
    }
}
#small-faclity-icons{
    justify-content: space-around;
}
#small-faclity-icons > li > a > img{
    max-height: 70px;
    width: auto;
}
#small-faclity-icons > li > a > span{
    display: block;
    clear: both;
    text-align: center;
}
@media (min-width: 992px) {
    .facility-top-bar {
        margin-top: 99px;
    }
    .facility-top-bar.ftb-ctx-info{
        margin-top: 47px;
    }
}
/* @media (min-width: 992px) {
    li.item-183 a {
        padding: 0.75rem 1rem 0.75rem 3.5rem!important;
    }
} */
li.item-183 > a {
    padding: 0.75rem 1rem 0.75rem 3.5rem;
}

/* ============================================
   Item-183 Facilities Menu Styling
   ============================================ */

   @media (min-width: 992px) {
    .col-md-8 .level3-items.row{
        display: block;
    }   
    .col-md-8 .level3-items.row .col-md-6{
        float: right;
    }
   }
   .level3-item-icon{
    max-width: 30px;
   }

/* Remove border from dropdown-menu and add border-radius */
li.item-183 .dropdown-menu.mega-dropdown.top-items-dropdown {
    border: none;
    border-radius: 16px;
}

/* Level2 Title - Remove background and set blue color */
li.item-183 .dropdown-header.level2-title {
    background: none;
    color: #3DCBFF;
}

/* Custom hover for item-183 level3 items */
li.item-183 .level3-item {
    transition: color 0.2s ease, transform 0.2s ease;
}

li.item-183 .level3-item:hover {
    background-color: transparent;
    color: #e0e0e0;
    border-left-color: transparent;
    transform: translateX(-15px);
}

/* ============================================
   MAIN ABOUT ARTICLE VIEW STYLES
   ============================================ */

/* Hide the internal page header from index.php */
body:has(.mainabout-article-view) .site-header.internal-header,
body:has(.mainabout-article-view) > .site-header:first-of-type:not(.mainabout-header) {
    display: none !important;
}

/* Also hide hero-color-strip from index.php if exists */
body:has(.mainabout-article-view) .hero-color-strip {
    display: none !important;
}

.mainabout-article-view {
    width: 100%;
}

/* ----------------------------------------- */
/* MAIN ABOUT HEADER (Homepage-style) */
/* ----------------------------------------- */
.mainabout-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 15px 0;
}

.mainabout-header .navbar-transparent {
    background-color: transparent !important;
}

.mainabout-header .header-wrapper {
    gap: 1.5rem; /* match homepage header (.header-wrapper) so the menu sits in the same place */
}

.mainabout-header .header-logo1,
.mainabout-header .header-logo2 {
    flex-shrink: 0;
}

.mainabout-header .logo-image {
    /* match homepage header: logos render at natural size (no max-height cap) */
    width: auto;
}

.mainabout-header .header-menu {
    flex-grow: 1;
}

.mainabout-header .navbar-nav {
    justify-content: center;
}

.mainabout-header .nav-link {
    color: #ffffff !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
}

.mainabout-header .nav-link:hover {
    color: #3DCBFF !important;
}

.mainabout-header .header-right,
.mainabout-header .header-left {
    flex-shrink: 0;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    .mainabout-header {
        position: relative;
        background: rgba(0, 0, 0, 0.9);
    }
    
    .mainabout-header .navbar-collapse {
        background: rgba(0, 0, 0, 0.95);
        padding: 1rem;
        margin-top: 1rem;
    }
}

/* ----------------------------------------- */
/* MAIN ABOUT: Hero Section Adjustments */
/* ----------------------------------------- */

/* Ensure hero starts at top of page */
.mainabout-article-view .article-hero {
    margin-top: 0 !important;
    padding-top: 100px; /* Space for header */
}

/* ----------------------------------------- */
/* MAIN ABOUT: Article Intro Text Alignment */
/* ----------------------------------------- */

/* Center-align all content in article-intro-hero including headings */
.mainabout-article-view .article-intro-hero,
.mainabout-article-view .article-intro-hero * {
    text-align: center !important;
}

/* Ensure headings remain as headings (not stripped) */
.mainabout-article-view .article-intro-hero h1,
.mainabout-article-view .article-intro-hero h2,
.mainabout-article-view .article-intro-hero h3,
.mainabout-article-view .article-intro-hero h4,
.mainabout-article-view .article-intro-hero h5,
.mainabout-article-view .article-intro-hero h6 {
    display: block;
    font-weight: inherit;
    margin-bottom: 0.5rem;
}

/* ----------------------------------------- */
/* MAIN ABOUT: Color Stripe with Lottie Animation */
/* ----------------------------------------- */

/* Use the same hero-color-strip as homepage - no custom styles needed */
/* The hero-color-strip CSS is already defined in lines 1510-1524 */

/* ----------------------------------------- */
/* MAIN ABOUT: Numbers Section Positioning */
/* ----------------------------------------- */

#mainabout-numbers {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #2c3e50;
    color: #fff;
    padding: 60px 0;
}

/* ----------------------------------------- */
/* MAIN ABOUT: Responsive Adjustments */
/* ----------------------------------------- */

@media (max-width: 768px) {
    .mainabout-lottie-section {
        width: 100%;
    }
    
    #mainabout-color-stripe-container .color-stripe-image-container {
        width: 100%;
    }
}

/* ----------------------------------------- */
/* MAIN ABOUT: Breadcrumbs below logo2       */
/* ----------------------------------------- */

.mainabout-article-view .mainabout-hero-breadcrumbs {
    position: absolute;
    top: 82px; /* just below the fixed header */
    right: 20px;
    z-index: 3;
}

.mainabout-article-view .mainabout-hero-breadcrumbs ol li a span,
.mainabout-article-view .mainabout-hero-breadcrumbs ol li span {
    font-size: 11px !important;
    color: #ffffff !important;
}

.mainabout-article-view .mainabout-hero-breadcrumbs .breadcrumb-item a,
.mainabout-article-view .mainabout-hero-breadcrumbs .breadcrumb-item.active a {
    color: #ffffff;
    text-decoration: none;
    opacity: 1;
}

.mainabout-article-view .mainabout-hero-breadcrumbs .breadcrumb-item a:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mainabout-article-view .mainabout-hero-breadcrumbs .mod-breadcrumbs__divider {
    cursor: default;
}

.mainabout-article-view .mainabout-hero-breadcrumbs .breadcrumb-item + .breadcrumb-item::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24' fill='none' stroke='white' stroke-opacity='0.8' stroke-width='2.5'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E");
}

@media (max-width: 991px) {
    .mainabout-article-view .mainabout-hero-breadcrumbs {
        display: none;
    }
}

h2.about-style-title{
    font-size: 50px!important;
    line-height: 46px!important;
    letter-spacing: 5%!important;
    color: #3DCBFF;
}

/* Semantic h1/h2 – styled as paragraph (p / .p1 from template.min.css) */
h1.sp,
h2.sp {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: 0%;
    margin-bottom: 0.8rem;
    color: inherit;
}

h1.sp.font-large {
    font-size: 26px !important;
    font-weight: 600;
}

.section-dark h1.sp,
.section-dark h2.sp {
    color: #D2D3D7;
}

.section-light h1.sp,
.section-light h2.sp {
    color: inherit;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
    h1.sp,
    h2.sp {
        font-size: 18px !important;
        line-height: 28px !important;
        letter-spacing: 0%;
    }
}

@media screen and (max-width: 767px) {
    h1.sp,
    h2.sp {
        font-size: 18px !important;
        line-height: 28px !important;
        letter-spacing: 0%;
    }
}

/* mod_articles twohalfs – swapped p/h1 tags, original visual typography */
.mod-articles-twohalfs .twohalfs-looks-h1 {
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 150px !important;
    line-height: 118px !important;
    letter-spacing: 0%;
    margin-bottom: 1rem;
    color: inherit;
}

.mod-articles-twohalfs .twohalfs-looks-p {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: 0%;
    margin-bottom: 0.8rem;
    color: inherit;
}

@media screen and (max-width: 1023px) and (min-width: 768px) {
    .mod-articles-twohalfs .twohalfs-looks-h1 {
        font-size: 120px !important;
        line-height: 97px !important;
    }
}

@media screen and (max-width: 767px) {
    .mod-articles-twohalfs .twohalfs-looks-h1 {
        font-size: 67px !important;
        line-height: 53px !important;
    }
}

/* Known content classes after tag swap inside twohalfs */
.mod-articles-twohalfs h1.info-section-short-description,
.mod-articles-twohalfs .info-section-short-description {
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-size: 100px !important;
    line-height: 81px !important;
}

.mod-articles-twohalfs p.sp,
.mod-articles-twohalfs p.sp.font-large {
    font-family: 'Heebo', sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    line-height: 28px !important;
    letter-spacing: 0%;
    margin-bottom: 0.8rem;
    color: inherit;
}

.mod-articles-twohalfs p.sp.font-large {
    font-size: 26px !important;
    font-weight: 600;
}

/* Hero heading – H1 typography on <p> */
p.hero-heading {
    font-family: 'Barlev Bold', 'Heebo', sans-serif;
    font-weight: 700;
    font-size: 150px !important;
    line-height: 118px !important;
    letter-spacing: 0%;
    margin-bottom: 1rem;
    color: #fff;
}

/* ----------------------------------------- */
/* Team Category Blog (צוות - בלוג קטגוריה) */
/* ----------------------------------------- */

/* Dark section background (like .section-dark #1e2337) */
.team-category-view.section-dark {
    background-color: #1e2337;
    color: #ffffff;
    padding: 0 0 2rem;
}

.team-category-view .team-category-content {
    padding-top: 2rem;
    background-color: #1e2337;
}

/* Hero: full width, category image as background */
.team-hero {
    position: relative;
    min-height: 40vh;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-size: cover;
    background-position: center;
    background-color: #1e2337;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.team-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.55) 100%);
    z-index: 0;
}

.team-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem 1rem;
}

.team-hero-title {
    margin: 0;
    font-size: 2.25rem;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.team-category-view .team-category-title,
.team-category-view .team-subcategory-title {
    margin-bottom: 1.5rem;
    font-weight: 700;
    color: #ffffff;
}

.team-category-view .team-subcategory-title {
    color: #00B3F0;
    font-size: 50px!important;
    margin-bottom: 1.25rem;
}

.team-category-view .team-category-desc {
    margin-bottom: 2rem;
    color: rgba(255,255,255,0.9);
}

.team-category-view .page-header h1 {
    color: #ffffff;
}

.team-category-view .alert {
    background: rgba(255,255,255,0.95);
    color: #1e2337;
}

.team-category-section {
    margin-bottom: 3rem;
}

.team-blog-grid.row {
    display: flex;
    flex-wrap: wrap;
}

.team-card {
    height: 100%;
}

.team-card-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: box-shadow 0.2s ease;
}

.team-card-inner:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

.team-card-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: #e0e0e0;
}

.team-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Placeholder when no team member image */
.team-card-placeholder {
    background-color: #9e9e9e !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-card-placeholder-inner {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 120px;
    background-color: #9e9e9e;
}

/* Meta row: icon + text (phone, email) */
.team-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
}

.team-card-meta-icon {
    flex-shrink: 0;
    color: #1e2337;
}

.team-card-meta a {
    text-decoration: none;
    color: inherit;
}

.team-card-meta a:hover {
    text-decoration: underline;
}

.team-card-body {
    padding: 1.25rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.team-card-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 37px;
    font-weight: 400;
    font-style: normal;
    line-height: 37px;
    letter-spacing: 0.05em;
    color: #A5A7AF;
    margin-bottom: 0.5rem;
}

.team-card-intro {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.team-card-intro p:last-child {
    margin-bottom: 0;
}

.team-card-role {
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    line-height: 1.4;
}

.team-card-role p:last-child {
    margin-bottom: 0;
}

.team-card-contacts {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: auto;
    padding-top: 1rem;
}

.team-card-contact-link {
    padding-right: 0;
}

.team-card-link-wrap {
    margin-top: auto;
    padding-top: 1rem;
}

.team-card-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: #3DCBFF;
    color: #fff;
    transition: background 0.2s ease, transform 0.2s ease;
}

.team-card-link:hover {
    background: #2ab8e6;
    color: #fff;
    transform: scale(1.05);
}

.team-card-link-icon {
    width: 1.25rem;
    height: 1.25rem;
}

@media (max-width: 991px) {
    .team-blog-col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575px) {
    .team-blog-col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ============================================
   Lottie Animation Container - White Background
   רקע לבן לפתרון בעיית החורים השקופים באנימציה
   ============================================ */
.lottie-animation-container {
    background-color: #fff;
}

/* =====================================
   Info Articles Navigation Menu - Cards Category View
   תפריט ניווט למאמרי מידע שימושי
   ===================================== */

/* Navigation Container */
.info-articles-navigation {
    margin: 30px 0;
    padding: 20px 0;
    border-bottom: 1px solid #e9ecef;
}

/* Navigation List */
ul.info-articles-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 20px;
    background-color: #1E24380D;
    border-radius: 10px;
}

/* Navigation Items */
.info-articles-nav-item {
    margin: 0;
}

/* Navigation Links */
.info-articles-nav-link {
    display: inline-flex;
    color-:#1E2438 ;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    /*background: linear-gradient(135deg, var(--facility-color, #3DCBFF) 0%, rgba(61, 203, 255, 0.8) 100%);*/
    color: #fff;
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    transition: all 0.3s ease;
    /*box-shadow: 0 4px 15px rgba(61, 203, 255, 0.2);-*/
    text-align: center;
    min-width: 140px; 
}
.info-articles-nav-link span{
    color: #1E2438;
    font-size: 17px;
    
}
.info-articles-nav-link:hover span, .info-articles-nav-link:hover span svg{
    color: #fff;
    background-color: #1E2438;
}

/* Navigation Icon Wrapper */
.info-articles-nav-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Navigation Icons */
.info-articles-nav-icon {
    width: 30px;
    height: 30px;
    stroke: #000000;
    fill: none;
    transition: all 0.2s ease;
    color: #000000;
}

/* Navigation Text */
.info-articles-nav-text {
    white-space: nowrap;
}

.info-articles-nav-link:hover,
.info-articles-nav-link:focus {
    /*background: linear-gradient(135deg, rgba(61, 203, 255, 0.9) 0%, var(--facility-color, #3DCBFF) 100%);-*/
    background-color: #1E2438;
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(61, 203, 255, 0.3);
}

.info-articles-nav-link:hover .info-articles-nav-icon,
.info-articles-nav-link:focus .info-articles-nav-icon {
    transform: scale(1.1);
    stroke-width: 1.4;
}

.info-articles-nav-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(61, 203, 255, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .info-articles-navigation {
        margin: 20px 0;
        padding: 15px 0;
    }
    
    ul.info-articles-nav-list {
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        padding: 15px;
    }
    
    .info-articles-nav-link {
        width: 100%;
        max-width: 280px;
        padding: 15px 20px;
        font-size: 15px;
        gap: 10px;
    }
    
    .info-articles-nav-icon {
        width: 24px;
        height: 24px;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    ul.info-articles-nav-list {
        justify-content: flex-start;
        gap: 12px;
        padding: 15px;
    }
    
    .info-articles-nav-link {
        padding: 10px 18px;
        font-size: 15px;
        min-width: 120px;
        gap: 6px;
    }
    
    .info-articles-nav-icon {
        width: 26px;
        height: 26px;
    }
}

/* Large Desktop */
@media (min-width: 1200px) {
    ul.info-articles-nav-list {
        gap: 20px;
        padding: 3px 0px 3px 10px;
        border-radius: 36px;
        width: fit-content;
    }
    
    .info-articles-nav-link {
        padding: 7px 28px;
        font-size: 17px;
        min-width: 160px;
        gap: 10px;
    }
    
    .info-articles-nav-icon {
        width: 30px;
        height: 30px;
        counter: #1E2438 ;
    }
}

/* Smooth scroll behavior for anchor links */
html {
    scroll-behavior: smooth;
}



/* Add some top margin to article titles for anchor positioning */
.cards-item-title {
    scroll-margin-top: 100px; /* Adjust based on your fixed header height */
}

/* ============================================================
   DPCalendar – Custom Month Calendar Override
   ============================================================ */

/* ── Wrapper ──────────────────────────────────────────────── */
.dp-custom-calendar-wrap {
    position: relative;
    direction: rtl;
    margin: 36px;;
}

/* ── Calendar card ────────────────────────────────────────── */
.dp-custom-calendar {
    /*background: #ffffff;*/
    /*border-radius: 20px;*/
    overflow: hidden;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);
    position: relative;
    margin-top: 15px;
}

/* ── Header row ───────────────────────────────────────────── */
.dp-cal__header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: transparent;
    direction: rtl;
}
.dp-cal__view-btn{
    position: absolute;
    left: 15px;
    
}

/* Card-view button (תצוגה בכרטיסיות) */
.dp-cal__view-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: transparent;
    border: 1.5px solid #d1d5db;
    border-radius: 100px;
    color: #6b7280;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.dp-cal__view-btn:hover {
    background: #f9fafb;
    color: #374151;
    text-decoration: none;
}

/* Navigation cluster */
.dp-cal__nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dp-cal__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}
.dp-cal__nav-btn:focus-visible {
    outline: 2px solid #00bcc8;
    outline-offset: 2px;
}

/* Neutralise site-wide button ::before fill on calendar controls */
.dp-cal__nav-btn,
.dp-day-panel__close,
.dp-day-panel__event-plus {
    border: none;
    background: transparent;
    color: inherit;
    overflow: visible;
}
.dp-cal__nav-btn::before,
.dp-day-panel__close::before,
.dp-day-panel__event-plus::before,
.dp-cal__nav-btn:hover::before,
.dp-day-panel__close:hover::before,
.dp-day-panel__event-plus:hover::before {
    content: none;
    background: none;
    left: auto;
}
.dp-cal__nav-btn {
    color: #6b7280;
}
.dp-cal__nav-btn:hover {
    color: #374151;
}

.dp-cal__title {
    font-size: 18px;
    font-weight: 700;
    color: #111827;
    min-width: 150px;
    text-align: center;
    direction: rtl;
}

/* ── Day-name headers ─────────────────────────────────────── */
.dp-cal__day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    direction: rtl;
    /*background: #f9f8f6;
    border-top: 1px solid #eeece9;
    border-bottom: 1px solid #eeece9;*/
}

.dp-cal__col-header {
    padding: 10px 4px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    letter-spacing: 0.01em;
}

/* ── Days grid ────────────────────────────────────────────── */
.dp-cal__days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    direction: rtl;
    /* 1 px gap acts as a border between cells */
    gap: 1px;
    background: #eeece9;
    opacity: 1;
    transition: opacity 0.25s;
}

.dp-cal__days-grid--loading {
    opacity: 0.5;
    pointer-events: none;
}

/* ── Day cell ─────────────────────────────────────────────── */
.dp-cal__cell {
    background: #ffffff;
    min-height: 150px;
    padding: 10px 10px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: default; /* non-event days: not clickable */
    transition: background 0.15s;
    position: relative;
}

/* Only days with events get pointer + hover */
.dp-cal__cell--has-events {
    cursor: pointer;
}
.dp-cal__cell--has-events:hover {
    background: #f0fffe;
}
.dp-cal__cell--has-events:focus {
    outline: 2px solid #00bcc8;
    outline-offset: -2px;
}

/* Empty filler cells (padding before first day) */
.dp-cal__cell--empty {
    background: #f7f6f3;
    cursor: default;
    pointer-events: none;
}

/* ── Day number circle ────────────────────────────────────── */
.dp-cal__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eeece9;
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

/* Today */
.dp-cal__cell--today .dp-cal__num {
    background: #00bcc8;
    color: #ffffff;
    font-weight: 700;
}

/* Day with events */
.dp-cal__cell--has-events .dp-cal__num {
    background: #00bcc8;
    color: #ffffff;
    font-weight: 700;
}

/* Both today + has-events: same teal style */
.dp-cal__cell--today.dp-cal__cell--has-events .dp-cal__num {
    background: #00bcc8;
    color: #ffffff;
}

/* ── Events info row (bottom of cell) ────────────────────── */
.dp-cal__events-info {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    direction: rtl;
    flex-wrap: nowrap;
    max-width: 100%;
    overflow: hidden;
}

.dp-cal__count {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dp-cal__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dp-cal__event-line {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.dp-cal__event-title {
    font-size: 14px;
    line-height: 1.3;
    color: #374151;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

/* ============================================================
   Day Panel – slides in from the left
   ============================================================ */

.dp-day-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 380px;
    height: 100dvh;
    background: #12122a;
    z-index: 1060;
    transform: translateX(-100%);
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 28px 24px 40px;
    box-shadow: 6px 0 40px rgba(0, 0, 0, 0.35);
    direction: rtl;
}

.dp-day-panel--open {
    transform: translateX(0);
}

/* Close button */
.dp-day-panel__close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.12);
    border: none;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffffff;
    transition: background 0.2s;
    flex-shrink: 0;
}
.dp-day-panel__close:hover {
    background: rgba(255, 255, 255, 0.22);
}

/* Date header */
.dp-day-panel__header {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 28px;
    padding-top: 4px;
    padding-right: 44px;
    direction: rtl;
    line-height: 1.4;
}

/* Event card */
.dp-day-panel__event {
    padding: 18px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.dp-day-panel__event:last-child {
    border-bottom: none;
}

/* Top row: badge + plus button */
.dp-day-panel__event-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    direction: rtl;
    gap: 8px;
}

.dp-day-panel__event-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    direction: rtl;
}

.dp-day-panel__event-type-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

/* Category badge */
.dp-day-panel__event-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    max-width: 70%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Plus button */
.dp-day-panel__event-plus {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    min-width: 30px;
    color: #d1d5db;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}
.dp-day-panel__event-plus:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Event title link */
.dp-day-panel__event-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #f3f4f6;
    text-decoration: none;
    margin-bottom: 7px;
    line-height: 1.45;
    direction: rtl;
}
.dp-day-panel__event-title:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Time */
.dp-day-panel__event-time {
    font-size: 13px;
    color: #9ca3af;
    display: block;
    direction: rtl;
}

/* No-events state */
.dp-day-panel__empty {
    color: #6b7280;
    font-size: 14px;
    text-align: center;
    padding: 48px 0 24px;
    direction: rtl;
}

/* Overlay */
.dp-day-panel-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1059;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.dp-day-panel-overlay--active {
    display: block;
}

/* Mobile */
@media (max-width: 480px) {
    .dp-day-panel {
        width: 100%;
        max-width: 100%;
    }
}
/* ============================================================ */

/* Hero custom modules – shared background / content layout */
#mod-custom160,
#mod-custom179,
#mod-custom180,
#mod-custom185,
#mod-custom197 {
    background-size: contain;
}

#mod-custom160 img,
#mod-custom179 img,
#mod-custom180 img,
#mod-custom185 img,
#mod-custom197 img {
    width: 100%;
}

@media (min-width: 768px) {
    #mod-custom160,
    #mod-custom179,
    #mod-custom180,
    #mod-custom185,
    #mod-custom197 {
        background-size: cover;
        min-height: 66vh;
    }
}

#mod-custom160 .hero-content,
#mod-custom179 .hero-content,
#mod-custom180 .hero-content,
#mod-custom185 .hero-content,
#mod-custom197 .hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    padding-top: 37vh;
    width: 100%;
}

#mod-custom160 .hero-content h1,
#mod-custom160 .hero-content h3,
#mod-custom179 .hero-content h1,
#mod-custom179 .hero-content h3,
#mod-custom180 .hero-content h1,
#mod-custom180 .hero-content h3,
#mod-custom185 .hero-content h1,
#mod-custom185 .hero-content h3,
#mod-custom197 .hero-content h1,
#mod-custom197 .hero-content h3 {
    color: #ffffff;
}

/* ============================================================
   mod_menu – Logo Marquee (template override: logomarquee.php)
   CSS-driven infinite marquee. JS measures one set's width and
   writes it to --marquee-distance so the animation loops seamlessly.
   ============================================================ */

.mod-menu-logo-slider-wrap {
    position: relative;
    width: 100%;
}

/* Pause/play toolbar — floats over the viewport corner */
.logo-slider-toolbar {
    position: absolute;
    top: 4px;
    inset-inline-end: 4px;
    z-index: 2;
}

.logo-slider-pause-btn {
    appearance: none;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    color: #555;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.logo-slider-pause-btn:hover {
    background: #fff;
    color: #000;
}
.logo-slider-pause-btn:focus-visible {
    outline: 2px solid #3DCBFF;
    outline-offset: 2px;
}
.logo-slider-pause-icon {
    font-size: 14px;
    line-height: 1;
}

/* Viewport clips the moving track */
.logo-slider-viewport {
    width: 100%;
    overflow: hidden;
}

/* Track holds the original set + two visual clones; CSS animates it */
.logo-slider-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--marquee-item-gap, 40px);
    will-change: transform;
    animation: logo-slider-marquee var(--logo-marquee-duration, 60s) linear infinite;
}

.mod-menu-logo-slider-wrap.is-paused .logo-slider-track {
    animation-play-state: paused;
}

@keyframes logo-slider-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(var(--marquee-distance, 0px) * -1)); }
}

@media (prefers-reduced-motion: reduce) {
    .logo-slider-track {
        animation: none;
    }
}

/* Each set of items */
.logo-slider-set,
.logo-slider-set--clone {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: var(--marquee-item-gap, 40px);
    flex-shrink: 0;
}

.logo-slider-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.logo-slider-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: inherit;
    padding: 10px 14px;
    transition: opacity 0.2s ease;
}
.logo-slider-link:hover,
.logo-slider-link:focus {
    opacity: 0.7;
    outline: none;
}
.logo-slider-link:focus-visible {
    outline: 2px solid #3DCBFF;
    outline-offset: 2px;
}

.logo-slider-img {
    max-height: 80px;
    width: auto;
    object-fit: contain;
    display: block;
}

.logo-slider-title {
    font-size: 0.78rem;
    text-align: center;
    color: #555;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .logo-slider-img {
        max-height: 55px;
    }
}
/* ============================================================ */

/* ============================================
   mod_custom override – flipped colour strip
   ============================================ */

/* Desktop & tablets (768px and up) */
@media (min-width: 768px) {
    .hero-color-strip.hero-color-strip--flipped {
        position: absolute;
        /* break out of .container to reach the true left viewport edge */
        left: calc((100% - 100vw) / 2);
        width: 59vw; /* 100vw - 41% */
        bottom: -112px;
        margin-top: 0;
        /* prevent this element from adding horizontal scroll */
        overflow: hidden;
    }
}

.hero-color-strip--flipped img {
    width: 100%;
    display: block;
    transform: scaleX(-1);
}

/* ============================================
   Footer section-dark – top-right colour strip
   ============================================ */
footer .section-dark {
    position: relative;
}

.footer-top-strip {
    position: absolute;
    top: 0;
    right: 0;
    width: 66.6667%;
    line-height: 0;
    font-size: 0;
    pointer-events: none;
    z-index: 1;
}

.footer-top-strip img {
    width: 100%;
    display: block;
}

/* ============================================================
   static-columns-menu  (mod_menu / static-columns layout)
   ============================================================ */

.mod-menu.static-columns-menu {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding: 2rem 0;
}

.static-columns-menu .static-menu-section-title {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
    padding-bottom: 0.4rem;
    letter-spacing: 0.02em;
}

.static-columns-menu .static-menu-item {
    display: block;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    padding: 0.3rem 0;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    direction: rtl;
}

.static-columns-menu .static-menu-item:hover,
.static-columns-menu .static-menu-item:focus {
    color: #3dcbff;
    text-decoration: none;
}

.static-columns-menu .static-menu-section {
    padding: 0 1.25rem;
}

/* Responsive: stack sections vertically on small screens */
@media (max-width: 767px) {
    .static-columns-menu .static-menu-items.row .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (width >= 992px) {
    .navbar-expand-lg .navbar-nav {
        padding: 8px 2px;
    }
}

/* ── Homepage / nointernal header horizontal padding ────────────────────────── */
.site-header:not(.internal-header) {
    padding-inline-start: 2vw;
    padding-inline-end: 2vw;
}

/* ── Homepage header: flex centering + zoom robustness ──────────────────────── */
/* nav must be allowed to shrink so it never pushes siblings off-screen */
.site-header:not(.internal-header) nav.navbar-collapse {
    min-width: 0;
}
/* Allow logos to shrink under flex pressure (zoom/small viewport) */
.site-header:not(.internal-header) .header-logo1,
.site-header:not(.internal-header) .header-logo2 {
    flex-shrink: 1;
}
/* Reduce homepage logos only at 130%+ zoom (1.3dppx); max-resolution excludes Retina (2x) */
@media (min-resolution: 1.3dppx) and (max-resolution: 1.9dppx) {
    .site-header:not(.internal-header) .logo-image {
        max-height: 45px;
        width: auto;
    }
}


/* ── Header nav-link font: fluid clamp — 17px on wide, shrinks on zoom/small viewport ── */
@media (min-width: 992px) {
    .site-header:not(.internal-header) #mainmenu .nav-link,
    .site-header:not(.internal-header) #mainmenu .menu-item a {
        font-size: clamp(14px, 1.05vw, 17px);
    }
}

/* ── Nav-item hover: white bg + dark text ───────────────────────────────────── */
.site-header:not(.internal-header) li.nav-item:hover > .nav-link,
.site-header:not(.internal-header) li.nav-item:focus-within > .nav-link {
    background-color: #ffffff;
    color: #1e2438;
    border-radius: 25px;
}

/* ── DPCalendar single event: same header HTML as nointernal (menu position), styling like facility "מידע שימושי" (ftb-ctx-info / cards-category-view.light) ── */
body.dpcalendar-single-event .site-header:not(.internal-header) .navbar-transparent {
    background-color: #ffffff !important;
}

body.dpcalendar-single-event .site-header:not(.internal-header) .navbar-transparent.scrolled {
    background-color: #ffffff !important;
    box-shadow: 0 2px 12px rgba(30, 36, 56, 0.08);
}

@media screen and (min-width: 992px) {
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-menu .dark-heading-menu-module,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-menu #dark-heading-menu-id {
        padding: 13px 4px 9px !important;
        border-radius: 50px;
        background-color: #1E24380D !important;
        color: #1E2438;
        gap: 2px;
    }
    /* רמה 1 בלבד: הסתרת הפריט האחרון במרכז (כפילות עם header-right). > li — לא dropdown-item ברמות 2/3. */
    body .site-header:not(.internal-header) .header-menu #dark-heading-menu-id > li:last-child {
        display: none !important;
    }

    body.dpcalendar-single-event .site-header:not(.internal-header) .dark-heading-menu-module li a,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-menu .nav-link,
    body.dpcalendar-single-event .site-header:not(.internal-header) #dark-heading-menu-id li a {
        color: #1E2438 !important;
    }

    body.dpcalendar-single-event .site-header:not(.internal-header) .header-left .finder-dropdown-wrapper,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-left .mod-languages,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-right .finder-dropdown-wrapper,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-right .mod-languages {
        background-color: #F4F4F5 !important;
    }

    body.dpcalendar-single-event .site-header:not(.internal-header) .header-left .mod-languages a,
    body.dpcalendar-single-event .site-header:not(.internal-header) .header-right .mod-languages a,
    body.dpcalendar-single-event .site-header:not(.internal-header) .finder-dropdown-wrapper .btn {
        color: #1E2438 !important;
    }

}

body.dpcalendar-single-event .site-header:not(.internal-header) li.nav-item:hover > .nav-link,
body.dpcalendar-single-event .site-header:not(.internal-header) li.nav-item:focus-within > .nav-link {
    background-color: rgba(30, 36, 56, 0.08);
    color: #1e2438;
}

body.dpcalendar-single-event .site-header:not(.internal-header) .navbar-toggler {
    border-color: rgba(30, 36, 56, 0.35);
}

body.dpcalendar-single-event .site-header:not(.internal-header) .navbar-toggler-icon {
    filter: invert(1);
}

body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu.show {
    background-color: #fff;
    border: 1px solid rgba(30, 36, 56, 0.12);
    box-shadow: 0 8px 24px rgba(30, 36, 56, 0.12);
}

body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu .dropdown-item,
body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu .nav-link {
    color: #1E2438 !important;
}

body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu .dropdown-item:hover,
body.dpcalendar-single-event .site-header:not(.internal-header) .dropdown-menu .dropdown-item:focus {
    background-color: rgba(30, 36, 56, 0.06);
}

/* Fix 11: avoid oversized dark search toggle on single event (match facility / light bar) */
@media screen and (min-width: 992px) {
    body.dpcalendar-single-event .site-header:not(.internal-header) .finder-dropdown-wrapper,
    body.dpcalendar-single-event .site-header:not(.internal-header) #language_btn_124,
    body.dpcalendar-single-event .site-header:not(.internal-header) .btn-outline-primary {
        min-height: 44px;
        max-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Jobs Category Layout (jobs.php / jobs_item.php)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── List container ─────────────────────────────────────────────────────────── */
.jobs-category-view {
    /*max-width: 900px;*/
    margin-inline: auto;
    padding-block-start: 32px;
    padding-block-end: 75px;
    padding-inline: 16px;
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Job count line ─────────────────────────────────────────────────────────── */
.jobs-count {
    font-size: 0.9rem;
    color: #1E2438;
    margin-block-end: 25px;
    margin-block-start: 20px;
}

/* ── Card ───────────────────────────────────────────────────────────────────── */
.job-card {
    background-color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .07);
    transition: box-shadow 0.2s ease;
}

.job-card:hover {
    box-shadow: 0 6px 24px 0 rgba(0, 0, 0, .11);
}

/* ── Top row: title (RTL-start / right) + share (RTL-end / left) ─────────── */
.job-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-block-end: 12px;
}

.job-card-title {
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.4;
}

/* ── Sharing area ────────────────────────────────────────────────────────────── */
.job-card-share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.job-share-label {
    font-size: 0.8rem;
    color: #888;
    white-space: nowrap;
}

.job-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    cursor: pointer;
    transition: opacity 0.15s ease;
    line-height: 1;
}

.job-share-btn:hover {
    opacity: 0.7;
}

/* Tooltip-style feedback after copy */
.js-job-copy-link[data-copied]::after {
    content: attr(title);
    position: absolute;
    bottom: calc(100% + 6px);
    inset-inline-start: 50%;
    translate: -50% 0;
    white-space: nowrap;
    font-size: 0.72rem;
    padding: 3px 8px;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    pointer-events: none;
    opacity: 1;
}

.js-job-copy-link {
    position: relative;
}

/* ── Meta row ────────────────────────────────────────────────────────────────── */
.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    align-items: center;
    margin-block-end: 12px;
    font-size: 0.88rem;
    color: #555;
}

.job-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.job-meta-item img {
    flex-shrink: 0;
}

/* ── Subtitle ────────────────────────────────────────────────────────────────── */
.job-card-subtitle {
    font-size: 0.92rem;
    font-weight: 600;
    margin-block: 0 16px;
    line-height: 1.5;
}

/* ── Details panel (hidden by default, toggled via JS) ───────────────────────── */
.job-card-details {
    border-top: none;
    padding-block-start: 20px;
    margin-block-start: 4px;
    margin-block-end: 16px;
}

.job-card-section + .job-card-section {
    margin-block-start: 20px;
}

.job-section-body {
    font-size: 0.88rem;
    line-height: 1.7;
}

.job-section-body ul,
.job-section-body ol {
    padding-inline-start: 20px;
    margin: 0;
}

.job-section-body li {
    margin-block-end: 4px;
}

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.job-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-block-start: 16px;
    gap: 12px;
}

/* Toggle button (plain text, right side in RTL) */
.job-card-toggle,
body.facility-page .job-card-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.88rem;
    color: #4B5060;
    cursor: pointer;
    font-family: inherit;
    transition: color 0.15s ease;
}

.job-card-toggle:hover,
body.facility-page .job-card-toggle:hover {
    color: #2e3240;
    background: none;
}

/* Neutralise site-wide button ::before fill animation */
.job-card-toggle::before,
.job-card-toggle:hover::before,
body.facility-page .job-card-toggle::before,
body.facility-page .job-card-toggle:hover::before {
    content: none;
    background: none;
    left: auto;
}

/* Show/hide toggle labels */
.job-toggle-label--open,
.job-toggle-label--close,
.job-card.is-open .job-toggle-label--close {
    color: #4B5060;
}

.job-toggle-label--close {
    display: none;
}

.job-card-toggle:hover .job-toggle-label--open,
.job-card-toggle:hover .job-toggle-label--close {
    color: #2e3240;
}

.job-card.is-open .job-toggle-label--open {
    display: none;
}

.job-card.is-open .job-toggle-label--close {
    display: inline;
}

/* Apply button (outlined, left side in RTL) */
.job-apply-btn {
    display: inline-block;
    padding: 8px 24px;
    border: 1.5px solid #4B5060;
    border-radius: 24px;
    font-size: 0.88rem;
    font-weight: 600;
    color: #4B5060;
    text-decoration: none;
    transition: opacity 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
}

.job-apply-btn:hover {
    opacity: 0.8;
    color: #4B5060;
    text-decoration: none;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .12);
}

/* ── Pagination ──────────────────────────────────────────────────────────────── */
.jobs-pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-block-start: 32px;
}

.jobs-pagination__counter {
    width: 100%;
    text-align: center;
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}

/* ── Section title background accent ────────────────────────────────────────── */
.job-section-title {
    font-size: 0.92rem;
    font-weight: 700;
    margin-block-end: 8px;
    padding-block-end: 6px;
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .job-card {
        padding: 16px;
        border-radius: 8px;
    }

    .job-card-top {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .job-card-meta {
        gap: 8px 16px;
    }

    .job-card-footer {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Above Footer Dark – side by side modules */
.above-footer-dark {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: flex-start;
}

.above-footer-dark > div {
    flex: 1 1 0;
    min-width: 0;
}
#mod-custom166 h2{
    color: #fff;
}
#mod-custom167 .d-flex {
    flex-wrap: wrap;

}

#mod-custom167{
    margin-top: 50px;
    margin-bottom: 150px;
}
#mod-custom167 div p {
    width: 50%;
    font-weight: 400!important;
    margin-bottom: 41px;

}
#mod-custom167 div a{
    font-weight: 400!important;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   Tender Category Layout (tender.php)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hide the index.php header (both internal and transparent) — tender renders its own */
body:has(.tender-page-wrap) .site-header.internal-header,
body:has(.tender-page-wrap) > .site-header:first-of-type:not(.tender-header) {
    display: none !important;
}

/* Hide the homepage hero-color-strip so only the tender one shows */
body:has(.tender-page-wrap) .hero-color-strip:not(.tender-page-wrap .hero-color-strip) {
    display: none !important;
}

.tender-count {
    font-size: 0.9rem;
    color: #777;
    margin-block-end: 20px;
    margin-block-start: 32px;
}

.tender-desc-section {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    background-color: #1e2337;
    padding: 50px 0;
}

.tender-desc-content {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.1rem;
    line-height: 1.8;
    text-align: right;
    direction: rtl;
    margin: 0 auto;
    padding: 36px 0;
}

.tender-category-view {
    padding-block-end: 80px;
}

#mod-custom131 {
    margin-bottom: 36px;
}

/* What We Offer section */
.what-we-offer .card-body {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.what-we-offer .card-body .card-text {
    color: #ffffff;
}

/* ============================================================
   Partners Article Override (com_content/article/partners.php)
   ============================================================ */

/* ── Breadcrumbs bar ── */
/* ── Breadcrumbs bar: full-width via container-fluid (breakout handled in PHP) ── */
.partners-article-breadcrumbs {
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 40px;
    margin-top: 53px;
}

.partners-article-breadcrumbs__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Breadcrumbs sit on the right (RTL start) */
.partners-article-breadcrumbs__crumbs {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: flex-start;
}

/* ── Shared styles for both module & pathway breadcrumbs ── */
.partners-article-breadcrumbs__crumbs .breadcrumb,
.partners-breadcrumb-pathway {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: #1E2438;
    /* Remove Bootstrap's default divider – we use SVG mask */
    --bs-breadcrumb-divider: '';
}

.partners-article-breadcrumbs__crumbs .breadcrumb-item,
.partners-breadcrumb-pathway .breadcrumb-item {
    font-size: 13px;
    color: #1E2438;

}

.partners-article-breadcrumbs__crumbs .breadcrumb-item a,
.partners-article-breadcrumbs__crumbs .breadcrumb-item span,
.partners-breadcrumb-pathway .breadcrumb-item a,
.partners-breadcrumb-pathway .breadcrumb-item span {
    color: #1E2438;
    text-decoration: none;
    font-size: 13px;
    padding-left: 0;
    padding-right: 0;
}

/* First item only: keep padding-right */
.partners-article-breadcrumbs__crumbs .breadcrumb-item:first-child a,
.partners-article-breadcrumbs__crumbs .breadcrumb-item:first-child span,
.partners-breadcrumb-pathway .breadcrumb-item:first-child a,
.partners-breadcrumb-pathway .breadcrumb-item:first-child span {
    padding-right: 0.5rem;
}

.partners-article-breadcrumbs__crumbs .breadcrumb-item a:hover,
.partners-breadcrumb-pathway .breadcrumb-item a:hover {
    text-decoration: underline;
}

/* SVG arrow separator (mask technique – respects color via background-color) */
.partners-article-breadcrumbs__crumbs .breadcrumb-item + .breadcrumb-item::before,
.partners-breadcrumb-pathway .breadcrumb-item + .breadcrumb-item::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 7px;
    max-height: 7px;
    background-color: #1E2438;
    -webkit-mask-image: url('/media/mod_facilities_slider/images/arrow-left.svg');
    mask-image: url('/media/mod_facilities_slider/images/arrow-left.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    vertical-align: middle;
    margin: 0 5px;
    /* Override Bootstrap default padding */
    padding: 0;
    float: none;
}

.partners-article-breadcrumbs__crumbs .breadcrumb-item.active,
.partners-breadcrumb-pathway .breadcrumb-item.active {
    color: #1E2438;
    font-weight: 500;
}

.partners-article-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.2s;
}

.partners-article-back-btn:hover {
    color: #0072bc;
    text-decoration: none;
}

/* ── Main two-column layout ── */
.partners-article-main {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    padding-top: 100px;
    padding-bottom: 100px;
}

/* Text column (right in RTL → visually left in LTR display) */
.partners-article-body {
    flex: 1 1 0;
    min-width: 0;
}

/* Image column */
.partners-article-image {
    flex: 0 0 auto;
}

.partners-article-logo {
    display: block;
    max-height: 200px;
    width: auto;
    height: auto;
}

/* ── Article title ── */
.partners-article-title {
    font-size: 100px!important;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #111;
}

/* ── Social icons row ── */
.partners-article-social {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.partners-article-social__label {
    font-size: 0.95rem;
    color: #555;
    white-space: nowrap;
}

.partners-article-social .social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 1rem;
    color: #444;
    border: none;
    text-decoration: none;
    transition: color 0.2s;
}

.partners-article-social .social-btn:hover {
    color: #0072bc;
    text-decoration: none;
}

/* ── Article full text ── */
.partners-article-fulltext {
    font-size: 1rem;
    line-height: 1.8;
    color: #333;
}

.partners-article-fulltext p {
    margin-bottom: 1em;
}

/* ── Contact section ── */
.partners-article-contact {
    /*border-top: 2px solid #e8e8e8;*/
    padding-top: 32px;
    margin-top: 32px;
}

.partners-article-contact__title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #111;
}

.partners-article-contact__inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.partners-contact-address {
    width: 100%;
    border: 1px solid #d0d0d0;
    padding: 20px 24px;
    font-size: 0.95rem;
    line-height: 1.7;
    color: #333;
    box-sizing: border-box;
}

.partners-contact-buttons {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    align-items: stretch;
}

.partners-contact-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    padding: 16px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid #ccc;
    color: #333;
    flex: 1 1 0;
    min-width: 140px;
    max-width: 207px;
    text-align: center;
    transition: border-color 0.2s, color 0.2s;
}

.partners-contact-btn:hover {
    color: #0072bc;
    border-color: #0072bc;
    text-decoration: none;
}

/* Email button: email.cloak outputs an <a> inside the wrapper div */
.partners-contact-btn--email {
    cursor: pointer;
}

.partners-contact-btn--email a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    padding-right: 0;
}

.partners-contact-btn--email:hover a {
    color: #0072bc;
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .partners-article-main {
        flex-direction: column;
        gap: 24px;
    }

    .partners-article-image {
        flex: none;
        text-align: center;
    }

    .partners-article-logo {
        max-height: 200px;
        width: auto;
        margin: 0 auto;
    }

    .partners-article-title {
        font-size: clamp(2.5rem, 12vw, 64px);
    }

    .partners-article-contact__inner {
        flex-direction: column;
    }

    .partners-contact-address {
        flex: none;
        width: 100%;
    }
}

/* ==========================================================================
   Contact page (.article-view-contact) — hero + color strip (mobile-first)
   Matches Sport Palaces contact layout; tweak against Figma frame 1772-49025.
   ========================================================================== */

.article-view-contact .article-hero--contact {
    position: relative;
    width: 100vw;
    max-width: 100%;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    min-height: 600px;
    background-color: #1e2337;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.article-view-contact .article-hero-overlay--contact {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

.article-view-contact .article-top-bar--contact {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 3;
    width: 100%;
    padding: 15px clamp(12px, 4vw, 20px);
    box-sizing: border-box;
}

.article-view-contact .article-hero-content--contact {
    position: absolute;
    bottom: 16%;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    text-align: center;
    color: #fff;
    padding: 0 clamp(16px, 4vw, 24px);
    box-sizing: border-box;
}

/* Facility name eyebrow above article title (same pattern as techinfo-hero__facility-name) */
.article-hero__facility-name {
    display: block;
    font-family: Heebo, sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.175em;
    color: #fff;
}

/* Color strip under hero: full width on small screens, ~2/3 on desktop */
.article-view-contact .hero-color-strip--contact {
    margin-top: -18px;
}

.article-view-contact .hero-color-strip__gif--contact {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .article-view-contact .hero-color-strip__gif--contact {
        width: 66.6667%;
        max-width: 1117px;
    }
}

/* Mobile: shorter hero, title emphasis, readable tap targets for top bar */
@media (max-width: 767.98px) {
    .article-view-contact .article-hero--contact {
        min-height: min(48vh, 420px);
        background-position: center top;
    }

    .article-view-contact .article-hero-overlay--contact {
        background: rgba(0, 0, 0, 0.45);
    }

    .article-view-contact .article-hero-content--contact {
        padding: 0 16px;
        text-align: center;
    }

    .article-view-contact .article-hero-content--contact .article-title,
    .article-view-contact .article-hero-content--contact .article-subtitle {
        text-align: center !important;
    }

    .article-view-contact .article-hero-content--contact .article-title {
        font-size: clamp(1.65rem, 6.5vw, 2.1rem);
        line-height: 1.2;
        margin-bottom: 0.5rem !important;
    }

    .article-view-contact .article-hero-content--contact .article-subtitle {
        font-size: clamp(1rem, 3.8vw, 1.2rem);
        margin-bottom: 0 !important;
    }

    .article-view-contact .article-top-bar--contact {
        padding-top: 12px;
        padding-bottom: 8px;
    }
}

/* ==========================================================================
   Contact page article (.contact-page) — responsive two-column layout
   ========================================================================== */

.contact-page {
    margin-top: clamp(1.5rem, 5vw, 3.125rem) !important; /* overrides inline margin-top */
    margin-bottom: 1rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.contact-page__inner {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: clamp(1.5rem, 4vw, 2.5rem);
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.contact-page__form-col,
.contact-page__info-col {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Inline margin on info column breaks mobile; spacing comes from .contact-page__inner gap */
.contact-page__info-col {
    margin: 0 !important;
}

.contact-page__col-title {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.3;
}

.contact-page__col-subtitle {
    margin-bottom: 1rem;
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    line-height: 1.5;
    color: #444;
}

.contact-page__rsform-wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
}

.contact-page__rsform-wrap .formContainer {
    max-width: 100%;
}

.contact-page__office-details {
    margin-bottom: 0.5rem;
}

.contact-page__hours,
.contact-page__address {
    font-size: 0.95rem;
    line-height: 1.65;
}

.contact-page__address {
    margin-bottom: 0;
}

.contact-page .color-stripe-image-container {
    width: 100%;
    max-width: 100%;
}

.contact-page .color-stripe-image {
    max-width: 100%;
    height: auto;
}

.contact-page__contact-group {
    margin-bottom: 0.5rem;
}

.contact-page__group-title {
    font-size: clamp(1.1rem, 2vw, 1.25rem);
    margin-bottom: 0.35rem;
}

.contact-page__group-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.contact-page__btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem 1rem;
    width: 100%;
}

a.contact-page__contact-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 16px 24px;
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    color: #333;
    border: 1px solid #ccc;
    transition: border-color 0.2s, color 0.2s;
    flex: 1 1 0;
    min-width: 140px;
    max-width: 207px;
    box-sizing: border-box;
    word-break: break-word;
}

a.contact-page__contact-btn:hover,
a.contact-page__contact-btn:focus-visible {
    color: #0072bc;
    border-color: #0072bc;
    text-decoration: none;
}

a.contact-page__contact-btn img {
    flex-shrink: 0;
}

.contact-page__btn-row > a span {
    display: block;
    padding: 15px 0 0;
}

/* joomla-hidden-mail wraps an inner <a> with default link styling */
.contact-page__btn-row > a span a {
    color: inherit;
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
}

.contact-page__btn-row > a span a:hover,
.contact-page__btn-row > a span a:focus-visible {
    color: inherit;
    text-decoration: none;
}

@media (min-width: 768px) {
    .contact-page__inner {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: flex-start;
    }

    .contact-page__form-col,
    .contact-page__info-col {
        flex: 1 1 0;
        width: auto;
    }
}

@media (max-width: 576px) {
    a.contact-page__contact-btn {
        flex: 1 1 100%;
        min-width: 100%;
        max-width: 100%;
    }
}

/* ==========================================================================
   Velodrome – Programs sub-categories section (#facility-programs)
   ========================================================================== */

.facilty-heading-small {
    font-family: Heebo, sans-serif;
    font-size: 26px !important;
    font-weight: 600;
    margin-bottom: 0;
    margin-top: 0;
    text-align: center;
    letter-spacing: 0.52px;
    line-height: 35px !important;
}

#facility-programs {
    background-color: #0f1623;
    color: #fff;
    padding: 72px 0 56px;
}

.programs-header-row {
    margin-bottom: 48px;
}

.programs-title-col {
    text-align: right;
}

.programs-section-label {
    font-family: Heebo, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 10px;
}

.programs-main-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 28px;
}

.programs-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: #fff;
    padding: 10px 22px;
    font-family: Heebo, sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color 0.4s ease, color 0.4s ease;
    direction: rtl;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border-radius: 25px;
}

.programs-all-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--facility-color, #3DCBFF);
    transition: left 0.4s ease;
    z-index: -1;
}

.programs-all-btn:hover::before,
.programs-all-btn:focus::before {
    left: 0;
}

.programs-all-btn:hover,
.programs-all-btn:focus {
    border-color: var(--facility-color, #3DCBFF);
    color: #fff;
    text-decoration: none;
}

.programs-intro-col {
    text-align: right;
}

.programs-intro-text {
    font-family: Heebo, sans-serif;
    font-size: 0.97rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.78);
    margin-bottom: 0;
}

/* Cards */
.programs-cards-row {
    row-gap: 40px;
}

.programs-card {
    text-align: right;
}

.programs-card-img-link {
    display: block;
    overflow: hidden;
    margin-bottom: 18px;
}

.programs-card-img-wrap {
    overflow: hidden;
    margin-bottom: 18px;
}

.programs-card-img-link + .programs-card-img-wrap {
    display: none;
}

.programs-card-img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.programs-card-img-link:hover .programs-card-img {
    transform: scale(1.04);
}

.programs-card > a {
    padding: 0;
}

.programs-card-title {
    font-family: 'Barlev Bold', Heebo, sans-serif;
    font-size: 37px!important;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}

.programs-card-desc {
    font-family: Heebo, sans-serif;
    font-size: 18px;
    line-height: 28px;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 18px;
}

.programs-card-desc p {
    margin-bottom: 0;
}

.programs-card-readmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: Heebo, sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    direction: rtl;
}

.programs-card-readmore:hover,
.programs-card-readmore:focus {
    color: #fff;
    text-decoration: none;
}

.readmore-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #fff;
    color: var(--facility-color, #3DCBFF);
    position: relative;
    overflow: hidden;
    z-index: 1;
    flex-shrink: 0;
    transition: color 0.4s ease;
}

.readmore-circle::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: var(--facility-color, #3DCBFF);
    border-radius: 50%;
    transition: left 0.4s ease;
    z-index: -1;
}

.programs-card-readmore:hover .readmore-circle,
.programs-card-readmore:focus .readmore-circle {
    color: #fff;
}

.programs-card-readmore:hover .readmore-circle::before,
.programs-card-readmore:focus .readmore-circle::before {
    left: 0;
}

@media (max-width: 767px) {
    .programs-main-title {
        font-size: 1.9rem;
    }

    .programs-card-img {
        height: 220px;
    }
}

/* ==========================================================================
   Homepage – "גלו עוד" discover-more-btn (sliding fill, RTL)
   ========================================================================== */

.discover-more-btn {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.4s ease, border-color 0.4s ease !important;
}

.discover-more-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    height: 100%;
    background-color: #00B3F0;
    border-radius: inherit;
    transition: left 0.4s ease;
    z-index: -1;
}

.discover-more-btn:hover::before,
.discover-more-btn:focus::before {
    left: 0;
}

.discover-more-btn:hover,
.discover-more-btn:focus {
    color: #fff !important;
    border-color: #00B3F0 !important;
    text-decoration: none;
}

/* ============================================
   MOBILE MENU OFFCANVAS DRAWER
   Slides in from the right side on mobile
   Dark navy panel matching Figma / Sport Palaces design
   ============================================ */

/* The drawer panel itself — dark navy, full mobile width */
.mobile-menu-offcanvas {
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    bottom: 0;
    width: min(100vw, 393px);
    height: 100%;
    max-height: 100%;
    background-color: #1e2337;
    color: #ffffff;
    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.35);
    z-index: 1055;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
    display: flex;
    flex-direction: column;
    direction: rtl;
}

html[dir="ltr"] .mobile-menu-offcanvas {
    right: auto;
    left: 0;
    transform: translateX(-100%);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.35);
    direction: ltr;
}

/* Drawer open states (Bootstrap adds these) */
.mobile-menu-offcanvas.showing,
.mobile-menu-offcanvas.show {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.3s ease-in-out, visibility 0s linear 0s;
}

.mobile-menu-offcanvas.hiding {
    transform: translateX(100%);
    visibility: hidden;
    transition: transform 0.3s ease-in-out, visibility 0s linear 0.3s;
}

html[dir="ltr"] .mobile-menu-offcanvas.hiding {
    transform: translateX(-100%);
}

/* Header: just holds the close button now (title is hidden visually) */
.mobile-menu-offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    padding: 16px 18px 8px;
    flex-shrink: 0;
}

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

.mobile-menu-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background-color: #4b5060;
    border: none;
    border-radius: 50%;
    color: #ffffff;
    cursor: pointer;
    padding: 0;
    transition: background-color 0.2s, color 0.2s;
}

.mobile-menu-close-btn:hover,
.mobile-menu-close-btn:focus {
    background-color: #5a6072;
    color: #00b3f0;
    outline: none;
}

/* Scrollable body of the drawer */
.mobile-menu-offcanvas-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0 24px;
}

/* ---- Nav items inside offcanvas ----
   mod_menu outputs <ul class="navbar-nav d-flex flex-row"> — override flex-row */
.mobile-menu-offcanvas .navbar-nav,
.mobile-menu-offcanvas ul.navbar-nav,
.mobile-menu-offcanvas .nav,
.mobile-menu-offcanvas ul.nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}

.mobile-menu-offcanvas .nav-item {
    width: 100%;
}

.mobile-menu-offcanvas .nav-link,
.mobile-menu-offcanvas a.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    padding: 14px 22px;
    color: #ffffff !important;
    font-family: 'Heebo', sans-serif;
    font-size: 16px;
    font-weight: 500;
    text-align: start;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.mobile-menu-offcanvas .nav-link:hover,
.mobile-menu-offcanvas .nav-link:focus {
    background: rgba(255, 255, 255, 0.05);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .nav-item.active > .nav-link,
.mobile-menu-offcanvas .nav-link.active,
.mobile-menu-offcanvas .nav-item.current > .nav-link {
    color: #00b3f0 !important;
    background: rgba(0, 179, 240, 0.08);
}

.mobile-menu-offcanvas .nav-item.dropdown > .nav-link::before {
    content: '\203A';
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    order: 1;
    transition: transform 0.2s, color 0.2s;
}

html[dir="ltr"] .mobile-menu-offcanvas .nav-item.dropdown > .nav-link::before {
    content: '\2039';
}

.mobile-menu-offcanvas .nav-item.dropdown.mobile-open > .nav-link::before {
    transform: rotate(90deg);
    color: #00b3f0;
}

.mobile-menu-offcanvas .nav-link.dropdown-toggle::after {
    display: none !important;
}

/* ---- Sub-menu (dropdown) inside offcanvas ---- */
.mobile-menu-offcanvas .dropdown-menu {
    position: static !important;
    float: none !important;
    display: none;
    background-color: rgba(0, 0, 0, 0.22) !important;
    background-image: none !important;
    color: #ffffff;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: 100% !important;
    list-style: none !important;
    transform: none !important;
    inset: auto !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-inline-start: none !important;
    border-inline-end: none !important;
}

.mobile-menu-offcanvas .dropdown-menu.mobile-show {
    display: block !important;
}

.mobile-menu-offcanvas .dropdown-menu > .nav-item,
.mobile-menu-offcanvas .dropdown-menu > li {
    list-style: none;
    width: 100%;
}

.mobile-menu-offcanvas .dropdown-menu .nav-link,
.mobile-menu-offcanvas .dropdown-menu a.nav-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding: 12px 18px;
    padding-inline-start: 18px;
    padding-inline-end: 40px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: background 0.15s, color 0.15s;
    white-space: normal;
}

.mobile-menu-offcanvas .dropdown-menu .nav-link:hover,
.mobile-menu-offcanvas .dropdown-menu .nav-link:focus {
    background: rgba(0, 179, 240, 0.12);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .dropdown-menu .nav-item.active > .nav-link,
.mobile-menu-offcanvas .dropdown-menu .nav-link.active,
.mobile-menu-offcanvas .dropdown-menu .nav-item.current > .nav-link {
    background: rgba(0, 179, 240, 0.18);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .dropdown-menu .nav-item.dropdown > .nav-link::before {
    content: none;
}

/* Mega menu panel inside mobile drawer */
.mobile-menu-offcanvas .mega-dropdown.top-items-dropdown {
    position: static !important;
    min-width: 0 !important;
    max-width: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.22) !important;
}

.mobile-menu-offcanvas .mega-dropdown .level2-title,
.mobile-menu-offcanvas .mega-dropdown h6.level2-title,
.mobile-menu-offcanvas .mega-dropdown a.level2-title {
    color: #3DCBFF !important;
    background: none !important;
    font-size: 1rem;
    line-height: 1.35;
    font-weight: 700;
    padding: 12px 18px 6px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:link,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:visited,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:hover,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:focus {
    text-decoration: none;
    color: #3DCBFF !important;
}

.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:hover,
.mobile-menu-offcanvas .mega-dropdown a.level2-title.level2-title-link:focus-visible {
    text-decoration: underline;
}

.mobile-menu-offcanvas .mega-dropdown .level3-item {
    display: block;
    width: 100%;
    padding: 10px 18px 10px 40px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-size: 15px;
    font-weight: 400;
    text-decoration: none;
    background: transparent;
    border: none;
    white-space: normal;
}

.mobile-menu-offcanvas .mega-dropdown .level3-item:hover,
.mobile-menu-offcanvas .mega-dropdown .level3-item:focus {
    background: rgba(0, 179, 240, 0.12);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .mega-dropdown .mega-menu-section + .mega-menu-section {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.mobile-menu-offcanvas .mega-dropdown .level3-items.row .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
}

/* Nested submenu parent rows (3rd level+) */
.mobile-menu-offcanvas .dropdown-menu .dropend > .dropdown-item,
.mobile-menu-offcanvas .dropdown-menu .dropend > .mod-menu__separator.dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    width: 100%;
    white-space: normal;
}

.mobile-menu-offcanvas .dropdown-menu .nav-item.dropdown > .nav-link::before,
.mobile-menu-offcanvas .dropdown-menu .dropend > .dropdown-item::before,
.mobile-menu-offcanvas .dropdown-menu .dropend > .mod-menu__separator.dropdown-toggle::before {
    content: '\203A';
    font-size: 22px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.55);
    order: 1;
    flex-shrink: 0;
    transition: transform 0.2s, color 0.2s;
}

.mobile-menu-offcanvas .dropdown-menu .dropend > .dropdown-item.dropdown-toggle::after {
    display: none !important;
}

html[dir="ltr"] .mobile-menu-offcanvas .dropdown-menu .nav-item.dropdown > .nav-link::before,
html[dir="ltr"] .mobile-menu-offcanvas .dropdown-menu .dropend > .dropdown-item::before,
html[dir="ltr"] .mobile-menu-offcanvas .dropdown-menu .dropend > .mod-menu__separator.dropdown-toggle::before {
    content: '\2039';
}

.mobile-menu-offcanvas .dropdown-menu .nav-item.dropdown.mobile-open > .nav-link::before,
.mobile-menu-offcanvas .dropdown-menu .dropend.mobile-open > .dropdown-item::before,
.mobile-menu-offcanvas .dropdown-menu .dropend.mobile-open > .mod-menu__separator.dropdown-toggle::before {
    transform: rotate(90deg);
    color: #00b3f0;
}

/* Legacy .dropdown-item support */
.mobile-menu-offcanvas .dropdown-item {
    display: block;
    width: 100%;
    padding: 12px 40px 12px 18px;
    color: rgba(255, 255, 255, 0.82) !important;
    font-family: 'Heebo', sans-serif;
    font-size: 15px;
    font-weight: 400;
    text-align: start;
    text-decoration: none;
    background: transparent;
    border: none;
    transition: background 0.15s, color 0.15s;
}

.mobile-menu-offcanvas .dropdown-item:hover,
.mobile-menu-offcanvas .dropdown-item:focus {
    background: rgba(0, 179, 240, 0.12);
    color: #00b3f0 !important;
}

.mobile-menu-offcanvas .dropdown-item.active,
.mobile-menu-offcanvas .dropdown-item:active {
    background: rgba(0, 179, 240, 0.18);
    color: #00b3f0 !important;
}

/* Backdrop behind the drawer */
.offcanvas-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(30, 36, 56, 0.45);
    z-index: 1040;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.offcanvas-backdrop.show {
    opacity: 1;
}

/* Internal pages top-bar hamburger */
.internal-page-toggler {
    background-color: #1a2634 !important;
    border: none !important;
    border-radius: 8px;
    padding: 6px 10px;
    margin-right: 4px;
}

.internal-page-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.internal-page-toggler:focus {
    box-shadow: none;
    outline: none;
}

/* =============================================================================
   Facility category: full-bleed dark band (same as .section-dark #1e2337)
   ============================================================================= */
.facility-category-view .facility-category-grid-section.section-dark {
    width: 100%;
    /* background from .section-dark in template; reinforce if needed */
    background-color: #1e2337;
    color: #ffffff;
    padding: clamp(2.5rem, 6vw, 5.5rem) 0;
    margin: 0;
    position: relative;
    z-index: 0;
}

.facility-category-view .facility-category-grid-section__inner {
    position: relative;
    z-index: 1;
}

/* Let cards float on pure black (module wrapper defaults are transparent; enforce) */
.facility-category-view .facility-category-grid-section .facility-category-facilities-grid.mod-facilities-slider-wrapper,
.facility-category-view .facility-category-grid-section .mod-facilities-slider-container {
    background: transparent !important;
}

/* =============================================================================
   com_content category layout "facility" – CSS grid, 4 cards per row (responsive)
   Inner grid must NOT use class .mod-facilities-slider (Slick styles break grid).
   ============================================================================= */
.facility-category-facilities-grid .mod-facilities-slider-wrapper,
.facility-category-facilities-grid .mod-facilities-slider-container {
    overflow: visible !important;
}

.facility-category-facilities-grid .facility-category-grid-inner {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible !important;
}

.facility-category-facilities-grid .facility-category-grid-inner > .facility-slide-item {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 !important;
    float: none !important;
    display: block !important;
}

.facility-category-facilities-grid .facility-slide-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.facility-category-facilities-grid .facility-slide-content .facility-media-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 315 / 257;
}

.facility-category-facilities-grid .facility-slide-content .facility-media-container video,
.facility-category-facilities-grid .facility-slide-content .facility-media-container img {
    max-width: none !important;
    max-height: none !important;
}

.facility-category-facilities-grid video.facility-video {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
}

/* Child category cards: title + intro (field 9) below image, not on overlay */
.facility-category-facilities-grid .facility-child-category-card__link {
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    text-decoration: none !important;
    color: inherit !important;
}

.facility-category-facilities-grid .facility-child-category-card__text {
    padding: 1rem 0 0;
    text-align: right;
}

.facility-category-facilities-grid .facility-child-category-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.35;
}

.facility-category-facilities-grid .facility-child-category-card__address {
    margin: 0 0 0.5rem;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    color: rgba(255, 255, 255, 0.88);
}

.facility-category-facilities-grid .facility-child-category-card__intro {
    margin: 0;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 22px;
    color: rgba(255, 255, 255, 0.85);
}

@media (max-width: 1200px) {
    .facility-category-facilities-grid .facility-category-grid-inner {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .facility-category-facilities-grid .facility-category-grid-inner {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* Override mod_facilities_slider 315px body rules (chain included .mod-facilities-slider — grid no longer uses it) */
body div.mod-facilities-slider-wrapper.facility-category-facilities-grid div.mod-facilities-slider-container div.facility-category-grid-inner div.facility-slide-item div.facility-slide-content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

body div.mod-facilities-slider-wrapper.facility-category-facilities-grid div.mod-facilities-slider-container div.facility-category-grid-inner div.facility-slide-item div.facility-slide-content div.facility-media-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 315 / 257;
}

body div.mod-facilities-slider-wrapper.facility-category-facilities-grid div.mod-facilities-slider-container div.facility-category-grid-inner div.facility-slide-item div.facility-slide-content div.facility-media-container video,
body div.mod-facilities-slider-wrapper.facility-category-facilities-grid div.mod-facilities-slider-container div.facility-category-grid-inner div.facility-slide-item div.facility-slide-content div.facility-media-container img {
    max-width: none !important;
    max-height: none !important;
}

/* Tech Info: hide duplicate global breadcrumbs (hero / facility top bar has its own) */
body:has(.techinfo-article-view) .site-top-bar .topbar-site-breadcrumbs {
    display: none !important;
}

/* ==========================================================================
   Tech Info page (techinfo.php) — Sport Palaces facility technical info
   Applies to body.techinfo-article-page (Bloomfield / Menora / Shlomo).
   ========================================================================== */

.techinfo-article-page {
    --tech-green:        #2e7d32;
    --tech-green-soft:   #6dbf73;
    --tech-cream:        #f7f3e6;
    --tech-card-bg:      #ffffff;
    --tech-card-border:  #e8e6df;
    --tech-text:         #111111;
    --tech-text-muted:   #4b5060;
}

/* ── Breadcrumbs (gray bar removed; on-hero variants below) ── */
.techinfo-breadcrumb-pathway,
.techinfo-article-view .facility-breadcrumbs ol.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--tech-text-muted);
}
.techinfo-breadcrumb-pathway li + li::before,
.techinfo-article-view .facility-breadcrumbs ol.breadcrumb li + li::before {
    content: "/";
    padding: 0 8px;
    color: #b8b8b8;
}
.techinfo-breadcrumb-pathway a,
.techinfo-article-view .facility-breadcrumbs ol.breadcrumb a {
    color: var(--tech-text-muted);
    text-decoration: none;
}
.techinfo-breadcrumb-pathway li.active,
.techinfo-article-view .facility-breadcrumbs ol.breadcrumb li.active {
    color: var(--tech-text);
    font-weight: 600;
}

/* ── Hero — match contact / article heroes: 600px min height on desktop ── */
.techinfo-hero {
    position: relative;
    width: 100%;
    min-height: min(48vh, 420px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #1c2a1d;
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
}
@media (min-width: 768px) {
    .techinfo-hero {
        min-height: 600px;
    }
}
.techinfo-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}

/* Menu + breadcrumbs pinned above hero image (under site chrome) */
.techinfo-hero__top {
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 5;
    width: 100%;
    padding-block: 5px;
    padding-inline: clamp(12px, 4vw, 20px);
    box-sizing: border-box;
}

/* Desktop: nudge the facility top bar down on the tech-info and about pages */
@media (min-width: 768px) {
    .techinfo-article-view .facility-top-bar,
    .article-about-view .facility-top-bar {
        margin-top: 51px;
    }
}

.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway,
.techinfo-hero__crumbs-nav .breadcrumb {
    color: rgba(255, 255, 255, 0.92);
}

.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway a,
.techinfo-hero__crumbs-nav .breadcrumb a {
    color: rgba(255, 255, 255, 0.92);
}

.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway li + li::before,
.techinfo-hero__crumbs-nav .breadcrumb li + li::before {
    color: rgba(255, 255, 255, 0.45);
}

.techinfo-hero__crumbs-nav .techinfo-breadcrumb-pathway li.active,
.techinfo-hero__crumbs-nav .breadcrumb li.active {
    color: #fff;
    font-weight: 600;
}

/* Facility top bar crumb row: same contrast on dark hero (shared .techinfo-article-view rules use muted gray) */
.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb,
.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb a {
    color: rgba(255, 255, 255, 0.92);
}

.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb li + li::before {
    color: rgba(255, 255, 255, 0.45);
}

.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb li.active,
.techinfo-hero .techinfo-hero__top .facility-breadcrumbs ol.breadcrumb li.active span {
    color: #fff;
    font-weight: 600;
    opacity: 1;
}

.techinfo-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    /* Pinned to hero bottom (flex-end); bottom padding clears the color ribbon */
    padding: clamp(16px, 2.5vw, 24px) 0 clamp(77px, 12vw, 132px);
}
.techinfo-hero__title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0;
}
/* Facility name as a small eyebrow line above the title (paragraph-like weight/size) */
.techinfo-hero__facility-name {
    display: block;
    font-family: Heebo, sans-serif;
    font-size: clamp(1rem, 1.6vw, 1.25rem);
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 0.175em;
    color: #fff;
}
/* Optional subtitle line below the h1 (used by about.php, welldormclubs, etc.) */
.techinfo-hero__subtitle {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    font-weight: 400;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.9);
    margin: 0.4em 0 0;
}

/* Parent facility color stripe (PNG from category field 38), same pattern as hero-color-strip */
.techinfo-hero__ribbon {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    line-height: 0;
    font-size: 0;
    height: auto;
    background: none;
    z-index: 3;
}

html[dir="ltr"] .techinfo-hero__ribbon {
    justify-content: flex-end;
}

.techinfo-hero__ribbon-img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

@media (min-width: 768px) {
    .techinfo-hero__ribbon-img {
        width: 66.6667%;
        max-width: 1117px;
        max-height: 150px;
    }
}

/* ── Page body background ── */
.techinfo-article-page .siteBody {
    background-color: var(--tech-cream);
}

/* ── Intro paragraph — align to inline-start (physical right in RTL) ── */
.techinfo-intro {
    max-width: 900px;
    margin-block: 60px 40px;
    margin-inline: 0;
    margin-inline-end: auto;
    text-align: start;
    font-size: 1.2rem;
    line-height: 1.75;
    color: var(--tech-text);
}
.techinfo-intro p {
    margin: 0 0 16px;
}

/* ── Download bar — same horizontal alignment as intro (inline-start) ── */
.techinfo-downloads {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    margin-bottom: 48px;
}
.techinfo-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: transparent;
    color: var(--tech-text);
    border: none;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s, background 0.2s;
}
.techinfo-download-btn:hover {
    color: var(--tech-green);
    text-decoration: none;
    background: rgba(46,125,50,0.06);
}
.techinfo-download-btn img {
    flex: 0 0 18px;
}

/* ── Quick stats strip ── */
.techinfo-stats {
    margin: 0 0 48px;
}
.techinfo-stats__list {
    list-style: none;
    margin: 0;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid var(--tech-card-border);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 20px 12px;
}
.techinfo-stat {
    text-align: center;
    padding: 0 8px;
}
.techinfo-stat__value {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--tech-green);
    line-height: 1.1;
    margin-bottom: 6px;
}
.techinfo-stat__label {
    display: block;
    font-size: 0.9rem;
    color: var(--tech-text-muted);
}

/* ── Cards grid (main visual element) ── */
.techinfo-cards {
    margin: 0 0 60px;
}
.techinfo-cards__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
.techinfo-card {
    background: var(--tech-card-bg);
    border: 1px solid var(--tech-card-border);
    border-radius: var(--cards-border-radius, 16px);
    box-shadow: 0 0 24px 0 rgba(30, 36, 56, 0.1);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 0.2s, box-shadow 0.2s;
}
.techinfo-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 28px 0 rgba(30, 36, 56, 0.14);
}
.techinfo-card__icon {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--tech-green);
    margin-bottom: 4px;
}
.techinfo-card__icon img {
    width: 32px;
    height: 32px;
}
.techinfo-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--tech-text);
    margin: 0;
    line-height: 1.3;
}
.techinfo-card__text {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--tech-text-muted);
    margin: 0;
}

/* ── Section title (used by Structure / Seating Map) ── */
.techinfo-section-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--tech-text);
    margin: 0 0 28px;
    text-align: center;
}

/* ── Structure block (gates / floors list) ── */
.techinfo-structure {
    background: #fff;
    border: 1px solid var(--tech-card-border);
    padding: 40px 32px;
    margin: 0 0 60px;
}
.techinfo-structure__body h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--tech-green);
    margin: 24px 0 12px;
}
.techinfo-structure__body h3:first-child {
    margin-top: 0;
}
.techinfo-structure__body ul {
    list-style: none;
    padding: 0;
    margin: 0 0 8px;
}
.techinfo-structure__body li {
    padding: 10px 0;
    border-bottom: 1px solid #f0eee5;
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--tech-text);
}
.techinfo-structure__body li:last-child {
    border-bottom: none;
}
.techinfo-structure__body li strong {
    color: var(--tech-text);
    font-weight: 700;
}

/* ── Seating map ── */
.techinfo-seating-map {
    margin: 0 0 60px;
}
.techinfo-seating-map__figure {
    margin: 0;
    background: #fff;
    border: 1px solid var(--tech-card-border);
    padding: 16px;
    text-align: center;
}
.techinfo-seating-map__figure img {
    max-width: 100%;
    height: auto;
}

/* ── Bottom spacing inside container ── */
.techinfo-article-page .siteBody > .container {
    padding-top: 0;
    padding-bottom: 60px;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
    .techinfo-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 640px) {
    .techinfo-hero__inner {
        padding: clamp(12px, 4vw, 20px) 0 clamp(61px, 17vw, 85px);
    }
    .techinfo-cards__grid {
        grid-template-columns: 1fr;
    }
    .techinfo-stats__list {
        grid-template-columns: repeat(2, 1fr);
        padding: 24px 12px;
    }
    .techinfo-stat__value {
        font-size: 1.6rem;
    }
    .techinfo-intro {
        font-size: 1.05rem;
        margin-block: 40px 24px;
        margin-inline: 0;
        margin-inline-end: auto;
    }
    .techinfo-structure {
        padding: 24px 18px;
    }
}
/* ===== end techinfo ===== */

/* ==========================================================================
   Welldorm Clubs page (welldormCLubs.php) — club / coach cards
   Shared: body.techinfo-article-page (hero, cream bg, intro)
   Scoped: body.welldormclubs-article-page
   ========================================================================== */

.welldormclubs-article-page {
    --clubs-title-color: #1c6cb6;
    --clubs-label-color: #6b7280;
    --clubs-value-color: #3f4652;
    --clubs-card-gap:    24px;
}

.welldormclubs-breadcrumb-pathway,
.welldromtracks-breadcrumb-pathway {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--tech-text-muted);
}

.welldormclubs-breadcrumb-pathway li + li::before,
.welldromtracks-breadcrumb-pathway li + li::before {
    content: "/";
    padding: 0 8px;
    color: #b8b8b8;
}

.welldormclubs-breadcrumb-pathway a,
.welldromtracks-breadcrumb-pathway a {
    color: var(--tech-text-muted);
    text-decoration: none;
}

.welldormclubs-breadcrumb-pathway li.active,
.welldromtracks-breadcrumb-pathway li.active {
    color: var(--tech-text);
    font-weight: 600;
}

.welldormclubs-hero .techinfo-hero__inner {
    text-align: start;
}

.welldormclubs-hero .techinfo-hero__subtitle {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 0 8px;
}

.welldormclubs-cards {
    margin: 48px 0 60px;
}

.welldormclubs-cards__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--clubs-card-gap);
}

.welldormclubs-card__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clubs-title-color);
    margin: 0 0 16px;
    line-height: 1.3;
    text-align: start;
}

.welldormclubs-card__rows {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.welldormclubs-card__row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.welldormclubs-card__label {
    flex: 0 0 auto;
    color: var(--clubs-label-color);
    font-weight: 500;
}

.welldormclubs-card__value {
    flex: 1 1 auto;
    color: var(--clubs-value-color);
    text-align: end;
    min-width: 0;
    overflow-wrap: anywhere;
}

.welldormclubs-card__value a {
    color: var(--clubs-title-color);
    text-decoration: none;
}

.welldormclubs-card__value a:hover,
.welldormclubs-card__value a:focus-visible {
    text-decoration: underline;
    outline: none;
}

@media (max-width: 1024px) {
    .welldormclubs-cards__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .welldormclubs-cards__grid {
        grid-template-columns: 1fr;
    }
}
/* ===== end welldormclubs ===== */

/* ==========================================================================
   Welldrom Tracks page (welldromtracks.php) — track / competition cards
   Shared: body.techinfo-article-page
   Scoped: body.welldromtracks-article-page
   ========================================================================== */

.welldromtracks-article-page {
    --tracks-title-color: #1c6cb6;
    --tracks-label-color: #6b7280;
    --tracks-value-color: #3f4652;
    --tracks-desc-color:  #3f4652;
    --tracks-card-gap:    24px;
    --tracks-col-divider: #e5e7eb;
}

.welldromtracks-cards {
    margin: 48px 0 60px;
}

.welldromtracks-cards__list {
    display: flex;
    flex-direction: column;
    gap: var(--tracks-card-gap);
}

.welldromtracks-card {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 28px 32px;
    align-items: start;
    padding: 32px 36px;
}

.welldromtracks-card__intro {
    padding-inline-end: 28px;
    border-inline-end: 1px solid var(--tracks-col-divider);
}

.welldromtracks-card__title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--tracks-title-color);
    margin: 0 0 12px;
    line-height: 1.3;
    text-align: start;
}

.welldromtracks-card__desc {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--tracks-desc-color);
    margin: 0;
    text-align: start;
}

.welldromtracks-card__rows {
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.welldromtracks-card__row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0;
}

.welldromtracks-card__label {
    flex: 0 0 auto;
    color: var(--tracks-label-color);
    font-weight: 500;
    white-space: nowrap;
    margin: 0;
}

.welldromtracks-card__value {
    flex: 1 1 auto;
    color: var(--tracks-value-color);
    text-align: end;
    min-width: 0;
    overflow-wrap: anywhere;
    margin: 0;
}

@media (max-width: 1024px) {
    .welldromtracks-card {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .welldromtracks-card__intro {
        grid-column: 1 / -1;
        padding-inline-end: 0;
        border-inline-end: 0;
        padding-block-end: 20px;
        border-block-end: 1px solid var(--tracks-col-divider);
    }
}

@media (max-width: 640px) {
    .welldromtracks-card {
        grid-template-columns: 1fr;
        padding: 24px 20px;
        gap: 20px;
    }

    .welldromtracks-card__intro {
        padding-block-end: 16px;
    }

    .welldromtracks-card__meta + .welldromtracks-card__meta {
        padding-block-start: 16px;
        border-block-start: 1px solid var(--tracks-col-divider);
    }
}
/* ===== end welldromtracks ===== */


/* ============================================
   Scroll to top — fixed bottom-right (RTL inline-start)
   ============================================ */
.scroll-to-top {
    position: fixed;
    inset-block-end: 1.5rem;
    inset-inline-start: 1.5rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 2px solid #1e2337;
    color: #1e2337;
    background-color: #ffffff;
    box-shadow: 0 4px 16px rgba(30, 35, 55, 0.18);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, color 0.2s ease, border-color 0.2s ease;
}

.scroll-to-top--visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover,
.scroll-to-top:focus-visible {
    color: #ffffff;
    border-color: var(--facility-color, #00B3F0);
    background-color: var(--facility-color, #00B3F0);
    outline: none;
}

.scroll-to-top:focus-visible {
    box-shadow: 0 0 0 3px #ffffff, 0 0 0 5px var(--facility-color, #00B3F0);
}

.scroll-to-top__icon {
    display: block;
    flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-to-top {
        transition: none;
    }
}

@media screen and (min-width: 992px) {
    .site-top-bar.bg-white .dropdown-menu.show {
        background-color: #1e2438;
    }
    .site-top-bar.bg-white .dropdown-menu.show .level3-item{
        color: #ffffff;
    }
    .site-top-bar.bg-white .dropdown-menu.show .level3-item:hover, 
    .site-top-bar.bg-white .dropdown-menu.show .level3-item:focus{
        color: #ffffff;
        background-color: unset;
        border: 1px solid #ffffff;
    }
    .site-top-bar.bg-white .dropdown-menu.show  .level2-title{
        background-color: unset;
    }
}