<x-main.header />
<section class="opposite" style="background-image: url({{ asset('storage/images/'.$banner->banner_image)}});">
    <div class="container">
        <div class="row">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 pe-xl-6">
                <div class="about About-2">
                    <h2>{{$banner->banner_heading}}</h2>
                    <div class="moral">
                        <a class="wave" href="/">HOME</a>
                        <span class="leay"><i class="fas fa-arrows-alt-h"></i></span>
                        <a class="bcc" href="key_note">{{$banner->banner_heading}}</a>
                    </div>

                </div>
            </div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 pe-xl-6">

            </div>
        </div>
    </div>



</section>


<section class="intel">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 pe-xl-6">
                           <div class="STRATEGIES">
                    <h2>{{$sec_1->cms_heading}}</h2>
                    {!! $sec_1->cms_description !!}
                    
                </div>
            </div>

            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 pe-xl-6">
                

                 <div class="balic page-up" >
                    <img src="{{ asset('storage/images/'.$sec_1->cms_image)}}" class="img-fluid" alt="img">
                </div>
            </div>
        </div>
    </div>
    </div>



</section>


<section class="intel">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 pe-xl-6">
            <div class="balic">
                    <img src="{{ asset('storage/images/'.$sec_2->cms_image)}}" class="img-fluid" alt="img">
                </div>
            </div>

            <div class="col-12 col-sm-12 col-md-12 col-lg-6 col-xl-6 col-xxl-6 pe-xl-6">
                
                <div class="STRATEGIES">
                    <h2>{{$sec_2->cms_heading}}</h2>
                    {!! $sec_2->cms_description !!}
                    
                </div>
            </div>
        </div>
    </div>
    </div>



</section>


<section class="testimonials-sec second-one">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 col-xxl-12">
                    <div class="testimonials-inner">
                        <div data-aos="fade-down" data-aos-duration="1200" data-aos-delay="300" data-aos-offset="0">
                            <h3>client testimonials</h3>
                            <h2>what our clients say</h2>
                        </div>
                        <div class="testimonials-wrapper" data-aos="zoom-in-up" data-aos-duration="1200"
                            data-aos-delay="300" data-aos-offset="0">
                            <div class="owl-carousel owl-theme" id="client-testimonials">
                                @foreach($testimonial as $key => $testi)
                                <div class="item">
                                    <div class="testimonial-item">
                                        <div class="user-img">
                                            <!-- <img class="img-fluid" src="{{ asset('storage/images/'.$testi->client_image)}}" alt=""> -->
                                        </div>
                                        <ul class="test-review">
                                            @if($testi->testimonial_rating == 1)
                                            <li><i class="fa-solid fa-star"></i></li>
                                            @elseif($testi->testimonial_rating == 2)
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            @elseif($testi->testimonial_rating == 3)
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            @elseif($testi->testimonial_rating == 4)
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            @elseif($testi->testimonial_rating == 5)
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            <li><i class="fa-solid fa-star"></i></li>
                                            @endif
                                        </ul>
                                        {!! $testi->testimonial_text !!}
                                       
                                    </div>
                                </div>
                                @endforeach 
                            </div>
                            
                            <strong class="local-custom">Please contact <a href="mailto:danielle@morale-matters.com">danielle@morale-matters.com</a> for inquiries on speaking engagements.</strong>
                        </div>
                        <a class="get-in-touch foure" style="color:#000;" href="contact_us">get in touch <i class="fa-solid fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

<x-main.footer />