/* =========================================================
   SKILLS.CSS — skills.html only
   Freelance services + cart moved to services.html / services.css.
   Grid: 1 column mobile, 2 columns tablet AND desktop (kept at
   exactly 2 so each card has room to show its metric clearly).
   ========================================================= */

.skills-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

@media (min-width: 641px){
  .skills-grid{
    grid-template-columns: 1fr 1fr;
  }
}

.skill-card{ padding: 24px; }
.skill-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.skill-card h3{ font-family: var(--font-display); font-size:17px; }
.skill-percent{
  font-family: var(--font-display);
  font-weight:700;
  color: var(--lime);
  font-size: 15px;
}
.skill-bar{
  background:#2a2a2c;
  border-radius: 999px;
  height:8px;
  overflow:hidden;
  margin-top:12px;
}
.skill-bar span{
  display:block;
  height:100%;
  width:0;
  background: var(--lime);
  border-radius:999px;
  transition: width 1s ease;
}