/* Explain: Responsive layout helpers and scroll margin adjustments. */
#about,
#services,
#contact {
    scroll-margin-top: 5.5rem;
}

.hero-heading {
    text-wrap: balance;
}

@media (max-width: 640px) {
    .hero-heading {
        text-wrap: pretty;
    }
}