<div class="wrap">
<div class="heading">
  <h1>
    Доставка и плата
    </h1>
  <p>Возможен ОПТ!</p>
  </div>

  <div class="content">
    <div class="content__line"></div>
    <div class="content__circle">
      <p>1</p>
      </div>
    <div class="content__circle">
      <p>1</p>
      </div>
    <div class="content__circle">
      <p>1</p>
      </div>
    <div class="content__circle">
      <p>1</p>
      </div>
    
  </div>
  <div class="content__text">
    <div class="circle-text">
   <h2>Выберите <br>
     товар</h2>
      </div>
    <div class="circle-text">
   <h2>Выберите <br>
     товар</h2>
      </div>
    <div class="circle-text">
   <h2>Выберите <br>
     товар</h2>
      </div>
    <div class="circle-text">
   <h2>Выберите <br>
     товар</h2>
      </div>
    </div>

body {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  }
.wrap {
  max-width: 100%;
  margin : 0 auto;
  }
.heading h1, .heading p {
  text-align: center;
}
.content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: relative;
  }
.content__circle {
  width: 60px;
  height: 60px;
  background: red;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  z-index: 2;
  }
.content__line {
  width: 90%;
  height: 2px;
  position: absolute;
  top: 50%;
  background: #000;
  z-index: 1;
  }
.content__text {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.circle-text h2 {
  font-size: 10px;
  font-weight: 400;
  text-align: center;
  }