body h1 {
    box-sizing: border-box;
    max-width: 100%;
    padding: 18px 28px;
    border-radius: 30px;
    background: #eaf1ff;
    color: #002e7a !important;
    overflow-wrap: anywhere;
    line-height: 1.2;
    text-align: center;
}

body .about-section h1 {
    color: #002e7a !important;
}

body .hero .overlay-content h1 {
    display: block;
    padding: 12px 20px;
    margin-bottom: 8px;
}

body .interactive-lesson .hero h1 {
    display: flow-root;
}

@media (max-width: 768px) {
    body h1 {
        padding: 16px 18px;
        border-radius: 24px;
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    body :is(.learn, .container, .login-container) h1 {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    body .hero .overlay-content h1 {
        padding: 10px 14px;
        font-size: 1.2rem;
    }
}