.lineHeading {
    &::before {
        bottom: 86px;
        width: 360px;
    }

    &::after {
        top: 48px;
        left: 156px;
        width: 120px;
    }
}

.rowWrapInn {
    position: relative;

    &::before {
        content: "";
        position: absolute;
        top: 63px;
        right: 21px;
        height: 3px;
        width: calc(100% - 38px);
        background-color: #4d4d4f;
    }

    &::after {
        content: "";
        position: absolute;
        top: 72px;
        left: 0;
        height: calc(100% - 25px);
        width: 3px;
        background-color: #4d4d4f;
    }

    &.rowWrapInn1 {
        &::after {
            right: 0;
            left: auto;
        }

        .rt {
            top: 63px;
            right: 0;
        }

        .rb {
            right: 0;
            bottom: -66px;
        }
    }

    &.rowWrapInn2 {
        &::before {
            left: 21px;
            width: calc(100% - 42px);
        }

        &::after {
            top: 100px;
            height: calc(100% - 50px);
        }

        .lt {
            top: 63px;
            left: 0;
        }

        .lb {
            left: 0;
            bottom: -66px;
        }

        .journeyWrapInn {
            & .eachJourney {
                & .eachJourneyInn {
                    & .journeyNum {
                        &::after {
                            transform: rotate(180deg);
                        }
                    }
                }
            }
        }
    }

}

.rowWrap5 {
    .rowWrapInn1 {

        &::after {
            content: normal;
        }

        .journeyWrapInn {
            & .eachJourney {
                &.jourRgBr {
                    &::after {
                        top: 14%;
                        right: 2px;
                        transform: translateY(-14%) rotate(0deg);
                    }
                }
            }
        }
    }
}

.journeyWrapInn {
    display: flex;
    display: -ms-flexbox;

    .eachJourney {
        width: 100%;
        flex: 0 0 33.33%;
        max-width: 33.33%;
        -ms-flex: 0 0 33.33%;

        .eachJourneyInn {
            .journeyNum {
                position: relative;

                &::after {
                    content: "\f105";
                    position: absolute;
                    bottom: -26px;
                    left: 30px;
                    width: 20px;
                    height: 20px;
                    border-radius: 50%;
                    background-color: #4d4d4f;
                    color: #fff;
                    font-family: fontawesome;
                    font-size: 16px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 9;
                }

                h2 {
                    padding: 0 30px;
                }
            }

            .journeyCont {
                padding: 0 30px;

                .journeyPara {
                    height: 300px;
                    overflow-y: auto;
                    overflow-x: hidden;
                    margin-bottom: 30px;

                    &::-webkit-scrollbar-track {
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
                        border-radius: 10px;
                        background-color: #F5F5F5;
                    }

                    &::-webkit-scrollbar {
                        width: 6px;
                        background-color: #F5F5F5;
                    }

                    &::-webkit-scrollbar-thumb {
                        border-radius: 10px;
                        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
                        background-color: #555;
                    }
                }
            }
        }

        &.jourRgBr {
            position: relative;

            &::after {
                content: "\f105";
                position: absolute;
                top: 70%;
                right: -10px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #4d4d4f;
                color: #fff;
                font-family: fontawesome;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: translateY(-70%) rotate(90deg);
                z-index: 9;
            }
        }

        &.jourLfBr {
            position: relative;

            &::after {
                content: "\f105";
                position: absolute;
                top: 70%;
                left: -10px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background-color: #4d4d4f;
                color: #fff;
                font-family: fontawesome;
                font-size: 16px;
                display: flex;
                align-items: center;
                justify-content: center;
                transform: translateY(-70%) rotate(90deg);
                z-index: 9;
            }
        }
    }
}


/* start responsive */
@media(max-width: 1280px) {
    .journeyWrapInn {
        .eachJourney {
            .eachJourneyInn {
                .journeyNum {
                    h2 {
                        font-size: 34px;
                    }

                    &::after {
                        bottom: -33px;
                    }
                }

                .journeyCont {
                    .journeyPara {
                        height: 150px;
                    }
                }
            }
        }
    }

    .rowWrap5 {
        .rowWrapInn1 {
            .journeyWrapInn {
                .eachJourney {
                    &.jourRgBr {
                        &::after {
                            top: 22%;
                            transform: translateY(-22%) rotate(0deg);
                        }
                    }
                }
            }
        }
    }

    .milestone {
        .row_1.mb_100 {
            margin-bottom: 50px !important;
        }

        .row_2 {
            .journeyWrap.mt_30 {
                margin-top: 0 !important;
            }
        }
    }
}

@media(max-width: 1024px) {
    .journeyWrapInn {
        & .eachJourney {
            & .eachJourneyInn {
                & .journeyNum {
                    h2 {
                        font-size: 34px;
                    }

                    &::after {
                        bottom: -27px;
                    }
                }

                &.jourRgBr {
                    &::after {
                        top: 17%;
                    }
                }
            }
        }
    }

    .rowWrapInn {
        &.rowWrapInn1 {
            .rt {
                top: 56px;
            }

            .rb {
                bottom: -59px;
            }
        }

        &.rowWrapInn2 {
            .lt {
                top: 56px;
            }

            .lb {
                bottom: -60px;
            }

            &::after {
                top: 90px;
                height: calc(100% - 50px);
            }
        }

        &::before {
            top: 56px;
            width: calc(100% - 52px);
        }

        .journeyCont {
            .journeyPara {
                h4 {
                    font-size: 20px !important;
                }
            }
        }
    }

    .rowWrap5 {
        & .rowWrapInn1 {
            & .journeyWrapInn {
                & .eachJourney {
                    &.jourRgBr {
                        &::after {
                            top: 20%;
                            transform: translateY(-20%) rotate(0deg);
                        }
                    }
                }
            }
        }
    }
}

@media(max-width: 991px) {

    .milestone {
        .row_1.mb_100 {
            margin-bottom: 30px !important;
        }
    }

    .journeyWrap {
        position: relative;

        &::before {
            content: "";
            position: absolute;
            top: 24px;
            left: 24px;
            width: 2px;
            height: 89%;
            background-color: #4d4d4f;

        }

    }

    .journeyWrapInn {
        flex-direction: column;

        .eachJourney {
            flex: 0 0 100%;
            max-width: 100%;
            -ms-flex: 0 0 100%;

            .eachJourneyInn {
                .journeyCont {
                    padding: 0 0px 0 30px;

                    .journeyPara {
                        height: auto;
                    }
                }

                .journeyNum {
                    &::after {
                        bottom: auto;
                        top: 16px;
                        left: 0px;
                        transform: rotate(90deg);
                    }
                }
            }

            &.jourRgBr {
                &::after {
                    display: none;
                }
            }

            &.jourLfBr {
                &::after {
                    display: none;
                }
            }
        }
    }

    .rowWrapInn {
        &::before {
            content: normal;
        }

        &::after {
            content: normal;
        }

        &.rowWrapInn1 {
            .rt {
                display: none;
            }

            .rb {
                display: none;
            }
        }

        .rowWrapInner {
            margin-top: 10px !important;
        }

        &.rowWrapInn2 {
            .journeyWrapInn {
                & .eachJourney {
                    & .eachJourneyInn {
                        & .journeyNum {
                            &::after {
                                transform: rotate(90deg);
                            }
                        }
                    }
                }
            }

            .lt {
                display: none;
            }

            .lb {
                display: none;
            }

            .journeyWrapInn {

                .col_4,
                .col_10 {
                    order: 3;
                }

                .col_5,
                .col_11 {
                    order: 2;
                }

                .col_6,
                .col_12 {
                    order: 1;
                }
            }
        }

    }
}


@media(max-width: 480px) {
    .journeyWrapInn {
        & .eachJourney {
            & .eachJourneyInn {
                & .journeyNum {
                    h2 {
                        font-size: 30px;
                    }

                    &::after {
                        top: 12px;
                    }
                }
            }
        }
    }

}

/* end responsive */