:root {
    --sa-red: #d74848;
    /* Your desired color */
    --sa-bg: white;
    --sa-nav-bg: #0a192a;
    --sa-table-header-bg: rgb(231, 232, 234);
}

.timeline {
    width: 100%;
    margin: 30px auto;
    position: relative;
    padding: 0 10px;
    transition: all .4s ease;
}

.timeline::before {
    content: "";
    position: absolute;
    width: 3px;
    height: 85%;
    background-color: var(--sa-red);
    left: 50%;
    top: 0;
}


.timeline-item {
    margin-bottom: 50px;
    position: relative;
}

.timeline-item::after,
.timeline-item::before {
    content: '';
    display: block;
    width: 100%;
    clear: both;
}

.timeline-icon {
    width: 65px;
    height: 65px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    border-radius: 50%;
}


.timeline-icon img {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

/* .timeline-icon::before {
    content: '';
    position: absolute;
    left: calc(50% - 7px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid var(--sa-red);
} */

.timeline-content {
    width: 45%;
    max-width: 375px;
    padding: 15px 30px;
    /* box-shadow: 0 3px 0 rgba(0, 0, 0, 0.1); */
    background-color: #FAFAFA;
    border-radius: 10px;
    text-align: right;
    float: right;
    position: sticky;
    right: calc(50% + 44px);
    top: 0;
    transition: all .3s ease;
}

.timeline-content::before {
    content: '';
    position: absolute;
    left: 100%;
    top: 20px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 12px solid #FAFAFA;
}

.timeline-content p {
    margin: 0;
    font-size: 16px;
}

.timeline-content h2 {
    color: black;
    font-weight: 600;
    font-size: 20px;
    border-radius: 3px 3px 0 0;
}

.timeline-content h2 .active {
    color: var(--sa-red);
}



.timeline-content.right {
    float: left;
    left: calc(50% + 44px);
    top: 0;
    text-align: left;
}

.timeline-content.right::before {
    content: '';
    left: -12px;
    border-left: 0;
    border-right: 12px solid #FAFAFA;
}


/* Media query */

@media screen and (max-width: 996px) {
    .timeline {
        margin: 30px auto;
        padding: 0px;
        width: fit-content;

    }

    .timeline::before {
        left: 0;
    }

    .timeline-icon {
        width: 40px;
        height: 40px;
    }

    .timeline-content,
    .timeline-content.right {
        width: 90%;
        max-width: 250px;
        float: left;
        padding: 10px 20px;
        left: 32px;
        right: 0;
        position: relative;
        text-align: left;
    }

    .timeline-content h2 {
        font-size: 16px;
    }

    .timeline-content p {
        font-size: 12px;
    }

    .timeline-content::before,
    .timeline-content.right::before {
        left: -11px;
        top: 15px;
        border-left: 0;
        border-right: 12px solid #FAFAFA;
    }

    .timeline-icon {
        left: 0;
    }
}