.section_1 {
    background-repeat: no-repeat;
    background-size: cover;

    .row_2 {
        .roadCol {
            padding-top: 80px;
            padding-bottom: 80px;
            position: relative;

            &::before {
                top: 20px;
                left: -20px;
                right: -20px;
                height: 20px;
                content: '';
                position: absolute;
                background-size: contain;
                background-repeat: repeat-x;
                background-image: url(../images/transitioning/road-white.png);
            }

            &::after {
                bottom: 20px;
                left: -20px;
                right: -20px;
                height: 20px;
                content: '';
                position: absolute;
                background-size: contain;
                background-repeat: repeat-x;
                background-image: url(../images/transitioning/road-white.png);
            }
        }


        .greenBgDk {
            background: rgba(6, 75, 68, 0.7);
        }
    }

    .row_3 {
        .greenBg {
            backdrop-filter: blur(10px);
            background-color: rgb(89, 186, 71, 0.8);
        }
    }
}

.chartDiv {
    display: flex;
    align-items: flex-start;

    .chartDinInn {
        .chartDivInnBtm {
            display: flex;
            justify-content: space-between;
            padding-top: 30px;
            border-top: 1px solid #fff;

            .chartDivPoint {
                width: calc(33.33% - 15px);
                background-color: rgba(255, 255, 255, 0.7);
                backdrop-filter: blur(10px);
                border: 1px solid var(--green);
                border-radius: 15px;
                padding: 20px 15px;
                position: relative;

                &::before {
                    content: '';
                    position: absolute;
                    width: 15px;
                    height: 15px;
                    border-radius: 50%;
                    background-color: #fff;
                    border: 1px solid var(--green);
                    top: -7px;
                    left: 50%;
                    transform: translateX(-50%);
                }

                &::after {
                    content: '';
                    position: absolute;
                    top: -32px;
                    width: 1px;
                    height: 28px;
                    background-color: #fff;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }

        &:first-child {
            width: 75%;
            border-right: 1px dashed #fff;

            .chartDivInnBtm {
                padding-right: 15px;
            }
        }

        &:last-child {
            width: 25%;

            .chartDivInnBtm,
            .chartDinInnTop {
                padding-left: 15px;
            }

            .chartDivPoint {
                width: 100%;
            }
        }

    }
}

/* Responsive */

@media (max-width: 1600px) {

    .fz_28 {
        font-size: 24px !important;
    }

    .fz_36 {
        font-size: 30px !important;
    }

    .chartDiv {
        .chartDinInn {
            .chartDivInnBtm {
                .chartDivPoint {
                    .chartDivPointInn {
                        .fz_24 {
                            font-size: 20px !important;
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 991px) {
    .chartDiv {
        flex-wrap: wrap;

        .chartDinInn {
            &:first-child {
                width: 100%;
                border-right: none;
                border-bottom: 1px dashed #fff;
                padding-bottom: 30px;
                margin-bottom: 30px;

                .chartDivInnBtm {
                    padding-right: 0;
                }
            }

            .chartDivInnBtm {
                flex-direction: column;
                gap: 30px;

                .chartDivPoint {
                    width: 100%;
                }
            }

            &:last-child {
                width: 100%;

                .chartDivInnBtm,
                .chartDinInnTop {
                    padding-left: 0;
                }
            }

            .fz_36 {
                font-size: 25px !important;
                text-align: center;
            }
        }
    }

    .section_1 {

        .row_3 {
            padding: 0px 15px;

            .greenBg {
                border-radius: 30px;

                div.mb_15 {
                    width: 50px;
                    height: auto;
                }

                .fz_28 {
                    font-size: 20px !important;
                }
            }
        }
    }
}

@media (max-width: 767px) {
    .section_1 {
        .row_2 {
            .greenBgDk {
                padding: 20px;

                .row_gap20 {
                    row-gap: 0;
                }
            }
        }

        .fz_28 {
            font-size: 20px !important;
        }
    }
}