@extends('layouts.masterrr')
@section('content')
    <div class="main-content">
        <!-- Section: home -->
        <section id="home">
            <div class="container-fluid p-0">

                <!-- Slider Revolution Start -->
                <div class="rev_slider_wrapper">
                    <div class="rev_slider" data-version="5.0">
                        <ul>

                            <!-- SLIDE 1 -->
                            @foreach(\App\Slider::get() as $index=>$slider)
                            <li data-index="rs-{{$index}}" data-transition="slidingoverlayhorizontal" data-slotamount="default" data-easein="default" data-easeout="default" data-masterspeed="default" data-thumb="{{asset('uploads/sliders/'.$slider->image)}}" data-rotate="0" data-saveperformance="off" data-title="Slide {{$index}}" data-description="">
                                <!-- MAIN IMAGE -->
                                <img src="{{asset('uploads/sliders/'.$slider->image)}}"  alt=""  data-bgposition="center 20%" data-bgfit="cover" data-bgrepeat="no-repeat" class="rev-slidebg" data-bgparallax="10" data-no-retina>
                                <!-- LAYERS -->

                                <!-- LAYER NR. 1 -->
                                <div class="tp-caption tp-resizeme text-uppercase text-white font-raleway bg-theme-colored-transparent pr-20 pl-20"
                                     id="rs-3-layer-1"

                                     data-x="['center']"
                                     data-hoffset="['0']"
                                     data-y="['middle']"
                                     data-voffset="['-95']"
                                     data-fontsize="['64']"
                                     data-lineheight="['72']"
                                     data-width="none"
                                     data-height="none"
                                     data-whitespace="nowrap"
                                     data-transform_idle="o:1;s:500"
                                     data-transform_in="y:100;scaleX:1;scaleY:1;opacity:0;"
                                     data-transform_out="x:left(R);s:1000;e:Power3.easeIn;s:1000;e:Power3.easeIn;"
                                     data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
                                     data-start="1000"
                                     data-splitin="none"
                                     data-splitout="none"
                                     data-responsive_offset="on"
                                     style="z-index: 7; white-space: nowrap; font-weight:600;">{{$slider->header}}
                                </div>

                                <!-- LAYER NR. 2 -->
                                <div class="tp-caption tp-resizeme text-uppercase text-black-222 font-raleway"
                                     id="rs-3-layer-2"

                                     data-x="['center']"
                                     data-hoffset="['0']"
                                     data-y="['middle']"
                                     data-voffset="['-25']"
                                     data-fontsize="['32']"
                                     data-lineheight="['54']"
                                     data-width="none"
                                     data-height="none"
                                     data-whitespace="nowrap"
                                     data-transform_idle="o:1;s:500"
                                     data-transform_in="y:100;scaleX:1;scaleY:1;opacity:0;"
                                     data-transform_out="x:left(R);s:1000;e:Power3.easeIn;s:1000;e:Power3.easeIn;"
                                     data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
                                     data-start="1000"
                                     data-splitin="none"
                                     data-splitout="none"
                                     data-responsive_offset="on"
                                     style="z-index: 7; white-space: nowrap; font-weight:600;">{{$slider->title}}
                                </div>

                                <!-- LAYER NR. 3 -->
                                <div class="tp-caption tp-resizeme text-black-444 text-center"
                                     id="rs-3-layer-3"

                                     data-x="['center']"
                                     data-hoffset="['0']"
                                     data-y="['middle']"
                                     data-voffset="['30']"
                                     data-fontsize="['14','16',20']"
                                     data-lineheight="['25']"
                                     data-width="none"
                                     data-height="none"
                                     data-whitespace="nowrap"
                                     data-transform_idle="o:1;s:500"
                                     data-transform_in="y:100;scaleX:1;scaleY:1;opacity:0;"
                                     data-transform_out="x:left(R);s:1000;e:Power3.easeIn;s:1000;e:Power3.easeIn;"
                                     data-mask_in="x:0px;y:0px;s:inherit;e:inherit;"
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
                                     data-start="1400"
                                     data-splitin="none"
                                     data-splitout="none"
                                     data-responsive_offset="on"
                                     style="z-index: 5; white-space: nowrap; letter-spacing:0px; font-weight:400;">{!!$slider->descrption!!}.
                                </div>

                                <!-- LAYER NR. 4 -->
                                <div class="tp-caption tp-resizeme"
                                     id="rs-3-layer-4"

                                     data-x="['center']"
                                     data-hoffset="['0']"
                                     data-y="['middle']"
                                     data-voffset="['95']"
                                     data-width="none"
                                     data-height="none"
                                     data-whitespace="nowrap"
                                     data-transform_idle="o:1;"
                                     data-transform_in="y:[100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;opacity:0;s:2000;e:Power4.easeInOut;"
                                     data-transform_out="y:[100%];s:1000;e:Power2.easeInOut;s:1000;e:Power2.easeInOut;"
                                     data-mask_in="x:0px;y:[100%];s:inherit;e:inherit;"
                                     data-mask_out="x:inherit;y:inherit;s:inherit;e:inherit;"
                                     data-start="1400"
                                     data-splitin="none"
                                     data-splitout="none"
                                     data-responsive_offset="on"
                                     style="z-index: 5; white-space: nowrap; letter-spacing:1px;"><a class="btn btn-colored btn-lg btn-flat btn-theme-colored pl-20 pr-20" href="{{route('contact')}}">Contact Us</a>
                                </div>
                            </li>
                                   @endforeach


                        </ul>
                    </div>
                    <!-- end .rev_slider -->
                </div>
                <!-- end .rev_slider_wrapper -->
                <script>
                    $(document).ready(function(e) {
                        $(".rev_slider").revolution({
                            sliderType:"standard",
                            sliderLayout: "auto",
                            dottedOverlay: "none",
                            delay: 5000,
                            navigation: {
                                keyboardNavigation: "off",
                                keyboard_direction: "horizontal",
                                mouseScrollNavigation: "off",
                                onHoverStop: "off",
                                touch: {
                                    touchenabled: "on",
                                    swipe_threshold: 75,
                                    swipe_min_touches: 1,
                                    swipe_direction: "horizontal",
                                    drag_block_vertical: false
                                },
                                arrows: {
                                    style:"gyges",
                                    enable:true,
                                    hide_onmobile:true,
                                    hide_under:600,
                                    hide_onleave:true,
                                    hide_delay:200,
                                    hide_delay_mobile:1200,
                                    tmp:'<div class="tp-title-wrap">    <div class="tp-arr-imgholder"></div> </div>',
                                    left: {
                                        h_align:"left",
                                        v_align:"center",
                                        h_offset:30,
                                        v_offset:0
                                    },
                                    right: {
                                        h_align:"right",
                                        v_align:"center",
                                        h_offset:30,
                                        v_offset:0
                                    }
                                },
                                bullets: {
                                    enable:true,
                                    hide_onmobile:true,
                                    hide_under:600,
                                    style:"metis",
                                    hide_onleave:true,
                                    hide_delay:200,
                                    hide_delay_mobile:1200,
                                    direction:"horizontal",
                                    h_align:"center",
                                    v_align:"bottom",
                                    h_offset:0,
                                    v_offset:30,
                                    space:5,
                                    tmp:'<span class="tp-bullet-img-wrap">  <span class="tp-bullet-image"></span></span><span class="tp-bullet-title">{{'slider'}}</span>'
                                }
                            },
                            responsiveLevels: [1240, 1024, 778],
                            visibilityLevels: [1240, 1024, 778],
                            gridwidth: [1170, 1024, 778, 480],
                            gridheight: [600, 768, 960, 720],
                            lazyType: "none",
                            parallax: {
                                origo: "slidercenter",
                                speed: 1000,
                                levels: [5, 10, 15, 20, 25, 30, 35, 40, 45, 46, 47, 48, 49, 50, 100, 55],
                                type: "scroll"
                            },
                            shadow: 0,
                            spinner: "off",
                            stopLoop: "on",
                            stopAfterLoops: 0,
                            stopAtSlide: -1,
                            shuffle: "off",
                            autoHeight: "off",
                            fullScreenAutoWidth: "off",
                            fullScreenAlignForce: "off",
                            fullScreenOffsetContainer: "",
                            fullScreenOffset: "0",
                            hideThumbsOnMobile: "off",
                            hideSliderAtLimit: 0,
                            hideCaptionAtLimit: 0,
                            hideAllCaptionAtLilmit: 0,
                            debugMode: false,
                            fallbacks: {
                                simplifyAll: "off",
                                nextSlideOnWindowFocus: "off",
                                disableFocusListener: false,
                            }
                        });
                    });
                </script>
                <!-- Slider Revolution Ends -->

            </div>
        </section>

        {{--<section>--}}
            {{--<div class="container-fluid p-0 p-sm-15">--}}
                {{--<div class="section-content">--}}
                    {{--<div class="row equal-height-inner home-boxes">--}}
                        {{--<div class="col-sm-12 col-md-3 pr-0 pr-sm-15 sm-height-auto mt-sm-0 wow fadeInLeft animation-delay1">--}}
                            {{--<div class="sm-height-auto bg-theme-colored">--}}
                                {{--<div class="p-30">--}}
                                    {{--<div class="footer-box icon-box media mb-10"> <a href="#" class="media-left pull-left mr-10 mr-sm-15"><i class="flaticon-medical-ambulance9 text-white"></i></a>--}}
                                        {{--<div class="media-body">--}}
                                            {{--<h4 class="text-uppercase text-white mt-0">24 Hours Service</h4>--}}
                                            {{--<a href="ajax-load/form-appointment.html" class="btn btn-border btn-circled btn-transparent btn-xs mt-5 ajaxload-popup">Contact us</a>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="col-sm-12 col-md-3 pl-0 pl-sm-15 pr-0 pr-sm-15 sm-height-auto mt-sm-0 wow fadeInLeft animation-delay2">--}}
                            {{--<div class="sm-height-auto bg-theme-colored-darker2">--}}
                                {{--<div class="p-30">--}}
                                    {{--<div class="footer-box icon-box media mb-10"> <a href="#" class="media-left pull-left mr-10 mr-sm-15"><i class="flaticon-medical-heart255 text-white"></i></a>--}}
                                        {{--<div class="media-body">--}}
                                            {{--<h4 class="text-uppercase text-white mt-0">Online Help</h4>--}}
                                            {{--<a href="form-appointment-style1.html" class="btn btn-border btn-circled btn-transparent btn-xs mt-5">Read More</a>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="col-sm-12 col-md-3 pl-0 pr-0 pl-sm-15 pr-sm-15 sm-height-auto mt-sm-0 wow fadeInLeft animation-delay3">--}}
                            {{--<div class="sm-height-auto bg-theme-colored-darker3">--}}
                                {{--<div class="p-30">--}}
                                    {{--<div class="footer-box icon-box media mb-10"> <a href="#" class="media-left pull-left mr-10 mr-sm-15"><i class="flaticon-medical-medical109 text-white"></i></a>--}}
                                        {{--<div class="media-body">--}}
                                            {{--<h4 class="text-uppercase text-white mt-0">Online Payment</h4>--}}
                                            {{--<a href="form-paypal-cart-style1.html" class="btn btn-border btn-circled btn-transparent btn-xs mt-5">Contact us</a>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="col-sm-12 col-md-3 pl-0 pl-sm-15 sm-height-auto mt-sm-0 wow fadeInLeft animation-delay4">--}}
                            {{--<div class="sm-height-auto bg-theme-colored-darker4">--}}
                                {{--<div class="p-30">--}}
                                    {{--<div class="footer-box icon-box media mb-10"> <a href="#" class="media-left pull-left mr-10 mr-sm-15"><i class="flaticon-medical-medical50 text-white"></i></a>--}}
                                        {{--<div class="media-body">--}}
                                            {{--<h4 class="text-uppercase text-white mt-0">Time Table</h4>--}}
                                            {{--<a href="page-timetable.html" class="btn btn-border btn-circled btn-transparent btn-xs mt-5">Read More</a>--}}
                                        {{--</div>--}}
                                    {{--</div>--}}
                                {{--</div>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</section>--}}

        <!-- Section: Our Mission -->
        <section>
            <div class="container pb-60">
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="row">
                                <div class="col-sm-6 col-md-6">
                                    <div class="thumb">
                                        <img src="images/photos/p1f.jpg" class="mt-5" alt="">
                                    </div>
                                    <div class="mb-15">
                                        <h4 class="font-raleway font-weight-700"><a href="page-doctors-details.html">Dr. Hopkins<small>-Medical Surgeon</small></a></h4>
                                        <h6 class="text-black-555">Speciality  :   Cosmetic Surgeon</h6>
                                        <h6 class="text-black-555">Qualification   :   DNB (Plastic Surgery)</h6>
                                    </div>
                                </div>
                                <div class=" col-sm-6 col-md-6">
                                    <div class="thumb">
                                        <img src="images/photos/p2f.jpg" class="mt-5" alt="">
                                    </div>
                                    <div class="mb-15">
                                        <h4 class="font-raleway font-weight-700"><a href="page-doctors-details.html">Dr. Alice<small>-Obesity Surgeon</small></a></h4>
                                        <h6 class="text-black-555">Speciality  :   Obesity Surgeon</h6>
                                        <h6 class="text-black-555">Qualification   :   M.S , FAIS , FICS</h6>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <div class="border-5px p-30">
                                <h5><i class="fa fa-clock-o text-theme-colored"></i> Opening Hours</h5>
                                <div class="opening-hours text-left">
                                    <ul class="list-unstyled">
                                        <li class="clearfix line-height-1"> <span> Tuesday - Friday </span>
                                            <div class="value"> 9.00 - 20.00 </div>
                                        </li>
                                        <li class="clearfix line-height-1"> <span> Saturday </span>
                                            <div class="value"> 10.00 - 16.00 </div>
                                        </li>
                                        <li class="clearfix line-height-1"> <span> Sunday </span>
                                            <div class="value"> 9.30 - 18.00 </div>
                                        </li>
                                        <li class="clearfix line-height-1"> <span> Monday </span>
                                            <div class="value"> 9.00 - 18.00 </div>
                                        </li>
                                    </ul>
                                </div>
                                <h5 class="mt-30"><i class="fa fa-pencil-square-o text-theme-colored"></i> Need Help?</h5>
                                <p class="mt-0">Just make an appointment to get help from our experts</p>
                                <a href="#" class="btn btn-dark btn-theme-colored mt-15" data-toggle="modal" data-target="#modal_appontment_form_at_about">Request an appointment</a>

                                <!-- Modal - Appontment Form Starts -->
                                <div class="modal fade" id="modal_appontment_form_at_about" tabindex="-1" role="dialog">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="border-1px p-25">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                                                <h4 class="text-theme-colored text-uppercase m-0">Make an Appointment</h4>
                                                <div class="line-bottom mb-30"></div>
                                                <p>Lorem ipsum dolor sit amet, consectetur elit.</p>
                                                <!-- Appointment Form -->
                                                <form novalidate="novalidate" id="appointment_form_at_home" name="appointment_form_at_home" class="" method="post" action="http://thememascot.net/demo/personal/f/drpoint/2.1/demo/includes/appointment.php">
                                                    <div class="row">
                                                        <div class="col-sm-12">
                                                            <div class="form-group mb-10">
                                                                <input type="text" name="form_name" class="form-control" required="" placeholder="Enter Name" aria-required="true">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group mb-10">
                                                                <input type="email" id="form_email" name="form_email" class="form-control required email" placeholder="Enter Email" aria-required="true">
                                                            </div>
                                                        </div>
                                                        <div class="col-sm-12">
                                                            <div class="form-group mb-10">
                                                                <input type="text" name="form_appontment_date" class="form-control required datetime-picker" placeholder="Appoinment Date &amp; Time" aria-required="true">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="form-group mb-10">
                                                        <textarea name="form_message" class="form-control required" placeholder="Enter Message" rows="5" aria-required="true"></textarea>
                                                    </div>
                                                    <div class="form-group mb-0 mt-20">
                                                        <input type="hidden" name="form_botcheck" class="form-control" value="">
                                                        <button type="submit" class="btn btn-dark btn-theme-colored" data-loading-text="Please wait...">Send Message</button>
                                                    </div>
                                                </form>

                                                <!-- Appointment Form Validation-->
                                                <script type="text/javascript">
                                                    $("#appointment_form_at_home").validate({
                                                        submitHandler: function(form) {
                                                            var form_btn = $(form).find('button[type="submit"]');
                                                            var form_result_div = '#form-result';
                                                            $(form_result_div).remove();
                                                            form_btn.before('&amp;lt;div id="form-result" class="alert alert-success" role="alert" style="display: none;"&amp;gt;&amp;lt;/div&amp;gt;');
                                                            var form_btn_old_msg = form_btn.html();
                                                            form_btn.html(form_btn.prop('disabled', true).data("loading-text"));
                                                            $(form).ajaxSubmit({
                                                                dataType:  'json',
                                                                success: function(data) {
                                                                    if( data.status == 'true' ) {
                                                                        $(form).find('.form-control').val('');
                                                                    }
                                                                    form_btn.prop('disabled', false).html(form_btn_old_msg);
                                                                    $(form_result_div).html(data.message).fadeIn('slow');
                                                                    setTimeout(function(){ $(form_result_div).fadeOut('slow') }, 6000);
                                                                }
                                                            });
                                                        }
                                                    });
                                                </script>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!-- Modal - Appontment Form Ends -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section class="divider parallax layer-overlay overlay-dark-5" data-bg-img="images/bg/bg13.jpg">
            <div class="container pt-0 pb-0">
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-7 sm-height-auto">
                            <div class="p-50 p-sm-30 pb-30 pt-sm-60 bg-deep-transparent">
                                <h4 class="title mt-0 line-bottom line-height-2 text-black-222 mb-30">Why People<span class="text-theme-colored"> Choose Us</span></h4>
                               @foreach(App\Feature::where('type','why_choose_us')->get() as $why)
                                <div class="items mb-30">
                                    <div class="icon-box p-0">
                                        <a href="#" class="icon mb-0 mr-0 pull-left">
                                            <img src="{{asset('uploads/featuers/'.$why->picture)}}" style="width: 250px">
                                        </a>
                                        <div class="ml-80">
                                            <h5 class="icon-box-title">{{$why->head}}</h5>
                                            <p class="text-black-333">{!! $why->description !!}<a class="font-13" href="page-fundraise.html">Read more...</a></p>
                                        </div>
                                    </div>
                                </div>
                                @endforeach


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section: Why Choose Us  -->
        <section id="services">
            <div class="container pb-30">
                <div class="section-title text-center">
                    <div class="row">
                        <div class="col-md-12">
                            <h2 class="mt-0 line-height-1">Services</h2>
                        </div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="row mtli-row-clearfix">
                        @foreach(\App\Feature::where('type','service')->get() as $serves)
                        <div class="col-xs-12 col-sm-6 col-md-4">
                            <div class="icon-box p-20 mb-30 border-1px">
                                <div class="media-left">
                                    <a class="icon icon-color flip mb-0 mr-0 mt-5" href="#">
                                        <img src="{{asset('uploads/featuers/'.$serves->picture)}}" style="width: 250px">
                                    </a>
                                </div>
                                <div class="icon-box-details media-body">
                                    <h5 class="icon-box-title m-0 mb-5">{{$serves->head}} </h5>
                                    <p class="mb-0">{!! $serves->description !!}</p>
                                    <a href="#">read more</a>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </section>



        <!-- Divider: Funfact -->
        <section class="divider parallax layer-overlay overlay-dark-7" data-bg-img="images/bg/bg13.jpg" data-parallax-ratio="0.7">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-6 col-md-3 mb-md-50 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s">
                        <div class="funfact">
                            <i class="pe-7s-smile text-white-f1 mt-20 font-48 pull-left flip"></i>
                            <div class="ml-60">
                                <h2 class="animate-number text-white-f1 mt-0 mb-0 font-48 line-bottom" data-value="754" data-animation-duration="2000">0</h2>
                                <div class="clearfix"></div>
                                <h5 class="text-white-f1">Happy Donators</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3 mb-md-50 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.4s">
                        <div class="funfact">
                            <i class="pe-7s-rocket text-white-f1 mt-20 font-48 pull-left flip"></i>
                            <div class="ml-60">
                                <h2 class="animate-number text-white-f1 mt-0 mb-0 font-48 line-bottom" data-value="125" data-animation-duration="2500">0</h2>
                                <div class="clearfix"></div>
                                <h5 class="text-white-f1">Success Mission</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3 mb-md-50 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.5s">
                        <div class="funfact">
                            <i class="pe-7s-add-user text-white-f1 mt-20 font-48 pull-left flip"></i>
                            <div class="ml-60">
                                <h2 class="animate-number text-white-f1 mt-0 mb-0 font-48 line-bottom" data-value="150" data-animation-duration="3000">0</h2>
                                <div class="clearfix"></div>
                                <h5 class="text-white-f1">Volunteer Reached</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-12 col-sm-6 col-md-3 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.6s">
                        <div class="funfact">
                            <i class="pe-7s-global text-white-f1 mt-20 font-48 pull-left flip"></i>
                            <div class="ml-60">
                                <h2 class="animate-number text-white-f1 mt-0 mb-0 font-48 line-bottom" data-value="55" data-animation-duration="3500">0</h2>
                                <div class="clearfix"></div>
                                <h5 class="text-white-f1">Globalization Work</h5>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section: team -->
        <section>
            <div class="container pb-30 pb-sm-0">
                <div class="section-title text-center">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2">
                            <h2 class="mt-0 line-height-1 text-center text-uppercase">Meet Our <span class="text-theme-colored">Doctors</span></h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem temporibus quisquam voluptas natus, provident porro et odio perferendis ipsam, amet sint</p>
                        </div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="row">
                        @foreach(App\Testmonial::take(4)->get() as $team)
                            @php
                                $str = str_split($team->body,25);
                                $new = implode('<br>',$str);
                            @endphp
                        <div class="col-sm-6 col-md-3 mb-sm-30">
                            <div class="team-block">
                                <div class="team-thumb"><img class="img-fullwidth" src="{{asset('uploads/testmonials/'.$team->image)}}" alt="">
                                    <div class="team-overlay">
                                        <ul class="list-inline text-white font-12 mb-10">
                                            <li><i aria-hidden="true" class="fa fa-phone text-theme-color-2 mr-10"></i>Mob: {{$team->mobile}}</li>
                                            <li><i aria-hidden="true" class="fa fa-envelope-o text-theme-color-2 mr-10"></i>Email:{{$team->email}}</li>
                                        </ul>
                                        <p class="text-white font-13 mt-10">{!! $new !!}</p>
                                    </div>
                                </div>
                                <div class="info bg-white text-center">
                                    <h4>{{$team->name}} <small>- {{$team->shortname}}</small></h4>

                                    <p>{!! $new !!}</p>
                                    <ul class="styled-icons icon-theme-colored icon-circled icon-dark icon-sm mt-15 mb-0">
                                        <li><a href="{{$team->facebook}}"><i class="fa fa-facebook"></i></a></li>
                                        <li><a href="{{$team->twitter}}"><i class="fa fa-twitter"></i></a></li>
                                        <li><a href="{{$team->Gmail}}"><i class="fa fa-google-plus"></i></a></li>

                                    </ul>
                                </div>
                            </div>
                        </div>
                        @endforeach

                    </div>
                </div>
            </div>
        </section>

        {{--<!-- Section: Divider  -->--}}
        {{--<section class="divider layer-overlay overlay-black" data-bg-img="images/bg/bg6.jpg" >--}}
            {{--<div class="container pb-150 pb-sm-0">--}}
                {{--<div class="section-title text-center pb-140 pb-sm-0 pt-0">--}}
                    {{--<div class="row">--}}
                        {{--<div class="col-xs-12 col-sm-12 col-md-8 col-md-offset-2">--}}
                            {{--<h2 class="title text-uppercase text-white">Pricing <span class="text-theme-colored">List</span></h2>--}}
                            {{--<p class="text-uppercase letter-space-1 text-white">Lorem ipsum dolor sit amet, consectetur adipisicing elit.Acque quidem eaque, amet doloribus, error inventore, quisquam totam magni cumque.</p>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</section>--}}

        {{--<!-- Section: Pricing Table -->--}}
        {{--<section id="pricing">--}}
            {{--<div class="container pt-sm-0 pb-sm-30">--}}
                {{--<div class="section-content">--}}
                    {{--<div class="row">--}}
                        {{--<div class="col-xs-12 col-sm-4 col-md-4 hvr-float-shadow mb-sm-30">--}}
                            {{--<div class="pricing-table text-center pt-30 pb-0 mt-sm-0 maxwidth400 bg-lighter" data-margin-top="-320px">--}}
                                {{--<h5 class="package-type mb-30 text-uppercase">Blood Test</h5>--}}
                                {{--<div class="price pt-5 pb-5 bg-black-222"> <div class="price-period">--}}
                                        {{--<h6 class="text-white"><em>per test</em></h6>--}}
                                    {{--</div> </div>--}}
                                {{--<div class="price-amount bg-theme-colored rotate">--}}
                                    {{--<div class="no-rotate text-white">75<sup>$</sup></div>--}}
                                {{--</div>--}}
                                {{--<ul class="list table-list text-left flip check-circle pt-20 pb-20 pr-20 bg-lighter">--}}
                                    {{--<li>Free Consultation</li>--}}
                                    {{--<li>Fitness Assessment</li>--}}
                                    {{--<li>24 Hour boxing</li>--}}
                                    {{--<li>Nutrional Plan: No</li>--}}
                                {{--</ul>--}}
                                {{--<a class="btn btn-lg btn-theme-colored text-uppercase btn-block pt-20 pb-20 btn-flat" href="#">Contact Now</a>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="col-xs-12 col-sm-4 col-md-4 hvr-float-shadow mb-sm-30">--}}
                            {{--<div class="pricing-table text-center pt-30 pb-0 mt-sm-0 maxwidth400 bg-lighter" data-margin-top="-320px">--}}
                                {{--<h5 class="package-type mb-30 text-uppercase">Medical Checkup</h5>--}}
                                {{--<div class="price pt-5 pb-5 bg-theme-colored"> <div class="price-period">--}}
                                        {{--<h6 class="text-white"><em>per test</em></h6>--}}
                                    {{--</div> </div>--}}
                                {{--<div class="price-amount bg-theme-colored rotate">--}}
                                    {{--<div class="no-rotate text-white">240<sup>$</sup></div>--}}
                                {{--</div>--}}
                                {{--<ul class="list table-list text-left flip check-circle pt-20 pb-20 pr-20 bg-lighter">--}}
                                    {{--<li>Free Consultation</li>--}}
                                    {{--<li>Fitness Assessment</li>--}}
                                    {{--<li>24 Hour boxing</li>--}}
                                    {{--<li>Nutrional Plan: No</li>--}}
                                {{--</ul>--}}
                                {{--<a class="btn btn-lg btn-theme-colored text-uppercase btn-block pt-20 pb-20 btn-flat" href="#">Contact Now</a>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                        {{--<div class="col-xs-12 col-sm-4 col-md-4 hvr-float-shadow mb-sm-30">--}}
                            {{--<div class="pricing-table text-center pt-30 pb-0 mt-sm-0 maxwidth400 bg-lighter" data-margin-top="-320px">--}}
                                {{--<h5 class="package-type mb-30 text-uppercase">Dental Care</h5>--}}
                                {{--<div class="price pt-5 pb-5 bg-black-222"> <div class="price-period">--}}
                                        {{--<h6 class="text-white"><em>per test</em></h6>--}}
                                    {{--</div> </div>--}}
                                {{--<div class="price-amount bg-theme-colored rotate">--}}
                                    {{--<div class="no-rotate text-white">880<sup>$</sup></div>--}}
                                {{--</div>--}}
                                {{--<ul class="list table-list text-left flip check-circle pt-20 pb-20 pr-20 bg-lighter">--}}
                                    {{--<li>Free Consultation</li>--}}
                                    {{--<li>Fitness Assessment</li>--}}
                                    {{--<li>24 Hour boxing</li>--}}
                                    {{--<li>Nutrional Plan: No</li>--}}
                                {{--</ul>--}}
                                {{--<a class="btn btn-lg btn-theme-colored text-uppercase btn-block pt-20 pb-20 btn-flat" href="#">Contact Now</a>--}}
                            {{--</div>--}}
                        {{--</div>--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</div>--}}
        {{--</section>--}}

        <!-- Section: Call To Action -->
        <section class="bg-theme-colored border-left border-3px">
            <div class="container pt-20 pb-20">
                <div class="call-to-action">
                    <div class="row">
                        <div class="col-sm-8 sm-text-center">
                            <h4 class="text-uppercase text-white">Best Medical service in the town!</h4>
                            <p class="text-white">Alienum phaedrum torquatos nec eu, vis detraxit periculis ex.</p>
                        </div>
                        <div class="col-sm-4 text-right flip sm-text-center">
                            <a href="page-contact1.html" class="btn btn-default mt-30 mt-sm-20">Contact With Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section: Gallery-->
        @if(\App\Product::all()->count() > 0)
        <section>
            <div class="container pb-0">
                <div class="section-title text-center">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
                            <h2 class="mt-0 line-height-1 text-center text-uppercase">Our <span class="text-theme-colored">Products</span></h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem temporibus quisquam voluptas natus, provident porro et odio perferendis ipsam, amet sint</p>
                        </div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- Works Filter -->
                            <div class="portfolio-filter font-alt text-center">
                                <a href="#" class="active" data-filter="*">All</a>
                            </div>
                            <!-- End Works Filter -->
                            <!-- Portfolio Gallery Grid -->
                            <div id="grid" class="gallery-isotope grid-3 gutter clearfix">
                                <!-- Portfolio Item Start -->
                                @foreach(\App\Product::take(9)->get() as $product)
                                <div class="gallery-item dental">
                                    <div class="thumb">
                                        <img class="img-fullwidth" src="{{asset('uploads/products/'.$product->image)}}" alt="project">
                                        <div class="overlay-shade"></div>
                                        <div class="text-holder text-center">
                                            <h5 class="title">{{$product->name}}</h5>
                                        </div>
                                        <div class="icons-holder">
                                            <div class="icons-holder-inner">
                                                <div class="styled-icons icon-sm icon-dark icon-circled icon-theme-colored">
                                                    <a data-lightbox="image" href="{{asset('uploads/products/'.$product->image)}}"><i class="fa fa-plus"></i></a>
                                                    <a href="#"><i class="fa fa-link"></i></a>
                                                </div>
                                            </div>
                                        </div>
                                        <a class="hover-link" data-lightbox="image" href="{{asset('uploads/products/'.$product->image)}}">View more</a>
                                    </div>
                                </div>
                                <!-- Portfolio Item End -->
                                     @endforeach

                            </div>
                            <!-- End Portfolio Gallery Grid -->
                        </div>
                    </div>
                </div>
            </div>
        </section>
    @endif
        <!-- Divider: testimonials -->
        <section class="divider parallax layer-overlay overlay-white-6" data-bg-img="images/bg/bg6.jpg" data-parallax-ratio="0.7">
            <div class="container">
                <div class="section-content">
                    <div class="row">
                        <div class="col-md-10 col-md-offset-1">
                            <div class="testimonial">
                                <div class="owl-carousel-1col" data-dots="true">
                                    <div class="item text-center">
                                        <a class="mt-20 display-block" href="#">
                                            <img alt="" src="images/testimonials/1.jpg" class="p-5 border-2px">
                                        </a>
                                        <h4 class="service-box-title font-weight-800 text-black-222">Corvin Adams</h4>
                                        <span class="font-14 font-weight-600 text-theme-colored">web Desinger (ceo)</span>
                                        <p class="mb-0 font-droid font-22 text-black-444 mt-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel esse quibusdam nihil a necessitatibus natus, voluptas fugiat officiis ipsa earum unde sit consequatur. Maxime harum ab pariatur obcaecati ut eos voluptatum.</p>
                                        <i class="fa fa-quote-left text-gray-lightgray font-42 mt-20"></i>
                                    </div>
                                    <div class="item text-center">
                                        <a class="mt-20 display-block" href="#">
                                            <img alt="" src="images/testimonials/2.jpg" class="p-5 border-2px">
                                        </a>
                                        <h4 class="service-box-title font-weight-800 text-black-222">Corvin Adams</h4>
                                        <span class="font-14 font-weight-600 text-theme-colored">web Desinger (ceo)</span>
                                        <p class="mb-0 font-droid font-22 text-black-444 mt-20">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel esse quibusdam nihil a necessitatibus natus, voluptas fugiat officiis ipsa earum unde sit consequatur. Maxime harum ab pariatur obcaecati ut eos voluptatum.</p>
                                        <i class="fa fa-quote-left text-gray-lightgray font-42 mt-20"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Section: blog -->
        <section id="blog">
            <div class="container pb-sm-30">
                <div class="section-title text-center">
                    <div class="row">
                        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
                            <h2 class="mt-0 line-height-1 text-center text-uppercase">Latest <span class="text-theme-colored">News</span></h2>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur quidem temporibus quisquam voluptas natus, provident porro et odio perferendis ipsam, amet sint</p>
                        </div>
                    </div>
                </div>
                <div class="section-content">
                    <div class="row">
                        @foreach(\App\Blog::take(3)->latest()->get() as $blog)
                        <div class="col-sm-4 col-md-4 col-lg-4 wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0.3s">
                            <article class="post clearfix mb-sm-30 bg-lighter">
                                <div class="entry-header">
                                    <div class="post-thumb thumb">
                                        <img src="{{asset('uploads/blog/'.$blog->image)}}" alt="" class="img-responsive img-fullwidth">
                                    </div>
                                </div>
                                <div class="entry-content p-20 pr-10">
                                    <div class="entry-meta media mt-0 no-bg no-border">
                                        <div class="entry-date media-left text-center flip bg-theme-colored pt-5 pr-15 pb-5 pl-15">
                                            <ul>
                                                                                                    <li class="border-bottom">{{$str[1].'/'.$str[2]}}</li>
                                                <li class="border-bottom">{{$str[0]}}</li>

                                            </ul>
                                        </div>
                                        <div class="media-body pl-15">
                                            <div class="event-content pull-left flip">
                                                <h5 class="entry-title text-white text-uppercase m-0 mt-5"><a href="#">{{$blog->title}}</a></h5>
                                            </div>
                                        </div>
                                    </div>
                                    <p class="mt-10">{!! $blog->descrption !!}</p>
                                    <a href="#" class="btn-read-more">Read more</a>
                                    <div class="clearfix"></div>
                                </div>
                            </article>
                        </div>
                     @endforeach
                    </div>
                </div>
            </div>
        </section>

        <!-- Divider: Call To Action -->
        <section class="bg-theme-colored">
            <div class="container pt-0 pb-0">
                <div class="row">
                    <div class="call-to-action pt-30 pb-20">
                        <div class="col-sm-4 col-md-4">
                            <div class="widget border-right mb-15"> <i class="fa fa-map text-white pull-left flip font-32 mr-30 mt-5"></i>
                                <h5 class="text-white mb-5 font-weight-600"> 121 King Street melbourne, Australia</h5>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="widget mb-15"> <i class="fa fa-envelope-o text-white pull-left flip font-36 mr-30"></i>
                                <h5 class="text-white mb-5 pt-5 font-weight-600"> you@yourdomain.com</h5>
                            </div>
                        </div>
                        <div class="col-sm-4 col-md-4">
                            <div class="widget mb-15">
                                <!-- Mailchimp Subscription Form Starts Here -->
                                <form id="mailchimp-subscription-form" class="newsletter-form mt-15">
                                    <div class="input-group">
                                        <input type="email" value="" name="EMAIL" placeholder="Your Email" class="form-control input-lg font-16" data-height="45px" id="mce-EMAIL1">
                                        <span class="input-group-btn">
                      <button data-height="45px" class="btn btn-default btn-gray btn-xs font-14 m-0" type="submit">Subscribe</button>
                    </span>
                                    </div>
                                </form>
                                <!-- Mailchimp Subscription Form Validation-->
                                <script type="text/javascript">
                                    $('#mailchimp-subscription-form').ajaxChimp({
                                        callback: mailChimpCallBack,
                                        url: '//thememascot.us9.list-manage.com/subscribe/post?u=a01f440178e35febc8cf4e51f&amp;id=49d6d30e1e'
                                    });

                                    function mailChimpCallBack(resp) {
                                        // Hide any previous response text
                                        var $mailchimpform = $('#mailchimp-subscription-form'),
                                            $response = '';
                                        $mailchimpform.children(".alert").remove();
                                        if (resp.result === 'success') {
                                            $response = '<div class="alert alert-success"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + resp.msg + '</div>';
                                        } else if (resp.result === 'error') {
                                            $response = '<div class="alert alert-danger"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + resp.msg + '</div>';
                                        }
                                        $mailchimpform.prepend($response);
                                    }
                                </script>
                                <!-- Mailchimp Subscription Form Ends Here -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    @endsection