/* ===== Section Styling ===== */
.section {
  /* No default padding - sections control their own spacing */
}

.section-title {
  margin-bottom: 3rem;
}

.section-heading {
  font-size: 2.5rem;
  font-weight: var(--font-weight-bold);
  margin-bottom: 1rem;
  color: var(--color-primary);
  position: relative;
  display: inline-block;
}

.section-heading::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background-color: var(--color-primary);
  border-radius: 3px;
}

.section-subheading {
  font-size: 1.25rem;
  color: var(--color-text-light);
  max-width: 800px;
  margin: 1rem auto 0;
}

.section.bg-light {
  background-color: var(--color-bg-light);
}

.section.bg-dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-white);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .section {
    padding: 0;
  }
  
  .section-heading {
    font-size: 2rem;
  }
  
  .section-subheading {
    font-size: 1.1rem;
  }
}