.timeline {
    position: relative;
    padding: 20px 0;
    list-style: none;
}

    .timeline:before {
        position: absolute;
        content: " ";
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e9ecef;
        left: 50%;
        margin-left: -1px;
    }

.timeline-item {
    position: relative;
    width: 50%;
    padding: 10px 20px;
    box-sizing: border-box;
}

    .timeline-item.left {
        left: 0;
        text-align: right;
    }

    .timeline-item.right {
        left: 50%;
    }

    .timeline-item .timeline-badge {
        position: absolute;
        top: 15px;
        left: 50%;
        width: 20px;
        height: 20px;
        background-color: var(--bs-purple);
        border-radius: 50%;
        transform: translateX(-50%);
    }

    .timeline-item.left .timeline-badge {
        left: 100%;
        right: 0;
    }

    .timeline-item.right .timeline-badge {
        right: 100%;
        left: 0;
    }

    .timeline-item .timeline-panel {
        display: inline-block;
        padding: 10px;
        background: var(--footer-bg);
        border: 1px solid #e9ecef;
        border-radius: 5px;
    }