.container {
        max-width: 1300px;
    }

    .container-xxl {
        max-width: 98%;
        display: flex;
        align-items: center;
        position: relative;
    }

    .button {
        display: flex;
        text-decoration: none;
        background: #8CD652;
        color: #000;
        align-items: center;
        justify-content: center;
        padding: 1rem 3rem;
        border-radius: .5rem;
        transition: opacity .4s;


        &:hover {
            color: #000;
            opacity: .75;
        }

        &.secondary {
            background-color: #F4F4F4;
        }
    }

    /* Header Styles */
    .site-header {
        background-color: #fff;
        position: sticky;
        top: 0;
        z-index: 9999;
        overflow-x: clip;
    }

    .site-header .top,
    .site-header .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0rem;
    }

    .site-header .bottom .menu-container {
        display: flex;
        justify-content: center;
    }

    .site-header .bottom .menu {
        justify-content: flex-start;
        gap: 2rem;
    }

    .site-header .bottom .menu.swiper-wrapper {
        width: fit-content;
        gap: 0;
    }

    .site-header .top .logo-container {
        flex-shrink: 0;
    }

    .site-header .top .logo {
        width: auto;
        height: 55px;
    }

    .site-header .top .hamburger {
        flex-shrink: 0;
        width: 22px;
        height: 30px;
        margin-right: 0.5rem;
    }

    .site-header .top .hamburger img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .site-header .top .menu-container {
        margin-left: auto;
        margin-right: 1rem;
        flex: 1 1 0;
        min-width: 0;
    }

    .site-header .top .menu {
        gap: 0.25rem !important;
    }

    .site-header .top .menu a {
        color: #000;
        font-size: 11px !important;
        font-weight: 600;
        white-space: nowrap;
        transition: font-size .2s ease-in-out;
    }

    .site-header .top .menu .button {
        padding: 0.6rem 0.8rem;
    }

    .site-header .top .menu .button a {
        font-size: 11px !important;
    }

    .site-header .top .menu .button.primary {
        background-color: #8CD652;
    }

    .site-header .top .menu .button.primary a {
        color: #000;
    }

    .site-header .top .menu .button.dark {
        background-color: #000;
    }

    .site-header .top .menu .button.dark a {
        color: #fff;
    }

    .site-header .top .menu .button.mobile {
        display: none;
    }

    .site-header .top .menu .button.desktop {
        display: block;
    }

    .site-header .top .header-top-menu-buttons {
        gap: 0.5rem;
        flex-shrink: 0;
    }

    .site-header .bottom {
        background-color: #000;
    }

    .site-header .bottom .menu-container {
        flex: 1 1 auto;
    }

    .site-header .bottom .menu li {
        max-width: fit-content;
    }

    .site-header .bottom .menu a {
        color: #fff;
        font-size: 13px;
    }

    .site-header .menu {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .site-header .menu a {
        text-decoration: none;
    }

    #header-upper {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #header-upper a {
        font-size: 12.8px;
        font-weight: 600;
        white-space: nowrap;
    }

    #header-upper .menu-item-has-children {
        position: relative;
    }

    #header-upper .menu-item-has-children:hover .sub-menu {
        display: block;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    #header-upper .menu-item-has-children>a {
        position: relative;
        z-index: 2;
        padding: 0.75rem 1rem;
        transition: background-color 0.2s ease;
        text-decoration: none;
    }

    #header-upper .menu-item-has-children>a:after {
        content: '\f078';
        font-family: "Font Awesome 6 Free", sans-serif;
        font-weight: 900;
        font-size: 0.8em;
        margin-left: 0.5rem;
        transition: transform 0.2s ease;
    }

    #header-upper .menu-item-has-children:hover>a {
        background-color: #F4F4F4;
    }

    #header-upper .menu-item-has-children:hover>a:after {
        transform: rotate(180deg);
    }

    #header-upper .menu-item-has-children .sub-menu {
        display: none;
        opacity: 0;
        pointer-events: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 220px;
        background: #fff;
        border: 1px solid #F4F4F4;
        border-radius: 4px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        z-index: 1000;
        transition: all 0.3s ease;
        transform: translateY(-10px);
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #header-upper .menu-item-has-children .sub-menu .menu-item {
        margin: 0;
    }

    #header-upper .menu-item-has-children .sub-menu .menu-item a {
        color: #000;
        padding: 0.75rem 1.25rem;
        display: block;
        white-space: nowrap;
        transition: all 0.2s ease;
        border-bottom: none;
        text-decoration: none;
    }

    #header-upper .menu-item-has-children .sub-menu .menu-item a:hover {
        background: #F4F4F4;
        padding-left: 1.5rem;
    }

    #header-upper .menu-item-has-children .sub-menu .menu-item+.menu-item {
        border-top: 1px solid #F4F4F4;
    }

    #header-upper .menu-item:not(.menu-item-has-children) a {
        padding: 0.75rem 1rem;
        text-decoration: none;
        transition: background-color 0.2s ease;
    }

    #header-upper .menu-item:not(.menu-item-has-children) a:hover {
        background-color: #F4F4F4;
    }

    .mobile-menu {
        width: 100%;
        background-color: #fff;
        position: fixed;
        pointer-events: none;
        opacity: 0;
        transition: all .2s ease-in-out;
        transform: translate(0, 1px);
        z-index: 999;
    }

    .mobile-menu.open {
        top: 76px;
        opacity: 1;
        pointer-events: all;
        left: 0;
    }

    .mobile-menu .menu {
        list-style: none;
        display: block;
        padding: 0;
        margin: 0;
    }

    .mobile-menu .menu .menu-item {
        position: relative;
        padding: 0;
        margin: 0;
    }

    .mobile-menu .menu .menu-item a {
        text-decoration: none;
        font-size: 16px;
        color: #000;
        font-weight: 400;
        border-bottom: solid 1px #F4F4F4;
        display: block;
        padding: 1rem;
    }

    .mobile-menu .menu .menu-item.submenu-open>a {
        display: none !important;
    }

    .mobile-menu .menu .menu-item.submenu-open:after {
        display: none;
    }

    .mobile-menu .menu .menu-item .sub-menu {
        display: none;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .mobile-menu .menu .menu-item .sub-menu li a {
        font-size: 13px;
        border-bottom: 0;
        padding: .5rem 1rem;
    }

    .mobile-menu .menu .menu-item .sub-menu .submenu-title .back-link {
        font-size: 16px;
        color: #000;
        font-weight: 400;
        border-bottom: solid 1px #F4F4F4;
        padding: 1rem;
    }

    .mobile-menu .menu .menu-item.menu-item-has-children:after {
        content: "\f054";
        font-family: "Font Awesome 6 Free";
        font-size: 1.2rem;
        font-weight: 900;
        position: absolute;
        right: 1.5rem;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
    }

    .mobile-menu .menu .menu-item.menu-item-has-children>a {
        cursor: pointer;
    }

    .mobile-menu .mobile-button a {
        text-align: center;
        margin: 1rem;
    }

    .mobile-menu .mobile-button.primary a {
        background-color: #8CD652;
        color: #000;
        display: flex;
        text-decoration: none;
        align-items: center;
        justify-content: center;
        border-radius: .5rem;
        transition: opacity .4s;
    }

    .desktop-dropdown {
        position: absolute;
        width: 400px;
        background: #fff;
        flex-wrap: wrap;
        display: flex;
        left: 1rem;
        top: 6rem;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
        border-radius: .5rem;
        z-index: 9999;
        opacity: 0;
        transition: all .2s ease-in-out;
        pointer-events: none;
    }

    .desktop-dropdown.open {
        opacity: 1;
        pointer-events: all;
    }

    .desktop-dropdown .menu {
        flex-wrap: wrap;
        gap: 0 !important;
        width: 100%;
    }

    .desktop-dropdown .menu li {
        flex: 0 0 100%;
        padding: 0;
        margin: 0;
        position: relative;
    }

    /* Hide the checkbox input */
    .desktop-dropdown .menu li input[type="checkbox"] {
        display: none;
    }

    /* Main menu item styling */
    .desktop-dropdown .menu li>a {
        font-size: 14px !important;
        border-bottom: solid 1px #F4F4F4;
        display: block;
        padding: 1rem;
        transition: all .2s ease-in-out;
        text-decoration: none;
        color: #333;
        position: relative;
        font-weight: 500;
    }

    .desktop-dropdown .menu li>a:hover {
        background-color: #F8F9FA;
        color: #000;
    }

    /* Items with children get a wrapper for the main link and toggle */
    .desktop-dropdown .menu li.menu-item-has-children {
        display: flex;
        flex-direction: column;
        border-bottom: solid 1px #F4F4F4;
    }

    .desktop-dropdown .menu li.menu-item-has-children>.menu-item-wrapper {
        display: flex;
        align-items: center;
        position: relative;
    }

    .desktop-dropdown .menu li.menu-item-has-children>.menu-item-wrapper>a {
        flex: 1;
        border-bottom: none;
        margin: 0;
        padding: 1rem 3.5rem 1rem 1rem;
        font-weight: 500;
        color: #333;
        font-size: 14px !important;
    }

    .desktop-dropdown .menu li.menu-item-has-children>.menu-item-wrapper>a:hover {
        background-color: #F8F9FA;
        color: #000;
    }

    /* Accordion toggle button */
    .desktop-dropdown .menu li.menu-item-has-children>.menu-item-wrapper .accordion-toggle {
        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        width: 3.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all .2s ease-in-out;
        border-left: 1px solid #E9ECEF;
        background-color: #F8F9FA;
        border-radius: 0 0.5rem 0.5rem 0;
    }

    .desktop-dropdown .menu li.menu-item-has-children>.menu-item-wrapper .accordion-toggle:hover {
        background-color: #E9ECEF;
    }

    /* Arrow icon */
    .desktop-dropdown .menu li.menu-item-has-children>.menu-item-wrapper .accordion-toggle:after {
        content: '\f078';
        font-family: "Font Awesome 6 Free", sans-serif;
        font-weight: 900;
        font-size: 0.75em;
        transition: transform 0.3s ease;
        color: #666;
    }

    /* Rotate arrow when accordion is open */
    .desktop-dropdown .menu li.menu-item-has-children input[type="checkbox"]:checked+.menu-item-wrapper .accordion-toggle:after {
        transform: rotate(180deg);
        color: #333;
    }

    /* Highlight toggle when accordion is open */
    .desktop-dropdown .menu li.menu-item-has-children input[type="checkbox"]:checked+.menu-item-wrapper .accordion-toggle {
        background-color: #E9ECEF;
        border-color: #D6D9DC;
    }

    /* Sub-menu styling */
    .desktop-dropdown .menu li.menu-item-has-children .sub-menu {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease;
        list-style: none;
        padding: 0;
        margin: 0;
        background-color: #FAFBFC;
    }

    /* Show sub-menu when checkbox is checked */
    .desktop-dropdown .menu li.menu-item-has-children input[type="checkbox"]:checked~.sub-menu {
        max-height: 500px;
        /* Adjust based on your needs */
    }

    /* Sub-menu item styling */
    .desktop-dropdown .menu li.menu-item-has-children .sub-menu li {
        border-bottom: none;
    }

    .desktop-dropdown .menu li.menu-item-has-children .sub-menu li a {
        font-size: 11px !important;
        padding: 0.75rem 1rem 0.75rem 2rem;
        border-bottom: 1px solid #F0F0F0;
        background-color: #FAFBFC;
        transition: all .2s ease-in-out;
        color: #555;
        font-weight: 400;
        position: relative;
    }

    .desktop-dropdown .menu li.menu-item-has-children .sub-menu li a:before {
        content: '→';
        position: absolute;
        left: 1rem;
        color: #999;
        font-size: 11px;
        transition: all .2s ease-in-out;
    }

    .desktop-dropdown .menu li.menu-item-has-children .sub-menu li a:hover {
        background-color: #F0F4F8;
        padding-left: 2.25rem;
        color: #333;
    }

    .desktop-dropdown .menu li.menu-item-has-children .sub-menu li a:hover:before {
        color: #666;
        left: 1.25rem;
    }

    .desktop-dropdown .menu li.menu-item-has-children .sub-menu li:last-child a {
        border-bottom: none;
    }

    /* Regular menu items without children */
    .desktop-dropdown .menu li:not(.menu-item-has-children) a {
        font-size: 14px !important;
        border-bottom: solid 1px #F4F4F4;
        display: block;
        padding: 1rem;
        transition: all .2s ease-in-out;
        color: #333;
        font-weight: 500;
    }

    .desktop-dropdown .menu li:not(.menu-item-has-children) a:hover {
        background-color: #F8F9FA;
        color: #000;
    }

    .desktop-dropdown .menu li:last-of-type:not(.menu-item-has-children) a {
        border-bottom: 0;
    }

    .desktop-dropdown .menu li.menu-item-has-children:last-of-type {
        border-bottom: 0;
    }

    @media only screen and (max-width: 1400px) {
        .site-header .top .menu a { font-size: 12px; }
        #header-upper .menu-item-has-children > a,
        #header-upper .menu-item:not(.menu-item-has-children) a {
            padding: 0.75rem 0.6rem;
        }
    }

    @media only screen and (max-width: 1300px) {
        .site-header .top .hamburger {
        flex-shrink: 0; width: 30px; height: 40px; }
        .site-header .top .logo { width: auto; height: 55px; }
        .site-header .top .menu a { font-size: 11.5px; }
        .site-header .top .menu .button a { font-size: 11.5px; }
    }

    /* Was 1100px — raised so hamburger kicks in sooner */
    @media only screen and (max-width: 1250px) {
        #header-upper { display: none; }
        .button.desktop { display: none; }
        .button.mobile { display: block; }
    }

    @media only screen and (max-width: 1024px) {
        .site-header .bottom .container-xxl {
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scrollbar-width: none;
            padding: 0;
        }
        .site-header .bottom .container-xxl::-webkit-scrollbar { display: none; }
        .site-header .bottom .menu-container {
            flex-shrink: 0;
            padding: 0 1rem;
        }
        .site-header .bottom .menu {
            flex-wrap: nowrap;
            white-space: nowrap;
            gap: 1.5rem;
            padding: 0;
        }
        .site-header .bottom .menu li { flex-shrink: 0; }
    }

    @media only screen and (max-width: 576px) {
        /* overflow: hidden removed — now handled globally by overflow-x: clip on .site-header */

        /* Log In / My Account always visible on mobile */
        .site-header .top .menu.header-top-menu-buttons .button.secondary {
            display: block !important;
        }

        .site-header .top {
            border-bottom: solid 1px #F4F4F4;
        }

        .site-header .top .container-xxl {
            padding-top: 0;
            padding-bottom: 0;
        }

        .site-header .top .hamburger {
        flex-shrink: 0;
            width: 24px;
            height: 30px;
        }

        .site-header .top .logo-container .logo {
            height: 50px;
        }

        .site-header .top .menu.header-top-menu-buttons {
            margin-left: 0;
        }

        .site-header .top .menu.header-top-menu-buttons .button {
            text-align: center;
            padding: .5rem;
        }

        .site-header .top .menu.header-top-menu-buttons .button a {
            font-size: 10px;
        }

        .site-header .top .menu.header-top-menu-buttons .button.desktop {
            display: none;
        }

        .site-header .top .menu.header-top-menu-buttons .button.mobile {
            display: block;
        }
    }

    .news__card-item-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    @media only screen and (max-width: 576px) {
        .news__card-item-image {
            flex: 0 0 auto;
            width: 100%;
            height: auto;
        }
    }