<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>New Step Hotel Home</title>
  <?php require('link.php'); ?>
  <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;300;400;500;600;700;800;900&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
  <style>
    * {
      <font-family: 'Raleway', sans-serif;
    }

    .h-font {
      font-family: 'Bebas Neue';
    }

    /*Remove number input arrows - Chrome, Safari, Edge, Opera */
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  </style>
</head>

<body>

  <?php require('header.php'); ?>

  <!--Swiper Image Slider-->
  <div class="container-fluid px-lg-4 mt-4">
    <div class="swiper swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide"><img src="image/project5.jpeg" alt="Slide Image" class=" h-50 w-100 d-block"> </div>
        <div class="swiper-slide"><img src="image/banner01.jpg" alt="Slide Image"
            class=" h-50 img-fluid w-100 d-block ">
        </div>
        <div class="swiper-slide"><img src="image/banner02.jpg" alt="Slide Image" class=" h-50 img-fluid w-100 d-block">
        </div>
        <div class="swiper-slide"><img src="image/banner03.jpg" alt="Slide Image" class=" h-50 img-fluid w-100 d-block">
        </div>
      </div>
    </div>
  </div>

  <!-- Check Date Availability Section -->
  <div class="container">
    <div class="row">
      <div class="col-lg-12 bg-white shadow p-4 rounded">
        <h5 class="md-4">Check booking Availability </h5>
        <from>
          <div class="row align-items-end">
            <div class="col-lg-3">
              <label class="form-label" style="font-weight:500;">Check-in</label>
              <input type="date" class="form-control shadow-none">
            </div>
            <div class="col-lg-3">
              <label class="form-label" style="font-weight:500;">Check-Out</label>
              <input type="date" class="form-control shadow-none">
            </div>
            <div class="col-lg-3">
              <label class="form-label" style="font-weight :500;">Adults</label>
              <select class="form-select shadow-none">
                <option value="1">1 Adult</option>
                <option value="2">2 Adults</option>
                <option value="3">3 Adults</option>
              </select>
            </div>
            <div class="col-lg-2">
              <label class="form-label" style="font-weight :500;">Children</label>
              <select class="form-select shadow-none">
                <option value="1">1 Children</option>
                <option value="2">2 Children</option>
                <option value="3">3 Children</option>
              </select>
            </div>
            <div class="col-lg-1">
              <button type="submit" class="btn btn-primary w-100 mt-4 shadow-none">Submit</button>
            </div>
          </div>
        </from>
      </div>
    </div>
  </div>

  <!-- Our Rooms -->
  <h2 class="mt-5 pt-4 mb-4 text-center fw-bold h-font">Our Rooms</h2>
  <div class="container">
    <div class="row">
      <div class="col-lg-4 col-md-6 my-3">
        <div class="card" style="max-width: 350px; margin: auto;">
          <img src="image/rooms/room1.jpg" class="card-img-top">
          <div class="card-body">
            <h5>Simple Room</h5>
            <h6 class="mb-4">Rs 1000 Per Night</h6>
            <div class="features mb-4">
              <h6 class="mb-1">Features</h6>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                2 Rooms
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                1 Bathroom
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                1 Balcony
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                2 Sofa
              </span>
            </div>
            <div class="facilities mb-4">
              <h6 class="mb-1">Facilities</h6>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                Wifi
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                AC
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                TV
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                Heater
              </span>
            </div>
            <div class="d-flex justify-content-evenly mb-2">
              <a href="#" class="btn btn-primary">Book Now</a>
              <a href="#" class="btn btn-primary">More details</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 my-3">
        <div class="card" style="max-width: 350px; margin: auto;">
          <img src="image/rooms/room1.jpg" class="card-img-top">
          <div class="card-body">
            <h5>Simple Room</h5>
            <h6 class="mb-4">Rs 1000 Per Night</h6>
            <div class="features mb-4">
              <h6 class="mb-1">Features</h6>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                2 Rooms
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                1 Bathroom
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                1 Balcony
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                2 Sofa
              </span>
            </div>
            <div class="facilities mb-4">
              <h6 class="mb-1">Facilities</h6>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                Wifi
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                AC
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                TV
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                Heater
              </span>
            </div>
            <div class="d-flex justify-content-evenly mb-2">
              <a href="#" class="btn btn-primary">Book Now</a>
              <a href="#" class="btn btn-primary">More details</a>
            </div>
          </div>
        </div>
      </div>
      <div class="col-lg-4 col-md-6 my-3">
        <div class="card" style="max-width: 350px; margin: auto;">
          <img src="image/rooms/room1.jpg" class="card-img-top">
          <div class="card-body">
            <h5>Simple Room</h5>
            <h6 class="mb-4">Rs 1000 Per Night</h6>
            <div class="features mb-4">
              <h6 class="mb-1">Features</h6>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                2 Rooms
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                1 Bathroom
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                1 Balcony
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                2 Sofa
              </span>
            </div>
            <div class="facilities mb-4">
              <h6 class="mb-1">Facilities</h6>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                Wifi
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                AC
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                TV
              </span>
              <span class="badge rounded-pill bg-light text-dark text-wrap lh-base">
                Heater
              </span>
            </div>
            <div class="d-flex justify-content-evenly mb-2">
              <a href="#" class="btn btn-primary">Book Now</a>
              <a href="#" class="btn btn-primary">More details</a>
            </div>
          </div>
        </div>
      </div>


      <div class="col-lg-12 text-center mt-5">
        <a href="#" class="btn btn-primary shadow-none btn-sm">More Rooms</a>
      </div>
    </div>
  </div>
  <br><br> <br>


  <!-- Our Facilities -->
  <h2 class="mt-5 pt-4 mb-4 text-center fw-bold h-font">Our Facilities</h2>
  <div class="container">
    <div class="row justify-content-evenly px-lg-0 px-md-0 px-5">
      <div class="col-lg-2 col-md-2 text-center bg-white rounded shadow  py-4 my-3">
        <img src="image/facilities/wifi.svg" width="80px">
        <h5 class="mt-3">Wifi</h5>
      </div>
      <div class="col-lg-2 col-md-2 text-center bg-white rounded shadow  py-4 my-3">
        <img src="image/facilities/wifi.svg" width="80px">
        <h5 class="mt-3">Wifi</h5>
      </div>
      <div class="col-lg-2 col-md-2 text-center bg-white rounded shadow  py-4 my-3">
        <img src="image/facilities/wifi.svg" width="80px">
        <h5 class="mt-3">Wifi</h5>
      </div>

    </div>
  </div>
  </div>
  <br><br> <br>

  <?php require('footer.php'); ?>




  <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
  <!-- Initialize Swiper -->
  <script>
    var swiper = new Swiper(".swiper-container", {
      spacebetween: 30,
      effect: "fade",
      loop: true,
      autoplay: {
        delay: 3500,
        disableOnInteraction: false,
      }
    },
    );
  </script>

</body>

</html>