@extends('layouts.front')

@section('meta_info')
    @php
        $settings = \App\Setting::find('1');
    @endphp
    <meta name="title" content="{{ $settings->site_title }}"/>
    <meta name="keywords" content="{{ $settings->meta_keywords }}"/>
    <meta name="description" content="{{ $settings->meta_description }}">
    <meta name="classification" content="Magazine, Newspaper, Artical"/>
    <meta property="og:title" content="{{ $settings->meta_title }}"/>
    <meta property="og:description" content="{{ $settings->meta_description }}">
    <meta property="og:image" content="{{ url($settings->meta_image) }}"/>
    <meta property="og:url" content="{{ $settings->site_url }}"/>
	<meta property="og:site_name" content="{{ $settings->site }}">

@endsection


@section('extra_css')
    
    <style>
        
/*video slider*/

.post-slider .next,
.post-slider .prev{
  font-size: 25px;
    cursor: pointer;
    color: white;
    border: 1px solid white;
    padding: 10px;
    /* border-radius: 50%; */
    /* width: 25px; */
    /* height: 25px; */
}

.post-slider .next{
  position: absolute;
  right: 3%;
  top: 28%;
  z-index: 10;
}
.post-slider .prev{
  position: absolute;
  left: 3%;
  top: 28%;
  z-index: 10;
}
.post-slider h1{
  text-align: center;
}

.post-slider .sl-wrapper{
position: relative;
  width: 100%;
}

.post-slider  .post-wrapper{
  width: 100%;
  height: 230px;
  margin: 0px auto;
  /* border: 1px dotted red; */
  padding: 10px 0px 10px 0px;
  overflow: hidden;
  background: #222;
}
.post-slider .post-wrapper .post{
  width: 300px;
  height: 230px;
  display: inline-block;
  background: white;
  color: white;
  margin: 0 10px;
}

.post-slider .post-wrapper .post .slider-image{
  width: 100%;
  height: 140px;
}

.post-slider .post-wrapper .post .post-info{
  padding: 10px
}

.post-slider .post-wrapper .post .post-info h4{
  border-top: 1px solid #ddd;
    padding: 0 8px;
    display: -webkit-box;
    max-height: 55px;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    letter-spacing: .56px;
    -webkit-line-clamp: 3;
    line-height: 26px;
    color: #fff;
}

.post-slider .post-wrapper .post a,
.post-slider .post-wrapper .post .post-info a{
  color: #222;
    font-size: 17px;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: .56px;
    text-decoration: none;
}
/*===================video slider end ===================*/

    </style>
@endsection

@section('extra_js')
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>-->
    

    <script>
        $(document).ready(function () {

            $(".video-carousel").owlCarousel({
                loop: true,
                margin: 10,
                dots: false,
                nav: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 5
                    }
                }
            });


            $(".photo-carousel").owlCarousel({
                loop: true,
                center: true,
                margin: 30,
                autoplay: true,
                dots: false,
                nav: true,
                autoplayTimeout: 8500,
                smartSpeed: 450,
                navText: ['<i class="glyphicon glyphicon-arrow-left"></i>', '<i class="glyphicon glyphicon-arrow-right"></i>'],
                responsive: {
                    0: {
                        items: 1
                    },
                    768: {
                        items: 1
                    },
                    1170: {
                        items: 1
                    }
                }
            });


        });
    </script>

    <script>
        function openPage(pageName, elmnt, color) {
            var i, tabcontent, tablinks;
            tabcontent = document.getElementsByClassName("tabcontent");
            for (i = 0; i < tabcontent.length; i++) {
                tabcontent[i].style.display = "none";
            }
            tablinks = document.getElementsByClassName("tablink");
            for (i = 0; i < tablinks.length; i++) {
                tablinks[i].style.backgroundColor = "";
            }
            document.getElementById(pageName).style.display = "block";
            elmnt.style.backgroundColor = color;
        }

        // Get the element with id="defaultOpen" and click on it
        // document.getElementById("defaultOpen").click();
    </script>

<script type="text/javascript">
    $(document).ready( function() {

    $('.post-wrapper').slick({
      dots: false,
      slidesToShow: 3,
      slidesToScroll: 1,
      autoplay: true,
      autoplaySpeed: 2000,
      nextArrow: $('.next'),
      prevArrow: $('.prev'),
      responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        infinite: true,
        dots: true
      }
    },
    {
      breakpoint: 600,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2
      }
    },
    {
      breakpoint: 480,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1
      }
    }
    // You can unslick at a given breakpoint now by adding:
    // settings: "unslick"
    // instead of a settings object
  ]
    });

  });
</script>

@endsection



@section('main_content')
<div class="container">
<div class="home__page">
<!--<div class="top-banner-section">
        <div class="container">
            <div class="row">
                <div class="col-md-4">