/* ============================================================
   expertise.css — Our Expertise Section
   ============================================================ */

#expertise {
  background-color: var(--background);
}

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
}

.expertise-card {
  padding: 2.25rem;
  border-radius: 18px;
  cursor: default;
  transition: all 0.35s ease;
}

.expertise-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}

html.light .expertise-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.expertise-icon {
  font-size: 36px;
  margin-bottom: 1.5rem;
  display: block;
  color: var(--secondary-container);
}

html.light .expertise-icon {
  color: var(--primary-container);
}

.expertise-card h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: var(--on-surface);
  margin-bottom: 0.75rem;
}

.expertise-card p {
  font-size: 15px;
  color: var(--on-surface-variant);
  line-height: 1.65;
}