@extends("Site.Layouts.blank")
@section ("content")

    <!-- *=*=*=*=*=*=*=*=*=* Section Banner *=*=*=*=*=*=*=*=*=* -->
    <div class="w-full relative overflow-x-hidden overflow-y-hidden">
        <img class="w-full    min-h-[320px] md:h-auto object-cover  " src="{{url($info['Contact_page_banner'])}}" alt="banner">
        <div class="left_bottom-absolute  min-w-full">
            <div class="Banner_text-wrapper">
                <h1> @lang('site.About us') </h1>
            </div>
        </div>
    </div>


    <main class="my-12  mx-6 lg:mx-16 2xl:mx-40">

        <!-- *=*=*=*=*=*=*=*=*=* Section WHO WE ARE *=*=*=*=*=*=*=*=*=* -->
        <section>
            <h2 class="text-3xl md:text-4.5xl text-primary text-center mb-3 font-light ">  @lang('site.WHO WE ARE')  </h2>
            <p class="text-[#4C4849] leading-relaxed  text-base md:text-lg">
                {!! nl2br(e($info["WHO_WE_ARE"])) !!}
            </p>

            <div class="flex items-center gap-2 mt-3">
                <img src="{{asset('site_assets/images/About/download.webp')}}" alt="download">
                <a href="{{$info['Download_Profile']}}" class="text-xl text-[#021F4F] underline" target="_blank"> @lang('site.Download_Profile') </a>
            </div>
        </section>

        <br><br><br>
        <!-- *=*=*=*=*=*=*=*=*=* Section VISION *=*=*=*=*=*=*=*=*=* -->
        <section>

           <div class="grid md:grid-cols-2  gap-x-16 gap-y-2 items-center">
               <div class="order-2 md:order-1">
                   <div class="flex items-center gap-2 mb-2">
                       <img src="{{asset('site_assets/images/About/vision.webp')}}" alt="download" >
                       <h2 class="text-3xl md:text-4.5xl text-primary  font-light ">  @lang('site.VISION') </h2>
                   </div>

                   <p class="text-[#4C4849] leading-relaxed text-base md:text-lg ">
                       {!! nl2br(e($info["VISION"])) !!}
                   </p>
               </div>
               <div  class="order-1 md:order-2">
                   <img src="{{$info["VISION_image"]}}" alt="VISION" data-aos="fade-up-left">
               </div>
           </div>

        </section>


        <!-- *=*=*=*=*=*=*=*=*=* Section MISSION *=*=*=*=*=*=*=*=*=* -->
        <section class="mt-16">

           <div class="grid md:grid-cols-2  gap-x-16 gap-y-2 items-center">
               <div   >
                   <img src="{{$info["MISSION_image"]}}" alt="VISION" data-aos="fade-up-right">
               </div>
               <div  >
                   <div class="flex items-center gap-2 mb-2">
                       <img src="{{asset('site_assets/images/About/mission.webp')}}" alt="download">
                       <h2 class="text-3xl md:text-4.5xl text-primary  font-light "> @lang('site.MISSION')  </h2>
                   </div>

                   <p class="text-[#4C4849] leading-relaxed text-base md:text-lg ">
                       {!! nl2br(e($info["MISSION"])) !!}
                   </p>
               </div>

           </div>

        </section>


    </main>

    <!-- *=*=*=*=*=*=*=*=*=* Section BOARD OF DIRECTORS *=*=*=*=*=*=*=*=*=* -->
    <section class="mt-16  py-16 bg-cover bg-no-repeat"  style="background-image: url('{{asset('site_assets/images/About/bg_BOARD_OF_DIRECTORS.webp')}}')">
        <h2  class="text-3xl md:text-4.5xl text-primary text-center mb-4  font-light  "> @lang('site.BOARD OF DIRECTORS') </h2>
       <div class="mx-6 lg:mx-16 2xl:mx-40 ">
           <p class="text-[#4C4849]  text-base md:text-lg leading-loose	"> {!! nl2br(e($info["BOARD_OF_DIRECTORS"])) !!} </p>
       </div>

        <div class="mt-12" data-aos="fade-up">
            <board-of-directors-swiper  :directors="{{$Directors}}" > </board-of-directors-swiper>
        </div>


    </section>


    <!-- *=*=*=*=*=*=*=*=*=* Section TEAMWORK  *=*=*=*=*=*=*=*=*=* -->
    <main class="my-12  mx-6 lg:mx-16 2xl:mx-40" data-aos="flip-up">
        <section  class="mt-16">
            <h2  class="text-3xl md:text-4.5xl text-primary text-center mb-4  font-light  "> @lang('site.TEAMWORK') </h2>
            <p class="text-[#4C4849]  text-base md:text-lg leading-loose	text-center"> {!! nl2br(e($info["TEAMWORK"])) !!} </p>
        </section>
    </main>



    <!-- *=*=*=*=*=*=*=*=*=* Section CONTACT US *=*=*=*=*=*=*=*=*=* -->
    @include('Site._contact_us')


@endsection