.floating-nav{

    position:fixed;

    right:30px;
    top:50%;

    transform:translateY(-50%);

    display:flex;
    flex-direction:column;

    gap:20px;

    z-index:9999;
}

.floating-nav a{

    width:55px;
    height:55px;

    display:flex;

    justify-content:center;
    align-items:center;

    font-size:1.4rem;

    text-decoration:none;

    color:white;

    backdrop-filter:blur(10px);

    background:
    rgba(255,255,255,.08);

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

    border-radius:50%;

    transition:.3s;
}

.floating-nav a:hover{

    transform:scale(1.1);

    background:
    rgba(236,72,153,.3);
}

.movie-hero{
    height:100vh;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
}

.hero-content h1{

    font-size:5rem;
}


.hero-content p{

    font-size:2.3rem;

    margin:20px 0;
}

#watchTrailer{

    background:var(--secondary);

    border:none;

    color:white;

    padding:15px 35px;

    border-radius:40px;

    cursor:pointer;

    margin-top: 24px;
}

.event-info{

    padding:120px 10%;
}

/* --- UPDATED SYNOPSIS SECTION --- */

.event-description {
    max-width: 1000px; /* Widened slightly to accommodate larger font layout */
    margin: auto;
    text-align: center;
}

/* Make the "Synopsis" heading stand out */
.event-description h2 {
    font-size: 2.5rem;   /* Increased from default size to look prominent */
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 10px; /* Smooth spacing layout below heading */
}

/* Make the main description text paragraph larger */
.event-description p {
    font-size: 1.2rem;   /* Significantly larger, highly legible reading size */
    line-height: 1.6;    /* Adds clean line height separation between word lines */
    color: #cbd5e1;      /* Crisp light slate gray color that mimics cinema text styling */
}


.event-stats{

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:20px;

    margin-top:70px;
}

.info-card{

    background:#1E293B;

    padding:30px;

    text-align:center;

    border-radius:20px;
}

.gallery-preview{

    padding:100px 10%;

    text-align:center;
}

.gallery-grid{
    display:grid;
    grid-template-columns: repeat(4, 1fr);
    gap:15px;
    margin:50px 0;
}

.gallery-grid img{
    width:100%;
    aspect-ratio: 3 / 4;
    object-fit:cover;
    border-radius:12px;
    display:block;
    transition: transform .3s ease;
}

.gallery-grid img:hover{
    transform: scale(1.03);
}

/* --- FIXED MODAL STYLES --- */

.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .95);
    z-index: 9999;
}

.modal.active {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px; /* Prevents video from touching screen edges */
}

.modal-content {
    position: relative; /* Essential anchor for absolute positioning of close button */
    width: 100%;
    max-width: 420px;   /* Perfectly limits width for a vertical shorts video layout */
    margin: auto;
}

/* Style for the close button text element (×) */
.close-btn {
    position: absolute;
    top: -45px;         /* Floats the button directly above the video frame */
    right: 0;
    color: white;
    font-size: 2.5rem;  /* Large, easily clickable layout */
    cursor: pointer;
    font-weight: bold;
    line-height: 1;
    z-index: 10000;     /* Ensures it floats safely on top of everything */
    transition: color 0.2s ease;
}

.close-btn:hover {
    color: #ec4899;     /* Matches your pink hover theme accent color */
}

/* Remove fixed 600px heights to let the responsive wrapper control layout */
.modal-content iframe {
    width: 100%;
    height: 100%;
}


iframe{

    width:100%;

    height:600px;
}

.lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.95);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
}

.lightbox.active{
    display:flex;
}

.lightbox-img{
    max-width:90%;
    max-height:90%;
    border-radius:10px;
}

.lightbox .close{
    position:absolute;
    top:30px;
    right:40px;
    font-size:2rem;
    cursor:pointer;
    color:white;
}

@media(max-width:768px){

    .floating-nav{

        bottom:20px;

        top:auto;

        left:50%;

        right:auto;

        transform:translateX(-50%);

        flex-direction:row;

        padding:10px 20px;

        border-radius:50px;

        background:
        rgba(15,23,42,.8);

        backdrop-filter:blur(15px);
    }

    .gallery-grid{
        grid-template-columns: repeat(2, 1fr);
        gap:10px;
    }

    .gallery-grid img{
        aspect-ratio: 1 / 1;
    }

    .event-stats{
        grid-template-columns: repeat(2, 1fr);
    }

}