@media (max-width: 768px) {
  .hero-text {
    font-size: 1.2em; /* Adjust size for readability */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 10px; /* Reduce excess padding if needed */
    text-align: center; /* Keep layout neat */
  }
}