@extends('layouts.web_master')

@section('header-content')
   <div class="header-blog" style="background-image: url('{{asset($banner->service_banner)}}'); background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;">
        <!-- ====== 3.1 hero section ====== -->
        <section class="hero">
            <div class="container">
                <div class="row justify-content-center mt-5">
                    <div class="col-lg-11 col-md-12 text-center" data-aos="fade">
                        <div>
                            <h2>Our Services</h2>
                            <div class="d-flex justify-content-center gap-4 pt-4">
                                <nav aria-label="breadcrumb">
                                    <div class="breadcrumb d-flex gap-4 align-items-center">
                                        <div class="breadcrumb-item"><a href="index.html">Home</a></div>
                                        <i class="fa-solid fa-angles-right"></i>
                                        <div class="breadcrumb-item" aria-current="page">Services</div>
                                    </div>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>
    <!-- ====== End 3.1 hero section ====== -->
@endsection
<style>
    .overlay {
        height: 347px !important;
    }
</style>
@section('main-content')
    <!-- ====== 1.8 services section ====== -->
    <section id="services" class="services">
        <div class="container">
            <div class="row">
                <div class="col-md-7">
                    <div data-aos="fade" data-aos-duration="2000">
                        <h4>Our Services</h4>
                        <h2>{{ $serviceHeading->title }}</h2>
                        <p>{{ $serviceHeading->short_description }}
                        </p>
                        <div
                            class="row align-items-center gap-lg-3 gap-md-4 text-lg-start text-center justify-content-md-start justify-content-center">

                            @foreach ($service as $item)
                                <div class="col-md-3 col-5">
                                    <div>
                                        <figure><img src="{{ asset($item->icon) }}" alt="servicesIcon">
                                        </figure>
                                        <h6>{{ $item->title }}</h6>
                                    </div>
                                </div>
                            @endforeach
                        </div>

                    </div>
                </div>
                <div class="col-md-5 mt-md-0 mt-5" data-aos="fade-up" data-aos-easing="ease-in-out-quad">
                    <div>
                        <figure><img src="{{ asset($serviceHeading->image_one) }}" alt="service-img"></figure>
                        <figure><img src="{{ asset($serviceHeading->image_two) }}" alt="ser-Camera"></figure>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 1.8 services section ====== -->

    <!-- ====== 1.7 why choose us section ====== -->
    <section id="choose" class="choose">
        <div class="chooseBg">
            <div class="position-relative z-2" data-aos="fade" data-aos-duration="2000">
                <h4>Why choose us</h4>
                <h2>Let Us Show You The Beauty
                    Of The World</h2>
                <div class="globalBtn mt-lg-5 mt-md-5">
                    <ul>
                        <li>
                            <a href="{{route('contact')}}">contact us
                                <span></span><span></span><span></span><span></span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="chooseCrads position-relative z-2">
            <div class="container">
                <div class="row gap-md-0 gap-4 justify-content-center card-text">
                    @foreach ($speciality as $key => $item)
                        <div class="col-lg-3 col-md-4" data-aos="fade-up" data-aos-delay="{{ 100 + $key * 200 }}">
                            <div>
                                <figure><img src="{{ asset($item->icon) }}" alt="chooseIcon"></figure>
                                <h6>{{ $item->title }}</h6>
                                <p>{{ $item->short_description }}
                                </p>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 1.7 why choose us section ====== -->

    <!-- ====== 1.5 special offer section ====== -->
    <section id="special" class="special">
        <div class="container">
            <div class="row justify-content-center">
                <div class=" col-md-6" data-aos="fade-up">
                    <h3>{{ $offer->title_one }}</h3>
                    <p>{{ $offer->short_description_one }}
                    </p>
                    <div class="offer">
                        <img src="{{ asset($offer->image_one) }}" alt="discount">
                        <div class="overlaytwo">
                            <div class="overlay_text">
                                <h3>Discount up {{ $offer->discount_one }}</h3>
                                <div class="globalBtn mt-lg-5 mt-4">
                                    <ul>
                                        <li>
                                            <a href="{{ route('contact') }}">Book Now
                                                <span></span><span></span><span></span><span></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mt-md-0 mt-4" data-aos="fade-down">
                    <div class="offer">
                        <img src="{{ asset($offer->image_two) }}" alt="discount">
                        <div class="overlaytwo">
                            <div class="overlay_text">
                                <h3>Discount up {{ $offer->discount_two }}</h3>
                                <div class="globalBtn mt-lg-5 mt-4">
                                    <ul>
                                        <li>
                                            <a href="{{ route('contact') }}">Book Now
                                                <span></span><span></span><span></span><span></span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h3>{{ $offer->title_two }}</h3>
                    <p>{{ $offer->short_description_two }}
                    </p>
                </div>
            </div>
        </div>
    </section>
    <!-- ====== End 1.5 special offer section ====== -->
@endsection