.circular-progress {
  position: relative;
  width: 270px;
  height: 270px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circular-progress svg {
  transform: rotate(-90deg); /* start progress from top */
  width: 100%;
  height: 100%;
}

.circular-progress circle {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}

.bg {
  stroke: #cdcfd000; /* background ring */
}

.progress {
  stroke: url(#gradient); /* gradient stroke */
  stroke-dasharray: 339.292; /* 2 * π * r (2π * 54) */
  stroke-dashoffset: 339.292;
  transition: stroke-dashoffset 1s ease;
}

.percentage {
  position: absolute;
  font-size: 28px;
  font-weight: bold;
  background: linear-gradient(90deg, #DB1E67, #F04E24);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.percentage {
    width: 75px;
    height: 75px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border: 3px solid red;
    border-radius: 100px;
    padding: 78px;
}