How would I make a content within and the image to be responsive

I have a transparent circle which is an image. I wanted to place content within the circle. But the moment I change the size of the screen either the circle changes its size or the text within goes away from the circle. How would I fix this?

I'm using bootstrap 4 https://codepen.io/mahirq8/pen/oNNMvwy

<div class="row d-flex col-12 justify-content-center">

<div class="col-lg-3 mx-4 wow fadeInUp" data-wow-delay="500ms" style="right:50px">
 <div class="container">
 <a href="https://ibb.co/Qr5w3wd"><img 
 src="https://i.ibb.co/pJmFBFy/d9c2e11f-5620-48f1-b619-037bd9ab64fd.jpg" 
 alt="d9c2e11f-5620-48f1-b619-037bd9ab64fd" border="0"></a>

   <div class="text-block1">
    <div class="card-body  " style="text-align:center; text-transform:none">
      <h5 class="card-title"
        style="font-family: Arima Madurai; color:#3d5a98 ; font-size:20px;">
        Intelligently<br>Designed Courses</h5>

         <p class="card-text wow fadeInUp" data-wow-delay="750ms"
          style="color: black; font-weight: 400; line-height:22px; font-size:19px">
          Our programs and<br>courses are<br>thoughtfully curated to<br>provoke creativity,<br>nurture growth and<br>push boundaries.</p>
</div>
</div>
</div>
</div>
</div>

.img-1 {   
    height: auto;
    max-width: 140%;
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(3deg);
    transform: rotate(30deg);
}

.text-block1 {
    position: absolute;
    bottom: 250px;
    left: 220px;
    color: white;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
}

Here's my website where you can see the actual result at the midsection with 3 circles. Any suggestions would be highly appreciated.

Thank You