/*
  Section component styles.
  Use for spacing, section headings, badges, and CTA blocks.
*/

.section {
  padding: var(--space-20) var(--space-0);
}

.section-sm {
  padding: var(--space-12) var(--space-0);
}

.section-heading {
  max-width: var(--container-md);
  margin-bottom: var(--space-10);
}

.eyebrow,
.section-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  color:white;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.cta-block {
  padding: var(--space-12);
  color: var(--color-white);
  background-color: var(--color-primary);
  border-radius: var(--radius-lg);
}

.cta-block h2,
.cta-block p {
  color: var(--color-white);
}