.progress-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.progress-container {
  position: relative;
  width: 160px;
  height: 160px;
  margin-bottom: 30px;
}
.progress-circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  background: #ffffff10;
}
.progress-circle::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from -90deg, #e0a3ff 0deg, #9f7aea var(--progress-deg), transparent var(--progress-deg), transparent 360deg);
  transition: all 0.3s ease;
}
.progress-circle::after {
  content: "";
  position: absolute;
  top: 25px;
  left: 25px;
  right: 25px;
  bottom: 25px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a5568 0%, #2d3748 50%, #553c9a 100%);
  z-index: 2;
}
/* Add thick sections overlay */
.progress-thick {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(from -90deg, transparent 0deg, #c084fc calc(var(--progress-deg) * 0.3), transparent calc(var(--progress-deg) * 0.3), transparent calc(var(--progress-deg) * 0.6), #c084fc calc(var(--progress-deg) * 0.8), transparent calc(var(--progress-deg) * 0.8), transparent 360deg);
  mask: radial-gradient(circle, transparent 65px, black 65px, black 85px, transparent 85px);
  -webkit-mask: radial-gradient(circle, transparent 65px, black 65px, black 85px, transparent 85px);
}
.progress-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 2rem;
  font-weight: bold;
  z-index: 10;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.progress-label {
  color: white;
  font-size: 1.1rem;
  text-align: center;
  max-width: 200px;
  line-height: 1.4;
  opacity: 0.9;
}
@media (max-width: 1024px) {
  .counters-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }
}
@media (max-width: 640px) {
  .counters-container {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .progress-container {
    width: 140px;
    height: 140px;
  }
  .progress-text {
    font-size: 1.8rem;
  }
}
/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sourceRoot%22%3A%22%2F%22%2C%22sources%22%3A%5B%22wp-content%2Fcustom_codes%2F313-scss-default.scss%22%2C%22(stdin)%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22AAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAOA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAQA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAkBA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BACxCA%3BADqDA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAqBA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAYA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAWA%3BAACC%3BAAAA%3BAAAA%3BAAAA%3BAAAA%3BAAMD%3BAACC%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%3BAAKA%3BAAAA%3BAAAA%3BAAAA%22%7D */