owl carousel

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css" integrity="sha512-sMXtMNL1zRzolHYKEujM2AqCLUR9F2C4/05cdbxjjLSRvMQIciEPCQZo++nk7go3BtSuK9kfa/s+a4f4i5pLkw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <style>
        .owl-nav {
          position: absolute;
          top: 50%;
          width: 100%;
          display: flex;
          justify-content: space-between;
          transform: translateY(-50%);
        }
        .owl-nav button {
          width:30px !important;
          height:30px !important;
          background: #0F6938 !important;
          border: none !important;
          font-size: 33px !important;
          padding: 0px !important;
          border-radius:100% !important;
          cursor: pointer !important;
          display: flex !important;
          align-items: center !important;
          justify-content: center !important;
        }
        .owl-nav button span{
          color: white !important;
        }
        .owl-nav button.owl-prev {
          position: absolute;
          left: 0px;
        }
        .owl-nav button.owl-next {
          position: absolute;
          right: 0px;
        }
        .owl-nav button:hover {
          background: #B3A032 !important;
        }
        .owl-theme .owl-dots .owl-dot span {
            background: #B3A032;
        }
        .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
            background: #0F6938;
        }
    </style>
    <section>
      <div class="container pt-5">
        <div class="row">
            <div class="col-lg-12">
                <div class="owl-carousel owl-theme mb-5">
                    @foreach(App\Models\Course::allCourse() as $course)
                    <div class="item">
                        <a href="{{ route('single.course.front',$course->id) }}" style="text-decoration:none; color:#007a80;">
                            <div class="card p-2">
                              <style>
                                  .card:hover{
                                      box-shadow: 0px 0px 2px #009DA6;
                                      background-color: #B2E5E8;
                                      color: black;
                                      transition: .5s;
                                  }
                              </style>
                              <img src="{{ asset('images/course/'.$course->logo) }}" style="width:100%;height:150px;">
                              <div class="card-body">
                                <p class="text-uppercase fw-bold">{{$course->title}}</p>
                                <span class="d-block">Yearly Price : {{$course->yearly_price}}</span>
                                <span class="d-block">Lifetime Price : {{$course->lifetime_price}}</span> 
                                <span class="d-block text-end py-2">with - <b>{{$course->user->name}}</b></span>
                              </div>
                            </div>
                        </a>
                    </div>
                    @endforeach
                </div>
            </div>
        </div>
      </div>
    </section>  
          
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      $('.owl-carousel').owlCarousel({
        loop:false,
        margin:10,
        autoplay:true,
        autoplayTimeout:5000,
        stagePadding:50,
        nav:true,
        dots:true,
        responsive:{ 0:{ items:1 }, 600:{ items:3 }, 1000:{ items:4 }
        }
      })
    </script>