.info-page .sticky {
    ul {
        position: relative;
        margin-right: 30px;

        &:before {
            content: "";
            background: #f5f5f5;
            width: 4px;
            height: 100%;
            display: block;
            position: absolute;
            right: 7px;
        }

        li {
            position: relative;
            margin-bottom: 40px;

            a {
                font-size: 20px;
            }

            &:before {
                content: "";
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 18px;
                height: 18px;
                border-radius: 100%;
                background: var(--bs-secondary, #fff);
                border: 2px solid;
                display: block;
            }

            &.active {
                a {
                    font-weight: bold;
                }

                &:after {
                    content: "";
                    position: absolute;
                    right: 4px;
                    top: 50%;
                    transform: translateY(-50%);
                    width: 10px;
                    height: 10px;
                    border-radius: 100%;
                    background: var(--bs-primary, #000);
                    display: block;
                }
            }
        }
    }
}
.info-page {
    .option {
        display: flex;
        gap: 20px;
        padding: 10px 15px;

        .img img {
            width: 35px;
            height: 35px;
        }

        .text {
            h2 {
                margin-bottom: 10px;
            }
        }
    }
}

@media (max-width: 767.98px) {
    .info-page .sticky {
        ul {
            margin-right: 0;
            -webkit-overflow-scrolling: touch;
            -ms-overflow-style: none;
            -ms-overflow-style: -ms-autohiding-scrollbar;
            display: block;
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            white-space: nowrap;
            padding-bottom: 50px;
            &:before {
                height: 4px;
                left: 0;
                width: 150%;
                bottom: 36px;
            }
            li {
                display: inline-flex;
                float: none;
                vertical-align: bottom;
                white-space: normal;
                justify-content: center;
                margin-bottom: 0;
                width: 30%;
                text-align: center;
                a {
                    font-size: 14px;
                }
                &:before {
                    left: 50%;
                    transform: translateX(-50%);
                    top: unset;
                    bottom: -21px;
                }
                &.active {
                    &:after {
                        left: 50%;
                        transform: translateX(-50%);
                        top: unset;
                        bottom: -17px;
                    }
                }
            }
        }
    }
}

@media (min-width: 992px) {
    .info-page .sticky {
        position: sticky;
        top: 140px;
    }
}