.elementor-514 .elementor-element.elementor-element-b3a1f33{--display:flex;}.elementor-514 .elementor-element.elementor-element-799f197{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}:root{--page-title-display:none;}/* Start custom CSS for shortcode, class: .elementor-element-6f2c3df *//* =========================================
   CINEMA ARCHIVE
========================================= */

.cinema-archive{
    background:#050505;
    min-height:100vh;
    padding-bottom:120px;
}

/* =========================================
   HERO
========================================= */

.cinema-hero{
    position:relative;
    height:75vh;
    overflow:hidden;
}

.cinema-hero img{
    width:100%;
    height:100%;
    object-fit:cover;

    filter:
        brightness(.45)
        contrast(1.05);
}

.cinema-hero-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            #050505 5%,
            rgba(0,0,0,.3) 45%,
            rgba(0,0,0,.2) 100%
        );

    z-index:1;
}

.cinema-hero-content{
    position:absolute;
    left:90px;
    bottom:90px;

    z-index:2;

    max-width:700px;
}

.cinema-label{
    display:inline-flex;
    align-items:center;
    gap:10px;

    color:#d4af37;

    font-size:12px;
    font-weight:800;

    letter-spacing:3px;

    margin-bottom:22px;
}

.cinema-label::before{
    content:'';

    width:40px;
    height:1px;

    background:#d4af37;
}

.cinema-hero-content h1{
    color:#fff;

    font-size:90px;
    line-height:.9;

    margin:0;

    font-weight:900;

    letter-spacing:-5px;

    text-transform:uppercase;
}

.cinema-hero-content p{
    margin-top:22px;

    color:#b1b1b1;

    font-size:18px;

    line-height:1.8;
}

/* =========================================
   FILTERS
========================================= */

.cinema-filters{
    display:flex;
    gap:14px;

    padding:
        60px
        90px
        40px;
}

.cinema-filters button{

    height:48px;

    padding:0 28px;

    border-radius:999px;

    border:none;

    cursor:pointer;

    background:#121212;

    color:#fff;

    font-size:13px;
    font-weight:700;

    letter-spacing:1px;

    transition:all .35s ease;
}

.cinema-filters button:hover{
    background:#1d1d1d;
}

.cinema-filters button.active{

    background:#d4af37;

    color:#000;
}

/* =========================================
   GRID
========================================= */

.cinema-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fill, minmax(260px,1fr));

    gap:26px;

    padding:0 90px;
}

/* =========================================
   CARD
========================================= */

.cinema-grid-card{

    position:relative;

    height:420px;

    border-radius:18px;

    overflow:hidden;

    text-decoration:none;

    background:#111;

    transition:
        transform .5s ease,
        box-shadow .5s ease;

    box-shadow:
        0 20px 50px rgba(0,0,0,.45);
}

.cinema-grid-card img{

    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .8s ease,
        filter .5s ease;
}

/* OVERLAY */

.grid-overlay{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.95) 10%,
            rgba(0,0,0,.4) 45%,
            rgba(0,0,0,.05) 100%
        );
}

/* CONTENT */

.grid-content{

    position:absolute;

    left:22px;
    right:22px;
    bottom:22px;

    z-index:2;
}

.grid-category{

    display:inline-flex;

    padding:8px 14px;

    border-radius:999px;

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

    backdrop-filter:blur(10px);

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

    color:#fff;

    font-size:10px;
    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;
}

.grid-content h3{

    margin:0;

    color:#fff;

    font-size:32px;

    line-height:.95;

    font-weight:900;

    letter-spacing:-1.5px;

    text-transform:uppercase;
}

/* HOVER */

.cinema-grid-card:hover{

    transform:
        translateY(-12px);

    box-shadow:
        0 40px 100px rgba(0,0,0,.9);
}

.cinema-grid-card:hover img{

    transform:scale(1.05);

    filter:
        brightness(.72)
        contrast(1.05);
}

/* =========================================
   RESPONSIVE
========================================= */

@media(max-width:768px){

    .cinema-hero{
        height:60vh;
    }

    .cinema-hero-content{
        left:20px;
        right:20px;
        bottom:40px;
    }

    .cinema-hero-content h1{
        font-size:32px;
        letter-spacing:-2px;
    }

    .cinema-hero-content p{
        font-size:15px;
    }

    .cinema-filters{
        padding:
            30px
        0px
            30px;

        overflow-x:auto;
    }

    .cinema-grid{

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

        gap:14px;

        padding:0 20px;
    }

    .cinema-grid-card{
        height:280px;
    }

    .grid-content h3{
        font-size:20px;
    }

}/* End custom CSS */