.progress-bar-one {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    margin: 20px 0;
}

.progress-bar-one > .start, .progress-bar-one > .end {
    width: 40px;
    text-align: center;
    padding-top: 8px;
}

.progress-bar-one > .content {
    width: 100%;
}

.progress-bar-one > .content .title {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row-reverse;
    margin-top: 20px;
}

.progress-bar-one > .content .title > div {
    width: 20%;
    text-align: center;
    font-size: 18px;
}

.progress-bar-one > .content .main-progress {
    position: relative;
    height: 15px;
}

.progress-bar-one > .content .main-progress .progress-box {
    background: #E4E4E4;
    position: relative;
    width: 100%;
    top: 10px;
    height: 20px;
}

.progress-bar-one > .content .main-progress .progress-box .progress {
    position: absolute;
    left: 0;
    background: #2EBB9D;
    border-radius: 0;
}

.progress-bar-one > .content .main-progress .grids .grid {
    width: 1px;
    height: 40px;
    background: #888;
}

.progress-bar-one > .content .main-progress .grids {
    display: flex;
    justify-content: space-between;
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 1;
}

@media only screen and (max-width: 768px) {
    .progress-bar-one > .content .title > div {
        font-size: 14px !important;
    }

    .progress-bar-one > .content .main-progress .grids .grid {
        height: 30px;
    }

    .progress-bar-one > .content .main-progress .grids {
        top: 5px;
    }

    .progress-bar-one > .start, .progress-bar-one > .end {
        padding-top: 10px;
        font-size: 14px;
        width: 30px;
    }
}


/*
<div class="progress-bar-one">
                    <div class="start">0</div>
                    <div class="content">
                        <div class="main-progress">
                            <div class="grids">
                                <div class="grid"></div>
                                <div class="grid"></div>
                                <div class="grid"></div>
                                <div class="grid"></div>
                                <div class="grid"></div>
                                <div class="grid"></div>
                            </div>
                            <div class="progress-box">
                                <div class="progress" style="width: 48%"></div>
                            </div>

                        </div>
                        <div class="title">
                            <div class="">خیلی کم</div>
                            <div class="">کم</div>
                            <div class="">متوسط</div>
                            <div class="">زیاد</div>
                            <div class="">خیلی زیاد</div>
                        </div>
                    </div>
                    <div class="end">100</div>
                </div>
                */