:root {

            --gold: #D4AF37;

            --white: #ffffff;

        }



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



        body {

            background:

                linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(104, 62, 0, 0.9) 100%),

                url('../assets/images/3kbest/1 (8).JPG');

            background-size: cover;

            background-position: center;

            background-attachment: fixed;

            font-family: 'Poppins', sans-serif;

            color: var(--white);

            height: 100vh;

            overflow: hidden;

            display: flex;

            align-items: center;

            justify-content: center;

        }



        .main-container {

            width: 90vw;

            height: 85vh;

            background: rgba(0, 0, 0, 0.4);

            border-radius: 20px;

            position: relative;

            padding: 60px;

            backdrop-filter: blur(15px);

            border: 1px solid rgba(255, 255, 255, 0.1);

            z-index: 10;

            display: flex;

            align-items: center;

        }



        .movie-content {

            z-index: 10;

            position: relative;

        }



        .movie-title {

            font-family: 'Oswald', sans-serif;

            font-size: clamp(2.5rem, 8vw, 5rem);

            text-transform: uppercase;

            line-height: 1;

            margin: 10px 0;

            color: var(--gold);

        }



        .description {

            opacity: 0.8;

            font-size: 1.1rem;

            max-width: 500px;

            margin-bottom: 30px;

            line-height: 1.6;

        }



        .btn-trailer {

            background: var(--white);

            color: black;

            border: none;

            padding: 15px 40px;

            border-radius: 30px;

            font-weight: bold;

            cursor: pointer;

            text-decoration: none;

            display: inline-block;

            transition: 0.3s;

            text-transform: uppercase;

            letter-spacing: 1px;

        }



        .btn-trailer:hover {

            background: var(--gold);

            transform: scale(1.05);

        }



        .image-container {

            position: absolute;

            right: 0;

            bottom: 0;

            height: 100%;

            width: 50%;

            display: flex;

            align-items: flex-end;

            justify-content: flex-end;

            pointer-events: none;

            z-index: 5;

        }



        .img-portrait-side {

            height: 110%;

            width: auto;

            object-fit: contain;

            mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0));

            -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 70%, rgba(0,0,0,0));

        }



        @media (max-width: 768px) {

            .image-container { width: 100%; opacity: 0.4; }

            .main-container { padding: 30px; justify-content: center; text-align: center; }

            .movie-title { font-size: 3rem; }

        }



        @keyframes fadeIn {

            from { opacity: 0; transform: translateY(20px); }

            to { opacity: 1; transform: translateY(0); }

        }



        .movie-content { animation: fadeIn 0.8s ease-out; }