* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }

    body {
        background-color: #141414;
        color: white;
        overflow-x: hidden;
                font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    }
    a {
    text-decoration: none; /* Removes the underline */
    color: inherit;        /* Makes the link take the color of the surrounding text */
}

    /* Navbar Styling */
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 4%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, transparent 100%);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 100;
        transition: background 0.3s;
    }

    .nav-left, .nav-right {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .logo {
        color: #E50914;
        font-weight: bold;
        font-size: 1.4rem;
        letter-spacing: 1px;
    }

    .nav-links {
        display: flex;
        list-style: none;
        gap: 20px;
    }

    .nav-links a {
        color: #e5e5e5;
        text-decoration: none;
        font-size: 0.85rem;
        transition: color 0.3s;
    }

    .nav-links a:hover { color: #b3b3b3; }

    .nav-icon { font-size: 1.2rem; cursor: pointer; }

    .profile-icon img {
        width: 32px;
        height: 32px;
        border-radius: 4px;
    }

    .mobile-menu-btn {
    display: none !important; /* Forces it to be hidden on desktop */
    font-size: 1.5rem;
    cursor: pointer;
    color: white;
}

    /* Hero Section with Reduced Height */
    .hero-wrapper {
        position: relative;
        width: 100%;
        height: 85vh; /* Reduced height as requested */
        overflow: hidden;
    }

    .video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
    }

    .video-background video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .overlay-vignette {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(77deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 85%);
    }

    /* Content Overlay */
    .hero-content {
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        padding: 0 4%;
        max-width: 650px;
    }

    .hero-title {
        font-size: clamp(1.8rem, 5vw, 3rem);
        margin-bottom: 1rem;
        line-height: 1.1;
         text-align: left; 
    }

    .hero-description {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    line-height: 1.4;
    margin-bottom: 2rem;
    color: #efefef;

    /* Positioning and Line */
    text-align: left;           /* Ensures text starts from the left */
    border-left: 3px solid #e50914; /* Adds a "Netflix Red" line on the left */
    padding-left: 1.5rem;       /* Creates space between the line and text */
    max-width: 600px;           /* Prevents the text from stretching too wide */
    margin-left: 0;             /* Ensures it sticks to the left edge */
}

    /* Buttons */
    .button-group { display: flex; gap: 12px; }

    .btn {
        padding: 10px 24px;
        border-radius: 4px;
        text-decoration: none;
        font-weight: bold;
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 1rem;
        transition: 0.2s;
    }

    .btn-white { background: white; color: black; }
    .btn-white:hover { background: rgba(255,255,255,0.75); }

    .btn-grey { background: rgba(109, 109, 110, 0.7); color: white; }
    .btn-grey:hover { background: rgba(109, 109, 110, 0.5); }

    /* --- MOBILE RESPONSIVENESS --- */
    @media (max-width: 768px) {
        .nav-links { display: none; } /* Standard Netflix mobile behavior */
        
.mobile-menu-btn { 
        display: block !important; /* Shows it only on mobile/tablets */
        color: white;
        z-index: 101;
    }   
        .hero-wrapper {
            height: 70vh; /* Even shorter for small screens */
        }

        .hero-content {
            top: 60%;
            text-align: center;
            max-width: 100%;
        }

        .button-group {
            justify-content: center;
        }

        .btn {
            width: 100%; /* Full width buttons on mobile */
            justify-content: center;
        }

        .overlay-vignette {
            background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, rgba(0,0,0,0.2) 100%);
        }
    }

    /* --- MOBILE RESPONSIVENESS UPDATES --- */
    @media (max-width: 768px) {
        .mobile-menu-btn { 
            display: block; 
            color: white;
            z-index: 101; /* Stay above the menu */
        }

        

        /* Transform nav-links into a vertical drawer */
        .nav-links {
            display: none; /* Hidden by default */
            flex-direction: column;
            position: fixed;
            top: 0;
            right: 0;
            width: 60%; /* Take up 60% of screen width */
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.95);
            padding: 80px 20px;
            gap: 30px;
            z-index: 100;
            border-left: 1px solid #333;
        }

        /* This class will be added by JavaScript when clicked */
        .nav-links.active {
            display: flex;
        }

        .nav-links a {
            font-size: 1.2rem;
            width: 100%;
            text-align: left;
        }

        /* Optional: Hamburger icon animation/color change when active */
        .mobile-menu-btn.active {
            color: #E50914;
        }
    }

    /* --- NEW SECTION STYLES --- */

.content-section {
    padding: 40px 4%;
    /* Ensure it sits above the video background if necessary, 
       though default stacking usually works */
    position: relative; 
    z-index: 10; 
    margin-top: -100px; /* Pulls the section up to overlap the hero slightly like Netflix */
    background: linear-gradient(to bottom, transparent 0%, #141414 15%); /* Smooth transition */
}
.content-section-2 {
    padding: 80px 4%;
    /* Ensure it sits above the video background if necessary, 
       though default stacking usually works */
    position: relative; 
    z-index: 10; 
    margin-top: -100px; /* Pulls the section up to overlap the hero slightly like Netflix */
    background: linear-gradient(to bottom, transparent 0%, #141414 15%); /* Smooth transition */
}

.section-title {
    color: #e5e5e5;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 8px;
}

/* The container that allows horizontal scrolling */
/* Update your existing .card-slider class */
.card-slider {
    display: flex;
    gap: 15px; /* Slightly more gap for easier tapping */
    overflow-x: auto; 
    padding: 20px 4%; /* Added horizontal padding so cards don't touch screen edges */
    scroll-behavior: smooth;
    scrollbar-width: none; 
    -webkit-overflow-scrolling: touch; /* Smoother scrolling on iPhones */
    justify-content: flex-start; /* Default to start to prevent cutting off items */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.card-slider::-webkit-scrollbar {
    display: none;
}

/* Individual Movie Card */
.movie-card {
    position: relative;
    /* Flex-none prevents the card from shrinking */
    flex: none; 
    width: 250px;
    height: 140px;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.3s ease, z-index 0s ease 0.3s, box-shadow 0.3s ease;
    background-color: #2f2f2f; /* Placeholder color while loading */
}

.movie-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- Hover Effects --- */

/* When hovering over a card */
.movie-card:hover {
    transform: scale(1.3); /* Make it 30% bigger */
    /* z-index ensures it overlaps neighboring cards. 
       No delay on hover IN. */
    z-index: 100;
    transition-delay: 0s; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.7);
    border-radius: 6px; /* Keep border radius during scale */
}

/* The hidden details block */
.card-details {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 10px;
    /* Dark gradient overlay to make text readable */
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 60%, transparent 100%);
    color: white;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
    font-size: 0.8rem;
    max-height: 100%; /* Ensure it doesn't overflow the card boundaries */
    overflow: hidden;
}

/* Show details on hover */
.movie-card:hover .card-details {
    opacity: 1;
}

.card-details h3 {
    font-size: 1rem;
    margin-bottom: 5px;
}

.card-meta {
    display: flex;
    gap: 10px;
    font-size: 0.75rem;
    color: #bcbcbc;
    margin-bottom: 8px;
}

.match-score {
    color: #46d369; /* Netflix green color */
    font-weight: bold;
}

.card-details p {
    /* Limits description to 3 lines and adds ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}
/* Ensure the link doesn't change the card's appearance */
.movie-card:hover::after {
    content: '\f04b'; /* FontAwesome Play Icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    color: white;
    
    /* FIXES START HERE */
    z-index: 5; /* Lower than the details if you want text on top, higher if you want icon on top */
    pointer-events: none; /* This makes the click "fall through" the icon to the link below */
    opacity: 0.8;
}

/* Ensure the link itself is positioned to catch the click */
.movie-card a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 1; 
}

/* --- UPDATED MOBILE RESPONSIVENESS --- */
/* Add these additions inside your existing @media (max-width: 768px) block */
@media (min-width: 769px) {
    .card-slider {
        justify-content: center;
    }
}
@media (max-width: 768px) {
    /* ... your existing mobile styles for nav and hero ... */

    /* New additions for the card section on mobile */
    .content-section {
        margin-top: 0; /* Reset the negative margin on mobile */
        background: #141414; /* Solid background on mobile */
    }
    
    .section-title {
        font-size: 1.2rem; /* Smaller title on mobile */
    }

    .movie-card {
        /* Make cards smaller on mobile so more fit on screen */
        width: 160px;
        height: 90px;
    }
    .card-slider{
        margin-top: -30px;
    }

    /* Optional: On touch devices, the hover scaling can sometimes feel jerky. 
       You might want to reduce the scale effect on mobile, or rely purely 
       on the horizontal scrolling. 
       Uncomment below if you want to Tone down the hover on mobile: */
    /* .movie-card:hover {
        transform: scale(1.05); 
    } 
    */
    .section-title {
    color: #e5e5e5;
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}
}

/* Target only the slider inside section-2 on desktop */
@media (min-width: 769px) {
    .content-section-2 .card-slider {
        justify-content: flex-start !important; /* Forces alignment to the left */
    padding: 20px 4%;
    }
    .content-section .card-slider {
        justify-content: flex-start !important; /* Forces alignment to the left */
    padding: 20px 4%;
    }
}