@extends('layouts.front-layout')

@section('content')


    <!-- Begin: Main Slider -->
    <div class="innerBan">
        <img src="{{ $data->getFirstMediaUrl('banner_img') ?? '' }}" class="w-100" alt="">
        <div class="overlay">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-md-12">
                        <h2>{{$content->banner_title ?? ''}}</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- End: Main Slider -->



    <section class="about-page">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-7">
                    <figure>
                        <img src="{{ $data->getFirstMediaUrl('our_mission_image') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-5">
                    <div class="about-page-content">
                        <span class="smallHeading">{{$content->our_mission_heading ?? ''}}</span>
                        <h2 class="secHeading">{{$content->our_mission_sub_heading ?? ''}}</h2>
                        <p>{{$content->our_mission_description?? ''}}</p>
                    </div>
                </div>
            </div>
            <div class="row align-items-center flex-row-reverse mt-4">
                <div class="col-md-7">
                    <figure>
                        <img src="{{ $data->getFirstMediaUrl('our_vision_image') ?? '' }}" class="img-fluid" alt="">
                    </figure>
                </div>
                <div class="col-md-5">
                    <div class="about-page-content">
                        <span class="smallHeading">{{$content->our_vision_heading ?? ''}}</span>
                        <h2 class="secHeading">{{$content->our_vision_sub_heading ?? ''}}</h2>
                        <p>{{$content->our_vision_description ?? ''}}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endsection