*{
	margin: 0;
	padding:0;
  font-optical-sizing: auto;
  font-style: normal;
list-style: none;
	box-sizing: border-box;
}

header {
    background:#fff;
    padding:20px 42px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    justify-content:space-between;
}
body{
    background:#F7F7F7;
}

.logo img{
    max-width:186px;
    width:100%;
}

.nav ul{
    display:flex;
    gap:45px;
}

.nav ul li{
    list-style:none;
}
.nav ul li a{
    color:#187386;
    font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 16px;
leading-trim: NONE;
line-height: 30.4px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
    text-decoration:none;
}
.header_bt a{
    border: 1px solid #187386;
    height:42px;
    width:148px;
    display:block;
    line-height:42px;
    text-align:center;
    color:#187386;
    text-decoration:none;
    border-radius:50px;
    
}
.thumbImg{
	margin-left: 9px;
    margin-bottom: 4px;
}
.slider_sec{
	margin-top: 45px;
  max-height: 464px;
}

.slider-banner-image,.thumbImg{
	border-radius: 16px;
	overflow: hidden;
}
.container{
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 15px;
}

.back_bt{
	margin-top: 36px;
	display: flex;
	font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 18px;
leading-trim: NONE;
line-height: 28px;
letter-spacing: 0%;

	align-items: center;
	gap: 10px;
}

.banner-slider img{
	width: 100%;
	height: 100%;
}


.banner-slider {
    width:100%;
    overflow:hidden;
    display:flex;
    gap:20px;
}
.banner-slider>div{
    width:calc(50% - 10px);
}

ul.slick-dots {
    display: flex;
    gap: 5px;
    left: 20%;
    position: absolute;
    bottom: 30px;
}
.slick-active{
    opacity:1;
}
.slick-dots li{
    width:16px;
    background:#fff;
    border-radius:52px;
    opacity:0.7;
    height:4px;
    list-style:none;
}
.slick-dots li button{
    background:none;
    border:none;
    font-size:0;
}
.slick-dots li.slick-active{
    opacity:1;
}

.bt{
	font-family: Parkinsans !important;
font-weight: 600;
font-style: SemiBold;
font-size: 15px;
leading-trim: NONE;
line-height: 28.5px;
letter-spacing: 0%;
text-align: center;
vertical-align: middle;

	background: #fff;
	border-radius: 42px;
	padding: 0 40px;
	display: inline-block;
	height: 54px;
	line-height: 54px;
	text-decoration: none;
	border: 1px solid #187386;
	color: #187386;
}

.Amenities,.avaialbe_days,.reivews,.go_k,.map{
	border-top: 1px solid #BEBDBD;
	padding: 16px 0;
}
.Amenities h2,.avaialbe_days h2,.reivews h2,.go_k h2,.left_s h2{
	font-family: Parkinsans !important;
font-weight: 600;
font-style: SemiBold;
font-size: 30px;
leading-trim: NONE;
line-height: 52px;
letter-spacing: 0%;
vertical-align: middle;
color: #187386;
}


.second_se{
	display: flex;
	gap: 100px;
	margin-top: 85px;
}
.left_s{

	width: calc(60% - 100px);
}

.right_s{
	width: 40%;
}
.left_s p{
	font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 26.6px;
letter-spacing: 0%;
color: #181A20;
}

.ratings{
	font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 18px;
leading-trim: NONE;
line-height: 27px;
letter-spacing: 0%;
text-decoration: underline;
text-decoration-style: solid;
text-decoration-offset: 0%;
text-decoration-thickness: 0%;
text-decoration-skip-ink: auto;
color: #000000;
display: flex;
gap: 5px;
align-items: center;
	margin: 10px 0 25px;
}
.mt_25{
	margin-top: 25px;
}

.mb_35{
	margin-bottom: 35px;
}


ul.features {
    display:flex;
    flex-wrap:wrap;
    width:100%;
    gap:10px;
    row-gap:28px;
    margin-top:35px;
    margin-bottom:50px;
}

ul.features li{
    width:calc(50% - 20px);
    display:flex;
    align-items:center;
    font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
gap:10px;
}

.Amenities .bt{
    margin-bottom:25px;
}
.box{
    box-shadow: 0px 6px 15px 0px #404F680D;
    padding:40px;
    background:#fff;
    border-radius:45px;
    border: 1px solid #E9E9E9
}
.box h3{
    font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 17px;
leading-trim: NONE;
line-height: 29px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color:#187386;
    margin-bottom:25px;
}
.box_f{
    display:flex;
    flex-wrap:wrap;
width:100%;
    column-gap:10px;
    margin-bottom:35px;
    row-gap:25px;
}
.box_f li{
    gap:11px;
    align-items:center;
    width:calc(50% - 10px);
    display:flex;
}
.box_f li h4{
    font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 15px;
leading-trim: NONE;
line-height: 28px;
letter-spacing: 0%;
vertical-align: middle;
color:#1A1A1A;
}


.box_f li p{
    font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 15px;
leading-trim: NONE;
line-height: 28px;
letter-spacing: 0%;
vertical-align: middle;
color:#BEBDBD;
}
.bts{
	display: flex;
	justify-content: center;
	gap: 36px;
	flex-wrap: wrap;
}
.btg{
	background: #EBEBEB;
}
.stars img{
	width: 15px;
}
.rev_h{
	font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 16px;
leading-trim: NONE;
line-height: 16.8px;
letter-spacing: 0%;
vertical-align: middle;

	gap: 30px;
	display: flex;
}
.wrap_d{
	display: flex;
	gap: 30px;
	align-items: center;
	margin-bottom: 30px;
	margin-top: 25px;
}
.wrap_d .ratings{
	margin: 0;

}

.rv_title{
	font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 16px;
leading-trim: NONE;
line-height: 16.8px;
letter-spacing: 0%;
vertical-align: middle;
color: #181A20;
margin: 21px 0 13px 0;
}
.re_d {
	font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 26px;
letter-spacing: 0%;
vertical-align: middle;

}

.r_list li{
	margin-bottom: 30px;
}
.map{
	padding: 50px 0 40px;
}
.go_k h4{
	margin: 15px 0;
	color: #187386;
	font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;

}

.k_li{
	flex-wrap: wrap;
	row-gap: 15px;
	display: flex;
}
.k_li li{
	width: 50%;
	font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;

}

.go_k h5{
	margin: 60px 0 30px;
	color: #187386;
	font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;

}

.go_k h6{
	font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
margin-bottom: 10px;
}

.nav_d{
	display: flex;
	margin-bottom: 35px;
	align-items: center;
	justify-content: space-between;
}
.nav_d h4{
	font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
text-transform: capitalize;

}




    .litepicker {
      border: none !important;
      box-shadow: none !important;
    }

    .litepicker .month-item {
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 0 10px rgba(0,0,0,0.05);
      background: #fff;
    }

.calenders{
	margin: 30px 0 50px;
}
:root{
	--litepicker-day-color-hover:#187386 !important;
	--litepicker-is-start-color-bg:#187386 !important;
	--litepicker-button-prev-month-color-hover: #187386 !important;
    --litepicker-button-next-month-color-hover: #187386 !important;
	--litepicker-is-end-color-bg:#187386 !important;
}
.litepicker,.container__main{
	width: 100% ;
}
.modal-calendar {
	width: 320px !important;
}
.calendar-wrapper .litepicker {
	width: 100% !important;
}
    .litepicker .container__months {
    	width: 100% !important;
      display: flex !important;
      box-shadow: initial !important;
      background: initial !important;
      gap: 40px !important; /* ✅ ensure gap between the months */
    }
      .litepicker .container__months>div{
      	width: calc(50% - 40px) !important;
      }

    .calendar-title {
      text-align: center;
      font-weight: 700;
      color: #187386;
      margin-bottom: 15px;
      font-size: 20px;
    }



footer {
    background:#187386;
    padding-top:48px;
}
.top_f{
padding-bottom:25px;
  
}
.top_f,.col_2{
    display:flex;
    flex-wrap:wrap;
    
}

.top_f>div,.col_2>div{
    width:50%;
}
.f_logo img{
    max-width:186px;
}
.f_logo{
    margin-bottom:17px;
}
.l_de{
    max-width:380px;
    font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 21.6px;
letter-spacing: 0%;
color:#fff;
}
.col_1_1 h4{
    font-family: Parkinsans !Important;
font-weight: 600;
font-style: SemiBold;
font-size: 15px;
leading-trim: NONE;
line-height: 18px;
letter-spacing: 0%;
vertical-align: middle;
text-transform: capitalize;
color:#fff;
    margin-bottom:21px;
}

.col_1_1 ul li{
font-family: Parkinsans !Important;
font-weight: 400;
    margin-bottom:15px;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 26.6px;
letter-spacing: 0%;
    display:flex;
    
color:#E9E9E9;
    align-items:center;
    gap:10px;
}
.col_1_1 ul li svg{
    width:19px;
    fill:#BEBDBD;
}
.line_f{
	height: 1px;
	background: #fff;
	width: 100%;
}
.bootom_f{
	font-family: Parkinsans !Important;
font-weight: 400; 
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 26.6px;
letter-spacing: 0%;
vertical-align: middle;
color: #BEBDBD;
	justify-content: space-between;
	padding: 20px 0;
	display: flex;
}

.links{
	gap: 10px;
	display: flex;
}

.links a{

		font-family: Parkinsans !Important;
font-weight: 400;
font-style: Regular;
font-size: 14px;
leading-trim: NONE;
line-height: 26.6px;
letter-spacing: 0%;
vertical-align: middle;
color: #BEBDBD;
text-decoration: none;
}

.total_img {
    position:absolute;
    right:10px;
    top: 392px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:139px !important;;
    height:48px;
    background:#fff;
    border-radius:24px;
    font-family: Parkinsans !Important;
font-weight: 700;
font-style: Bold;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
color:#29A1C0;
border: none;
cursor: pointer;
}
.slider_sec{
	position: relative;
}


/* ---------- Basic helpers ---------- */
.visually-hidden {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ---------- Hamburger button (mobile only) ---------- */
.mobile-open {
  display: none;               /* shown on mobile via media query */
  width: 36px;
  height: 28px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.mobile-open span {
  display: block;
  width: 100%;
  height: 3px;
  background: #187386;
  border-radius: 3px;
  margin: 4px 0;
  transition: transform .25s ease, opacity .2s ease;
}

/* ---------- Off-canvas container ---------- */
.nav-mobile {
  position: fixed;
  inset: 0;
  z-index: 1200;
  pointer-events: none; /* default hidden */
}
.nav-mobile__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}

/* inner panel */
.nav-mobile__inner {
  position: absolute;
  top: 0;
  right: -320px;            /* off-screen initially */
  width: 320px;
  height: 100%;
  background: #fff;
  box-shadow: -12px 0 30px rgba(0,0,0,0.12);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: right .28s cubic-bezier(.2,.9,.3,1);
  pointer-events: auto;
  overflow-y: auto;
}

/* header row inside mobile menu */
.nav-mobile__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Close button */
.mobile-close {
  font-size: 52px;
  line-height: 1;
  background: transparent;
  border: none;
  cursor: pointer;
  color: #187386;
}

/* Nav list */
.nav-mobile__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-mobile__list a {
  display: block;
  text-decoration: none;
  color: #187386;
  font-weight: 600;
  font-size: 18px;
  padding: 8px 2px;
}

/* CTA area */
.nav-mobile__cta {
  margin-top: auto;
}
.nav-mobile__cta .bt {
  display: block;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

/* ---------- Active/open state ---------- */
.nav-mobile.open { pointer-events: auto; }
.nav-mobile.open .nav-mobile__overlay { opacity: 1; pointer-events: auto; z-index: -1}
.nav-mobile.open .nav-mobile__inner { right: 0; }

/* ---------- Toggle animation for hamburger -> X ---------- */
.mobile-open.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-open.active span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
.mobile-open.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Responsive rules ---------- */
/* Hide desktop nav on small screens and show hamburger */
@media (max-width: 768px) {
	.top_f>div, .col_2>div {
			width: 100%;
		}
		.litepicker .container__months>div {
    width: 100% !important;
}
		.bootom_f,.nav_d{
			row-gap: 20px;
			flex-wrap: wrap;
		}
  .nav-desktop ,.header_bt{ display: none !important; }
  .mobile-open { display: inline-flex; }
  /* Optional: collapse header_bt to single line on mobile - already defined earlier */
}

/* Show desktop nav on larger screens and hide mobile UI */
@media (min-width: 769px) {
  .nav-mobile { display: none; }
}

/* ---------------------------
   Responsive helpers & resets
   --------------------------- */

/* Ensure images scale and keep proportion */
.banner-slider img,
.thumbImg img,
.slider-banner-image img,
.thumbnail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Small utility */
.hide-on-desktop { display: none; }

/* ---------------------------
   Breakpoint: Large desktops
   (no change; baseline styles already good)
   --------------------------- */

/* ---------------------------
   Breakpoint: <= 1200px (large tablets / small laptops)
   --------------------------- */
@media (max-width: 1200px) {
  .container { max-width: 1100px; }

  .second_se { gap: 48px; }
  .banner-slider > div { width: calc(60% - 10px); } /* Slight change */
}

/* ---------------------------
   Breakpoint: <= 992px (tablets)
   --------------------------- */
@media (max-width: 992px) {
  header { padding: 16px 24px; }

  .logo img { max-width: 150px; }

  .nav ul { gap: 22px; flex-wrap: wrap; justify-content: center; }
  .nav ul li a { font-size: 15px; }

  .banner-slider { gap: 12px; }
  .banner-slider > div { width: calc(70% - 6px); }

  .second_se { gap: 40px; }
  .left_s { width: 65%; }
  .right_s { width: 35%; }

  .box { padding: 32px; border-radius: 28px; }

  .Amenities .bt, .bt { padding: 0 34px; height: 48px; line-height: 48px; }

  .container { padding: 0 12px; }
}

/* ---------------------------
   Breakpoint: <= 768px (mobile portrait & small tablets)
   --------------------------- */
@media (max-width: 768px) {

  .slider_sec {
    max-height: unset;
  }

  /* Header/nav */
  header {
    padding: 12px 16px;
    align-items: center;
    gap: 8px;
  }
  .logo img { max-width: 140px; }

  /* stack header items */
  header .nav,
  header .header_bt {
    width: 100%;
    margin-top: 8px;
    display: flex;
    justify-content: center;
  }

  /* Make nav vertical & touch-friendly */
  .nav ul {
    flex-direction: row; /* keep row to match many sliders; wrap if needed */
    gap: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
    justify-content: flex-start;
  }
  .nav ul li a { font-size: 14px; padding: 6px 8px; white-space: nowrap; }

  /* Slider: make single column / single visible slide */
  .banner-slider {
    flex-direction: column;
    gap: 14px;
  }
  .banner-slider > div {
    width: 100%;
  }

  .slider-banner-image,
  .thumbImg {
    border-radius: 12px;
  }

  /* Thumbnail row: turn into a horizontal scroller */
  .slider.slider-nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 0;
  }
  .thumbnail-image { min-width: 90px; width: 90px; flex: 0 0 auto; }
  .thumbImg img { height: 100px; object-fit: cover; border-radius: 8px; }

  /* Column layout -> stacked */
  .second_se {
    display: block;
    margin-top: 32px;
  }
  .left_s, .right_s {
    width: 100%;
  }
  .right_s { margin-top: 20px; }

  /* Boxes & paddings */
  .box { padding: 22px; border-radius: 22px; }

  .Amenities h2, .avaialbe_days h2, .reivews h2, .go_k h2, .left_s h2 {
    font-size: 22px;
    line-height: 30px;
  }

  .rev_h { flex-direction: column; gap: 8px; align-items: flex-start; }

  ul.features li { width: 100%; }
  .box_f li { width: 100%; }

  .calenders { margin: 18px 0 28px; }

  .container { padding: 0 14px; }
}

/* ---------------------------
   Breakpoint: <= 576px (small phones)
   --------------------------- */
@media (max-width: 576px) {
  header { padding: 10px 12px; }
  .logo img { max-width: 120px; }

  .nav ul { gap: 10px; }
  .nav ul li a { font-size: 13px; line-height: 22px; }

  .thumbnail-image { min-width: 76px; width: 76px; }
  .thumbImg img { height: 110px; }

  .box { padding: 18px; border-radius: 18px; }

  .bt, .header_bt a { width: auto; padding: 0 20px; height: 44px; line-height: 44px; }

  .Amenities h2, .left_s h2 { font-size: 20px; line-height: 28px; }
  .left_s p, .re_d { font-size: 15px; line-height: 24px; }

  .total_img { right: 8px; bottom: 16px; width: 120px; height: 44px; border-radius: 20px; font-size: 14px; }

  ul.slick-dots { left: 10%; bottom: 18px; }
  ul.slick-dots li { width: 12px; height: 3px; }
}

/* ---------------------------
   Optional: Improve touch target sizes
   --------------------------- */
@media (hover: none) {
  .nav ul li a,
  .bt,
  .header_bt a {
    touch-action: manipulation;
  }
}

/* ---------------------------
   Accessibility: reduce motion for users who prefer it
   --------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}


.des_box label {
  width: 100%;
  font-family: Parkinsans ! Important;
}

.des_box input {
  width: 100%;
  border: none;
  font-family: Parkinsans ! Important;
}

/* Show native calendar icon for <input type="date"> */

/* Chrome, Safari, Edge, Opera */
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
}

/* Firefox: allow date input to show picker */
input[type="date"] {
  -moz-appearance: auto;
}

/* Ensure background is visible */
input[type="date"] {
  background-image: none;
}