<!-- Hero Section -->
<div class="home-slider position-relative mb-7">
<div class="row no-gutters">
<div class="col-lg-4">
<div class="slider-movie bg-img-hero d-flex flex-column justify-content-end overflow-hidden h-700rem mb-5 mb-lg-0" style="background-image: url(../../assets/img/422x700/img1.jpg);">
<div class="slider-movie__hover d-flex flex-column z-index-2 px-4 pb-6 pb-lg-4 transition-1">
<div class="mx-1">
<div class="slider-movie__hover-watch-now d-flex justify-content-center d-xl-none mb-7">
<a href="#">
<div class="watch-now-btn d-inline-block rounded-circle py-5 px-5 mb-2 pb-1 mx-1" style="background: linear-gradient(30deg, #2a4999 0%, #2c9cd4 100%);">
<div class="d-flex justify-content-center ml-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49px" height="54px">
<path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M2.000,51.000 C-0.150,46.056 0.424,8.178 2.000,5.000 C3.282,2.414 5.732,0.351 9.000,1.000 C19.348,3.054 45.393,19.419 48.000,25.000 C49.019,27.182 48.794,28.758 48.000,31.000 C46.967,33.919 13.512,54.257 9.000,54.000 C6.740,53.873 3.005,53.311 2.000,51.000 Z"></path>
</svg>
</div>
</div>
<div class="text-white font-size-24">Watch Now</div>
</a>
</div>
<a href="#">
<h6 class="display-9 text-white mb-2 d-block">Project Cars 3</h6>
</a>
<div class="text-white font-size-12 mb-2">
<span>1hr 42 mins</span>
<span> | </span>
<a href="#" class="text-white">Action,</a>
<a href="#" class="text-white">Adventure,</a>
<a href="#" class="text-white">Animation</a>
</div>
<div class="movie__description-wrap">
<div class="movie__description d-xl-none">
<p class="text-white font-size-17">Lightning McQueen sets out to prove to a new generation of racers that he’s still the best race car in the world.</p>
</div>
</div>
<div class="movie__actions d-xl-none">
<div class="pb-1">
<a href="#" class="btn btn-primary py-3 w-100 btn-sm mb-3" tabindex="0">WATCH NOW</a>
</div>
<div>
<a href="#" class="btn btn-outline-light py-3 w-100 btn-sm" tabindex="0">+ PLAYLIST</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="slider-movie bg-img-hero d-flex flex-column justify-content-end overflow-hidden h-700rem mb-5 mb-lg-0" style="background-image: url( ../../assets/img/422x700/img2.jpg);">
<div class="slider-movie__hover d-flex flex-column z-index-2 px-4 pb-6 pb-lg-4 transition-1">
<div class="mx-1">
<div class="slider-movie__hover-watch-now d-flex justify-content-center d-xl-none mb-7">
<a href="#">
<div class="watch-now-btn d-inline-block rounded-circle py-5 px-5 mb-2 pb-1 mx-1" style="background: linear-gradient(30deg, #2a4999 0%, #2c9cd4 100%);">
<div class="d-flex justify-content-center ml-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49px" height="54px">
<path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M2.000,51.000 C-0.150,46.056 0.424,8.178 2.000,5.000 C3.282,2.414 5.732,0.351 9.000,1.000 C19.348,3.054 45.393,19.419 48.000,25.000 C49.019,27.182 48.794,28.758 48.000,31.000 C46.967,33.919 13.512,54.257 9.000,54.000 C6.740,53.873 3.005,53.311 2.000,51.000 Z"></path>
</svg>
</div>
</div>
<div class="text-white font-size-24">Watch Now</div>
</a>
</div>
<a href="#">
<h6 class="display-9 text-white mb-2 d-block">Pacific Rim: Uprising</h6>
</a>
<div class="text-white font-size-12 mb-2">
<span>1hr 51 mins</span>
<span> | </span>
<a href="#" class="text-white">Action,</a>
<a href="#" class="text-white">Sci-Fi</a>
</div>
<div class="movie__description-wrap">
<div class="movie__description d-xl-none">
<p class="text-white font-size-17">Lightning McQueen sets out to prove to a new generation of racers that he’s still the best race car in the world.</p>
</div>
</div>
<div class="movie__actions d-xl-none">
<div class="pb-1">
<a href="#" class="btn btn-primary py-3 w-100 btn-sm mb-3" tabindex="0">WATCH NOW</a>
</div>
<div>
<a href="#" class="btn btn-outline-light py-3 w-100 btn-sm" tabindex="0">+ PLAYLIST</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="slider-movie bg-img-hero d-flex flex-column justify-content-end overflow-hidden h-700rem" style="background-image: url(../../assets/img/422x700/img3.jpg);">
<div class="slider-movie__hover d-flex flex-column z-index-2 px-4 pb-6 pb-lg-4 transition-1">
<div class="mx-1">
<div class="slider-movie__hover-watch-now d-flex justify-content-center d-xl-none mb-7">
<a href="#">
<div class="watch-now-btn d-inline-block rounded-circle py-5 px-5 mb-2 pb-1 mx-1" style="background: linear-gradient(30deg, #2a4999 0%, #2c9cd4 100%);">
<div class="d-flex justify-content-center ml-1">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="49px" height="54px">
<path fill-rule="evenodd" fill="rgb(255, 255, 255)" d="M2.000,51.000 C-0.150,46.056 0.424,8.178 2.000,5.000 C3.282,2.414 5.732,0.351 9.000,1.000 C19.348,3.054 45.393,19.419 48.000,25.000 C49.019,27.182 48.794,28.758 48.000,31.000 C46.967,33.919 13.512,54.257 9.000,54.000 C6.740,53.873 3.005,53.311 2.000,51.000 Z"></path>
</svg>
</div>
</div>
<div class="text-white font-size-24">Watch Now</div>
</a>
</div>
<a href="#">
<h6 class="display-9 text-white mb-2 d-block">Black Mirror</h6>
</a>
<div class="text-white font-size-12 mb-2">
<span>30mins</span>
<span> | </span>
<a href="#" class="text-white">Action,</a>
<a href="#" class="text-white">Mystery</a>
</div>
<div class="movie__description-wrap">
<div class="movie__description d-xl-none">
<p class="text-white font-size-17">In 1984, a young programmer begins to question reality as he works to adapt a fantasy novel into a video game.</p>
</div>
</div>
<div class="movie__actions d-xl-none">
<div class="pb-1">
<a href="#" class="btn btn-primary py-3 w-100 btn-sm mb-3" tabindex="0">WATCH NOW</a>
</div>
<div>
<a href="#" class="btn btn-outline-light py-3 w-100 btn-sm" tabindex="0">+ PLAYLIST</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End Hero Section -->