@extends('front.layouts.main')
@section('main-container')
<div class="inner-banner">
    <img src="{{ asset('/upload/banner/')}}/{{ $data['banner']['image'] }}" class="img-fluid">
    <div class="banner-text">
        <div class="container">
            <div class="row">
            <h6>{!! $data['banner']['title'] !!}</h6>
            <h1>{!! strip_tags($data['banner']['content'], '<br>') !!}</h1>
            </div>
        </div>
    </div>
</div>
<section class="inneroverview">
        <div class="container">
            <div class="row">
                <ul class="breadcrumb">
                    <li><a href="{{ route('home')}}">Home <span> > </span></a></li>
                    <li class="active">About</li>
                </ul>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-md-5 mb-2">
                    <h6>Overview</h6>
                    <h2>CSR Initiatives</h2>
                   </div>
                <div class="offset-md-1 col-md-6">
                   <p>At Kamdhenu, we believe in giving back to society. Our CSR initiatives focus on:</p>
                </div>
            </div>
        </div>
                <div class="col-md-12">
                    <div class="fourslidestagepadding owl-carousel owl-theme mt-3">
                    @if(isset($data['csr_initiative'][0]['title']))
                    @foreach($data['csr_initiative'] as $core)
                        <div class="item ">
                            <div class="caltural">
                                <img src="{{ asset('/upload/')}}/{{ $core['image'] }}" class="img-fluid">
                                <h4>{{ $core['title'] }}</h4>
                                {{ $core['content'] }}
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                </div>
                
          <!--   </div>
        </div> -->
    </section>
    @if(isset($data['csr_bottom']['title']))
     <section class="ourmissing relative">
        <img src="{{asset('/upload')}}/{{$data['csr_bottom']['image']}}" class="img-fluid" >
        <div class="container absolute">
            <div class="row">
                <div class="col-md-12">
                    <div class="sustainabilitydata">
                        <p>{!! $data['csr_bottom']['title'] !!}</p>
                       <h3 class="wow animated fadeInLeft" data-wow-duration="2s">{!! $data['csr_bottom']['content'] !!}</h3>
                        <a href="#" class="btn-primary wow animated fadeInRight" data-wow-duration="2s"><span class="first-span">Learn</span><span class="textred">More <i class="fa-solid fa-arrow-right-long"></i></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    @endif
@endsection
@section("js")
<script type="text/javascript">

     $('.fourslidestagepadding').owlCarousel({
        loop: true,
        margin: 30,
        dots: false,
        autoplay:false,
        autoplayTimeout: 3000,
        nav: true,
        items: 4,
         navText: ["<i class='fa-solid fa-arrow-left'></i>", "<i class='fa-solid fa-arrow-right'></i>"],
        responsive:{
                0:{
                    items: 1
                },                
                728:{
                    items:2
                },
                960:{
                    items:3
                },
                1300:{
                    items:4.5

                }
            }
    })
</script>
<script>
    $(document).ready(function() {
    var a = 0;
$(window).scroll(function () {
var oTop = $("#counter-box").offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$(".counter").each(function () {
var $this = $(this),
countTo = $this.attr("data-number");
$({
countNum: $this.text()
}).animate(
{
    countNum: countTo
},

{
    duration: 3000,
    easing: "swing",
    step: function () {
        //$this.text(Math.ceil(this.countNum));
        $this.text(
            Math.ceil(this.countNum).toLocaleString("en")
        );
    },
    complete: function () {
        $this.text(
            Math.ceil(this.countNum).toLocaleString("en")
        );
        //alert('finished');
    }
}
);
});
a = 1;
}
});

    
    });
      $(document).ready(function() {
    var a = 0;
$(window).scroll(function () {
var oTop = $("#counter-box1").offset().top - window.innerHeight;
if (a == 0 && $(window).scrollTop() > oTop) {
$(".counter1").each(function () {
var $this = $(this),
countTo = $this.attr("data-number");
$({
countNum: $this.text()
}).animate(
{
    countNum: countTo
},

{
    duration: 3000,
    easing: "swing",
    step: function () {
        //$this.text(Math.ceil(this.countNum));
        $this.text(
            Math.ceil(this.countNum).toLocaleString("en")
        );
    },
    complete: function () {
        $this.text(
            Math.ceil(this.countNum).toLocaleString("en")
        );
        //alert('finished');
    }
}
);
});
a = 1;
}
});

    
    });

// $(document).ready(function(){
// $('.search').on('click', function(){
// $('.input-box').addClass('open');
// });
// $('.close-icon').on('click', function(){
// $('.input-box').removeClass('open');
// });
// });


/*
Animated text using 
Animate.css https://daneden.github.io/animate.css/
Wow.js  http://mynameismatthieu.com/WOW/

View in live mode if on an iPad
new WOW().init();
*/


</script>
@endsection