/* =====================================================================
   «Σε αριθμούς» (Figma "Σε αριθμούς" + "Stat Item")
   Photo from the section settings (--in-numbers-bg, set in the template) under the blue tint.
   ===================================================================== */

#in-numbers {
  background: var(--sf-overlay-numbers), var(--in-numbers-bg, none) no-repeat center / cover;
  background-color: var(--sf-brand-dark);
}

#in-numbers .in-numbers-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sf-gap-xl);
}

#in-numbers .sf-section-title {
  width: 100%;
  color: var(--sf-on-dark);
}

#in-numbers .stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sf-gap-xl) clamp(48px, 3.5vw + 53px, 120px);
  width: 100%;
}

#in-numbers .stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 160px;
  color: var(--sf-on-dark);
  text-align: center;
}

#in-numbers .stat-icon {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

#in-numbers .counter {
  margin: 0;
  color: var(--sf-on-dark);
  font-size: var(--sf-fs-stat);
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

#in-numbers .stat-bar {
  display: block;
  width: 160px;
  height: 6px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 3px;
}

#in-numbers .in-number-title {
  margin: 0;
  color: var(--sf-on-dark);
  font-size: var(--sf-fs-lg);
  line-height: var(--sf-lh-body);
}

#in-numbers .in-numbers-empty {
  margin: 0;
  color: var(--sf-on-dark);
}