{{--<div class="placeload restaurant-placeload">--}}
{{--    <div class="image-placeholder loads"></div>--}}
{{--    <div class="placeholder-footer">--}}
{{--        <div class="footer-block">--}}
{{--            <div class="content-shape loads"></div>--}}
{{--            <div class="content-shape loads"></div>--}}
{{--            <div class="content-shape loads"></div>--}}
{{--        </div>--}}
{{--        <div class="img loads"></div>--}}
{{--    </div>--}}
{{--</div>--}}
<div class="my-5 restaurant-loaded" style="box-shadow: 0 0 20px #9b9b9b, 0 0 20px #eeeeee; border-radius: 20px;">
{{--<div class="mt-2 restaurant-wrapper loaded restaurant-loaded">--}}
    <a href="{{route('special-categories.business.menu', $restaurant->restaurantID )}}">
        <div class="restaurant-background-image2" style="background-image: url('{{$restaurant->photoUrl}}')"></div>
    </a>

    <div class="restaurant-container flex justify-space-between" style="padding: 1rem 2rem;">
        <div>
            <h3 style="color: black; padding: 0;">{{ $restaurant->restaurantName }}</h3>
            <h4 style="color: #2B2B2B">{!!  $restaurant->categoriesLabel ? $restaurant->categoriesLabel : '<br>' !!}</h4>
            <h4 class="text-gray">
                {{ $restaurant->deliveryTime }} min &nbsp; &middot;
                &nbsp; {{ round($restaurant->averageRate, 1) }}
                <span class="fa fa-star"></span>
            </h4>
        </div>
        <div class="right-content flex align-flex-end justify-space-between">
            <div class="ellipse outer-ellipse">
                <div class="ellipse inner-ellipse">
                    <p class="ellipse-content pt-3 flex flex-column justify-center align-items-center text-center">
                        <span class="time">{{ $restaurant->deliveryTime }}</span>
                        <span class="unit">Min</span>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>