.progress-container {
  width: 33%;
  padding: 8px;
}

.progress-bar {
  position: relative;
  height: 40px;
  border: 3px solid gold;
  border-radius: 30px;
  overflow: hidden;
  background: #333;
}

.progress-bar .fill {
  height: 100%;
  width: 0%; /* start empty */
  transition: width 0.4s ease-in-out;
  background: linear-gradient(90deg, purple, gold);
  animation: pulseGlow 1.5s infinite alternate;
  border-radius: 20px;
}

/* Pulsating glow effect */
@keyframes pulseGlow {
  0% {
    box-shadow: 0 0 10px purple, 0 0 20px purple;
  }
  50% {
    box-shadow: 0 0 20px yellow, 0 0 40px yellow;
  }
  100% {
    box-shadow: 0 0 25px gold, 0 0 50px gold;
  }
}

/* Thunder icon styling */
.progress-bar .icon {
  position: absolute;
  right: 0; /* place outside the bar */
  top: 45%;
  transform: translateY(-50%);
  font-size: 24px;
  color: gold;
  text-shadow: 0 0 10px yellow, 0 0 20px gold;
}

@media screen and (max-width: 576px) {
  .progress-bar {
    height: 32px;
  }
}