.facts-and-figures {
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 17.5%;
    .inner-content-facts-and-figures {
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        padding-bottom: 20px; /* Space for the scrollbar */
        box-sizing: content-box;
        gap: 5vw;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
        scroll-snap-type: x mandatory;
        .inner-slide {
            min-width: 20vw;
            text-align: center;
            position: relative;
            background-color: #fff;
            &:after {
                content: '';
                position: absolute;
                top: calc(50% - 1px);
                display: block;
                height: 2px;
                width: 100%;
                left: 100% !important;
                background-color: #E40046;
            }
            &:last-child::after {
                display: none !important;
            }
            .image {
                height: 450px;
                display: flex;
                justify-content: center;
                align-items: center;
                img {
                    max-height: 230px;
                }
            }
            .inner-slide-content {
                position: relative;
                flex-direction: column;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .comment-wrapper {
                color: #fff;
                font-size: 18px;
                line-height: 18px;
                font-weight: bold;
                padding: 15px 20px;
                position: absolute;
                &.top-comment {
                    width: 250px;
                    top: 0px;
                    &:after {
                        top: 100%;
                        left: 50%;
                        border: solid transparent;
                        content: "";
                        height: 0;
                        width: 0;
                        position: absolute;
                        pointer-events: none;
                        border-color: rgba(228, 0, 70, 0);
                        border-top-color: #E40046;
                        border-width: 15px;
                        margin-left: -15px;
                    }
                }
                &.bottom-comment {
                    bottom: 0px;
                    &:after {
                        bottom: 100%;
                        left: 50%;
                        border: solid transparent;
                        content: "";
                        height: 0;
                        width: 0;
                        position: absolute;
                        pointer-events: none;
                        border-color: rgba(228, 0, 70, 0);
                        border-bottom-color: #E40046;
                        border-width: 15px;
                        margin-left: -15px;
                    }
                }
            }
        }
        .first-slide {
            h3 {
                font-size: 100px !important;
                line-height: 100px !important;
                margin-bottom: 100px;
                color: #2E1A47;
            }
            .comment-wrapper {
                font-size: 26px !important;
                line-height: 26px !important;
                max-width: 200px !important;
                background-color: #E40046;
            }
        }
    }
    &::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
    }
}

.position-relative {
    position: relative;
}

.inner-content-facts-and-figures-scrollbar, .inner-content-custom-post-slider-scrollbar {
    height: 2px; /* Height of the scrollbar */
    width: 100%;
    background: rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 4px;
}

.scrollbar-thumb-facts-figures, .scrollbar-thumb-posts{
    height: 4px;
    background: #E40046;
    position: absolute;
    top: -1px;
    left: 0;
    border-radius: 4px;
    cursor: pointer;
    z-index: 10;
}

.content {
    display: flex;
    width: 1000px; /* Make this wide enough to require scrolling */
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
    .facts-and-figures {
        .inner-content-facts-and-figures {
            .inner-slide {
                min-width: 30vw;
            }
        }
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
    .facts-and-figures {
        .inner-content-facts-and-figures {
            .inner-slide {
                min-width: 25vw;
            }
        }
    }
}

@media only screen and (max-width: 768px) {
    .facts-and-figures {
        padding-left: 0px !important;
        .inner-content-facts-and-figures {
            .inner-slide {
                min-width: 90vw;
            }
        }
    }
    .first-slide {
        h3 {
            font-size: 80px !important;
            line-height: 80px !important;
        }
    }
}

.top-default {
    background-color: #E40046 !important;
}

.top-alt {
    background-color: #27193D !important;
    &:after {
        border-top-color: #27193D !important;
    }
}

.bottom-default {
    background-color: #27193D !important;
    &:after {
        border-bottom-color: #27193D !important;
    }
}

.bottom-alt {
    background-color: #E40046 !important;
}

.custom-post-slider{
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 17.5%;
    .inner-custom-post-slider{
        display: flex;
        width: 100%;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        padding-bottom: 20px; /* Space for the scrollbar */
        box-sizing: content-box;
        gap: 5vw;
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
        scroll-snap-type: x mandatory;
        .custom-post-slide{
            min-width: 25vw;
            max-width: 25vw;
            text-align: center;
            position: relative;
            .image{
                img{
                    display: block;
                    width: 100%;
                }
            }
            .content{
                display: flex;
                flex-direction: column;
                width: 100% !important;
                gap: 20px;
                margin-top: 35px ;
                h3{
                    text-transform: uppercase;
                    color: #231f20;
                    font-size: 22px;
                    font-weight: bold;
                    text-align: left !important;
                    margin: 0px;
                    line-height: 22px !important;
                }
                p{
                    margin: 0px;
                    color: #2E1A47 !important;
                    font-size: 18px;
                    line-height: 27px !important;
                    text-align: left !important;
                }
            }
        }
    }
}

@media only screen and (min-width: 768px) and (max-width: 1200px) {
    .custom-post-slider {
        padding-left: 3% !important;
        .inner-custom-post-slider {
            .custom-post-slide {
                min-width: 40vw !important;
            }
        }
    }
}

@media only screen and (min-width: 1201px) and (max-width: 1400px) {
    .custom-post-slider {
        .inner-custom-post-slider {
            .custom-post-slide {
                min-width: 30vw !important;
            }
        }
    }
}

@media only screen and (max-width: 768px) {
    .custom-post-slider {
        padding-left: 3% !important;
        .inner-custom-post-slider {
            gap: 10vw !important;
            .custom-post-slide {
                min-width: 80vw !important; 
            }
        }
    }
}

.custom-post-slider {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.custom-post-slider.in-view {
    opacity: 1 !important;
}

.facts-and-figures{
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.facts-and-figures.in-view {
    opacity: 1 !important;
}