@import "typography.css";

/* HEADER */
body.is-overflowing {
    overflow: hidden;
}

.header {
    position: relative;
    z-index: 100;
    padding-top: 8px;
    padding-bottom: 8px;
	background-color: #fff;
}

.header__inner {
    display: flex;
    justify-content: space-between;
}

.header__logo-container {
    max-width: 240px;

    .header-mobile-logo {
        @media screen and (min-width: 980.98px) {
            display: none;
        }
    }

    .header-mobile-logo + .custom-logo-link {
        display: none;

        @media screen and (min-width: 980.98px) {
            display: block;
        }
    }

    .custom-logo {
        width: 100%;
        max-width: 240px;
    }

}

.header__menu {
    display: flex;
    align-items: center;
}

.header__right-container {
    display: flex;
    align-items: center;
    gap: 14px;

    @media screen and (min-width: 1439.98px) {
        flex-direction: row-reverse;
    }
}

.main-navigation {
    position: absolute;
    top: var(--mrHeaderHeight, 57px);
    left: 0;
    right: 0;
    background-color: #fff;
    bottom: 0;
    height: 0;
    overflow: hidden;
    transition: height 0.2s ease-in-out;

    @media screen and (min-width: 980.98px) {
        bottom: initial;
    }

    @media screen and (min-width: 1439.98px) {
        position: static;
        height: auto;
        overflow: visible;
    }

    .menu {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 25px;
        margin: 0;
        /*padding: 0;*/
        padding: 16px 16px 44px 16px;

        @media screen and (min-width: 980.98px) {
            padding-left: 32px;
            padding-right: 32px;
        }

        @media screen and (min-width: 1439.98px) {
            flex-direction: row;
            padding: 0;
        }
    }

    .menu > li {
        @media screen and (min-width: 1439.98px) {
            margin-bottom: 0;
        }
    }

    .menu + .header__mobile-buttons {
        @media screen and (min-width: 980.98px) {
            display: none;
        }
    }

    .menu li {
        color: var(--Content-Text-Heading-Primary, #011633);
        font-family: var(--Heading-M-Lexend-Regular-Family, Lexend);
        font-size: 24px;
        font-weight: 500;
        line-height: 28px;
        padding-left: 0;

        @media screen and (min-width: 980.98px) {
            font-size: 32px;
            line-height: 36px;
        }

        @media screen and (min-width: 1439.98px) {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }

        li {
            color: var(--Content-Text-Body-Primary, #283445);
            font-size: 14px;
            font-weight: 400;
            line-height: 24px;

            @media screen and (min-width: 1439.98px) {
                color: var(--Button-Link-Primary-Default, #011633);
                font-size: 16px;
                font-weight: 400;
                line-height: 20px;
            }
        }
    }

    .menu li::before {
        display: none;
    }

    .menu li a {
        display: flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;

        color: var(--Content-Text-Heading-Primary, #011633);
        font-family: var(--Heading-M-Lexend-Regular-Family, Lexend);
        font-size: 24px;
        font-weight: 500;
        line-height: 28px;

        @media screen and (min-width: 980.98px) {
            font-size: 32px;
            line-height: 36px;
        }

        @media screen and (min-width: 1439.98px) {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
        }
    }

    .menu > li > a {
        @media screen and (min-width: 1439.98px) {
            padding: 8px 16px 8px 16px;
            background-color: #fff;
            transition: background-color 0.2s ease-in-out;
            border-radius: 16px;

        }
    }

    .menu > li.menu-item-has-children > a {
        @media screen and (min-width: 1439.98px) {
            padding: 8px 32px 8px 16px;
        }
    }

    .menu > li > a:hover {
        @media screen and (min-width: 1439.98px) {
            background: var(--Surface-Blue-Secondary, #E2EEFF);
        }
    }

    .menu li li {
        @media screen and (min-width: 1439.98px) {
            padding: 8px;
        }
    }

    .menu li li:hover > a > .icon {
        background: var(--Surface-Neutral-White, #FFF);
    }

    .menu li li a {
        color: var(--Content-Text-Body-Primary, #283445);
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        margin-bottom: 15px;

        @media screen and (min-width: 1439.98px) {
            font-size: 16px;
            line-height: 20px;
            margin-bottom: 0;
        }
    }

    .menu li li:hover {
        @media screen and (min-width: 1439.98px) {
            border-radius: var(--Radius-XS, 8px);
            background-color: var(--Surface-Blue-Primary, #EEF2FF);
            box-shadow: 0 4px 8px -4px rgba(110, 130, 159, 0.08), 0 16px 24px 0 rgba(113, 119, 128, 0.08);
        }
    }

    .menu-icon {
        width: 20px;
        height: 20px;
    }

    .sub-menu {
        display: none;
        margin-bottom: 0;
        padding-top: 20px;

        @media screen and (min-width: 1439.98px) {
            position: absolute;
            left: 50%;
            top: calc(100% + 24px);
            background: white;
            list-style: none;
            width: max-content;
            max-width: 500px;
            transform: translateX(-50%);
            border-radius: var(--Radius-S, 16px);
            background: var(--Surface-Neutral-White, #FFF);
            padding: var(--Padding-2XL, 24px);
            gap: var(--Margin-L, 16px);
            min-width: 350px;

            /* Shadow/Drop/M */
            box-shadow: 0 8px 22px -6px rgba(74, 91, 131, 0.12), 0 14px 64px -4px rgba(106, 129, 184, 0.12);
        }
    }

    .sub-menu.open {
        @media screen and (max-width: 1439.98px) {
            display: block;
        }
    }

    .menu li:hover > .sub-menu,
    .menu li:focus-within > .sub-menu {
        @media screen and (min-width: 1439.98px) {
            display: block;
        }
    }

    .menu li:hover > .sub-menu::before,
    .menu li:focus-within > .sub-menu::before {
        @media screen and (min-width: 1439.98px) {
            display: block;
            content: '';
            width: 100%;
            position: absolute;
            top: -26px;
            left: 0;
            right: 0;
            height: 28px;
            background-color: transparent;
        }
    }

    .menu-item > a > .icon {
        display: none;

        @media screen and (min-width: 1439.98px) {
            display: block;
            width: 48px;
            height: 48px;
            padding: 10px;
            border-radius: var(--Radius-XS, 8px);
            background: var(--Surface-Blue-Primary, #EEF2FF);
        }
    }

    .menu-item-has-children > a {
        position: relative;
    }

    .menu-item-has-children > a::before {
        position: absolute;
        top: 50%;
        left: calc(100% - 16px);
        transform: translateY(-50%);
        display: block;
        content: '';
        width: 16px;
        height: 16px;
        z-index: 10;
        background-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8.32603 11.7894C7.92903 12.3712 7.07097 12.3712 6.67397 11.7894L2.93773 6.31362C2.48482 5.64984 2.96018 4.75 3.76376 4.75L11.2362 4.75C12.0398 4.75 12.5152 5.64984 12.0623 6.31362L8.32603 11.7894Z" fill="%23011633"/></svg>');

        @media screen and (min-width: 1439.98px) {
            left: calc(100% - 24px);
        }
    }

    .submenu-toggle {
        display: none;
        background: none;
        border: none;
        font-size: 16px;
        cursor: pointer;
        margin-left: 4px;
    }
}

.menu-toggle {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    padding: 0;
    font-size: 0;
    border: 0;
    background-color: transparent;
    cursor: pointer;

    @media screen and (min-width: 1439.98px) {
        display: none;
    }

    p::before,
    p::after {
        position: absolute;
        width: 18px;
        height: 2px;
        left: 7px;
        will-change: opacity, transform;
        content: '';
        border-radius: 2px;
        overflow: hidden;
        transition: all .2s ease-in-out;
        background-color: #000;
    }

    p::before {
        top: 10px;
    }

    p::after {
        top: 20px;
    }

    p {
        border-radius: 8px;
        position: relative;
        display: block;
        width: 32px;
        height: 32px;
    }

    span {
        position: absolute;
        width: 18px;
        height: 2px;
        background-color: #000;
        left: 7px;
        will-change: opacity, transform;
        top: 15px;
        border-radius: 2px;
        overflow: hidden;
    }
}

.main-navigation.opened {
    height: calc( 100vh - var(--mrHeaderHeight, 57px));
    overflow-y: auto;
    max-height: calc( 100vh - var(--mrHeaderHeight, 57px));

    @media screen and (min-width: 980.98px) {
        height: auto;
        overflow-y: auto;
        max-height: initial;
    }
}

.main-navigation.opened + .menu-toggle {
    p::before {
        top: 15px;
        transform: rotate(-135deg);
    }

    p::after {
        top: 15px;
        transform: rotate(135deg);
    }

    span {
        left: 0;
        opacity: 0;
    }
}

.header__mobile-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 16px 44px 16px;
    max-width: 420px;
}

.header__right-buttons {
    display: none;

    @media screen and (min-width: 980.98px) {
        display: block;
    }

    .btn {
        font-size: 16px;
        padding: 12px 18px;
    }

    .btn::before {
        display: none;
    }

    .btn--label {
        border-color: transparent;
    }
}

/* HERO */
.hero {
    overflow: hidden;
}

.hero__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 621px;
    margin: 0 auto;
    min-height: 520px;
    padding-top: 32px;
    padding-bottom: 125px;

    @media screen and (min-width: 1024.98px) {
        padding-top: 64px;
        padding-bottom: 64px;
        min-height: 581px;

    }
}

.hero__inner::before {
    display: block;
    content: '';
    position: absolute;
    right: 45%;
    bottom: 0;
    width: 293px;
    height: 293px;
    background-image: url('/wp-content/themes/eds-divi-child-theme/mr/assets/images/hero-left.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;

    @media screen and (min-width: 767.98px) {
        right: 75%;
    }

    @media screen and (min-width: 1024.98px) {
        min-height: 581px;
        width: 588px;
        height: 588px;
        top: 50%;
        right: 78%;
        bottom: initial;
        transform: translateY(-50%);
    }
}

.hero__inner::after {
    display: block;
    content: '';
    position: absolute;
    left: 45%;
    bottom: 0;
    width: 293px;
    height: 293px;
    background-image: url('/wp-content/themes/eds-divi-child-theme/mr/assets/images/hero-right.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    z-index: -1;

    @media screen and (min-width: 767.98px) {
        left: 75%;
    }

    @media screen and (min-width: 1024.98px) {
        min-height: 581px;
        width: 588px;
        height: 588px;
        top: 50%;
        left: 78%;
        bottom: initial;
        transform: translateY(-50%);
    }
}

.hero__inner .btn--hero {
    margin-top: 32px;

    @media screen and (min-width: 1024.98px) {
        margin-top: 40px;
    }
}

.hero__inner h1 {
    color: var(--Text-Primary, #1B1D1D);
    text-align: center;

    /* Text/Recoleta/Heading 2 */
    font-family: Recoleta;
    font-size: 48px;
    font-style: normal;
    font-weight: 600;
    line-height: 56px; /* 116.667% */
}

.hero__inner p {
    color: var(--Text-Primary, #1B1D1D);
    text-align: center;

    /* Text/Work Sans/Body */
    font-family: "Work Sans";
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 133.333% */
}

/* WYSIWYG */
.wysiwyg {
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        margin-bottom: 16px;
        padding: 0;

        @media screen and (min-width: 1023.98px) {
            margin-bottom: 24px;
        }
    }

    .hfs1 {
        color: var(--Text-Primary, #1B1D1D);
        font-family: Recoleta;
        font-size: 36px;
        font-weight: 600;
        line-height: 40px;
        
        @media screen and (min-width: 1023.98px) {
            font-size: 48px;
            line-height: 56px;
        }
    }

    .hfs2 {
        color: var(--Text-Primary, #1B1D1D);
        font-family: Recoleta;
        font-size: 24px;
        font-weight: 600;
        line-height: 32px;

        @media screen and (min-width: 1023.98px) {
            font-size: 36px;
            line-height: 40px;
        }
    }

    .hfs3 {
        color: var(--Text-Primary, #1B1D1D);
        font-family: "Work Sans";
        font-size: 20px;
        font-weight: 500;
        line-height: normal;
    }

    p {
        color: var(--Text-Primary, #1B1D1D);
        font-family: "Work Sans";
        font-size: 18px;
        font-weight: 400;
        line-height: 24px;
    }
}

/* TAGS CLOUD */

.resources {
    overflow-x: hidden;
}

.resources.pricing-page {
    overflow: visible;
}

.page-template-template-mr-pricing-page .footer {
    padding-top: 160px;
}

.tags-cloud {
    padding-top: 40px;
    padding-bottom: 40px;

    @media screen and (min-width: 1023.98px) {
        /*padding-left: 60px;*/
        /*padding-right: 60px;*/
    }
}

.tags-cloud__inner {
    padding: 16px 10px;
    border-radius: 24px;
    background-color: var(--color-primary-yellow-100);
    background-image: url('/wp-content/themes/eds-divi-child-theme/mr/assets/images/tags-cloud-bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-color: #F0F8FF;

    @media screen and (min-width: 1023.98px) {
        padding: 40px 32px;
    }
}

.tags-cloud__top {
    margin-bottom: 16px;

    @media screen and (min-width: 1023.98px) {
        margin-bottom: 40px;
    }
}

.tags-cloud__title {
    font-family: Recoleta;
    font-weight: 600;
    font-size: 24px;
    line-height: 32px;
    text-align: center;
    color: #1E1E1E;

    @media screen and (min-width: 1023.98px) {
        font-size: 36px;
        line-height: 40px;
    }
}

.tags-cloud__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 12px;

    @media screen and (min-width: 1023.98px) {
        row-gap: 24px;
    }
}

.tags-cloud_tag {
    padding: 0;
    position: relative;
    font-weight: 500;
    /*font-size: var(--fz-heading-s);*/
    /*line-height: var(--lh-heading-s);*/
    /*font-family: var(--ff-bree);*/

    @media screen and (min-width: 1023.98px) {
    /*padding-right: 36px;*/
}
}

/*.tags-cloud_tag::before,*/
.tags-cloud_tag::after {
    position: absolute;
    top: 50%;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml,<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.5022 0.00341797C10.7791 0.00341797 11.0336 0.164132 11.1497 0.418597L13.9718 6.5302L20.0847 9.35163C20.3393 9.4677 20.5 9.72217 20.5 9.99895C20.5 10.2757 20.3393 10.5302 20.0847 10.6463L13.9762 13.4766L11.1497 19.5882C11.0336 19.8427 10.7791 20.0034 10.5022 20.0034C10.2254 20.0034 9.97086 19.8427 9.85477 19.5882L7.02824 13.4766L0.915271 10.6507C0.66075 10.5347 0.5 10.2802 0.5 10.0034C0.5 9.72663 0.66075 9.47217 0.915271 9.3561L7.02824 6.53467L9.85477 0.418597C9.97086 0.164132 10.2254 0.00341797 10.5022 0.00341797ZM10.5022 2.42306L8.21601 7.36949C8.14456 7.52574 8.01954 7.64628 7.86772 7.7177L2.92018 10.0034L7.86772 12.2891C8.024 12.3606 8.14456 12.4856 8.21601 12.6373L10.5022 17.5838L12.7885 12.6373C12.8599 12.4811 12.9849 12.3606 13.1368 12.2891L18.0843 10.0034L13.1368 7.7177C12.9805 7.64628 12.8599 7.52128 12.7885 7.36949L10.5022 2.42306Z" fill="%238B8B8B"/><path d="M10.5022 2.42306L8.21601 7.36949C8.14456 7.52574 8.01954 7.64628 7.86772 7.7177L2.92018 10.0034L7.86772 12.2891C8.024 12.3606 8.14456 12.4856 8.21601 12.6373L10.5022 17.5838L12.7885 12.6373C12.8599 12.4811 12.9849 12.3606 13.1368 12.2891L18.0843 10.0034L13.1368 7.7177C12.9805 7.64628 12.8599 7.52128 12.7885 7.36949L10.5022 2.42306Z" fill="%238B8B8B"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transform: translateY(-50%);
}

/*.tags-cloud_tag::before {*/
/*    left: 0;*/

/*    @media screen and (min-width: 1023.98px) {*/
/*        display: none;*/
/*    }*/
/*}*/

.tags-cloud_tag::after {
    right: 14px;
}

.tags-cloud_tag:hover::after {
    filter: brightness(0) saturate(100%) invert(15%) sepia(96%) saturate(2327%) hue-rotate(204deg) brightness(97%) contrast(108%);
}

.tags-cloud_tag-link {
    /*padding: 8px 46px;*/
    padding: 8px 48px 8px 12px;
    color: #8B8B8B;
    border-radius: 50px;
    transition: background-color 0.3s ease-in-out;

    /*@media screen and (min-width: 1023.98px) {*/
    /*    padding: 8px 48px 8px 12px;*/
    /*}*/
}

.tags-cloud_tag-link:hover,
.tags-cloud_tag-link:focus {
    color: var(--color-primary-blue-400);
    background-color: #EEF2FF;
}

/* TOP RESOURCES */

.top-resources {
    overflow: hidden;
    margin: 32px 0;

    @media screen and (min-width: 1023.98px) {
        margin: 54px 0;
    }

    .swiper {
        overflow: visible;
        padding-bottom: 60px;
    }
}

.top-resources__top {
    display: flex;
    column-gap: 16px;
    justify-content: space-between;
    margin-bottom: 16px;

    @media screen and (min-width: 1023.98px) {
        margin-bottom: 40px;
    }
}

.top-resources__title {
    color: var(--Text-Primary, #1B1D1D);
    font-family: Recoleta;
    font-size: 36px;
    font-style: normal;
    font-weight: 600;
    line-height: 40px;
}

.top-resources__content {
    padding-bottom: 60px;

    .swiper-pagination {
        @media screen and (min-width: 1199.98px) {
            display: none;
        }
    }

    .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background-color: #E4E4E4;
        opacity: 1;
    }

    .swiper-pagination-bullet-active {
        background-color: #B3B3B3;
    }
}

.top-resources__content .content__inner {
    margin-right: -32px;
    padding-right: 32px;

    @media screen and (min-width: 1199.98px) {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        grid-column-gap: 24px;
        grid-row-gap: 15px;
    }

    .post-card {
        display: flex;
        flex-direction: column;
        max-width: 390px;
        margin-right: 24px;

        @media screen and (min-width: 767.98px) {
            max-width: 65%;
        }

        @media screen and (min-width: 1023.98px) {
            max-width: 45%;
        }

        @media screen and (min-width: 1199.98px) {
            max-width: none;
            margin-right: initial;
        }

        .post-card__top {
            height: auto;
            width: 100%;
            max-width: none;

            img {
                @media screen and (min-width: 1439.98px) {
                    position: absolute;
                    left: 0;
                    top: 0;
                    bottom: 0;
                }
            }
        }

        .post-card__title {
            text-align: left;
        }
    }

    .post-card:not(:first-child) {
        color: var(--Text-Primary, #1B1D1D);

        /* Text/Work Sans/Heading 3 */


        @media screen and (min-width: 1023.98px) {
            font-family: "Work Sans";
            font-size: 20px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
        }

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

        .post-card__top {


            @media screen and (min-width: 1199.98px) {
                margin-right: -80px;
                width: 330px;
                margin-bottom: 0;

                height: 100%;
            }
        }

        .post-card__title {
            @media screen and (min-width: 1023.98px) {
                color: var(--Text-Secondary-Dark, #2A2A2A);
                font-family: Recoleta;
                font-size: 36px;
                font-weight: 600;
                line-height: 40px;
            }

            @media screen and (min-width: 1199.98px) {
                color: var(--Text-Primary, #1B1D1D);

                /* Text/Work Sans/Heading 3 */
                font-size: 20px;
                font-weight: 500;
                line-height: normal;

                font-family: var(--Heading-2XS-Lexend-Family, Lexend);
            }
        }

        .post-card__content {
            height: 100%;
            border-radius: 24px;
            flex-shrink: 1;
            flex-grow: 0;

            padding: 16px;

            @media screen and (min-width: 1023.98px) {
                padding: 24px;
                flex-basis: 58%;
            }

            @media screen and (min-width: 1439.98px) {
                padding: 16px;
            }
        }
    }

    .post-card:first-child {
        grid-area: 1 / 1 / 4 / 2;

        .post-card__top {
            min-height: 192px;
            height: 100%;
            flex-shrink: 1;

            @media screen and (min-width: 1199.98px) {
                min-height: 380px;
            }
        }

        .post-card__title {
            @media screen and (min-width: 1023.98px) {
                color: var(--Text-Secondary-Dark, #2A2A2A);
                font-family: Recoleta;
                font-size: 36px;
                font-style: normal;
                font-weight: 600;
                line-height: 40px;
            }
        }

        .post-card__content {
            border-top-left-radius: 24px;
            border-top-right-radius: 24px;
            margin-top: auto;
            flex-shrink: 0;
            height: auto;

            @media screen and (min-width: 1023.98px) {
                padding: 24px;
            }
        }
    }

    .post-card:nth-child(2) {
        grid-area: 1 / 2 / 2 / 3;
    }

    .post-card:nth-child(3) {
        grid-area: 2 / 2 / 3 / 3;
    }

    .post-card:last-child {
        grid-area: 3 / 2 / 4 / 3;
    }
}

/* CTA */

.cta {
    margin-top: 40px;
    margin-bottom: 40px;
}

.resources-cta__inner {
    display: flex;
    flex-direction: column-reverse;
    background-color: #F0F8FF;
    border: 1px solid #EBEDF0;
    border-radius: 24px;
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg width="1200" height="384" viewBox="0 0 1200 384" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 161.545C9.02057 136.857 35.0981 116.273 57.9273 104.476C100.303 82.5771 147.329 68.4389 194.378 61.5666C219.073 57.9594 244.32 56.9341 269.255 57.2757C289.669 57.5553 307.282 73.5072 319.673 88.4921C338.708 111.511 358.566 132.136 363.869 162.51C369.121 192.585 370.034 224.424 355.288 251.869C338.345 283.4 310.944 310.986 281.913 331.465C242.388 359.347 198.158 363.255 151.04 362.252C119.879 361.589 89.5916 350.461 77.451 319.558C65.2356 288.464 68.7249 243.884 85.1746 215.181C114.113 164.686 164.832 133.713 215.833 109.41C272.445 82.4339 334.157 66.9302 396.802 66.9302C419.921 66.9302 444.528 64.5945 467.173 70.2557C486.711 75.1401 506.729 83.625 523.92 94.0703C560.446 116.263 587.901 148.077 611.67 183.214C638.665 223.12 655.021 268.963 685.044 307.007C709.779 338.349 737.206 361.113 775.475 374.589C792.767 380.677 812.58 381.306 830.721 382.527C854.768 384.145 879.356 384.793 903.13 380.274C956.601 370.11 1015.7 351.419 1059.75 318.592C1102.12 287.011 1137.01 241.168 1154.68 191.581C1169.47 150.086 1176.51 103.93 1152.54 64.1411C1121.04 11.8648 1068.09 -8.85183 1008.69 2.6738C978.47 8.5367 943.724 29.3035 927.052 55.2375C912.9 77.2514 911.595 107.157 916.539 132.581C930.85 206.179 993.229 260.522 1059.43 288.02C1092.53 301.772 1128.41 305.343 1164.02 306.256C1193.02 307 1220.8 308.907 1241.58 285.767C1252.09 274.055 1260.85 260.364 1269.68 247.363C1276.64 237.108 1285.43 227.32 1290.28 215.825C1305.01 180.924 1311.09 141.571 1321.82 105.334C1330.6 75.6428 1339.85 39.0374 1360.43 14.9029C1368.55 5.39081 1379.37 -1.48273 1390.79 -6.33712C1433.25 -24.3821 1486.66 -16.0989 1531.21 -16.0989" stroke="white" stroke-width="36" stroke-linecap="round"/></svg>');
    background-repeat: no-repeat;
    background-size: cover;

    @media screen and (min-width: 1023.98px) {
        flex-direction: row;
    }
}

.resources-cta__content-col {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 24px;
    border-radius: 24px;
    overflow: hidden;

    @media screen and (min-width: 1023.98px) {
        padding: 64px 32px;
        max-width: 712px;
    }

    @media screen and (min-width: 1439.98px) {
        padding: 64px 56px;
    }

    .btn--cta {
        margin-top: 32px;
        align-self: center;

        @media screen and (min-width: 1023.98px) {
            align-self: initial;
        }
    }
}

.resources-cta__content-col::before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    display: block;
    content: '';
    background-color: #F0F8FF;
}

.resources-cta__content-title {
    padding: 0;
    margin-bottom: 16px;
}

.resources-cta__decor-col {
    width: 100%;
    position: relative;
    background-image: url('/wp-content/themes/eds-divi-child-theme/mr/assets/images/cta-decore-col.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    min-height: 300px;

    @media screen and (min-width: 1023.98px) {
        /*margin-left: -70px;*/
        width: 100%;
        max-width: 547px;
    }

    @media screen and (min-width: 1439.98px) {
        background-position: -28px center;
    }
}

/* RESOURCES FILTER */

.resources-filters__top {
    padding: 40px 0px 24px;
}

.resources-filters__top + .resources-filters__form-toggle {
    display: inline-flex;
    position: relative;
    top: -2px;

    @media screen and (min-width: 1023.98px) {
        display: none;
    }
}

.resources-filters__title {
    color: var(--Content-Text-Heading-Default, #1E1E1E);
    font-family: Recoleta;
    font-size: var(--Heading-M-Lexend-Size, 38px);
    font-style: normal;
    font-weight: 500;
    line-height: var(--Heading-M-Lexend-Line-Height, 44px);
    letter-spacing: var(--Heading-M-Lexend-Letter-Spacing, 0.5px);
    padding: 0;
}

.resources-filters__form-title {
    color: var(--Text-Primary, #1B1D1D);
    font-family: "Work Sans";
    font-size: 22px;
    font-weight: 500;
    line-height: normal;
    padding: 0 16px;
    margin: 0 0 24px;

    @media screen and (min-width: 1023.98px) {
        display: none;
    }
}

.resources-filters__form-toggle {
    position: relative;
    display: flex;
    height: 48px;
    padding: 8px 16px;
    align-items: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid var(--Resource-Border-Dark, #D8D8DC);
    background-color: transparent;
    cursor: pointer;

    @media screen and (min-width: 1023.98px) {
        display: none;
    }
}

.resources-filters__form-toggle::before {
    display: block;
    content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.33337 7.99984V2.6665M12.6667 13.3332V11.3332M3.33337 13.3332V10.6665M12.6667 8.6665V2.6665M8.00004 4.6665V2.6665M8.00004 13.3332V7.33317" stroke="%234B4B4B" stroke-linecap="round"/><path d="M3.33333 10.6667C4.06971 10.6667 4.66667 10.0697 4.66667 9.33333C4.66667 8.59695 4.06971 8 3.33333 8C2.59695 8 2 8.59695 2 9.33333C2 10.0697 2.59695 10.6667 3.33333 10.6667Z" stroke="%234B4B4B" stroke-linecap="round"/><path d="M7.99996 7.33317C8.73634 7.33317 9.33329 6.73622 9.33329 5.99984C9.33329 5.26346 8.73634 4.6665 7.99996 4.6665C7.26358 4.6665 6.66663 5.26346 6.66663 5.99984C6.66663 6.73622 7.26358 7.33317 7.99996 7.33317Z" stroke="%234B4B4B" stroke-linecap="round"/><path d="M12.6667 11.3332C13.4031 11.3332 14 10.7362 14 9.99984C14 9.26346 13.4031 8.6665 12.6667 8.6665C11.9303 8.6665 11.3334 9.26346 11.3334 9.99984C11.3334 10.7362 11.9303 11.3332 12.6667 11.3332Z" stroke="%234B4B4B" stroke-linecap="round"/></svg>');
}

.resources-filters__form-taxonomies {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    position: fixed;
    left: -100%;
    top: 0;
    bottom: 0;
    width: 100%;
    z-index: 10;
    transition: left 0.2s ease-in-out;
    background-color: #fff;

    @media screen and (min-width: 1023.98px) {
        position: static;
        flex-direction: row;
        gap: 16px;
        width: 100%;
        padding: 0;
    }
}

.resources-filters__form {
    flex-wrap: nowrap;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    width: calc(100% - 60px);
    padding: 0;
    display: inline-flex;
    position: relative;
    top: -4px;

    @media screen and (min-width: 1023.98px) {
        display: flex;
        flex-direction: row;
        padding: 0;
        width: 100%;
        position: static;
    }

    .resources-filters__form-element {
        width: 100%;
    }

    .resources-filters__dropdown-wrapper {
        display: flex;
        flex-direction: column;
        border-radius: var(--Radius-M, 16px);
        /*border: 1px solid var(--Border-Primary, #EBEDF0);*/

        background: #fff;
        max-height: 0;
        overflow: hidden;
        z-index: 100;

        @media screen and (min-width: 1023.98px) {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
        }
    }

    .resources-filters__dropdown {
        padding-top: 16px;
        padding-bottom: 16px;
        border-bottom: 1px solid #D8D8DC;

    }

    .dropdown-options [role="option"] {
        position: relative;
        display: flex;
        justify-content: space-between;
        /*height: 44px;*/
        padding: var(--Padding-XS, 8px) var(--Padding-XL, 16px) var(--Padding-XS, 8px) 56px;
        align-items: center;
        color: var(--Content-Link-Primary-Default, #2E2E2E);
        font-family: var(--Link-S-Family, Lexend);
        font-size: var(--Link-S-Size, 16px);
        font-weight: 400;
        line-height: var(--Link-S-Line-Height, 20px);
        letter-spacing: var(--Link-S-Letter-Spacing, 0px);

        i {
            color: var(--Text-Secondary, #4B4B4B);
            font-family: "Work Sans";
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
        }
    }

    .dropdown-options [role="option"]:hover {
        background-color: #F5F5F5;
    }

    .dropdown-options [role="option"]:focus {
        border: none;
        color: var(--Content-Link-Primary-Hover, #545454);
        background-color: var(--Surface-Basic-Primary, #EBEDF0);
    }

    .dropdown-options [role="option"].is-active {
        color: var(--Content-Text-Heading-Accent, #00409B);
        background-color: var(--Blue-100, #E2EEFF);
    }

    .dropdown-options [role="option"]::before {
        position: absolute;
        display: block;
        left: 16px;
        content: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.65" y="1.3126" width="18.7" height="18.7" rx="3.35" stroke="%231E1E1E" stroke-width="1.3"/></svg>');
        line-height: 0;
    }

    .dropdown-options [role="option"].is-active::before {
        content: url('data:image/svg+xml,<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg"><rect y="0.662598" width="20" height="20" rx="4" fill="%2300409B"/><path d="M15 7.53798C15 7.70391 14.9341 7.86304 14.8167 7.98037L8.56773 14.2288C8.50968 14.287 8.44072 14.3331 8.3648 14.3646C8.28888 14.3961 8.20749 14.4124 8.1253 14.4124C8.0431 14.4124 7.96171 14.3961 7.88579 14.3646C7.80987 14.3331 7.74091 14.287 7.68287 14.2288L5.18326 11.7294C5.06592 11.6121 5 11.453 5 11.287C5 11.1211 5.06592 10.962 5.18326 10.8446C5.3006 10.7273 5.45975 10.6614 5.62569 10.6614C5.79163 10.6614 5.95078 10.7273 6.06812 10.8446L8.1253 12.9029L13.9319 7.0956C14.0492 6.97827 14.2084 6.91235 14.3743 6.91235C14.5403 6.91235 14.6994 6.97827 14.8167 7.0956C14.9341 7.21293 15 7.37206 15 7.53798Z" fill="white"/></svg>');
    }

    .custom-dropdown {
        position: relative;
        /*margin-bottom: 16px;*/
        user-select: none;
        border-bottom: 1px solid #EBEBF0;;

        @media screen and (min-width: 1023.98px) {
            margin-bottom: 0;
            border-bottom: none;
        }
    }

    [aria-live="polite"]:not(.selected) {
        position: relative;
        background: #fff;
        cursor: pointer;
        display: flex;
        height: 48px;
        padding: 0px var(--Padding-XL, 16px);
        justify-content: space-between;
        align-items: center;
        flex: 1 0 0;
        border-radius: 8px  ;

        /* Text/Work Sans/Body */
        font-family: "Work Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px; /* 133.333% */


        @media screen and (min-width: 1023.98px) {
            border: 1px solid #D8D8DC;
        }
    }

    [aria-live="polite"]:not(.selected)::before {
        display: block;
        position: absolute;
        right: 10px;
        top: 10px;
        width: 24px;
        height: 24px;
        content: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10" stroke="%234B4B4B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    }

    .custom-dropdown.open .select-dropdown::before {
        transform: rotate(180deg);
    }

    .custom-dropdown.open .dropdown-options {
        max-height: none;
        margin-top: 12px;

        @media screen and (min-width: 1023.98px) {
            border-radius: 8px;
            border: 1px solid var(--States-Dark-Grey-1, #8B8B8B);
        }
    }

    .dropdown-options li {
        padding: 10px;
        cursor: pointer;
    }

    .resources-filters__search {
        position: relative;
        flex-shrink: 0;
        display: flex;
        height: 48px;
        /*padding: 8px 16px;*/
        align-items: center;
        border-radius: 8px;

        overflow: hidden;
        border-radius: 8px;
        border: 1px solid var(--Resource-Border-Dark, #D8D8DC);
        transition: width 0.2s ease-in-out;

        @media screen and (min-width: 1023.98px) {
            width: 48px;
        }

        input {
            border: none;
            /*margin-left: 26px;*/
            /*height: 48px;*/
            padding: 8px 16px 8px 48px;
            width: 100%;
            height: 100%;
        }
    }

    .resources-filters__search.is-expanded {
        width: 100%;

        @media screen and (min-width: 1023.98px) {
            width: 210px;
        }
    }

    .resources-filters__search::before {
        position: absolute;
        left: 16px;
        display: block;
        content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z" stroke="%234B4B4B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M14 14.0005L11.1333 11.1338" stroke="%234B4B4B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .resources-filters__control {
        display: flex;
        justify-content: space-between;
        padding: 16px;

        .btn {
            border: none;
            cursor: pointer;
        }

        .btn--label {
            padding-right: 16px;
        }

        .btn--label::before {
            display: none;
        }
    }
}

.resources-filters__form.is-opened {
    .resources-filters__form-taxonomies {
        left: 0;


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

        }

        .resources-filters__form-toggle {
            position: absolute;
            right: 16px;
            top: 16px;
            border: none;
            padding: 0;
            width: 36px;
            height: 36px;
        }

        .resources-filters__form-toggle::before {
            width: 36px;
            height: 36px;
            content: '';
            background-image: url('data:image/svg+xml,<svg width="64px" height="64px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.29289 5.29289C5.68342 4.90237 6.31658 4.90237 6.70711 5.29289L12 10.5858L17.2929 5.29289C17.6834 4.90237 18.3166 4.90237 18.7071 5.29289C19.0976 5.68342 19.0976 6.31658 18.7071 6.70711L13.4142 12L18.7071 17.2929C19.0976 17.6834 19.0976 18.3166 18.7071 18.7071C18.3166 19.0976 17.6834 19.0976 17.2929 18.7071L12 13.4142L6.70711 18.7071C6.31658 19.0976 5.68342 19.0976 5.29289 18.7071C4.90237 18.3166 4.90237 17.6834 5.29289 17.2929L10.5858 12L5.29289 6.70711C4.90237 6.31658 4.90237 5.68342 5.29289 5.29289Z" fill="%230F1729"></path></g></svg>');
            background-size: contain;
        }
    }

}

/* Selected filters */

.selected {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    min-height: 40px;
    padding-top: 24px;
    padding-bottom: 24px;
}

.selected-filter-tag {
    display: flex;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 50px;
    border: 1px solid #D8D8DC;
    background-color: #F8F8F8;
    color: var(--Content-Link-Primary-Default, #2E2E2E);
    font-family: var(--Link-S-Family, Lexend);
    font-size: var(--Link-S-Size, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Link-S-Line-Height, 20px);

    .remove-tag {
        display: block;
        content: url('data:image/svg+xml,<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.1406 17.5134C16.3344 17.7071 16.6531 17.7071 16.8469 17.5134C17.0406 17.3196 17.0406 17.0009 16.8469 16.8071L12.7063 12.6665L16.8469 8.52588C17.0406 8.33213 17.0406 8.01338 16.8469 7.81963C16.6531 7.62588 16.3344 7.62588 16.1406 7.81963L12 11.9603L7.8625 7.81963C7.66875 7.62588 7.35 7.62588 7.15625 7.81963C6.9625 8.01338 6.9625 8.33213 7.15625 8.52588L11.2937 12.6665L7.15312 16.8071C6.95937 17.0009 6.95937 17.3196 7.15312 17.5134C7.34687 17.7071 7.66562 17.7071 7.85937 17.5134L12 13.3728L16.1406 17.5134Z" fill="%232E2E2E"/></svg>');
        cursor: pointer;
    }
}

.resources-posts__inner {
    .posts-container {
        display: flex;
        flex-wrap: wrap;
        gap: 24px;
        position: relative;

        @media screen and (min-width: 980.98px) {
            gap: 16px;
        }

        @media screen and (min-width: 1439.98px) {
            gap: 32px;
        }

        .post-card {
            width: 100%;

            @media screen and (min-width: 767.98px) {
                width: calc(50% - 16px);
            }

            @media screen and (min-width: 1439.98px) {
                width: calc((100% / 3) - (64px / 3));
            }
        }
    }

    .posts-container.is-loading::before {
        display: flex;
        content: '';
        justify-content: center;
        align-items: center;
        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><radialGradient id="a11" cx=".66" fx=".66" cy=".3125" fy=".3125" gradientTransform="scale(1.5)"><stop offset="0" stop-color="%234592FF"></stop><stop offset=".3" stop-color="%234592FF" stop-opacity=".9"></stop><stop offset=".6" stop-color="%234592FF" stop-opacity=".6"></stop><stop offset=".8" stop-color="%234592FF" stop-opacity=".3"></stop><stop offset="1" stop-color="%234592FF" stop-opacity="0"></stop></radialGradient><circle transform-origin="center" fill="none" stroke="url(%23a11)" stroke-width="15" stroke-linecap="round" stroke-dasharray="200 1000" stroke-dashoffset="0" cx="100" cy="100" r="70"><animateTransform type="rotate" attributeName="transform" calcMode="spline" dur="2" values="360;0" keyTimes="0;1" keySplines="0 0 1 1" repeatCount="indefinite"></animateTransform></circle><circle transform-origin="center" fill="none" opacity=".2" stroke="%234592FF" stroke-width="15" stroke-linecap="round" cx="100" cy="100" r="70"></circle></svg>');
        background-color: rgba(255, 255, 255, 0.3);
        background-position: center;
        background-size: 60px 60px;
        background-repeat: no-repeat;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
}

.post-card__top img {
    border-radius: 24px;

}

.post-card {
    border-radius: 24px;
    overflow: hidden;
}

.post-card__top {
    position: relative;
    margin-bottom: -40px;
    z-index: -1;
    height: 276px;
}

.post-card__badge {
    position: absolute;
    left: 0;
    top: 0;
}

.post-card__content {
    background-color: #EEF2FF;
    border: 1px solid #EBEDF0;
    height: calc(100% - 236px);
    display: flex;
    padding: var(--Padding-XL, 16px);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--Margin-M, 12px);
    align-self: stretch;
}

.post-card__title {
    color: var(--Content-Text-Heading-Default, #1E1E1E);
    font-family: var(--Heading-2XS-Lexend-Family, Lexend);
    font-size: var(--Heading-2XS-Lexend-Size, 20px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Heading-2XS-Lexend-Line-Height, 28px); /* 140% */
    letter-spacing: var(--Heading-2XS-Lexend-Letter-Spacing, 0px);
    margin-bottom: auto;
}

.post-card__meta {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 4px;
}

.post-card__tag {
    display: flex;
    gap: 4px;
    padding: var(--Padding-2XS, 6px) var(--Padding-XS, 8px);
    align-items: center;
    gap: var(--Margin-XXS, 4px);
    border-radius: var(--Radius-Pill, 1000px);
    background: var(--Surface-Basic-White, #FFF);
    color: var(--Content-Text-Body-Primary, #1E1E1E);
    font-family: var(--Body-S-Lexend-Regular-Family, Lexend);
    font-size: var(--Body-S-Lexend-Regular-Size, 14px);
    font-style: normal;
    font-weight: 400;
    line-height: var(--Body-S-Lexend-Regular-Line-Height, 16px);
    letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing, 0px);

    i {
        display: flex;
        width: 19px;
        height: 19px;
        object-fit: contain;

        img {
            object-fit: contain;
        }
    }
}

/* PAGINATION */

.pagination {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 16px;
    padding-bottom: 16px;

    .page-numbers {
        display: flex;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        color: var(--Text-Secondary, #4B4B4B);

        /* Text/Work Sans/Button */
        font-family: "Work Sans";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: 24px; /* 133.333% */
    }

    .page-numbers.current {
        display: flex;
        padding: 8px 16px;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 24px;
        border: 1px solid var(--Resource-Border-Dark, #D8D8DC);
        background: var(--States-Light-Grey-2, #EDEDED);
    }
}

/* BUTTONS */

.button {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--Margin-XS);
    width: fit-content;
    max-height: 56px;
}

.button-icon {
    display: flex;
    align-items: center;
}

.button-filled {
    transition: all .2s;
    cursor: pointer;
    background-color: var(--Blue-400);
    border: var(--Width-M) solid var(--Blue-400);
    color: var(--Neutral-White);
}

.button-outline {
    transition: all .2s;
    cursor: pointer;
    background-color: var(--Blue-400);
    border: var(--Width-S) solid var(--Neutral-White);
    color: var(--Neutral-White);
}

.button-large {
    padding: var(--Padding-L) var(--Padding-2XL);
    border-radius: var(--Radius-Pill);
    font-size: var(--Link-M-Size);
    font-weight: var(--Link-M-Weight);
    line-height: var(--Link-M-Line-Height);
    letter-spacing: var(--Link-M-Letter-Spacing);
    font-family: var(--Link-M-Family);

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

.button-mobile-fit {
    width: fit-content;
}

.button-yellow {
    background-color: var(--Yellow-200);
    border: var(--Width-M) solid var(--Yellow-200);
    color: var(--Blue-700); 
}

.button-white {
    background-color: var(--Neutral-White);
    border: var(--Width-XS) solid var(--Neutral-400);
    color: var(--Neutral-500); 
}

.button-filled:hover {
    background-color: var(--Blue-500);
    border-color: var(--Blue-500);
}

.button-filled:focus {
    background-color: var(--Blue-400);
    border: var(--Width-S) solid var(--Blue-500);
}

.button-outline:hover {
    background-color: var(--Button-Outline-Secondary-Hover);
}

.button-outline:focus {
    background-color: var(--Button-Outline-Secondary-Hover);
    border: var(--Width-S) solid var(--Neutral-White);
    outline: var(--Width-M) solid var(--Neutral-White);
}

.button-outline.button-white:focus {
    background-color: var(--Button-Outline-Secondary-Hover);
    border: var(--Width-S) solid var(--Blue-500);
    outline: var(--Width-M) solid var(--Blue-500);
}

.button-outline:active {
    background-color: var(--Button-Outline-Secondary-Click);
    border: var(--Width-S) solid var(--Neutral-White);
}

.button-yellow:hover {
    background-color: var(--Yellow-300);
    border-color: var(--Yellow-300);
}

.button-yellow:focus {
    background-color: var(--Yellow-200);
    border: var(--Width-M) solid var(--Neutral-500);
    outline: var(--Width-M) solid var(--Neutral-500);
}

/* HERO WITH CONTACT FORM SECTION */

.hero-with-contact-form {
    padding: var(--Padding-6XL) 0;
    margin-bottom: var(--Margin-12XL);
    border-bottom-left-radius: var(--Radius-3XL);
    border-bottom-right-radius: var(--Radius-3XL);
    background-size: cover;
    display: flex;
    align-items: center;
    justify-items: center;

    @media (max-width: 768px) {
        margin-bottom: var(--Margin-10XL);
    }

    .mr-container {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: var(--Margin-5XL);

        @media (max-width: 768px) {
            flex-direction: column;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-4XL);
            width: 100%;
            margin: var(--Margin-None);
        }

        .content-container {
            padding-top: var(--Padding-6XL);
  
            .wave-line {
                color: var(--Blue-300);
            }

            .title-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-2XL);
            }

            h1 {
                font-family: var(--Heading-XL-Lexend-SemiBold-Family);
                color: var(--Blue-700);
                font-size: var(--Heading-XL-Lexend-SemiBold-Size);
                font-weight: var(--Heading-XL-Lexend-SemiBold-Weight);
                line-height: var(--Heading-XL-Lexend-SemiBold-Line-Height);
                letter-spacing: var(--Heading-XL-Lexend-SemiBold-Letter-Spacing);
                margin: var(--Margin-None);
            }
            
            strong {
                font-family: var(--Heading-XS-Bree-Serif-Family);
                color: var(--Blue-400);
                font-size: var(--Heading-XS-Bree-Serif-Size);
                font-weight: var(--Heading-XS-Bree-Serif-Weight);
                line-height: var(--Heading-XS-Bree-Serif-Line-Height);
                letter-spacing: var(--Heading-XS-Bree-Serif-Letter-Spacing);
                padding-right: var(--Padding-3XL);

                @media (max-width: 768px) {
                    padding-right: var(--Padding-None);
                }
            }

            p {
                font-family: var(--Body-M-Lexend-Regular-Family);
                color: var(--Neutral-400);
                font-size: var(--Body-M-Lexend-Regular-Size);
                font-weight: var(--Body-M-Lexend-Regular-Weight);
                line-height: var(--Body-M-Lexend-Regular-Line-Height);
                letter-spacing: var(--Body-M-Lexend-Regular-Letter-Spacing);
                padding-right: var(--Padding-11XL);

                @media (max-width: 768px) {
                    padding-right: var(--Padding-None);
                }
            }
        }

        .contact-form-container {
            background-color: var(--Neutral-White);
            border-radius: var(--32);
            padding: var(--Padding-6XL);

            @media (max-width: 768px) {
                padding-right: var(--Padding-XL);
                padding-left: var(--Padding-XL);
            }

            h3 {
                font-family: var(--Heading-S-Bree-Serif-Family);
                color: var(--Blue-700);
                font-size: var(--Heading-S-Bree-Serif-Size);
                font-weight: var(--Heading-S-Bree-Serif-Weight);
                line-height: var(--Heading-S-Bree-Serif-Line-Height);
                letter-spacing: var(--Heading-S-Bree-Serif-Letter-Spacing);
            }

            form {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-2XL);

                @media (max-width: 768px) {
                    gap: var(--Margin-M);
                }

                h2 {
                    font-family: var(--Heading-S-Bree-Serif-Family);
                    color: var(--Blue-700);
                    font-size: var(--Heading-S-Bree-Serif-Size);
                    font-weight: var(--Heading-S-Bree-Serif-Weight);
                    line-height: var(--Heading-S-Bree-Serif-Line-Height);
                    letter-spacing: var(--Heading-S-Bree-Serif-Letter-Spacing);
                }

                .form-field {
                    display: flex;
                    flex-direction: column;
                    gap: var(--Margin-XXS);

                    label {
                        display: flex;
                        flex-direction: column;
                        gap: var(--Margin-XXS);
                        font-family: var(--Body-XS-Lexend-Regular-Family);
                        color: var(--Blue-400);
                        font-size: var(--Body-XS-Lexend-Regular-Size);
                        font-weight: var(--Body-XS-Lexend-Regular-Weight);
                        line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);

                        .field-label {
                            margin-left: var(--Margin-M);
                            
                            sup {
                                bottom: var(--2)
                            }
                        }
                    }

                    input {
                        width: 100%;
                        background-color: var(--Neutral-White);
                        border: var(--Width-S) solid var(--Neutral-200);
                        border-radius: var(--Radius-Pill);
                        padding: var(--Padding-M);
                        font-family: var(--Body-XS-Lexend-Regular-Family);
                        color: var(--Neutral-400);
                        font-size: var(--Body-XS-Lexend-Regular-Size);
                        font-weight: var(--Body-XS-Lexend-Regular-Weight);
                        line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                        transition: all .2s;
                    }
                    
                    input:hover {
                        background-color: var(--Blue-75);
                        border-color: var(--Neutral-400);
                    }

                    input::placeholder {
                        color: var(--Neutral-200);
                        transition: all .2s;
                    }

                    input:hover::placeholder {
                        color: var(--Neutral-400);
                    }
                    
                    .wpcf7-not-valid-tip {
                        margin-left: var(--Margin-M);
                        font-size: 80%;
                    }
                }

                .form-submit {
                    margin-top: var(--Margin-L);

                    @media (max-width: 768px) {
                        margin-top: var(--Margin-S);
                    }

                    input, button {
                        background-color: var(--Blue-400);
                        border: var(--Width-M) solid var(--Blue-400);
                        border-radius: var(--Radius-Pill);
                        padding: var(--Padding-L) var(--Padding-2XL);
                        font-family: var(--Link-M-Family);
                        color: var(--Neutral-White);
                        font-size: var(--Link-M-Size);
                        font-weight: var(--Link-M-Weight);
                        line-height: var(--Link-M-Line-Height);
                        letter-spacing: var(--Link-M-Letter-Spacing);
                        transition: all .2s;
                        cursor: pointer;

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

                    input:hover, button:hover {
                        background-color: var(--Blue-500);
                        border-color: var(--Blue-500);
                    }

                    input:focus, input:focus {
                        background-color: var(--Blue-400);
                        border-color: var(--Neutral-500);
                    }
                }

                .wpcf7-response-output {
                    margin: var(--Margin-None) !important;
                    padding: var(--Padding-M);
                    font-family: var(--Body-XS-Lexend-Regular-Family);
                    color: var(--Neutral-200);
                    font-size: var(--Body-XS-Lexend-Regular-Size);
                    font-weight: var(--Body-XS-Lexend-Regular-Weight);
                    line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                    border-radius: var(--Radius-Pill);
                }
            }

            .hbspt-form {
                min-height: 860px;

                @media screen and (max-width: 768px) {
                    min-height: 790px;
                }
            
                form {
                    display: flex;
                    flex-direction: column;
                    gap: var(--Margin-2XL);

                    @media (max-width: 768px) {
                        gap: var(--Margin-M);
                    }

                    h2 {
                        font-family: var(--Heading-S-Bree-Serif-Family);
                        color: var(--Blue-700);
                        font-size: var(--Heading-S-Bree-Serif-Size);
                        font-weight: var(--Heading-S-Bree-Serif-Weight);
                        line-height: var(--Heading-S-Bree-Serif-Line-Height);
                        letter-spacing: var(--Heading-S-Bree-Serif-Letter-Spacing);
                    }

                    .hs-form-field {
                        display: flex;
                        flex-direction: column;
                        gap: var(--Margin-XXS);

                        label {
                            font-family: var(--Body-XS-Lexend-Regular-Family);
                            color: var(--Blue-400);
                            font-size: var(--Body-XS-Lexend-Regular-Size);
                            font-weight: var(--Body-XS-Lexend-Regular-Weight);
                            line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                            letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                            margin-left: var(--Margin-M);
                        }

                        .hs-form-required {
                            margin-left: var(--Margin-XS);
                        }

                        .hs-error-msg {
                            display: flex;
                            flex-direction: row;
                            gap: var(--Margin-XXS);
                            font-family: var(--Body-XS-Lexend-Regular-Family);
                            color: var(--Red-300);
                            font-size: var(--Body-XS-Lexend-Regular-Size);
                            font-weight: var(--Body-XS-Lexend-Regular-Weight);
                            line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                            letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                            margin-left: var(--Margin-M);
                        }

                        input, select {
                            width: 100%;
                            background-color: var(--Neutral-White);
                            border: var(--Width-S) solid var(--Neutral-200);
                            border-radius: var(--Radius-Pill);
                            padding: var(--Padding-M);
                            font-family: var(--Body-XS-Lexend-Regular-Family);
                            color: var(--Neutral-400);
                            font-size: var(--Body-XS-Lexend-Regular-Size);
                            font-weight: var(--Body-XS-Lexend-Regular-Weight);
                            line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                            letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                            transition: all .2s;
                        }
                        
                        input:hover {
                            background-color: var(--Blue-75);
                            border-color: var(--Neutral-400);
                        }

                        input::placeholder {
                            color: var(--Neutral-200);
                            transition: all .2s;
                        }

                        input:hover::placeholder {
                            color: var(--Neutral-400);
                        }
                    }

                    .hs-submit {
                        margin-top: var(--Margin-L);

                        @media (max-width: 768px) {
                            margin-top: var(--Margin-S);
                        }

                        input, button {
                            background-color: var(--Blue-400);
                            border: var(--Width-M) solid var(--Blue-400);
                            border-radius: var(--Radius-Pill);
                            padding: var(--Padding-L) var(--Padding-2XL);
                            font-family: var(--Link-M-Family);
                            color: var(--Neutral-White);
                            font-size: var(--Link-M-Size);
                            font-weight: var(--Link-M-Weight);
                            line-height: var(--Link-M-Line-Height);
                            letter-spacing: var(--Link-M-Letter-Spacing);
                            transition: all .2s;
                            cursor: pointer;

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

                        input:hover, button:hover {
                            background-color: var(--Blue-500);
                            border-color: var(--Blue-500);
                        }

                        input:focus, input:focus {
                            background-color: var(--Blue-400);
                            border-color: var(--Neutral-500);
                        }
                    }

                    .wpcf7-response-output {
                        margin: var(--Margin-None) !important;
                        padding: var(--Padding-M);
                        font-family: var(--Body-XS-Lexend-Regular-Family);
                        color: var(--Neutral-200);
                        font-size: var(--Body-XS-Lexend-Regular-Size);
                        font-weight: var(--Body-XS-Lexend-Regular-Weight);
                        line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                        border-radius: var(--Radius-Pill);
                    }
                }
            }
        }
    }
}

/* WHY EVERYDAY SPEECH SECTION */

.why-everyday-speech {
    padding: var(--Padding-12XL) 0;
    display: flex;
    align-items: center;
    justify-items: center;

    @media (max-width: 768px) {
        padding: var(--Padding-10XL) 0;
    }

    .mr-container {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: var(--Margin-5XL);

        @media (max-width: 768px) {
            flex-direction: column;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-4XL);
            width: 100%;
            margin: var(--Margin-None);
        }

        .content-container {
            .title-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-L);
            }

            h2 {
                font-family: var(--Heading-S-Bree-Serif-Family);
                color: var(--Blue-700);
                font-size: var(--Heading-S-Bree-Serif-Size);
                font-weight: var(--Heading-S-Bree-Serif-Weight);
                line-height: var(--Heading-S-Bree-Serif-Line-Height);
                letter-spacing: var(--Heading-S-Bree-Serif-Letter-Spacing);
                margin: var(--Margin-None);
                padding: var(--Padding-None);
            }

            p {
                font-family: var(--Body-S-Lexend-Regular-Family);
                color: var(--Neutral-400);
                font-size: var(--Body-S-Lexend-Regular-Size);
                font-weight: var(--Body-S-Lexend-Regular-Weight);
                line-height: var(--Body-S-Lexend-Regular-Line-Height);
                letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
            }

            .benefits-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-3XL);

                .benefit {
                    .benefit-title {
                        display: flex;
                        align-items: stretch;
                        background-color: var(--Yellow-100);
                        border-radius: var(--Radius-Pill);
                        overflow: hidden;

                        .benefit-icon {
                            display: flex;
                            align-items: center;
                            padding: var(--Padding-M);
                            background-color: var(--Yellow-200);
                            color: var(--Blue-700);
                        }

                        strong {
                            padding: var(--Padding-M) var(--Padding-XL);
                            font-family: var(--Heading-XS-Bree-Serif-Family);
                            color: var(--Blue-700);
                            font-size: var(--Heading-XS-Bree-Serif-Size);
                            font-weight: var(--Heading-XS-Bree-Serif-Weight);
                            line-height: var(--Heading-XS-Bree-Serif-Line-Height);
                            letter-spacing: var(--Heading-XS-Bree-Serif-Letter-Spacing);
                        }
                    }

                    .benefit-description {
                        padding-top: var(--Padding-L);
                        padding-left: var(--Padding-14XL);
                        font-family: var(--Body-XS-Lexend-Regular-Family);
                        color: var(--Neutral-400);
                        font-size: var(--Body-XS-Lexend-Regular-Size);
                        font-weight: var(--Body-XS-Lexend-Regular-Weight);
                        line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                    }
                }
            }
        }
        
        .image-container img {
            width: 100%;
        }
    }
}

/* FEATURED QUOTE SECTION */

.featured-quote {
    padding: var(--Padding-12XL) 0;
    display: flex;
    align-items: center;
    justify-items: center;

    @media (max-width: 768px) {
        padding: var(--Padding-10XL) 0;
    }

    .mr-container {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: var(--Margin-5XL);

        .quote-container {
            width: 100%;
            margin: auto;
            position: relative;

            blockquote {
                padding: var(--60);
                margin: var(--Margin-None);
                border-radius: var(--Radius-XL);
                border: none;
                background-size: cover;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-items: center;
                gap: var(--Margin-5XL);

                .quote {
                    font-family: var(--Heading-L-Bree-Serif-Family);
                    color: var(--Green-400);
                    font-size: var(--Heading-L-Lexend-Medium-Size);
                    font-weight: var(--Heading-L-Bree-Serif-Weight);
                    line-height: var(--Heading-L-Bree-Serif-Line-Height);
                    letter-spacing: var(--Heading-L-Bree-Serif-Letter-Spacing);
                    text-align: center;
                }
                
                footer {
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    justify-items: center;
                    gap: var(--Margin-L);

                    .quote-author-profile-image {
                        width: var(--58);
                        height: var(--58);
                        border-radius: var(--Radius-Pill);
                    }

                    .quote-author-info {
                        display: flex;
                        flex-direction: column;
                        align-items: start;
                        gap: var(--6);

                        .quote-author-name {
                            font-family: var(--Heading-2XS-Bree-Serif-Family);
                            color: var(--Blue-700);
                            font-style: normal;
                            font-size: var(--Heading-2XS-Bree-Serif-Size);
                            font-weight: var(--Heading-2XS-Bree-Serif-Weight);
                            line-height: var(--Heading-2XS-Bree-Serif-Line-Height);
                            letter-spacing: var(--Heading-2XS-Bree-Serif-Letter-Spacing);
                        }

                        .quote-author-title {
                            font-family: var(--Body-XS-Lexend-Regular-Family);
                            color: var(--Neutral-300);
                            font-style: normal;
                            font-size: var(--Body-XS-Lexend-Regular-Size);
                            font-weight: var(--Body-XS-Lexend-Regular-Weight);
                            line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                            letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                        }
                    }
                }

            }
        }
    }
}

/* HOW IT WORKS SECTION */

.how-it-works {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
    padding-top: var(--Padding-12XL);

    @media (max-width: 768px) {
        padding-top: var(--Padding-10XL);
    }

    .top-separator {
        width: 100%;
        height: 100%;
        color: var(--Blue-400);
        transform: translateY(1px); /* Fix the white line between separator and the next element */

        svg {
            display: block;
            width: 100%;
            height: 100%;
        }
    }

    .section-content {
        padding: var(--Padding-12XL) 0 var(--124) 0;
        background-color: var(--Blue-400);
        width: 100%;
        display: flex;
        align-items: center;
        justify-items: center;

        .mr-container {
            display: flex;
            flex-direction: column;
            align-items: start;
            gap: var(--Margin-5XL);

            .title-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--Margin-L);
                width: 100%;

                h2 {
                    font-family: var(--Heading-L-Lexend-Medium-Family);
                    color: var(--Neutral-White);
                    font-size: var(--Heading-L-Lexend-Medium-Size);
                    font-weight: var(--Heading-L-Lexend-Medium-Weight);
                    line-height: var(--Heading-L-Lexend-Medium-Line-Height);
                    letter-spacing: var(--Heading-L-Lexend-Medium-Letter-Spacing);
                    margin: var(--Margin-None);
                    padding: var(--Padding-None);
                }

                .description {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 60%;

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

                p {
                    font-family: var(--Body-M-Lexend-Regular-Family);
                    color: var(--Neutral-White);
                    font-size: var(--Body-M-Lexend-Regular-Size);
                    font-weight: var(--Body-M-Lexend-Regular-Weight);
                    line-height: var(--Body-M-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-M-Lexend-Regular-Letter-Spacing);
                    text-align: center;
                }
            }

            .weeks-container {
                width: 100%;
                display: flex;
                position: relative;

                .week {
                    border-radius: var(--Radius-L);
                    height: auto;
                    overflow: hidden;

                    .week-title {
                        display: flex;
                        align-items: center;
                        justify-items: center;
                        justify-content: center;
                        padding: var(--Padding-L) 0;
                        background-color: var(--Blue-200);
                        font-family: var(--Heading-XS-Bree-Serif-Family);
                        color: var(--Blue-700);
                        font-size: var(--Heading-XS-Lexend-Regular-Size); 
                        font-weight: var(--Heading-XS-Lexend-Regular-Weight);
                        line-height: var(--Heading-XS-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Heading-XS-Lexend-Regular-Letter-Spacing);
                    }

                    .week-description {
                        background-size: cover;
                        background-position: top;
                        display: flex;
                        align-items: start;
                        justify-content: center;
                        height: 100%;
                        padding: var(--Padding-XL);
                        padding-bottom: var(--Padding-6XL);
                        font-family: var(--Body-M-Lexend-Regular-Family);
                        color: var(--Neutral-400);
                        font-size: var(--Body-S-Lexend-Regular-Size); 
                        font-weight: var(--Body-S-Lexend-Regular-Weight);
                        line-height: var(--Body-S-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                        text-align: center;
                    }
                }

                .swiper-pagination {
                    top: unset;
                    bottom: 0;
                    
                    .swiper-pagination-bullet {
                        width: 10px;
                        height: 10px;
                        background: transparent;
                        border: 1px solid var(--Neutral-White);
                        transition: all .2s;
                        opacity: 1;
                    }

                     .swiper-pagination-bullet:hover, .swiper-pagination-bullet.swiper-pagination-bullet-active {
                        background: var(--Neutral-White);
                    }
                }

                @media (min-width: 769px) {
                    .swiper-wrapper {
                        display: grid;
                        grid-template-columns: repeat(5, 1fr);
                        gap: var(--Margin-L);
                    }

                    .swiper-slide {
                        all: unset; /* Remove Swiper layout */
                        border-radius: var(--Radius-L);
                        overflow: hidden;
                        height: auto;
                        width: 100%;
                    }
                }

                @media (max-width: 768px) {
                    padding-bottom: var(--Padding-7XL);
                }
            }
        }
    }    
}

/* FAQs SECTION */

.faqs {
    padding: var(--Padding-12XL) 0;
    margin-top: calc(var(--Margin-12XL) * -1);
    margin-bottom: var(--Margin-12XL);
    border-top-left-radius: var(--Radius-3XL);
    border-top-right-radius: var(--Radius-3XL);
    background-color: var(--Neutral-White);
    display: flex;
    align-items: center;
    justify-items: center;
    position: relative;

    @media (max-width: 768px) {
        padding: var(--Padding-10XL) 0;
        margin-top: calc(var(--Margin-10XL) * -1);
        margin-bottom: var(--Margin-10XL);
    }

    .mr-container {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: var(--Margin-5XL);

        @media (max-width: 768px) {
            flex-direction: column;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-4XL);
            width: 100%;
            margin: var(--Margin-None);
        }

        .content-container {
            width: 30%;
            
            @media (max-width: 768px) {
               width: 100%; 
            }
  
            .wave-line {
                color: var(--Blue-300);
            }

            .title-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-2XL);

                h2 {
                    font-family: var(--Heading-L-Lexend-Medium-Family);
                    color: var(--Blue-700);
                    font-size: var(--Heading-L-Lexend-Medium-Size);
                    font-weight: var(--Heading-L-Lexend-Medium-Weight);
                    line-height: var(--Heading-L-Lexend-Medium-Line-Height);
                    letter-spacing: var(--Heading-L-Lexend-Medium-Letter-Spacing);
                    margin: var(--Margin-None);
                    padding: var(--Padding-None);
                }

                .description {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }

                p {
                    font-family: var(--Body-S-Lexend-Regular-Family);
                    color: var(--Neutral-400);
                    font-size: var(--Body-S-Lexend-Regular-Size);
                    font-weight: var(--Body-S-Lexend-Regular-Weight);
                    line-height: var(--Body-S-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                }
            }
        }

        .faqs-container {
            width: 70%;
            gap: var(--Margin-L);

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

            .faq-item {
                background-color: var(--Neutral-White);
                border: var(--Width-M) solid var(--Neutral-200);
                border-radius: var(--Radius-M);
                overflow: hidden;
                transition: all .2s;

                .faq-toggle {
                    display: flex;
                    align-items: center;
                    justify-content:space-between;
                    padding: var(--Padding-L);
                    cursor: pointer;
                    transition: all .2s;

                    .faq-question {
                        font-family: var(--Heading-XS-Lexend-Regular-Family);
                        color: var(--Blue-700);
                        font-size: var(--Heading-XS-Lexend-Regular-Size);
                        font-weight: var(--Heading-XS-Lexend-Regular-Weight);
                        line-height: var(--Heading-XS-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Heading-XS-Lexend-Regular-Letter-Spacing);
                    }

                    .toggle-icon-wrapper {
                        padding: var(--Padding-S);
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }

                    .toggle-icon {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: var(--Blue-700);
                        transform: rotate(0);
                        transition: all .2s;
                    }
                }

                .faq-toggle:hover {
                    background-color: var(--Yellow-100);
                }

                .faq-answer {
                    padding: var(--Padding-None);
                    font-family: var(--Body-S-Lexend-Regular-Family);
                    color: var(--Neutral-400);
                    font-size: var(--Body-S-Lexend-Regular-Size);
                    font-weight: var(--Body-S-Lexend-Regular-Weight);
                    line-height: var(--Body-S-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                    opacity: 0;
                    height: 0;
                    transition: opacity .2s, height 0s;

                    p {
                        margin-bottom: 1rem;
                    }

                    ul {
                        list-style: disc;
                        padding-left: 2rem;
                    }
                }
            }

            .faq-item.is-active .faq-toggle {
                background-color: var(--Yellow-100);
            }

            .faq-item.is-active .faq-answer {
                padding: var(--Padding-M) var(--Padding-L);
                margin: var(--Margin-M) 0;
                opacity: 1;
                height: 100%;
            }

            .faq-item.is-active .toggle-icon {
                transform: rotate(45deg);
            }
        }
    }
}

.faqs.pricing-page-faq {
    margin-top: unset;
    margin-bottom: unset;
    border-top-left-radius: unset;
    border-top-right-radius: unset;
}

/* CARDS SECTION */

.admin-cards-style-1 {
    padding: 0;
    display: flex;
    align-items: center;
    justify-items: center;

    .mr-container {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: var(--Margin-5XL);

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-7XL);
            width: 100%;
            margin: var(--Margin-None);
        }

        .content-container {
            max-width: unset;

            .title-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-L);
            }

            h2 {
                font-family: var(--Heading-M-Lexend-Medium-Family);
                color: var(--Blue-700);
                font-size: var(--Heading-M-Lexend-Medium-Size);
                font-weight: var(--Heading-M-Lexend-Medium-Weight);
                line-height: var(--Heading-M-Lexend-Medium-Line-Height);
                letter-spacing: var(--Heading-M-Lexend-Medium-Letter-Spacing);
                margin: var(--Margin-None);
                padding: var(--Padding-None);
                text-align: center;
            }

            p {
                font-family: var(--Body-S-Lexend-Regular-Family);
                color: var(--Neutral-400);
                font-size: var(--Body-S-Lexend-Regular-Size);
                font-weight: var(--Body-S-Lexend-Regular-Weight);
                line-height: var(--Body-S-Lexend-Regular-Line-Height);
                letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                text-align: center;
            }

            .cards-container {
                display: flex;
                flex-direction: row;
                gap: var(--Margin-4XL);

                @media (max-width: 768px) {
                    flex-direction: column;
                }

                .card {
                    display: flex;
                    flex-direction: column;
                    align-items: stretch;
                    width: 100%;

                    .card-content {
                        display: flex;
                        flex-direction: column;
                        gap: var(--Margin-M);
                        height: 100%;
                        background-color: var(--Blue-100);
                        padding: var(--Padding-4XL);
                        padding-bottom: var(--Padding-6XL);
                        border-radius: var(--Radius-L);
                        margin-top: -100px;
                        position: relative;
                        z-index: 5;
                    }

                    .card-title {
                        font-family: var(--Heading-XS-Bree-Serif-Family);
                        color: var(--Blue-700);
                        font-size: var(--Heading-XS-Bree-Serif-Size);
                        font-weight: var(--Heading-XS-Bree-Serif-Weight);
                        line-height: var(--Heading-XS-Bree-Serif-Line-Height);
                        letter-spacing: var(--Heading-XS-Bree-Serif-Letter-Spacing);
                    }

                    .card-description {
                        font-family: var(--Body-S-Lexend-Regular-Family);
                        color: var(--Neutral-400);
                        font-size: var(--Body-S-Lexend-Regular-Size);
                        font-weight: var(--Body-S-Lexend-Regular-Weight);
                        line-height: var(--Body-S-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);

                        p {
                            text-align: left;
                        }
                    }

                    .card-image-container {
                        img {
                            width: 100%;
                            border-radius: var(--Radius-L);
                            aspect-ratio: 1;
                            object-fit: cover;
                        }

                        @media (max-width: 768px) {
                            aspect-ratio: 4 / 3;
                        }
                    }
                }
            }
        } 
    }
}

.admin-cards-style-2 {
    padding: var(--Padding-12XL) 0;
    background-repeat: repeat;
    background-position: center;
    display: flex;
    align-items: center;
    justify-items: center;

    .mr-container {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: var(--Margin-5XL);

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-7XL);
            width: 100%;
            margin: var(--Margin-None);
        }

        .content-container {
            max-width: unset;

            .title-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-L);
            }

            h2 {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                font-family: var(--Heading-M-Lexend-Medium-Family);
                color: var(--Blue-700);
                font-size: var(--Heading-M-Lexend-Medium-Size);
                font-weight: var(--Heading-M-Lexend-Medium-Weight);
                line-height: var(--Heading-M-Lexend-Medium-Line-Height);
                letter-spacing: var(--Heading-M-Lexend-Medium-Letter-Spacing);
                margin: var(--Margin-None);
                padding: var(--Padding-None);
                text-align: center;

                em {
                    display: inline-flex;
                    justify-content: center;
                    width: fit-content;
                    font-style: normal;
                    background-color: var(--Yellow-200);
                    font-family: var(--Heading-M-Lexend-Bold-Family);
                    color: var(--Blue-700);
                    font-size: var(--Heading-M-Lexend-Bold-Size);
                    font-weight: var(--Heading-M-Lexend-Bold-Weight);
                    line-height: var(--Heading-M-Lexend-Bold-Line-Height);
                    letter-spacing: var(--Heading-M-Lexend-Bold-Letter-Spacing);
                    margin: var(--Margin-None);
                    padding: var(--Padding-None) var(--Padding-6XL);
                    text-align: center;
                }
            }

            p {
                font-family: var(--Body-S-Lexend-Regular-Family);
                color: var(--Neutral-400);
                font-size: var(--Body-S-Lexend-Regular-Size);
                font-weight: var(--Body-S-Lexend-Regular-Weight);
                line-height: var(--Body-S-Lexend-Regular-Line-Height);
                letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                text-align: center;
            }

            .cards-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-4XL);

                .card {
                    display: flex;
                    flex-direction: row-reverse;
                    width: 100%;
                    background-color: var(--Neutral-White);
                    border-radius: var(--Radius-XL);
                    overflow: hidden;

                    @media (max-width: 768px) {
                        border-radius: var(--Radius-M);
                        flex-direction: column-reverse;
                    }

                    .card-content {
                        display: flex;
                        flex-direction: column;
                        align-self: stretch; 
                        gap: var(--Margin-L);
                        margin-right: -44px;
                        width: 100%;
                        height: auto;
                        background-color: var(--Neutral-White);
                        padding: var(--Padding-8XL) var(--Padding-13XL);
                        border-radius: var(--Radius-XL);
                        position: relative;
                        z-index: 5;

                        @media (max-width: 768px) {
                            margin-right: auto;
                            margin-bottom: -80px;
                            padding: var(--Padding-XL);
                        }
                    }

                    .card-title {
                        font-family: var(--Heading-XS-Bree-Serif-Family);
                        color: var(--Blue-700);
                        font-size: var(--Heading-XS-Bree-Serif-Size);
                        font-weight: var(--Heading-XS-Bree-Serif-Weight);
                        line-height: var(--Heading-XS-Bree-Serif-Line-Height);
                        letter-spacing: var(--Heading-XS-Bree-Serif-Letter-Spacing);
                    }

                    .card-description {
                        display: flex;
                        flex-direction: column;
                        gap: var(--Margin-L);
                        font-family: var(--Body-S-Lexend-Regular-Family);
                        color: var(--Neutral-400);
                        font-size: var(--Body-S-Lexend-Regular-Size);
                        font-weight: var(--Body-S-Lexend-Regular-Weight);
                        line-height: var(--Body-S-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);

                        p {
                            text-align: left;
                            margin: var(--Margin-None);
                            padding: var(--Padding-None);
                        }
                    }

                    .card-image-container {
                        width: 100%;
                        display: flex;
                        border: 10px solid var(--Neutral-White);


                        img {
                            width: 100%;
                            height: auto;
                            border-radius: 0 var(--Radius-L) var(--Radius-L) 0;

                            @media (max-width: 768px) {
                                border-radius: 0 0 var(--Radius-M) var(--Radius-M);
                            }
                        }

                        .card-image {
                            display: block;

                            @media (max-width: 768px) {
                                display: none;
                            }
                        }

                        .card-mobile-image {
                            display: none;

                            @media (max-width: 768px) {
                                display: block;
                            }
                        }
                    }
                }
            }
        } 
    }
}

/* FULL WIDTH SECTION */

.full-width-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
    padding: var(--Padding-12XL) 0;

    @media (max-width: 768px) {
        padding: var(--Padding-10XL) 0;
    }

    .mr-container {
        display: flex;
        flex-direction: row;
        align-items: start;
        gap: var(--Margin-4XL);

        @media (max-width: 768px) {
            flex-direction: column;
        }

        .content-container {
            display: flex;
            flex-direction: column;
            width: 60%;
            gap: var(--Margin-2XL);

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

            .title-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-XL);
                width: 100%;

                h2 {
                    font-family: var(--Heading-M-Lexend-Medium-Family);
                    color: var(--Neutral-White);
                    font-size: var(--Heading-M-Lexend-Medium-Size);
                    font-weight: var(--Heading-M-Lexend-Medium-Weight);
                    line-height: var(--Heading-M-Lexend-Medium-Line-Height);
                    letter-spacing: var(--Heading-M-Lexend-Medium-Letter-Spacing);
                    margin: var(--Margin-None);
                    padding: var(--Padding-None);
                }

                .description {
                    display: flex;
                    flex-direction: column;
                    width: 60%;

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

                p {
                    font-family: var(--Body-M-Lexend-Regular-Family);
                    color: var(--Neutral-White);
                    font-size: var(--Body-M-Lexend-Regular-Size);
                    font-weight: var(--Body-M-Lexend-Regular-Weight);
                    line-height: var(--Body-M-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-M-Lexend-Regular-Letter-Spacing);
                }
            }

            .button-container {
                display: flex;
                margin-top: var(--Margin-2XL);
            }
        }  
        
        .image-container {
            display: flex;
            flex-direction: column;
            width: 40%;
            gap: var(--Margin-2XL);
            border-radius: var(--Radius-M);
            overflow: hidden;

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

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

        .image-container.with-background {
            background-size: cover;
            padding: var(--Padding-2XL);
            margin-right: -80px;

            @media (max-width: 1400px) {
              margin-right: auto;  
            }
        } 
    }   
}

/* COUNTERS SECTION */

.counters-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
    padding: var(--Padding-17XL) 0;

    @media (max-width: 768px) {
        padding: var(--Padding-12XL) 0;
    }

    .mr-container {
        display: flex;
        flex-direction: column;
        gap: var(--Margin-5XL);

        .content-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--Margin-5XL);
            width: 100%;
            max-width: unset;

            .title-container {
                display: flex;
                align-items: center;
                flex-direction: column;
                gap: var(--Margin-L);

                h2 {
                    font-family: var(--Heading-S-Bree-Serif-Family);
                    color: var(--Blue-700);
                    font-size: var(--Heading-S-Bree-Serif-Size);
                    font-weight: var(--Heading-S-Bree-Serif-Weight);
                    line-height: var(--Heading-S-Bree-Serif-Line-Height);
                    letter-spacing: var(--Heading-S-Bree-Serif-Letter-Spacing);
                    margin: var(--Margin-None);
                    padding: var(--Padding-None);
                }

                .description {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    width: 60%;

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

                p {
                    font-family: var(--Body-S-Lexend-Regular-Family);
                    color: var(--Neutral-400);
                    font-size: var(--Body-S-Lexend-Regular-Size);
                    font-weight: var(--Body-S-Lexend-Regular-Weight);
                    line-height: var(--Body-S-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                    text-align: center;
                }
            }

            .counters-container {
                display: flex;
                flex-direction: row;
                gap: var(--Margin-7XL);
                width: 100%;

                @media (max-width: 768px) {
                    flex-direction: column;
                    gap: var(--Margin-4XL);
                }

                .counter {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    gap: var(--Margin-M);
                    width: 100%;

                    .counter-number {
                        font-family: var(--Heading-2XL-Bree-Serif-Family);
                        color: var(--Blue-400);
                        font-size: var(--Heading-2XL-Bree-Serif-Size);
                        font-weight: var(--Heading-2XL-Bree-Serif-Weight);
                        line-height: var(--Heading-2XL-Bree-Serif-Line-Height);
                        letter-spacing: var(--Heading-2XL-Bree-Serif-Letter-Spacing);
                        margin: var(--Margin-None);
                    }

                    .counter-description {
                        width: 80%;
                        font-family: var(--Body-S-Lexend-Regular-Family);
                        color: var(--Neutral-400);
                        font-size: var(--Body-S-Lexend-Regular-Size);
                        font-weight: var(--Body-S-Lexend-Regular-Weight);
                        line-height: var(--Body-S-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                        text-align: center;

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

/* PAGE HERO SECTION */

.page-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    position: relative;
    padding: var(--Padding-13XL) 0;

    @media (max-width: 768px) {
        flex-direction: row;
        padding: var(--Padding-8XL) 0;
    }

    .mr-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--Margin-4XL);

        @media (max-width: 768px) {
            flex-direction: column;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-4XL);
            width: 100%;
            margin: var(--Margin-None);
        }

        .content-container {
            display: flex;
            flex-direction: column;
            width: 60%;
            padding: var(--Padding-6XL) 0;
            gap: var(--Margin-XL);

            @media (max-width: 768px) {
                width: 100%;
                padding: var(--Padding-None);
                gap: var(--Margin-S);
            }
  
            .title-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-L);
                position: relative;
                z-index: 10;
            }

            h1 {
                font-family: var(--Heading-XL-Lexend-SemiBold-Family);
                color: var(--Neutral-White);
                font-size: var(--Heading-XL-Lexend-SemiBold-Size);
                font-weight: var(--Heading-XL-Lexend-SemiBold-Weight);
                line-height: var(--Heading-XL-Lexend-SemiBold-Line-Height);
                letter-spacing: var(--Heading-XL-Lexend-SemiBold-Letter-Spacing);
                margin: var(--Margin-None);
                padding: var(--Padding-None);

                @media (max-width: 768px) {
                    text-align: center;
                }
            }
            
            strong {
                font-family: var(--Heading-XS-Lexend-Regular-Family); 
                color: var(--Neutral-White);
                font-size: var(--Heading-XS-Lexend-Regular-Size);
                font-weight: var(--Heading-XS-Lexend-Regular-Weight);
                line-height: var(--Heading-XS-Lexend-Regular-Line-Height);
                letter-spacing: var(--Heading-XS-Lexend-Regular-Letter-Spacing);

                @media (max-width: 768px) {
                    text-align: center;
                }
            }

            .description {
                position: relative;
                z-index: 10;

                p {
                    font-family: var(--Body-M-Lexend-Regular-Family);
                    color: var(--Neutral-White);
                    font-size: var(--Body-M-Lexend-Regular-Size);
                    font-weight: var(--Body-M-Lexend-Regular-Weight);
                    line-height: var(--Body-M-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-M-Lexend-Regular-Letter-Spacing);

                    @media (max-width: 768px) {
                        text-align: center;
                    }
                }
            } 

            .buttons-container {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: var(--Margin-L);
                gap: var(--Margin-XL);
                position: relative;
                z-index: 10;

                @media (max-width: 768px) {
                    flex-direction: column;
                }
            }
        }

        .image-container {
            display: flex;
            width: 40%;
            height: auto;
            position: relative;
            z-index: 10;
            margin-right: -80px;

            .page-hero-image {
                width: 100%;
                height: auto;
                border-radius: var(--Radius-2XL);
                aspect-ratio: 1;
                object-fit: cover;

                @media (max-width: 1400px) {
                    margin-right: auto;  
                }
            }

            @media (max-width: 768px) {
                width: 100%;
                margin-right: auto;
            }
        }
    }   
}

.page-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 70%;
    background-color: var(--page-hero-content-section-bg-color); /* This variable is set in the block settings */
    border-top-right-radius: var(--Radius-3XL);
    border-bottom-right-radius: var(--Radius-3XL);
    z-index: 0;

    @media (max-width: 768px) {
        width: 100%;
        height: 70%;
        border-top-right-radius: 0;
        border-bottom-right-radius: var(--Radius-3XL);
        border-bottom-left-radius: var(--Radius-3XL);
    }
}

/* CTA SECTIONS */

.cta-section.cta-style-1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    padding: var(--Padding-10XL) 0;

    .cta-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        background-size: cover;
        border-radius: var(--Radius-XL);
        padding: var(--Padding-None);
        overflow: hidden;
        position: relative;
        min-height: 420px;

        @media (max-width: 1024px) {
            min-height: unset;
        }

        @media (max-width: 768px) {
            flex-direction: column;
        }
    }

    .cta-container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 75%;
        background-color: var(--cta-content-section-bg-color); /* This variable is set in the block settings */
        border-top-right-radius: var(--Radius-L);
        border-bottom-right-radius: var(--Radius-L);
        z-index: 5;

        @media (max-width: 768px) {
            width: 100%;
            height: 60%;
            border-top-right-radius: 0;
            border-bottom-left-radius: var(--Radius-L);
            border-bottom-right-radius: var(--Radius-L);
        }
    }

    .mr-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--Margin-XL);

        @media (max-width: 768px) {
            flex-direction: column;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-4XL);
            width: 100%;
            margin: var(--Margin-None);
        }

        .content-container {
            display: flex;
            flex-direction: column;
            width: 60%;
            padding: var(--Padding-10XL) var(--Padding-12XL);
            padding-right: var(--Padding-None);
            gap: var(--Margin-XL);

            @media (max-width: 768px) {
                width: 100%;
                padding: var(--Padding-4XL) var(--Padding-2XL);
            }
  
            .title-container {
                display: flex;
                flex-direction: column;
                gap: var(--Margin-L);
                position: relative;
                z-index: 10;
            }

            h3 {
                font-family: var(--Heading-M-Lexend-Medium-Family);
                color: var(--Neutral-White);
                font-size: var(--Heading-M-Lexend-Medium-Size);
                font-weight: var(--Heading-M-Lexend-Medium-Weight);
                line-height: var(--Heading-M-Lexend-Medium-Line-Height);
                letter-spacing: var(--Heading-M-Lexend-Medium-Letter-Spacing);
                margin: var(--Margin-None);
                padding: var(--Padding-None);
            }

            .description {
                position: relative;
                z-index: 10;

                p {
                    font-family: var(--Body-M-Lexend-Regular-Family);
                    color: var(--Neutral-White);
                    font-size: var(--Body-M-Lexend-Regular-Size);
                    font-weight: var(--Body-M-Lexend-Regular-Weight);
                    line-height: var(--Body-M-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-M-Lexend-Regular-Letter-Spacing);
                }
            } 

            .buttons-container {
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-top: var(--Margin-L);
                gap: var(--Margin-XL);
                position: relative;
                z-index: 10;
            }
        }

        .image-container {
            display: flex;
            width: 40%;
            height: auto;
            position: relative;
            z-index: 10;

            @media (max-width: 768px) {
                width: 100%;
                padding-bottom: var(--Padding-2XL);
            }

            .cta-image {
                width: 100%;
                height: auto;
            }
        }
    }  
}

.cta-section.cta-style-1.pricing-page-cta {
    padding-bottom: 0;
    position: relative;
    z-index: 10;
    margin-bottom: -100px;

    .cta-container {
        box-shadow: 0px 14px 64px -4px #6A81B81F, 0px 8px 22px -8px #4A5B831F;
    }
}

.cta-section.cta-style-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    padding: var(--Padding-10XL) 0;

    .cta-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-size: cover;
        border-radius: var(--Radius-M);
        padding: var(--Padding-None);
        overflow: hidden;
        position: relative;
    }

    .mr-container {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        @media (max-width: 768px) {
            flex-direction: column;
        }

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-4XL);
            width: 100%;
            margin: var(--Margin-None);
        }

        .content-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            padding-top: var(--Padding-12XL);
            gap: var(--Margin-2XL);
            width: 70%;
            position: relative;
            z-index: 20;

            @media (max-width: 768px) {
                width: 100%;
                padding: var(--Padding-4XL) var(--Padding-2XL);
            }
  
            .title-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--Margin-L);
                position: relative;
                z-index: 10;
            }

            h3 {
                font-family: var(--Heading-L-Lexend-Medium-Family);
                color: var(--Blue-700);
                font-size: var(--Heading-L-Lexend-Medium-Size);
                font-weight: var(--Heading-L-Lexend-Medium-Weight);
                line-height: var(--Heading-L-Lexend-Medium-Line-Height);
                letter-spacing: var(--Heading-L-Lexend-Medium-Letter-Spacing);
                margin: var(--Margin-None);
                padding: var(--Padding-None);
                text-align: center;
            }

            .buttons-container {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: var(--Margin-XL);
                position: relative;
                z-index: 10;
            }
        }

        .image-container {
            display: flex;
            width: 100%;
            height: auto;
            position: relative;
            z-index: 10;
            margin-top: -60px;

            @media (max-width: 768px) {
                margin-top: 0px;
            }

            .cta-image {
                width: 100%;
                height: auto;
            }
        }
    }  
}

.compare-table {
    display: flex;
    padding: var(--Padding-12XL, 64px) 0;
    background-image: url('/wp-content/themes/eds-divi-child-theme/mr/assets/images/compare-table-bg.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    overflow: hidden;

    @media screen and (min-width: 980.98px) {
        padding: var(--Padding-12XL, 64px) 0;
    }

    @media screen and (min-width: 980.98px) {
        padding: var(--Padding-12XL, 64px) 0;
    }

    .mr-container {
        overflow-x: auto;
    }
}

.add-negative-margin-top {
    position: relative;
    z-index: 0;
    margin-top: calc(var(--Padding-12XL, 64px) * -1);
    padding-top: calc(var(--Padding-12XL, 64px) * 2);
}

.compare-table-inner {
    min-width: 606px;
    display: flex;
    padding: var(--Padding-L, 16px) var(--Padding-M, 12px) var(--Padding-L, 16px) var(--Padding-M, 12px);
    flex-direction: column;
    border-radius: var(--Radius-M, 24px);
    background: var(--Surface-Blue-Tertiary, #9DC6FF);


    @media screen and (min-width: 980.98px) {
        padding: var(--Padding-2XL, 24px);
    }
}

.compare-table-top {
    display: flex;
    gap: 5px;
    align-items: flex-end;

    h2 {
        width: 25%;

        @media screen and (min-width: 980.98px) {
            padding-left: 12px;
            padding-bottom: 12px;
        }

        @media screen and (min-width: 1439.98px) {
            padding-left: 20px;
            padding-bottom: 20px;
        }
    }

    .plans {
        display: flex;
        gap: 4px;
        width: 75%;

        .col {
            display: flex;
            padding: var(--Padding-XL, 20px) var(--Padding-M, 12px) var(--Padding-L, 16px) var(--Padding-M, 12px);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: var(--Margin-M, 12px);
            flex: 1 0 0;
            align-self: stretch;
            border-radius: var(--Radius-M, 24px) var(--Radius-M, 24px) 0 0;
            background-color: var(--Surface-Neutral-White, #FFF);
        }

        .col--selected {
            background-color: var(--Surface-Yellow-Secondary, #FFF5D9);
            padding-bottom: 37px;
            margin-bottom: -21px;
        }
    }

    h3 {
        color: var(--Content-Text-Heading-Primary, #011633);
        text-align: center;
        padding-bottom: 0;

        /* Heading/XS/Lexend Regular */
        font-family: var(--Heading-XS-Lexend-Regular-Family, Lexend);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;

        @media screen and (min-width: 1439.98px) {
            font-size: 24px;
            line-height: 32px;
        }
    }

    .btn {
        display: none;
        text-align: center;
        padding: 10px 16px;

        @media screen and (min-width: 980.98px) {
            display: block;
            width: 100%;
            font-size: 16px;
            line-height: 20px;
            padding: 13px 16px;
            border-width: 2px;
        }
    }

    .btn::before {
        display: none;
    }
}

.compare-table-row {
    display: flex;
    flex-direction: column;
    gap: 12px;

    table {
        display: flex;
        padding: var(--Padding-L, 16px) var(--Padding-M, 12px) var(--Padding-M, 12px) var(--Padding-M, 12px);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Margin-S, 8px);
        align-self: stretch;
        border-radius: var(--Radius-S, 16px);
        background: var(--Surface-Neutral-White, #FFF);
    }

    tbody {
        width: 100%;
    }

    th {
        text-align: left;
        /*width: 100%;*/
    }

    tr:not(:last-child) {
        border-bottom: var(--Width-XS, 1px) solid #9DC6FF;
    }

    td {
        padding: var(--Padding-M, 12px) var(--Padding-S, 8px) var(--Padding-M, 12px) var(--Padding-None, 0);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--Margin-None, 0);
        width: 25%;

        color: var(--Content-Text-Body-Primary, #283445);
        font-family: var(--Body-XS-Lexend-Regular-Family, Lexend);
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;

        @media screen and (min-width: 980.98px) {
            line-height: var(--Heading-2XS-Bree-Serif-Line-Height, 20px);
        }

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

        .cell-content {
            display: inline-flex;
        }

        .cell-content.included .icon {
            display: flex;
            justify-content: center;
            padding: var(--Padding-XS, 4px);
            border-radius: var(--Radius-Pill, 999px);
            background-color: var(--Green-100);
        }
    }

    td:not(:first-child) {
        text-align: center;
    }

    .compare-table-title {
        padding-bottom: 8px;
        
        @media screen and (min-width: 980.98px) {
            font-size: 20px;
            line-height: 30px;
        }
    }
}

.compare-table-title {
    color: var(--Content-Text-Body-Primary, #283445);
    font-family: var(--Body-M-Lexend-SemiBold-Family, Lexend);
    font-size: 18px;
    font-weight: 600;
    line-height: 28px;

    @media screen and (min-width: 1439.98px) {
        font-size: 20px;
        line-height: 30px;
    }
}

/* FOOTER */
.footer {
    display: flex;
    padding: var(--Padding-8XL, 64px) 0 var(--Margin-4XL, 32px) 0;
    flex-direction: column;
    align-items: flex-start;
    border-radius: var(--Radius-3XL, 64px) var(--Radius-3XL, 64px) 0 0;
    background: var(--Surface-Blue-Secondary, #E2EEFF);

    @media screen and (min-width: 980.98px) {
        padding: var(--Padding-15XL, 160px) 16px var(--Padding-7XL, 44px) 16px;
    }

    @media screen and (min-width: 1439.98px) {
        padding: var(--Padding-15XL, 160px) 88px var(--Padding-7XL, 44px) 88px;
    }

    .footer__inner {
        display: flex;
        flex-direction: column;
        gap: var(--Margin-4XL, 32px);

        @media screen and (min-width: 980.98px) {
            flex-direction: row;
            flex-wrap: wrap;
        }
    }

    .custom-logo-link {
        display: block;
        line-height: 0;
        max-width: 240px;

        img {
            width: 100%;
            max-width: 240px;
        }
    }

    .footer__row--logo {
        @media screen and (min-width: 980.98px) {
            width: 100%;
        }
    }

    .footer__row--menus {
        display: flex;
        flex-direction: column;
        row-gap: 32px;

        @media screen and (min-width: 980.98px) {
            flex-direction: row;
            justify-content: space-between;
            width: 100%;
            column-gap: 32px;
        }

        .col {
            order: 2;

            @media screen and (min-width: 980.98px) {
                width: auto;
                max-width: 258px;
            }
        }

        .col--button {
            order: 1;

            @media screen and (min-width: 980.98px) {
                order: 2;
            }
        }

        h3 {
            color: var(--Content-Text-Heading-Accent-Blue, #00409B);
            font-family: var(--Heading-XS-Lexend-Regular-Family, Lexend);
            margin-bottom: 16px;
            font-size: 16px;
            font-weight: 400;
            line-height: var(--Heading-XS-Lexend-Regular-Line-Height, 20px);
            padding-bottom: 0;

            @media screen and (min-width: 980.98px) {
                font-size: 20px;
                margin-bottom: 20px;
            }

            @media screen and (min-width: 1439.98px) {
                font-size: 24px;
                margin-bottom: 32px;
            }
        }

        .menu {
            display: flex;
            flex-direction: column;
            gap: 16px;
            padding-left: 0;
            margin-bottom: 0;
            list-style-type: none;

            @media screen and (min-width: 980.98px) {
                gap: 18px;
            }
        }

        .menu-item {
            padding-left: 0;
            margin-bottom: 0;
        }

        .menu-item a {
            position: relative;
            color: var(--Button-Link-Primary-Default, #011633);
            font-family: var(--Link-S-Family, Lexend);
            font-size: var(--Link-S-Size, 16px);
            font-style: normal;
            font-weight: 400;
            line-height: var(--Link-S-Line-Height, 20px);
            letter-spacing: var(--Link-S-Letter-Spacing, 0);
            padding-right: 30px;

            @media screen and (min-width: 980.98px) {
                white-space: nowrap;
            }
        }

        .menu-item a::before {
            display: block;
            content: '';
            width: 24px;
            height: 24px;
            position: absolute;
            top: 50%;
            right: 0;
            background-image: url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 17L17.5 12.5M17.5 12.5L13 8M17.5 12.5L7 12.5" stroke="%23011633" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>');
            background-position: center;
            background-repeat: no-repeat;
            transform: translateY(-50%);
        }
    }

    .btn--label {

        background-color: transparent;

        @media screen and (max-width: 980.98px) {
            padding: 10px 40px 10px 16px;
        }
    }

    .menu-item::before {
        display: none;
    }

    .footer__row--bottom {
        display: flex;
        flex-direction: column-reverse;
        gap: 16px;
        width: 100%;

        @media screen and (min-width: 980.98px) {
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
        }

        .menu-item a {
            color: var(--Button-Link-Primary-Default, #011633);
            font-family: var(--Link-S-Family, Lexend);
            font-size: var(--Link-S-Size, 16px);
            font-weight: 400;
            line-height: var(--Link-S-Line-Height, 20px);
            text-decoration-line: underline;
            text-decoration-style: solid;
            text-decoration-skip-ink: auto;
            text-decoration-thickness: auto;
            text-underline-offset: auto;
            text-underline-position: from-font;
        }

        li {
            padding: 0;
            margin: 0;
        }

        li::before {
            display: none;
        }
    }

    .footer-socials {
        display: flex;
        margin-bottom: 0;

        .social-link {
            display: block;
            line-height: 0;
            padding: 8px;
        }
    }

    .col--additional-menu {
        .menu {
            display: flex;
            gap: 24px;
            margin-bottom: 0;
        }
    }

    .col--copyright {
        color: var(--Content-Text-Body-Primary, #283445);
        font-family: var(--2XS-Family, Lexend);
        font-size: var(--2XS-Size, 12px);
        line-height: var(--2XS-Line-Height, 14px);
    }
}

/* PRICING PAGE HERO SECTION */

.pricing-page-hero {
    padding: var(--Padding-12XL) 0;
    border-bottom-left-radius: var(--Radius-3XL);
    border-bottom-right-radius: var(--Radius-3XL);
    background-color: var(--page-hero-section-bg-color);
    display: flex;
    align-items: center;
    justify-items: center;

    @media (max-width: 768px) {
        margin-bottom: var(--Margin-10XL);
        border-bottom-left-radius: var(--Radius-M);
        border-bottom-right-radius: var(--Radius-M);
    }

    .mr-container {
        display: flex;
        flex-direction: column;
        gap: var(--Margin-5XL);
        max-width: unset;

        .container {
            display: flex;
            flex-direction: column;
            gap: var(--Margin-4XL);
            width: 100%;
        }

        .content-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: var(--Margin-7XL);
  
            .title-container {
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: var(--Margin-L);
            }

            .page-title {
                font-family: var(--Heading-L-Lexend-Medium-Family);
                color: var(--Neutral-White);
                font-size: var(--Heading-L-Lexend-Medium-Size);
                font-weight: var(--Heading-L-Lexend-Medium-Weight);
                line-height: var(--Heading-L-Lexend-Medium-Line-Height);
                letter-spacing: var(--Heading-L-Lexend-Medium-Letter-Spacing);
                margin: var(--Margin-None);
                padding: var(--Padding-None);
                text-align: center;

                @media screen and (max-width: 1024px) {
                    font-size: var(--Size-Heading-Mobile-XL);
                }
            }
            
            .page-subtitle {
                max-width: 45%;
                margin: auto;
                text-align: center;
                font-family: var(--Body-L-Lexend-Regular-Family);
                color: var(--Neutral-White);
                font-size: var(--Body-L-Lexend-Regular-Size);
                font-weight: var(--Body-L-Lexend-Regular-Weight);
                line-height: var(--Body-L-Lexend-Regular-Line-Height);
                letter-spacing: var(--Body-L-Lexend-Regular-Letter-Spacing);

                @media screen and (max-width: 768px) {
                    max-width: unset;
                }
            }

            .description p {
                font-family: var(--Body-M-Lexend-Regular-Family);
                color: var(--Neutral-White);
                font-size: var(--Body-M-Lexend-Regular-Size);
                font-weight: var(--Body-M-Lexend-Regular-Weight);
                line-height: var(--Body-M-Lexend-Regular-Line-Height);
                letter-spacing: var(--Body-M-Lexend-Regular-Letter-Spacing);
            }

            .price-toggle-container {
                display: flex;
                flex-direction: row;
                align-items: center;
                gap: var(--Margin-M);

                .price-toggle-period {
                    font-family: var(--Body-M-Lexend-Regular-Family);
                    color: var(--Neutral-White);
                    font-size: var(--Body-M-Lexend-Regular-Size);
                    font-weight: var(--Body-M-Lexend-Regular-Weight);
                    line-height: var(--Body-M-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-M-Lexend-Regular-Letter-Spacing);
                    margin: var(--Margin-None);
                    padding: var(--Padding-None);
                }

                .price-toggle-saving-label {
                    font-family: var(--Body-XS-Lexend-Regular-Family);
                    color: var(--Yellow-200);
                    font-size: var(--Body-XS-Lexend-Regular-Size);
                    font-weight: var(--Body-XS-Lexend-Regular-Weight);
                    line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                    letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                    margin: var(--Margin-None);
                    padding: var(--Padding-None);
                }

                .toggle-switch input {
                    position: absolute;
                    opacity: 0;
                }

                .toggle-switch {
                    display: inline-block;
                    height: 24px;
                    width: 44px;
                    background: var(--Yellow-200);
                    border-radius: var(--Radius-Pill);
                }

                .toggle-switch .toggle {
                    position: relative;
                    left: 2px;
                    top: 2px;
                    display: inline-block;
                    height: 20px;
                    width: 20px;
                    border-radius: var(--Radius-Pill);
                    background: var(--Blue-500);
                    -webkit-transition: all 300ms;
                    -moz-transition: all 300ms;
                    transition: all 300ms;
                }

                .toggle-switch input:checked + .toggle {
                    -webkit-transform: translate3d(100%, 0, 0);
                    -moz-transform: translate3d(100%, 0, 0);
                    transform: translate3d(100%, 0, 0);
                }
            }
        }

        .plans-container {
            display: flex;
            flex-direction: row;
            align-items: stretch;
            max-width: 1200px;
            gap: var(--Margin-L);

            @media screen and (max-width: 768px) {
                flex-direction: column;
            }

            .plan {
                width: 100%;
                height: auto;
                display: flex;
                flex-direction: column;
                border-radius: var(--Radius-L);
                background-color: var(--Neutral-White);
                overflow: hidden;
                position: relative;

                .featured-plan-flag {
                    position: absolute;
                    right: 40px;
                    top: 0;
                    color: var(--Green-300);

                    @media screen and (max-width: 1024px) {
                       right: 16px; 
                    }
                    svg {
                        @media screen and (max-width: 768px) {
                            height: 44px; 
                            width: auto;
                        }
                    }
                }

                @media screen and (max-width: 1024px) {
                    border-radius: var(--Radius-M);
                }

                @media screen and (max-width: 768px) {
                    border-radius: var(--Radius-S);
                }

                .plan-header-container {
                    width: 100%;
                    display: flex;
                    flex-direction: column;
                    background-size: cover;
                    padding: var(--Padding-3XL) var(--Padding-2XL) var(--Padding-XL) var(--Padding-2XL);
                    gap: var(--Margin-L);

                    .plan-title {
                        font-family: var(--Heading-2XS-Bree-Serif-Family);
                        color: var(--Neutral-400);
                        font-size: var(--Heading-2XS-Bree-Serif-Size);
                        font-weight: var(--Heading-2XS-Bree-Serif-Weight);
                        line-height: var(--Heading-2XS-Bree-Serif-Line-Height);
                        letter-spacing: var(--Heading-2XS-Bree-Serif-Letter-Spacing);
                        margin: var(--Margin-None);
                        padding: var(--Padding-None);
                    }

                    .plan-price {
                        font-family: var(--Heading-M-Lexend-Medium-Family);
                        color: var(--Blue-400);
                        font-size: var(--Heading-M-Lexend-Medium-Size);
                        font-weight: var(--Heading-M-Lexend-Medium-Weight);
                        line-height: var(--Heading-M-Lexend-Medium-Line-Height);
                        letter-spacing: var(--Heading-M-Lexend-Medium-Letter-Spacing);
                        margin: var(--Margin-None);
                        padding: var(--Padding-None);
                    }

                    .plan-description {   
                        p {
                            font-family: var(--Body-S-Lexend-Regular-Family);
                            color: var(--Neutral-400);
                            font-size: var(--Body-S-Lexend-Regular-Size);
                            font-weight: var(--Body-S-Lexend-Regular-Weight);
                            line-height: var(--Body-S-Lexend-Regular-Line-Height);
                            letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                            margin: var(--Margin-None);
                            padding: var(--Padding-None);
                        }

                        @media screen and (max-width: 1024px) {
                            min-height: calc(var(--Body-S-Lexend-Regular-Line-Height) * 3); /* 3 lines of text */ 
                        }

                        @media screen and (max-width: 768px) {
                            min-height: unset;
                        }
                    }
                        
                    .button {
                        width: 100%;
                    }
                }

                .plan-features-container {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    gap: var(--Margin-L);
                    background-color: var(--Neutral-White);
                    padding: var(--10) var(--Padding-2XL) var(--Padding-7XL) var(--Padding-2XL);

                    .plan-features-description {
                        font-family: var(--Body-XS-Lexend-Regular-Family);
                        color: var(--Neutral-400);
                        font-size: var(--Body-XS-Lexend-Regular-Size);
                        font-weight: var(--Body-XS-Lexend-Regular-Weight);
                        line-height: var(--Body-XS-Lexend-Regular-Line-Height);
                        letter-spacing: var(--Body-XS-Lexend-Regular-Letter-Spacing);
                        margin: var(--Margin-None);
                        padding: var(--Padding-None);
                    }

                    .features {
                        display: flex;
                        flex-direction: column;
                        gap: var(--Margin-S);

                        .feature {
                            font-family: var(--Body-S-Lexend-Regular-Family);
                            color: var(--Neutral-400);
                            font-size: var(--Body-S-Lexend-Regular-Size);
                            font-weight: var(--Body-S-Lexend-Regular-Weight);
                            line-height: var(--Body-S-Lexend-Regular-Line-Height);
                            letter-spacing: var(--Body-S-Lexend-Regular-Letter-Spacing);
                            margin: var(--Margin-None);
                            padding: var(--Padding-None);
                            display: flex;
                            flex-direction: row;
                            align-items: flex-start;
                            gap: var(--Margin-XS);
                        }

                        .feature-title.feature-higlighted {
                            font-weight: var(--Body-S-Lexend-SemiBold-Weight);
                        }
                    }
                }
            }
        }
    }
}

.pricing-page-hero.accept-negative-margin-bottom {
    position: relative;
    z-index: 10;
}