@include('layouts.header')

<title> {{$blog_data->meta_title}}</title>
<!-- ***** Header Area End ***** -->
<style>
  ul.date_set {
    list-style: none;
    padding: 1px 0px;
    color: #03a84e;
    font-size: 13px;
    line-height: 25px;
  }

  .left-outer ul {
    padding: 11px 21px;
    line-height: 25px;
  }

  .left-outer li {
    list-style: disc;
    font-size: 17px;
    line-height: 30px;
    font-weight: 300;
    color: #000000;
    margin-bottom: 18px;
    margin-top: 13px;
  }

  .left-outer ul li b {
    font-weight: bold;
  }

  h2.card-title.blog_heads {
    margin-top: 25px;
  }

  .blog_heads h2,
  a span {
    font-size: 30px !important;
    color: #2b9802;
  }

  .blog_heads>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;
  }

  .left-outer h3 {
    color: #080808;
    font-size: 25px;
    margin-top: 16px;
  }

  .left-outer p {
    font-size: 17px;
    line-height: 30px;
    font-weight: 300;
    color: #000000;
    margin-bottom: 0px;
    margin-top: 13px;
  }

  .author-box-content.clearfix {
    display: flex;
    width: 100%;
    margin-bottom: 15px;
    border-bottom: 0px solid #126e8329;
    padding: 6px;
  }

  img.avatar.avatar-128 {
    border-radius: 3px;
    width: auto;
    height: 80px;
    min-width: 110px;
    object-fit: cover;
    object-position: center;
  }

  .author-box-description h4 {
    padding: 15px 0px 0 12px;
    margin-top: 0;
    margin-bottom: 0;
    text-align: left;
    font-size: 16px;
    line-height: 20px;
    font-weight: 500;
  }

  .author-link {
    font-size: 16px;
    color: #2b9703
  }

  .outer_box {
    background: #ffffff;
    padding: 10px;
  }

  .blog_heads span {
    color: #2a2a2a;
  }

  .card img {
    max-height: 500px;
    object-fit: cover;
  }
</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 Details</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="col-lg-8 col-md-12">
        <div class="card">
          <img src="{{ url('assets/blogdata/') }}/{{$blog_data->banner}}" class="card-img-top" alt="{{$blog_data->alt}}">
        </div>
        <div class="card-body">
          <ul class="date_set">
            @php
            $date = $blog_data->created_at;
            $formattedDate = date('F jS, Y', strtotime($date));
            @endphp
            <li><i class="fa fa-calendar"></i> {{ $formattedDate }} </li>


          </ul>
          <h1 class="card-title blog_heads"><a> <span> {{$blog_data->heading}}</span>
            </a></h1>
         <!--  <h2 class="card-title blog_heads"><a href="#"> <span> {{$blog_data->heading}}</span>
            </a></h2> -->
          <div class="left-outer">
            <p>
            <div>{!! $blog_data->short_description !!}</div>

            </p>

            <p>
            <div>{!! $blog_data->description !!}</div>

            </p>
          </div>


        </div>
      </div>

      <div class="col-lg-4">
        <div class="outer_box">
          @forelse($blog_others as $blog)
          <div class="author-box-content clearfix">
            <div class="author-box-avatar">
              <img  src="{{ url('assets/blogdata/') }}/{{$blog->banner}}" alt="{{$blog->alt}}" class="avatar avatar-128">
            </div>
            <div class="author-box-description">
              <h4><a class="author-link url fn" href="{{ url('blogs') }}/{{$blog->slug}}" rel="author" title="{{$blog->heading}}">
                  {{$blog->heading}}
                </a></h4>
            </div>
          </div>
          @empty

          @endforelse

        </div>
      </div>


    </div>

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


@extends('layouts.footer')