@include('layouts.header')
  <!-- ***** Header Area End ***** -->
  <style>
 ul.date_set { list-style: none;padding: 1px 0px;color: #03a84e;font-size: 13px;}
.blog_head>a {font-size: 25px;color: #000000;}
.blog_head>a:hover {color: #2b9703;}
.card-title {font-size: 15px;line-height: 1.4;color: #000;font-family: 'Poppins', sans-serif;font-weight: 600;margin: 0;}
h5.card-title.blog_head {margin-bottom: 16px;min-height: 50px; margin-top: 20px;}
.card{margin-bottom:20px;}
.card img{height: 250px;object-fit: cover;}
@media only screen and (max-width:912px){
  .card img { height: 350px;}}
@media only screen and (max-width:600px){
  .card img {height: 210px;}}
  </style>

  <div class="inner-banner wow fadeIn" id="top" data-wow-duration="1s" data-wow-delay="0.5s">
    <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-12 align-self-center">
              <div class="show-up header-text wow fadeInLeft" data-wow-duration="1s" data-wow-delay="1s">
                <div class="row">
                  <div class="col-lg-12" style="text-align:center; ">
                   <h3 class="white-text">Blog</h3>
                   
                  </div>
                 
                </div>
              </div>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </div>

      </div>
    </div>
  </div>
  <div id="services" class="services section">
    <div class="container">
      <div class="row">
    	   <div class="section-heading  wow fadeInDown animated" data-wow-duration="1s" data-wow-delay="0.5s" style="visibility: visible;-webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s;-webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; animation-delay: 0.5s;">
                <h4>Latest <em>Blogs</em></h4>
                <img src="https://dealplexus.com/assets-front/images/heading-line-dec.png" alt="">
    			</div>
            @forelse($blog_data as $blog)

            @php
                $date = $blog->created_at;
                $formattedDate = date('F jS, Y', strtotime($date));
            @endphp
              <div class="col-lg-4">
                <div class="card">
                  <img src="{{ url('assets/blogdata/') }}/{{$blog->banner}}" class="card-img-top" alt="{{$blog->alt}}">
                  <div class="card-body">
                      <ul class="date_set">
                        <li><i class="fa fa-calendar"></i> {{ $formattedDate }} </li>
                  </ul>
                    <h5 class="card-title blog_head"><a href="{{ url('blogs') }}/{{$blog->slug}}">{{$blog->heading}}
                    </a></h5>
                  </div>
                </div>
              </div>
            @empty
              <h4 class="text-center mt-3 text-muted">No Records Found !</h4>
            @endforelse

            {{ $blog_data->links("pagination::bootstrap-4") }} 

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


   @extends('layouts.footer')