@extends('master')
@section('content')

    <div class="main-wrapper scrollspy-container">


        {{-- Slider --}}
        <div class="slick-hero-slider-wrapper">
            <div class="slider slick-hero-slider slick-slider-center-mode slick-animation slick-inner-dot alt-dot-position">
                <div class="slick-item">
                    <div class="image-bg">
                        <img src="{{ asset('public/frontend/images/banner/banner1.jpg') }}" alt="Image" />
                    </div>
                </div>

                <div class="slick-item">
                    <div class="image-bg">
                        <img src="{{ asset('public/frontend/images/banner/banner2.jpg') }}" alt="Image" />
                    </div>
                </div>

                <div class="slick-item">
                    <div class="image-bg">
                        <img src="{{ asset('public/frontend/images/banner/banner3.jpg') }}" alt="Image" />
                    </div>
                </div>


                <div class="slick-item">
                    <div class="image-bg">
                        <img src="{{ asset('public/frontend/images/banner/banner4.jpg') }}" alt="Image" />
                    </div>
                </div>

                <div class="slick-item">
                    <div class="image-bg">
                        <img src="{{ asset('public/frontend/images/banner/banner5.jpg') }}" alt="Image" />
                    </div>
                </div>

                <div class="slick-item">
                    <div class="image-bg">
                        <img src="{{ asset('public/frontend/images/banner/banner6.jpg') }}" alt="Image" />
                    </div>
                </div>

            </div>
        </div>
        {{-- End Slider --}}

        {{-- Choose You Course --}}
        <section class="mycourse-bg">
            <div class="container">

                <div class="row">
                    <div class="col-sm-12 col-md-12 ">
                        <div class="section-title mb-30">
                            <h2 class="text-center text-white">Choose Your Course</h2><br>
                        </div>
                    </div>
                </div>

                <div class="GridLex-gap-30">
                    <div class="GridLex-grid-noGutter-equalHeight">
                        <div class="GridLex-col-12_sm-7_xs-12_xss-12">
                            <div class="category-item-wrapper item-border">
                                <div class="GridLex-gap-20">
                                    <div class="GridLex-grid-noGutter-equalHeight">

                                        <div class="GridLex-col-4_sm-6_xs-6_xss-12">
                                            <a href="#" class="category-item">
                                                <div class="icon">
                                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                                </div>
                                                <div class="content">
                                                    <h6>CA Foundation</h6>
                                                </div>
                                            </a>
                                        </div>

                                        <div class="GridLex-col-4_sm-6_xs-6_xss-12">
                                            <a href="#" class="category-item">
                                                <div class="icon">
                                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                                </div>
                                                <div class="content">
                                                    <h6>CA Inter</h6>
                                                </div>
                                            </a>
                                        </div>

                                        <div class="GridLex-col-4_sm-6_xs-6_xss-12">
                                            <a href="#" class="category-item">
                                                <div class="icon">
                                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                                </div>
                                                <div class="content">
                                                    <h6>CA Final</h6>
                                                </div>
                                            </a>
                                        </div>

                                        <div class="GridLex-col-4_sm-6_xs-6_xss-12">
                                            <a href="#" class="category-item">
                                                <div class="icon">
                                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                                </div>
                                                <div class="content">
                                                    <h6>CMA Foundation</h6>
                                                </div>
                                            </a>
                                        </div>

                                        <div class="GridLex-col-4_sm-6_xs-6_xss-12">

                                            <a href="#" class="category-item">
                                                <div class="icon">
                                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                                </div>
                                                <div class="content">
                                                    <h6>CMA Inter</h6>
                                                </div>
                                            </a>
                                        </div>

                                        <div class="GridLex-col-4_sm-6_xs-6_xss-12">
                                            <a href="#" class="category-item">
                                                <div class="icon">
                                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                                </div>
                                                <div class="content">
                                                    <h6>CMA Final</h6>
                                                </div>
                                            </a>
                                        </div>

                                        <div class="GridLex-col-4_sm-6_xs-6_xss-12">
                                            <a href="#" class="category-item">
                                                <div class="icon">
                                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                                </div>
                                                <div class="content">
                                                    <h6>CS Executive</h6>
                                                </div>
                                            </a>
                                        </div>

                                        <div class="GridLex-col-4_sm-6_xs-6_xss-12">
                                            <a href="#" class="category-item">
                                                <div class="icon">
                                                    <i class="fa fa-graduation-cap" aria-hidden="true"></i>
                                                </div>
                                                <div class="content">
                                                    <h6>CS Professional</h6>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- End choose your --}}

        {{-- About --}}
        <section class="section"
            style="background-image:url('{{ asset('public/frontend/images/about-bg.jpg') }}');background-size: cover;padding: 50px 0;">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="section-title text-left">
                            <h2 style="margin-top:60px">About <span style="color: #f39642;">Navin Classes </span> </h2>
                            <p class="about-p">Established in the year 2016 by CA CS Avinash Sancheti & CA Navneet
                                Mundhra, Navin Classes strives to provide a qualitatively superior coaching facility in the
                                field of Commerce</p>
                        </div>
                    </div>
                    <div class="col-md-6">
                        <center><img src="public/frontend/images/hero-header/teacher.png" draggable="false"
                                style="width:100%"></center>
                    </div>
                </div>
            </div>
        </section>
        {{-- End About --}}

        {{-- Meet Our Mentors --}}
        <section class="mycourse-bg cbg">

            <div class="container">

                <div class="row">

                    <div class="col-sm-12 col-md-12 ">

                        <div class="section-title mb-30">
                            <h2 class="text-center text-white">Meet Our Mentors</h2><br>
                        </div>

                    </div>

                </div>

                <div class="row">
                    <div class="col-lg-6">
                        <div class="email-signature">
                            <div class="signature-icon">
                                <img src="{{ asset('public/frontend/images/man/01.jpg') }}" alt="">
                            </div>
                            <div class="signature-details">
                                <h2 class="title"> Avinash Sancheti</h2>
                                <span class="post">CA</span>
                            </div>
                            <p>Avinash Sancheti, 1st division B. Com (H) graduate from St. Xavier’s College, Kolkata is a
                                co-founder of Navin Classes.</p>
                            <p><a href="#!" class="yellow">Read More</a></p>

                            <ul class="icon">
                                <li><a href="" class="fa fa-facebook-f"></a></li>
                                <li><a href="" class="fa fa-twitter"></a></li>
                                <li><a href="" class="fa fa-twitter"></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="email-signature">
                            <div class="signature-icon">
                                <img src="{{ asset('public/frontend/images/man/01.jpg') }}" alt="">
                            </div>
                            <div class="signature-details">
                                <h2 class="title"> Navneet Mundhra</h2>
                                <span class="post">CA</span>
                            </div>
                            <p>Navneet Mundhra, 1st division B. Com (H) graduate from St. Xavier’s College is a co-founder
                                of Navin Classes.</p>
                            <p><a href="#!" class="yellow">Read More</a></p>

                            <ul class="icon">
                                <li><a href="" class="fa fa-facebook-f"></a></li>
                                <li><a href="" class="fa fa-twitter"></a></li>
                                <li><a href="" class="fa fa-twitter"></a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        {{-- END Meet Our Mentors --}}


        {{-- Our Courses --}}
        <section class="section bg-light">

            <div class="container">

                <div class="row">

                    <div class="col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">

                        <div class="section-title">
                            <h2 class="text-center">Latest Courses</h2>
                            <p class="">However venture pursuit he am mr cordial. Forming musical am hearing
                                studied be luckily. <strong>Ourselves for determine</strong> attending how led gentleman
                                sincerity.</p>
                        </div>
                    </div>

                </div>

                <div class="course-item-wrapper gap-20">

                    @if (!empty($products))
                        <div class="GridLex-grid-noGutter-equalHeight GridLex-grid-center">
                            @foreach ($products as $product)
                                <div class="GridLex-col-3_mdd-4_sm-6_xs-6_xss-12">
                                    <div class="course-item">
                                        <a href="{{ asset('course/' . $product->slug) }}">

                                            <div class="course-item-image">
                                                <img src="{{ asset('public/uploads/products/' . $product->image) }}"
                                                    alt="Image" class="img-responsive" />
                                            </div>

                                            <div class="course-item-top clearfix">
                                                <div class="course-item-instructor">