<div class="container">
<!-- video -->
<div class="row">
<div class="offset-lg-2 col-lg-8 col-md-12 col-12 text-center">
<div class="z-1 position-relative rounded-3 py-19 border-white border bg-cover" style="background-image: url(../assets/images/video-img-2.jpg)">
<a class="popup-youtube font-32 text-decoration-none" href="https://www.youtube.com/watch?v=JRzWRZahOVU">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</div><!--start video section-->
<div class="container">
<div class="my-10" id="video">
<!-- video -->
<div class="row">
<div class="offset-xxl-3 col-xxl-6 offset-lg-1 col-lg-10 col-md-12 col-12 text-center">
<!--heading-->
<h2 class="mb-8">Prepare yourself for an eye-opening experience.</h2>
<div class="z-1 position-relative rounded-3 py-18 border-white border bg-cover" style="background-image: url(../assets/images/video-img.png)">
<a class="popup-youtube icon-shape rounded-circle btn-play icon-xl text-decoration-none" href="https://www.youtube.com/watch?v=JRzWRZahOVU">
<i class="fas fa-play"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!--end of video section--><!--start hero section-->
<section
class="pt-lg-12 pt-xl-14"
style="
background: linear-gradient(243.24deg, #2d2455 5.22%, #231c40 19.82%, #261f44 24.59%, #382f5c 32.12%, #251e44 40.66%, #211b3c 51.15%, #272045 68.12%, #261f44 84.67%),
#261f44;
"
>
<!-- about section -->
<div class="position-relative mt-8">
<div class="container position-relative z-1">
<div class="row">
<div class="offset-xl-1 col-xl-10 offset-lg-1 col-lg-10 col-md-12 col-12 text-center">
<!-- text -->
<span class="text-uppercase text-white-50">About Deena nichol</span>
<!-- heading -->
<h2 class="text-white mb-3 display-5 mt-2">
Deena Nichols tutoring thousand of
<br />
people online
</h2>
<!-- text -->
<p class="mb-0 lead px-xl-18">Praesent pellentesque maximus quam ac interdum. Cras fringilla sem eget ex imperdiet malesuada.</p>
<!-- row -->
<div class="row mt-10 mb-6">
<!-- col -->
<div class="col-md-4 col-12">
<div class="mb-4 mb-md-0">
<div class="d-flex align-items-center justify-content-center">
<i class="fe fe-star fs-4 text-primary"></i>
<span class="ms-2 fs-4 text-white">Certified trainer</span>
</div>
</div>
</div>
<!-- col -->
<div class="col-md-4 col-12">
<div class="mb-4 mb-md-0">
<div class="d-flex align-items-center justify-content-center">
<i class="fe fe-award fs-4 text-primary"></i>
<span class="ms-2 fs-4 text-white">10+ experience</span>
</div>
</div>
</div>
<!-- col -->
<div class="col-md-4 col-12">
<div class="mb-4 mb-md-0">
<div class="d-flex align-items-center justify-content-center">
<i class="fe fe-video fs-4 text-primary"></i>
<span class="ms-2 fs-4 text-white">16+ Classes</span>
</div>
</div>
</div>
</div>
<div>
<!-- video section -->
<div class="position-relative rounded-3 py-19 bg-cover" style="background-image: url(../assets/images/fitness/fitness-video-img.jpg)">
<a class="popup-youtube icon-shape rounded-circle btn-play icon-xl text-decoration-none" href="https://www.youtube.com/watch?v=JRzWRZahOVU">
<svg
xmlns="http://www.w3.org/2000/svg"
width="40"
height="40"
viewBox="0 0 24
24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-play-circle"
>
<circle cx="12" cy="12" r="10"></circle>
<polygon points="10 8 16 12 10 16 10 8"></polygon>
</svg>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- background hidden section -->
<div class="hidden-bg"></div>
</div>
</section>
<!--end of hero section--><!--start video-->
<section class="pb-lg-10 pb-xxl-16 pb-6">
<div class="container">
<!--row-->
<div class="row">
<div class="col-xl-12 col-md-12 col-12">
<div class="mb-5">
<!--heading-->
<h3 class="fw-bold">My Videos</h3>
</div>
</div>
</div>
<div class="table-responsive-xl">
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 flex-nowrap pb-4">
<div class="col">
<div class="position-relative">
<!--video-->
<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY" data-poster="../assets/images/yoga/video-1.jpg"></div>
<div class="position-absolute end-0 bottom-0 py-8 px-3">
<!--badge-->
<span class="badge bg-dark bg-opacity-50">12:30</span>
</div>
<!--content-->
<h5 class="mt-4"><a href="#" class="text-inherit">Center - Day 29 - Pleasure</a></h5>
</div>
</div>
<div class="col">
<div class="position-relative">
<!--video-->
<div id="player2" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY" data-poster="../assets/images/yoga/video-2.jpg"></div>
<div class="position-absolute end-0 bottom-0 py-8 px-3">
<!--badge-->
<span class="badge bg-dark bg-opacity-50">12:30</span>
</div>
<!--content-->
<h5 class="mt-4"><a href="#" class="text-inherit">Center - Day 29 - Pleasure</a></h5>
</div>
</div>
<div class="col">
<div>
<div class="position-relative">
<!--video-->
<div id="player3" data-plyr-provider="youtube" data-plyr-embed-id="bTqVqk7FSmY" data-poster="../assets/images/yoga/video-3.jpg"></div>
<div class="position-absolute end-0 bottom-0 mb-3 me-3">
<!--badge-->
<span class="badge bg-dark bg-opacity-50">8:24</span>
</div>
</div>
<!--content-->
<h5 class="mt-5"><a href="#" class="text-inherit">Center - Day 26 - Explore</a></h5>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-md-12 col-12">
<!--button-->
<div class="mt-5">
<a href="#" class="btn btn-outline-secondary">Watch my videos series</a>
</div>
</div>
</div>
</div>
</section>
<!--end of video-->