/** Shopify CDN: Minification failed

Line 13:0 Unexpected "<"
Line 350:8 Comments in CSS use "/* ... */" instead of "//"
Line 350:66 Unterminated string token
Line 355:12 Comments in CSS use "/* ... */" instead of "//"
Line 360:12 Comments in CSS use "/* ... */" instead of "//"
Line 366:20 Comments in CSS use "/* ... */" instead of "//"
Line 371:4 Unexpected "<"
Line 373:7 Expected "}" to go with "{"

**/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Video Banner</title>
    <style>
        /* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            line-height: 1.5;
        }

        /* Banner container */
        .banner {
            display: flex;
            position: relative;
            flex-direction: column;
            z-index: auto;
            isolation: isolate;
            overflow: hidden;
            width: 100%;
        }

        /* Video container */
        .banner__media {
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
        }

        /* Video element */
        .banner__media video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Content container - FIXED FOR CENTER ALIGNMENT */
        .banner__content {
            padding: 0;
            display: flex;
            position: relative;
            width: 100%;
            align-items: center;
            justify-content: center;
            z-index: 2;
            text-align: center;
            height: 100%;
        }

        /* Content box - IMPROVED FOR CENTER ALIGNMENT */
        .banner__box {
            padding: 2rem 1.5rem;
            position: relative;
            height: fit-content;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            max-width: 1200px;
            word-wrap: break-word;
            z-index: 1;
            background-color: rgba(255, 255, 255, 0.8);
            margin: 1rem auto;
            border-radius: 8px;
        }

        /* Content container improvements */
        .content-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            width: 100%;
            margin: 0 auto;
        }

        /* Heading styles - CENTERED */
        .banner__heading {
            font-size: 2.5rem;
            margin: 0 auto 1rem auto;
            color: #333;
            text-align: center;
            width: 100%;
        }

        /* Text styles - CENTERED */
        .banner__text {
            font-size: 1.2rem;
            margin: 0 auto 1.5rem auto;
            color: #555;
            text-align: center;
            width: 100%;
        }

        .banner__text p {
            text-align: center;
            margin: 0 auto;
        }

        /* Button container - PERFECTLY CENTERED */
        .banner__buttons {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            justify-content: center;
            align-items: center;
            text-align: center;
            width: 100%;
            margin: 0 auto;
        }

        /* Button styles - CENTERED */
        .button {
            padding: 0.8rem 1.5rem;
            font-size: 2rem;
            font-weight: 600;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: all 0.3s ease;
        }




        .button--secondary:hover {
            background-color: #007bff;
            color: white;
        }

        /* Content alignment classes - ENHANCED */
        .banner--content-align-center .banner__content,
        .banner--content-align-center .content-container,
        .banner--content-align-center .banner__box,
        .banner--content-align-center .banner__heading,
        .banner--content-align-center .banner__text,
        .banner--content-align-center .banner__buttons {
            text-align: center;
            justify-content: center;
            align-items: center;
        }

        .banner--content-align-left .banner__box {
            text-align: left;
            align-items: flex-start;
        }

        .banner--content-align-right .banner__box {
            text-align: right;
            align-items: flex-end;
        }

        /* Content position classes */
        .banner__content--middle-center {
            align-items: center;
            justify-content: center;
        }

        .banner__content--middle-left {
            align-items: center;
            justify-content: flex-start;
        }

        .banner__content--middle-right {
            align-items: center;
            justify-content: flex-end;
        }

        .banner__content--top-center {
            align-items: flex-start;
            justify-content: center;
        }

        .banner__content--top-left {
            align-items: flex-start;
            justify-content: flex-start;
        }

        .banner__content--top-right {
            align-items: flex-start;
            justify-content: flex-end;
        }

        .banner__content--bottom-center {
            align-items: flex-end;
            justify-content: center;
        }

        .banner__content--bottom-left {
            align-items: flex-end;
            justify-content: flex-start;
        }

        .banner__content--bottom-right {
            align-items: flex-end;
            justify-content: flex-end;
        }

        /* Responsive design */
        /* Mobile devices - IMPROVED CENTER ALIGNMENT */
        @media screen and (max-width: 749px) {
            .banner {
                min-height: 70vh;
            }
            
            .banner__box {
                padding: 1.5rem 1rem;
                margin: 0.5rem auto;
            }
            
            .banner__heading {
                font-size: 1.8rem;
                text-align: center;
            }
            
            .banner__text {
                font-size: 1rem;
                text-align: center;
            }
            
            .button {
                padding: 0.7rem 1.2rem;
                font-size: 0.9rem;
                text-align: center;
            }
            
            .banner__buttons {
                flex-direction: column;
            
            .banner__buttons a {
                width: 100%;
                max-width: 300px;
                text-align: center;
            }

            /* Mobile center alignment override */
            .banner--content-align-mobile-center .banner__content,
            .banner--content-align-mobile-center .content-container,
            .banner--content-align-mobile-center .banner__box,
            .banner--content-align-mobile-center .banner__heading,
            .banner--content-align-mobile-center .banner__text,
            .banner--content-align-mobile-center .banner__buttons {
                text-align: center;
                justify-content: center;
                align-items: center;
            }
        }

        /* Tablet devices */
        @media screen and (min-width: 750px) and (max-width: 1024px) {
            .banner {
                min-height: 60vh;
            }
            
            .banner__box {
                padding: 3rem 2rem;
            }
            
            .banner__heading {
                font-size: 2.2rem;
                text-align: center;
            }
        }

        /* Desktop devices */
        @media screen and (min-width: 1025px) {
            .banner {
                min-height: 80vh;
            }
            
            .banner__box {
                padding: 4rem 3rem;
            }
            
            .banner__heading {
                font-size: 3rem;
                text-align: center;
            }
            
            .banner__text {
                font-size: 1.4rem;
                text-align: center;
            }
        }

        /* Fallback for browsers that don't support video autoplay */
        .no-video .banner__media {
            background: url('https://placehold.co/1920x1080') no-repeat center center/cover;
        }
    </style>
</head>
<body>
    <div id="Banner-video" class="banner video-background banner--content-align-center banner--content-align-mobile-center banner banner--mobile-bottom">
        <div class="banner__media media video-background">  
            <video autoplay muted loop playsinline id="myVideo">
                <source src="https://cdn.coverr.co/videos/coverr-a-pier-over-the-water-8552/1080p.mp4" type="video/mp4">
                Your browser does not support HTML5 video.
            </video>
        </div>

        <div class="banner__content banner__content--middle-center page-width">
            <div class="banner__box content-container content-container--full-width-mobile color-scheme-1 gradient">
                <h2 class="banner__heading inline-richtext h1">
                    Discover Amazing Products
                </h2>
                <div class="banner__text rte body">
                    <p>Explore our collection of premium items designed to enhance your lifestyle and bring joy to your everyday routine.</p>
                </div>
                <div class="banner__buttons banner__buttons--multiple">
                    <a href="#shop-now" class="button button--primary">
                        Shop Now
                    </a>
                    <a href="#learn-more" class="button button--secondary">
                        Learn More
                    </a>
                </div>
            </div>
        </div>
    </div>

    <script>
        // Fallback for browsers that don't support video autoplay
        document.addEventListener('DOMContentLoaded', function() {
            const video = document.getElementById('myVideo');
            const banner = document.getElementById('Banner-video');
            
            // Check if video can play
            video.addEventListener('error', function() {
                banner.classList.add('no-video');
            });
            
            // Check if video is playing (for autoplay restrictions)
            const isPlaying = video.currentTime > 0 && !video.paused && !video.ended 
                && video.readyState > video.HAVE_CURRENT_DATA;
                
            if (!isPlaying) {
                video.play().catch(function() {
                    // If autoplay fails, show fallback
                    banner.classList.add('no-video');
                });
            }
        });
    </script>
</body>
</html>