.hl-text {
    color: var(--primary-color);
    background: none !important;
}

/* Hero tagline sits between H1 and the body paragraph — slightly larger, semibold. */
.hero-tagline {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--heading-color);
}

/* Mobile cleanup: hide decorative template shapes at small viewports
   so they don't compete with the actual content on phones. */
@media (max-width: 575px) {
    .dots-shape,
    .tringle-shape,
    .close-shape,
    .circle-shape,
    .left-circles,
    .right-circles,
    .header-left-shape,
    .header-right-shape,
    .newsletter-images .circle,
    .newsletter-images .dots {
        display: none !important;
    }
}

/* Hide the hero illustration and the about-section photo on small screens.
   They are visually redundant on mobile (the hero image duplicates the
   logo wordmark; the about photo has English text baked in) and they eat
   ~600px of vertical real estate above the fold. */
@media (max-width: 767px) {
    .hero-section .hero-image,
    .about-section .about-image {
        display: none;
    }
}