.section-title { text-align: center; }

.stats-toggle {
  display: flex;               /* show flex for the bars */
  flex-direction: column;
  align-items: center;
  width: 30px; 
  background: transparent;     
  border: 0;                   
  cursor: pointer;             
  padding: 0.3rem;             
  border-radius: 10px;

  /* optional animation for hiding/moving */
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.stats-toggle:focus { 
  outline: 3px solid var(--ring); 
}

.stats-toggle-bar { 
  display: block; 
  height: 2px; 
  background: var(--text); 
  margin: 5px 0; 
  border-radius: 2px; 
}

/* Descending widths */
.stats-toggle-bar:nth-child(1) { width: 100%; }
.stats-toggle-bar:nth-child(2) { width: 70%; }
.stats-toggle-bar:nth-child(3) { width: 50%; }


.stats-design {
  display: flex;               
  flex-direction: column; 
  justify-content: center;
  align-items: center;
  width: 30px; 
  padding: 0.3rem;             
}

.stats-design-bar { 
  display: block; 
  height: 2px; 
  width: 100%; 
  background: var(--text); 
  margin: 5px 0; 
  border-radius: 2px; 
  transform-origin: center; 
  transition: opacity 0.3s ease, transform 0.3s ease; /* keep smooth animation option */
}

/* Base scaling */
.stats-design-bar:nth-child(1) { transform: scaleX(.9); }
.stats-design-bar:nth-child(2) { transform: scaleX(0.6); }
.stats-design-bar:nth-child(3) { transform: scaleX(0.4); }

/* Hover effect */
.stats-design:hover .stats-design-bar:nth-child(1) { transform: scaleX(2); }

.stat-card { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.5s ease, opacity 0.5s ease; display: flex; justify-content: center; gap: 2rem; margin-top: 1rem; }

.stat-card.active {
  max-height: 500px; /* adjust if needed */
  opacity: 1;
}


/* ---------- Responsive ---------- */
@media (max-width: 820px) { /* adjust breakpoint as needed */

  .stat-card { gap: 1rem; }

  .stat-row {
    max-width: 80%;       /* row becomes narrower on small screens */
    margin-inline: auto;  /* center horizontally */
    padding: 0.5rem;      /* optional horizontal padding */
  }
  }