Custom styles for the hero section
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1000px;
    width: 100%;
    padding: 0 20px;
    
    display: flex;               /* flex to align inner content */
    flex-direction: column;      /* stack h1, p, buttons vertically */
    justify-content: center; 
    text-align: center;          /* center text content */
    align-items: center;         /* horizontal centering */
    height: 90%;                /* important: fills the hero height */
}
#hero-video {
    display: none; /* Hide the video element */
}