#heroTitle {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin: 20px auto;
    max-width: 600px; /* Limit text width */
    user-select:none ;
}

#dynamicMessage {
    display: inline-block;
    opacity: 0; /* Start invisible */
    transition: opacity 1s ease-in-out; /* Smooth fade */
}

/* Ensure visibility during the fade effect */
#dynamicMessage.visible {
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    #heroTitle {
        font-size: 2rem;
    }
}

@media (max-width: 480px) {
    #heroTitle {
        font-size: 1.8rem;
    }
}