Create a curved css timeline with circles

Question

I would like to create a curved/flowing line with CSS, having circles on it with text associated with them. I tried to find it on here, searched Google and even asked ChatGPT but the idea seams to either be pretty unique or people who have figured it out haven't shared it (yet).

To give you a visual representation of what I am trying to achieve, here is a screenshot from the design:

I have tried creating a line using border-radius, but instead of giving me a curved line like in the design, it gave me a box with round edges:

/* Make sure to include the Font Awesome CSS */

@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css');
.timeline-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.timeline {
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #ccc;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}

.circle {
  position: absolute;
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 50%;
  text-align: center;
}

.circle i {
  font-size: 8px;
  color: #000;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.circle .text {
  display: none;
}

.circle:nth-of-type(1) {
  left: 25%;
}

.circle:nth-of-type(2) {
  left: 50%;
}

.circle:nth-of-type(3) {
  left: 75%;
}


/* Responsive styles */

@media (min-width: 768px) {
  .circle {
    width: 20px;
    height: 20px;
  }
  .circle i {
    font-size: 16px;
  }
  .circle .text {
    display: block;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 80%;
    text-align: center;
  }
}

<div class="timeline-container">
  <div class="timeline">
    <div class="circle">
      <i class="fas fa-check"></i>
      <div class="text">
        <h3>Heading 1</h3>
        <p>Text 1</p>
      </div>
    </div>
    <div class="circle">
      <i class="fas fa-check"></i>
      <div class="text">
        <h3>Heading 2</h3>
        <p>Text 2</p>
      </div>
    </div>
    <div class="circle">
      <i class="fas fa-check"></i>
      <div class="text">
        <h3>Heading 3</h3>
        <p>Text 3</p>
      </div>
    </div>
    <div class="circle">
      <i class="fas fa-check"></i>
      <div class="text">
        <h3>Heading 4</h3>
        <p>Text 4</p>
      </div>
    </div>
  </div>
</div>

I have some knowledge of both CSS3 as well as modern Javascript (ES6), but making such a line has had me scratching my head for over 3 days now. One catch of this is; it has to be responsive, preferably with the line curving 'over' itself and continuing in opposite direction, with space for the text.