@extends('frontend.front_master')

<style>
  .zoom:hover {
    transition: transform 0.3s ease-in-out;
    transform: scale(1.1);
    
}
</style>

<style>
   .btn-color-1 {
    background: #4942ad !important;
    color: #fff !important;
    font-weight: bold !important;
}
</style>

@section('title')
Course Page
@endsection

@section('content')
<!-- ======= course Section ======= -->
<section id="services">
    <div class="container" data-aos="fade-up">
      <div class="section-header">
        <h2>আমদের  কোর্স সমূহ</h2>
      </div>

      <div class="row gy-4">
       

        @foreach ($courses as $row)
        <div class="col-lg-4" data-aos="fade-up" data-aos-delay="100">
        <div class="card" style="overflow: hidden;">
            <a href=""><img src="{{asset($row->image)}}" class="card-img-top zoom" alt="..."></a>
            <div class="card-body">
              <h5 class="card-title text-center" style="color:#0c2e8a; font-size:27px;font-weight:bold;">{{$row->title}}</h5>
              <p class="card-text text-center" style="font-family:'Open Sans,sans-sarif';">{!!Str::limit($row->description,150)!!}</p>
              <div style="text-align:center">
              <a href="{{route('course.single',$row->id)}}" class="btn btn-color-1" style="text-align:center;">বিস্তারিত পড়ুন</a>
              </div>
            </div>
          </div>
        </div>
       @endforeach

       {{ $courses->links()}}


      </div>

    </div>
</section>
<!-- End course Section -->

@endsection