{{-- 
<div class="w-100" id="hero_banner" style="background-image: url('/images/home-hero-bg.png')">
    <h1 class="text-center font-weight-bold">
      Faculty of Medicine Ramathibodi Hospital,<br class="d-none d-md-block" />
      Mahidol University
    </h1>
    <div class="container position-relative mt-5">
      <h2 class="position-absolute top-0 start-50 translate-middle-x">คอร์สติดอันดับ</h2>
    </div>
    <div class="w-100 mt-5">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
            @foreach ($heroCourseData as $key => $course)
            <div class="swiper-slide">
                <a href="{{ $course['link'] }}">
                  <p class="number-course">{{$key+1}}</p>
                    <img src="{{ asset($course['img']) }}" alt="Hero Course">
                </a>
            </div>
        @endforeach
        </div>
      </div>
    </div>
  </div>
   --}}
   <div class="swiper-container w-100" id="hero_banner">
    <div class="swiper-wrapper">
      @foreach ($heroCourseData as $key => $course)
        <div class="swiper-slide" style="background-image: url('/images/home-hero-bg.png'); background-size: cover; background-position: center;">
          <h1 class="text-center font-weight-bold text-black">
            Faculty of Medicine Ramathibodi Hospital,<br class="d-none d-md-block" />
            Mahidol University
          </h1>
          
          <div class="w-100 mt-5">
            <div class="swiper mySwiper">
              <div class="swiper-wrapper">
                  
              </div>
            </div>
          </div>
          
        </div>
      @endforeach
    </div>
    
    <div class="swiper-pagination"></div>
  </div>
  <div class="search-section">
    <div class="container-search">
        <div class="card custom-card">
            <form class="p-3">
                <div class="row align-items-center">
                    <div class="col-md-3 form-group">
                        <select class="form-select">
                            <option selected>หมวดหมู่</option>
                            <option value="1">Category 1</option>
                            <option value="2">Category 2</option>
                            <option value="3">Category 3</option>
                        </select>
                    </div>
                    <div class="col-md-6 form-group">
                        <input type="text" class="form-control" placeholder="ค้นหาชื่อคอร์ส ชื่อผู้สอน ที่คุณสนใจ">
                    </div>
                    <div class="col-md-3 form-group">
                        <button type="submit" class="btn green-btn w-100">ค้นหา</button>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col-auto">
                        ประเภท
                    </div>
                    <div class="col">
                        <label class="form-check-label me-3">
                            <input type="checkbox" class="form-check-input"> ประชาชน
                        </label>
                        <label class="form-check-label">
                            <input type="checkbox" class="form-check-input"> แพทย์ นักศึกษา และบุคลากรทางการแพทย์
                        </label>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

 <style>
  @media (max-width: 800px) {
    .container-search {
      position: absolute;
        width: 90%;  /* Make it fit smaller screens */
        left: 5%;     /* Adjust left positioning */
        top: 50%;     /* Move it up slightly */
        z-index: 10;
    }
    
    .custom-card .row {
        flex-direction: column; /* Stack elements */
    }
    
    .col-md-3, .col-md-6 {
        width: 100%; /* Make form elements full width */
        margin-bottom: 10px; /* Add spacing */
    }

    .form-check-label {
        display: block; /* Stack checkboxes vertically */
    }
}
@media (min-width: 801px) {
  .container-search{
    position: absolute;
    width: 70%;
    left: 15%;
    top: 64%;
    z-index: 10;
  }
}
  #hero_banner {
  width: 100%;
  height: 70vh; /* Full-screen height */
  position: relative;
  overflow: hidden; /* Prevent overflow */
}

.swiper-slide {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: white;
  position: relative;
}

.number-course {
  font-size: 2rem;
  font-weight: bold;
}

.swiper-slide img {
  display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
}

.swiper-pagination-bullet-active {
  background-color: rgb(9, 130, 244) !important; /* Highlight active bullet */
}

.swiper-button-next,
.swiper-button-prev {
  color: white; /* White navigation arrows */
}

 </style>