<!-- start Simple Custom CSS and JS -->
<style type="text/css">
    <style type="text/css">
      /* Import Google Font for a Modern Look */
      @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

      /* General Styling */
      body {
        font-family: 'Roboto', sans-serif;
      }

      .hotel-list-container {
        width: 100% !important;
        padding: 0 !important;
        margin-right: 0px !important;
      }

      .hotel-list {
        list-style-type: none !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      .hotel-list-item {
        margin: 12px 0 !important;
        border: 1px solid #dcdcdc !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: row !important;
        background-color: #fff !important;
      }

      .hotel-image img {
        width: 120px !important;
        height: 120px !important;
        object-fit: cover !important;
        display: block !important;
      }

      .hotel-content {
        border: 1px solid #dfdfdf !important;
        background-color: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
        overflow: hidden !important;
        color: black !important;
        /*  text-align: center !important;*/
        padding: 0px !important;
        max-width: 320px !important;
        margin: auto !important;
        position: relative !important;
      }

      /* Navigation Buttons */
      .custom-nav-btn {
        background-color: #b58d1a !important;
        color: white !important;
        width: 30px !important; /* smaller size */
        height: 30px !important;
        border-radius: 50% !important;
        position: absolute !important;
        top: 50% !important;
        z-index: 1000 !important; /* ensure buttons are on top */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 16px !important; /* smaller font */
        cursor: pointer !important;
        transform: translateY(-50%) !important;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
        user-select: none !important;
        transition: opacity 0.3s ease !important;
      }

      .custom-nav-btn:hover {
        opacity: 1 !important;
      }

      .swiper-button-prev.custom-nav-btn {
        left: 0px !important; /* adjusted closer */
      }

      .swiper-button-next.custom-nav-btn {
        right: 0px !important;
      }

      /* Hide default Swiper arrows */
      .swiper-button-prev::after,
      .swiper-button-next::after {
        display: none !important;
      }

      /* .hotel-content {
        background-color: red !important;
        padding: 10px !important;
        flex: 1 !important;
      } */

      .hotel-title {
        font-size: 1.1rem !important;
        margin: 0 0 5px !important;
        color: #333 !important;
      }

      .hotel-description {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
        color: #666 !important;
      }

      /* .hotel-id {
        font-size: 0.8rem !important;
        color: #999 !important;
      } */

      /* .hotel-button {
        background-color: #04845a !important;
        color: #fff !important;
        border: none !important;
        padding: 6px 12px !important;
        border-radius: 4px !important;
        cursor: pointer !important;
        font-size: 0.85rem !important;
      } */

      .book-now-container {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
      }

      .Carousel__CardImage {
        width: 100%;
        height: auto;
        object-fit: cover;
        border-radius: 8px;
      }

      .Carousel__CardText {
        position: absolute;
        bottom: 20px;
        left: 20px;
        color: white;
        background: rgba(0, 0, 0, 0.5);
        padding: 10px;
        border-radius: 4px;
      }

      .Carousel__img {
        position: relative;
      }

      /* Hotel card starts */
      .hotel-button {
        width: 100% !important;
        padding: 14px !important;
        border: 1px solid transparent !important;
        background-color: #bc961d !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        border-radius: 4px !important;
        transition: background-color 0.3s ease;
      }

      .hotel-button:hover {
        background-color: #a87e14 !important;
      }

      .hotel-price,
      .hotel-id,
      .hotel-totalprice {
        font-size: 1rem !important;
        padding: 8px 12px !important;
        margin: 6px 0 !important;
        border-radius: 6px !important;
        background-color: #f4f6f8 !important;
        color: #333 !important;
        font-weight: 500 !important;
        display: inline-block !important;
        width: fit-content !important;
      }

      .hotel-price {
        background-color: #e0f7fa !important;
        color: #00796b !important;
      }

      .hotel-id {
        background-color: #fff9e6 !important;
        color: #c7a200 !important;
      }
      /* Hotel card starts */

      /* .hotel-price {
        color: #8e610e !important;
        font-size: 14px !important;
        font-weight: bold !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
      } */

      /* .tab-button {
        padding: 6px 11px !important;
        background: #ddd !important;
        border: none !important;
        cursor: pointer !important;
        border-radius: 5px !important;
        font-weight: bold !important;
        font-size: 10px !important;
      } */

      /* Tab Navigation */

      .hotel-tab-list li {
        max-width: 300px !important;
        padding: 20px 10px !important;
        border: 1px solid #ddd !important;
        border-radius: 8px !important;
        overflow: hidden !important;
        font-family: Arial, sans-serif !important;
        background-color: #fff !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
      }

      .hotel-tab-list ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }

      .hotel-tab-list li {
        border-bottom: 1px solid #eee;
      }

      .hotel-tab-list li:last-child {
        border-bottom: none;
      }

      .hotel-tab-list a {
        display: block;
        padding: 12px 16px;
        text-decoration: none;
        color: #333;
        transition: background 0.3s, color 0.3s;
      }

      .hotel-tab-list a:hover {
        background-color: #f5f5f5;
        color: #000;
      }

      .hotel-tab-list a.active {
        background-color: #000;
        color: #fff;
        font-weight: bold;
      }
      .tab-container {
        display: flex !important;
        justify-content: space-around !important;
        margin-bottom: 10px;
      }

      .tab-button {
        width: 100% !important;
        border-radius: 0 !important;
        border: none !important;
        text-transform: uppercase !important;
        -webkit-transition: 0.25s !important;
        -moz-transition: 0.25s !important;
        -ms-transition: 0.25s !important;
        transition: 0.25s !important;
        background: #3b4244 !important;
        color: #fff !important;
        font-size: 0.75em !important;
        text-align: center !important;
        padding: 15px 0 !important;
        margin: 0 !important;
        cursor: pointer !important;
      }

      .tab-button.active {
        border: none !important;
        background: #fff !important;
        color: #3b4244 !important;
      }

      /* Hide Tab Content by Default */
      .tab-pane-new {
        padding: 20px 25px 20px 33px !important;
      }
      .tab-pane {
        padding: 20px !important;
      }

      .tab-content {
        
        padding: 10px;
      }

      /* Show Active Tab */
      .tab-content.active {
        display: block;
      }

      .hotel-tab-content {
        display: none !important;
      }

      .hotel-tab-content.active {
        display: block !important;
      }

      .Carousel__Navigation {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translateX(-50%) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        z-index: 10 !important;
      }

      .Carousel__NavigationButton {
        border: none !important;
        color: white !important;
        font-size: 16px !important;
        width: 35px !important;
        height: 35px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        transition: background 0.2s ease-in-out, box-shadow 0.2s ease-in-out,
          opacity 0.2s ease-in-out !important;
        cursor: pointer !important;
        outline: none !important;
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        background: linear-gradient(135deg, #a47d19, #bd8e19) !important;
        box-shadow: 0 3px 8px rgba(103, 85, 32, 0.3) !important;
        opacity: 1 !important;
      }

      /* Left and Right Button Positioning */
      .Carousel__NavigationPrevious {
        left: -15px !important;
      }

      .Carousel__NavigationNext {
        right: -15px !important;
      }

      /* Hover and Active Effects */
      /* .Carousel__NavigationButton:hover {
        background: linear-gradient(135deg, #a47d19, #bd8e19) !important;
        box-shadow: 0 3px 8px rgba(103, 85, 32, 0.3) !important;
        opacity: 1 !important;
      } */

      .Carousel__NavigationButton:active {
        box-shadow: 0 1px 4px rgba(103, 85, 32, 0.3) !important;
      }

      .cds--tile.Carousel__Card {
        background: #ffffff !important;
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
      }

      .floatright {
        float: right !important;
      }

      .floatleft {
        float: left !important;
      }

      /* .cds--btn.Carousel__CardButton {
  background: linear-gradient(135deg, #ff4081, #ff80ab) !important;
  box-shadow: 0 2px 6px rgba(255, 64, 129, 0.5) !important;
} */

      /* Carousel Card Container */
      .Carousel__Card {
        background: #ffffff;
        border-radius: 12px !important;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out !important;
        overflow: hidden !important;
        color: black !important;
        /*  text-align: center !important;*/
        padding: 0px !important;
        max-width: 320px !important;
        margin: auto !important;
        position: relative !important;
      }

      /* Hover Effect for Card */
      .Carousel__Card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }

      .Carousel__img {
        position: relative !important;
      }

      .Carousel__img::before {
        content: '' !important;
        width: 100% !important;
        height: 100% !important;
        left: 0 !important;
        top: 0 !important;
        background: -webkit-linear-gradient(
          top,
          rgba(0, 0, 0, 0.25),
          #000
        ) !important;
        background: -moz-linear-gradient(
          top,
          rgba(0, 0, 0, 0.25),
          #000
        ) !important;
        background: -ms-linear-gradient(
          top,
          rgba(0, 0, 0, 0.25),
          #000
        ) !important;
        background: linear-gradient(
          bottom,
          rgba(0, 0, 0, 0.25),
          #000
        ) !important;
        opacity: 0.8 !important;
        position: absolute !important;
        z-index: 1 !important;
      }

      /* Card Image */
      .Carousel__CardImage {
        width: 100% !important;
        height: 180px !important;
        /* object-fit: cover !important;
  border-radius: 12px 12px 0 0 !important; */
      }

      /* Card Text Content */
      .Carousel__CardText {
        /* padding: 15px 10px !important; */
        position: absolute !important;
        bottom: 30px !important;
        left: 20px !important;
        width: calc(100% - 40px) !important;
        color: #fff !important;
        z-index: 9 !important;
      }

      .Carousel__CardTitle {
        font-size: 1.125em !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        padding-right: 25% !important;
        margin: 0 0 10px !important;
      }

      .Carousel__CardDescription {
        font-size: 14px !important;
        color: #3e3c3c !important;
        line-height: 1.42857143 !important;
        font-family: 'Open Sans', sans-serif !important;
        margin-bottom: 14px !important;
      }

      /* Primary Button - View More */
      .Carousel__CardButton {
        background: #219ca0 !important;
        border-color: #219ca0 !important;
        color: #fff !important;
        border-radius: 15px !important;
        text-decoration: none !important;
        transition: all 0.3s ease-in-out !important;
        cursor: pointer !important;
        text-align: center !important;
        font-weight: 400 !important;
        font-size: 14px !important;
        padding: 6px 6% !important;
        margin: 5px auto !important;
        display: inline-block !important;
        font-family: 'Open Sans', sans-serif !important;
        line-height: 1.5 !important;
      }

      .CheckRoom {
        width: 100% !important;
        padding: 14px !important;
        border: 1px solid transparent !important;
        background-color: #bc961d !important;
        color: #fff !important;
        font-size: 18px !important;
        font-weight: bold !important;
        cursor: pointer !important;
        border-radius: 4px !important;
        transition: background-color 0.3s ease;
      }

      .CheckRoom:hover {
        background-color: #a87e14 !important;
      }
      /* Hover Effect for Buttons */
      .Carousel__CardButton:hover {
        background: #104a4b !important;
        border-color: #104a4b !important;
      }

      /* Secondary Button - "Tell me more" */
      /* .Carousel__CardButtonMessage {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  box-shadow: 0 2px 6px rgba(76, 175, 80, 0.4);
}

.Carousel__CardButtonMessage:hover {
  background: linear-gradient(135deg, #388e3c, #4caf50);
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.6);
} */
    </style>

</style>
<!-- end Simple Custom CSS and JS -->