@if($pop)
@include('frontend.partial.index._pop_up')
@endif
<style>
    .dtrr {
        width: 260px;
    }

    @media(max-width:576px) {
        /* .oc.shop-category .cat-row a:nth-last-child(2) {
            display: none
        } */
    }

    .hero-slider{max-height:390px;overflow:hidden;}

    @media(max-width:1199px) {
        .hero-slider.col-lg-9 {
            flex: 0 0 72% !important;
            max-width: 72% !important;
        }

        /* .hero-categories ul li:last-child {
            display: none;
        } */

        /* .hero-categories ul li:nth-last-child(2) {
            display: none;
        } */

        @media(max-width:1000px) {
            .hero-categories ul li:last-child {
                display: block;
            }

            /* .hero-categories ul li:nth-last-child(2) {
                display: block;
            } */

            .dtrr {
                display: none;
            }

            .hero-slider.col-lg-9 {
                flex: inherit !important;
                max-width: inherit !important;
            }
        }

    }
</style>
<section class="hero-area" style="margin-top:2px">
    <div class="container-fluid">
        <div class="row">
            <div class="hero-slider col-lg-12">
                <div class="slideshow">
                    <div class="slider main_slider">
                        @foreach ($sliders as $key => $slider)
                        <div class="item">
                            <a href="{{$slider->url}}">
                                <img src="@if (file_exists(public_path() . '/uploads/slider/'.$slider->image)){{ asset('uploads/slider/'.$slider->image) }}@else{{ asset('/icon/no-img-cat.png') }}@endif" />
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<style>
    .sub-slider img::hover {
        transform: scale(1.1) !important;
    }

    .navbar_fixed {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999999;
    }

    .catplay .draggable {
        padding: 20px 0px
    }

    .catplay .slick-slide {
        margin: 0px 5px
    }
</style>