:root {
  --primary-color: #3498db;
  --body-color: #000;
}
  /* ----------- Slider styling ----------- */
  .sliders-row {
    display: flex;            /* horizontally place items */
    flex-wrap: wrap;          /* wrap to new line if too narrow */
    justify-content: center;  /* center them horizontally */
    gap: 20px;                /* space between each slider */
  }
  
  /* 2. Each slider "card". 
     Width can be flexible, but let's say up to 300px wide. */
  .slider {
    width: 200px;       /* Base width; you can adjust */
    max-width: 100%;    /* Don’t exceed the container width */
    position: relative;
    margin: 0 auto;     /* center if narrower than parent */
  }
  
  /* 3. Make the SVG scale to fill the .slider’s width. */
  .slider svg {
    width: 100%; 
    height: auto; 
    display: block;
  }
  
  /* 4. The background circle + progress circle remain the same. 
     We rely on the original .circle rules (transform, stroke-dasharray, etc.). */
  
  /* 5. If you have a large screen and want them smaller,
     or if you want them to shrink further on small screens, 
     you can add additional media queries. */
  
  .value-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.2;
  }
  
  .text-value {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--body-color);
  }
  
  .subtext {
    font-size: 1rem;
    font-weight: 400;
    color: var(--body-color);
  }
  
  /* ----------- SVG/Circle styling ----------- */
  circle {
    fill: none;
    stroke-width: 15px;
    stroke-linecap: round;
    transform-origin: center; 
    transform: rotate(135deg); /* partial arc from 135° to 405° */
  }
  
  /* Background circle (gray) */
  circle:nth-child(1) {
    stroke: var(--border-color);
    stroke-dasharray: 660; /* partial arc circumference */
  }
  
  /* Progress circle (blue) */
  circle:nth-child(2) {
    stroke: var(--primary-color);    /* a simple blue color */
    stroke-dasharray: 880; 
    stroke-dashoffset: 880; /* start fully “hidden” */
  }