@extends('master')
@section('title', $meta_title)
@section('meta_description', $meta_description)
<!-- @section('meta_description','Explore insightful articles from our expert team.') -->
@section('content')

<style>
   .header h1 {
   font-size: 32px;
   color: #333;
   }
   .blog-image{
   margin-top:30px;
   }
   .blog-image img {
   width: 100%;
   max-width: 800px;
   height: auto;
   display: block;
   /* margin: 0 auto; */
   object-fit: cover;
   border-radius: 8px;
   }
   .blog-content p {
   font-size: 20px;
   line-height:40px;
   color: #555;
   margin-top:20px;
   }
   .fixed-menu{
    display:none !important;
   }
   h1{
      font-family: gilroy-extrabold, Helvetica, Arial, sans-serif;
   }
   h2{
      font-family:gilroy-light, Helvetica, Arial, sans-serif;
   }
   /* strong{
      font-family:gilroy-extrabold, Helvetica, Arial, sans-serif;
   } */
   p{
      font-family:gilroy-light, Helvetica, Arial, sans-serif;
   }
   h3{
      font-family:gilroy-light, Helvetica, Arial, sans-serif;
   }
</style>
<div class="blog-page">
<div class="mobile-menu-container fixed mobile transparent">
      <a href="#" class="open-mobile-menu">
      <span></span>
      </a>
   </div>
   <section class="page-header header-style-1 collapse-circles">
      <div class="title">
         <!-- <h1>Upbound Studio Blog Detail</h1> -->
         <h1>{{ $blog->title }}</h1>
      </div>
      <ul class="social fixed desktop">
         <li>
            <a href="https://fb.me/upbound.studio" target="_blank">
            <i class="fa fa-facebook"></i>
            </a>
         </li>
         <li>
            <a href="#" target="_blank">
            <i class="fa fa-twitter"></i>
            </a>
         </li>
         <li>
            <a href="https://www.instagram.com/upbound.studio/" target="_blank">
            <i class="fa fa-instagram"></i>
            </a>
         </li>
         <li>
            <a href="https://www.behance.net/jackwisley" target="_blank">
            <i class="fa fa-behance"></i>
            </a>
         </li>
         <li>
            <a href="https://www.youtube.com/channel/UCrww2Wj4P2QVWPEfjcFAiow" target="_blank">
            <i class="fa fa-youtube-play"></i>
            </a>
         </li>
         <li>
            <a href="https://www.linkedin.com/company/upbound-studio/" target="_blank">
            <i class="fa fa-linkedin"></i>
            </a>
         </li>
      </ul>
      <a href="#" class="scroll-down"></a>
   </section>
   <section class="articles empty_carousel">
      <div class="header">
         <h2>{{ $blog->title }}</h2>
         <!-- <span>Posted By: {{ $blog->post }} | Category: {{ $blog->category->des }}</span> -->
      </div>
      <div class="blog-image">
         <img src="{{ asset('assets/images/blogs/' . $blog->img) }}" alt="{{ $blog->title }}">
      </div>
      <div class="blog-content">
         <p>{!! $blog->des !!}</p>
      </div>
      <div class="back-to-blog">
         <a href="{{ url('/blog') }}" class="btn yellow">Back to Blogs</a>
      </div>
   </section>
   <section class="awards main-section">
      <div class="content">
         <div>
            <h2>Awards</h2>
            <p>We are humbled and honored by the recognition from our peers</p>
         </div>
         <ul>
            <li class="cannes">
               <figure style="background: url('assets/images/cannes-lions-1.png') no-repeat center; background-size: contain"></figure>
            </li>
            <li class="awwards">
               <figure style="background: url('assets/images/awwards.png') no-repeat center; background-size: contain"></figure>
            </li>
            <li class="adesign">
               <figure style="background: url('assets/images/adesign-award.png') no-repeat center; background-size: contain"></figure>
            </li>
         </ul>
      </div>
   </section>
</div>
@endsection