@if($ps->slider == 1)

@if($sliders)
@include('includes.slider-style')
@endif
@endif

@if($ps->slider == 1)
<!-- Hero Area Start -->
<section class="hero-area">
    @if($ps->slider == 1)

    @if($sliders)
    <div class="hero-area-slider">
        <div class="slide-progress"></div>
        <div class="intro-carousel">
            @foreach($sliders as $data)
            <a href="{{$data->link}}" target="_blank">
                <div class="intro-content">
                    <img src="{{asset('storage/images/sliders/'.$data->photo)}}">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="slider-content">
                                    <!-- layer 1 -->
                                    <div class="layer-1">
                                        <h4 style="font-size: {{$data->subtitle_size}}px; color: {{$data->subtitle_color}}"
                                            class="subtitle subtitle{{$data->id}}"
                                            data-animation="animated {{$data->subtitle_anime}}">{{$data->subtitle_text}}
                                        </h4>
                                        <h2 style="font-size: {{$data->title_size}}px; color: {{$data->title_color}}"
                                            class="title title{{$data->id}}"
                                            data-animation="animated {{$data->title_anime}}">{{$data->title_text}}</h2>
                                    </div>
                                    <!-- layer 2 -->
                                    <div class="layer-2">
                                        <p style="font-size: {{$data->details_size}}px; color: {{$data->details_color}}"
                                            class="text text{{$data->id}}"
                                            data-animation="animated {{$data->details_anime}}">{{$data->details_text}}
                                        </p>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </a>
            @endforeach
        </div>
    </div>
    @endif

    @endif

</section>
<!-- Hero Area End -->
@endif