@if(isset($promotional_messages) &&  sizeof($promotional_messages) > 0 )

<div class="mb-md-5 mb-4 promotional_messages_bg">

    @include('themes.includes.sectionTitles.shap2.homeSectionTitle',['title'=>$home_setting->home_settings_title,'desc'=>$home_setting->home_settings_sub_title,'showElephant'=>false])

    <div class="container ">
        <div class="row justify-content-center">
            @foreach($promotional_messages as $key => $item)
                @if($key <= 2)
                    @php
                        $img = $item->promotional_messages_image
                            ? $imagesBaseUrl.'uploads/'.env('accountId').'/images/original/'.$item->promotional_messages_image
                            : $imagesBaseUrl.'img/no-image.png';
                    @endphp
                    <div class="col-lg-4 col-md-4 col-12 mb-md-0 mb-4">
                        <div class="promo-card h-100 text-center px-4 py-4">
                            <div class="promo-icon mb-3">
                                <img src="{{ $img }}" alt="" class="img-fluid" style="height: 64px; width: auto; object-fit: contain;">
                            </div>
                            <h5 class="text_4 mb-2">{{ $item->promotional_messages_title ?? '' }}</h5>
                            <p class="text_3 font-14 mb-0">{{ $item->promotional_messages_text ?? '' }}</p>
                        </div>
                    </div>
                @endif
            @endforeach
        </div>
    </div>

</div>
@endif
<!-- end sliders  -->
@push('js')

@endpush

@push('css')
<style>
    .promo-card{
        background-color: var(--background_2);
        border-radius: 24px;
        box-shadow: 0 0 8px 0px #2e281d33;
        /* border: 1px solid rgba(0,0,0,.06); */
    }
    @media (max-width: 767px){
        .promo-card{
            margin: 0 8px;
        }
        .promotional_messages_bg{
            background-image: url('{{ asset('/images/theme7/promotional_messages_bg.webp') }}');
            background-position: top left;
            background-size: cover;
        }
    }
</style>
@endpush