Progress bar status with check using CSS and bootstrap

See more:

CSS3

HTML5

bootstrap

Hi Team

I have progress bar, the issue is on check bar status it does not look good. I want my progress bar be light grey and check bar should be green from step1-step4 in between the color should be grey and be moved straight horizontal.

What I have tried:

<div id="hot">
          <div class="box py-4">
            <div class="container">
              <div class="row">
                <div class="col-md-12">
                  <h2 class="mb-0">How to buy on Store</h2>
                  <br/>
                  <h2>Pay with Ozow</h2>
                  <p>
                    Make payments to, or request refunds from, thousands of businesses online or in-store. 
                    With Ozow it’s easy, fast, secure and happens directly from your bank account.
                  </p>
                  <br/>
                  <h0>Just follow these steps</h0>
                  <div class="steps-check-bar">
                    <div class="step-check">class="fa fa-check"></div>
                    <div class="step-check">^__i class="fa fa-check"></div>
                    <div class="step-check">^__i class="fa fa-check"></div>
                  </div>
                  <div class="steps-container">
                    <div class="step">
                      <div class="step-number">Step 1</div>
                      <div class="step-description">Select Ozow as your payment option when you shop online or in-store.</div>
                    </div>
                    <div class="steps-vertical-bar"></div>
                    <div class="step">
                      <div class="step-number">Step 2</div>
                      <div class="step-description">Select your bank. We have all 9 of South Africa’s major banks available to choose from.</div>
                    </div>
                    <div class="steps-vertical-bar"></div>
                    <div class="step">
                      <div class="step-number">Step 3</div>
                      <div class="step-description">Log in and select the account you want to pay from.</div>
                    </div>
                    <div class="steps-vertical-bar"></div>
                    <div class="step">
                      <div class="step-number">Step 4</div>
                      <div class="step-description">Accept the two-factor authentication request from your bank, and that’s it! Payment successful.</div>
                    </div>
                  </div>
                   
                  
                  
                </div>
              </div>
            </div>
          </div>
        </div>

<pre lang="HTML">

// css file

.steps-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
  }
  
  .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 16px;
    color: #666;
    position: relative;
  }
  
  .step-number {
    font-size: 18px;
    font-weight: bold;
    color: #01d198;
    margin-bottom: 10px;
  }
  
  .step-description {
    text-align: center;
  }
  
  .step-check {
    position: absolute;
    bottom: -20px;
    font-size: 24px;
    color: #01d198;
  }
  
  .steps-horizontal-bar {
    width: 33.33%;
    height: 9px;
    background-color: #ccc;
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
  }
  
  .steps-check-bar {
    position: relative;
    height: 9px;
    max-width: 800px;
    margin-right: auto;
    margin-left: auto;
    background-color: #01d198;
  }
  
  .fa-check {
    font-size: 1.5em;
  }

<pre lang="CSS">