@extends('front.layout.app')
@section('content')
    @php
    $data = json_decode($about->content);
    @endphp
    <div class="mouse-cursor cursor-outer"></div>
    <div class="mouse-cursor cursor-inner"></div>

    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{$about->getFirstMediaUrl('about_banner_image')}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <h2>{{$data->about_banner_title ?? ''}}</h2>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->


    <section class="aboutMain">
        <div class="container">
            <div class="row">
                <div class="col-md-8">
                    <div class="abtImg">
                        <figure>
                            <span><img src="{{$about->getFirstMediaUrl('section_image_2')}}" class="img-fluid" alt="img"></span>
                            <img src="{{$about->getFirstMediaUrl('section_image_1')}}" class="img-fluid" alt="img">
                        </figure>
                    </div>
                </div>
                <div class="col-md-4">
                    <div class="title">
                        <h2 class="subheading">{{$data->title ?? ''}}</h2>
                        <h3 class="heading">{{$data->sub_title ?? ''}} </h3>
                        <h5>{{$data->heading ?? ''}}</h5>
                        <p>{{$data->description ?? ''}}</p>
                        <a href="#" class="themeBtn blackBtn">Read More <span><i class="fal fa-long-arrow-right"></i></span></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="aboutinner">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-12">
                    <div class="title">
                        <h3 class="heading">{{$data->our_mission_title_1 ?? ''}}</h3>
                        <p>{{$data->our_mission_description_1 ?? ''}}</p>
                    </div>
                </div>
                <div class="col-md-6">
                    <figure>
                        <img src="{{$about->getFirstMediaUrl('our_mission_image_1')}}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6">
                    <div class="title">
                        <p>{{$data->our_mission_description_2 ?? ''}}</p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center justify-content-between">
                <div class="col-md-7">
                    <div class="abouttitle">
                        <h3 class="heading heading2 text-capitalize">{{$data->our_mission_title_2 ?? ''}}</h3>
                        <p>{{$data->our_mission_description_3 ?? ''}}</p>
                    </div>
                </div>
                <div class="col-md-5">
                    <figure>

                        <img src="{{$about->getFirstMediaUrl('our_mission_image_2')}}" class="img-fluid" alt="">
                    </figure>
                </div>
            </div>
        </div>
    </section>


    <section class="workMain work-sec-inner">
        <div class="container">
            <h2 class="heading text-center mb-4">Our Work</h2>
            <div class="row">
                <div class="col-md-4">
                    <figure>
                        <img src="{{asset('images/work1.jpg')}}" class="w-100" alt="img">
                    </figure>
                </div>
                <div class="col-md-4">
                    <figure>
                        <img src="{{asset('images/work2.jpg')}}" class="w-100" alt="img">
                    </figure>
                </div>
                <div class="col-md-4">
                    <figure>
                        <img src="{{asset('images/work3.jpg')}}" class="w-100" alt="img">
                    </figure>
                </div>
                <div class="col-md-4">
                    <figure>
                        <img src="{{asset('images/work4.jpg')}}" class="w-100" alt="img">
                    </figure>
                </div>
                <div class="col-md-4">
                    <figure>
                        <img src="{{asset('images/work5.jpg')}}" class="w-100" alt="img">
                    </figure>
                </div>
                <div class="col-md-4">
                    <figure>
                        <img src="{{asset('images/work6.jpg')}}" class="w-100" alt="img">
                    </figure>
                </div>
                <div class="col-12 text-center">
                    <a href="#" class="btn borderbtn">View All</a>
                </div>
            </div>
        </div>
    </section>

    <!-- VIDEO SECTION -->
    <section class="video-section">
        <div class="container">
            <figure class="video-box">
                <img src="{{$about->getFirstMediaUrl('video')}}" class="img-fluid" alt="">
                <a href="" class="btn"><i class="fas fa-play"></i></a>
            </figure>
        </div>
    </section>
    <!-- !@VIDEO SECTION -->
    @include('front.layout.contact-form')
@endsection