*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
background:#070707;
color:white;
font-family:Poppins,sans-serif;
overflow-x:hidden;
}

body.search-open{
overflow:hidden;
}

button,
input{
font-family:inherit;
}


/* =========================
   LOADER
========================= */

.page-loader{
position:fixed;
inset:0;
z-index:99999;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at center,#191919 0%,#080808 52%,#020202 100%);
transition:opacity .65s ease,visibility .65s ease;
}

.page-loader.hidden{
opacity:0;
visibility:hidden;
pointer-events:none;
}

.loader-glow{
position:absolute;
width:420px;
height:420px;
border-radius:50%;
background:rgba(229,9,20,.17);
filter:blur(90px);
animation:glowPulse 2s ease-in-out infinite;
}

.loader-content{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
gap:22px;
}

.loader-logo{
font-size:58px;
font-weight:800;
letter-spacing:-3px;
animation:logoEntrance .8s ease both;
}

.loader-logo span{
color:#e50914;
text-shadow:
0 0 20px rgba(229,9,20,.6),
0 0 50px rgba(229,9,20,.35);
}

.loader-line{
width:280px;
height:4px;
overflow:hidden;
border-radius:999px;
background:rgba(255,255,255,.1);
}

.loader-line div{
width:40%;
height:100%;
background:linear-gradient(
90deg,
transparent,
#e50914,
#ff5961,
#e50914,
transparent
);
animation:loadingLine 1.25s ease-in-out infinite;
}

.loader-content p{
margin:0;
color:#888;
font-size:12px;
letter-spacing:3px;
text-transform:uppercase;
}

@keyframes loadingLine{

0%{
transform:translateX(-130%);
}

100%{
transform:translateX(350%);
}

}

@keyframes glowPulse{

0%,
100%{
opacity:.5;
transform:scale(.9);
}

50%{
opacity:1;
transform:scale(1.15);
}

}

@keyframes logoEntrance{

from{
opacity:0;
transform:translateY(20px) scale(.85);
filter:blur(8px);
}

to{
opacity:1;
transform:none;
filter:blur(0);
}

}


/* =========================
   HEADER
========================= */

.header{
position:fixed;
top:0;
left:0;
right:0;
z-index:1000;
height:82px;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 5%;
background:linear-gradient(
to bottom,
rgba(0,0,0,.92),
rgba(0,0,0,.35),
transparent
);
transition:
background .3s ease,
backdrop-filter .3s ease,
height .3s ease;
}

.header.scrolled{
height:70px;
background:rgba(8,8,8,.86);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(255,255,255,.08);
}

.logo{
color:white;
font-size:29px;
font-weight:800;
letter-spacing:-1.5px;
text-decoration:none;
}

.logo span{
color:#e50914;
}

.header nav{
display:flex;
align-items:center;
gap:32px;
}

.header nav a{
position:relative;
color:#d1d1d1;
font-size:14px;
font-weight:500;
text-decoration:none;
transition:.25s;
}

.header nav a:hover{
color:white;
}

.header nav a::after{
content:"";
position:absolute;
left:0;
bottom:-8px;
width:0;
height:2px;
border-radius:5px;
background:#e50914;
transition:.25s;
}

.header nav a:hover::after{
width:100%;
}

.header-actions{
display:flex;
align-items:center;
gap:14px;
}

.icon-button,
.mobile-menu-button{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
padding:0;
border:1px solid rgba(255,255,255,.13);
border-radius:50%;
background:rgba(255,255,255,.07);
color:white;
font-size:17px;
cursor:pointer;
transition:.25s;
}

.icon-button:hover,
.mobile-menu-button:hover{
background:#e50914;
border-color:#e50914;
transform:scale(1.08);
}

.mobile-menu-button{
display:none;
}


/* =========================
   MOBILE MENU
========================= */

.mobile-menu{
position:fixed;
top:70px;
left:15px;
right:15px;
z-index:999;
display:none;
flex-direction:column;
padding:18px;
border:1px solid rgba(255,255,255,.1);
border-radius:16px;
background:rgba(15,15,15,.96);
backdrop-filter:blur(18px);
box-shadow:0 25px 70px rgba(0,0,0,.7);
}

.mobile-menu.active{
display:flex;
}

.mobile-menu a{
padding:15px;
color:white;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,.07);
}

.mobile-menu a:last-child{
border-bottom:none;
}


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

.hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
padding:120px 7% 80px;
overflow:hidden;
}

.hero-background{
position:absolute;
inset:0;
background-size:cover;
background-position:center;
transform:scale(1.04);
transition:background-image .45s ease;
animation:heroZoom 14s ease-in-out infinite alternate;
}

.hero-overlay{
position:absolute;
inset:0;
background:
linear-gradient(
90deg,
rgba(0,0,0,.97) 0%,
rgba(0,0,0,.78) 35%,
rgba(0,0,0,.22) 72%
),
linear-gradient(
to top,
#070707 0%,
transparent 45%
);
}

.hero-content{
position:relative;
z-index:2;
width:min(720px,100%);
animation:heroContentIn .85s ease both;
}

.hero-label{
display:inline-block;
margin-bottom:18px;
color:#ff3039;
font-size:13px;
font-weight:700;
letter-spacing:4px;
}

.hero h1{
margin:0 0 20px;
font-size:clamp(50px,7vw,92px);
line-height:.98;
letter-spacing:-4px;
text-shadow:0 8px 35px rgba(0,0,0,.85);
}

.hero-meta{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:12px;
margin-bottom:22px;
color:#d2d2d2;
font-size:14px;
font-weight:500;
}

.hero-meta > span:not(:last-child)::after{
content:"•";
margin-left:12px;
color:#666;
}

.quality-badge{
padding:5px 9px;
border:1px solid rgba(255,255,255,.4);
border-radius:5px;
font-size:11px;
letter-spacing:1px;
}

.quality-badge::after{
display:none;
}

#heroDescription{
max-width:650px;
margin:0 0 33px;
color:#c8c8c8;
font-size:17px;
line-height:1.75;
}

.hero-buttons{
display:flex;
flex-wrap:wrap;
gap:14px;
}

.primary-button,
.secondary-button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:53px;
padding:0 28px;
border-radius:10px;
color:white;
font-size:15px;
font-weight:600;
text-decoration:none;
transition:.3s;
}

.primary-button{
background:#e50914;
box-shadow:0 12px 30px rgba(229,9,20,.25);
}

.primary-button:hover{
background:#ff202b;
transform:translateY(-3px) scale(1.02);
box-shadow:0 18px 38px rgba(229,9,20,.38);
}

.secondary-button{
background:rgba(255,255,255,.13);
border:1px solid rgba(255,255,255,.2);
backdrop-filter:blur(12px);
}

.secondary-button:hover{
background:rgba(255,255,255,.23);
transform:translateY(-3px);
}

.scroll-indicator{
position:absolute;
left:7%;
bottom:30px;
z-index:3;
display:flex;
align-items:center;
gap:14px;
color:#888;
font-size:11px;
letter-spacing:2px;
text-transform:uppercase;
}

.scroll-indicator div{
width:70px;
height:1px;
background:linear-gradient(90deg,#e50914,transparent);
animation:scrollLine 1.5s ease-in-out infinite;
}

@keyframes heroZoom{

from{
transform:scale(1.04);
}

to{
transform:scale(1.1);
}

}

@keyframes heroContentIn{

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

to{
opacity:1;
transform:none;
}

}

@keyframes scrollLine{

0%,
100%{
opacity:.35;
transform:scaleX(.7);
}

50%{
opacity:1;
transform:scaleX(1);
}

}


/* =========================
   SEARCH
========================= */

.search-overlay{
position:fixed;
inset:0;
z-index:5000;
display:flex;
justify-content:center;
padding:100px 20px 30px;
background:rgba(0,0,0,.82);
backdrop-filter:blur(14px);
opacity:0;
visibility:hidden;
transition:.3s;
}

.search-overlay.active{
opacity:1;
visibility:visible;
}

.search-panel{
width:min(780px,100%);
height:max-content;
max-height:80vh;
overflow:hidden;
border:1px solid rgba(255,255,255,.12);
border-radius:20px;
background:#111;
box-shadow:0 30px 90px rgba(0,0,0,.8);
transform:translateY(-20px) scale(.97);
transition:.3s;
}

.search-overlay.active .search-panel{
transform:none;
}

.search-top{
display:flex;
gap:12px;
padding:18px;
border-bottom:1px solid rgba(255,255,255,.08);
}

#searchInput{
flex:1;
height:55px;
padding:0 20px;
border:1px solid #333;
border-radius:12px;
outline:none;
background:#191919;
color:white;
font-size:17px;
}

#searchInput:focus{
border-color:#e50914;
box-shadow:0 0 0 3px rgba(229,9,20,.13);
}

#closeSearch{
width:55px;
border:none;
border-radius:12px;
background:#242424;
color:white;
cursor:pointer;
font-size:19px;
}

#closeSearch:hover{
background:#e50914;
}

.search-results{
max-height:60vh;
overflow-y:auto;
padding:10px;
}

.search-result{
display:flex;
align-items:center;
gap:16px;
padding:12px;
border-radius:12px;
color:white;
text-decoration:none;
transition:.2s;
}

.search-result:hover{
background:#202020;
}

.search-result img{
width:64px;
height:90px;
object-fit:cover;
border-radius:8px;
}

.search-result h3{
margin:0 0 7px;
font-size:16px;
}

.search-result p{
margin:0;
color:#999;
font-size:13px;
}

.search-empty{
padding:35px;
text-align:center;
color:#888;
}


/* =========================
   TEMPORARY SECTIONS
========================= */

.temporary-section{
min-height:440px;
padding:110px 7%;
scroll-margin-top:70px;
}

.temporary-section:nth-child(even){
background:#0c0c0c;
}

.temporary-section h2{
margin:0 0 15px;
font-size:38px;
}

.temporary-section p{
color:#888;
}


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

@media(max-width:900px){

.header nav{
display:none;
}

.mobile-menu-button{
display:flex;
}

.hero{
padding-left:5%;
padding-right:5%;
}

.hero h1{
letter-spacing:-2px;
}

}

@media(max-width:600px){

.header{
padding:0 18px;
}

.logo{
font-size:24px;
}

.hero{
min-height:850px;
padding:115px 20px 80px;
align-items:flex-end;
}

.hero-overlay{
background:
linear-gradient(
to top,
rgba(0,0,0,1) 0%,
rgba(0,0,0,.8) 52%,
rgba(0,0,0,.18) 100%
);
}

.hero h1{
font-size:48px;
}

#heroDescription{
font-size:15px;
line-height:1.65;
}

.primary-button,
.secondary-button{
width:100%;
}

.scroll-indicator{
left:20px;
}

.loader-logo{
font-size:42px;
}

.loader-line{
width:220px;
}

}
.hero-background{
    transition:
        opacity .35s ease,
        filter .35s ease,
        background-image .35s ease;
}

.hero-background.changing{
    opacity:.15;
    filter:blur(6px);
}

.hero-content{
    transition:
        opacity .35s ease,
        transform .35s ease,
        filter .35s ease;
}

.hero-content.changing{
    opacity:0;
    transform:translateY(20px);
    filter:blur(5px);
}


.content-section{
padding:90px 5%;
scroll-margin-top:70px;
background:#070707;
}

.section-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:25px;
margin-bottom:34px;
}

.section-label{
display:block;
margin-bottom:8px;
color:#e50914;
font-size:12px;
font-weight:700;
letter-spacing:3px;
}

.section-heading h2{
margin:0;
font-size:clamp(30px,4vw,48px);
letter-spacing:-2px;
}

.slider-controls{
display:flex;
gap:10px;
}

.slider-controls button{
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
border:1px solid rgba(255,255,255,.13);
border-radius:50%;
background:#151515;
color:white;
font-size:18px;
cursor:pointer;
transition:.25s;
}

.slider-controls button:hover{
background:#e50914;
border-color:#e50914;
transform:scale(1.08);
}




.trending-section{
position:relative;
overflow:hidden;
}

.trending-row{
display:flex;
gap:12px;
overflow-x:auto;
overflow-y:hidden;
padding:20px 8px 35px;
scroll-behavior:smooth;
scroll-snap-type:x proximity;
scrollbar-width:none;
}

.trending-row::-webkit-scrollbar{
display:none;
}

.trending-card{
position:relative;
display:flex;
align-items:flex-end;
min-width:330px;
height:390px;
scroll-snap-align:start;
}

.trending-number{
position:relative;
z-index:1;
width:145px;
margin-right:-28px;
margin-bottom:-10px;
color:#080808;
font-size:260px;
font-weight:800;
line-height:.75;
letter-spacing:-26px;
-webkit-text-stroke:4px #7b7b7b;
text-shadow:
0 10px 35px rgba(0,0,0,.85);
user-select:none;
pointer-events:none;
}

.trending-poster{
position:relative;
z-index:2;
width:220px;
height:330px;
overflow:hidden;
border-radius:14px;
background:#171717;
box-shadow:
0 18px 45px rgba(0,0,0,.65);
transition:
transform .35s ease,
box-shadow .35s ease;
}

.trending-poster img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:transform .45s ease;
}

.trending-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:18px;
background:
linear-gradient(
to top,
rgba(0,0,0,.98) 0%,
rgba(0,0,0,.62) 48%,
transparent 78%
);
opacity:0;
transform:translateY(15px);
transition:
opacity .3s ease,
transform .3s ease;
}

.trending-card:hover .trending-poster{
transform:translateY(-10px) scale(1.04);
box-shadow:
0 25px 60px rgba(0,0,0,.78),
0 0 30px rgba(229,9,20,.22);
}

.trending-card:hover .trending-poster img{
transform:scale(1.1);
}

.trending-card:hover .trending-overlay{
opacity:1;
transform:none;
}

.trending-play{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
margin-bottom:13px;
border-radius:50%;
background:#e50914;
color:white;
box-shadow:0 0 20px rgba(229,9,20,.5);
}

.trending-overlay h3{
margin:0 0 6px;
font-size:18px;
color:white;
}

.trending-overlay p{
margin:0;
color:#bbb;
font-size:13px;
line-height:1.5;
}

@media(max-width:700px){

.content-section{
padding:70px 18px;
}

.section-heading{
align-items:center;
}

.slider-controls{
display:none;
}

.trending-card{
min-width:260px;
height:320px;
}

.trending-number{
width:110px;
margin-right:-22px;
font-size:205px;
-webkit-text-stroke-width:3px;
}

.trending-poster{
width:175px;
height:265px;
}

}
/* =========================
   ALL SERIES
========================= */

.content-section{
padding:90px 5%;
scroll-margin-top:70px;
background:#070707;
}

.section-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:24px;
margin-bottom:34px;
}

.section-label{
display:block;
margin-bottom:8px;
color:#e50914;
font-size:12px;
font-weight:700;
letter-spacing:3px;
}

.section-heading h2{
margin:0;
font-size:clamp(30px,4vw,48px);
letter-spacing:-2px;
}

.series-total{
color:#8d8d8d;
font-size:14px;
}

.series-grid{
display:grid;
grid-template-columns:
repeat(auto-fill,minmax(210px,1fr));
gap:26px;
}

.series-card{
position:relative;
border-radius:16px;
overflow:hidden;
background:#151515;
transition:
transform .35s ease,
box-shadow .35s ease;
}

.series-card a{
display:block;
color:white;
text-decoration:none;
}

.series-card-image{
position:relative;
width:100%;
aspect-ratio:2 / 3;
overflow:hidden;
}

.series-card-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:
transform .45s ease,
filter .35s ease;
}

.series-card-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:20px;
background:
linear-gradient(
to top,
rgba(0,0,0,.98) 0%,
rgba(0,0,0,.7) 48%,
rgba(0,0,0,.04) 82%
);
opacity:0;
transform:translateY(18px);
transition:
opacity .3s ease,
transform .3s ease;
}

.series-play{
display:flex;
align-items:center;
justify-content:center;
width:46px;
height:46px;
margin-bottom:14px;
border-radius:50%;
background:#e50914;
color:white;
box-shadow:
0 0 20px rgba(229,9,20,.55);
}

.series-card-overlay h3{
margin:0 0 8px;
font-size:20px;
}

.series-card-overlay p{
margin:0 0 12px;
color:#c7c7c7;
font-size:13px;
line-height:1.5;
}

.series-watch-label{
color:#ff3540;
font-size:13px;
font-weight:700;
}

.series-card:hover{
transform:translateY(-10px) scale(1.03);
box-shadow:
0 24px 60px rgba(0,0,0,.75),
0 0 30px rgba(229,9,20,.22);
}

.series-card:hover img{
transform:scale(1.1);
filter:brightness(.72);
}

.series-card:hover .series-card-overlay{
opacity:1;
transform:none;
}

@media(max-width:700px){

.content-section{
padding:70px 18px;
}

.section-heading{
align-items:center;
}

.series-grid{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px;
}

.series-card-overlay{
padding:14px;
}

.series-card-overlay h3{
font-size:16px;
}

.series-play{
width:38px;
height:38px;
}

}
.slider-controls{
display:flex;
gap:10px;
}

.slider-controls button{
width:44px;
height:44px;
border:none;
border-radius:50%;
background:#181818;
color:white;
font-size:18px;
cursor:pointer;
transition:.25s;
}

.slider-controls button:hover{
background:#e50914;
transform:scale(1.08);
}

.new-releases-row{
display:flex;
gap:20px;
overflow-x:auto;
padding:10px 5px 30px;
scroll-behavior:smooth;
scrollbar-width:none;
}

.new-releases-row::-webkit-scrollbar{
display:none;
}

.release-card{
min-width:210px;
max-width:210px;
}

.release-card a{
color:white;
text-decoration:none;
}

.release-image{
position:relative;
aspect-ratio:2 / 3;
overflow:hidden;
border-radius:16px;
background:#151515;
}

.release-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:.4s;
}

.release-badge{
position:absolute;
top:12px;
left:12px;
z-index:2;
padding:6px 10px;
border-radius:7px;
background:#e50914;
font-size:10px;
font-weight:800;
letter-spacing:1.4px;
}

.release-overlay{
position:absolute;
inset:0;
display:flex;
flex-direction:column;
justify-content:flex-end;
padding:18px;
background:
linear-gradient(
to top,
rgba(0,0,0,.98),
rgba(0,0,0,.55),
transparent
);
opacity:0;
transition:.3s;
}

.release-card:hover img{
transform:scale(1.1);
filter:brightness(.7);
}

.release-card:hover .release-overlay{
opacity:1;
}

.release-play{
display:flex;
align-items:center;
justify-content:center;
width:44px;
height:44px;
margin-bottom:12px;
border-radius:50%;
background:#e50914;
box-shadow:0 0 20px rgba(229,9,20,.55);
}

.release-overlay h3{
margin:0 0 6px;
font-size:18px;
}

.release-overlay p{
margin:0;
color:#bbb;
font-size:13px;
}

@media(max-width:700px){

.slider-controls{
display:none;
}

.release-card{
min-width:165px;
max-width:165px;
}

}
/* =========================
   CONTACT
========================= */

.contact-section{
display:grid;
grid-template-columns:1fr 1fr;
gap:70px;
padding:110px 7%;
scroll-margin-top:70px;
background:
radial-gradient(
circle at 15% 40%,
rgba(229,9,20,.12),
transparent 32%
),
#0a0a0a;
}

.contact-copy h2{
max-width:600px;
margin:0 0 22px;
font-size:clamp(36px,5vw,64px);
line-height:1.08;
letter-spacing:-3px;
}

.contact-copy p{
max-width:520px;
margin:0;
color:#9a9a9a;
font-size:16px;
line-height:1.8;
}

.contact-form{
display:flex;
flex-direction:column;
gap:18px;
padding:30px;
border:1px solid rgba(255,255,255,.09);
border-radius:22px;
background:rgba(255,255,255,.04);
backdrop-filter:blur(18px);
box-shadow:0 25px 70px rgba(0,0,0,.45);
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
}

.contact-form label{
display:flex;
flex-direction:column;
gap:8px;
}

.contact-form label span{
color:#bcbcbc;
font-size:13px;
font-weight:600;
}

.contact-form input,
.contact-form textarea{
width:100%;
border:1px solid #303030;
border-radius:12px;
outline:none;
background:#131313;
color:white;
font-size:15px;
transition:.25s;
}

.contact-form input{
height:52px;
padding:0 16px;
}

.contact-form textarea{
min-height:160px;
padding:16px;
resize:vertical;
}

.contact-form input:focus,
.contact-form textarea:focus{
border-color:#e50914;
box-shadow:0 0 0 3px rgba(229,9,20,.12);
}

.contact-form button{
align-self:flex-start;
border:none;
cursor:pointer;
}

.contact-form button:disabled{
opacity:.55;
cursor:not-allowed;
transform:none;
}

#contactStatus{
min-height:24px;
margin:0;
font-size:14px;
}

#contactStatus.success{
color:#4ade80;
}

#contactStatus.error{
color:#ff6464;
}

@media(max-width:850px){

.contact-section{
grid-template-columns:1fr;
gap:40px;
padding:85px 20px;
}

.contact-grid{
grid-template-columns:1fr;
}

.contact-copy h2{
letter-spacing:-2px;
}

}
.messages-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-bottom:20px;
}

.messages-header h2{
margin:0;
}

.refresh-messages-btn{
padding:10px 18px;
font-size:14px;
}

.message-item{
margin-bottom:18px;
padding:22px;
border:1px solid #303030;
border-radius:14px;
background:#111;
transition:.25s;
}

.message-item:hover{
border-color:#e50914;
box-shadow:0 0 20px rgba(229,9,20,.15);
}

.message-item.unread{
border-left:4px solid #e50914;
}

.message-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:20px;
margin-bottom:14px;
}

.message-top h3{
margin:0 0 5px;
font-size:19px;
}

.message-email{
color:#e50914;
text-decoration:none;
font-size:14px;
}

.message-date{
color:#777;
font-size:12px;
white-space:nowrap;
}

.message-subject{
margin:0 0 12px;
color:#ddd;
font-weight:600;
}

.message-text{
margin:0;
padding:15px;
border-radius:10px;
background:#181818;
color:#bbb;
line-height:1.7;
white-space:pre-wrap;
}

.messages-empty{
padding:30px;
text-align:center;
color:#888;
}

@media(max-width:700px){

.message-top{
flex-direction:column;
}

.message-date{
white-space:normal;
}

}.delete-message-btn{
margin-top:15px;
background:#7a0000;
padding:10px 16px;
font-size:14px;
}

.delete-message-btn:hover{
background:#e50914;
}
/* =========================
   CONTINUE WATCHING
========================= */

.continue-watching-row{
display:flex;
gap:22px;
}

.continue-card{
display:grid;
grid-template-columns:280px 1fr;
width:min(720px,100%);
overflow:hidden;
border:1px solid #262626;
border-radius:18px;
background:#121212;
color:white;
text-decoration:none;
box-shadow:0 18px 45px rgba(0,0,0,.45);
transition:.3s;
}

.continue-card:hover{
transform:translateY(-6px);
border-color:#e50914;
box-shadow:
0 24px 60px rgba(0,0,0,.7),
0 0 28px rgba(229,9,20,.18);
}

.continue-image{
position:relative;
min-height:180px;
overflow:hidden;
}

.continue-image img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transition:.4s;
}

.continue-card:hover .continue-image img{
transform:scale(1.08);
filter:brightness(.75);
}

.continue-play{
position:absolute;
left:50%;
top:50%;
display:flex;
align-items:center;
justify-content:center;
width:54px;
height:54px;
border-radius:50%;
background:#e50914;
transform:translate(-50%,-50%);
box-shadow:0 0 25px rgba(229,9,20,.55);
}

.continue-info{
display:flex;
flex-direction:column;
justify-content:center;
padding:24px;
}

.continue-info h3{
margin:0 0 8px;
font-size:24px;
}

.continue-info p{
margin:0 0 18px;
color:#aaa;
}

.continue-progress{
height:6px;
overflow:hidden;
border-radius:999px;
background:#303030;
}

.continue-progress-fill{
height:100%;
border-radius:999px;
background:#e50914;
}

.continue-time{
margin-top:10px;
color:#8d8d8d;
font-size:13px;
}

@media(max-width:700px){

.continue-card{
grid-template-columns:1fr;
}

.continue-image{
min-height:210px;
}

}