/* @group timeline
------------------------------------ */

.timeline {
    position: relative;
    z-index: 3;

}

.timeline .row {
        position: relative;
    }

.timeline .title-row {
        padding-bottom: 11.3rem;
    }

.timeline .title-row .has-eyebrow-font-size {
    margin: 0 0 1rem;
}

.timeline .splide__pagination {
        top: 0;
        bottom: unset !important;
        justify-content: space-between;
        padding: 0;
    }

.timeline .splide__pagination li{
        cursor: pointer;
    }

.timeline .splide__pagination__page {
        transition: 0.5s;
        --_w: 3rem;
        width: var(--_w);
        height: var(--_w);
        border-radius: 100%;
        border: 1px solid var(--midnight-musing);
        background: var(--linen);
        /* pointer-events: none; */
    }

.timeline .splide__pagination__page.is-active {
        background: var(--midnight-musing);
    }

.timeline .circle-wrapper {
        position: relative;
        display: flex;
        gap: 1rem;
    }

.timeline .circle-wrapper::before {
        content: '';
        --_w: 3rem;

        width: var(--_w);
        height: var(--_w);
        border-radius: 100%;
        border: 1px solid var(--midnight-musing);
        background: var(--linen);
    }

.timeline .circle-wrapper p {
        padding-left: 1rem;
    }

.timeline .text-content {
        transition: 0.5s;
    }

.timeline .splide__slide.is-active .circle-wrapper::before {
        background-color: var(--midnight-musing);
    }

.timeline .splide__slide .has-eyebrow-font-size {
        padding-bottom: 1rem;
    }

.timeline h3 {
        color: var(--sprout);
        padding-bottom: 3rem;
    }

#wrapper .timeline .splide__slide:not(.is-active) .text-content {
        opacity: 0;
    }

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

        #wrapper .timeline .circle-wrapper {
            opacity: 0;
        }

        #wrapper .timeline .splide__slide:nth-child(1) .text-content {
            left: 1rem;
        }

        #wrapper .timeline .splide__slide:nth-child(2) .text-content {
            left: 5rem;
        }

        #wrapper .timeline .splide__slide:nth-child(3) .text-content {
            left: 9rem;
        }

        #wrapper .timeline .splide__slide:nth-child(4) .text-content {
            left: 13rem;
        }

        #wrapper .timeline .splide__slide:nth-child(5) .text-content {
            left: 17.5rem;
        }

        #wrapper .timeline .splide__slide:nth-child(6) .text-content {
            position: absolute;
            left: -74rem;
            top: 10rem;
        }

        #wrapper .timeline .splide__slide:nth-child(6) .text-content>* {
            margin: auto;
            text-align: center;
        }
        .timeline .text-content {
            padding-top: 5rem;
        }

        .timeline .line-wrapper {
            position: absolute;
            top: 1rem;
            inset-inline: 0.5rem;
            left: 50%;
            translate: -50% 0;
        }

        .timeline .line-wrapper .bp-multimedia {
            height: auto;
        }

        .timeline .splide__slide {
            width: 23.6rem !important;
        }

        .timeline .splide__slide:last-of-type .text-content {
            max-width: unset !important;
            width: 53.8rem !important;
            text-align: center;
        }

        .timeline .title-row {
            padding-bottom: 11.3rem;
        }

            .timeline .splide__pagination [role="presentation"] {
                display: flex;
                flex-direction: column;
                gap: 1rem;
            }

            .timeline .splide__pagination [role="presentation"]::after {
                font-size: 2rem;
                letter-spacing: 0.2em;
                font-weight: var(--font-bold);
                color: var(--midnight-musing);
            }

            .timeline .splide__pagination [role="presentation"] {
                position: relative;
                text-align: center;
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(1)::after {
                content: '1';
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(2)::after {
                content: '2';
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(3) {
                top: 1rem;
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(3)::after {
                content: '3';
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(4) {
                top: 2.5rem;
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(4)::after {
                content: '4';
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(5) {
                top: 3.25rem;
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(5)::after {
                content: '5';
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(6) {
                top: 1rem;
            }

            .timeline .splide__pagination [role="presentation"]:nth-child(6)::after {
                content: '6';
            }
}

@media only screen and (min-width : 0) and (max-width : 960px) {

        .timeline .subtitle p {
            margin-inline: auto;
            margin-top: 1.5rem;
        }

        .timeline .line-wrapper {
            display: none;
        }

        .timeline .text-content {
            width: 26rem;
        }


        .timeline h2 {
            max-width: 38rem;
            margin-inline: auto;
        }


        .timeline .circle-wrapper::before {
            content: '';
            --_w: 3rem;

            width: var(--_w);
            height: var(--_w);
            border-radius: 100%;
            border: 1px solid var(--midnight-musing);
            background: var(--linen);
        }

        .timeline .circle-wrapper p {
            padding-left: 1rem;
        }

        .timeline .splide__list::before {
            position: absolute;
            top: 1rem;
            left: 0;
            content: '';
            background: url("../../img/timeline-mobile.svg");
            background-size: contain;
            background-position: top left;
            background-repeat: no-repeat;
            width: 600vw;
            height: 10.2rem;
        }

        .timeline .splide__slide {
            padding-left: 29vw;
            position: relative;
        }

       .timeline .splide__slide .text-content {
            left: 1rem;
        }

        .timeline .circle-wrapper {
            margin-bottom: 6.7rem;
        }


        .timeline .splide__slide:nth-child(3) .circle-wrapper {
            bottom: -1.5rem;
        }

        .timeline .splide__slide:nth-child(4) .circle-wrapper {
            bottom: -3.25rem;
        }

        .timeline .splide__slide:nth-child(5) .circle-wrapper {
            bottom: -5rem;
        }

        .timeline .splide__slide:nth-child(6) .circle-wrapper {
            bottom: -4.5rem;
        }
}

/* @end */