/* =========================================================
   SKILLS, QUALIFICATIONS AND TECHNOLOGIES
   Paste this at the very END of services.css
   ========================================================= */

.ex-head { max-width: 660px; margin-bottom: 36px; }
.ex-head h2 { margin-top: 2px; font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.ex-head p:not(.label) { margin-top: 10px; color: var(--muted); }
.ex-title { margin-bottom: 20px; font-size: 1.1rem; }

/* round or square icon used in skills and technology cards */
.skill-ic {
  display: grid; place-items: center; flex: none; width: 48px; height: 48px;
  border-radius: 13px; background: #1d63f0; color: #fff; font-size: 22px;
}
.skill-ic.blue   { background: #1d63f0; }
.skill-ic.green  { background: #10a36f; }
.skill-ic.purple { background: #7c4dff; }
.skill-ic.orange { background: #f59e0b; }
.skill-ic.red    { background: #e5484d; }
.skill-ic.teal   { background: #0e9f8e; }
.skill-ic.pink   { background: #d9469a; }

/* 1. skills */
.ex-skills { background: #fff; }
.skill-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.skill { padding: 24px; border: 1.5px solid var(--line); border-radius: 14px; background: #fff; }
.skill .skill-ic { margin-bottom: 18px; }
.skill h4 { font-size: 15.5px; }
.skill p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--muted); }

/* 2. qualifications band */
.cred-band { padding: 84px 0; background: var(--navy); color: #fff; }
.cred-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.cred-text h2 { margin-top: 2px; font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.cred-text > p:not(.label) { margin-top: 12px; max-width: 46ch; color: #b9c6e2; }
.cred-list { display: grid; gap: 14px; margin-top: 26px; }
.cred-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; color: #dbe4f6; }
.cred-check { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: rgba(127, 176, 255, 0.2); color: #7fb0ff; font-size: 11px; }
.cred-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cred-stats li { padding: 26px 24px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.05); }
.cred-stats strong { display: block; font-size: clamp(2rem, 3.4vw, 2.8rem); font-weight: 800; line-height: 1.1; }
.cred-stats span { display: block; margin-top: 6px; font-size: 13.5px; color: #b9c6e2; }

/* 3. technologies */
.ex-tech { background: var(--bg); }
.tech-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tech-group { padding: 28px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; }
.tech-head { display: flex; align-items: center; gap: 16px; }
.tech-head h4 { font-size: 17px; }
.tech-head p { margin-top: 2px; font-size: 13.5px; color: var(--muted); }
.tech-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.tech-chips li { padding: 7px 15px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 600; }

@media (max-width: 1000px) {
  .skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cred-band { padding: 60px 0; }
  .cred-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 680px) {
  .skill-grid, .tech-grid { grid-template-columns: minmax(0, 1fr); }
  .tech-group { padding: 22px; }
}