/*
Gibson 600 - alternative: Nato Sans

Calibri (700 400) - alternative: Nunito Sans

Museo 400, 700 - alternative: "PT Serif", serif;
*/
:root {
    --side-padding: 25px;
    --vertical-padding: 40px;
    --font-size-heading-h1-bigger: clamp(2.25rem, -1.01rem + 5.323vw, 4.313rem);
    /* 36 > 69, 980 > 1600 */
    --font-size-heading-h1: clamp(2rem, -1.161rem + 5.161vw, 4rem);
    /* 32 > 64, 980 > 1600 */
    --font-size-heading-h2: clamp(1.5rem, -0.081rem + 2.581vw, 2.5rem);
    /* 24 > 40, 980 > 1600 */
    --font-size-heading-h3: clamp(1.313rem, 0.226rem + 1.774vw, 2rem);
    /* 21 > 32, 980 > 1600 */
    --font-size-heading-h4: clamp(1.125rem, 0.532rem + 0.968vw, 1.5rem);
    /* 18 > 24, 980 > 1600 */
    --font-size-heading-h5: clamp(1rem, 0.605rem + 0.645vw, 1.25rem);
    /* 16 > 20, 980 > 1600 */
    --font-size-heading-h6: clamp(0.875rem, 0.48rem + 0.645vw, 1.125rem);
    /* 14 > 18, 980 > 1600 */
}

body.conroe-isd {
    --third-color: #DA291C;
    --third-color-contrast: #FFF;
    --fourth-color: #00A4EB;
    --fourth-color-contrast: #000;
    --fifth-color: #31C400;
    --fifth-color-contrast: #000;
}

body {
    --district-primary-bright-blue: var(--fourth-color);
    --ashy-blue-gray: #9CA3AF;
    --breadcrumb-color: var(--third-color, var(--primary-color));
    --dark-button-bg: var(--fourth-color, var(--primary-color));
    --dark-button-color: var(--fourth-color-contrast, var(--primary-color-contrast));
}

#app,
.pb-main,
body,
html,
button,
#h3 .utility-menu .utilities-bar .utilities,
#h3 .utility-menu .utilities-bar .translate-button .translate-text {
    font-family: "Nunito Sans", sans-serif !important;
    --font-family: "Nunito Sans", sans-serif !important;
    --secondary-font-family: "PT Serif", serif;
    --font-family-heading: 'Noto Sans';
}

/* START See all buttons and titles from homepage */
#app #home .see-all-container a {
    border-radius: 50vw;
    padding: 10px 16px;
    position: relative;
    display: flex;
    align-items: center;
    border: 1px solid currentColor;
    gap: 5px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;

    &::after {
        content: '';
        width: 18px;
        height: 18px;
        background-color: currentColor;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5287L8.47133 12.4714L12.9427 8.00002L8.47133 3.52869L7.52867 4.47135L10.3907 7.33335H4V8.66669H10.3907L7.52867 11.5287Z' fill='white'/%3E%3C/svg%3E");
        mask-repeat: no-repeat no-repeat;
        mask-position: center center;
        mask-size: contain;
        transition: all .35s ease-in-out;
    }

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

#app .header-slot-container h2 {
    font-family: var(--font-family-heading);
    font-weight: 700;
    font-size: var(--font-size-heading-h2, 40px);
    border: 0;
    padding: 0;
}

#app .see-all-container.monterrey .header-top,
#app .see-all-container.monterrey h3 {
    font-size: 16px;
}

#app .fullwidth .header-slot-container h2 {
    font-size: var(--font-size-heading-h1, 64px);
}

/* END See all buttons and titles from homepage */

/* ----------------------------------- */
/* ------------- Gallery ------------- */
/* ----------------------------------- */
body:not(.conroe-isd) #home #cms-gallery #g2 .text {
    width: fit-content;
}

@media only screen and (min-width: 1280px) {
    #cms-gallery {
        .text {
            top: 15vw;
            bottom: auto;
            left: var(--side-padding);
            border-radius: 16px;
        }

        .left-arrow.button-action,
        .right-arrow.button-action {
            top: auto;
            bottom: 160px;
            transform: none;

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

        .left-arrow.button-action {
            left: auto;
            right: 70px;
        }

        .right-arrow.button-action {
            right: 20px;
        }

        .position {
            left: auto;
            right: 60px;
            bottom: 140px;
        }
    }
}

/* ----------------------------------- */
/* ------------- Gallery ------------- */
/* ----------------------------------- */

/* ---------------------------------- */
/* ------------- Header ------------- */
/* ---------------------------------- */
#view-header #cms-header {
    box-sizing: border-box;

    .menu-field {
        text-transform: none;
    }

    #languagebutton .button-action-content {
        display: flex;
        align-items: center;
        gap: 5px;

        & svg {
            display: none;
        }

        .menu-field {
            padding-inline: 0;
        }

        &::before {
            content: '';
            width: 18px;
            height: 18px;
            background-color: var(--ashy-blue-gray);
            display: block;
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9 1.5C4.8645 1.5 1.5 4.8645 1.5 9C1.5 13.1355 4.8645 16.5 9 16.5C13.1355 16.5 16.5 13.1355 16.5 9C16.5 4.8645 13.1355 1.5 9 1.5ZM14.9482 8.25H12.8752C12.7827 6.60843 12.3235 5.00847 11.5312 3.56775C12.4494 3.99679 13.2441 4.65105 13.8416 5.46968C14.439 6.28832 14.8197 7.24474 14.9482 8.25ZM9.3975 3.02025C10.1737 4.04325 11.2177 5.85525 11.3678 8.25H6.7725C6.87675 6.303 7.518 4.479 8.61075 3.0195C8.73975 3.012 8.86875 3 9 3C9.13425 3 9.2655 3.012 9.3975 3.02025ZM6.516 3.54525C5.778 4.9635 5.352 6.5715 5.2725 8.25H3.05175C3.18133 7.23588 3.56748 6.27158 4.17367 5.44831C4.77986 4.62505 5.58606 3.97004 6.516 3.54525ZM3.05175 9.75H5.28225C5.38425 11.5343 5.781 13.1085 6.44925 14.4225C5.53589 13.992 4.7458 13.3381 4.15197 12.5215C3.55814 11.7048 3.17975 10.7516 3.05175 9.75ZM8.5875 14.9797C7.53675 13.7062 6.9165 11.922 6.78075 9.75H11.3655C11.2095 11.8298 10.5278 13.647 9.41325 14.979C9.27675 14.988 9.14025 15 9 15C8.8605 15 8.72475 14.988 8.5875 14.9797ZM11.5958 14.4008C12.312 13.0553 12.7493 11.475 12.864 9.75H14.9475C14.8209 10.7432 14.448 11.689 13.8626 12.5013C13.2772 13.3135 12.4979 13.9665 11.5958 14.4008Z' fill='%239CA3AF'/%3E%3C/svg%3E");
            mask-repeat: no-repeat no-repeat;
            mask-position: center center;
            mask-size: contain;
        }
    }

    #menubutton .hamburger path {
        fill: var(--ashy-blue-gray);
    }

    #m4 .m4-menu--bar {
        justify-content: center;

        .m4--menu-item .m4--menu-item-text {
            font-weight: 600;
        }
    }

    @media (width >=961px) {
        #h1 {
            box-shadow: none;

            & .logo {
                height: 52px;
            }

            & .left {
                margin-left: 15px;
            }

            & .right {
                flex: 1;
                padding: 0;

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

                .right-right-menu {
                    align-items: center;
                    margin-bottom: 0;
                }

                .schools-menu-container {
                    order: -1;
                    margin-right: auto;
                    margin-left: 20px;

                    #schoolsbutton {
                        background-color: var(--secondary-color);
                        color: var(--secondary-color-contrast);
                        padding: 13px 10px;
                        height: 100%;
                        box-sizing: border-box;
                        border-radius: 50vw;

                        .button-action-content {
                            display: flex;
                            align-items: center;
                            gap: 5px;

                            &::before {
                                content: '';
                                width: 20px;
                                height: 20px;
                                display: block;
                                background-color: var(--secondary-color-contrast);
                                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.2694 2.25898L11.9181 1.30189L9.84434 0.5V3.53513H10.2694L10.2694 2.25898Z' fill='white'/%3E%3Cpath d='M4.2605 8.5585H16.12V13.1319H4.2605V8.5585Z' fill='white'/%3E%3Cpath d='M12.3967 3.748H7.87663V8.26803L12.3967 8.26889V3.748ZM10.1368 7.5237C9.2995 7.5237 8.62091 6.84511 8.62091 6.00786C8.62091 5.1706 9.2995 4.49202 10.1368 4.49202C10.974 4.49202 11.6526 5.1706 11.6526 6.00786C11.6526 6.84511 10.974 7.5237 10.1368 7.5237Z' fill='white'/%3E%3Cpath d='M0.857178 13.3735V20.5H6.08246C6.22042 18.334 8.01562 16.6181 10.2169 16.6181C12.4182 16.6181 14.2133 18.334 14.3513 20.5H20.0551L20.0542 13.3735H0.857178Z' fill='white'/%3E%3C/svg%3E");
                                mask-repeat: no-repeat no-repeat;
                                mask-position: center center;
                                mask-size: contain;
                                margin-left: 5px;
                            }
                        }

                        .menu-field {
                            color: currentColor !important;
                        }

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

                    #schools-menu-sm1 {
                        max-width: calc(100% - 20px);
                        left: 10px;
                        border-bottom-left-radius: 20px;
                        border-bottom-right-radius: 20px;
                    }
                }
            }
        }
    }

    @media (width <=960px) {
        #h1 .mobile-header {
            padding: 25px 15px;
            align-items: center;
            justify-content: space-between;
            box-sizing: border-box;

            &.menu-open {
                .main-content {
                    order: 1;
                    padding-bottom: 25px;
                }

                .left-icon {
                    order: 2;
                    padding-bottom: 25px;
                }

                .menu-mobile {
                    order: 3;
                    height: calc(100dvh + 48px);
                    overflow-y: auto;
                }
            }

            .left-icon {
                order: 2;
                position: static;
                transform: unset;
                margin: unset;
                height: unset;

                #menubutton svg {
                    fill: var(--bg-color) !important;
                }

                #closebutton svg path,
                #menubutton svg path {
                    fill: var(--nav-color) !important;
                }
            }

            .main-content {
                flex-direction: row;
                width: calc(100% - 23px);
                height: auto;

                .logo {
                    margin-bottom: 0;
                }

                .school-info {
                    padding-bottom: 0;

                    .name .org-name {
                        font-size: 16px;
                    }
                }
            }

            .menu-mobile {
                .search-translate-buttons .menu-field {
                    display: block;
                    color: var(--mobile-menu-text-color) !important;
                    font-weight: 400;
                }

                #languagebutton svg path,
                #explore-header-collapsible svg path {
                    fill: var(--mobile-menu-text-color) !important;
                }
            }
        }
    }
}

/* ---------------------------------- */
/* ------------- Header ------------- */
/* ---------------------------------- */

/* ---------------------------------------- */
/* ------------- Floating Nav ------------- */
/* ---------------------------------------- */
#home #floating-nav {
    .button .button-link {
        border-top-left-radius: 9px;
        border-bottom-left-radius: 9px;

        .link-wrapper {
            border: 2px solid #FFF;
            border-right: none;
            border-top-left-radius: 9px;
            border-bottom-left-radius: 9px;
            background-color: color-mix(in srgb, var(--button-bg-color) 60%, transparent);

            .button-title {
                font-size: 22px;
                font-family: var(--secondary-font-family);
            }

            body.conroe-isd & .icon-wrapper svg path {
                fill: var(--district-primary-bright-blue, var(--icon-and-text-color));
            }
        }
    }
}

/* ---------------------------------------- */
/* ------------- Floating Nav ------------- */
/* ---------------------------------------- */

/* ----------------------------------------- */
/* ------------- Custom Events ------------- */
/* ----------------------------------------- */
#home .events-e6 {
    body.conroe-isd & {
        --top-heading-color: var(--fifth-color) !important;
        --event-month-color: var(--district-primary-bright-blue, var(--secondary-color));
        --event-date-color: var(--district-primary-bright-blue, var(--secondary-color));
    }

    .events-container .events-wrapper .event-card .details .event-title a {
        font-family: var(--secondary-font-family);
        font-size: var(--font-size-heading-h4);
        font-weight: 400;
        line-height: 1.2;
    }
}

/* ----------------------------------------- */
/* ------------- Custom Events ------------- */
/* ----------------------------------------- */

/* --------------------------------------------------- */
/* ------------- Custom What's Happening ------------- */
/* --------------------------------------------------- */
#home .main .left-sidebar>div:has(.custom-whats-happening-v1) {
    height: auto;
    position: sticky;
    top: 0;
}

#home .custom-whats-happening-v1 {
    &.style-bold .header-slot-container {
        border-right: none;

        h2 {
            color: var(--primary-color);
        }
    }

    &:not(:has(.link-actions)) .only-in-cms {
        display: none !important;
    }

    .wh-slider-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        margin-top: 24px;
        width: 100%;

        .wh-swiper {
            width: 100%;
            height: 544px;
            overflow: hidden;
        }

        .wh-swiper .swiper-wrapper>div {
            display: flex;
            height: auto;
        }

        .wh-swiper-button-prev,
        .wh-swiper-button-next {
            width: 48px;
            height: 48px;
            background-color: var(--custom-wh-arrows-bg-color, var(--primary-color));
            border-radius: 50vw;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: transform 0.2s ease, background-color 0.2s ease;
            z-index: 10;

            svg {
                display: block;
            }

            &.swiper-button-disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            &:not(.swiper-button-disabled):hover {
                transform: scale(1.05);
                background-color: var(--custom-wh-arrows-hover-bg-color, color-mix(in srgb, var(--primary-color) 73%, #000064));
            }

            &::after {
                content: '';
                display: block;
                width: 14px;
                height: 8px;
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        }

        .wh-swiper-button-prev::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 7L7 1L13 7' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        }

        .wh-swiper-button-next::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
        }

        .wh-card {
            display: grid !important;
            grid-template-columns: 1fr 1fr;
            background-color: var(--custom-wh-card-bg-color, #F1F1F1);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            box-sizing: border-box;
            width: 100% !important;
            height: 260px !important;

            .wh-content {
                padding: 24px;
                display: flex;
                flex-direction: column;
                justify-content: center;

                h4 {
                    color: var(--custom-wh-card-title-color, var(--primary-color));
                    font-size: 16px;
                    font-weight: 700;
                    text-transform: uppercase;
                    display: -webkit-box;
                    -webkit-line-clamp: 3;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin: 0 0 12px 0;
                }

                .desc-text {
                    color: var(--custom-wh-card-desc-color, #4B5563);
                    font-size: 14px;
                    line-height: 1.5;
                    margin-bottom: 24px;

                    p {
                        display: -webkit-box;
                        -webkit-line-clamp: 3;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        margin: 0;
                    }
                }

                .card-link a {
                    color: var(--custom-wh-card-link-color, var(--primary-color));
                    font-weight: 700;
                    font-size: 14px;
                    text-decoration: none;

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

            .wh-image-wrapper {
                position: relative;
                width: 100%;
                height: 100%;
                min-height: 200px;

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


/* --------------------------------------------------- */
/* ------------- Custom What's Happening ------------- */
/* --------------------------------------------------- */

/* --------------------------------------- */
/* ------------- Custom News ------------- */
/* --------------------------------------- */
#home #news-n2 {
    .story {
        .news-title {
            font-family: var(--secondary-font-family);
            font-size: var(--font-size-heading-h4);
            font-weight: 500;
            line-height: 1.3;
        }
    }
}

/* --------------------------------------- */
/* ------------- Custom News ------------- */
/* --------------------------------------- */

/* -------------------------------------------- */
/* ------------- Custom Live Feed ------------- */
/* -------------------------------------------- */
#app .live-feed-lf7 {
    position: relative;

    .posts-wrapper {
        .card-content .post {
            width: 520px;
            max-width: 90vw;
            min-height: 220px;

            border-radius: 20px;
            padding: 32px;
            box-sizing: border-box;
            box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.04), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);

            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto 1fr;
            grid-template-areas:
                "header header"
                "text image";
            gap: 16px;

            .post-info {
                grid-area: header;
                text-transform: uppercase;
                margin-bottom: 0;

                img {
                    width: 40px;
                    height: 40px;
                    object-fit: cover;
                    border-radius: 50vw;
                }

                .author {
                    font-weight: 700;
                }

                &>span {
                    display: none;
                }

                .time-ago {
                    margin-left: 8px;
                    padding-left: 10px;
                    display: block;
                    position: relative;
                    font-weight: 400;

                    &::after {
                        content: '';
                        position: absolute;
                        left: 0;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 4px;
                        height: 4px;
                        display: block;
                        border-radius: 50%;
                        background-color: currentColor;
                    }
                }
            }

            .post-status {
                grid-area: text;
                display: flex;
                flex-direction: column;
                gap: 12px;
                margin-bottom: 0;
                font-weight: 400;

                a {
                    display: inline-flex;
                    align-items: center;
                    gap: 5px;
                    font-size: 15px;
                    font-weight: 700;
                    margin-top: auto;
                    text-decoration: none;

                    &::after {
                        content: '';
                        display: inline-block;
                        width: 18px;
                        height: 18px;
                        background-color: currentColor;
                        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M8.46975 12.9697L9.53025 14.0302L14.5605 8.99998L9.53025 3.96973L8.46975 5.03023L11.6895 8.24998H4.5V9.74998H11.6895L8.46975 12.9697Z' fill='%23002F6C'/%3E%3C/svg%3E");
                        mask-repeat: no-repeat;
                        mask-position: center;
                        mask-size: contain;
                        transition: all .35s ease-in-out;
                    }

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

            .thumbnails-wrapper {
                grid-area: image;
                width: 84px;
                height: 84px;
                display: block;

                .live-feed-image-thumbnail {
                    display: none;
                    width: 84px;
                    height: 84px;
                    border-radius: 8px;
                    margin: 0;

                    &:first-of-type {
                        display: block;
                    }
                }
            }
        }
    }

    .nav.pager-right {
        position: absolute;
        top: 20px;
        right: 20px;
        margin-top: 0 !important;

        .pager-section {
            display: none;
        }

        .button-section {
            display: flex;
            gap: 12px;

            button {
                width: 48px;
                height: 48px;
                border-radius: 50vw;
                background-color: #fff !important;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: transform 0.2s ease;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);

                &:hover {
                    transform: scale(1.05);
                }
            }
        }
    }
}

@media (width <=768px) {
    #app .live-feed-lf7 {
        .posts-wrapper .card-content .post {
            grid-template-columns: 1fr;
            grid-template-areas:
                "header"
                "text"
                "image";
            padding: 24px;
            width: 85vw;

            .thumbnails-wrapper {
                width: 100%;
                height: 200px;
                margin-top: 16px;

                .live-feed-image-thumbnail:first-of-type {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .nav.pager-right {
            position: static;
            display: flex;
            justify-content: center;
            margin-top: 24px !important;
        }
    }
}

/* -------------------------------------------- */
/* ------------- Custom Live Feed ------------- */
/* -------------------------------------------- */

/* ----------------------------------------------- */
/* ------------- Custom Programs V13 ------------- */
/* ----------------------------------------------- */
.custom-programs-v13 {
    --card-bg-color: var(--secondary-color);
    --card-text-color: var(--secondary-color-contrast);
    padding-top: 3em;
    padding-bottom: 5em;
}

.custom-programs-v13__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: 2%;

}

.custom-programs-v13-item {
    border-radius: 1em;
    overflow: hidden;
    margin-bottom: 1em;
    margin-top: 1em;

    &:has(.custom-programs-v13-image a:hover) {
        .custom-programs-v13-link a {
            color: var(--card-text-color);
            background-color: transparent;
        }
    }

    &:has(.custom-programs-v13-link a:hover) {
        .custom-programs-v13-image img {
            opacity: .8;
        }
    }
}

.custom-programs-v13-item__image {
    .custom-programs-v13-image {
        display: block;
        aspect-ratio: 4/3;
        overflow: hidden;

        a {
            &:hover {
                img {
                    opacity: .8;
                }
            }
        }

        img {
            display: block;
            width: 100%;
            aspect-ratio: 4/3;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all .25s linear;
        }
    }
}

.custom-programs-v13-item__content {
    background-color: var(--card-bg-color);
    color: var(--card-text-color);
}

.custom-programs-v13-item__content {
    padding: 1.5em;
    position: relative;
    isolation: isolate;

    h4 {
        font-size: 2em;

        @media screen and (max-width: 1200px) {
            font-size: 1.5em;
        }

    }

    &:after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(333deg, rgba(0, 0, 0, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
        z-index: -1;
    }

}

.custom-programs-v13-text {
    margin-top: .5em;
    --font-size: 18px;
    --line-height: 1.4;
    --lines-to-show: 4;

    @media screen and (max-width: 1200px) {
        --font-size: 16px;
    }

    display: block;
    display: -webkit-box;
    font-size: var(--font-size);
    line-height: var(--line-height);
    height: calc(var(--line-height) * var(--lines-to-show));
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines-to-show);

}

.custom-programs-v13-link {
    display: block;
    margin-top: 1em;

    a {
        display: inline-block;
        padding: .65em 1.5em;
        background-color: var(--card-text-color);
        border: 1px solid var(--card-text-color);
        color: var(--card-bg-color);
        text-decoration: none;
        border-radius: .5em;
        font-weight: 600;
        transition: all .25s linear;

        &:hover {
            color: var(--card-text-color);
            background-color: transparent;
        }
    }
}

/* ----------------------------------------------- */
/* ------------- Custom Programs V13 ------------- */
/* ----------------------------------------------- */

/* ----------------------------------------------- */
/* ------------- Custom Programs V10 ------------- */
/* ----------------------------------------------- */
#home .custom-programs-section-v10 {
    & .programs-container {
        &.swiper-initialized {
            & .swiper-pagination-custom-programs-v10 {
                display: none;
            }
        }
    }
}

/* ----------------------------------------------- */
/* ------------- Custom Programs V10 ------------- */
/* ----------------------------------------------- */

/* ---------------------------------- */
/* ------------- Footer ------------- */
/* ---------------------------------- */
#view-footer {
    position: relative;
}

#view-footer #footer-f1 .footer-column-last {
    display: none;
}

#view-footer #footer-f1 {
    padding-bottom: 25px;
    padding-inline: var(--side-padding);

    .logo-wrapper {
        margin-bottom: 15px;
    }

    h2 {
        font-size: var(--font-size-heading-h4);
        line-height: 1.1;
        font-family: var(--font-family-heading);
        font-weight: 400;
        margin-bottom: 25px;
    }

    .footer-columns {
        padding-left: 30px;
        border-left: 1px solid rgba(255, 255, 255, 0.16);
        padding-bottom: 30px;

        & ul li a {
            border-bottom: 1px solid rgba(255, 255, 255, 0.16);
            display: block;
            padding-bottom: 12px;
            margin-bottom: 12px;
            font-weight: 700;
        }
    }

    .footer-column-main {
        max-width: 250px;

        &>p span:has(a[href^="tel:"]) {
            color: var(--district-primary-bright-blue, #FFF);
            text-transform: uppercase;
            font-weight: 700;
            padding-top: 15px;

            a {
                display: block;
                font-weight: 400;
                margin-bottom: 10px;
                text-decoration: none;
            }
        }

    }

    .footer-social-links {
        --icon-color: var(--district-primary-bright-blue, #FFF);
        --hover-icon-color: #FFF;
        --hover-opacity: 1;
    }

    .row {
        padding-bottom: 40px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.16);
        margin-bottom: 30px;
    }

    .apptegy-copyright {
        border: 0;
        padding-top: 30px;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }

    .additional-text.additional-text-bottom {
        text-align: left;
        width: 100%;
        padding-top: 20px;

        &>p:first-child {
            font-size: var(--font-size-heading-h4);
            line-height: 1.1;
            font-weight: 400;
            font-family: var(--font-family-heading);
        }

        &>* {
            text-align: left !important;
            font-size: 15px;
        }

        .custom-wrapper {
            display: flex;
            flex-wrap: wrap;
            gap: 20px;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;

            .apptegy-copyright {
                width: auto;
                margin: 0;
                padding: 0;
            }

            ul {
                margin-bottom: 0;
                justify-content: flex-end;

                p {
                    padding: 0;
                }
            }
        }

        &>ul,
        .custom-wrapper ul {
            margin-top: 0;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            gap: 15px 25px;


            & li {
                list-style-type: none;

                p {
                    padding-bottom: 0;
                }

                & a {
                    text-decoration: none;
                    font-weight: 700;

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

@media only screen and (max-width: 960px) {
    #view-footer #footer-f1 {
        .row {
            flex-wrap: wrap;
        }

        .footer-column-main,
        .footer-columns {
            width: 50%;
            min-width: 50%;
            box-sizing: border-box;
        }

    }
}

@media only screen and (max-width: 600px) {
    #view-footer #footer-f1 {

        .footer-column-main,
        .footer-columns {
            width: 100%;
            min-width: 100%;
            box-sizing: border-box;
            border: 0;
        }

        .apptegy-copyright {
            text-align: center;
            display: flex;
            justify-content: center;
            gap: 5px;
        }

        .additional-text.additional-text-bottom,
        .additional-text.additional-text-bottom p {
            text-align: center !important;
        }

        .custom-wrapper ul {
            justify-content: center !important;
        }
    }
}

/* ---------------------------------- */
/* ------------- Footer ------------- */
/* ---------------------------------- */

/* ------------------------------------ */
/* ------------- Sponsors ------------- */
/* ------------------------------------ */
.logos-bar-area {
    padding-inline: var(--side-padding);
    padding-top: var(--vertical-padding);
    padding-bottom: 20px;
    overflow: hidden;
    --imageSize: 275px;
    background-color: var(--primary-color);
}

#logos-bar-area:not(:has(img[src^="http"])) {
    display: none !important;
}

.logos-bar-row,
#logos-bar-area .custom-component-loop-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.custom-component-loop-wrapper {
    display: flex;
    align-items: center;
    white-space: nowrap;
    /* animation: scrollAnimation 30s linear infinite; */
}

/*.logos-bar-row:hover .custom-component-loop-wrapper {
    animation-play-state: paused;
}*/

.custom-component-loop-wrapper img {
    display: block;
    /*    max-width: var(--imageSize);*/
    max-height: var(--imageSize);
    transition: transform 0.25s linear;
    border-radius: 8px;
}

.custom-component-loop-wrapper img:hover {
    transform: scale(1.1);
}

.custom-component-loop-wrapper span {
    margin-right: 35px;
    display: block;
}

@keyframes scrollAnimation {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

.homepage-header {
    padding: 0 32px 40px;
}

.style-light .homepage-header .home-custom-title {
    font-size: 32px;
    text-transform: uppercase;
    font-weight: 400;
    display: flex;
    align-items: center;
}

.style-light .homepage-header .home-custom-title:after {
    content: close-quote;
    display: inline-block;
    width: 56px;
    height: 2px;
    background-color: var(--secondary-color);
    margin: 0 24px;
}

/* @media screen and (max-width: 1200px) {
    .custom-component-loop-wrapper {
        animation: scrollAnimation 20s linear infinite;
    }
} */

@media screen and (max-width: 600px) {
    .logos-bar-area {
        overflow: hidden;
        --imageSize: 175px;
    }

    /* .custom-component-loop-wrapper {
        animation: scrollAnimation 10s linear infinite;
    } */

    .homepage-header {
        padding: 20px;
    }
}

/* ------------------------------------ */
/* ------------- Sponsors ------------- */
/* ------------------------------------ */

/* ----------------------------------------------- */
/* ------------- Download Mobile App ------------- */
/* ----------------------------------------------- */
.footer-social.custom-section {
    background-color: var(--district-primary-bright-blue, var(--secondary-color));
    color: var(--app-text-color, var(--secondary-color-contrast));
    padding-inline: var(--side-padding);
    padding-block: var(--vertical-padding);
    position: relative;
    min-height: 380px;
    isolation: isolate;
    box-sizing: border-box;

    &::after {
        position: absolute;
        content: '';
        display: block;
        width: 559px;
        height: 382px;
        bottom: 0;
        right: var(--side-padding);
        max-width: 35%;
        background: url(https://cmsv2-shared-assets.apptegy.net/Schools/Conroe-ISD-5052/images/iphone.png) no-repeat right bottom;
        background-size: contain;
    }

    .app-container {
        padding-right: 40%;
        box-sizing: border-box;
        display: flex;
    }

    .app-title {
        font-size: var(--font-size-heading-h1);
        line-height: 1.1;
        font-family: 'Noto Sans';
        font-weight: 600;
        max-width: 538px;
        width: 100%;
        display: block;
    }

    .text {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        padding-top: 20px;
        max-width: 850px;

        & p {
            font-size: 16px;
            line-height: 1.3;
            padding-top: 35px;

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

    .app-links {
        min-width: 168px;

        img {
            width: 168px;
            height: auto;
            max-width: 100%;
            display: block;
            margin-bottom: 5px;
            object-fit: contain;
            transition: all .35s ease-in-out;
        }

        a:hover {
            img {
                transform: scale(1.1);
                position: relative;
            }
        }
    }
}

@media only screen and (max-width: 960px) {
    .footer-social.custom-section {

        &::after {
            height: 175px;
            width: 100%;
            max-width: 100%;
            background-position: center bottom;
        }

        .app-container {
            padding-right: 0;
            padding-bottom: 190px;
        }

        .text {
            padding-top: 25px;
        }

        .text p {
            padding-top: 0;
        }
    }
}

@media only screen and (max-width: 600px) {
    .footer-social.custom-section {
        .text {
            flex-direction: column;
            justify-content: center;

            .app-links {
                display: flex;
                gap: 5px;
                justify-content: center;
            }
        }
    }
}

.conroe-isd {
    --app-text-color: #000;
}

/* ----------------------------------------------- */
/* ------------- Download Mobile App ------------- */
/* ----------------------------------------------- */

/* --------------------------------------------------------------- */
/* ------------- OLD CODE (Mainly CMS pages related) ------------- */
/* --------------------------------------------------------------- */
#container #page-wrapper #page {
    overflow: hidden;
}

#page .block .heading-block {
    font-family: var(--font-family-heading);
}

#page .block .heading-block h1 {
    font-size: var(--font-size-heading-h1);
    line-height: 1.2;
}

#page .row:has(.custom-cms-section) .block .heading-block h1 {
    font-size: var(--font-size-heading-h1-bigger);
    line-height: 1.2;
}

#page .block .heading-block h2 {
    font-size: var(--font-size-heading-h2);
    line-height: 1.4;
}

#page .block .heading-block h3 {
    font-size: var(--font-size-heading-h3);
    line-height: 1.4;
}

#page .block .heading-block h4 {
    font-size: var(--font-size-heading-h4);
    line-height: 1.4;
}

#page .block .heading-block h5 {
    font-size: var(--font-size-heading-h5);
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
}

#page .block .text-block p,
#page .block div.card-block.separator .card-text .headline+.content p {
    font-size: 16px;
    line-height: 1.5;
}

#page .block .card-block.shadow {
    border-radius: 5px;
    border-left: 5px solid var(--link-color);
}

#page .block .card-block.shadow.has-image {
    align-items: center;
}

#page .block .card-block.shadow .headline {
    margin-bottom: 0;
}

#page .block .card-block.shadow .headline * {
    color: var(--heading-color);
}

.card-block .card-text.shadow p {
    margin-top: 10px;
}

.card-block .card-text p:empty {
    display: none;
}

#page .quote-block.design-1,
#page .quote-block.design-3 {
    border-color: var(--secondary-color) !important;
}

#page .quote-block.design-2 cite {
    height: auto !important;
}

#page .block .quote-block.design-2 {
    padding-left: 95px !important;
}

#page .block .quote-block .design-2-quotes:before {
    left: 0;
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Components/CMSv2-page-style/Images/blockquote-gray-icon.svg) no-repeat left top;
    background-size: contain;
    font-size: 0;
    width: 70px;
    height: 64px;
    display: block;
}

#page .block .quote-block.design-2 blockquote {
    font-size: 18px;
    line-height: 1.7;
    font-weight: 300;
    font-style: normal;
    color: #181818;
}

#page .block .table-v2-block p {
    padding: 10px;
}

@media only screen and (min-width: 451px) {
    #page .block div.card-block.card-block .card-text .headline+.content {
        margin-left: 20px !important;
    }
}

#page .block .accordion-block .accordion-panel .section-header {
    margin-bottom: 0;
    padding: 15px;
}

#page .block .accordion-block .accordion-panel h2+div {
    padding: 20px;
}

#page .block .accordion-block .accordion-panel .collapsible-section:not(.default) {
    border: 1px solid #e0e0e0;
    border-radius: 6px;
}

#page .block .accordion-block .accordion-panel .collapsible-section.default h2+div {
    border: 1px solid #e0e0e0;
    border-top: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

.accordion-panel .collapsible-section.default .section-header {
    position: relative;
}

.accordion-panel .collapsible-section.default .section-header:before {
    position: absolute;
    right: 11px;
    top: 11px;
    height: 24px;
    width: 24px;
    content: close-quote;
    font-size: 0;
    display: block;
    background: var(--link-color);
    z-index: 0;
    border-radius: 50%;
}

.accordion-panel .collapsible-section.default .section-header svg {
    position: relative;
    z-index: 1;
}

.accordion-panel .collapsible-section.default .section-header svg.chevron-open {
    top: -3px;
}

.accordion-panel .collapsible-section.default .section-header svg.caret-open {
    top: -4px;
}

.accordion-panel .collapsible-section.default .section-header svg.plus-closed,
.accordion-panel .collapsible-section.default .section-header svg.minus-open {
    top: -2px;
}

.accordion-panel .collapsible-section.default .section-header svg path {
    fill: #fff;
}

#page .block .card-block.separator {
    position: relative;
    border: 0;
    padding: 0;
    margin: 0;
}

#page .block .card-block.separator .headline,
#page .block div.card-block.separator .card-text .headline+.content {
    padding-left: 0;
    margin-left: 0 !important;
    padding-right: 0;
    margin-right: 0;
}

#page .block div.card-block.separator .card-text .headline+.content,
#page .block div.card-block.separator.has-image .card-left {
    padding-bottom: 30px;
}

#page .block div.card-block.separator.has-image .card-left:first-child {
    margin-right: 20px;
}

#page .block .card-block.separator .headline:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18px;
    display: block;
    content: close-quote;
    font-size: 0;
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Components/CMSv2-page-style/Images/separator-line.svg) repeat-x bottom center;
}

/* Photo gallery page */

#page .gallery-block .image-wrapper {
    position: relative;
    border-radius: 5px;
    z-index: 1;
}

.gallery-block .image-wrapper:after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90px;
    height: 100px;
    max-height: 45%;
    content: close-quote;
    font-size: 0;
    display: block;
    background: url(https://cmsv2-shared-assets.apptegy.net/Global/Components/CMSv2-page-style/Images/hover-Icon.svg) no-repeat center center;
    background-size: contain;
    z-index: -1;
    opacity: 0;
    transition: 0.3s all linear;
}

.gallery-block .image-wrapper:hover:after {
    z-index: 0;
    opacity: 1;
}

.gallery-block .image-wrapper img {
    border-radius: 5px;
    display: block;
    transition: 0.3s all linear;
}

.gallery-block .image-wrapper:hover img {
    opacity: 0.2;
    position: relative;
    z-index: 1;
}

/* START Sidenav */
#sidebarNav {
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px,
        rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

#sidebarNav .navLinks>li:last-child {
    border-radius: 0 !important;
}

/* END Sidenav */
/* START breadcrumb, container and full width hero image */
#page .block:last-child {
    margin-bottom: 0;
}

#page-wrapper #page>.row:not(:last-child):not(.row.ts-full-width-row:first-child:has(.image-container img)) {
    margin-bottom: clamp(1.875rem, -3.065rem + 8.065vw, 5rem);
    /* 30-80, 980-1600 */
}

#page-wrapper .breadcrumb {
    background-color: transparent;

    ul {
        background-color: rgba(255, 255, 255, 0.8);

        li {
            font-size: clamp(1rem, 0.605rem + 0.645vw, 1.25rem);
            text-transform: capitalize;
        }

        li,
        a {
            color: var(--breadcrumb-color);
        }
    }

    ul>li:before {
        background-color: #9CA3AF;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
        mask-repeat: no-repeat no-repeat;
        mask-position: left center;
        mask-size: contain;
        content: '';
    }
}

#page-wrapper {
    .row:not(.ts-full-width-row:first-child) {
        background-color: rgba(255, 255, 255, 0.8);
    }
}

#page .row.ts-full-width-row:first-child:has(.image-container img) {
    .block {
        margin: 0;
    }

    .image-container+p {
        padding: 0;
    }
}

@media only screen and (min-width: 980px) {
    #news-list .page-container {
        width: 100%;
        box-sizing: border-box;
        padding-inline: var(--side-padding);
    }

    #container .breadcrumb {
        & ul {
            padding-inline: 0;
            box-sizing: border-box;
            min-width: calc(100% - (2 * var(--side-padding)));
            margin-inline: var(--side-padding);

            li:first-child {
                margin-left: 15px;
            }
        }
    }

    #container #page-wrapper:has(#page.sidebarWithNav),
    #container #page-wrapper #page:not(.sidebarWithNav) .row:not(.ts-full-width-row) {
        margin-inline: var(--side-padding);
        padding-inline: 15px;
        box-sizing: border-box;
        min-width: calc(100% - (2 * var(--side-padding)));
    }

    #container #page-wrapper:has(#page.sidebarWithNav) {
        & ul {
            margin-inline: 0;

            & li:first-child {
                margin-left: 0;
            }
        }
    }

    /* full with hero image */
    .main#container:has(.row.ts-full-width-row:first-child .image-container img) {
        position: static;

        #page-wrapper {
            margin-top: max(22vw, 250px);

            .breadcrumb {

                ul {
                    border-radius: 24px 24px 0 0;
                    padding-top: clamp(1.25rem, -11.25rem + 15.625vw, 4.375rem);

                    li:first-child {
                        margin-left: 0;
                    }
                }
            }

            .breadcrumb ul,
            #page:not(.sidebarWithNav) .row:not(.ts-full-width-row) {
                padding-inline: clamp(1.563rem, -14.688rem + 20.313vw, 5.625rem);
            }
        }
    }

    #container #page-wrapper:has(.row.ts-full-width-row:first-child .image-container img):has(#sidebarNav) {
        padding-inline: clamp(1.563rem, -14.688rem + 20.313vw, 5.625rem);
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 24px 24px 0 0;

        .breadcrumb ul {
            padding-inline: 0;
            background-color: transparent;
        }

        .row {
            background-color: transparent;
        }
    }

    #page .row.ts-full-width-row:first-child:has(.image-container img) {
        .block {
            margin: 0;
        }

        .image-container img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            z-index: -1;
            height: 35vw;
            min-height: 480px;
            overflow: hidden;
            object-fit: cover;
            object-position: top center;
            mask-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 11%, rgba(255, 255, 255, 1) 100%);
        }
    }

}

@media only screen and (min-width: 1000px) {
    #page-wrapper>#sidebarNav {
        margin-left: 0;
    }

    #page-wrapper>#sidebarNav+#page {
        width: calc(100% - 250px);

        .standard-row,
        .ts.full-width-row {
            padding-right: 0;
        }
    }
}

@media only screen and (min-width: 1350px) {
    #page-wrapper>#sidebarNav+#page {
        width: calc(100% - 350px);
    }
}

@media only screen and (max-width: 979px) {
    #page .row.ts-full-width-row:first-child .image-container img {
        min-height: 250px;
        object-fit: cover;
        mask-image: linear-gradient(0deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 11%, rgba(255, 255, 255, 1) 100%);
    }

    #page .row.ts-full-width-row:first-child:has(.image-container img)+.row {
        margin-top: -100px;
        background-color: rgba(255, 255, 255, 0.8);
        position: relative;
        box-sizing: border-box;
        padding-top: 25px;
        border-radius: 20px 20px 0 0;
    }

    #page .row.ts-full-width-row:first-child:has(.image-container img)~.row {
        width: 90%;
        box-sizing: border-box;
        padding-inline: 20px;
    }
}

/* change columns breakpoints in layouts */
@media only screen and (min-width: 700px) and (max-width: 960px) {

    #page .row.ts-three-column-row,
    #page .row.ts-left-sidebar-row,
    #page .row.ts-right-sidebar-row {
        display: block;
    }

    #page .row.ts-three-column-row .column,
    #page .row.ts-left-sidebar-row .column,
    #page .row.ts-right-sidebar-row .column {
        display: inline-block;
        width: 100%;
        vertical-align: top;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 35px;
    }
}

@media only screen and (max-width: 699px) {
    #page .row {
        display: block;
    }

    #page .row .column {
        display: inline-block;
        width: 100%;
        vertical-align: top;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 25px;
    }
}

/* end change columns breakpoints in layouts */
/* END breadcrumb, container and full width hero image */

/* buttons */
#page .block .button-block .button.link:has(svg) {
    .title {
        margin-right: 8px;
    }

    svg {
        margin-right: 24px;
    }
}

#page .row:has(.custom-cms-section) .block:has(.button-block .outline) {
    overflow: visible;
}

#page .row:has(.custom-cms-section) .button-block {
    gap: 10px;

    &:has(.outline) {
        gap: 15px;
    }

    .button {
        margin: 0;
        transition: background .35s ease-in-out;
        border-radius: 50vw;
    }

    .style-2 {
        border-radius: 30px;
    }

    &:has(.button:nth-child(2)) {
        .button {
            flex: 1 0 auto;
            max-width: 300px;
        }
    }

    .title {
        transition: color .35s ease-in-out;
    }

    svg,
    svg path {
        transition: fill .35s ease-in-out;
    }

    .button {
        &:not(.dark):not(.link) svg path {
            fill: var(--dark);
        }

        &:not(.square.style-2) {
            padding: 10px 20px;
            box-sizing: border-box;
            justify-content: flex-start;

            &.size-large {
                padding: 20px 30px;
            }


            .title {
                position: relative;
                display: flex;
                align-items: center;
                gap: 5px;
                margin: 0;

                &::after {
                    background-color: currentColor;
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: left center;
                    mask-size: contain;
                    content: '';
                    min-width: 20px;
                    min-height: 20px;
                    display: block;
                }
            }
        }

        &:not(.square.style-2)[href$=".pdf"] {
            .title::after {
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cpath d='M3.45642 10.7636H10.2752V11.9001H3.45642V10.7636ZM6.29757 2.80841V7.68722L3.85816 5.24782L3.05469 6.05129L6.8658 9.8624L10.6769 6.05129L9.87343 5.24782L7.43402 7.68722V2.80841H6.29757Z' fill='%230085CA'/%3E%3C/svg%3E");
                mask-repeat: no-repeat no-repeat;
                mask-position: center center;
                mask-size: contain;
            }
        }


        &.outline:hover {
            svg path {
                fill: #FFF;
            }
        }

        &.dark:not(.link) {

            &:not(:hover) {
                background-color: var(--dark-button-bg);

                .title {
                    color: var(--dark-button-color);
                }

                svg,
                svg path {
                    fill: var(--dark-button-color);
                }
            }
        }

        &.outline:not(.link) {
            box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.08), 0px 8px 8px -4px rgba(0, 0, 0, 0.06);
            border-color: #eee;

            &:hover {
                background-color: var(--dark-button-bg);

                .title {
                    color: var(--dark-button-color);
                }

                svg,
                svg path {
                    fill: var(--dark-button-color);
                }
            }
        }

        &.link {
            background-color: transparent;
            justify-content: flex-start;
            padding-left: 0 !important;

            svg {
                display: none;
            }

            .title {
                margin-left: 0;
                font-weight: 700;
            }

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

    .square:not(.style-2) {
        max-width: 500px;
        box-sizing: border-box;
        flex-direction: row;
        justify-content: flex-start;
        border-radius: 50vw;
        min-height: 65px;

        .icon-wrapper {
            margin-block: 0;
            height: 30px;

            .raw-svg>span,
            svg {
                width: 30px;
                height: 30px;
            }
        }

        .title {
            text-align: left;
            margin-left: 15px !important;
            font-size: 18px;
            font-weight: 700;
            line-height: 1.1;
        }

    }
}

#page .row:has(.custom-cms-section) .column:has(.large-buttons) .button-block {
    .square {
        min-height: 85px;
        flex: 1 1 auto;

        .title {
            font-size: calc(var(--font-size-heading-h4));
            flex: 1 1 auto;
            justify-content: space-between;
        }


        .icon-wrapper,
        .icon-wrapper .raw-svg>span,
        svg {
            height: 40px;
            width: 40px;
        }
    }
}

#page .row:has(.custom-cms-section) .column:has(.two-columns-buttons) .button-block {
    --gap: 25px;
    --columns: 1;
    column-gap: var(--gap);

    .button {
        flex: 1 1 auto;
        min-width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
        flex-basis: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
    }
}

@media only screen and (min-width: 960px) {
    #page .row:has(.custom-cms-section) .column:has(.two-columns-buttons).ts-two-column .button-block {
        --columns: 2;
    }
}

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

    #page .row:has(.custom-cms-section) .ts-left-sidebar:nth-child(2):has(.two-columns-buttons) .button-block,
    #page .row:has(.custom-cms-section) .ts-right-sidebar:nth-child(1):has(.two-columns-buttons) .button-block,
    #page .row:has(.custom-cms-section) .ts-one-column:has(.two-columns-buttons) .button-block {
        --columns: 2;
    }
}

/* end buttons */

.row .column:has(.border-radius-12) .image-container img {
    border-radius: 12px;
}

/* Text buttons v1 */
.row:has(.text-buttons) {

    @media only screen and (min-width: 961px) {
        justify-content: space-between;

        .ts-right-sidebar.column:nth-child(1) {
            width: 67%;
        }

        .ts-right-sidebar.column:nth-child(2) {
            width: 33%;
            max-width: 470px;

            .block:has(.button-block) {
                margin-bottom: 10px;
            }
        }
    }

    .block:has(.heading-block)+.block .text-block p {
        font-family: var(--secondary-font-family, var(--font-family));

        span {
            font-size: var(--font-size-heading-h4, clamp(1.125rem, 0.532rem + 0.968vw, 1.5rem)) !important;
        }
    }
}

/* end text buttons v1 */
/* start card buttons v1 */
.row:has(.gray-rounded-column) {

    .ts-left-sidebar:nth-child(1),
    .ts-right-sidebar:nth-child(2) {
        box-sizing: border-box;
        padding: 20px;
        background-color: #F3F4F6;
        border-radius: 24px;

        @media only screen and (min-width: 961px) {
            max-width: 345px;
            min-width: 265px;
        }

        img {
            border-radius: 8px;
        }

        @media only screen and (min-width: 1400px) {
            padding: 30px;
        }
    }

    @media only screen and (min-width: 1280px) {
        .ts-left-sidebar:nth-child(1) {
            margin-right: max(5%, 20px);
        }
    }

    @media only screen and (min-width: 1280px) {
        .ts-right-sidebar:nth-child(2) {
            margin-left: max(5%, 20px);
        }
    }
}

/* end card buttons v1 */
/* start first-col-mxw-460 */
.row:has(.first-col-mxw-460) {
    justify-content: space-between;

    @media only screen and (min-width: 961px) {
        .column:first-child {
            max-width: 460px;
            margin-right: 10%;
        }
    }
}

/* end first-col-mxw-460 */

/* Tabcordions */
.tabcordion *,
.tabcordion *::before,
.tabcordion *::after {
    box-sizing: border-box;
}

.tabcordion .tabs-section-title {
    color: var(--primary-color);
    margin-bottom: 35px;
    max-width: 900px;

    & h2 {
        font-size: var(--font-size-heading-h1, clamp(2rem, -1.161rem + 5.161vw, 4rem));
        line-height: 1.1;
    }
}

.tabcordion.has-tabs .tabcordion--tabs {
    opacity: 1;
    height: auto;
    visibility: visible;
}

.tabcordion.has-tabs .tabcordion--entry {
    min-height: 0;
}

.tabcordion.has-tabs .tabcordion--entry::before {
    display: none;
}

.tabcordion.has-tabs .tabcordion--entry.is-active .tabcordion--entry-content {
    opacity: 1;
    transition: opacity 400ms ease-in-out;
}

.tabcordion.has-tabs .tabcordion--entry .tabcordion--entry-content {
    opacity: 0;
    transition: opacity 400ms ease-in-out;
}

.tabcordion-container {
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid #F3F4F6;
    box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.04), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
}

.tabcordion--tabs {
    opacity: 0;
    height: 0;
    visibility: hidden;
    display: flex;
    flex-flow: wrap;
    margin: 0;
    list-style: none;
    padding: 0;
    background: color-mix(in srgb, var(--primary-color) 1%, transparent);
}

.tabcordion--tabs .tab {
    display: block;
    background: color-mix(in srgb, var(--primary-color) 4%, transparent);
    color: var(--primary-color);
    padding: 20px 20px;
    font-size: 16px;
    font-weight: 400;
    border: 0;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}

.tabcordion--tabs .tab:hover,
.tabcordion--tabs .tab:focus {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    outline: none;
}

.tabcordion--tabs .tab.is-active {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    font-weight: 700;
}

.tabcordion--tabs .tab.is-active:hover,
.tabcordion--tabs .tab.is-active:focus {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.has-tabs .tabcordion--panels {
    border-top: 1px solid #E5E7EB;
    margin-top: -1px;
}

.tabcordion--entry {
    overflow: hidden;
    position: relative;
}

.tabcordion:not(.has-tabs) .tabcordion--entry:not(:first-child) {
    border-top: 1px solid #ddd;
}

.tabcordion--entry::before {
    position: relative;
    content: attr(data-title);
    z-index: 1;
    display: block;
}

.tabcordion:not(.has-tabs) .tabcordion--entry::before {
    background: color-mix(in srgb, var(--primary-color) 3%, transparent);
    color: var(--primary-color);
    padding: 10px 20px;
    cursor: pointer;
}

.tabcordion:not(.has-tabs) .tabcordion:not(.has-tabs) .tabcordion--entry:not(.is-active):before {
    padding-right: 35px;
}

.tabcordion:not(.has-tabs) .tabcordion--entry:hover,
.tabcordion:not(.has-tabs) .tabcordion--entry:focus {
    outline: none;
}

.tabcordion:not(.has-tabs) .tabcordion--entry:hover::before,
.tabcordion:not(.has-tabs) .tabcordion--entry:focus::before {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
}

.tabcordion:not(.has-tabs) .tabcordion--entry:not(.is-active):after {
    content: '';
    position: absolute;
    right: 15px;
    top: 15px;
    width: 12px;
    height: 12px;
    background-color: var(--primary-color);
    mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6H8V0H6V6H0V8H6V14H8V8H14V6Z' fill='%23002F6C'/%3E%3C/svg%3E%0A");
    mask-repeat: no-repeat no-repeat;
    mask-position: center center;
    mask-size: contain;
}

.tabcordion--entry.is-active .tabcordion--entry-content {
    margin-top: 0;
    height: auto;
    opacity: 1;
    transition: margin 400ms ease-out -100ms;
}

.tabcordion:not(.has-tabs) .tabcordion--entry.is-active::before {
    background: color-mix(in srgb, var(--primary-color) 18%, transparent);
    font-weight: 700;
}

.tabcordion:not(.has-tabs) .tabcordion--entry.is-active:hover::before,
.tabcordion:not(.has-tabs) .tabcordion--entry.is-active:focus::before {
    background: color-mix(in srgb, var(--primary-color) 20%, transparent);
}

.tabcordion--entry-container {
    overflow: hidden;
}

.tabcordion--entry-content {
    position: relative;
    margin-top: -100%;
    height: 0;
    opacity: 0;
    transition: margin 500ms ease-in;
    padding: 15px 20px;

    @media only screen and (min-width: 1280px) {
        padding: 25px 30px;
    }
}

.tabcordion--entry-content {
    display: flex;
    flex-direction: column;
    gap: 20px;

    p:not(:last-child) {
        margin-bottom: 20px;
    }

    .panel-content-buttons {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        padding-top: 15px;

        .panel-content-button {
            min-height: 40px;
            text-decoration: none;
            display: flex;
            align-items: center;
            position: relative;
            border: var(--primary-color) solid 1px;
            margin: 0;
            transition: background .35s ease-in-out;
            border-radius: 50vw;
            padding: 10px 20px;
            box-sizing: border-box;
            justify-content: flex-start;

            &:hover {
                background-color: var(--dark-button-bg);

                * {
                    color: var(--dark-button-color);
                }
            }
        }

        .panel-content-button__title {
            color: var(--primary-color);
            position: relative;
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 0;
            font-weight: 700;

            &::after {
                background-color: currentColor;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
                mask-repeat: no-repeat no-repeat;
                mask-position: left center;
                mask-size: contain;
                content: '';
                min-width: 20px;
                min-height: 20px;
                display: block;
            }
        }
    }
}

.tabcordion.has-tabs.left,
.tabcordion.has-tabs.right {
    .tabcordion-container {
        display: flex;
    }

    .tabcordion--tabs {
        flex-direction: column;
        align-items: flex-start;
        width: 300px;
        opacity: 1;
        visibility: visible;
        height: auto;

        .tab {
            width: 100%;
            text-align: left;

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

    .tabcordion--panels {
        width: calc(100% - 300px);
    }

    .tabcordion--entry-content {
        padding: 0;
    }

    .tabcordion--entry.is-active {
        padding: 15px 20px;
        overflow: visible;

        .tabcordion--entry-container {
            overflow: visible;
        }

        @media only screen and (min-width: 1280px) {
            padding: 25px 30px;
        }
    }

    .tabcordion--entry.is-active::before {
        display: block;
        font-weight: 700;
        color: var(--primary-color);
        font-size: var(--font-size-heading-h3, clamp(1.313rem, 0.226rem + 1.774vw, 2rem));
        line-height: 1.1;
        margin-bottom: 20px;
    }
}

.tabcordion.has-tabs.right {
    .tabcordion--tabs {
        .tab {
            border-right: 0;
            border-left: 1px solid rgb(221, 221, 221);
        }
    }

    .tabcordion--panels {
        order: -1;
    }
}

/* END Tabcordions */

/* grid-items-section */

.grid-items-section {
    width: 100%;
    box-sizing: border-box;
    --columns: 1;
    --gap: 20px;


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

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

    &.columns--4 {
        @media only screen and (min-width: 1320px) {
            --columns: 4;
            --gap: 40px;
        }
    }

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

    .top-info {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 40px;
        width: 100%;

        .left {
            flex: 1;
        }

        .grid-items-section-title {
            margin-bottom: 30px;
            color: var(--primary-color);

            h3 {
                font-size: var(--font-size-heading-h2, clamp(1.5rem, -0.081rem + 2.581vw, 2.5rem));
                line-height: 1.1;
            }
        }

        .right {
            width: 100%;
        }

        .links-buttons {
            display: flex;
            flex-direction: column;
            gap: 15px;

            &>* {
                display: block;
                text-decoration: none;
                width: 100%;
                border-bottom: 1px solid #eff0f4;
                padding-bottom: 15px;
                transition: all .35s ease-in-out;

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

                &:hover {
                    border-color: var(--primary-color);

                    .link-button__title {
                        &::after {
                            transform: translateX(5px);
                        }
                    }
                }
            }

            .link-button__title {
                font-weight: 700;
                display: inline-block;
            }

            &>a .link-button__title {
                color: var(--primary-color);
                position: relative;
                display: flex;
                align-items: center;
                gap: 5px;

                &::after {
                    background-color: currentColor;
                    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: left center;
                    mask-size: contain;
                    content: '';
                    min-width: 20px;
                    min-height: 20px;
                    display: block;
                    transition: all .35s ease-in-out;
                }
            }
        }
    }

    @media only screen and (min-width: 980px) {
        .top-info {
            flex-direction: row;
            justify-content: space-between;
            gap: 10%;

            .grid-items-section-title {
                max-width: max(450px, 40%);
            }

            .grid-text {
                max-width: 80%;
                min-width: 370px;
            }

            .right {
                width: 405px;
                min-width: 25%;
            }
        }

    }

    .grid-items-container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--gap);
        justify-content: center;
    }

    .grid-item {
        width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
        box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.04), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
        border-radius: 8px;
        overflow: hidden;
    }

    .grid-item-image {
        position: relative;
        height: 0;
        padding-top: 56.25%;
        overflow: hidden;

        img {
            position: absolute;
            inset: 0;
            object-fit: cover;
            width: 100%;
            height: 100%;
        }
    }

    .grid-item-content {
        padding: 20px;
        background-color: #FFF;

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

    .grid-item-title {
        margin-bottom: 5px;
        color: var(--primary-color);

        h4 {
            font-size: var(--font-size-heading-h3, clamp(1.313rem, 0.226rem + 1.774vw, 2rem));
            line-height: 1.1;
        }
    }

    .grid-item-sub-heading {
        margin-bottom: 15px;
        color: var(--primary-color);

        * {
            font-size: 16px;
            text-transform: uppercase;
            font-weight: 700;
            line-height: 1.1;
        }
    }

    .grid-item-text {
        margin-bottom: 15px;

        p {
            margin-bottom: 20px;
            color: #4B5563;

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

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

    .grid-item-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;

        .grid-item-button {
            min-height: 30px;
            text-decoration: none;
            display: flex;
            align-items: center;
            position: relative;
            border: var(--primary-color) solid 1px;
            margin: 0;
            transition: background .35s ease-in-out;
            border-radius: 50vw;
            padding: 5px 15px;
            box-sizing: border-box;
            justify-content: flex-start;

            &:hover {
                background-color: var(--dark-button-bg);

                * {
                    color: var(--dark-button-color);
                }
            }
        }

        .grid-item-button__title {
            color: var(--primary-color);
            position: relative;
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 0;
            font-weight: 700;

            &::after {
                background-color: currentColor;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
                mask-repeat: no-repeat no-repeat;
                mask-position: left center;
                mask-size: contain;
                content: '';
                min-width: 20px;
                min-height: 20px;
                display: block;
            }
        }

    }
}

/* END grid-items-section */

/* contact-cards-section */
.contact-cards-section {
    border-radius: 24px;
    overflow: hidden;
    background-color: #F3F4F6;
    width: 100%;
    padding: 30px;
    position: relative;
    isolation: isolate;
    box-sizing: border-box;

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

    @media only screen and (min-width: 1400px) {
        padding: 60px;
    }

    &::after {
        position: absolute;
        height: 100%;
        width: 100%;
        right: 0;
        top: 0;
        content: '';
        background-image: var(--watermark-url);
        background-position: right 30% center !important;
        background-size: auto 110%;
        background-repeat: no-repeat;
        z-index: -1;
        opacity: 0.07;
        filter: grayscale(1);
    }


    .contact-cards-title {
        color: var(--primary-color);
        margin-bottom: 30px;

        @media only screen and (min-width: 1400px) {
            margin-bottom: 50px;
        }

        * {
            font-size: var(--font-size-heading-h3, clamp(1.313rem, 0.226rem + 1.774vw, 2rem));
            line-height: 1.1;
            text-transform: uppercase;
        }
    }

    .contact-cards-container {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .contact-card {
        background-color: #FFF;
        box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.04), 0px 8px 8px -4px rgba(0, 0, 0, 0.03);
        border-radius: 24px;
        overflow: hidden;
        padding: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        transition: box-shadow .35s ease-in-out;

        @media only screen and (min-width: 760px) {
            padding: 30px;
            flex-direction: row;
            text-align: left;
            gap: 40px;
        }

        &:hover {
            z-index: 1;
            position: relative;
            box-shadow: 0px 20px 24px -4px rgba(0, 0, 0, 0.09), 0px 8px 8px -4px rgba(0, 0, 0, 0.06);
        }
    }

    .contact-card-image {
        width: 100px;

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

    .contact-card-content {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: calc(100% - 100px);

        @media only screen and (min-width: 980px) {
            flex-direction: row;
            justify-content: space-between;
        }
    }

    .contact-card-title {
        color: var(--primary-color);
        margin-bottom: 10px;
        flex: 1;

        * {
            font-size: var(--font-size-heading-h3, clamp(1.313rem, 0.226rem + 1.774vw, 2rem));
            line-height: 1.1;
        }
    }

    .contact-card-sub-heading {
        color: #4B5563;

        * {
            font-size: 16px;
            line-height: 1.1;
            font-weight: 700;
            text-transform: uppercase;

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

    .contact-card-actions {
        .contact-card-text {

            p {
                margin-bottom: 10px;

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

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

                a {
                    color: var(--primary-color);
                    text-decoration: none;
                    font-weight: 700;
                    position: relative;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    justify-content: center;

                    @media only screen and (min-width: 760px) {
                        justify-content: flex-start;
                    }

                    &[href^="mailto:"]::before {
                        content: '';
                        width: 16px;
                        height: 16px;
                        display: block;
                        background-color: currentColor;
                        mask-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.6514 0.43005C15.4762 0.219384 15.2049 0.11365 14.9333 0.150184L0.861505 3.00238C0.247571 3.08145 -0.0505621 3.79545 0.324905 4.28758C0.381571 4.36192 0.450771 4.42572 0.529371 4.47625L3.79484 6.57498L8.71997 5.33505C9.0013 5.20598 9.31684 5.42985 9.28797 5.73798C9.2785 5.83885 9.2313 5.93245 9.15584 6.00005L5.9555 7.96452L11.7868 11.7133C12.234 12.0001 12.8314 11.7823 12.989 11.275L15.8034 1.18745C15.8853 0.925584 15.8279 0.640117 15.6514 0.43005ZM4.5821 14.0532C4.58597 14.4957 4.9437 14.8534 5.38617 14.8573C5.56884 14.8574 5.7461 14.7953 5.88877 14.6812L9.58764 11.7253L4.5861 8.50885L4.5821 14.0532Z' fill='%230085CA'/%3E%3C/svg%3E%0A");
                        mask-repeat: no-repeat no-repeat;
                        mask-position: center center;
                        mask-size: contain;
                        transition: transform .35s ease-in-out;
                    }

                    &[href^="tel:"]::before {
                        content: '';
                        width: 16px;
                        height: 16px;
                        display: block;
                        background-color: currentColor;
                        mask-image: url("data:image/svg+xml,%3Csvg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.098 9.73802H11.4844C10.5222 9.73802 9.7423 10.518 9.7423 11.4802V12.8559C6.37356 12.8582 3.64216 10.1268 3.64443 6.75802H5.02016C5.98229 6.75796 6.76229 5.97802 6.76229 5.01589V2.40229C6.76229 1.44016 5.98229 0.660223 5.02016 0.660156H2.77376C1.33029 0.660156 0.160161 1.83029 0.160161 3.27376V6.75802C0.155161 12.0522 4.44816 16.3452 9.7423 16.3402H13.2266C14.67 16.3402 15.8402 15.17 15.8402 13.7266V11.4802C15.8402 10.5181 15.0602 9.73809 14.098 9.73802Z' fill='%230085CA'/%3E%3C/svg%3E%0A");
                        mask-repeat: no-repeat no-repeat;
                        mask-position: center center;
                        mask-size: contain;
                        transition: transform .35s ease-in-out;
                    }



                    strong {
                        text-decoration: underline;
                    }

                    &:hover {
                        &::before {
                            transform: scale(1.3);
                            transform-origin: right center;
                        }
                    }
                }
            }
        }
    }
}

/* end contact-cards-section */

/* rounded-card-section */
.rounded-card-section {
    border-radius: 24px;
    overflow: hidden;
    background-color: #F3F4F6;
    width: 100%;
    padding: 30px;
    position: relative;
    isolation: isolate;
    width: 100%;
    box-sizing: border-box;
    --columns: 1;
    --gap: 20px;


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

    &.columns--3,
    &:has(.card-column:nth-child(3)) {
        @media only screen and (min-width: 1320px) {
            --columns: 3;
            --gap: 40px;
        }
    }

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

    @media only screen and (min-width: 1400px) {
        padding: 60px;
    }

    &::after {
        position: absolute;
        height: 100%;
        width: 100%;
        right: 0;
        top: 0;
        content: '';
        background-image: var(--watermark-url);
        background-position: right 30% center !important;
        background-size: auto 110%;
        background-repeat: no-repeat;
        z-index: -1;
        opacity: 0.07;
        filter: grayscale(1);
    }


    .card-section-title {
        color: var(--primary-color);
        margin-bottom: 30px;

        @media only screen and (min-width: 1400px) {
            margin-bottom: 50px;
        }

        * {
            font-size: var(--font-size-heading-h3, clamp(1.313rem, 0.226rem + 1.774vw, 2rem));
            line-height: 1.1;
            text-transform: uppercase;
        }
    }

    .card-container {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex-wrap: wrap;

        @media only screen and (min-width: 980px) {
            flex-direction: row;
            gap: 25px;
        }
    }

    .card-column {
        width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
    }

    .card-text {

        p {
            margin-bottom: 10px;
            color: #4B5563;
            font-size: 18px;
            line-height: 1.6;

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

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

    .card-buttons {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-top: 10px;

        .card-button {
            min-height: 30px;
            text-decoration: none;
            display: flex;
            align-items: center;
            position: relative;
            border: var(--primary-color) solid 1px;
            margin: 0;
            transition: background .35s ease-in-out;
            border-radius: 50vw;
            padding: 5px 15px;
            box-sizing: border-box;
            justify-content: flex-start;

            &:hover {
                background-color: var(--dark-button-bg);

                * {
                    color: var(--dark-button-color);
                }
            }
        }

        .card-button__title {
            color: var(--primary-color);
            position: relative;
            display: flex;
            align-items: center;
            gap: 5px;
            margin: 0;
            font-weight: 700;

            &::after {
                background-color: currentColor;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
                mask-repeat: no-repeat no-repeat;
                mask-position: left center;
                mask-size: contain;
                content: '';
                min-width: 20px;
                min-height: 20px;
                display: block;
            }
        }

    }
}

/* end rounded-card-section */


/* accordion images */
.accordion-images-section {
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    --column: 1;
    --gap: 20px;
    gap: var(--gap);

    @media only screen and (min-width: 1280px) {
        --column: 2;
        --gap: 5%;
        flex-direction: row;
        justify-content: space-between;
    }

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

    .column {
        flex: 1;
        width: calc((100% / var(--columns)) - ((var(--columns) - 1) * var(--gap)) / var(--columns));
    }

    .accordion-images-section-title {
        color: var(--primary-color);
        margin-bottom: 30px;

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

        * {
            font-size: var(--font-size-heading-h2, clamp(1.5rem, -0.081rem + 2.581vw, 2.5rem));
            line-height: 1.1;
        }
    }

    .accordion-images-text {
        p {
            color: #111827;
            margin-bottom: 15px;

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

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

    .accordion-images-buttons {
        padding-top: 30px;
        display: inline-flex;
        flex-direction: column;
        gap: 15px;

        &>* {
            display: block;
            text-decoration: none;
            width: 100%;
            border-bottom: 1px solid #eff0f4;
            padding-bottom: 15px;
            transition: all .35s ease-in-out;

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

            &:hover {
                border-color: var(--primary-color);

                .link-button__title {
                    &::after {
                        transform: translateX(5px);
                    }
                }
            }
        }

        .link-button__title {
            font-weight: 700;
            display: inline-block;
        }

        &>a .link-button__title {
            color: var(--primary-color);
            position: relative;
            display: flex;
            align-items: center;
            gap: 5px;

            &::after {
                background-color: currentColor;
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
                mask-repeat: no-repeat no-repeat;
                mask-position: left center;
                mask-size: contain;
                content: '';
                min-width: 20px;
                min-height: 20px;
                display: block;
                transition: all .35s ease-in-out;
            }
        }

        &>a[href$=".pdf"] .link-button__title::after {
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='15' viewBox='0 0 14 15' fill='none'%3E%3Cpath d='M3.45642 10.7636H10.2752V11.9001H3.45642V10.7636ZM6.29757 2.80841V7.68722L3.85816 5.24782L3.05469 6.05129L6.8658 9.8624L10.6769 6.05129L9.87343 5.24782L7.43402 7.68722V2.80841H6.29757Z' fill='%230085CA'/%3E%3C/svg%3E");
            mask-repeat: no-repeat no-repeat;
            mask-position: center center;
            mask-size: contain;
        }
    }

    .accordion-item {
        border: 1px solid #E5E7EB;
        width: 100%;
        margin-bottom: 10px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        padding: 15px;

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

        .accordion-top {
            position: relative;
            cursor: pointer;
            flex-wrap: wrap;
            gap: 10px;
            justify-content: flex-start;
            padding: 0;

            &::after {
                background-color: var(--primary-color);
                mask-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 6H8V0H6V6H0V8H6V14H8V8H14V6Z' fill='%23002F6C'/%3E%3C/svg%3E%0A");
                mask-repeat: no-repeat no-repeat;
                mask-position: center center;
                mask-size: contain;
            }

            &[aria-expanded="true"] {
                &::before {
                    position: absolute;
                    content: '';
                    width: 30px;
                    height: 30px;
                    right: -7px;
                    top: 33px;
                    border-radius: 50vw;
                    display: block;
                    background-color: #f3f3f5;
                }

                &::after {
                    mask-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3135 0.2229L7.94919 6.58622L1.58587 0.2229L0.171875 1.6369L6.53519 8.00022L0.171875 14.3635L1.58587 15.7775L7.94919 9.41422L14.3135 15.7775L15.7275 14.3635L9.36419 8.00022L15.7275 1.6369L14.3135 0.2229Z' fill='%23002F6C'/%3E%3C/svg%3E%0A");
                    mask-repeat: no-repeat no-repeat;
                    mask-position: center center;
                    mask-size: cover;
                }

                .accordion-title {
                    font-weight: 700;
                }
            }
        }

        .accordion-title {
            background-color: transparent;
            padding: 0;
            margin: 0;
            border: 0;
            color: var(--primary-color);
            font-size: 16px;
            text-align: left;
            max-width: calc(100% - 80px);
            padding-left: 10%;
            padding-right: 10px;
            flex: 1;
            cursor: pointer;
        }

        .accordion-sub-heading {
            width: 100%;

            &>* {
                font-size: 15px;
                display: inline-block;
                background: color-mix(in srgb, var(--primary-color) 8%, transparent);
                color: var(--primary-color);
                padding: 5px 10px;
                border-radius: 50vw;

            }
        }

        .accordion-image {
            width: 65px;

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

        .accordion-content {
            padding-top: 20px;

            .accordion-text {

                p {


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

            .accordion-buttons {
                display: flex;
                gap: 8px;
                flex-wrap: wrap;
                justify-content: flex-end;
                padding-top: 10px;

                .accordion-button {
                    min-height: 30px;
                    text-decoration: none;
                    display: flex;
                    align-items: center;
                    position: relative;
                    border: var(--primary-color) solid 1px;
                    margin: 0;
                    transition: background .35s ease-in-out;
                    border-radius: 50vw;
                    padding: 5px 15px;
                    box-sizing: border-box;
                    justify-content: flex-start;

                    &:hover {
                        background-color: var(--dark-button-bg);

                        * {
                            color: var(--dark-button-color);
                        }
                    }
                }

                .accordion-button__title {
                    color: var(--primary-color);
                    position: relative;
                    display: flex;
                    align-items: center;
                    gap: 5px;
                    margin: 0;
                    font-weight: 700;

                    &::after {
                        background-color: currentColor;
                        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.52867 11.5286L8.47133 12.4712L12.9427 7.9999L8.47133 3.52856L7.52867 4.47123L10.3907 7.33323H4V8.66656H10.3907L7.52867 11.5286Z' fill='%239CA3AF'/%3E%3C/svg%3E");
                        mask-repeat: no-repeat no-repeat;
                        mask-position: left center;
                        mask-size: contain;
                        content: '';
                        min-width: 20px;
                        min-height: 20px;
                        display: block;
                    }
                }

            }
        }

    }



}

/* END accordion images */

/* Update cards on CMS pages */
#page .block .card-block.shadow.has-image {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;


    .card-text {
        flex: 1;
        padding: 0;

        .headline+.content {
            margin-left: 0 !important;
        }
    }

    .card-left {
        float: none;
        margin: 0;
        flex: 1;


        img {
            height: auto;
            display: block;
            aspect-ratio: 1/1;
            max-width: 100%;
        }
    }
}

@media only screen and (min-width: 520px) {
    #page .block .card-block.shadow.has-image {
        flex-direction: row;

        .card-left {
            max-width: min(70%, 215px);
            min-width: 170px;
        }

        .card-text {
            min-width: 150px;
        }
    }
}

@media only screen and (max-width: 1700px) {
    #page .block .card-block {
        padding: 20px;
    }
}

/* end updated cards */

/* Start divider recolor */
/* .ts-divider {
    border-bottom: solid var(--secondary-color) !important;
} */
/* not sure what the client asked for here, but this bit was overriding the border-width of the separators */
/* disabling as this produces double colored separators*/
body:not(.conroe-isd) #page .ts-divider {
    /* border-bottom-style: solid; */
    border-color: var(--secondary-color) !important;
}

/* End divider recolor */

/* START Button light adjustment */
.caney-creek-high-school #page .button.light,
.moorhead-junior-high #page .button.light,
.conroe-high-school #page .button-light {
    --light: color-mix(in srgb, var(--secondary-color) 50%, transparent);
    --light-hover: color-mix(in srgb, var(--secondary-color) 80%, transparent);
}

/* END Button light adjustment */

/* ensure footer is clickable */
#home::before {
    pointer-events: none;
}

/* ensure footer is clickable */

/* START Sidenav Toggle mobile */
.sidenav-toggle {
    position: relative;
    width: 100%;
    color: var(--primary-color);
    padding: 24px;
    text-align: left;
    box-sizing: border-box;
    font-size: 20px;
    border-bottom: none;
    font-weight: 800;
}

.sidenav-inner {
    display: none;
}

@media only screen and (min-width: 1280px) {
    .sidenav-toggle {
        display: none;
    }

    .sidenav-inner {
        display: block;
    }
}

.sidenav-toggle:after {
    content: close-quote;
    display: block;
    width: 1em;
    height: 1em;
    position: absolute;
    top: calc(50% - 0.5em);
    right: 20px;
    background-color: var(--primary-color);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 512.011 512.011' style='enable-background:new 0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M505.755 123.592c-8.341-8.341-21.824-8.341-30.165 0L256.005 343.176 36.421 123.592c-8.341-8.341-21.824-8.341-30.165 0s-8.341 21.824 0 30.165l234.667 234.667a21.275 21.275 0 0 0 15.083 6.251 21.275 21.275 0 0 0 15.083-6.251l234.667-234.667c8.34-8.341 8.34-21.824-.001-30.165z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' width='512' height='512' x='0' y='0' viewBox='0 0 512.011 512.011' style='enable-background:new 0 0 512 512' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M505.755 123.592c-8.341-8.341-21.824-8.341-30.165 0L256.005 343.176 36.421 123.592c-8.341-8.341-21.824-8.341-30.165 0s-8.341 21.824 0 30.165l234.667 234.667a21.275 21.275 0 0 0 15.083 6.251 21.275 21.275 0 0 0 15.083-6.251l234.667-234.667c8.34-8.341 8.34-21.824-.001-30.165z'%3E%3C/path%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: all 0.25s linear;
}

#app.sidenav-is-expanded .sidenav-inner {
    display: block;
}

@media only screen and (max-width: 1279px) {
    #app.sidenav-is-expanded .sidenav-toggle:after {
        transform: rotate(180deg);
    }
}

/* END Sidenav Toggle mobile */

/* --------------------------------------------------------------- */
/* ------------- OLD CODE (Mainly CMS pages related) ------------- */
/* --------------------------------------------------------------- */