@media only screen and (min-width: 980px) {
    :root {
        --side-padding: clamp(2rem, -15rem + 21.25vw, 6.25rem);
        --vertical-padding: clamp(2.813rem, -1.848rem + 7.609vw, 5rem);

    }
}

#app {
    --section-font-size: 20px;
    --section-title-size: 58px;

    @media (max-width: 1499px) {
        --section-font-size: 18px;
        --section-title-size: 50px;
    }

    @media (max-width: 1199px) {
        --section-font-size: 16px;
        --section-title-size: 42px;
    }

    @media (max-width: 959px) {
        --section-title-size: 36px;
    }
}

#app .header-slot-container h2 {
    font-weight: 700;
    font-size: clamp(2rem, 0.003rem + 3.261vw, 3.875rem);
    line-height: 1.2;
    text-transform: none;
}


#app {
    .see-all-container {
        .light-header-accent {
            display: none;
        }
    }

    .header-slot-container {
        &:after {
            display: none;
        }
    }
}


/* Custom Header */
/* custom header and menu on mobile */



@media only screen and (max-width: 979px) {
    #view-header .mobile-header {
        padding: 20px;
        justify-content: flex-start;
        box-sizing: border-box;
        height: auto;
    }

    .mobile-header .main-content .logo {
        margin-inline: 0;
    }

    #view-header .mobile-header .left-icon {
        left: auto;
        right: 20px;
    }

    #view-header .mobile-header .left-icon #menubutton {
        margin-right: 0;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background-color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease-in-out;
    }

    .mobile-header .main-content {
        max-width: calc(100% - 55px);
    }

    #view-header .mobile-header .hamburger {
        margin: 0;
        display: block;
        fill: var(--primary-color-contrast);
        width: 24px;
        height: 13px;
        transition: all 0.4s ease-in-out;
    }

    #view-header .school-info {
        padding-bottom: 0;
    }

    #view-header .school-info .org-name {
        padding-bottom: 0;
    }

    .mobile-menu-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .mobile-menu-wrapper>div {
        width: 100%;
        box-sizing: border-box;
    }

    #view-header .mobile-header.shrink {
        padding-block: 5px;
    }

    #view-header .mobile-header.shrink .left-icon #menubutton {
        width: 40px;
        height: 40px;
    }

    .search-translate-buttons .sr-only {
        color: var(--mobile-menu-text-color);
        clip: auto;
        clip-path: unset;
        height: auto;
        width: auto;
        margin: 0;
        position: relative;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0.5px;
        text-transform: none;
        font-family: var(--font-family, Helvetica);
    }

    #view-header .mobile-header.shrink .menu-mobile {
        top: 65px;
    }

    /* explore dropdown */
    .m4--drawer-element.mobile-element:has(#explore-header) {
        order: 2;
        padding-top: 45px;
    }

    .m4--drawer-element.mobile-element #explore-header {
        text-transform: uppercase;
    }

    .m4--drawer-element.mobile-element #explore-header .m4--drawer-element-title-icon {
        display: none;
    }

    .m4--drawer-element.mobile-element #explore-header-collapsible {
        display: grid !important;
        width: 100%;
        grid-template-columns: 1fr 1fr;
        column-gap: 10px;
    }

    #explore-header-collapsible .m4--drawer-element {
        border-top: solid 1px rgba(255, 255, 255, 0.2);
        min-width: unset;
    }

    #explore-header-collapsible .m4--drawer-element:nth-child(1),
    #explore-header-collapsible .m4--drawer-element:nth-child(2) {
        border-top: 0;
    }

    .mobile-element .m4--menu-item-focusable .item-icon {
        min-width: 32px;
    }

    /* end explore dropdown */

    /* first two dropdowns */
    .mobile-menu-wrapper .search-translate-buttons {
        order: -3;
    }

    .m4--drawer-element.mobile-element:has(#explore-header)+div {
        order: -2;
    }

    .m4--drawer-element.mobile-element:has(#explore-header)+div+div {
        order: -1;
    }

    .m4--drawer-element.mobile-element:has(#explore-header)+div,
    .m4--drawer-element.mobile-element:has(#explore-header)+div+div {
        background-color: var(--secondary-color);
        color: var(--secondary-color-contrast);
        border: 0;
        border-radius: 4px;
        max-width: calc(50% - 5px);
        padding-inline: 10px;
        padding-block: 5px;
        margin-bottom: 25px;
        position: relative;
        min-width: unset;

        &:has(.m4--drawer-children.show-children) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }

        & .m4--drawer-element.child-element {
            min-width: unset;
        }

        & svg,
        & path {
            fill: var(--secondary-color-contrast);
        }

        .m4--drawer-element.mobile-element.new-mobile-header {
            color: var(--secondary-color-contrast);
            border: 0;
        }

        .m4--drawer-children {
            background-color: #fff;
            border-radius: 0 0 4px 4px;

            & .m4--drawer-children.show-children {
                background-color: #f1f1f1;
                padding: 5px;
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                gap: 10px;
                margin-bottom: 10px;
            }
        }

        &>.m4--drawer-children {
            position: absolute;
            top: 100%;
            z-index: 2;
            left: 0;
            width: 100%;
        }
    }

    .m4--drawer-element.mobile-element:has(#schools-header) {
        border-top: 0;
    }

    .dropdown-wrapper.language-dropdown {
        z-index: 5;
    }

    /* end first two dropdowns */

    #cms-header:has(#customSchoolsDropdown) .mobile-header .left-icon {
        right: 20px;
        left: auto;
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
    }

    #view-header .dynamicLink {
        margin-left: auto;
    }

    #view-header .mobile-header {
        align-items: center;
    }

    #view-header .mobile-header.menu-open {

        & #schoolsbutton,
        & .dynamicLink {
            display: none !important;
        }

        .left-icon {
            right: 20px !important;
        }
    }

    #cms-header:has(#customSchoolsDropdown) .mobile-header #schoolsbutton {
        bottom: auto;
        top: 50%;
        transform: translateY(-50%);
        right: 80px;

        & .button-action-content {
            display: flex;
            align-items: center;
            gap: 3px;
        }

        & svg rect {
            opacity: 0;
        }

        & svg path {
            stroke: var(--nav-color) !important;
        }
    }

    #cms-header:has(#customSchoolsDropdown) .mobile-header {
        padding-bottom: 20px;
    }

    #view-header .mobile-header.shrink {
        padding-block: 10px !important;
    }

    #view-header .mobile-header.shrink .left-icon #menubutton {
        width: 54px;
        height: 54px;
    }
}

#m2 .menu-container .content .generated-links .col {
    border-right-color: var(--secondary-color) !important;
}

@media only screen and (min-width: 1601px) {
    #view-header #m2 .menu-container .content .generated-links .col {
        width: 18%;
    }

    #view-header #m2 .menu-container .content .generated-links .col:nth-of-type(4) {
        border-right: 1px solid;
    }

    #view-header #m2 .menu-container .content .generated-links .col:nth-of-type(5) {
        border-right: none;
    }

    #view-header #m2 .menu-container .content .generated-links {
        padding-left: 60px;
        margin-right: 10px;
    }
}

/* custom header on desktop*/
@media (min-width: 980px) {

    /* translarent header */
    #app {
        /* --header-height: 106px; */
    }

    #app:has(#home) .header-bar-wrapper:not(.sticky) #h1 .header-container {
        background: transparent !important;
    }

    .languages svg rect,
    .schools svg rect {
        display: none;
    }

    #app:has(#home) .header-bar-wrapper:not(.sticky) #h1 {
        background: linear-gradient(to bottom,
                var(--primary-color) 0%,
                rgba(0, 0, 0, 0) 100%);
        box-shadow: unset;
    }

    #app:has(#home) .header-bar-wrapper:not(.sticky) #h1::after {
        position: absolute;
        height: 60%;
        left: 0;
        top: 0;
        width: 100%;
        background: linear-gradient(to bottom,
                var(--primary-color) 0%,
                rgba(0, 0, 0, 0) 100%);
        content: "";
        z-index: -1;
    }

    #app:has(#home) .header-bar-wrapper:not(.sticky) .logo {
        margin-top: 10px;
    }

    #view-header .logo {
        height: 90px;
        transition: all 0.35s ease-in-out;
    }

    #view-header .header-bar-wrapper.sticky .logo {
        height: 45px;
    }

    #app:has(#home) #cms-gallery {
        margin-top: calc(-1 * var(--header-height));
    }

    /* end transparent header */
    #cms-header #h1 #menubutton .button-action-content,
    #cms-header .explore-menu-container {
        display: flex;
        align-items: center;
    }

    #cms-header #h1 #menubutton svg {
        width: 35px;
        height: 26px;
        margin: 0;
    }

    #cms-header #h1 #menubutton svg rect {
        fill: transparent;
    }

    #cms-header #h1 #schoolsbutton {
        margin-right: 20px;
    }

    #cms-header #h1 #menubutton .menu-field {
        padding-left: 0;
    }

    #cms-header #h1 .right {
        background-color: var(--primary-color-contrast);
        color: var(--primary-color);
        padding: 20px 30px;
        border-radius: 20px;
        margin-right: 24px;

        .right-left-menu {
            align-items: center;
        }

        .menu-field {
            color: var(--primary-color) !important;
        }

        .button-action-content svg,
        .button-action-content svg path {
            fill: var(--primary-color);
        }

        #menubutton {
            margin-right: 10px;
        }
    }

    #cms-header .button-action.search {
        margin-right: 0;
    }

    #cms-header .left .slogan {
        font-style: italic;
    }
}

@media only screen and (min-width: 1023px) {
    #app {
        /* --header-height: 96px; */
    }
}

@media only screen and (min-width: 1280px) {
    #app {
        /* --header-height: 112px; */
    }
}

@media only screen and (min-width: 1600px) {
    #cms-header #h1 .right {
        margin-right: 40px;
    }
}

@media only screen and (min-width: 1920px) {
    #cms-header #h1 .right {
        margin-right: 77px;
    }
}

@media (max-width: 960px) {


    #view-header #h1 #searchbutton {
        margin-left: unset;
    }
}


/* Mobile Header Fixes */
@media (max-width: 600px) {
    #view-header #cms-header #h1 {
        .widget-login-dropdown.header-login-dropdown .login-selector {
            border: none;
            letter-spacing: 1px;
            padding: 0;
            margin-left: 0;
            margin-right: 0;
        }

        .header-container {
            padding-inline: 8px;
        }

        .explore-menu-container,
        .schools-menu-container {
            max-width: fit-content;
        }

        .left .logo {
            margin-right: auto;
        }

        .right {
            gap: 10px;
            padding-inline: 0;
            justify-content: space-evenly;

            .right-left-menu {
                flex-wrap: nowrap;
                padding-right: 8px;

                .schools-menu-container {
                    margin-top: 0;
                }
            }
        }

        .right-left-menu,
        .right-right-menu {
            width: auto;
            gap: 16px;
        }

        .right-left-menu {
            padding-right: 0;
        }

        .right-right-menu {
            gap: 18px;
        }

        #searchbutton {
            /* margin-left: 6px; */

            svg {
                margin-top: 2px;
                width: 23px;
                height: 23px;
            }
        }

        #languagebutton .menu-field {
            display: flex;
            position: relative;
            gap: 0;
            align-items: center;
            font-size: 0;
            width: fit-content;

            &::before {
                /* position: absolute; */
                /* left: 0; */
            }
        }

        .header-container {

            #menubutton {
                .menu-field {
                    display: none;
                }
            }

            .left {
                text-align: center;

                .logo {
                    margin-left: auto;
                    margin-right: auto;
                }

                .school-info {
                    margin-bottom: 20px;
                }
            }

            .right {
                .right-left-menu {
                    width: auto;
                }

                .right-right-menu {
                    width: 100%;
                    display: flex;
                }
            }
        }
    }
}

/* end */

#view-header #languagebutton .menu-field {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 0;

    &::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background-color: var(--nav-color);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg id='Layer_1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' data-name='Layer 1'%3E%3Cpath d='m5.501 15c-.256-.02-.513-.092-.708-.293l-1.893-1.85c-.197-.193-.201-.509-.008-.707.193-.197.51-.201.707-.008l1.4 1.369v-4.011c0-.276.224-.5.5-.5s.5.224.5.5v4.006l1.4-1.363c.198-.193.515-.189.707.008.193.198.189.514-.008.707l-1.896 1.854c-.192.192-.447.289-.702.289zm13.499-4.511 1.4 1.369c.097.095.224.143.35.143.13 0 .26-.05.357-.15.193-.198.189-.514-.008-.707l-1.893-1.85c-.189-.189-.435-.282-.683-.288-.261-.004-.529.086-.727.284l-1.896 1.854c-.197.193-.201.509-.008.707.192.198.51.202.707.008l1.4-1.363v4.006c0 .276.224.5.5.5s.5-.224.5-.5v-4.011zm-14.5 5.511c-.276 0-.5.224-.5.5v3h-2v-3c0-.276-.224-.5-.5-.5s-.5.224-.5.5v7c0 .276.224.5.5.5s.5-.224.5-.5v-3h2v3c0 .276.224.5.5.5s.5-.224.5-.5v-7c0-.276-.224-.5-.5-.5zm-2-8c.276 0 .5-.224.5-.5v-3h2v3c0 .276.224.5.5.5s.5-.224.5-.5v-7c0-.276-.224-.5-.5-.5s-.5.224-.5.5v3h-2v-3c0-.276-.224-.5-.5-.5s-.5.224-.5.5v7c0 .276.224.5.5.5zm6.5 0c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2s2 .897 2 2v4c0 1.103-.897 2-2 2zm1-6c0-.551-.449-1-1-1s-1 .449-1 1v4c0 .551.449 1 1 1s1-.449 1-1zm13 16v4c0 1.103-.897 2-2 2s-2-.897-2-2v-4c0-1.103.897-2 2-2s2 .897 2 2zm-1 0c0-.552-.449-1-1-1s-1 .448-1 1v4c0 .552.449 1 1 1s1-.448 1-1zm-6-10.5c0-.276-.224-.5-.5-.5h-2v-6.5c0-.276-.224-.5-.5-.5s-.5.224-.5.5v6.5c0 .551.449 1 1 1h2c.276 0 .5-.224.5-.5zm1.5 15.5h-2v-6.5c0-.276-.224-.5-.5-.5s-.5.224-.5.5v6.5c0 .552.449 1 1 1h2c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-4.5 0h-2v-6.5c0-.276-.224-.5-.5-.5s-.5.224-.5.5v6.5c0 .552.449 1 1 1h2c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-4.5-6c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-1.5c-.551 0-1 .448-1 1v6c0 .552.449 1 1 1h1.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-1.5v-2.5h1.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-1.5v-2.5zm8.51-9.598 1.286-6.317c.117-.595.611-1.087 1.213-1.085.617.003 1.089.471 1.221 1.116l1.287 6.3c.062.303-.174.585-.487.584-.234-.001-.435-.164-.482-.389l-.335-1.611h-2.388l-.326 1.594c-.047.228-.251.392-.487.391h-.019c-.311-.002-.544-.283-.483-.583zm1.519-2.402h1.976l-.767-3.687c-.081-.43-.375-.376-.448-.032l-.76 3.719z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg id='Layer_1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' data-name='Layer 1'%3E%3Cpath d='m5.501 15c-.256-.02-.513-.092-.708-.293l-1.893-1.85c-.197-.193-.201-.509-.008-.707.193-.197.51-.201.707-.008l1.4 1.369v-4.011c0-.276.224-.5.5-.5s.5.224.5.5v4.006l1.4-1.363c.198-.193.515-.189.707.008.193.198.189.514-.008.707l-1.896 1.854c-.192.192-.447.289-.702.289zm13.499-4.511 1.4 1.369c.097.095.224.143.35.143.13 0 .26-.05.357-.15.193-.198.189-.514-.008-.707l-1.893-1.85c-.189-.189-.435-.282-.683-.288-.261-.004-.529.086-.727.284l-1.896 1.854c-.197.193-.201.509-.008.707.192.198.51.202.707.008l1.4-1.363v4.006c0 .276.224.5.5.5s.5-.224.5-.5v-4.011zm-14.5 5.511c-.276 0-.5.224-.5.5v3h-2v-3c0-.276-.224-.5-.5-.5s-.5.224-.5.5v7c0 .276.224.5.5.5s.5-.224.5-.5v-3h2v3c0 .276.224.5.5.5s.5-.224.5-.5v-7c0-.276-.224-.5-.5-.5zm-2-8c.276 0 .5-.224.5-.5v-3h2v3c0 .276.224.5.5.5s.5-.224.5-.5v-7c0-.276-.224-.5-.5-.5s-.5.224-.5.5v3h-2v-3c0-.276-.224-.5-.5-.5s-.5.224-.5.5v7c0 .276.224.5.5.5zm6.5 0c-1.103 0-2-.897-2-2v-4c0-1.103.897-2 2-2s2 .897 2 2v4c0 1.103-.897 2-2 2zm1-6c0-.551-.449-1-1-1s-1 .449-1 1v4c0 .551.449 1 1 1s1-.449 1-1zm13 16v4c0 1.103-.897 2-2 2s-2-.897-2-2v-4c0-1.103.897-2 2-2s2 .897 2 2zm-1 0c0-.552-.449-1-1-1s-1 .448-1 1v4c0 .552.449 1 1 1s1-.448 1-1zm-6-10.5c0-.276-.224-.5-.5-.5h-2v-6.5c0-.276-.224-.5-.5-.5s-.5.224-.5.5v6.5c0 .551.449 1 1 1h2c.276 0 .5-.224.5-.5zm1.5 15.5h-2v-6.5c0-.276-.224-.5-.5-.5s-.5.224-.5.5v6.5c0 .552.449 1 1 1h2c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-4.5 0h-2v-6.5c0-.276-.224-.5-.5-.5s-.5.224-.5.5v6.5c0 .552.449 1 1 1h2c.276 0 .5-.224.5-.5s-.224-.5-.5-.5zm-4.5-6c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-1.5c-.551 0-1 .448-1 1v6c0 .552.449 1 1 1h1.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-1.5v-2.5h1.5c.276 0 .5-.224.5-.5s-.224-.5-.5-.5h-1.5v-2.5zm8.51-9.598 1.286-6.317c.117-.595.611-1.087 1.213-1.085.617.003 1.089.471 1.221 1.116l1.287 6.3c.062.303-.174.585-.487.584-.234-.001-.435-.164-.482-.389l-.335-1.611h-2.388l-.326 1.594c-.047.228-.251.392-.487.391h-.019c-.311-.002-.544-.283-.483-.583zm1.519-2.402h1.976l-.767-3.687c-.081-.43-.375-.376-.448-.032l-.76 3.719z'/%3E%3C/svg%3E");
    }

    &+svg {
        display: none;
    }
}

#view-header #searchbutton {
    &::before {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background-color: var(--nav-color);
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24' width='512' height='512'%3E%3Cpath d='M23.707,22.293l-5.969-5.969a10.016,10.016,0,1,0-1.414,1.414l5.969,5.969a1,1,0,0,0,1.414-1.414ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z'/%3E%3C/svg%3E%0A");
        mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Outline' viewBox='0 0 24 24' width='512' height='512'%3E%3Cpath d='M23.707,22.293l-5.969-5.969a10.016,10.016,0,1,0-1.414,1.414l5.969,5.969a1,1,0,0,0,1.414-1.414ZM10,18a8,8,0,1,1,8-8A8.009,8.009,0,0,1,10,18Z'/%3E%3C/svg%3E%0A");
    }

    & svg {
        display: none;
    }
}

@media only screen and (min-width: 980px) {
    #view-header #languagebutton {
        margin-right: unset !important;

        .menu-field::before {
            background-color: var(--primary-color);
        }
    }

    #view-header #searchbutton::before {
        background-color: var(--primary-color);
    }
}

@media only screen and (max-width: 960px) {
    #view-header #schoolsbutton .menu-field {
        display: flex;
        /* gap: 4px; */
        align-items: center;
        font-size: 0;

        &::before {
            content: "";
            display: block;
            width: 20px;
            height: 20px;
            background-color: var(--nav-color);
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m21.5,6h-7.43l-1.346-1.303,4.394-2.197L12.118,0h-1.118v4.965l-1.07,1.035H2.5c-1.379,0-2.5,1.122-2.5,2.5v15.5h24v-15.5c0-1.378-1.121-2.5-2.5-2.5Zm0,1c.827,0,1.5.673,1.5,1.5v1.5h-4.798l-3.099-3h6.397ZM12,1.059l2.882,1.441-2.882,1.441V1.059ZM2.5,7h6.397l-3.099,3H1v-1.5c0-.827.673-1.5,1.5-1.5Zm11.5,16h-4v-6c0-1.103.897-2,2-2s2,.897,2,2v6Zm1,0v-6c0-1.654-1.346-3-3-3s-3,1.346-3,3v6H1v-12h5.202l5.798-5.612,5.798,5.612h5.202v12h-8ZM4,15h3v1h-3v-1Zm0,4h3v1h-3v-1Zm13-4h3v1h-3v-1Zm0,4h3v1h-3v-1Zm-4-9c0,.552-.448,1-1,1s-1-.448-1-1,.448-1,1-1,1,.448,1,1Z'/%3E%3C/svg%3E%0A");
            mask-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' id='Layer_1' data-name='Layer 1' viewBox='0 0 24 24'%3E%3Cpath d='m21.5,6h-7.43l-1.346-1.303,4.394-2.197L12.118,0h-1.118v4.965l-1.07,1.035H2.5c-1.379,0-2.5,1.122-2.5,2.5v15.5h24v-15.5c0-1.378-1.121-2.5-2.5-2.5Zm0,1c.827,0,1.5.673,1.5,1.5v1.5h-4.798l-3.099-3h6.397ZM12,1.059l2.882,1.441-2.882,1.441V1.059ZM2.5,7h6.397l-3.099,3H1v-1.5c0-.827.673-1.5,1.5-1.5Zm11.5,16h-4v-6c0-1.103.897-2,2-2s2,.897,2,2v6Zm1,0v-6c0-1.654-1.346-3-3-3s-3,1.346-3,3v6H1v-12h5.202l5.798-5.612,5.798,5.612h5.202v12h-8ZM4,15h3v1h-3v-1Zm0,4h3v1h-3v-1Zm13-4h3v1h-3v-1Zm0,4h3v1h-3v-1Zm-4-9c0,.552-.448,1-1,1s-1-.448-1-1,.448-1,1-1,1,.448,1,1Z'/%3E%3C/svg%3E%0A");
        }

        &+svg {
            display: none;
        }
    }
}

/* END Custom Header */


/* custom gallery */
#cms-gallery .slide .position button {
    border-radius: 50%;
    width: 12px;
    height: 12px;
    cursor: pointer;
    margin-inline: 5px;
}

#cms-gallery .button-action-content svg,
#cms-gallery .button-action-content svg path:first-child,
#cms-gallery .button-action-content svg rect {
    stroke: transparent;
    fill: transparent;
    background-color: transparent !important;
}

#cms-gallery .gallery-text .title,
#cms-gallery .gallery-text p,
#cms-gallery .gallery-text p a {
    color: #fff;
}

#cms-gallery .gallery-text .title,
#cms-gallery .text h1 {
    font-size: clamp(2.5rem, -3.5rem + 7.5vw, 4rem);
    /* 64>40, 1600>1280 */
    line-height: 1.1;
    font-weight: 900;
    text-shadow: 0px 0px 10px #000000a9;
    margin-bottom: 15px;
}

#cms-gallery .text h2,
#cms-gallery .text h3 {
    text-shadow: 0px 0px 10px #000000a9;

    &,
    & span {
        font-weight: 700;
    }
}

#cms-gallery p {
    font-size: clamp(1.125rem, 0.592rem + 0.87vw, 1.375rem);
    line-height: 1.3;
    font-weight: 400;
    margin-bottom: 30px;

    &:last-child {
        margin-bottom: 0;
    }
}

#home .gallery-text-arrows {
    display: none;
}

#view-theme .gallery-text-wrapper {
    flex-direction: column;
    gap: 20px;
}

#cms-gallery .gallery-text-arrows {
    display: block !important;
    position: relative;
    z-index: 1;
    padding-inline: var(--side-margin);
    padding-bottom: 30px;
    padding-top: 60px;
    box-sizing: border-box;
    width: 100%;
    background: var(--gradient-color) !important;
}

.video-wrapper:has(.gallery-text-arrows) {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#cms-gallery label.only-in-cms {
    display: none !important;
}

#cms-gallery .gallery-text-arrows .swiper-slide {
    padding-bottom: 50px;
}

.duval-sandbox .dynamicLink {
    display: none;
}

.gallery-arrows-buttons {
    position: absolute;
    bottom: 15px;
    left: var(--side-margin);
    display: flex;
    align-items: center;
    gap: 10px;
}

.gallery-swiper-button-prev,
.gallery-swiper-button-next {
    text-indent: -999px;
    font-size: 0;
    overflow: hidden;
    width: 30px;
    height: 30px;
    position: relative;
    inset: 0;
    margin: 0;
}

.gallery-swiper-button-prev::after {
    content: "";
    width: 100%;
    height: 100%;
    margin: auto;
    background: var(--svg-arrow-right-white);
    transform: rotate(180deg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.gallery-swiper-button-next::after {
    content: "";
    width: 100%;
    height: 100%;
    margin: auto;
    background: var(--svg-arrow-right-white);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

#cms-gallery .gallery-pagination {
    width: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    max-width: calc(100vw - 165px);
}

.gallery-pagination span {
    cursor: pointer;
    width: 14px;
    height: 14px;
    background-color: #fff;
    opacity: 1;
    display: block;
    margin: 0;
}

.gallery-pagination span.swiper-pagination-bullet-active {
    background-color: var(--secondary-color);
}

#cms-gallery .info .description {
    padding-bottom: 30px;
}

#cms-gallery .description p a {
    background-color: color-mix(in srgb, var(--primary-color), #fff 80%);
    color: var(--primary-color);
    text-decoration: none;
    padding: 15px 30px;
    border-radius: 8px;
    display: inline-flex;
    gap: 2px;
    align-items: center;
    font-weight: 700;
    font-size: 18px;
    text-shadow: unset;
    text-transform: uppercase;
    margin-top: 5px;
    margin-bottom: 5px;
}

#cms-gallery .text .title {
    order: 2;
}

#cms-gallery .text .description {
    order: 1;
}

#cms-gallery .description p:last-child:has(a) {
    text-shadow: unset;
}

#cms-gallery .description p:last-child a:hover,
#cms-gallery .description p:last-child a:focus {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

#cms-gallery .play.button-action,
#cms-gallery .pause.button-action {
    position: relative;
    isolation: isolate;

    & svg {
        margin-left: 2px;
        margin-top: 5px;
    }
}

#cms-gallery .play.button-action::after,
#cms-gallery .pause.button-action::after {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    content: close-quote;
    width: 33px;
    aspect-ratio: 1/1;
    border: 2px solid #fff;
    transform: rotate(45deg) translateX(11px);
    transform-origin: center center;
    box-sizing: border-box;
}

#cms-gallery .slide {
    --image-height: 50.241vw;
}

#cms-gallery {
    --side-margin: 24px;
}

#cms-gallery .slide,
#cms-gallery .image,
#cms-gallery .image-wrapper,
#cms-gallery .responsive-image img,
#cms-gallery .video-wrapper {
    height: auto;
    min-height: var(--image-height);
}

#cms-gallery .video {
    height: 100%;
    object-position: top center;
}

#cms-gallery .info,
#cms-gallery .info .gradient {
    padding-inline: 77px;
    box-sizing: border-box;
}

@media only screen and (max-width: 759px) {
    #cms-gallery .info {
        padding-inline: 20px;

        .gradient {
            padding-inline: 0;
        }
    }
}

#cms-gallery .arrows {
    margin-bottom: 20px;
    right: var(--side-margin);
}

#cms-gallery .info .title {
    margin-bottom: 24px;
    display: block;
}

#cms-gallery .info .title,
#cms-gallery .info .description {
    margin-inline: 0;
    text-align: left;
}

#cms-gallery .slide .position {
    margin-left: auto;
    margin-bottom: 0;
    transform: translateY(10px);
    margin-top: 0;
    z-index: 2;

    @media only screen and (max-width: 1279px) {
        transform: none;
    }
}

#cms-gallery .navigation {
    height: 0;
    overflow: visible;

    & button {
        transform: translateY(-100%);
    }
}

.title-on-image {
    display: none !important;
}

#cms-gallery .title,
#cms-gallery .description {
    margin-right: 0;
    margin-left: var(--side-margin);
}

#cms-gallery .gallery-text .title,
#cms-gallery .gallery-text .description {
    margin-inline: 0;
}

#g2 {

    /* --gradient-color: linear-gradient(0deg, color-mix(in srgb, var(--primary-color), #000 30%), rgba(255, 255, 255, 0) 100%); */
    --gradient-color: linear-gradient(0deg, var(--primary-color), rgba(255, 255, 255, 0) 100%);
    position: relative;
    z-index: 1;
}

@media only screen and (min-width: 760px) {

    #cms-gallery .info .gradient,
    #cms-gallery .text {
        padding-right: 10%;
        padding-top: 40px;
        padding-bottom: 40px;
        left: 0;
        box-sizing: border-box;
        background: var(--gradient-color) !important;
        position: absolute;
        bottom: 0;
        z-index: 1;
        width: 100%;
        transform: none;
    }
}

@media only screen and (min-width: 1080px) {

    #cms-gallery .info .gradient,
    #cms-gallery .text {
        padding-right: 40%;
        padding-bottom: 110px;
    }
}

@media only screen and (max-width: 600px) {
    #cms-gallery .text {
        box-sizing: border-box;
        padding: 20px;

        .title,
        .description {
            margin-inline: 0;
        }

        .title h2 {
            font-size: 20px;
        }
    }
}

#cms-gallery .play.button-action,
#cms-gallery .pause.button-action {
    bottom: 15px;
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    right: var(--side-margin);
    width: 45px;
    height: 45px;

    @media only screen and (max-width: 759px) {
        bottom: 55px;
    }
}

@media only screen and (max-width: 600px) {

    #cms-gallery .play.button-action,
    #cms-gallery .pause.button-action {
        width: 35px;
        height: 35px;
        bottom: 15px;
    }

    #cms-gallery .navigation-small .play.button-action,
    #cms-gallery .navigation-small .pause.button-action {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
        bottom: 0;
    }

    #cms-gallery .play.button-action::after,
    #cms-gallery .pause.button-action::after {
        transform: rotate(45deg) translateX(4px);
    }
}

#cms-gallery .info .description {
    margin-bottom: 30px;
}

@media only screen and (min-width: 1080px) {
    #cms-gallery .gallery-text-arrows {
        padding-right: 40%;
        padding-bottom: 60px;
        padding-top: 40px;
    }

    .gallery-arrows-buttons {
        bottom: 140px;
        left: auto;
        right: var(--side-margin);
    }

    #cms-gallery .play.button-action,
    #cms-gallery .pause.button-action {
        bottom: 50px;
        left: var(--side-margin);
        right: auto;
    }
}

@media only screen and (min-width: 1600px) {
    #cms-gallery .slide .position button {
        width: 15px;
        height: 15px;
    }

    #cms-gallery {
        --side-margin: 40px;
    }
}

@media only screen and (min-width: 1920px) {
    #cms-gallery {
        --side-margin: 77px;
    }
}

@media only screen and (max-width: 500px) {
    #cms-gallery {
        --side-margin: 15px;
    }

    #cms-gallery .gallery-text .title,
    image- #cms-gallery .title h1 {
        font-size: 35px;
    }
}

@media only screen and (max-width: 759px) {
    #cms-gallery .slide {
        position: relative;
        isolation: isolate;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        min-height: var(--image-height);
        padding-top: 20vw;
        box-sizing: border-box;
    }

    #home #cms-gallery .image-wrapper {
        height: auto;
        min-height: 0;
        overflow: visible;
        position: static;
    }

    #cms-gallery .image-wrapper .img-slider,
    #cms-gallery .image-wrapper .video-wrapper {
        position: absolute;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: var(--image-height);

        img {
            height: 100%;
            width: 100%;
            object-fit: cover;
        }
    }

    #cms-gallery .info .gradient,
    #cms-gallery .text {
        padding-right: 25px;
        padding-top: 30px;
        padding-bottom: 40px;
        left: 0;
        box-sizing: border-box;
        background: var(--gradient-color) !important;
        position: relative;
        bottom: 0;
        z-index: 1;
        width: 100%;
        transform: none;
        height: auto;
        margin-top: auto;
        justify-content: flex-end;
    }

    #cms-gallery .description p:last-child a {
        padding: 10px 20px;
        font-size: 16px;
    }

    #cms-gallery .left-arrow.button-action,
    #cms-gallery .right-arrow.button-action {
        transform: none;
        top: auto;
        bottom: 0;
        z-index: 2;

        svg {
            height: 50px;
            width: 50px;
        }
    }

    #cms-gallery .left-arrow.button-action {
        left: auto;
        right: 30px;
    }

    #cms-gallery .right-arrow.button-action {
        right: 8px;
    }
}

/* END custom gallery */


/* ------------- HEADER-SPECIFIC OVERRIDES ------------- */
#cms-header .sign-in-button {
    /* display: none; */
    margin-left: 15px;
}

#cms-header .widget-login-dropdown.header-login-dropdown .login-dropdown {
    left: auto;
    bottom: auto;
    top: 100%;
    right: 0;
    margin-top: 8px;
    width: max-content;
    min-width: 150px;
    transform-origin: top left;
    max-width: calc(100vw - 20px);
}

#cms-header .widget-login-dropdown.header-login-dropdown .login-selector {
    padding: 0 12px;
    padding: 5px 20px;
    display: inline-block;
    text-decoration: none;
    text-transform: uppercase;
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    text-align: center;
    margin-left: 20px;
    border-radius: 8px;
    font-weight: 700;
}

/*=========----------- END District Home & Login Widget -------=============*/



/* -------------------------------------- */
/* -------- START Buttons V2 ------------ */
/* -------------------------------------- */

#home #buttons-b2 {
    .wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        column-gap: .75%;

        .button-link {
            width: auto;
            height: 100%;
            min-width: unset;
            font-weight: 700;
            line-height: 1;
            padding: 1.5em .5em;
            margin: 0;
            box-sizing: border-box;
            background-color: color-mix(in srgb, var(--bg-color), var(--button-bg-color) 80%);
            margin-top: 4px;
            margin-bottom: 4px;
        }

    }
}

/* -------------------------------------- */
/* ---------- END Buttons V2 ------------ */
/* -------------------------------------- */


/* -------------------------------------- */
/* -------- START CTAS Sections --------- */
/* -------------------------------------- */


#section-ctas.custom-section {
    padding-inline: 0;
    padding-top: 50px;
    padding-bottom: 55px;
    width: 100%;
    overflow: hidden;

    --section-radius: 20px;




    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    .cta-wrapper {
        display: flex;
        flex-direction: column;
        gap: clamp(1.875rem, -3.354rem + 8.537vw, 6.25rem);

        .cta-card {
            display: flex;
            align-items: center;
            flex-direction: row-reverse;
            gap: 5%;
            position: relative;
            isolation: isolate;
        }

        .left-content {
            width: 50%;
            box-sizing: border-box;
            padding: 20px 3%;
            text-align: left;

            .h3 {
                color: var(--primary-color);
                font-size: clamp(1.75rem, 0.202rem + 1.935vw, 2.5rem);
                line-height: 1.2;
                font-weight: 700;
                margin-bottom: 10px;
                text-align: left;
            }

            .cta-item-text {
                font-size: 19px;
                line-height: 1.4;
                letter-spacing: 0.02em;
                color: currentColor;

                @media (max-width: 1499px) {
                    font-size: 16px;
                }
            }

            .button {
                &:not(:has(a)) {
                    display: none;
                }

                a {
                    display: inline-block;
                    background-color: var(--primary-color);
                    color: var(--primary-color-contrast);
                    padding: 8px 18px;
                    text-decoration: none;
                    font-weight: 700;
                    font-size: 17px;
                    border-radius: 10px;
                    margin-top: clamp(1.563rem, -1.663rem + 4.032vw, 3.125rem);
                    transition: all .35s ease-in-out;

                    @media only screen and (min-width: 1400px) {
                        font-size: 19px;
                        padding: 12px 25px;
                    }

                    &:hover {
                        background-color: var(--secondary-color);
                        color: var(--secondary-color-contrast);
                    }
                }
            }

        }

        .image-area {
            width: 50%;
            box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.25);
            border-radius: 0 var(--section-radius) var(--section-radius) 0;
            overflow: hidden;

            @media (max-width: 1199px) {
                width: 100%;
                margin-left: auto;
                margin-right: auto;
                margin-top: 10px;
                margin-bottom: 10px;
                border-radius: var(--section-radius);
            }

            img {
                background: lightgray -60.186px -3.192px / 107.574% 100% no-repeat;
                box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.25);
                display: block;
                max-width: 100%;
                height: auto;
                width: 100%;
            }
        }

        &>div:first-child {
            .cta-card::after {
                display: none;
            }

            .left-content {
                text-align: left;
                position: relative;

                &::after {
                    position: absolute;
                    content: '';
                    top: 0;
                    height: 100%;
                    left: -20px;
                    width: 7px;
                    background: rgba(241, 241, 241, 0.87);
                    background-color: var(--secondary-color);
                    display: block;
                }

                .h3 {
                    color: var(--primary-color);
                    font-weight: 700;
                    font-size: var(--section-title-size);
                    margin-bottom: 20px;
                }
            }


        }

        &>div:not(:first-child) {
            .cta-card {
                gap: unset;
                --image-button-max-width: 200px;
                --offset: 25px;

                @media (max-width: 1199px) {
                    flex-wrap: wrap;
                }

                .left-content {
                    width: calc(50% - 40px);
                    margin-left: 40px;
                    background: #C6D0DA;
                    border-radius: var(--section-radius) 0 0 var(--section-radius);
                    padding-top: 2.5em;
                    padding-bottom: 2.5em;

                    @media (max-width: 1199px) {
                        width: 100%;
                        margin-left: auto;
                        margin-right: auto;
                        border-radius: var(--section-radius);
                        margin-top: 10px;
                        margin-bottom: 10px;
                    }
                }

                .image-area {
                    position: relative;
                    border-radius: var(--section-radius) 0 0 var(--section-radius);
                    overflow: hidden;
                    isolation: isolate;

                    @media (max-width: 1199px) {
                        border-radius: var(--section-radius);
                    }

                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        width: 100%;
                        height: 70%;
                        left: 0;
                        bottom: 0;
                        background: linear-gradient(to bottom,
                                rgba(0, 0, 0, 0) 0%,
                                var(--primary-color) 100%);
                        z-index: 1;
                    }

                    .image-area__title {
                        position: absolute;
                        width: calc(100% - var(--image-button-max-width) - var(--offset) * 3);
                        bottom: var(--offset);
                        left: var(--offset);
                        z-index: 2;

                        @media (max-width: 959px) {
                            width: 100%;
                            bottom: calc(var(--offset) * 2 + 15px);
                            left: unset;
                            padding-left: 15px;
                            padding-right: 15px;
                        }

                        h3 {
                            font-size: 36px;
                            color: var(--primary-color-contrast);

                            @media (max-width: 1199px) {
                                font-size: 32px;
                            }

                            @media (max-width: 959px) {
                                font-size: 28px;
                            }

                            @media (max-width: 767px) {
                                font-size: 25px;
                            }
                        }
                    }

                    .image-area__buttons {
                        position: absolute;
                        width: var(--image-button-max-width);
                        bottom: var(--offset);
                        right: var(--offset);
                        z-index: 2;

                        .button {
                            a {
                                display: block;
                                width: calc(var(--image-button-max-width) * .8);
                                text-align: center;
                                background-color: var(--primary-color-contrast);
                                border-radius: .4em;
                                padding: .25em;
                                text-transform: unset;
                                text-decoration: unset;
                                font-weight: 700;
                                color: var(--primary-color);
                                transition: background-color .25s linear;
                                margin-left: auto;

                                &:hover {
                                    background-color: color-mix(in srgb, var(--primary-color-contrast), var(--primary-color) 15%);
                                }
                            }
                        }
                    }
                }
            }
        }

        &>div {
            width: 100%;
            box-sizing: border-box;

            &:nth-of-type(even) {
                .cta-card {
                    flex-direction: row;
                }
            }
        }

        &>div:nth-child(odd) {
            .cta-card {
                justify-content: flex-end;

                .image-area {
                    border-radius: 0 var(--section-radius) var(--section-radius) 0;

                    @media (max-width: 1199px) {
                        border-radius: var(--section-radius);
                    }
                }

                .left-content {
                    margin-left: 0;
                    border-radius: 0 var(--section-radius) var(--section-radius) 0;

                    @media (max-width: 1199px) {
                        border-radius: var(--section-radius);
                        margin-left: auto;
                    }
                }
            }
        }


        @media only screen and (max-width: 760px) {
            .cta-card {
                flex-direction: column-reverse !important;
                padding-inline: 25px;
                margin-inline: auto;
                gap: 30px;
                margin-bottom: 30px;

                .left-content,
                .image {
                    width: 100%;
                }

                .image img {
                    border-radius: 10px !important;
                }
            }
        }
    }

}


/* -------------------------------------- */
/* --------- END CTAS Sections ---------- */
/* -------------------------------------- */



/* top static section */
.custom-section.content-area {
    background-color: #f1f1f1;
    padding: clamp(2.5rem, -1.495rem + 6.522vw, 6.25rem) clamp(5rem, -5.985rem + 17.935vw, 15.313rem);
    position: relative;
    isolation: isolate;
    padding-bottom: 250px;

    &:after {
        content: '';
        position: absolute;
        inset: 0;
        background-image: url(../img/students.jpg);
        background-size: cover;
        background-position: bottom center;
        z-index: -1;
        opacity: .25;
    }

    @media only screen and (max-width: 760px) {
        padding: 30px 20px;
    }

    .title {
        h3 {
            color: var(--primary-color);
            text-align: center;
            font-size: 36px;
            margin-bottom: 1em;

            .content-title-2 {
                font-weight: 400;
                font-style: italic;
            }
        }
    }

    .content-description {
        text-align: center;

        p {
            font-size: var(--section-font-size);
            line-height: 1.5;
            letter-spacing: 0.02em;
            margin-bottom: 30px;

            strong {
                color: var(--primary-color);
                font-weight: 700;
            }
        }
    }

    .action {
        text-align: center;
        padding-top: 15px;
    }

    .button {
        display: inline-flex;
        padding: 15px 25px;
        border-radius: 10px;
        background: var(--primary-color);
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.35);
        transition: all .35s ease-in-out;
        position: relative;
        color: var(--primary-color-contrast);
        gap: 15px;
        font-weight: 400;
        font-size: 18px;
        line-height: 1.2;
        margin-inline: auto;
        transition: all .35s ease-in-out;

        @media only screen and (min-width: 1440px) {
            font-size: 22px;
            padding: 25px 45px;
        }

        a {
            color: var(--secondary-color);
            text-decoration: none;
            font-weight: 700;
            transition: all .35s ease-in-out;
            padding-left: 15px;
            border-left: 2px solid var(--primary-color-contrast);

            &::after {
                position: absolute;
                inset: 0;
                z-index: 1;
                cursor: pointer;
                content: '';
            }
        }

        &:hover {
            background-color: var(--primary-color-contrast);
            color: #333;

            a {
                color: var(--primary-color);

                border-left-color: #333;
            }
        }
    }
}

.main:has(.custom-section.content-area)+.main .custom-section {
    padding-top: 0;
}

/* END */

/* Custom buttons v6 updates */
#app .custom-buttons-v6 {
    --pattern-image: transparent;
    --buttons-v6-bg-color: color-mix(in srgb, var(--primary-color), transparent 80%);
    --buttons-v6-text-color: var(--primary-color);
    --buttons-v6-icon-bg-color: var(--secondary-color);
    margin-top: -200px;
    background: transparent;

    @media (max-width: 767px) {
        margin-top: 35px;
    }

    &::before {
        display: none;
    }

    &::after {
        position: absolute;
        width: 100%;
        content: '';
        height: 50%;
        bottom: 0;
        left: 0;
        background-color: #FFF;
        z-index: -1;
    }

    .header-slot-container h2 {
        font-size: clamp(1.375rem, 0.03rem + 2.195vw, 2.5rem);
    }

    .custom-buttons-v6-wrapper {
        border-radius: 26px;
        border: 2px solid #FFF;
        background: #FFF;
        box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.15);
        max-width: 100%;
        padding-inline: clamp(2.5rem, -2.16rem + 7.609vw, 6.875rem);
        padding-block: clamp(1.563rem, -1.433rem + 4.891vw, 4.375rem);
    }

    .header-slot-container {
        margin-top: 0;
    }

    .button-group {
        margin-top: clamp(1.25rem, 0.584rem + 1.087vw, 1.875rem);
        padding: clamp(0.938rem, 0.272rem + 1.087vw, 1.563rem) clamp(1.875rem, -0.122rem + 3.261vw, 3.75rem);
    }

    .button-group>div .button-item .button-text {
        font-size: clamp(1.25rem, 0.451rem + 1.304vw, 2rem);
    }
}

/* END */



/* ------------------------------------------------- */
/* ------------- CUSTOM FLIP CARDS START----------- */
/* ------------------------------------------------- */

#section-flip-cards.flip-cards-section {
    --section-bg-color: #F1F1F1;
    display: flex;
    flex-direction: column;
    margin-inline: auto;
    box-sizing: border-box;
    background-color: var(--section-bg-color, var(--primary-color));
    position: relative;
    isolation: isolate;

    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }
}

#section-flip-cards .header-slot-container {
    margin-inline: auto;
}

#section-flip-cards .header-slot-container h2 {
    color: var(--section-title-color, var(--primary-color-contrast));
    padding: 0;
}

#section-flip-cards.flip-cards-section .flip-cards {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    #section-flip-cards.flip-cards-section .flip-cards {
        grid-template-columns: repeat(12, 1fr);
    }

    #section-flip-cards.flip-cards-section .flip-cards>div:nth-child(1),
    #section-flip-cards.flip-cards-section .flip-cards>div:nth-child(2),
    #section-flip-cards.flip-cards-section .flip-cards>div:nth-child(3) {
        grid-column: auto / span 4;
    }

    #section-flip-cards.flip-cards-section .flip-cards>div {
        grid-column: auto / span 6;
    }
}

#section-flip-cards.flip-cards-section .flip-cards {
    gap: 0;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card {
    position: relative;
    width: 100%;
    height: clamp(18.375rem, 4.78rem + 22.195vw, 29.75rem);
    transform-style: preserve-3d;
    transform: scale(1);
    transition: transform 0.1s;
    will-change: transform;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-number {
    font-size: clamp(1.75rem, -0.267rem + 3.293vw, 3.438rem);
    font-weight: 700;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-number,
#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-subtitle {
    position: relative;
    color: inherit;
    z-index: 1;
    transition: 2s opacity 0.3s;
    opacity: 1;
    text-align: left;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-subtitle {
    font-size: clamp(1.25rem, -0.244rem + 2.439vw, 2.5rem);
    font-weight: 400;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-front:has(img) .flip-card-number,
#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-front:has(img) .flip-card-subtitle {
    color: #FFF;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-image {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: translate3d(0, 0, 0);
    position: absolute;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-image img {
    width: 100%;
    height: 100%;
    display: block;
    -o-object-fit: cover;
    object-fit: cover;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-image:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(0deg, var(--primary-color) 0%, #00000000 55%);
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
    transform-style: preserve-3d;
    will-change: transform;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card:hover .flip-card-inner,
#section-flip-cards.flip-cards-section .flip-cards .flip-card:focus-within .flip-card-inner {
    transform: rotateY(180deg);
    transition-delay: 0s;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card:hover .flip-card-image,
#section-flip-cards.flip-cards-section .flip-cards .flip-card:focus-within .flip-card-image {
    transition: 0s opacity 0.5s;
    opacity: 0;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card:hover .flip-card-number,
#section-flip-cards.flip-cards-section .flip-cards .flip-card:hover .flip-card-subtitle,
#section-flip-cards.flip-cards-section .flip-cards .flip-card:focus-within .flip-card-number,
#section-flip-cards.flip-cards-section .flip-cards .flip-card:focus-within .flip-card-subtitle {
    transition: 0s opacity 0s;
    opacity: 0;
}

.flip-card-subtitle {
    margin-top: 5px;
}

/* #section-flip-cards.flip-cards-section .flip-cards>div:nth-child(even) .flip-card-front {
    background: url('diamond-pattern-1.png');
    background-size: cover;
    background-position: bottom;
    background-blend-mode: overlay;
}

#section-flip-cards.flip-cards-section .flip-cards>div:nth-child(even) .flip-card-front,
#section-flip-cards.flip-cards-section .flip-cards>div:nth-child(even) .flip-card-back {
    background-color: var(--secondary-color);
    color: var(--secondary-color-contrast);

    & .link a::after {
        background-color: currentColor;
    }
} */

#section-flip-cards.flip-cards-section .flip-cards .flip-card-front,
#section-flip-cards.flip-cards-section .flip-cards .flip-card-back {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    padding: 1.5rem;
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card-front {
    justify-content: flex-end;
    align-items: flex-start;
    text-align: left;
    border-radius: 0;
    overflow: hidden;
    color: var(--primary-color-contrast);
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card-back {
    background-color: var(--secondary-color);
    justify-content: center;
    align-items: flex-start;
    text-align: left;
    border-radius: 0;
    overflow: hidden;
    color: var(--secondary-color-contrast);
    transform: rotateY(180deg);
    will-change: transform;
}

#section-flip-cards.flip-cards-section .flip-cards>div:nth-child(even) .flip-card-back {
    background-color: var(--primary-color);
    color: var(--primary-color-contrast);
}

#section-flip-cards.flip-cards-section .button.link a {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
    width: fit-content;
    color: currentColor;
    position: relative;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;

    @media only screen and (min-width: 1440px) {
        font-size: 18px;
    }


    &::after {
        content: "";
        width: 20px;
        height: 20px;
        background-color: currentColor;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M10.8618 3.44922L17.9125 10.4999L10.8618 17.5507' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.9124 10.5L2.91248 10.5' stroke='black' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        mask-repeat: no-repeat no-repeat;
        mask-position: right center;
        mask-size: contain;
        transition: all .35s ease-in-out;
    }

    &:hover::after,
    &:focus::after {
        transform: translateX(5px);
    }
}

#section-flip-cards.flip-cards-section .flip-cards .flip-card .flip-card-title h3 {
    font-size: clamp(22px, calc((22 / 390) * 100dvw), 24px);
    padding: 8px 0;
    font-style: normal;
    font-weight: 700;
    line-height: 1.2;
}

#section-flip-cards.flip-cards-section .flip-card-text p span {
    white-space: normal !important;
    font-size: 16px;
    line-height: 1.3;
    display: block;
    text-align: left;
}

/* ------------------------------------------------- */
/* ------------- CUSTOM FLIP CARDS END   ----------- */
/* ------------------------------------------------- */



/* ------------------------------------------------- */
/* ------------- VIDEO STORIES START   ------------- */
/* ------------------------------------------------- */
#app .video-stories-section {
    padding-bottom: clamp(2.5rem, -1.452rem + 6.452vw, 5rem);
    padding-inline: 20px;
    padding-top: 0;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0;
    border-top: 10px solid var(--secondary-color);

    img {
        max-width: 100%;
        height: auto;
    }

    .see-all-container.see-all-top {
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        isolation: isolate;
        padding-inline: var(--side-padding);
        padding-block: clamp(2.5rem, -3.5rem + 16vw, 12.5rem);
        background: color-mix(in srgb, var(--primary-color), transparent 90%);
        /* color: #646464; */
        min-height: 500px;
        border-radius: 0;

        .image {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.15;
            border-radius: 0;
            overflow: hidden;

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }

    .header-slot-container {
        flex-direction: column;
        text-transform: none;
        text-align: center;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
        padding-bottom: 50px;
        max-width: 1200px;
        margin-bottom: 0;

        &::before,
        &::after {
            display: none;
        }

        h2 {
            display: flex;
            align-items: center;
            color: var(--primary-color);
            margin-bottom: .65em;
        }

        .header-top {
            font-size: 1em;
        }

        .header-bottom {
            line-height: 1.1;
            color: var(--primary-color);
            padding-left: .25em;
            font-weight: 400;
            font-style: italic;
        }

        .intro {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            box-sizing: border-box;

            & p {
                font-size: var(--section-font-size);
                line-height: 1.3;
                font-weight: 400;

                span {
                    white-space: normal !important;
                }
            }
        }
    }

    .videos-section-wrapper {
        padding-inline: var(--side-padding);
    }

    #slider-story {
        --columns: 1;
        --gap: 20px;
        overflow: visible;
        margin-top: -150px;
        z-index: 2;
        isolation: isolate;
        position: relative;
        box-sizing: border-box;

        @media only screen and (min-width: 600px) {
            --columns: 2;
        }

        @media only screen and (min-width: 960px) {
            --columns: 3;
        }

        @media only screen and (min-width: 1280px) {
            --columns: 4;
        }

        .video-stories-slides {

            &>div {
                overflow: hidden;
                border-radius: 24px;
                box-shadow: 0px 32px 64px -12px rgba(0, 0, 0, 0.14);
                transition: all .35s ease-in-out;
                position: relative;
                isolation: isolate;
                min-height: 26.563vw;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                background-color: #000;

                & a {
                    text-decoration: none;
                }

                &:hover {
                    box-shadow: 0px 12px 74px -12px rgba(0, 0, 0, 0.5);
                    position: relative;

                    .video-image img {
                        transform: scale(1.1);
                        opacity: 0.8;
                    }

                    .content:after {
                        opacity: 0.7;
                    }
                }

            }

            .video-image {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                z-index: -1;
                position: absolute;
                left: 0;
                top: 0;
                overflow: hidden;

                & img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    object-position: top center;
                    display: block;
                    transition: transform .35s ease-in-out;
                }
            }

            .content {
                height: 100%;
                padding-top: calc(26.563vw/2 + 60px);
                padding-inline: 30px;
                padding-bottom: 30px;
                background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 20%, #000 100%);
                box-sizing: border-box;
                display: flex;
                flex-direction: column;
                justify-content: flex-end;
                color: #FFF;

                @media only screen and (max-width: 1279px) {
                    min-height: 445px;
                }

                @media only screen and (max-width: 760px) {
                    padding-top: 264px;
                }


                &::after {
                    content: '';
                    position: absolute;
                    left: 50%;
                    top: calc(26.563vw/2);
                    width: 100px;
                    aspect-ratio: 1;
                    max-width: 25%;
                    transform: translate(-50%, -50%);
                    background-color: currentColor;
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='none'%3E%3Ccircle cx='50' cy='50' r='46.0938' stroke='white' stroke-width='7.8125'/%3E%3Cpath d='M70.3125 47.38C72.3958 48.5444 72.3958 51.4556 70.3125 52.62L42.1875 68.3402C40.1042 69.5046 37.5 68.0491 37.5 65.7201L37.5 34.2799C37.5 31.9509 40.1042 30.4954 42.1875 31.6598L70.3125 47.38Z' fill='white'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: center center;
                    mask-size: cover;
                    transition: all .35s ease-in-out;

                    @media only screen and (max-width: 760px) {
                        top: 219px;
                    }
                }
            }

            .video-title {
                font-size: var(--font-size-heading-h3);
                line-height: 1.1;
                margin-bottom: 15px;
                font-weight: 700;
            }

            .video-text {
                & p {
                    font-size: 16px;
                    line-height: 1.3;
                    font-weight: 400;

                    span {
                        white-space: normal !important;
                    }
                }
            }

            .video-link a {
                position: absolute;
                inset: 0;
                z-index: 1;
                font-size: 0;
                overflow: hidden;
                text-indent: -999px;
            }
        }

        &:not(.swiper-initialized) {

            .video-stories-slides {
                display: flex;
                flex-wrap: wrap;
                gap: var(--gap);
            }

            .video-stories-slides>div {
                width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));

                &:hover {
                    z-index: 2;
                }
            }

            .arrows-buttons {
                display: none;
            }
        }

        &.swiper-initialized {
            width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
            margin-inline: auto;

            .swiper-slide {
                position: relative;
                transform: scale(0.8) translateX(170px);
                z-index: 0;

                cursor: grab;

                &:active {
                    cursor: grabbing;
                }

                &::after {
                    position: absolute;
                    inset: 0;
                    z-index: 3;
                    background-color: #FFF;
                    content: '';
                    opacity: 0.76;
                    transition: all .3s ease-in-out;
                }
            }

            .swiper-slide.swiper-slide-prev,
            .swiper-slide.swiper-slide-next {
                z-index: 1;

                &::after {
                    opacity: 0.44;
                }
            }

            .swiper-slide.swiper-slide-prev {
                transform: scale(0.9) translateX(50px);
            }

            .swiper-slide.swiper-slide-next {
                transform: scale(0.9) translateX(-50px);
            }

            .swiper-slide.swiper-slide-next+.swiper-slide {
                transform: scale(0.8) translateX(-170px);
            }

            .swiper-slide:has(+ .swiper-slide + .swiper-slide-prev) {
                transform: scale(0.8) translateX(-170px);
            }

            .swiper-slide.swiper-slide-active {
                opacity: 1;
                z-index: 2;
                transform: scale(1);
                cursor: default;

                &:active {
                    cursor: default;
                }

                &::after {
                    display: none;
                }
            }

            .swiper-button-prev,
            .swiper-button-next {
                font-size: 0;
                text-indent: -999px;
                overflow: hidden;
                width: 64px;
                height: 64px;
                background-color: #FFF;
                border-radius: 50vw;
                transition: all .35s ease-in-out;

                span {
                    width: 0;
                    height: 0;
                }

                &::after {
                    content: '';
                    height: 35px;
                    width: 35px;
                    background-color: var(--primary-color);
                    transition: all .35s ease-in-out;
                }

                &:hover {

                    &::after {
                        transform: scale(1.2);
                    }
                }

                @media only screen and (max-width: 600px) {
                    width: 50px;
                    height: 50px;
                }
            }

            .swiper-button-prev {
                transform: translateX(-50%);
                left: 0;

                &::after {
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M11.5246 4.05518L5.57983 9.99997L11.5246 15.9448L12.9975 14.4718L8.52567 9.99997L12.9975 5.52809L11.5246 4.05518Z' fill='%23002F6C'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: center center;
                    mask-size: contain;
                }
            }

            .swiper-button-next {
                right: 0;
                transform: translateX(50%);

                &::after {
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8.13959 16.0562L14.0844 10.1114L8.13959 4.16666L6.66667 5.63957L11.1385 10.1114L6.66667 14.5833L8.13959 16.0562Z' fill='%23002F6C'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: center center;
                    mask-size: contain;
                }
            }
        }
    }
}

/* ------------------------------------------------- */
/* -------------- VIDEO STORIES END   -------------- */
/* ------------------------------------------------- */



/* ------------------------------------------------- */
/* ---------------- ENROLL START   ----------------- */
/* ------------------------------------------------- */

#app #home .enroll-today {

    display: flex;

    .cms-image,
    .cms-input,
    .cms-richtextarea {
        border: none;
        padding: 0;
        margin: 0;
        border-radius: unset;
    }

    .cms-image {
        img {
            max-width: 100%;
            width: auto;
            margin: unset;
        }
    }
}


.enroll-today-wrapper {
    position: relative;
    isolation: isolate;
    margin-top: 50px;

    &:after {
        content: '';
        display: block;
        width: 100%;
        height: 1500px;
        position: absolute;
        top: 50%;
        left: 0;
        background: linear-gradient(180deg, #ABB6C2 0%, #C6D0DA 40.87%, #FFF 100%);
        z-index: -1;
    }
}

.enroll-today {
    box-shadow: 0px 4px 34px 0px rgba(0, 0, 0, 0.15);
    max-width: calc(100% - 2 * var(--side-padding));
    margin-left: auto;
    margin-right: auto;
    border-radius: 26px;
    background-color: #fff;
    padding: 48px 80px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 3em;



    @media (max-width: 1499px) {
        padding: 30px 60px;
    }

    @media (max-width: 1199px) {
        padding: 25px 40px;
    }

    @media (max-width: 959px) {
        max-width: 95%;
    }

    .enroll-left {
        width: 33%;

        @media (max-width: 959px) {
            width: 100%;
        }
    }

    .enroll-right {
        width: 66%;
        border-left: 4px solid var(--secondary-color);
        padding-left: 2em;

        @media (max-width: 959px) {
            width: 100%;
            padding-left: unset;
            border-left: unset;
            margin-top: 2em;
        }

        h4 {
            font-size: var(--section-title-size);
            color: var(--primary-color);
        }

        .enroll-desc {
            margin-top: 1em;
            font-size: var(--section-font-size);
            line-height: 1.5;
        }

        .enroll-button {

            .enroll-btn {
                &:not(:has(a)) {
                    display: none;
                }

                a {
                    display: inline-block;
                    background-color: var(--primary-color);
                    color: var(--primary-color-contrast);
                    padding: 8px 18px;
                    text-decoration: none;
                    font-weight: 700;
                    font-size: 17px;
                    border-radius: 10px;
                    margin-top: 1em;
                    transition: all .35s ease-in-out;

                    @media only screen and (min-width: 1499px) {
                        font-size: 19px;
                        padding: 12px 25px;
                    }

                    &:hover {
                        background-color: var(--secondary-color);
                        color: var(--secondary-color-contrast);
                    }
                }
            }
        }
    }
}

/* ------------------------------------------------- */
/* ----------------- ENROLL END  ------------------- */
/* ------------------------------------------------- */


/* ------------------------------------------------- */
/* ----------------- NEWS START  ------------------- */
/* ------------------------------------------------- */

#home .main:has(#news-n4) .view-container {
    background: transparent;
}

#news-n4 {
    background: transparent !important;

    .news-content {
        .story {

            margin-top: 1em;
            margin-bottom: 2em;

            .news-image {
                border: none;

                &:before {
                    display: none;
                }

                .image-hidden-wrapper {
                    border: none;
                }
            }

            .outer-snippet {
                display: none;
            }

            .news-title {
                border-radius: 8px;
                background: #fff;
                box-shadow: 1px 9px 8px 0 rgba(0, 0, 0, 0.25);
                width: calc(100% - 30px);
                margin-left: auto;
                margin-right: auto;
                position: relative;
                z-index: 2;
                margin-top: -30px;
                padding: 15px 25px;
                min-height: 230px;

                .inner-snippet {
                    display: block;
                }

                &:after {
                    content: '';
                    display: block;
                    width: 1.75em;
                    height: 1.75em;
                    mask-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12.007 2c-5.518 0-9.998 4.48-9.998 9.998 0 5.517 4.48 9.997 9.998 9.997s9.998-4.48 9.998-9.997c0-5.518-4.48-9.998-9.998-9.998zm1.523 6.21s1.502 1.505 3.255 3.259c.147.147.22.339.22.531s-.073.383-.22.53c-1.753 1.754-3.254 3.258-3.254 3.258-.145.145-.335.217-.526.217-.192-.001-.384-.074-.531-.221-.292-.293-.294-.766-.003-1.057l1.977-1.977h-6.693c-.414 0-.75-.336-.75-.75s.336-.75.75-.75h6.693l-1.978-1.979c-.29-.289-.287-.762.006-1.054.147-.147.339-.221.53-.222.19 0 .38.071.524.215z' fill='%23000' fill-rule='nonzero'/%3E%3C/svg%3E");
                    background-color: var(--secondary-color);
                    mask-position: center;
                    mask-size: contain;
                    margin-left: auto;
                    margin-top: .25em;
                }
            }


        }
    }
}

/* ------------------------------------------------- */
/* ------------------ NEWS END  -------------------- */
/* ------------------------------------------------- */



/* ------------------------------------------------- */
/* --------------- LIVE FEED START  ---------------- */
/* ------------------------------------------------- */


#home .main:has(.live-feed-lf8) .view-container {
    background: transparent;
}


#cms-live-feed .live-feed-lf8 {
    .wrapper {
        background: transparent;
    }

    .cards-slider {
        .slider-button {
            border-radius: 50%;
        }
    }

    .card-content {
        border-top: 4px solid var(--secondary-color);
        border-radius: 0 0 10px 10px;
    }
}

/* ------------------------------------------------- */
/* ---------------- LIVE FEED END  ----------------- */
/* ------------------------------------------------- */


.custom-programs-section-v10 {
    & .header-slot-container {
        & .intro {
            margin-top: 20px;
        }
    }
}


/* ------------------------------------------------- */
/* ----------------- EVENTS START  ----------------- */
/* ------------------------------------------------- */

.custom-events-v5 {
    --custom-events-v5-bg: transparent;
    --custom-events-v5-card-background-color: var(--primary-color);
    --custom-events-v5-date-bg-color: var(--secondary-color);
    --custom-events-v5-date-text-color: var(--secondary-color-contrast);
    --custom-events-v5-title-text-color: var(--primary-color-contrast);
    --custom-events-v5-time-text-color: var(--primary-color-contrast);
    --side-padding: 40px;

    .event-item {
        border-radius: 1em;
    }

    .custom-swiper-navigation .custom-swiper-next,
    .custom-swiper-navigation .custom-swiper-prev {
        background-color: var(--secondary-color);
        border-radius: 50%;

        &:after {
            width: 0.65em;
            height: 0.65em;
            padding: 0.65em;
        }
    }
}

/* ------------------------------------------------- */
/* ------------------ EVENTS END  ------------------ */
/* ------------------------------------------------- */




/* ------------------------------------------------- */
/* ---------------- VIDEOS START  ------------------ */
/* ------------------------------------------------- */
@media (min-width: 1200px) {
    #home #video-component {
        --outer-side-padding: 32px;
        --inner-side-padding: 80px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        position: relative;
        padding-left: var(--outer-side-padding);
        padding-right: var(--outer-side-padding);

        @media (max-width: 1499px) {
            --inner-side-padding: 60px;
        }

        .see-all-top {
            width: 100%;
            margin-bottom: 4em;
        }

        .dots {
            width: 100%;
            margin-top: 5em;
            text-align: center;
            justify-content: center;
        }

        .video-wrapper {
            margin: unset;
            width: calc(50% - var(--inner-side-padding));
            margin-left: var(--inner-side-padding);

            iframe {
                border: none;
            }

            .prev,
            .next {
                width: 50px;
                height: 50px;
                position: absolute;
                left: 32px;
                margin-left: unset;
                margin-right: unset;
                border-radius: 50%;

                .icon {
                    width: 100%;
                    height: 100%;
                    mask-size: 12px;
                }
            }

            .next {
                left: unset;
                right: 32px;
            }
        }

        .mirrors {
            display: none;
        }

        .video-info {
            width: calc(50% - var(--inner-side-padding));
            margin-right: var(--inner-side-padding);
            margin-bottom: unset;
            margin-top: unset;
            display: flex;
            flex-direction: column;
            justify-content: center;
            position: relative;
            padding-left: 3%;
            padding-right: 15px;

            &:after {
                content: '';
                display: block;
                position: absolute;
                width: 180%;
                height: 110%;
                top: -5%;
                right: calc(-1 * (var(--inner-side-padding) + var(--outer-side-padding)));
                background-color: color-mix(in srgb, var(--primary-color), transparent 90%);
                border-radius: 1em 0 0 1em;
            }
        }
    }
}


/* ------------------------------------------------- */
/* ------------------ VIDEOS END  ------------------ */
/* ------------------------------------------------- */


/* ------------------------------------------------- */
/* ----------------- FOOTER START  ----------------- */
/* ------------------------------------------------- */
#app #cms-footer {
    #footer-f1 {
        &:after {
            background-image: url(../img/footer-bg.jpg);
            background-size: cover;
            background-position: unset;
        }

        .footer-column-main {
            --separator-color: var(--primary-color);
            background-color: color-mix(in srgb, var(--primary-color), #fff 80%);
            color: #000;
            border-bottom: 5px solid var(--secondary-color);

            p {
                color: var(--primary-color);

                a {
                    color: inherit;
                }
            }
        }

        .footer-columns {
            padding: 30px;
        }

        .footer-column-last {
            padding-bottom: 25px;
        }
    }
}


/* ------------------------------------------------- */
/* ------------------ FOOTER END  ------------------ */
/* ------------------------------------------------- */





#section-ctas.custom-section.is-not-in-cms:not(:has(.image-area-image img:not([src=""]))) {
    display: none !important;
}

#custom-buttons-v6.is-not-in-cms:not(:has(.button-icon svg)) {
    display: none !important;
}


#section-flip-cards.is-not-in-cms:not(:has(.flip-card-image img:not([src=""]))) {
    display: none !important;
}

#section-story-slider.is-not-in-cms:not(:has(.video-image img:not([src=""]))) {
    display: none !important;
}

#enroll-today.is-not-in-cms:not(:has(.enroll-image img:not([src=""]))) {
    display: none !important;
}