@php
    $section = get_bookings_section();
@endphp

@if ($section)
    <section id="our-personalised-appointments" class="bookings-sec">
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 text-center">
                    <h3 class="font-{{ $section->font1 }}">{{ $section->heading }}</h3>
                    <h5 class="font-{{ $section->font2 }}">{{ $section->tagline }}</h5>
                </div>
                <div class="col-12 ">
                    <div class="row">
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0">
                            <div class="app-pic-main">
                                <img class="img-fluid" src="{{ asset(Storage::url($section->image_1)) }}" alt="">
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0">
                            <div class="booking-card mob-mrg-bottom">
                                <h4 class="font-{{ $section->font3 }}">{{ $section->sub_heading_1 }}</h4>
                                <div class="font-{{ $section->font4 }}">
                                    {!! $section->sub_content_1 !!}
                                </div>
                                <a href="{{ $section->url_1 }}">Read More</a>
                            </div>
                        </div>
                        <div
                            class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0 d-xxl-none d-xl-none d-lg-none d-md-none d-sm-block d-block">
                            <div class="app-pic-main ">
                                <img class="img-fluid" src="{{ asset(Storage::url($section->image_2)) }}" alt="">
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0 ">
                            <div class="booking-card mob-mrg-bottom">
                                <h4 class="font-{{ $section->font5 }}">{{ $section->sub_heading_2 }}</h4>
                                <div class="font-{{ $section->font6 }}">
                                    {!! $section->sub_content_2 !!}
                                </div>
                                <a href="{{ $section->url_2 }}">Read More</a>
                            </div>
                        </div>
                        <div
                            class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0 d-xxl-block d-xl-block d-lg-block d-md-block d-sm-none d-none">
                            <div class="app-pic-main mob-mrg-bottom">
                                <img class="img-fluid" src="{{ asset(Storage::url($section->image_2)) }}" alt="">
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0">
                            <div class="app-pic-main">
                                <img class="img-fluid" src="{{ asset(Storage::url($section->image_3)) }}" alt="">
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0">
                            <div class="booking-card mob-mrg-bottom">
                                <h4 class="font-{{ $section->font7 }}">{{ $section->sub_heading_3 }}</h4>
                                <div class="font-{{ $section->font8 }}">
                                    {!! $section->sub_content_3 !!}
                                </div>
                                <a href="{{ $section->url_3 }}">Read More</a>
                            </div>
                        </div>
                        <div
                            class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0 d-xxl-none d-xl-none d-lg-none d-md-none d-sm-block d-block">
                            <div class="app-pic-main mob-mgr-bottom">
                                <img class="img-fluid" src="{{ asset(Storage::url($section->image_4)) }}" alt="">
                            </div>
                        </div>
                        <div class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0">
                            <div class="booking-card">
                                <h4 class="font-{{ $section->font9 }}">{{ $section->sub_heading_4 }}</h4>
                                <div class="font-{{ $section->font10 }}">
                                    {!! $section->sub_content_4 !!}
                                </div>
                                <a href="{{ $section->url_4 }}">Read More</a>
                            </div>
                        </div>
                        <div
                            class="col-xxl-6 col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 p-0 d-xxl-block d-xl-block d-lg-block d-md-block d-sm-none d-none">
                            <div class="app-pic-main mob-mgr-bottom">
                                <img class="img-fluid" src="{{ asset(Storage::url($section->image_4)) }}" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
@endif