.counter-item {
      position: relative;
      width: 150px;
      height: 150px;
      margin: 0 auto;
    }
    .counter-circle {
      width: 100%;
      height: 100%;
      transform: rotate(-90deg);
    }
    .counter-circle-bg {
      fill: none;
      stroke: #e0e0e0;
      stroke-width: 10;
    } 
/* */
    .counter-circle-fill {
      fill: none;
      stroke: #691f7e;
      stroke-width: 10;
      stroke-dasharray: 440; /* Circumference of the circle */
      stroke-dashoffset: 440; /* Start with no fill */
      transition: stroke-dashoffset 1s ease-in-out;
    } 
    .counter {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32px;
      font-weight: 700;
      color: #691f7e;
    }
    .counter-title {
      text-align: center;
      font-size: 1.2rem;
      color: #f9a600;
        font-weight: bold;
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 20px;
    }