.card3 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #ffffff;
  margin: 0 16px; /* 20px * 0.8 */
  width: 224px; /* 280px * 0.8 */
  height: 280px; /* 350px * 0.8 */
  border-radius: 4px; /* 5px * 0.8 */
  box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.2); /* Adjusted shadow */
}

.card3 .percent {
  position: relative;
}

.card3 svg {
  position: relative;
  width: 168px; /* 210px * 0.8 */
  height: 168px; /* 210px * 0.8 */
  transform: rotate(-90deg);
}

.card3 svg circle {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: #f0f0f0;
  stroke-width: 8; /* 10px * 0.8 */
  stroke-linecap: round;
}

.card3 svg circle:last-of-type {
  stroke-dasharray: 500px; /* 625px * 0.8 */
  stroke-dashoffset: calc(500px - (500px * var(--percent)) / 100);
  stroke: #3498db;
}

.card3 .number {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.card3 .number h3 {
  font-weight: 200;
  font-size: 2.8rem; /* 3.5rem * 0.8 */
}

.card3 .number h3 span {
  font-size: 1.6rem; /* 2rem * 0.8 */
}

.card3 .title h2 {
  margin: 20px 0 0; /* 25px * 0.8 */
}

.card3:nth-child(1) svg circle:last-of-type {
  stroke: #f39c12;
}

.card3:nth-child(2) svg circle:last-of-type {
  stroke: #2ecc71;
}