     <!-- Home Page Content Start -->
<div class="row g-3 mb-4">
    <div class="col-12 mt-4">
      <div class="d-sm-flex justify-content-between align-items-center">
        <h5 class="mb-md-0">Official Trailer </h5>
        <a class="btn btn-sm btn-primary" href="#!">View more video</a>
      </div>
    </div>
    <div class="col-sm-6 col-lg-4">
      <!-- Video START -->
      <div class="card position-relative h-100">
        <!-- Video image -->
        <div class="card-image">
          <div class="overflow-hidden fullscreen-video w-100">
            <!-- HTML video START -->
            <div class="player-wrapper card-img-top overflow-hidden">
              <video class="player-html" controls crossorigin="anonymous" poster="app/views/assets/images/videos/poster.jpg">
                <source src="app/views/assets/images/videos/video-feed.mp4" type="video/mp4">
              </video>
            </div>
            <!-- HTML video END -->
          </div>
        </div>
        <!-- Video info -->
        <div class="card-body position-relative">
          <!-- Video title  -->
          <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> New movie trailers (2021 - 2022) September </a> </h6>
          <div class="d-flex mt-3">
            <!-- Avatar -->
            <div class="avatar avatar-xxs me-2">
              <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/01.jpg" alt="">
            </div>
            <!-- Avatar name -->
            <div>
              <h6 class="mb-0 lh-1"> <a href="#!"> Frances Guerrero </a> </h6>
              <span class="ms-auto small"> 145.2K views</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Video END -->
    </div>
    <div class="col-sm-6 col-lg-4">
      <!-- Video START -->
      <div class="card h-100">
        <!-- Video image -->
        <div class="card-image">
          <div class="ratio ratio-16x9 card-img-top overflow-hidden">
            <iframe src="https://www.youtube.com/embed/7E45f46yDFI" title="YouTube video" allowfullscreen></iframe>
          </div>
        </div>
        <!-- Video info -->
        <div class="card-body position-relative">
          <!-- Video title  -->
          <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> 15 useful apps for android smartphones users </a> </h6>
          <div class="d-flex mt-2">
            <!-- Avatar -->
            <div class="avatar avatar-xxs me-2">
              <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/02.jpg" alt="">
            </div>
            <!-- Avatar name -->
            <div>
              <h6 class="mb-0 lh-1"> <a href="#!"> Lori Ferguson <i class="bi bi-patch-check-fill text-success small"></i> </a> </h6>
              <span class="ms-auto small"> 235.8K views</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Video END -->
    </div>
    <div class="col-sm-6 col-lg-4">
      <!-- Video START -->
      <div class="card position-relative h-100">
        <!-- Video image -->
        <div class="card-image">
          <div class="ratio ratio-16x9 card-img-top overflow-hidden">
            <iframe src="https://player.vimeo.com/video/225888984?h=65630c41c6" title="Vimeo video" allowfullscreen></iframe>
          </div>
        </div>
        <!-- Video info -->
        <div class="card-body position-relative">
          <!-- Video title  -->
          <h6> <a class="stretched-link" href="/trainingportal/Videodetails"> The Red notice | Official teaser | Netflix </a> </h6>
          <div class="d-flex mt-3">
            <!-- Avatar -->
            <div class="avatar avatar-xxs me-2">
              <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/03.jpg" alt="">
            </div>
            <!-- Avatar name -->
            <div>
              <h6 class="mb-0 lh-1"> <a href="#!"> Louis Crawford </a> </h6>
              <span class="ms-auto small"> 785.2K views</span>
            </div>
          </div>
        </div>
      </div>
      <!-- Video END -->
    </div>
  </div>

     <!-- Home Page Content End -->


     <body>
        <!-- =======================
        Header START -->
        <header class="navbar-light fixed-top header-static bg-mode">
        
            <!-- Logo Nav START -->
          <nav class="navbar navbar-expand-lg">
              <div class="container-fluid">
                <!-- Logo START -->
                <a class="navbar-brand" href="index-2.html">
                  <img class="light-mode-item navbar-brand-item" src="app/views/assets/images/logo.svg" alt="logo">
                          <img class="dark-mode-item navbar-brand-item" src="app/views/assets/images/logo.svg" alt="logo">		
                </a>
                <!-- Logo END -->
        
                <button class="icon-md btn btn-light p-0 d-block d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#navbarVerticaloffcanvas" aria-controls="navbarVerticaloffcanvas">
                  <i class="bi bi-justify-left fs-4"></i>
                </button>
        
                <!-- Responsive navbar toggler -->
                <button class="navbar-toggler ms-auto icon-md btn btn-light p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-animation">
                  <span></span>
                  <span></span>
                  <span></span>
                </span>
              </button>
        
                <!-- Main navbar START -->
                <div class="collapse navbar-collapse" id="navbarCollapse">
        
                  <!-- Nav Search START -->
                  <div class="nav mt-3 mt-lg-0 flex-nowrap align-items-center px-4 px-lg-0">
                    <div class="nav-item w-100">
                      <form class="rounded position-relative">
                        <input class="form-control ps-5 bg-light" type="search" placeholder="Search..." aria-label="Search">
                        <button class="btn bg-transparent px-2 py-0 position-absolute top-50 start-0 translate-middle-y" type="submit"><i class="bi bi-search fs-5"> </i></button>
                      </form>
                    </div>
                  </div>
                  <!-- Nav Search END -->
        
                  <ul class="navbar-nav navbar-nav-scroll mx-auto">
                    <!-- Nav item 1 Demos -->
                    <li class="nav-item">
                      <a class="nav-link active" href="#">Overview</a>
                    </li>
                    <!-- Nav item 1 Demos -->
                    <li class="nav-item">
                      <a class="nav-link" href="#">Subscriptions</a>
                    </li>
                    <!-- Nav item 1 Demos -->
                    <li class="nav-item">
                      <a class="nav-link" href="#">Streams</a>
                    </li>
                    <!-- Nav item 1 Demos -->
                    <li class="nav-item">
                      <a class="nav-link" href="#">Results</a>
                    </li>
                    <!-- Nav item 2 Pages -->
                  </ul>
                </div>
                <!-- Main navbar END -->
        
                <!-- Nav right START -->
                <ul class="nav flex-nowrap align-items-center ms-lg-3 list-unstyled">
                  <li class="nav-item ms-2">
                    <a class="nav-link icon-md btn p-0" href="settings.html">
                      <i class="bi bi-gear-fill fs-6"> </i>
                    </a>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link icon-md btn p-0" href="#" id="notifDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="outside">
                      <i class="bi bi-bell-fill fs-6"> </i>
                    </a>
                    <div class="dropdown-menu dropdown-animation dropdown-menu-end dropdown-menu-size-md p-0 shadow-lg border-0" aria-labelledby="notifDropdown">
                      <div class="card">
                        <div class="card-header d-flex justify-content-between align-items-center">
                          <h6 class="m-0">Notifications <span class="badge bg-danger bg-opacity-10 text-danger ms-2">4 new</span></h6>
                          <a class="small" href="#">Clear all</a>
                        </div>
                        <div class="card-body p-0">
                          <ul class="list-group list-group-flush list-unstyled p-2">
                            <!-- Notif item -->
                            <li>
                              <div class="list-group-item list-group-item-action rounded badge-unread d-flex border-0 mb-1 p-3">
                                <div class="avatar text-center d-none d-sm-inline-block">
                                  <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/01.jpg" alt="">
                                </div>
                                <div class="ms-sm-3">
                                  <div class=" d-flex">
                                  <p class="small mb-2"><b>Judy Nguyen</b> sent you a friend request.</p>
                                  <p class="small ms-3 text-nowrap">Just now</p>
                                </div>
                                <div class="d-flex">
                                  <button class="btn btn-sm py-1 btn-primary me-2">Accept </button>
                                  <button class="btn btn-sm py-1 btn-danger-soft">Delete </button>
                                </div>
                              </div>
                            </div>
                            </li>
                            <!-- Notif item -->
                            <li>
                              <div class="list-group-item list-group-item-action rounded badge-unread d-flex border-0 mb-1 p-3 position-relative">
                                <div class="avatar text-center d-none d-sm-inline-block">
                                  <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/02.jpg" alt="">
                                </div>
                                <div class="ms-sm-3 d-flex">
                                  <div>
                                    <p class="small mb-2">Wish <b>Amanda Reed</b> a happy birthday (Nov 12)</p>
                                    <button class="btn btn-sm btn-outline-light py-1 me-2">Say happy birthday 🎂</button>
                                  </div>
                                  <p class="small ms-3">2min</p>
                                </div>
                              </div>
                            </li>
                            <!-- Notif item -->
                            <li>
                              <a href="#" class="list-group-item list-group-item-action rounded d-flex border-0 mb-1 p-3">
                                <div class="avatar text-center d-none d-sm-inline-block">
                                  <div class="avatar-img rounded-circle bg-success"><span class="text-white position-absolute top-50 start-50 translate-middle fw-bold">WB</span></div>
                                </div>
                                <div class="ms-sm-3">
                                  <div class="d-flex">
                                    <p class="small mb-2">Webestica has 15 like and 1 new activity</p>
                                    <p class="small ms-3">1hr</p>
                                  </div>
                                </div>
                              </a>
                            </li>
                            <!-- Notif item -->
                            <li>
                              <a href="#" class="list-group-item list-group-item-action rounded d-flex border-0 p-3 mb-1">
                                <div class="avatar text-center d-none d-sm-inline-block">
                                  <img class="avatar-img rounded-circle" src="app/views/assets/images/logo/12.svg" alt="">
                                </div>
                                <div class="ms-sm-3 d-flex">
                                  <p class="small mb-2"><b>Bootstrap in the news:</b> The search giant’s parent company, Alphabet, just joined an exclusive club of tech stocks.</p>
                                  <p class="small ms-3">4hr</p>
                                </div>
                              </a>
                            </li>
                          </ul>
                        </div>
                        <div class="card-footer text-center">
                          <a href="#" class="btn btn-sm btn-primary-soft">See all incoming activity</a>
                        </div>
                      </div>
                    </div>
                  </li>
                  <!-- Notification dropdown END -->
        
                  <li class="nav-item ms-3 dropdown">
                    <a class="nav-link p-0" href="#" id="profileDropdown" role="button" data-bs-auto-close="outside" data-bs-display="static" data-bs-toggle="dropdown" aria-expanded="false">
                      <div class="d-flex align-items-center position-relative">
                        <!-- Avatar -->
                        <div class="avatar avatar-sm me-xl-3">
                          <img class="avatar-img rounded-circle" src="app/views/assets/images/avatar/07.jpg" alt="avatar">
                        </div>
                        <div class="d-none d-xl-block">
                          <span class="h6 stretched-link">Lori Ferguson</span>
                          <p class="small m-0">Web Developer</p>
                        </div>
                      </div>
                    </a>
                    <ul class="dropdown-menu dropdown-animation dropdown-menu-end pt-3 small me-md-n3" aria-labelledby="profileDropdown">
                      <!-- Links -->
                      <li><a class="dropdown-item" href="settings.html"><i class="bi bi-gear fa-fw me-2"></i>Settings & Privacy</a></li>
                      <li> 
                        <a class="dropdown-item" href="https://support.webestica.com/" target="_blank">
                          <i class="fa-fw bi bi-life-preserver me-2"></i>Support
                        </a> 
                      </li>
                      <li> 
                        <a class="dropdown-item" href="docs/index.html" target="_blank">
                          <i class="fa-fw bi bi-card-text me-2"></i>Documentation
                        </a> 
                      </li>
                      <li class="dropdown-divider"></li>
                      <li><a class="dropdown-item bg-danger-soft-hover" href="/trainingportal/Main/Logout"><i class="bi bi-power fa-fw me-2"></i>Sign Out</a></li>
                      <li> <hr class="dropdown-divider"></li>
                      <!-- Dark mode switch START -->
                      <li>
                        <div class="modeswitch-wrap" id="darkModeSwitch">
                          <div class="modeswitch-item">
                            <div class="modeswitch-icon"></div>
                          </div>
                          <span>Dark mode</span>
                        </div>
                      </li> 
                      <!-- Dark mode switch END -->
                    </ul>
                  </li>
                  <!-- Profile START -->
                  
                </ul>
                <!-- Nav right END -->
              </div>
            </nav>
            <!-- Logo Nav END -->
        </header>
        <!-- =======================
        Header END -->
        
        <!-- **************** MAIN CONTENT START **************** -->
        <main>
          
          <!-- Container START -->
          <div class="container">
            <div class="row g-4">
              <!-- Main content START -->
              <div class="col-lg-8">
                <div class="bg-mode p-4">
                  <h1 class="h4 mb-4">Course List</h1>
                  <!-- Blog item START -->
                  <div class="card bg-transparent border-0">
                    <div class="row g-3">
                      <div class="col-4">
                        <!-- Blog image -->
                        <img class="rounded" src="app/views/assets/images/post/4by3/03.jpg" alt="">
                      </div>
                      <div class="col-8">
                        <!-- Blog caption -->
                        <a href="#" class="badge bg-danger bg-opacity-10 text-danger mb-2 fw-bold">Lifestyle</a>
                        <h5><a href="blog-details.html" class="btn-link stretched-link text-reset fw-bold">Social guides the way in 2022 app performance report</a></h5>
                        <div class="d-none d-sm-inline-block">
                          <p class="mb-2">Speedily say has suitable disposal add boy. On forth doubt miles of child. Exercise joy man children rejoiced.</p>
                          <!-- BLog date -->
                          <a class="small text-secondary" href="#!"> <i class="bi bi-calendar-date pe-1"></i> Jan 22, 2022</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Blog item END -->
                  <hr class="my-4">
                  <!-- Blog item START -->
                  <div class="card bg-transparent border-0">
                    <div class="row g-3">
                      <div class="col-4">
                        <!-- Blog image -->
                        <img class="rounded" src="app/views/assets/images/post/4by3/04.jpg" alt="">
                      </div>
                      <div class="col-8">
                        <!-- Blog caption -->
                        <a href="#" class="badge bg-info bg-opacity-10 text-info mb-2 fw-bold">Sports</a>
                        <h5><a href="blog-details.html" class="btn-link stretched-link text-reset fw-bold">Upcoming live video feed may not work how you expect</a></h5>
                        <div class="d-none d-sm-inline-block">
                          <p class="mb-2">Under folly balls, death own point now men. Match way these she avoids seeing death.</p>
                          <!-- BLog date -->
                          <a class="small text-secondary" href="#!"> <i class="bi bi-calendar-date pe-1"></i> Mar 07, 2022</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Blog item END -->
                  <hr class="my-4">
                  <!-- Blog item START -->
                  <div class="card bg-transparent border-0">
                    <div class="row g-3">
                      <div class="col-4">
                        <!-- Blog image -->
                        <img class="rounded" src="app/views/assets/images/post/4by3/05.jpg" alt="">
                      </div>
                      <div class="col-8">
                        <!-- Blog caption -->
                        <a href="#" class="badge bg-success bg-opacity-10 text-success mb-2 fw-bold">Business</a>
                        <h5><a href="blog-details.html" class="btn-link stretched-link text-reset fw-bold">Google shares top search trends of 2022</a></h5>
                        <div class="d-none d-sm-inline-block">
                          <p class="mb-2">I think on style child of. Servants moreover in sensible it ye possible six say his. </p>
                          <!-- BLog date -->
                          <a class="small text-secondary" href="#!"> <i class="bi bi-calendar-date pe-1"></i> Jun 17, 2022</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Blog item END -->
                  <hr class="my-4">
                  <!-- Blog item START -->
                  <div class="card bg-transparent border-0">
                    <div class="row g-3">
                      <div class="col-4">
                        <!-- Blog image -->
                        <img class="rounded" src="app/views/assets/images/post/4by3/06.jpg" alt="">
                      </div>
                      <div class="col-8">
                        <!-- Blog caption -->
                        <a href="#" class="badge bg-warning bg-opacity-10 text-warning mb-2 fw-bold">Technology</a>
                        <h5><a href="blog-details.html" class="btn-link stretched-link text-reset fw-bold">Counts reels replies, delivering another way to tap into the video</a></h5>
                        <div class="d-none d-sm-inline-block">
                          <p class="mb-2">Placing forming nay looking old married few has. Margaret disposed of add screened rendered. </p>
                          <!-- BLog date -->
                          <a class="small text-secondary" href="#!"> <i class="bi bi-calendar-date pe-1"></i> Nov 11, 2022</a>
                        </div>
                      </div>
                    </div>
                  </div>
                  <!-- Blog item END -->
                  <!-- Pagination -->
                  <div class="mt-4">
                    <nav aria-label="navigation">
                      <ul class="pagination pagination-light d-inline-block d-md-flex justify-content-center">
                        <li class="page-item disabled">
                          <a class="page-link" href="#">Prev</a>
                        </li>
                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                        <li class="page-item disabled"><a class="page-link" href="#">...</a></li>
                        <li class="page-item"><a class="page-link" href="#">15</a></li>
                        <li class="page-item">
                          <a class="page-link" href="#">Next</a>
                        </li>
                      </ul>
                    </nav>
                  </div>
                </div>
              </div>
              <!-- Main content END -->
        
              <!-- Right sidebar START -->
              <div class="col-lg-4">
                <div class="row g-4">
                  <!-- Card News START -->
                  <div class="col-sm-6 col-lg-12">
                    <div class="card">
                      <!-- Card header START -->
                      <div class="card-header pb-0 border-0">
                        <h5 class="card-title mb-0">Recent news</h5>
                      </div>
                      <!-- Card header END -->
                      <!-- Card body START -->
                      <div class="card-body">
                        <!-- News item -->
                        <div class="mb-3">
                          <h6 class="mb-0"><a href="blog-details.html">Ten questions you should answer truthfully</a></h6>
                          <small>2hr</small>
                        </div>
                        <!-- News item -->
                        <div class="mb-3">
                          <h6 class="mb-0"><a href="blog-details.html">Five unbelievable facts about money</a></h6>
                          <small>3hr</small>
                        </div>
                        <!-- News item -->
                        <div class="mb-3">
                          <h6 class="mb-0"><a href="blog-details.html">Best Pinterest Boards for learning about business</a></h6>
                          <small>4hr</small>
                        </div>
                        <!-- News item -->
                        <div class="mb-3">
                          <h6 class="mb-0"><a href="blog-details.html">Skills that you can learn from business</a></h6>
                          <small>6hr</small>
                        </div>
                        <!-- Load more comments -->
                        <a href="#!" role="button" class="btn btn-link btn-link-loader btn-sm text-secondary d-flex align-items-center" data-bs-toggle="button" aria-pressed="true">
                          <div class="spinner-dots me-2">
                            <span class="spinner-dot"></span>
                            <span class="spinner-dot"></span>
                            <span class="spinner-dot"></span>
                          </div>
                          View all latest news
                        </a>
                      </div>
                      <!-- Card body END -->
                    </div>
                  </div>
                  <!-- Card News END -->
        
                   <!-- Card News START -->
                   <div class="col-sm-6 col-lg-12">
                    <div class="card">
                      <!-- Card header START -->
                      <div class="card-header pb-0 border-0">
                        <h5 class="card-title mb-0">Segment's</h5>
                      </div>
                      <!-- Card header END -->
                      <!-- Card body START -->
                      <div class="card-body">
                        <!-- Tag list START -->
                        <ul class="list-inline mb-0 d-flex flex-wrap gap-2">
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">ATS</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">Medical</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">P&E</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">social</a>
                          </li>                
                        </ul>
                        <!-- Tag list END -->
                      <!-- Card body END -->
                    </div>
                  </div>
                  <!-- Card News END -->
                </div>
                <!-- Card follow START -->
                <div class="col-sm-6 col-lg-12">
                    <div class="card">
                      <!-- Card header START -->
                      <div class="card-header pb-0 border-0">
                        <h5 class="card-title mb-0">Trends</h5>
                      </div>
                      <!-- Card header END -->
                      <!-- Card body START -->
                      <div class="card-body">
                        <!-- Tag list START -->
                        <ul class="list-inline mb-0 d-flex flex-wrap gap-2">
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">Stars Enterprise</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">VTC</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">Mexa</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">Stars vets</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">CHAM</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">Analyser</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">Demos</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">magazine</a>
                          </li>
                          <li class="list-inline-item m-0">
                            <a class="btn btn-outline-light btn-sm" href="#">events</a>
                          </li>
                        </ul>
                        <!-- Tag list END -->
                      <!-- Card body END -->
                    </div>
                  </div>
                <!-- Right sidebar END -->
              </div> <!-- Row END -->
            </div>
          </div>
          <!-- Container END -->
        
        </main>
        <!-- **************** MAIN CONTENT END **************** -->
        
        <!-- footer START -->
        <footer class="card card-body">
                  <div class="row g-4">
                    <div class="col-md-12">
                    <?php include 'app/views/common/footer.php';?>
                    </div>
                </footer>
        <!-- footer END -->
         
        <!-- =======================
        JS libraries, plugins and custom scripts -->
        
        <!-- Bootstrap JS -->
        <?php include 'app/views/common/js.php';?>
         
        </body>

        ================================================================