* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-image: url('background2.png');
    background-size: cover; /* Ensures the entire image is visible within the viewport */
    background-position: center center; /* Centers the background image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    height: 100vh; /* Ensures body takes up the full viewport height */
    margin: 0; /* Prevents default body margin */
    position: relative;
}

.container {
    max-width: 100%;
    text-align: center;
    flex-grow: 1;
    position: relative;
    z-index: 1;
}

/* Social Icons */
.social-icons {
    position: absolute; /* Position it absolutely */
    top: 10px; /* Near the top of the page */
    left: 10px; /* Left-aligned */
    display: flex;
    gap: 20px; /* Space between icons */
    flex-direction: column; /* Stack the icons vertically */
    filter: invert(1) brightness(100%);
}
    
 

.social-icon img {
    width: 30px; /* Size of the icons */
    height: 30px;
}

/* Copyright Section */
.copyright {
    position: absolute;
    bottom: 20px; /* Near the bottom of the page */
    left: 50%; /* Centers horizontally */
    transform: translateX(-50%); /* Offsets by 50% of its width to fully center */
    font-family: 'Bebas Neue', sans-serif; /* Apply Bebas Neue font */
    font-size: 1.5rem; /* Increase font size for emphasis */
    color: rgba(255, 255, 255, 0.9); /* White color with slight opacity */
    text-align: center; /* Ensure the text is centered */
}

/* Left-side "IN CINEMAS" Text */
.in-cinemas {
    position: absolute;
    display:none;
    top: 50%; /* Vertically center */
    left: 200px; /* Align to the left side of the page */
    transform: translateY(-50%); /* Adjust for exact vertical centering */
    font-family: 'Bebas Neue', sans-serif; /* Apply Bebas Neue font */
    font-size: 3rem; /* Increase the font size */
    color: rgba(255, 255, 255, 0.9); /* White color with slight opacity */
    text-align: center; /* Center the text horizontally */
    padding-left: 20px; /* Add some padding from the left edge */
}


/* Centered "WATCH TRAILER" Text on the Right Side */
.watch-trailer {
    position: absolute;
    top: 50%; /* Vertically center */
    right: 260px; /* Align to the right side of the page */
    transform: translateY(-50%); /* Adjust for exact vertical centering */
    font-family: 'Bebas Neue', sans-serif; /* Apply Bebas Neue font */
    font-size: 3rem; /* Increase the font size */
    color: rgba(255, 255, 255, 0.9); /* White color with slight opacity */
    text-align: center; /* Center the text horizontally */
    padding-right: 20px; /* Add some padding from the right edge */
}


#whisperAudio {
    transition: volume 2s ease;
}


/* For tablets (iPad, landscape, etc.) */
@media (max-width: 1024px) {
    body {
        background-image: url('background2-mobile.png'); /* Mobile background image */
    }
    .watch-trailer {
        right: 250px;
    }
    .copyright {
        width: 100%;
        padding-left:10px;
    }
   
}

/* For smartphones (iPhone, portrait, etc.) */
@media (max-width: 768px) {
    body {
        background-image: url('background2-mobile.png'); /* Mobile background image */
    }

    .watch-trailer {
        right: 60px;
    }

    .copyright {
        width: 100%
    }
}