/* General Reset and Background Setup */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    background-image: url('BG.png');
    background-size: cover;
    background-position: center;
    font-family: Arial, sans-serif;
}

/* Container for Centering the Content */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    padding-top: 30px; /* Adds space at the top */
}

/* Header Image Style */
.header-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px; /* Adds space below the header */
}

/* Content Section Styling for Flexbox Layout */
.content {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align items at the top */
    flex-wrap: wrap;
    gap: 20px; /* Space between the poster/sticker and the video/download section */
}

/* Poster Sticker Image Style */
.poster-sticker {
    width: 100%;
    max-width: 300px; /* Adjust based on your image and layout preference */
    height: auto;
    order: 1; /* Ensures positioning on the left on larger screens */
}

/* Video and Download Section */
.video-download {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 560px;
    width: 100%;
    order: 2; /* Ensures this section is on the right on larger screens */
}

/* YouTube Iframe Style for 16:9 Aspect Ratio */
.video-download iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Maintains 16:9 aspect ratio */
}

/* Download Image Style */
.download {
    width: 100%;
    max-width: 560px;
    height: auto;
    margin-top: 20px; /* Adds space above the download image */
}

/* Buttons Container */
.buttons {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 20px; /* Adds space above the buttons */
}

/* Button Links Style */
.buttons a {
    flex: 1;
    display: block;
    margin: 0 5px; /* Adjusts gap between buttons */
}

/* Button Images Style */
.buttons img {
    width: 100%;
    height: auto;
}

/* Responsiveness for Smaller Screens */
@media (max-width: 768px) {
    .content {
        flex-direction: column;
        align-items: center;
    }

    .poster-sticker, .video-download {
        max-width: 90%;
        order: 0; /* Resets the order to stack naturally */
    }

    .buttons a {
        margin: 0 2px; /* Adjusts for smaller gap on smaller screens */
    }
}