/* Mobile Background with Dark Overlay for Homepage */
@media (max-width: 768px) {
    .hero {
        background-image: url('https://i.imgur.com/6F4M1rF.jpeg') !important;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        position: relative;
    }
    
    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5); /* Dark overlay effect */
        z-index: 1;
    }
    
    [data-theme="dark"] .hero {
        background-image: url('https://i.imgur.com/6F4M1rF.jpeg') !important;
    }
    
    [data-theme="dark"] .hero::before {
        background: rgba(0, 0, 0, 0.6); /* Darker overlay for dark theme */
    }
    
    /* Ensure content is above the overlay */
    .hero-content {
        position: relative;
        z-index: 2;
    }
    
    /* Hide the clock background on mobile devices */
    .title-clock-container {
        display: none;
    }
}