@if(!empty($related_courses) and count($related_courses) > 0)
    <div class="suggested-courses-section mt-40 mb-30">
        <div class="container-fluid">
            <h2 class="text-primary text-center mb-30 font-weight-bold font-24">
                دورات مقترحة أخرى
            </h2>
            
            <div class="row">
                @foreach($related_courses as $relatedCourse)
                    @if($relatedCourse->id != $course->id)
                        <div class="col-12 col-md-6 col-lg-4 mb-25">
                            @include('web.default.includes.webinar.grid-card', ['webinar' => $relatedCourse])
                        </div>
                    @endif
                @endforeach
            </div>
        </div>
    </div>

    <style>
        .suggested-courses-section {
            padding: 20px 0;
        }

        .suggested-courses-section h2 {
            margin-bottom: 30px;
            font-size: 24px;
        }

        @media (max-width: 768px) {
            .suggested-courses-section {
                padding: 15px 0;
            }

            .suggested-courses-section h2 {
                font-size: 20px;
                margin-bottom: 20px;
            }
        }
    </style>
@endif

