:root { --Khand: "Khand", sans-serif; --Roboto: "Roboto", sans-serif; --white: #fff; --white-rgb: 255,255,255; }
.elementor a{ text-decoration: none; color: #FFF;}

/* grid */
.flex{ display: flex; --gap: 20px; gap: var(--gap); --col: 1; }
.flex .flex-column{  flex-shrink: 1; flex-grow: 0; max-width:100%; width: 100%;  }
.flex-4>.flex-column{ max-width: calc((100% - (var(--gap)*3))/ 4 ); }
.flex-3>.flex-column{ max-width: calc((100% - (var(--gap)*2))/ 3 ); }
.flex-2>.flex-column{ max-width: calc((100% - (var(--gap))) / 2 ); }
.flex-3 > .flex-column.double {	max-width: calc(((100% - (var(--gap) * 2)) / 3) * 2 + var(--gap)); }

.flex_cards { flex-wrap: wrap; }
.flex_cards .flex_card{ border-radius: 30px; border: 1px solid rgba(var(--white-rgb), 0.20); background: rgba(var(--white-rgb), 0.06); overflow: hidden; position: relative; height: 559px; }
.flex_cards .flex_card:before{content:''; position: absolute; width: 100%; height: 100%; background-image: linear-gradient(180deg, rgba(22, 6, 5, 0.00) 16.92%, #160605 64.57%); z-index: 0;top: 0;}
.flex_cards .flex_card:hover .card-img{transform: scale(1.04); height: 100%;}
.flex_cards .flex_card:hover:before{ background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 16.92%, #000 64.57%); }
.flex_cards .flex_card .card-body{  padding: 30px 20px; position: absolute; bottom: 0; width: 100%;}
.flex_cards .flex_card .card-img{ z-index: -1;}
.flex_cards .flex_card .card-title{ margin-bottom: 0; }

.banner_block_flex { --gap: 20px; margin-bottom: 0; }
.banner_block_flex.flex_cards .flex_card .card-img img{ min-height: 380px; max-width: 100%; object-fit: cover; } 
/*  ------------------------------------------------------------------------------------ */

.flex-column .card .card-img{ transition: all .2s; position: relative; transform-origin: top center;}
.flex-column .card-body{  padding: 30px 20px; }
.flex-column .card .card-cat { margin-bottom: 30px;  }
.flex-column .card .card-cat .link{display: inline-block;border-radius: 10px;border: 1px solid rgba(var(--white-rgb), 0.70);text-align: center;padding: 8px 16px;color: rgba(var(--white-rgb), 0.70);font-size: 20px;font-weight: 500;line-height: normal;}
.flex-column .card .card-cat .link:hover{background-color: var(--white);border-color: var(--white);color: #000;transition: all .2s;}
/* ~~~~~~~~~~~~~~~~~~~ SEC NF LIST ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.flex-heading h2{ position:relative; }
.flex-heading h2.underline:after{content: ''; height: 100%; position: absolute; bottom: 4px; left: 0; border-bottom: 5px solid #DF0; width: 101%; }
.nf_films_list { --gap: 50px; flex-wrap: wrap;}
.nf_films_list .nf_card {--gap: 0; border-radius: 30px; border: 1px solid rgba(255, 255, 255, 0.20); background: #121212; padding: 30px; justify-content: space-between; height: 100%; } 
.nf_films_list .nf_card .card-img{ max-width: 600px; min-width:400px; width: 100%; border-radius: 12px; overflow: hidden; } 
.nf_films_list .nf_card .card-img figure{ height: 100%; }
.nf_films_list .nf_card .card-img img{ height:100%; object-fit:cover; transition: all ease-in 300ms; } 

.nf_films_list .nf_card .card-right{width: 100%;display: flex;flex-direction: column;justify-content: space-between;padding-left: 50px;} 
.nf_films_list .nf_card .card-top .card-cat{margin-bottom: 12px;display: flex;align-items: center;justify-content: space-between;} 

.nf_films_list .nf_card .card-top .card-content{ margin-right: 20px; } 
.nf_films_list .nf_card .card-top .card-title{ margin-bottom: 20px; font-size: 40px; line-height: 1.3;}
.nf_films_list .nf_card .card-top p{  color: rgba(255, 255, 255, 0.70); font-size: 20px; line-height: 1.4 }

.nf_films_list .nf_card .card-bottom{ font-size: 21px; line-height: normal; } 
.nf_films_list .nf_card .card-bottom .flex{  display: flex; align-items: center; justify-content: space-between; } 
.nf_films_list .nf_card .card-meta span{  display: flex; } 
.nf_films_list .nf_card .card-meta span.time{  opacity: .5; } 
.nf_films_list .nf_card .card-comment span{opacity: .6; } 

.nf_films_list .nf_card:hover img {transform: rotate(2deg) scale(1.1);  }


@media screen and ( max-width: 1200px){
	.flex_cards .flex_card{ height: 400px;}
}
@media screen and ( max-width: 991px){
	
	.flex-column .card .card-cat{ margin-bottom: 12px;}
	.flex-column .card .card-cat .link{ font-size: 16px; }
	.flex_cards .flex_card{ border-radius: 12px; height: 350px }
	.flex_cards .flex_card .card-body{ padding: 16px; }
	.flex_cards .flex_card .card-title a{ font-size: 20px; line-height: 1.2}
		
	.banner_block_flex{ --gap: 12px; }
	.nf_films_list{ --gap: 32px; }
	.nf_films_list .nf_card{ flex-wrap: wrap; gap: 24px; border-radius: 16px; padding: 20px; }

	.nf_films_list .nf_card .card-img,
	.nf_films_list .nf_card .card-right{ width:100%; max-width:100%; padding: 0; }
	.nf_films_list .nf_card .card-top .card-title{ font-size: 24px; line-height: 1.2}
	.nf_films_list .nf_card .card-top p,
	.nf_films_list .nf_card .card-bottom{ font-size: 16px;}
}
@media screen and ( max-width: 600px){ 
	.flex_cards { flex-wrap: wrap; }
	.flex-3 > .flex-column.double{ max-width: 100%}
	.flex .flex-column{  flex-shrink: 1; flex-grow: 0; max-width:100%; width: 100%; }
	.flex-column .card .card-cat .link{ border-radius: 8px;  }
	.nf_films_list{ --gap: 20px;}
	.nf_films_list .nf_card .card-img{ min-width: 100%; }
	.nf_films_list .nf_card .card-right{ width: 100%; }

	.flex_cards .flex_card{ height: 350px;}
	.banner_block_flex.flex_cards .flex_card .card-img img{ min-height: 280px; max-width: 100%; object-fit: cover; } 


}