@push('styles')
    <style>
        .news-block .inner-box {
            box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
        }

        .news-block .content-box {
            margin-top: 0px !important;
            margin-right: 0px !important;
            padding: 6px 5px 6px 10px !important;
            border-top: none !important;
        }

        .news-block .inner-box .image-box {
            border: 1px solid #ebebeb;
            border-radius: 5px;
            border-bottom: none !important;
            background-color: #f9f9f9;
            height: 100px;
        }

        .news-block .inner-box .image-box img {
            object-fit: contain;
            max-height: 100px;
        }

        .news-block .content-box a {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            display: block;
            width: 100%;
            font-size: 15px;

        }
    </style>
@endpush
@if (isset($institutes) && count($institutes) > 0)
    <section class="bg-white">
        <div class="auto-container bg-white">
            <div class="bg-image"></div>

            <div class="sec-title text-center">
                <span class="sub-title">Universities We Offer</span>
                <h2>
                    @php
                        $countrySectionTitle = getDataBySlug('Widget', 'institutes-section-title', 'content');
                    @endphp

                    @if ($countrySectionTitle)
                        {!! $countrySectionTitle->content ?? '-' !!}
                    @endif
                </h2>
            </div>

            <div class="row bg-white justify-content-center">
                @foreach ($institutes as $institute)
                    <div class="news-block col-lg-2 col-md-4 col-sm-6">
                        <div class="inner-box">
                            <div class="image-box">
                                <figure class="image">
                                    @if ($institute->feature_image && file_exists(public_path('uploads/institutes/' . $institute->feature_image)))
                                        <a href="{{ route('frontend.institutes.show', $institute->slug) }}"><img
                                                src="{{ asset('uploads/institutes/' . $institute->feature_image) }}"
                                                alt="{{ $institute->title }}" title="{{ $institute->title }}"></a>
                                    @else
                                        <a href="{{ route('frontend.institutes.show', $institute->slug) }}"><img
                                                src="{{ asset('frontend/images/no-image.jpg') }}" alt="{{ $institute->title }}" title="{{ $institute->title }}"></a>
                                    @endif
                                </figure>
                            </div>
                            <div class="content-box">
                                <div class="content">
                                    <h6 class="title">
                                        <a href="{{ route('frontend.institutes.show', $institute->slug) }}"
                                            title="{{ $institute->title ?? '-' }}">
                                            {{ $institute->title ?? '-' }}
                                        </a>
                                    </h6>
                                </div>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>

            <div class="row my-3">
                <div class="col-12 text-center">
                    <a href="{{ route('frontend.institutes.index') }}" class="btn btn-primary">View All</a>
                </div>
            </div>
        </div>
    </section>
@endif