.active__navbar, .search-btn:hover {
    background-color: var(--color-deep-blue);
/*    background-color:red !important;*/
}

.menu-item .menu-item-link, .primary__navbar a {
    font-family: "Gotham";
    font-size: 16px;
    font-weight: 600;
    line-height: 16.8px
}

.menu-links, .sidebar-menu-links {
    max-height: 440px;
    overflow-y: auto;
    list-style: none
}

.chv__icon_spn img, .navigate__level2, .search-btn:hover img, .sidebar-close, .sidebar__back__btn, .sidebar__link__icon img, .sm__chv__icon_spn img {
    filter: brightness(0) invert(1)
}

header {
    position: relative;
    background: #320064;
    z-index: 9999
}

    header ul {
        padding: 0 !important
    }

    header li {
        margin-bottom: 0 !important
    }

.navbar__logo {
    grid-column: 1/span 2;
    display: flex;
    align-items: center;
    padding: 0;
    margin: auto 0;
}

    .navbar__logo img {
        width: 100px;
        height: 32px
    }

@media (min-width:1020px) {
    .navbar__logo {
        grid-column: 1/3
    }

        .navbar__logo img {
            width: 170px;
            height: 40px
        }
}

.navbar__right {
    grid-column: 3/-1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    gap: 18px;
    padding-block: 24px 22px
}

@media (min-width:767.9px) {
    .navbar__right {
        grid-column: 4/-1
    }
}

.primary__navbar {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 12px
}

    .primary__navbar a {
        color: white;
        text-decoration: none;
        display: inline-flex;
        padding: 8px 24px;
        gap: 10px;
    }

        /* Remove text-decoration underline hover if you have it */
        .primary__navbar a:hover {
            text-decoration: none;
        }

        /* underline lives on the text span (not on a::after) */
        .primary__navbar a span {
            position: relative;
            display: inline-block; /* allows wrapping to 2 lines */
        }

            .primary__navbar a span::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                height: 2px;
                bottom: -6px;
                background: currentColor;
                transform: scaleX(0);
                transform-origin: left;
                transition: transform 150ms ease;
            }

        /* underline on hover/focus for ALL links (dropdown parent + dropdown items) */
        .primary__navbar a:hover span::after,
        .primary__navbar a:focus-visible span::after {
            transform: scaleX(1);
        }

    /* underline should appear when hovering the whole dropdown (even if not directly on the <a>) */
    .primary__navbar li.dropdown:hover > a span::after {
        transform: scaleX(1);
    }

.secondary__navbar, .secondary__navbar a {
    font-size: 14px;
    font-weight: 400;
    line-height: 14px
}


.active__navbar {
    border-radius: 100px;
    background-color: white;
  
}
    .active__navbar a {
        color: #320064;
        
    }
.level-title, .menu-item .menu-item-link {
    color: var(--color-black);
    font-style: normal;
    text-transform: capitalize
}

.secondary__navbar {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 20px;
    font-style: normal
}

    .secondary__navbar a {
        color: var(--color-grey);
        font-family: "Gotham";
        font-style: normal;
        text-transform: capitalize;
        text-decoration: none;
          
    }

        .content-card .content-card-heading:hover, .level-title:hover, .secondary__navbar a:hover {
            text-decoration: underline;
           
        }

.search-btn {
    background-color: var(--color-white);
    border: none;
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 50%;
    margin-left: 14px
}

#sm-navbar ul li, .card-label, .menu-item {
    border-bottom: 1px solid var(--color-grey-border)
}

/* Remove border from last dropdown item */

/* Remove border from last dropdown item */

.mega-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: var(--color-white);
    box-shadow: 0 20px 30px -10px rgba(36,36,36,.15);
    transition: opacity .3s ease-in-out;
    height: 543px;
    padding: 40px 0 16px
}

    .mega-menu.show {
        display: block;
        opacity: 1
    }

.menu-level {
    display: none;
    flex-direction: column
}

    .chv__icon_spn, .level-header, .menu-item, .menu-level.active, .menu-links {
        display: flex
    }

.mega-level1 {
    grid-column: 1/5
}

.mega-level2 {
    grid-column: 5/span 4
}

.mega-level3 {
    grid-column: 9/span 4
}

.level-header {
    align-items: center;
    gap: 12px
}

.level-title {
    text-decoration: none;
    font-family: Gotham;
    font-size: 24px;
    font-weight: 100;
    line-height: 100%;
    letter-spacing: .24px
}

.plus__close__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 19px
}

.chv__icon_spn {
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    padding: 6px;
    background-color: var(--color-deep-blue)
}

.active-path {
    font-weight: 700;
    color: var(--color-deep-blue) !important
}

.menu-links {
    flex-direction: column;
    margin: 0;
    padding: 0
}

    .menu-links li {
        padding: 0
    }

.menu-item {
    justify-content: space-between;
    align-items: center;
    transition: background-color .2s;
    cursor: pointer
}

    .menu-item .menu-item-link {
        padding: 16px 0;
        width: 100%;
        gap: 12px
    }

    .card-label, .menu-item .menu-item-ghost-page {
        color: var(--color-grey);
        font-size: 12px;
        font-weight: 400;
        line-height: 12px;
        text-transform: uppercase;
        font-family: "Gotham";
        font-style: normal;
        letter-spacing: .24px
    }

    .menu-item .menu-item-ghost-page {
        text-decoration: none;
        cursor: default;
        padding: 30px 50px 9px 0;
        width: 100%;
        gap: 12px
    }

    .menu-item:hover {
        border-bottom: 1px solid var(--color-deep-blue)
    }

    .menu-item.expanded {
        border-bottom: 2px solid var(--color-deep-blue)
    }

        .menu-item.expanded .menu-item-link {
            color: var(--color-deep-blue)
        }

        .menu-item.expanded .plus-icon {
            transform: rotate(45deg)
        }

    .menu-item.active__megalink {
        background-color: var(--color-deep-blue);
        color: var(--color-white)
    }

        .menu-item.active__megalink .menu-item-title, .menu-item.active__megalink .plus-icon {
            color: var(--color-white)
        }

.content-cards {
    grid-column: 5/span 8;
    display: grid;
    grid-template-columns: repeat(2,1fr)
}

.content-card {
    border-radius: 10px;
    padding: 42px 16px 16px;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    gap: 16px
}

.card-label {
    padding: 16px 50px 9px 0
}

.content-card .content-card-img {
    margin-bottom: 16px
}

.content-card .content-card-heading {
    color: var(--color-deep-blue);
    font-family: Gotham;
    font-size: 24px;
    font-style: normal;
    font-weight: 100;
    line-height: 30px;
    margin-bottom: 8px;
    text-decoration: none
}

.content-card .content-card-body {
    color: var(--color-black);
    font-family: "Gotham";
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height: 27px
}

#sm-navbar .menu-links a, .sidebar-menu-item .sidebar-menu-item-link {
    font-family: "Gotham";
    font-size: 16px;
    font-style: normal;
    line-height: 17.6px;
    text-transform: capitalize
}

#mainContent {
    transition: transform .3s ease-in-out
}

body.sidebar-open #mainContent {
    transform: translateX(-488px)
}

.sidebar-panel {
    position: fixed;
    top: 0;
    right: -500px;
    width: 488px;
    height: 100vh;
    background: var(--color-black);
    box-shadow: -4px 0 20px rgba(0,0,0,.1);
    z-index: 1100;
    transition: right .3s ease-in-out
}

    .sidebar-panel.open {
        right: 0
    }

.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.05);
    z-index: 1099;
    display: none
}

    .sidebar-overlay.show, .sm-menu-level.active {
        display: block
    }

.sidebar-close {
    background: 0 0;
    border: none;
    font-size: 24px;
    position: absolute;
    top: 64px;
    right: 64px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    padding: 11px;
    display: flex;
    justify-content: center
}

.sidebar-menu-item, .sidebar-title-cont {
    border-bottom: 1px solid var(--color-grey-border-secondary)
}

.sidebar-title-cont {
    display: inline-flex;
    padding: 10px 16px 13px 0;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: var(--color-white)
}

.sidebar-title-chev-right, .sm-search-btn {
    flex-shrink: 0;
    background-color: var(--color-white)
}

.sidebar-level2-title, .sidebar-title {
    color: var(--color-white);
    font-family: Gotham;
    font-size: 24px;
    font-style: normal;
    font-weight: 100;
    line-height: 24px;
    letter-spacing: .24px;
    text-transform: capitalize
}

.sidebar-title-chev-right {
    width: 28px;
    height: 28px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center
}

.sidebar-nav {
    display: flex;
    justify-content: center;
    margin-top: 148px;
    height: 100%;
    padding: 0 64px
}

.sidebar__link__icon {
    padding-right: 19px
}

    .sidebar__link__icon img {
        width: 15px;
        height: 15px
    }

.sidebar-menu-links {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    width: 100%
}

.sidebar-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .2s;
    cursor: pointer;
    margin-bottom: 0
}

    .sidebar-menu-item .sidebar-menu-item-link {
        color: var(--color-white);
        font-weight: 600;
        padding: 16px 0;
        width: 100%;
        gap: 12px
    }

    .sidebar-menu-item:hover {
        border-bottom: 1px solid var(--color-white)
    }

.sidebar__back {
    color: var(--color-white);
    padding-block: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%
}

@media (max-width:1019.9px) {
    .sidebar-panel {
        display: none
    }

    .mega-menu.show {
        display: none;
        opacity: 0
    }

    .plus__close__icon {
        padding-right: 0 !important
    }
}

.sm-md-navbar {
    padding-top: 16px;
    padding-bottom: 16px
}

.hidden, .navbar.grid.container--xxl.px-responsive, .sm-menu-level {
    display: none
}

.sm-md-navbar.grid.container--xxl.px-responsive {
    display: grid
}

/*@media (min-width:1019.9px) {
    .navbar__right {
        grid-column: 3/-1
    }

    .navbar.grid.container--xxl.px-responsive {
        display: grid
    }

    .sm-md-navbar.grid.container--xxl.px-responsive {
        display: none
    }

    .fadeable.is-visible {
        opacity: 0;
        display: none
    }
}*/
@media (min-width:1200px) {
    .navbar.grid.container--xxl.px-responsive {
        display: grid;
    }

    .sm-md-navbar.grid.container--xxl.px-responsive {
        display: none;
    }
    .fadeable.is-visible {
        opacity: 0;
        display: none
    }
}

@media screen and (max-width:1019.9px) {
    .navbar__logo {
        grid-column: 1/span 2
    }

        .navbar__logo img {
            width: 99.817px;
            height: 32px;
            flex-shrink: 0;
        }
}

.sm-search-btn {
    border: none;
    cursor: pointer;
    display: flex;
    border-radius: 50%
}

.btn-menu {
    background-color:transparent;
    filter:invert();
    border: none;
    cursor: pointer;
    display: flex;
    flex-shrink: 0
}

.search-menu {
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 16px;
    grid-column: 3/-1
}

#sm-navbar a {
    text-decoration: none
}

#sm-navbar .menu-links a {
    color: var(--color-black);
    font-weight: 500;
    padding: 0
}

.sm-navmenu {
    background: var(--color-white);
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000;
    padding-block: 16px 100px;
    overflow-y: auto
}

#sm-navbar ul, #sm-navbar ul li {
    margin: 0;
    padding: 0;
    list-style: none;
    cursor: pointer
}

    #sm-navbar ul li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 16px;
/*        padding: 16px*/
    }

.menu-item:has(.menu-item-ghost-page) {
    padding: 0 !important
}

    .menu-item:has(.menu-item-ghost-page):hover {
        border-color: var(--color-grey-border)
    }

#sm-navbar .menu-item .menu-item-ghost-page {
    padding: 30px 50px 9px 16px
}

#sm-navbar ul li:hover, .sm__level__header:hover, .sm__navbar__back__cont:hover {
    border-color: var(--color-deep-blue)
}

.sm__level__header, .sm__navbar__back__cont {
    border-bottom: 1px solid var(--color-grey-border);
/*    border-bottom:1px solid red;*/
    display: flex
}

.sm__level__header {
    justify-content: space-between;
    align-items: center;
    padding: 0 16px 16px
}

    .sm__level__header .sm__level__title {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        line-clamp: 1;
        -webkit-line-clamp: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        color: var(--color-black);
        font: 100 22px/22px Gotham,serif;
        letter-spacing: .22px
    }

.sm__chv__icon_spn {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    padding: 4px;
    border-radius: 50%;
    background-color: var(--color-deep-blue);
    display: flex;
    justify-content: center;
    align-items: center
}

.main__container {
    grid-column: 1/-1
}

.sm__primary__navbar__level0 a {
    color: var(--color-black);
    font: 700 16px/17.6px "Gotham",sans-serif;
    text-transform: capitalize;
        
}

.sm__navbar__back__cont, .sm__secondary__navbar__art ul li a {
    font-family: "Gotham";
    font-size: 16px;
    font-style: normal;
    font-weight: 300;
    line-height: 17.6px;
    text-transform: capitalize
}

.sm__secondary__navbar ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px
}

.sm__secondary__navbar__art ul li a {
    color: var(--color-black)
}

.sm-secondary-menu-links li a {
    font-weight: 500 !important
}

.sm__navbar__back__cont {
    padding: 16px 0 16px 16px;
    gap: 4px;
    align-items: center;
    color: var(--color-deep-blue);
    cursor: pointer
}

.fadeable {
    opacity: 0;
    transition: opacity .3s cubic-bezier(.4, 0, .2, 1)
}

    .fadeable.is-visible {
        opacity: 1
    }

@media (prefers-reduced-motion:reduce) {
    .fadeable {
        transition: none !important
    }
}

@media screen and (max-width:767.9px) {
    header .px-responsive:not(.sm-navmenu) {
        padding-inline: 16px
    }

    .sm-navmenu {
        padding-inline: 0px
    }
}

body:has(.sm-navmenu.is-visible), html:has(.sm-navmenu.is-visible) {
    overflow-y: hidden
}

body {
    scrollbar-gutter: stable
}

.sm-navmenu.is-visible {
    overscroll-behavior: contain
}
/** 
ol li:last-child, ul li:last-child {

*/