/* General font */
#app,
.pb-main,
body,
html,
button,
#h3 .utility-menu .utilities-bar .translate-button .translate-text {
    --font-family: Montserrat, sans-serif !important;
    font-family: var(--font-family) !important;
}

/* START General changes */
@media screen and (min-width: 980px) {
    #app #home .see-all-container h2 {
        font-size: 40px;
    }
}

@media screen and (min-width: 600px) and (max-width: 979px) {
    #app #home .purple .see-all-container h2 {
        font-size: 32px;
    }
}

#home .see-all-button {
    --custom-border-radius: 4.5px;
    padding: 10px 24px;
    font-size: 14px;
}

#home .see-all-container h2,
#home .see-all-button {
    font-weight: 600;
    text-transform: capitalize;
}

#home .light-header-accent,
#home .purple-header-accent,
#home #custom-programs-v13 .header-slot-container::after {
    display: none;
}

#cms-live-feed .live-feed-lf8 .slider-button,
#programs-v3 .nav .button-section .button {
    position: relative;
    border: unset;
    background-color: unset;
    text-indent: -9999px;
    width: 38px;
    height: 38px;

    &:after {
        content: '';
        display: block;
        position: absolute;
        inset: 0;
        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.017 1.995c5.517 0 9.997 4.48 9.997 9.998s-4.48 9.998-9.997 9.998c-5.518 0-9.998-4.48-9.998-9.998s4.48-9.998 9.998-9.998zm0 1.5c-4.69 0-8.498 3.808-8.498 8.498s3.808 8.498 8.498 8.498 8.497-3.808 8.497-8.498-3.807-8.498-8.497-8.498zm-1.528 4.715s-1.502 1.505-3.255 3.259c-.147.147-.22.339-.22.531s.073.383.22.53c1.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.057l-1.977-1.977h6.693c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-6.693l1.978-1.979c.29-.289.287-.762-.006-1.054-.147-.147-.339-.221-.53-.222-.19 0-.38.071-.524.215z' fill-rule='nonzero'/%3E%3C/svg%3E");
        mask-size: contain;
        mask-repeat: no-repeat;
        mask-position: center;
        background-color: currentColor;
    }

    &.scroll-right:after {
        transform: rotate(180deg);
    }

    svg {
        display: none;

    }
}

/* END General changes */

/* START Header & Gallery */
#languagebutton,
#cms-gallery .pause,
#cms-gallery .play {
    display: none;
}

#cms-header .h5:has(.custom-header-btn) .mobile-header .custom-header-btn {
    margin: 0;
    padding-bottom: 0;
}

#cms-header .mobile-header .bottom-bar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 15px;
    padding: 10px 20px;
}

#cms-header .mobile-header .mobile-right {
    gap: 15px;
    margin-left: 0;
}

#cms-header .mobile-header .bottom-bar #schoolsbutton {
    display: none;
}

#cms-header .mobile-header .bottom-bar .sign-in-button {
    margin-left: 0;
}

#cms-header .h5:has(.custom-header-btn) .mobile-header .main-content {
    height: auto;
    flex-direction: column;
}

@media screen and (min-width: 1200px) {
    #app:has(#home) #view-header {
        position: absolute;
        width: 100%;
        top: 0;
        z-index: 15;
    }

    #app:has(#home) #view-header #cms-header .h5 .header-container {
        padding-top: 8px;
    }

    #app:not(:has(#cms-gallery)) #view-header #cms-header .header-container {
        background-color: var(--primary-color);
    }

    #search {
        z-index: 16 !important;
    }

    #view-header #cms-header .header-bar-wrapper {
        background: transparent !important;
    }

    #view-header #cms-header .h5 {
        display: flex;
        flex-direction: column;
        background: transparent;
        box-shadow: none;
        border: none;
    }

    #view-header #cms-header .h5 .bottom-bar {
        order: -1;
        background-color: var(--primary-color);
        height: 40px;
        padding: 10px 64px;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .bottom-bar-utilities-wrapper {
        display: flex;
        gap: 24px;
        margin-right: auto;
        order: 1;
    }

    .bottom-bar-utilities-wrapper .utilities {
        color: var(--primary-color-contrast);
        font-size: 16px !important;
        font-weight: 600 !important;
        text-transform: uppercase;
        border: none;
        padding: 0;
        background: transparent;
        letter-spacing: 0.5px;
        margin: 0;
    }

    .bottom-bar-utilities-wrapper .utilities:hover {
        color: #d1d1d1 !important;
    }

    .schools-dropdown-wrapper {
        order: 3;
        margin-left: 0;
    }

    #view-header #cms-header .h5 .bottom-bar .sign-in-button {
        order: 4;
        background-color: var(--primary-color-contrast);
        color: var(--primary-color);
        border: none;
        font-size: 16px;
        font-weight: 400;
        border-radius: 4px;
        margin-left: 0;
    }

    #view-header #cms-header .h5 .bottom-bar .sign-in-button:hover {
        background-color: #e0e0e0 !important;
    }

    #schoolsbutton {
        color: var(--primary-color-contrast);
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        background: transparent;
        border: none;
        padding: 0;
    }

    #view-header #cms-header .h5 .header-container {
        background: transparent;
        border: none;
        height: auto;
    }

    #view-header .logo img {
        width: 90px;
        height: auto;
        border-radius: 50%;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }

    #view-header .right {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    #view-header .right-right-menu {
        margin-bottom: 0;
    }

    .custom-header-btn {
        border: 2px solid var(--primary-color-contrast);
        border-radius: 9px;
        color: var(--primary-color-contrast);
        padding: 8px 24px;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 18px;
        transition: all 0.2s ease;
        background: transparent;
        display: inline-block;
        margin-top: 0;
    }

    .custom-header-btn:hover {
        background: var(--primary-color-contrast);
        color: var(--primary-color) !important;
    }

    #menubutton {
        font-size: 0;
        color: transparent;
        background: transparent;
        border: none;
        padding: 0;
        margin: 0;
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    #menubutton svg {
        width: 65px;
        height: 65px;
    }

    .header-container #searchbutton {
        display: none;
    }
}

#cms-gallery #g2::after {
    content: '';
    display: block;
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.3);
    pointer-events: none;
}

@media screen and (max-width: 1199px) {
    #app #cms-gallery #g2 .text {
        position: relative;
        bottom: 0;
        padding: 20px 15px;
        box-sizing: border-box;
        width: 100%;
    }

    #app #cms-gallery #g2 .title h1 {
        font-size: 24px;
    }

    .select-language {
        box-sizing: border-box;
        justify-content: space-between;
    }

    .select-language .languages-list {
        width: 100%;
    }

    #app #cms-gallery #g2 .description,
    #cms-gallery #g2::after {
        display: none;
    }

    #cms-gallery .image-wrapper::after {
        content: '';
        display: block;
        width: 100%;
        height: 50%;
        position: absolute;
        bottom: 0;
        left: 0;
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, transparent 100%);
    }

    .select-language .language-search-container {
        display: none;
    }

    .select-language #language-options {
        border-radius: 4px;
    }
}

#cms-gallery #g2 .text {
    width: 100%;
    box-sizing: border-box;
    z-index: 10;
    background-color: transparent !important;
    position: absolute;
    top: auto;
    bottom: 60px;
    left: 0;
    transform: none;
    padding: 5px 64px;

    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "title title title"
        "desc . translate";
    align-items: end;
    gap: 20px;
}

@media screen and (max-width: 1199px) {
    #cms-gallery #g2 .text {
        padding: 0 24px;
        bottom: 20px;
        grid-template-columns: 1fr;
        grid-template-areas:
            "title"
            "desc"
            "translate";
        justify-items: center;
        text-align: center;
        gap: 15px;
    }

    #cms-gallery #g2 .title h1 {
        text-align: center !important;
    }

    #cms-gallery #g2 .description,
    .select-language {
        margin: 0 auto;
    }
}

#cms-gallery #g2 .title {
    grid-area: title;
    margin: 0;
}

#cms-gallery #g2 .title h1 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 700;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
    line-height: 1.1;
    color: var(--primary-color-contrast);
    text-align: left;
}

#cms-gallery #g2 .description {
    grid-area: desc;
    background-color: var(--primary-color-contrast);
    width: 100%;
    min-width: 350px;
    max-width: 500px;
    margin: 0;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    padding-left: 20px;
    position: relative;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#cms-gallery #g2 .description div p {
    font-style: italic;
    color: #666;
    margin: 0;
    font-size: 14px;
}

#cms-gallery #g2 .search-trigger {
    margin-left: 15px;
    margin-right: 5px;
    height: calc(100% - 10px);
    background-color: var(--primary-color);
    color: #fff;
    border: none;
    padding: 0 2em;
    border-radius: 9.6px;
    font-size: 1em;
    cursor: pointer;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
}

#cms-gallery #g2 .search-trigger:hover {
    opacity: 0.9;
}

#cms-gallery #g2 .search-trigger:after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 8px;
    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='m15.97 17.031c-1.479 1.238-3.384 1.985-5.461 1.985-4.697 0-8.509-3.812-8.509-8.508s3.812-8.508 8.509-8.508c4.695 0 8.508 3.812 8.508 8.508 0 2.078-.747 3.984-1.985 5.461l4.749 4.75c.146.146.219.338.219.531 0 .587-.537.75-.75.75-.192 0-.384-.073-.531-.22zm-5.461-13.53c-3.868 0-7.007 3.14-7.007 7.007s3.139 7.007 7.007 7.007c3.866 0 7.007-3.14 7.007-7.007s-3.141-7.007-7.007-7.007z' fill-rule='nonzero'/%3E%3C/svg%3E");
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    background-color: currentColor;
}

.select-language {
    grid-area: translate;
    position: relative;
    background: var(--secondary-color);
    padding: 6px 6px 6px 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
    top: auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.select-language .label {
    color: var(--secondary-color-contrast);
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.select-language .language-button {
    background: #fff;
    color: #333;
    border: none;
    border-radius: 2px;
    padding: 8px 16px;
    font-weight: 600;
    font-size: 14px;
}

.select-language .language-button:after {
    border-top-color: #333;
}

.select-language .languages-list {
    position: absolute;
    bottom: calc(100% + 5px);
    top: auto;
    right: 0;
    left: auto;
    background: white;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    width: 200px;
    opacity: 0;
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.select-language .languages-list.show {
    opacity: 1;
    display: block;
}

.select-language .language-search-container {
    padding: 8px;
    border-bottom: 1px solid #eee;
}

.select-language .language-search {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.select-language .language-options {
    max-height: 200px;
    overflow-y: auto;
}

.select-language .language-item {
    padding: 8px 16px;
    cursor: pointer;
    color: #000;
}

.select-language .language-item:hover {
    background-color: #eee;
}

.select-language .language-item.active {
    background-color: var(--secondary-color);
    color: #fff;
}

#app:not(:has(#home)) #languagebutton {
    display: flex !important;
}

@media screen and (max-width: 1023px) {
    #app:not(:has(#home)) #view-header .right {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    #app:not(:has(#home)) #languagebutton {
        position: relative;
        background: transparent;
        padding: 0;
        color: var(--primary-color-contrast, #FFF);
    }

    #app:not(:has(#home)) #languagebutton .button-action-content {
        display: flex;
        align-items: center;
        border: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 6px;
        padding: 4px 8px;
        background: transparent;
        color: currentColor;
    }

    #app:not(:has(#home)) #languagebutton .button-action-content svg {
        fill: currentColor;

        rect {
            fill: var(--secondary-color);
        }
    }
}

@media only screen and (min-width: 1024px) {
    #app:not(:has(#home)) {

        #view-header #cms-header .h5 .right {
            padding-bottom: 46px;
            align-items: center;
            position: relative;
        }

        #view-header #searchbutton {
            transform: none;
            top: 2px;
        }

        #view-header #languagebutton {
            display: flex !important;
            position: absolute;
            right: 0;
            bottom: 0;
            background-color: var(--secondary-color);
            color: var(--secondary-color-contrast);
            border-radius: 8px;
            box-sizing: border-box;
            padding: 5px 10px;
            padding-right: 24px;
            align-items: center;
            justify-content: flex-end;
            gap: 10px;
            margin-right: 0;
        }

        #view-header #languagesmenu {
            top: 100%;
        }

        @media only screen and (min-width: 1600px) {
            #view-header #languagebutton {
                padding-right: 40px;
            }
        }

        #view-header #languagebutton::before {
            content: var(--language-label-text, "Select your language");
            display: block;
            font-size: 14px;
            line-height: 1.2;
            color: currentColor;
            font-weight: 700;
            text-transform: capitalize;
        }

        @media only screen and (min-width: 1400px) {
            #view-header #languagebutton::before {
                font-size: 16px;
            }
        }

        #view-header #languagebutton .button-action-content {
            border: 1.4px solid #E1E1E1;
            background: #FFF;
            color: #000;
            padding: 2px 4px 0 8px;
            border-radius: 8px;
            position: relative;
            text-align: left;
            box-sizing: border-box;
        }

        #view-header #languagebutton .button-action-content svg,
        #view-header #languagebutton .button-action-content path {
            fill: currentColor;
        }

        #view-header #languagebutton .menu-field {
            color: #000 !important;
            font-weight: 400;
            font-size: 14px;
            line-height: 1.1;
        }
    }
}

@media only screen and (min-width: 1024px) and (max-width: 1199px) {
    #app:not(:has(#home)) {
        #view-header #cms-header .h5 .right {
            gap: 10px;
            align-items: flex-end;
            padding-bottom: 0;
        }

        #view-header #searchbutton {
            position: relative;
            inset: 0;
            margin-left: 14px;
        }

        #view-header #languagebutton {
            position: relative;
            inset: 0;
        }
    }
}

/* END Header & Gallery */

/* START Live Feed */
#app {
    #home {
        #cms-live-feed {
            .live-feed-lf8 {
                position: relative;
                --lf-slider-arrow-button-size: 50px;
                --image-height-aspect-ratio: 80%;

                .wrapper {
                    display: flex;
                    flex-wrap: wrap;
                    isolation: isolate;

                    &:after {
                        content: '';
                        display: block;
                        position: absolute;
                        inset: 0;
                        background-image: var(--watermark-url);
                        background-size: contain;
                        background-position: left;
                        background-repeat: no-repeat;
                        z-index: -1;
                        opacity: .5;
                    }

                    .see-all-top {
                        width: 100%;

                        .header-slot-container {
                            text-align: left;
                            margin-left: unset;
                        }
                    }

                    .card-gallery {
                        border-bottom: 8px solid var(--secondary-color);
                    }

                    .image-gallery .gallery-controls .buttons .button {
                        border-color: var(--arrow-color);
                    }

                    .cards-wrapper {
                        --gap: 1%;
                    }

                    .card {
                        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.10), 0px 4px 6px -4px rgba(0, 0, 0, 0.10);
                    }

                    .card-content {
                        .card-description {
                            p {
                                word-break: break-all;
                            }
                        }
                    }

                    .card-header {

                        .author,
                        .time-ago {
                            font-weight: 500;
                            font-style: italic;
                        }
                    }
                }
            }

            .buttons-container {
                display: flex;
                column-gap: 10px;

                .slider-button.left {
                    margin-right: 0;
                }

                .slider-button {

                    &:after {
                        background-color: var(--arrow-border-color);
                    }

                    &:hover {
                        background-color: transparent;
                    }
                }
            }

            .see-all-bottom {
                margin-top: 25px;
                margin-left: 20px;
            }
        }
    }
}

/* END Live Feed */

/* START News */
#home #news-n2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;

    & .news-content,
    & .more-headlines-content {
        display: contents;
    }

    &.light .news-image::before,
    .more-headlines-header,
    .outer-snippet,
    .more-headlines-content .story:nth-child(n+3),
    .news-snippet {
        display: none;
    }

    & .see-all-top,
    & .see-all-bottom {
        grid-column: 1 / -1;
        width: 100%;
        margin: 0;
    }

    & .story {
        margin: 0;
        width: 100%;

        >a {
            display: flex;
            flex-direction: column;
        }

        .news-image-container {
            width: 100%;
            max-width: none;
            margin: 0 0 16px 0;
        }

        .news-title {
            width: 100%;
            padding: 0;
            font-size: 18px;
            font-weight: 600;
            line-height: 28px;
        }
    }

    & .news-content:not(.more-headlines-content) .story:first-child .inner-snippet {
        display: block;
        margin-top: 8px;
        padding-top: 0;
        font-weight: 400;
    }

    & .N2-more-story .image-hidden-wrapper {
        border-top: 8px solid var(--news-accent-border-color);
    }


    @media only screen and (min-width: 600px) {
        grid-template-columns: repeat(2, 1fr);

        .news-content:not(.more-headlines-content) .story:first-child {
            grid-column: 1 / -1;
        }
    }

    @media only screen and (min-width: 960px) {
        grid-template-columns: repeat(3, 1fr);

        .news-content:not(.more-headlines-content) .story:first-child {

            >a {
                flex-direction: row;
                gap: 32px;
                align-items: flex-start;
            }

            .news-image-container {
                width: 65%;
                margin-bottom: 0;
            }

            .news-title {
                width: 35%;
                font-size: 24px;
            }

            .inner-snippet {
                font-size: 16px;
            }
        }
    }
}

/* END News */

/* START Events */
#home .events-e7 {
    --events-custom-border-radius: 12px;

    @media only screen and (min-width: 600px) {
        position: relative;
        padding-bottom: 64px;

        & .see-all-container.see-all-top {
            position: static;

        }

        & .see-all-button {
            position: absolute;
            bottom: 40px;
            left: 30px;
        }
    }

    & .events-card {
        margin-bottom: 48px;

        .events-title {
            font-size: 22.4px;
        }

        .events-description {
            padding: unset;
            padding-left: 32px;
        }
    }

    & .events-date {
        border-top-right-radius: var(--events-custom-border-radius, var(--custom-border-radius));
        border-bottom-right-radius: var(--events-custom-border-radius, var(--custom-border-radius));
        height: 98px;
        width: 98px;

        .month {
            font-weight: 500;
        }

        .date-number {
            font-size: 40px;
            font-weight: 600;
        }

    }
}

/* END Events */

/* START Programs */
#home #programs-v3 .nav .button-section {
    margin-left: 0;
}

/* END Programs */

/* START Custom Progams V13 */
.custom-programs-v13 {
    --custom-programs-v13-snippet-text: #333333;
    --custom-programs-v13-bg-color: #FFFFFF;

    background-color: var(--custom-programs-v13-bg-color);
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;

    .v13-header-container {
        margin-bottom: 32px;
    }

    .v13-section-title {
        margin: 0;
        color: var(--primary-color);
    }

    .v13-cards-container {
        width: 100%;
    }

    .v13-cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
        margin-bottom: 40px;

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

        @media only screen and (max-width: 599px) {
            grid-template-columns: 1fr;
            gap: 48px;
        }
    }

    .v13-card {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .v13-card-image-wrapper {
        position: relative;
        margin: 12px 12px 24px 12px;
        z-index: 1;

        &::before {
            content: "";
            position: absolute;
            top: var(--custom-programs-v13-corner-offset, -12px);
            right: var(--custom-programs-v13-corner-offset, -12px);
            width: 75%;
            height: 75%;
            background-color: var(--primary-color);
            border-radius: 8px;
            z-index: -1;
            transition: all .25s linear;
        }

        &::after {
            content: "";
            position: absolute;
            bottom: var(--custom-programs-v13-corner-offset, -12px);
            left: var(--custom-programs-v13-corner-offset, -12px);
            width: 75%;
            height: 75%;
            background-color: var(--secondary-color);
            border-radius: 8px;
            z-index: -1;
            transition: all .25s linear;
        }

        &:hover::before {
            top: var(--custom-programs-v13-corner-offset-hover, -15px);
            right: var(--custom-programs-v13-corner-offset-hover, -15px);
        }

        &:hover::after {
            bottom: var(--custom-programs-v13-corner-offset-hover, -15px);
            left: var(--custom-programs-v13-corner-offset-hover, -15px);
        }

        .v13-card-image {
            display: block;
            width: 100%;
            aspect-ratio: 3 / 2;
            border-radius: 8px;
            overflow: hidden;

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

    .v13-card-content {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }

    .v13-card-title {
        color: var(--primary-color);
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 8px;
        line-height: 26px;
        letter-spacing: 0.8px;
        display: block;
    }

    .v13-card-snippet {
        color: var(--custom-programs-v13-snippet-text);
        font-size: 16px;
        font-weight: 400;
        line-height: 27.2px;
        letter-spacing: 0.32px;
        margin-bottom: 12px;
        display: block;
    }

    .v13-card-read-more {
        color: var(--primary-color);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        display: inline-block;

        a {
            text-decoration: none;
            color: inherit;
        }

        &:hover {
            text-decoration: underline;
        }
    }

    .v13-footer-container {
        display: flex;
        justify-content: flex-start;

        @media only screen and (max-width: 599px) {
            justify-content: center;
        }
    }

    .v13-see-all-btn {
        background-color: var(--secondary-color);
        color: var(--secondary-color-contrast);
        text-decoration: none;
        display: inline-block;
        cursor: pointer;
        transition: opacity 0.2s ease;

        &:hover {
            opacity: 0.9;
        }
    }
}

/* END Custom Programs V13 */

/* START Download App */
#download-app-v3 {
    /* background color for the whole section */
    --download-app-v3-bg-color: var(--secondary-color);
    /* text color for the whole section - compliant with the --download-app-v3-bg-color */
    --download-app-v3-text-color: #fff;

    position: relative !important;
    background-color: transparent !important;
    overflow: hidden;
    z-index: 1;
}

#home .download-app-v3::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('https://cmsv2-shared-assets.apptegy.net/Schools/Rutherford-County-Schools-5892/images/DWAppBG.jpg');
    background-size: cover;
    background-position: center;
    z-index: -2;
}

#home .download-app-v3::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--download-app-v3-bg-color);
    opacity: 0.85;
    z-index: -1;
}

#home .download-app-v3__l,
#home .download-app-v3__r {
    position: relative;
    z-index: 2;
}

/* END Download App */

/* START Footer */
#cms-footer {
    border-top: 4px solid;
    border-image: linear-gradient(90deg, #027D3E 0%, #F2A819 52.4%, #7EA4FD 88.94%) 1;
}

/* END Footer */