.pageHero {
         position: relative;
         width: 100%;
         height: 100vh;
         overflow: hidden;
      }

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

      .pageHero__content {
         position: relative;
         z-index: 2;
         color: #fff;
         margin-top: 120px;
      }

      .pageHero__title {
         font-size: 2.8rem;
         font-weight: 600;
      }

      .pageHero__text {
         font-size: 1.2rem;
      }


      .booking-form-overlay {
         position: absolute;
         bottom: -41px;
         left: 50%;
         transform: translateX(-50%);
         align-items: flex-end;
         flex-wrap: wrap;
         width: 40%;
         background: #fff !important;
         padding: 20px 30px;
         border-radius: 100px;
         box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
      }

      .booking-form-overlay .form-group {
         display: flex;
         flex-direction: column;
         text-align: left;
         flex: 1 1 200px;
         min-width: 160px;
      }

      .booking-form-overlay label {
         font-size: 14px;
         color: #444;
         margin-bottom: 5px;
         font-weight: 500;
         margin-left: 8px !important;
      }

      .booking-form-overlay input,
      .booking-form-overlay select {
         padding: 3px 4px;
         border: 1px solid #ccc;
         border-radius: 21px;
         font-size: 12px;
         width: 100%;
         text-align: center;
      }

      .form-btn button {
         width: 70%;
         background: #83a17e;
         color: #fff;
         border: none;
         padding: 9px;
         font-size: 13px;
         border-radius: 70px;
         cursor: pointer;
         font-weight: 500;
         transition: 0.3s;
      }

      .form-btn button:hover {
         background: #575a49;
      }


      .mobile-book-btn {
         display: none;
         text-align: center;
         margin-top: 20px;
         padding-bottom: 30px;
      }

      .btn-mobile {
         display: inline-block;
         background: #575a49;
         color: #fff;
         padding: 14px 40px;
         border-radius: 50px;
         font-size: 16px;
         font-weight: 600;
         text-decoration: none;
         transition: 0.3s;
      }


      .mobile-responsivedevice {
         display: none;
         padding: 25px 15px;
      }

      .form-responsivedevice {
         border: 1px solid #ddd;
         border-radius: 6px;
         padding: 20px;
         background: #fff;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
      }

      .form-responsivedevice .form-control {
         border: 1px solid #ccc;
         border-radius: 6px;
         padding: 12px;
         margin-top: 10px;
         width: 100%;
         font-size: 15px;
      }

      .form-responsivedevice button {
         width: 100%;
         background: #575a49;
         color: #fff;
         border: none;
         padding: 13px;
         border-radius: 6px;
         margin-top: 15px;
         font-size: 16px;
         cursor: pointer;
      }


      #ui-datepicker-div {
         position: absolute;
         width: 16%;
         top: 936px;
         left: 601.5px;
         z-index: 1;
         display: block;
         margin: 9px;
         width: auto !important;

      }

      .ui-widget.ui-widget-content {
         border: 1px solid #c5c5c5;
         width: 20%;
         font-size: 20px;
      }

      .ui-datepicker table {
         width: 100%;
         border-collapse: collapse;
         margin-bottom: .4em;
      }


      @media (max-width: 1684px) {
         .booking-form-overlay {
            width: 54%;
            background: rgba(255, 255, 255, 0.95);
         }
      }


      @media (max-width: 768px) {

         .booking-form-overlay {
            display: none;
         }

         .mobile-book-btn {
            display: block;
         }

         .pageHero {
            height: 75vh;
         }

         .pageHero__title {
            font-size: 1.6rem;
         }

         .pageHero__text {
            font-size: 1rem;
         }

         .mobile-responsivedevice {
            display: block;
         }
      }

      @media (min-width: 300px) and (max-width: 768px) {

         * {
            margin: 0;
            padding: 0;
         }

         h1,
         h2,
         h3,
         h4,
         h5,
         h6 {
            line-height: 1.2;
            font-weight: 400;
            text-align: center;
            font-size: 18px !important;
            text-transform: uppercase;
         }

         p,
         span {
            font-size: 14px;
            text-align: justify;
         }

         .form-responsivedevice {
            padding: 10px !important;
         }

         .form-responsivedevice button {
            background: #83a17e;
            padding: 5px 28px;
            font-size: 13px;
            height: 35px;
            border-radius: 50px;
         }

         .form-responsivedevice .form-control {
            height: 30px;
            font-size: 13px !important;
         }

         /*------- Rooms  ----*/
         .mobile-btn {
            display: none;
         }

         .experience-section {
            padding: 20px 0 !important;
            position: relative;
         }


         element.style {}

         .fa-solid,
         .fas {
            font-weight: 900;
         }

         .fa-classic,
         .fa-regular,
         .fa-solid,
         .far,
         .fas {
            font-family: "Font Awesome 6 Free";
         }

         .fa,
         .fa-brands,
         .fa-classic,
         .fa-regular,
         .fa-sharp,
         .fa-solid,
         .fab,
         .far,
         .fas {
            -moz-osx-font-smoothing: grayscale;
            -webkit-font-smoothing: antialiased;
            display: var(--fa-display, inline-block);
            font-style: normal;
            font-variant: normal;
            line-height: 1;
            text-rendering: auto;
         }

         @media (min-width: 300px) and (max-width: 768px) {
            * {
               margin: 0;
               padding: 0;
            }
         }

         *,
         :after,
         :before {
            box-sizing: border-box;
         }

         user agent stylesheet i {
            font-style: italic;
         }


      }

      @media (max-width: 576px) {

         .js-section-slider .swiper-slide {
            width: 100% !important;
         }

         .js-section-slider-wrapper {
            padding: 0 5px;
         }

         .roomCard_image img {
            width: 100%;
            height: auto;
         }

         .roomCard__content h3 {
            text-align: center;
            font-size: 18px;
         }

         .-hover-button-center__button {
            width: 90px !important;
            height: 90px !important;
         }

         .-hover-button-center__button span {
            font-size: 14px !important;
         }

         .view-all-desktop {
            display: none !important;
         }

         .view-all-mobile {
            display: flex !important;
            justify-content: center;
            margin-top: 20px;
         }

         .overlay-arrow-left,
         .overlay-arrow-right {
            display: none !important;
         }
      }


      @media (min-width: 577px) and (max-width: 768px) {
         .js-section-slider .swiper-slide {
            width: 50% !important;
         }

         /* Section spacing */

      }

      /* Section spacing */
      .mobileaboutsection {
         padding: 50px 0px !important;
         margin-top: 30px;
      }

      /* Default */
      .mobile-only {
         display: none;
      }

      .desktop-only {
         display: block;
      }

      /* Mobile */
      @media (max-width: 767px) {
         .desktop-only {
            display: none;
         }

         .mobile-only {
            display: block;
         }

         .js-section-slider-mobile {
            padding-bottom: 30px;
         }

         .mobile_responsive {
            display: none !important;
         }

         .mobile_videoresponsive {
            display: none !important;
         }

         #main_video {
            display: none !important;
         }

      }

      .main-video {
         width: 100%;
         height: 100vh;
         object-fit: cover;
      }

      /* Default: show desktop video */
      .desktop-video {
         display: block;
      }

      .mobile-banner {
         display: none;
      }

      /* Mobile view */
      @media (max-width: 768px) {
         .desktop-video {
            display: none;
         }

         /* .mobile-video {
            display: block;
            margin-bottom: 102px!important;
            margin-left: 0px;
         } */

         .mobile-banner {
            display: block;
            width: 100%;
            height: 60vh;
            background-image: url("../images/banner/chaukori-banner.jpg");
            background-size: cover;
            background-position: center top;

            background-repeat: no-repeat;
            margin-bottom: 100px !important;
            margin-left: calc(-50vw + 50%);
         }
      }

      @media (min-width: 576px) and (max-width: 768px) {
         .mobile-banner {
             display: block;
            width: 100%;
            height: 100vh!important;
            background-image: url("../images/banner/chaukori-banner.jpg");
            background-size: cover;
            background-position: center top;
            background-repeat: no-repeat;
            margin-bottom: 144px!important;
            margin-left: calc(-50vw + 50%);
         }
      }

      .js-section-slider-mobile {
         position: relative;
      }

      .js-section-slider-mobile .swiper-button-prev,
      .js-section-slider-mobile .swiper-button-next {
         background: #948F5F;
         color: #ffffff;
         width: 28px;
         height: 28px;
      }

      .js-section-slider-mobile .swiper-button-prev {
         left: 5px;
      }

      .js-section-slider-mobile .swiper-button-next {
         right: 5px;
      }

      /* Optional: smaller arrows on very small screens */
      @media (max-width: 480px) {

         .js-section-slider-mobile .swiper-button-prev,
         .js-section-slider-mobile .swiper-button-next {
            width: 26px;
            height: 26px;
            background: #948F5F !important;
            color: #ffffff !important;
              border-radius: 50%;
         }
      }