@extends('client.rohini.layouts.app')
@section('content')
    @include('client.rohini.pages.partials.breadcrumb')

    <!--About One Start -->
    <section class="about-one section-pd">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xl-6">
                    <div class="about-one__left wow slideInLeft" data-wow-delay="100ms" data-wow-duration="2500ms">
                         <div class="section-title text-left">
                            <div class="section-title__tagline-box"> <span
                                    class="section-title__tagline">{{ $page->title }}</span> </div>
                            <h2 class="section-title__title">{!! implode(' ', array_slice(explode(' ', $page->short_description), 0, 3)) .
                                '<br>' .
                                implode(' ', array_slice(explode(' ', $page->short_description), 3)) !!}
                            </h2>
                        </div>
                        <div class="row">
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="about-one__img-box">
                                    @foreach ($page->images as $photo)
                                        <div class="about-one__img-{{ $loop->iteration }}"> <img src="{{ $photo }}"
                                                alt=""> </div>
                                    @endforeach
                                </div>
                            </div>
                            <div class="col-xl-6 col-lg-6 col-md-6">
                                <div class="about-one__img-box-two">
                                    <div class="about-one__img-3"> <img src="{{ $page->image }}" alt=""> </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-xl-6">
                    <div class="about-one__right">
                       
                        <div class="about-one__text">{!! $page->description !!}</div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!--About One End -->
    @if ($page->children->count() > 0)
        @php
            $mv = $page->children[0];
        @endphp

        <!--Background Image-->
        <section class="section-background"> </section>
        <!--Background Image End-->


        <!--Mission-->
        {{-- <section class="services-two">
            <div class="services-two__bg" style="background-image: url('{{ $mv->image }}');"> </div>
            <div class="container">

                @foreach ($page->children as $child)
                    <div class="row"style="margin-bottom:50px;">
                        <div class="col-xl-8">
                            <div class= >
                                <div class="services-two__left-top">
                                    <div class="section-title-two text-left">
                                        <div class="section-title-two__tagline-box">
                                            <p class="section-title__tagline"
                                                style="font-weight: bold; color:red; font-size:25px;">{{ $mv->title }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="row" style="width: 70%">
                                    <h2 class="small-title">{{ $child->short_description }}</h2>
                                    {!! $child->description !!}
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </section> --}}

        <section class="why-choose-one section-bg section-pd ">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-xl-6">
                        @foreach ($page->children as $child)
                            <div class="services-two__left">
                                <div class="section-title text-left">
                                    <div class="section-title__tagline-box"> <span
                                            class="section-title__tagline  ">{{  $child->title }}</span> </div>
                                    <h2 class="small-title">{{ $child->short_description }}</h2>
                                </div>
                                <div @class([ '-mt-30' => $loop->first])>{!! $child->description !!}</div>
                            </div>
                        @endforeach
                    </div>
                    <div class="col-xl-6">
                        <div class="why-choose-one__right">
                            <div class="why-choose-one__img wow slideInRight" data-wow-delay="100ms"
                                data-wow-duration="2500ms"> <img src="{{ $mv->image }}" alt=""> </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <!--Mission End-->
    @endif

       @include('client.rohini.pages.partials.newsletter')
@endsection