.hero {
    background-image: linear-gradient(to bottom, rgba(18, 6, 7, 0.7), rgba(18, 6, 7, 0.8)), url('../Images/Logo in page.png') !important;
    background-image: linear-gradient(to bottom, rgba(18, 6, 7, 0.7), rgba(18, 6, 7, 0.8)), 
        image-set(
            url('../Images/optimized/Logo-in-page-1920.avif') type('image/avif'),
            url('../Images/optimized/Logo-in-page-1920.webp') type('image/webp'),
            url('../Images/Logo in page.png') type('image/png')
        ) !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* Responsive background for mobile */
@media (max-width: 600px) {
    .hero {
        background-image: linear-gradient(to bottom, rgba(18, 6, 7, 0.7), rgba(18, 6, 7, 0.8)), 
            image-set(
                url('../Images/optimized/Logo-in-page-480.avif') type('image/avif'),
                url('../Images/optimized/Logo-in-page-480.webp') type('image/webp'),
                url('../Images/Logo in page.png') type('image/png')
            ) !important;
    }
}

/* Ensure content is above the background and readable */
.hero h1, .hero p, .hero .cta-group {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .hero {
        background-position: center;
    }
}