@php
    $section = $homepage_sections['bookings'];
@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 }}" style="font-size:{{ $section->font1_size }};color:{{ $section->font1_color }}">{{ $section->heading }}</h3>
                    <h5 class="font-{{ $section->font2 }}" style="font-size:{{ $section->font2_size }};color:{{ $section->font2_color }}">{{ $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 booking-card-content-parent">
                            <div class="booking-card mob-mrg-bottom booking-card-content-child">
                                <h4 class="font-{{ $section->font3 }}" style="font-size:{{ $section->font3_size }};color:{{ $section->font3_color }}">{{ $section->sub_heading_1 }}</h4>
                                <div class="font-{{ $section->font4 }}" style="font-size:{{ $section->font4_size }};color:{{ $section->font4_color }}">
                                    {!! $section->sub_content_1 !!}
                                </div>
                                <a class="font-{{ $section->font11 }}"href="{{ $section->url_1 }}" style="font-size:{{ $section->font11_size }};color:{{ $section->font11_color }}">{{ $section->button_text_1 }}</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 booking-card-content-parent ">
                            <div class="booking-card mob-mrg-bottom booking-card-content-child">
                                <h4 class="font-{{ $section->font5 }}" style="font-size:{{ $section->font5_size }};color:{{ $section->font5_color }}">{{ $section->sub_heading_2 }}</h4>
                                <div class="font-{{ $section->font6 }}" style="font-size:{{ $section->font6_size }};color:{{ $section->font6_color }}">
                                    {!! $section->sub_content_2 !!}
                                </div>
                                <a class="font-{{ $section->font11 }}" href="{{ $section->url_2 }}" style="font-size:{{ $section->font11_size }};color:{{ $section->font11_color }}">{{ $section->button_text_1 }}</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 booking-card-content-parent">
                            <div class="booking-card mob-mrg-bottom booking-card-content-child">
                                <h4 class="font-{{ $section->font7 }}" style="font-size:{{ $section->font7_size }};color:{{ $section->font7_color }}">{{ $section->sub_heading_3 }}</h4>
                                <div class="font-{{ $section->font8 }}" style="font-size:{{ $section->font8_size }};color:{{ $section->font8_color }}">
                                    {!! $section->sub_content_3 !!}
                                </div>
                                <a class="font-{{ $section->font11 }}" href="{{ $section->url_3 }}" style="font-size:{{ $section->font11_size }};color:{{ $section->font11_color }}">{{ $section->button_text_1 }}</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 booking-card-content-parent">
                            <div class="booking-card booking-card-content-child">
                                <h4 class="font-{{ $section->font9 }}" style="font-size:{{ $section->font9_size }};color:{{ $section->font9_color }}">{{ $section->sub_heading_4 }}</h4>
                                <div class="font-{{ $section->font10 }}" style="font-size:{{ $section->font10_size }};color:{{ $section->font10_color }}">
                                    {!! $section->sub_content_4 !!}
                                </div>
                                <a class="font-{{ $section->font11 }}" href="{{ $section->url_4 }}" style="font-size:{{ $section->font11_size }};color:{{ $section->font11_color }}">{{ $section->button_text_1 }}</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