@extends('layout')
@section('css')
<link href="{{url('/')}}/assets/front/css/owl.carousel.min.css" rel="stylesheet">
<link href="{{url('/')}}/assets/front/css/owl.theme.default.min.css" rel="stylesheet">
@endsection
@section('content')
    
    <!--Page Title-->
    <section class="page-title" style="background-image:url({{url('/')}}/assets/front/img/bg-page-title-1.jpg);">
    	<div class="auto-container">
        	<div class="inner-box">
                <h1>@include('partials.breadcrumb')</h1>
                <ul class="bread-crumb">
                	<li><a href="/">Home</a></li>
                    <li>@include('partials.breadcrumb')</li>
                </ul>
            </div>
        </div>
    </section>
    <!--End Page Title-->


    <section class="feature-wrap style1 section-padding">
        <div class="overlay pt-120 pb-120">
        <div class="container">
        <div class="lessons-slider owl-carousel owl-theme">
            <div class="lessons-item">
            <div class="sec-title centered">
            	<h2 class="theme_color">Training Course</h2>
                <div class="clearfix">
                	<div class="desc-text">Customer Service Basics Course Topic A</div>
                </div>
            </div>
                <div style="position:relative; width:1px; min-width:100%;">
                
<video width="100%" height="auto" preload="auto" playsinline="" loop="" controls="" src="/Understanding Customer Service - Topic A Understanding Custo.mp4" type="video/mp4">
        <source src="/Understanding Customer Service - Topic A Understanding Custo.mp4" type="video/mp4"></source>
        <source src="/Understanding Customer Service - Topic A Understanding Custo.mp4" type="video/webm"></source>
    </video>
                </div>
            </div>
            <div class="lessons-item">
            <div class="sec-title centered">
            	<h2 class="theme_color">Training Course</h2>
                <div class="clearfix">
                	<div class="desc-text">Customer Service Basics Course Topic B</div>
                </div>
            </div>
                <div style="position:relative; width:1px; min-width:100%;">
<video width="100%" height="auto" preload="auto" playsinline="" loop="" controls="" src="/Understanding Customer Service - Topic B Identifying Custome.mp4" type="video/mp4">
        <source src="/Understanding Customer Service - Topic B Identifying Custome.mp4" type="video/mp4"></source>
        <source src="/Understanding Customer Service - Topic B Identifying Custome.mp4" type="video/webm"></source>
    </video>
                </div>
            </div>
            <div class="lessons-item">
            <div class="sec-title centered">
            	<h2 class="theme_color">Training Course</h2>
                <div class="clearfix">
                	<div class="desc-text">Customer Service Basics Course Topic C</div>
                </div>
            </div>
               <div style="position:relative; width:1px; min-width:100%;">
<video width="100%" height="auto" preload="auto" playsinline="" loop="" controls="" src="/Understanding Customer Service - Topic C Providing Excellent.mp4" type="video/mp4">
        <source src="/Understanding Customer Service - Topic C Providing Excellent.mp4" type="video/mp4"></source>
        <source src="/Understanding Customer Service - Topic C Providing Excellent.mp4" type="video/webm"></source>
    </video>
    </div>
            </div>
        </div>
        </div>
    </div>
    </section>

@stop


@section('script')
    <script src="{{url('/')}}/assets/front/js/owl.carousel.min.js"></script>
 <script>
         $('.lessons-slider').owlCarousel({
            loop: true,
            margin: 30,
			items: 1,
            nav: true,
            navText: [
                "<i class='fal fa-angle-left'></i>",
                "<i class='fal fa-angle-right'></i>"
            ],
            dots: false,
            autoplay: false
        });
    </script>
@stop