.timeline-title{
    color: var(--ast-global-color-1) !important;
    text-transform: uppercase;
}

.carousel-wrapper {
    position: relative;
}

.carousel .timeline-item-post {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    max-width: 850px; 
    margin: 0 auto;
}

.timeline-item .timeline-image {
    flex: 0 0 300px;
    margin-right: 20px;
}

.timeline-item .timeline-image img {
    height: 300px;
    width: 300px !important;
    object-fit: contain;
}

.timeline-item .timeline-content {
    flex: 1;
    padding: 60px;
}

.timeline-title {
    margin-bottom: 10px;
}

@media (max-width: 921px) {
    .carousel .timeline-item-post {
        display: block;
    }

    .timeline-item .timeline-image {
        flex: none;
        margin: 0 auto 20px;
        text-align: center;
    }

    .timeline-item .timeline-content {
        padding: 20px;
        text-align: center;
    }


    .timeline-item .timeline-image img {
    margin: 0 auto;
}
}

.custom-dots {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    position: relative;
    padding: 0 5px; /* Adjust to align with the first and last dots */
}

.dot-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dot {
    cursor: pointer;
    width: 16px; /* Fixed size for dots */
    height: 16px;
    background-color: var(--ast-global-color-0);
    border-radius: 50%;
    z-index: 3;
    transition: all .3s;
}

.dot.dot-passed{
    background-color: var(--ast-global-color-1);
}

.dot.dot-active {
    background-color: var(--ast-global-color-1);
    border-radius: 0%;
}

.year {
    position: absolute;
    top: 30px; /* Adjust as necessary */
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    text-align: center;
}

@media (max-width: 544px) {
    .year {
        display: none;
    }
}

.initial-line{
    position: absolute;
    top: 50%; /* Adjust to align with the middle of the dots */
    left: 10px; /* Adjust to align with the first dot */
    height: 2px;
    background-color: var(--ast-global-color-0);
    z-index: 1;
    transition: width 0.3s;
    transform: translateY(-50%); /* Center the line vertically */
    width: calc(100% - 20px); /* Extend the line to the full width minus adjustments for the dots */
}

.progress-line {
    position: absolute;
    top: 50%; /* Adjust to align with the middle of the dots */
    left: 10px; /* Adjust to align with the first dot */
    height: 3px;
    background-color: var(--ast-global-color-1);
    z-index: 2;
    transition: width 0.3s;
    transform: translateY(-50%); /* Center the line vertically */
    width: calc(100% - 20px); /* Extend the line to the full width minus adjustments for the dots */
}

.slick-prev, .slick-next {
    width: 40px;
    height: 40px;
}

.slick-next:before {
    content: '';
}

.slick-prev:before {
    content: '';
}