@extends('web.layouts.layout')

@section('content')
    <main>
        <!-- Start section -->
        <section class="about-sec content-pg section">
            <div class="container">
                <div class="main_inner p-0">
                    <div class="imgBox">
                        <img src="{{ getImage($aboutPage['image']) }}" alt="{{ $aboutPage['page_title'] }}" class="sec-img"/>
                    </div>
                    <div class="text_box">
                        <div class="head_txt d-flex align-items-center mb-5">
                            <h5 class="subtitle color-primary fw-bold mb-0 wow fadeInDown">{{ $aboutPage['page_title'] }}</h5>
                            <h1 class="title fw-bold mb-0 wow focus-in-expand-fwd">
                                {{ $aboutPageTitle1 }} <span class="color-primary">{{ $aboutPageTitle2 }}</span>
                            </h1>
                        </div>

                        <div class="pages-text wow fadeInUp">
                            {!! $aboutPage['description'] !!}
                        </div>
                    </div>
                </div>

            </div>
        </section>

        <!-- Start section -->
        <section class="about-cards about-pg-cards section pt-0">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="about_card bg_lightblue2 wow fadeInUp">
                            <img src="{{ getImage($missionPage['image']) }}" alt="{{ $missionPage['page_title'] }}" class="icon"/>
                            <h5 class="title fw-bold color-dark mb-3">{{ $missionPage['page_title'] }}</h5>
                            <p class="p">
                                {{ strip_tags($missionPage['description']) }}
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about_card bg_lightblue4 wow fadeInUp">
                            <img src="{{ getImage($visionPage['image']) }}" alt="{{ $visionPage['page_title'] }}" class="icon"/>
                            <h5 class="title fw-bold color-dark mb-3">  {{ $visionPage['page_title'] }} </h5>
                            <p class="p">
                                {{ strip_tags($visionPage['description']) }}
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about_card bg-white wow fadeInRight">
                            <img src="{{ getImage($goalsPage['image']) }}" alt="{{ $goalsPage['page_title'] }}" class="icon"/>
                            <h5 class="title fw-bold color-dark mb-3"> {{ $goalsPage['page_title'] }} </h5>
                            <p class="p">
                                {{ strip_tags($goalsPage['description']) }}
                            </p>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="about_card bg_lightblue wow fadeInRight">
                            <img src="{{ getImage($ourValuesPage['image']) }}" alt="{{ $ourValuesPage['page_title'] }}" class="icon"/>
                            <h5 class="title fw-bold color-dark mb-3">{{ $ourValuesPage['page_title'] }}</h5>
                            <p class="p">
                                {{ strip_tags($ourValuesPage['description']) }}
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </main>

@endsection