/* ================================================================== */
/*  Cybersolus — unified content page styles                           */
/*  All detail pages (services, solutions, news) use the about-shell   */
/*  template with Elementor-compatible markup. This file provides       */
/*  minimal overrides and utility styles only.                          */
/* ================================================================== */

:root {
  --cs-accent: #0b7a5f;
  --cs-heading: #071c26;
  --cs-text: rgba(7, 28, 38, 0.82);
  --cs-text-light: rgba(7, 28, 38, 0.6);
  --cs-border: rgba(7, 28, 38, 0.08);
}

/* Progress bar color — teal/cyjan from brand palette */
.skill-line {
  background: rgba(11, 122, 95, 0.12);
  border-radius: 5px;
  overflow: hidden;
}

.skill-line div {
  background: linear-gradient(90deg, #0b7a5f, #76ffc2);
  border-radius: 5px;
}

/* Metrics stat boxes — card-like styling */
.cs-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin: 28px 0;
}

.cs-stat-card {
  padding: 28px 20px;
  background: rgba(11, 122, 95, 0.04);
  border: 1px solid rgba(11, 122, 95, 0.12);
  border-radius: 16px;
  text-align: center;
}

.cs-stat-card .title-xlarge {
  color: #0b7a5f;
  font-size: clamp(28px, 3.5vw, 48px);
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: normal;
}

/* Shrink cards with long values (set by JS via data-cs-long) */
.cs-stat-card[data-cs-long] .title-xlarge {
  font-size: clamp(20px, 2.5vw, 34px);
}

.cs-stat-card .text-body {
  font-size: 14px;
  line-height: 1.4;
  color: var(--cs-text-light);
  margin-top: 6px;
}

@media (max-width: 767px) {
  .cs-stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .cs-stat-card {
    padding: 20px 14px;
  }
}