﻿.main-timeline-2 {
    position: relative;
}

    .main-timeline-2::after {
        content: "";
        position: absolute;
        width: 3px;
        background-color: #dfdfdf;
        top: 0;
        bottom: 0;
        left: 50%;
        margin-left: -3px;
    }

    .main-timeline-2 .timeline-row {
        display: flex;
    }

        .main-timeline-2 .timeline-row .timeline-1 {
            position: relative;
            background-color: inherit;
            width: 50%;
            height: fit-content;
        }

        .main-timeline-2 .timeline-row .right-1 {
            padding: 0px 0px 20px 40px;
            left: 0%;
        }

            .main-timeline-2 .timeline-row .right-1 .moc-time-line {
                background-color: black;
                color: white;
                padding: 2%;
                border-radius: 6px;
                text-wrap: nowrap;
                width: fit-content;
                margin-top: 5px;
            }

        .main-timeline-2 .timeline-row .left-1 {
            padding: 0px 40px 20px 0px;
            left: 0;
            display: flex;
            justify-content: end;
        }

            .main-timeline-2 .timeline-row .left-1 .moc-time-line {
                background-color: black;
                color: white;
                padding: 2%;
                border-radius: 6px;
                text-wrap: nowrap;
                width: fit-content;
                margin-top: 5px;
            }

    .main-timeline-2 .timeline-2 {
        position: relative;
        background-color: inherit;
        width: 50%;
    }

        .main-timeline-2 .timeline-2 .time-line-img {
            padding: 5%;
        }

        .main-timeline-2 .timeline-2::after {
            content: "";
            position: absolute;
            width: 25px;
            height: 25px;
            right: -11px;
            background-color: #fb5e00;
            top: 15px;
            border-radius: 50%;
            z-index: 1;
        }
/* Place the container to the left */
.left-2 {
    padding: 0px 40px 20px 0px;
    left: 0;
}

    .left-2::before {
        content: " ";
        position: absolute;
        top: 18px;
        z-index: 1;
        right: 30px;
        border: medium solid white;
        border-width: 10px 0 10px 10px;
        border-color: transparent transparent transparent white;
    }
/* Place the container to the right */
.right-2 {
    padding: 0px 0px 20px 40px;
    left: 0;
}

    .right-2::before {
        content: " ";
        position: absolute;
        top: 18px;
        z-index: 1;
        left: 30px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    .right-2::after {
        left: -14px;
    }
/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
    /* Place the timelime to the left */
    /* Full-width containers */
    /* Make sure that all arrows are pointing leftwards */
    /* Make sure all circles are at the same spot */
    /* Make all right containers behave like the left ones */
    .main-timeline-2::after {
        left: 31px;
    }

    .po-reverse {
        flex-direction: column-reverse !important;
    }

    .custom-img-detai {
        width: 80%;
    }

    .left-1 {
        justify-content: start !important;
        padding: 0px 0px 20px 70px !important;
    }

    .dao-cot {
        flex-direction: column-reverse;
    }

    .timeline-row {
        flex-direction: column;
    }

    .timeline-2 {
        width: 100% !important;
        padding-left: 70px;
        padding-right: 25px;
    }

    .timeline-1 {
        width: 100% !important;
    }

    .timeline-2::before {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent white transparent transparent;
    }

    .left-2::after, .right-2::after {
        left: 18px;
    }

    .left-2::before {
        right: auto;
    }

    .right-2 {
        left: 0%;
    }

    .right-1 {
        padding: 0px 0px 20px 70px !important;
        left: 0;
    }
}
