.article img {
  /* max-width: 100%; */
}

/* Tutoring site banner */

.tutoring-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #f0fdf9 0%, #eff6ff 100%);
  border: 1px solid #14B8A6;
  border-left: 4px solid #14B8A6;
  border-radius: 4px;
  padding: 0.85rem 1.25rem;
  margin-bottom: 2rem;
  text-decoration: none !important;
  color: #1a6b64 !important;
  font-family: var(--main-sans-font), Helvetica, Arial, sans-serif;
  font-size: 15px;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.tutoring-banner:hover {
  background: linear-gradient(135deg, #d9faf4 0%, #dbeafe 100%);
  box-shadow: 0 2px 8px rgba(20, 184, 166, 0.2);
  color: #14B8A6 !important;
  text-decoration: none !important;
}

.tutoring-banner .fa {
  font-size: 1.3rem;
  color: #14B8A6;
  flex-shrink: 0;
}

.tutoring-banner-text {
  font-size: 15px;
  font-weight: 500;
}

/* Skills grid on homepage */

.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  margin-top: 2.5rem;
  justify-content: center;
  text-align: center;
}

.skill-card {
  flex: 1 1 calc(50% - 0.6rem);
  max-width: calc(50% - 0.6rem);
  text-align: center;
  padding: 1.75rem 1.25rem 1.5rem;
  border: 1px solid rgba(0,0,0,0.08);
  border-top: 4px solid var(--card-accent, #aaa);
  border-radius: 3px;
  background: #ffffff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.skill-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
  transform: translateY(-2px);
}

/* Complementary palette — each card gets its own accent */
.skill-card:nth-child(1) { --card-accent: #14B8A6; } /* teal        – Data & Analytics     */
.skill-card:nth-child(2) { --card-accent: #6366F1; } /* indigo      – BI & Visualisation    */
.skill-card:nth-child(3) { --card-accent: #0EA5E9; } /* sky         – Computational         */
.skill-card:nth-child(4) { --card-accent: #F59E0B; } /* amber       – Research & HF         */
.skill-card:nth-child(5) { --card-accent: #10B981; } /* emerald     – Training              */
.skill-card:nth-child(6) { --card-accent: #8B5CF6; } /* violet      – Software & Digital    */

.skill-icon {
  font-size: 2.4rem;
  color: var(--card-accent, #aaa);
  margin-bottom: 0.75rem;
  display: block;
}

.skill-title {
  font-family: var(--main-sans-font), Helvetica, Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  margin: 0 0 0.5rem !important;
  color: #383838 !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

.skill-card p {
  font-size: 16px !important;
  font-family: var(--main-sans-font), Helvetica, Arial, sans-serif !important;
  color: #555 !important;
  margin: 0 !important;
  line-height: 1.6 !important;
}