@if($data->image && $data->title)
@php
    $ss1 = $data->slider_shape_1_position;
    $ss2 = $data->slider_shape_2_position;
    $content_layout = $data->content_layout;

@endphp
                

            <div class="single-slide {{$content_layout}}">
                <div class="bg-img kenburns-top" style="background-image: url({{$data->background(theme_asset('img/slider-bg-01.jpg'))}});"></div>
                @if ($data->show_texture)
                    
                    @if ($data->slider_shape_1_image || !$data->slider_shape_2_image)

                        <div class="slider-shape {{$ss1}}" style="background-image: url({{$data->slider_shape_1_image(theme_asset('img/slider-shape-01.png'))}});" data-animation="fade-in-{{$ss1 == 'left'?'left':'right'}}" data-delay="0.5s"></div>
                    
                    @endif
                    @if ($data->slider_shape_2_image)

                        <div class="slider-shape {{$ss2}}" style="background-image: url({{$data->slider_shape_2_image}});" data-animation="fade-in-{{$ss2 == 'left'?'left':'right'}}" data-delay="0.5s"></div>
                    
                    @endif
                    
                @endif
                <div class="single-slide-container">

                    <div class="food-img" style="background-image: url({{$data->image}});" data-animation="fade-in-{{$ss1 == 'left'?'right':($ss1 == 'right'?'left':'bottom')}}" data-delay="1s"></div>
                    @if ($data->show_texture)
                    <div class="food-design" style="background-image: url({{$data->texture(theme_asset('img/slider-elements.png'))}});" data-animation="zoomIn" data-delay="1.3s"></div>
                    @endif
                    <div class="slider-content-wrap d-flex align-items-center {{$content_layout == 'left'?'':'text-'.$content_layout}}">
                        <div class="container">
                            <div class="slider-content">

                                <div class="slider-caption medium"><div class="inner-layer"><div data-animation="fade-in-top" data-delay="0.5s">{{$data->sub_title}}</div></div></div>
                                <div class="slider-caption big"><div class="inner-layer"><div @if ($data->text_align!='left')  class="char-{{$data->text_align!='right'?'top':'right'}}" @endif data-animation="reveal-text" data-delay="1s">{!! nl2br($data->title) !!}</div></div></div>

                                <div class="slider-caption small"><div class="inner-layer"><div data-animation="fade-in-bottom" data-delay="2s">{!! $data->description !!}.</div></div></div>
                                <div class="slider-btn-group justify-content-{{$data->text_align}}">
                                    <div class="inner-layer">
                                        <a href="{{$data->button_link}}" class="slider-btn" data-animation="fade-in-bottom" data-delay="2.5s">{{$data->button_text}}</a>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div><!--Slide-{{$data->index+1}}-->

@endif