@extends('frontend.layouts.app')

@section('content')
<style>
header .navbar {
    background: #1a1a1a !important;
    padding-top: 10px;
}

.about {
    padding: 200px 0;
}

.about::after {
    width: 70%;
    height: 88%;
    top: 8%;
}

.get-dis {
    margin-bottom: 65px;
}
.testimonials {
    padding: 0px 0 135px;
}
</style>
<main>

    <section class="banner bannercon">
        <div class="main-slide">
            <div class="dawn">
                <div class="h-100 position-relative">
                    <img src="{{asset($service->banner)}}"  class="img-fluid banner-img" alt="">
                    <div class="container h-100">
                        <div class="row h-100">
                            <div class="banner-slider">
                                <div class="content" data-aos="fade-right" data-aos-duration="1500">
                                    <h3>{{ $service->title }}</h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="inser">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-12 col-lg-10">
                    <div class="row gy-4">
                        @if(count($service->galleryImages) > 0)
                        @foreach($service->galleryImages as $image)
                        <div class="col-12 col-lg-4">
                            <div class="imgbox" data-aos="fade-right" data-aos-duration="1500">
                                <img src="{{asset($image->image)}}" class="img-fluid" alt="">
                            </div>
                        </div>
                        @endforeach
                        @endif
                    </div>
                    <h4>{{ $service->heading }}</h4>
                    <div class="be1">{!! $service->desc !!}</div>

                    <div class="be2">
                        Top 5 {{ $service->title }} Therapy Benefits
                    </div>
                    <div class="ben">
                        <ul class="serul" data-aos="fade-right" data-aos-duration="1500">
                            @if(isset($service->benefits))
                            @foreach($service->benefits as $benefit)
                            <li>
                                <div class="width1">
                                    <div class="circle"><i class="fa-solid fa-sun"></i></div>
                                </div>
                                <div class="width2">
                                    <h5>{{ $benefit->title }}</h5>
                                    <p>{!! $benefit->desc !!}</p>
                                </div>
                            </li>
                            @endforeach
                            @endif
                        </ul>
                    </div>
                    
                </div>
            </div>
        </div>
    </section>


    <section class="testimonials">
        <div class="container">
            <div class="row">
            <div class="gtco-testimonials">
            <h2>What Our Client's Say</h2>
            <div class="owl-carousel owl-carousel1 owl-theme">
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1572561300743-2dd367ed0c9a?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=300&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=300"
                            alt="">
                        <div class="card-body">
                            <h5>Ronne Galle <br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1588361035994-295e21daa761?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=301&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=301"
                            alt="">
                        <div class="card-body">
                            <h5>Missy Limana<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1575377222312-dd1a63a51638?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=302&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=302"
                            alt="">
                        <div class="card-body">
                            <h5>Martha Brown<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="card text-center"><img class="card-img-top"
                            src="https://images.unsplash.com/photo-1549836938-d278c5d46d20?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=303&ixid=eyJhcHBfaWQiOjF9&ixlib=rb-1.2.1&q=50&w=303"
                            alt="">
                        <div class="card-body">
                            <h5>Hanna Lisem<br />
                            </h5>
                            <p class="card-text">“ Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
                                impedit quo minus id quod maxime placeat ” </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            </div>
        </div>
    </section>




</main>

@endsection