#trailer {

    position:relative;
    overflow:hidden;

    border-radius:20px;

    cursor:pointer;

    padding-bottom:56.25%;

    width:100%;

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

    background-size:cover;
    background-repeat:no-repeat;
    background-position:center center;

    box-shadow:
        0 12px 35px rgba(0,0,0,0.55),
        0 0 25px rgba(110,255,145,0.18);

    transition:all ease 0.35s;

}


#trailer::after {

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.05),
            rgba(0,0,0,0.45)
        );

    z-index:2;

    pointer-events:none;

}



#trailer:hover {

    border-color:rgba(160,255,185,.75);

    background-size:110%;

    box-shadow:

        0 15px 45px rgba(0,0,0,0.65),
        0 0 40px rgba(110,255,145,0.35);

    transform:translateY(-3px);

}



/*
 Featured Video Play Button
*/


#trailer .btn-container {

    position:absolute;

    inset:0;

    display:flex;

    z-index:10;

    align-items:center;

    justify-content:center;

}



#trailer .btn-play {

    position:relative;

    z-index:20;

    width:68px;

    height:68px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;


    background:
        rgba(10,15,30,.65);


    border:
        2px solid rgba(255,255,255,.35);


    box-shadow:

        0 0 20px rgba(110,255,145,.45),

        inset 0 0 15px rgba(255,255,255,.08);


    backdrop-filter:blur(5px);


    transition:

        transform .3s ease,

        box-shadow .3s ease;

}



#trailer .btn-play::before {

    content:"";

    position:absolute;

    inset:-14px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(110,255,145,.35),
            transparent 70%
        );

    z-index:-1;

}



#trailer:hover .btn-play {

    transform:scale(1.12);

    box-shadow:

        0 0 35px rgba(110,255,145,.75),

        inset 0 0 20px rgba(255,255,255,.15);

}


#trailer .btn-play .icon {

    position:relative;

    z-index:5;

    transform:translateX(-3px);

    color:#ffffff;

    font-size:30px;

    line-height:1;

    text-shadow:

        0 0 10px rgba(255,255,255,.8);

}

#trailer .btn-play .circle {

    display:none;

}



/*
 Featured Video Header
*/


.trailer-heading {

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:20px;

}



.trailer-icon {

    width:44px;

    height:44px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;


    background:

        linear-gradient(
            145deg,
            rgba(110,255,145,.35),
            rgba(10,10,15,.9)
        );


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


    color:#f0fff5;

    font-size:22px;


    box-shadow:

        0 0 18px rgba(110,255,145,.45);

}



.trailer-title {

    margin:0;

    font-size:2rem;

    font-weight:900;

    letter-spacing:1.5px;

    text-transform:none;

    color:#f0fff5;


    margin-top:0;

    margin-bottom:12px;


    text-shadow:

        0 0 8px rgba(215,221,255,.75),

        0 0 20px rgba(110,255,145,.55),

        0 0 35px rgba(110,255,145,.35);

}



.trailer-title::after {

    content:"";

    display:block;

    width:85px;

    height:3px;

    margin-top:8px;

    border-radius:10px;


    background:

        linear-gradient(
            90deg,
            #f0fff5,
            #6dff96,
            transparent
        );


    box-shadow:

        0 0 12px rgba(110,255,145,.8);

}



/*
 Video Wrapper
*/


.trailer-wrapper {

    position:relative;

    margin-bottom:10px;

    padding:15px 25px 25px;


    border-radius:22px;


    background:

        linear-gradient(
            145deg,
            rgba(35,75,45,.85),
            rgba(5,28,14,.95)
        );


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


    box-shadow:

        0 0 30px rgba(0,0,0,.55),

        0 0 45px rgba(110,255,145,.18);


    overflow:hidden;


    transition:all ease .35s;

}



.trailer-wrapper::before {

    content:"";

    position:absolute;

    inset:0;


    background:

        radial-gradient(
            circle at top center,
            rgba(110,255,145,.20),
            transparent 55%
        );


    pointer-events:none;

}

.trailer-wrapper:hover {

    transform:none;

    box-shadow:

        0 15px 45px rgba(0,0,0,.65),

        0 0 55px rgba(110,255,145,.35);

}

.trailer-wrapper .col-12 {

    position:relative;

    z-index:2;

}



/*
 YouTube Modal
*/


.modal-video-movie-wrap {

    background:var(--gradient-1);

    border-radius:15px;

}



.modal-video-movie-wrap iframe {

    overflow:hidden;

    border-radius:15px;

}