@extends('layout.app')
@section('content')
    <style>
        .aboutpgMain {
            padding-top: 300px; /* Adjust the padding to ensure the logo does not conflict with the section */
        }
    </style>
{{--    <div class="preLoader black">--}}
{{--        <img src="{{asset('images/logo.webp')}}" alt="img" class="filterLight">--}}
{{--    </div>--}}
{{--    <div class="preLoader white"></div>--}}

{{--    <section class="innerBanner">--}}
{{--        <img src="{{asset('images/inrbg.webp')}}" class="w-100" alt="img">--}}
{{--        <div class="container">--}}
{{--            <h2>About Us</h2>--}}
{{--        </div>--}}
{{--    </section>--}}

    <section class="aboutpgMain">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <figure><img src="{{optional($about->getMedia('about_image1')->first())->getUrl()}}" class="img-fluid" alt="img"></figure>
                    <div class="aboutpgContent">
                        <h3 class="mainHeading">{{$data->heading ?? ''}}</h3>
                        <p>{!! $data->about_description2 ?? '' !!} </p>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="aboutResort">
                        <h2 class="heading">{{$data->title ?? ''}}</h2>
                        <p>{!! $data->about_description1 ?? '' !!}</p>
                        <figure><img src="{{optional($about->getMedia('about_image2')->first())->getUrl()}}" class="img-fluid" alt="img"></figure>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection