.horizontal-timeline .items {
    border-top: 3px solid #e9ecef;
    display: flex; /* Use flexbox for horizontal alignment */
    justify-content: space-between; /* Distribute items evenly */
    flex-wrap: nowrap; /* Prevent wrapping to the next line */
    flex-direction: row; /* Default to horizontal layout */
}

.horizontal-timeline .items .items-list {
    position: relative;
    text-align: center;
    margin-right: 0;
    width: 16%; /* Adjust width to fit more items in the row */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
}

.horizontal-timeline .items .items-list:before {
    content: "";
    position: absolute;
    height: 36px;
    border-right: 2px dashed #dee2e6;
    top: 0;
}

.horizontal-timeline .items .items-list .event-date {
    position: absolute;
    left: 0;
    right: 0;
    width: 75px;
    margin: 0 auto;
    font-size: 1rem; /* Adjust font size */
    padding-top: 5px;
    background-color: var(--primary-color); /* Apply primary color */
    color: white; /* Text color inside the container */
    border-radius: 15px; /* Rounded corners */
    text-align: center;
}

@media (min-width: 1140px) {
    .horizontal-timeline .items .items-list {
        width: 16%; /* Adjust for more items per row */
        padding-top: 45px;
    }

    .horizontal-timeline .items .items-list .event-date {
        top: -40px;
    }
}

/* Adjust for smaller screen sizes */
@media (max-width: 767px) {
    .horizontal-timeline .items {
        border-top: 0px solid #e9ecef;
    }

    .horizontal-timeline .items {
        flex-direction: column; /* Stack items vertically on smaller screens */
        align-items: center; /* Center the items vertically */
    }

    .horizontal-timeline .items .items-list {
        width: 80%; /* Adjust width for items to fit better */
        padding-top: 70px; /* Increase top padding for more space */
    }

    .horizontal-timeline .items .items-list:before {
        border-right: none; /* Remove the horizontal dashed line */
        border-bottom: 2px dashed #dee2e6; /* Add a vertical dashed line */
        width: 100%; /* Make the line extend across the full width */
    }

    .horizontal-timeline .items .items-list .event-date {
        top: 15px; /* Move the event-date up with a larger gap */
    }
}

.bg-primary {
    background-color: var(--primary-color); /* Apply primary color */
    color: #fff; /* Text color inside the circle */
}