:root {
  --primary-color: #0AB3E6; /* Example: a shade of blue */
}
/* Style for the counter container */
.counter-container {
  /* White background for contrast */
  background-color: #ffffff;
  /* Internal padding for spacing */
  padding: 40px 60px;
  /* Rounded corners for a softer design */
  border-radius: 12px;
  /* Light shadow for depth */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  /* Center the text */
  text-align: center;
}

/* Style for the counter number */
.counter {
  /* Large font size for visibility */
  font-size: 40px;
  /* Bold text */
  font-weight: bold;
  /* Initial text color */
  color: var(--primary-color);
  /* Relative positioning for pseudo-elements */
  position: relative;
  /* Inline-block display to manage dimensions and margins */
  display: inline-block;
  /* Transition for color change */
  transition: color 0.3s ease;
}

.counter-k {
  /* Large font size for visibility */
  font-size: 40px;
  /* Bold text */
  font-weight: bold;
  /* Initial text color */
  color: var(--primary-color);
  /* Relative positioning for pseudo-elements */
  position: relative;
  /* Inline-block display to manage dimensions and margins */
  display: inline-block;
  /* Transition for color change */
  transition: color 0.3s ease;
}

/* Style applied when the 'animate' class is added */
.counter.animate {
  /* Change text color for animation */
  color: var(--primary-color);
}