@extends('layouts.front-layout')
@section('title', 'About')
@section('content')
    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{optional($about->getMedia('about_top_banner_image')->first())->getUrl()}}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>{{ $data->heading ?? '' }}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->
    <section class="aboutSection">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6" data-aos="fade-up">
                    <figure>
                        <img src="{{optional($about->getMedia('about_first_image')->first())->getUrl()}}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-6" data-aos="fade-up">
                    <div class="aboutcntnt">
                        <h2 class="mainHead">{{ $data->heading ?? '' }}</h2>
                        <h4>{{ $data->sub_heading ?? '' }}</h4>
                        <p>{!! $data->first_description ?? '' !!}</p>

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

            <div class="row flex-row-reverse align-items-center">

                <div class="col-md-6" data-aos="fade-up">

                    <figure class="imgabt2">
                        <img src="{{optional($about->getMedia('about_second_image')->first())->getUrl()}}" class="img-fluid" alt="">
                    </figure>

                </div>
                <div class="col-md-6 " data-aos="fade-up">
                    <div class="aboutcntnt">

                        <p>{!! $data->second_description ?? '' !!}</p>
                    </div>
                </div>
            </div>

        </div>
    </section>
@endsection