.hero {
    position: relative;
    color: #fff;
    background-attachment: fixed;
}

.hero::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5); /* Adds a dark overlay for text contrast */
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2; /* Ensures content is above the overlay */
}

.shadow-text {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.7); /* Adds a black shadow to make the text more legible */
}