/*! Auto-generated bundle — do not edit. Edit the source files in css/. */

/* ===== theme.css ===== */
/*!
    ----------------------------------

    * Colina - Hotel, Resort & Accommodation Website Theme
    * Version - 1.1.0 
    * Copyright (c) 2018 ElaThemes.com 

    ---------------------------------- 

    [Table of contents]

    1. Default body styles
    2. Container
    3. Page loader
    4. Headings
    5. Header
    5. Main navigation
    7. Owl Theme
    8. Owl-slider-header
    9. Owl-slider-gallery
    10. Owl-rooms-carousel
    11. Button styles
    12. Breadcrumbs
    13. Checkbox
    14. Sections
    15. Section header
    16. Page
    17. Page header
    18. Category header
    19. Frontpage-slider
    20. Image Blocks
    21. Scroll to top
    22. Stretcher
    23. Banner
    24. Instagram
    25. Contact
    26. Tabsy wrapper
    27. Intro
    28. Text blocks
    29. Quotes
    30. Team
    31. Facilities
    32. Facility
    33. Booking
    34. Datepicker
    35. Rooms
    36. Room
    37. Gallery
    38. Blog
    39. Cards
    40. Subscribe
    41. Events
    42. Checkout
    43. Step wrapper
    44. Login wrapper
    45. Not found
    46. Comments
    47. About
    48. Shortcodes
    49. Footer

    ----------------------------------
 */
/*  
    ----------------------------------
    1. Default body styles
    ----------------------------------
*/
/* One Josefin Sans Light file used for every weight (100–900) so all text
   renders with the real Light glyphs — no faux-bold synthesis. */
@font-face {
  font-family: 'Josefin Sans';
  src: url('../fonts/JosefinSans-Light.woff2') format('woff2'),
       url('../fonts/JosefinSans-Light.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
body {
  font-family: "Josefin Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: #4a4538;
  font-weight: 300;
}
p {
  margin: 0 0 18px;
}
@media (min-width: 992px) {
  body {
    font-size: 17px;
    line-height: 1.6;
  }
}

body .wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
}

body b, body strong, body label, body .label {
  font-weight: 500;
}

body a {
  color: #3a3d45;
}

body a:focus, body a:active, body a:hover {
  color: #505050;
  text-decoration: none;
}

body a, body .btn {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

body input, body textarea, body select {
  /* iPad fix */
  -webkit-appearance: none;
  /*disable shaddow nav ipad*/
  -moz-appearance: none;
  /*disable shaddow nav ipad*/
  border-radius: 0;
  /*disable border-radius ipad*/
}

body *:focus {
  outline: none !important;
}

/*  
    ----------------------------------
    2. Container
    ----------------------------------
*/
@media (min-width: 1366px) {
  .container {
    width: 1300px;
  }
}

@media (min-width: 1680px) {
  .container {
    width: 1400px;
  }
}

@media print {
  .container {
    width: 99%;
  }
}

/*  
    ----------------------------------
    3. Page loader
    ----------------------------------
*/
.page-loader {
  position: fixed;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 999999;
  background-color: white;
}

.page-loader:before {
  font-family: 'LinearIcons';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 40px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: "\e807";
  position: fixed;
  font-size: 40px;
  left: 50%;
  top: 50%;
  z-index: 999999;
  width: 40px;
  height: 40px;
  text-align: center;
  margin-left: -20px;
  margin-top: -20px;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
  color: #232662;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.page-loader.loaded {
  width: 0;
  left: 0;
  -moz-transition: all 1s cubic-bezier(0.8, 0.2, 0.2, 0.9);
  -o-transition: all 1s cubic-bezier(0.8, 0.2, 0.2, 0.9);
  -webkit-transition: all 1s cubic-bezier(0.8, 0.2, 0.2, 0.9);
  transition: all 1s cubic-bezier(0.8, 0.2, 0.2, 0.9);
}

.page-loader.loaded:before {
  opacity: 0;
}

/*  
    ----------------------------------
    4. Headings
    ----------------------------------
*/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: "Josefin Sans", serif;
  text-transform: uppercase;
  font-weight: 500;
}

h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child,
.h1:first-child, .h2:first-child, .h3:first-child, .h4:first-child, .h5:first-child, .h6:first-child {
  margin-top: 0;
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
  font-weight: 300;
}

/* ----- Typography scale (compact) ----- */
h1, .h1 {
  font-size: 22px;
  line-height: 1.25;
  margin-top: 16px;
  margin-bottom: 14px;
}
@media (min-width: 992px) {
  h1, .h1 { font-size: 24px; margin-top: 22px; margin-bottom: 18px; }
}

h2, .h2 {
  font-size: 20px;
  line-height: 1.3;
  margin-top: 14px;
  margin-bottom: 12px;
}
@media (min-width: 992px) {
  h2, .h2 { font-size: 22px; margin-top: 20px; margin-bottom: 16px; }
}

h3, .h3 {
  font-size: 18px;
  line-height: 1.3;
  margin-top: 12px;
  margin-bottom: 10px;
}
@media (min-width: 992px) {
  h3, .h3 { font-size: 20px; margin-top: 16px; margin-bottom: 12px; }
}

h4, .h4 {
  font-size: 16px;
  line-height: 1.4;
  margin-top: 10px;
  margin-bottom: 8px;
}
@media (min-width: 992px) {
  h4, .h4 { font-size: 18px; margin-top: 14px; margin-bottom: 10px; }
}

h5, .h5 {
  font-size: 14px;
  line-height: 1.4;
  margin-top: 8px;
  margin-bottom: 6px;
}
@media (min-width: 992px) {
  h5, .h5 { font-size: 16px; margin-top: 12px; margin-bottom: 8px; }
}

h6, .h6 {
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.5px;
  margin-top: 6px;
  margin-bottom: 4px;
}
@media (min-width: 992px) {
  h6, .h6 { font-size: 12px; margin-top: 10px; margin-bottom: 6px; }
}

/*  
    ----------------------------------
    5. Header
    ----------------------------------
*/
header {
  position: fixed;
  width: auto;
  left: 0;
  right: 0;
  display: block;
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 9999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

header.sticked {
  background-color:#607057;
  border-color: transparent;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

@media (min-width: 992px) {
  header.sticked nav.navigation-top {
    margin-top: -70px;
  }
  header.sticked nav.navigation-main .logo {
    bottom: -35px;
    width: 130px;
    height: 93px;
  }
  header.sticked nav.navigation-main .logo img {
    height: auto;
    width: 100%;
  }
}

@media (max-width: 767px) {
  header.sticked {
    position: absolute;
     background-color:#eeeeee;
  }
}

@media (max-width: 991px) {
  header .container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

/*  
    ----------------------------------
    6. Main navigation
    ----------------------------------
*/
nav.navigation-top {
  display: none;
  margin-top: 5px;
  margin-bottom: 5px;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

@media (min-width: 992px) {
  nav.navigation-top {
    display: block;
    padding: 20px 0;
  }
  nav.navigation-top .navigation-top-left {
    float: left;
  }
  nav.navigation-top .navigation-top-left .box {
    padding-right: 13.33333px;
  }
  nav.navigation-top .navigation-top-right {
    float: right;
  }
  nav.navigation-top .navigation-top-right .box {
    padding-left: 13.33333px;
  }
}

nav.navigation-top .box {
  color: white;
  display: inline-block;
  font-size: 17px;
  text-transform: uppercase;
}

nav.navigation-top .box .icon {
  font-size: 85%;
  vertical-align: middle;
}

nav.navigation-main {
  position: relative;
}

nav.navigation-main .logo {
  /*height: 50px;*/
  -moz-transition: height 0.5s;
  -o-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  transition: height 0.5s;
}

nav.navigation-main .logo .logo-desktop {
  display: none;
}

@media (min-width: 992px) {
  nav.navigation-main .logo .logo-desktop {
    display: inline-block !important;
  }
  nav.navigation-main .logo .logo-mobile {
    display: none;
  }
  nav.navigation-main .logo > a {
    text-align: center;
    height: 100%;
  }
  nav.navigation-main .logo img {
    width: 100%;
    margin: 0 auto;
  }
}

nav.navigation-main .logo > a {
  display: block;
}

nav.navigation-main .toggle-menu {
  height: 50px;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 27px;
  padding: 5px 10px;
  line-height: 36px;
  color: white;
}

nav.navigation-main .toggle-menu .icon {
  display: block;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

nav.navigation-main .toggle-menu .icon:before {
  display: inline-block;
}

nav.navigation-main .toggle-menu.open .icon {
  -moz-transform: scale(0.8) rotate(180deg);
  -ms-transform: scale(0.8) rotate(180deg);
  -o-transform: scale(0.8) rotate(180deg);
  -webkit-transform: scale(0.8) rotate(180deg);
  transform: scale(0.8) rotate(180deg);
}

nav.navigation-main .toggle-menu.open .icon:before {
  content: "\e870" !important;
}

nav.navigation-main .navigation-block ul {
  margin: 0;
  padding: 0;
}

nav.navigation-main .navigation-block ul li {
  list-style-type: none;
}

nav.navigation-main .navigation-block ul li a {
  display: block;
  padding: 15px;
  text-transform: uppercase;
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  font-weight:400;
}

nav.navigation-main .navigation-block ul li > a {
  color: #ffffff;
}

nav.navigation-main .navigation-block ul li > ul {
  background-color: rgba(81, 85, 97, 0.1);
}

nav.navigation-main .navigation-block ul li > ul li {
  display: block;
}

nav.navigation-main .navigation-block ul li > ul li a {
  font-size: 13px;
  text-transform: uppercase;
  padding: 10px 15px;
}

@media (min-width: 992px) {
  nav.navigation-main {
    position: relative;
    z-index: 999;
  }
  nav.navigation-main .logo {
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 253px;
    height: 113px;
    z-index: 9;
  }
  nav.navigation-main .logo img {
    width: auto;
    height: 100%;
  }
  nav.navigation-main .toggle-menu {
    display: none;
  }
  nav.navigation-main .navigation-block {
    display: block;
  }
  nav.navigation-main .navigation-block > ul > li {
    float: left;
    display: block;
  }
  nav.navigation-main .navigation-block > ul > li:first-child > a {
    padding-left: 0;
  }
  nav.navigation-main .navigation-block > ul > li:last-child > a {
    padding-right: 0;
  }
  nav.navigation-main .navigation-block > ul li > ul {
    padding-top: 10px;
    background-color: transparent;
    min-width: 200px;
    position: absolute;
    z-index: -1;
    top: 100%;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    -moz-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -o-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    -moz-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
    border-bottom-right-radius: 8px;
  }
  nav.navigation-main .navigation-block > ul li > ul:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 20px;
    border-width: 0 10px 10px 10px;
    border-style: solid solid solid solid;
    border-color: white transparent white;
  }
  nav.navigation-main .navigation-block > ul li > ul li {
    background-color: white;
  }
  nav.navigation-main .navigation-block > ul li > ul li:hover a {
    color: #3a3d45;
    -moz-transform: translateX(5px);
    -ms-transform: translateX(5px);
    -o-transform: translateX(5px);
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  nav.navigation-main .navigation-block > ul li > ul li a {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    font-weight: bold;
    background-color: white;
    color: #515561;
  }
  nav.navigation-main .navigation-block > ul li.hovered a {
    text-shadow: 0 0 10px white;
  }
  nav.navigation-main .navigation-block > ul li.hovered > ul {
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    -webkit-transform: translateY(0);
    transform: translateY(0);
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    overflow: hidden;
    visibility: visible;
    opacity: 1;
    z-index: 1;
  }
  nav.navigation-main .navigation-block > ul.navigation-left {
    float: left;
  }
  nav.navigation-main .navigation-block > ul.navigation-right {
    float: right;
  }
  nav.navigation-main .navigation-block > ul.navigation-right li > ul:after {
    left: auto;
    right: 20px;
  }
  nav.navigation-main .navigation-block > ul.navigation-right li {
    position: relative;
  }
  nav.navigation-main .navigation-block > ul.navigation-right li:nth-last-child(-n+2) ul {
    right: 0;
    left: auto;
  }
  nav.navigation-main .navigation-block ul li > ul li {
    border-top: 1px solid #dddddd;
  }
}

@media (max-width: 991px) {
  nav.navigation-main .navigation-block {
    position: absolute;
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    z-index: 999;
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  nav.navigation-main .navigation-block.open {
     background-color:#000000;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  nav.navigation-main .navigation-block ul li {
    /*border-top: 1px solid #006a9f;*/
  }
  nav.navigation-main .navigation-block ul li a {
    position: relative;
  }
  nav.navigation-main .navigation-block ul li a .open-dropdown {
    position: absolute;
    right: 0;
    height: 100%;
    width: 50px;
    top: 0;
    line-height: 49px;
    font-size: 13px;
    text-align: center;
  }
  nav.navigation-main .navigation-block ul li a .open-dropdown i {
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
  }
  nav.navigation-main .navigation-block ul li > ul {
    display: none;
  }
  nav.navigation-main .navigation-block ul li > ul li {
    padding-left: 15px;
  }
  nav.navigation-main .navigation-block ul li.expanded > a {
    background-color: #002639;
  }
  nav.navigation-main .navigation-block ul li.expanded .open-dropdown i {
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

/*  
    ----------------------------------
    7. Owl Theme
    ----------------------------------
*/
.owl-theme .owl-controls .owl-buttons .owl-next {
  right: -50px;
}

.owl-theme .owl-controls .owl-buttons .owl-prev {
  left: -50px;
}

.owl-theme .owl-controls .owl-page {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.owl-theme .owl-controls .owl-page span {
  background-color: white;
}

.owl-theme .owl-controls .owl-page.active {
  -moz-transform: scale(1.8);
  -ms-transform: scale(1.8);
  -o-transform: scale(1.8);
  -webkit-transform: scale(1.8);
  transform: scale(1.8);
}

/*  
    ----------------------------------
    8. Owl-slider-header
    ----------------------------------
*/
.owl-slider-header .item {
  height: 300px;
  position: relative;
  overflow: hidden;
  background-position: center;
  background-size: cover;
}

.owl-slider-header .item > .container {
  position: relative;
}

.owl-slider-header .item:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

.owl-slider-header .item .box {
  position: absolute;
  width: 100%;
  color: #fff;
  top: 50%;
  right: 0;
  left: 0;
  z-index: 99;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.owl-slider-header .item .box.box-bottom {
  top: 90%;
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
}

.owl-slider-header .item .desc {
  display: none;
  text-shadow: 0 0 10px #000;
}

.owl-slider-header .item .title {
  font-size: 32px;
  font-family: "Josefin Sans", serif;
  text-transform: uppercase;
  color: white;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  text-transform: none;
}

.owl-slider-header .item .title span {
  color: #ceb071;
}

.owl-slider-header .item .btn {
  margin-top: 15px;
}

@media (min-width: 768px) {
  .owl-slider-header .item {
    height: 740px;
  }
  .owl-slider-header .item .desc {
    display: block;
    font-size: 16px;
  }
  .owl-slider-header .item .title {
    font-size: 32px;
    text-transform: uppercase;
  }
  .owl-slider-header .item .btn {
    margin-top: 40px;
  }
}

@media (min-width: 1200px) {
  .owl-slider-header .item {
    height: 700px;
  }
  .owl-slider-header .item .desc {
    font-size: 18px;
  }
  .owl-slider-header .item .title {
    font-size: 32px;
  }
}

@media (max-width: 1200px) {
  nav.navigation-main .logo img {
    width: auto;
    height: 50%;
}
}

@media (max-width: 767px) {
  .owl-slider-header .item .btn {
    display: none;
  }
}

.owl-slider-header .owl-controls .owl-buttons div span {
  color: white;
}

.owl-slider-header .owl-controls .owl-buttons .owl-next {
  right: 10px;
}

.owl-slider-header .owl-controls .owl-buttons .owl-prev {
  left: 10px;
}

@media (min-width: 992px) {
  .owl-slider-header .owl-controls .owl-buttons .owl-next {
    right: 50px;
  }
  .owl-slider-header .owl-controls .owl-buttons .owl-prev {
    left: 50px;
  }
}

.owl-slider-header .owl-controls .owl-page span {
  background: white;
}

/*  
    ----------------------------------
    9. Owl-slider-gallery
    ----------------------------------
*/
.owl-slider-gallery {
  background-color: white;
}

@media (min-width: 768px) {
  .owl-slider-gallery .item {
    height: 600px;
    background-position: center;
    background-size: cover;
  }
  .owl-slider-gallery .item img {
    display: none;
  }
}

@media (min-width: 1200px) {
  .owl-slider-gallery .item {
    height: 800px;
  }
}

.owl-slider-gallery .owl-controls .owl-pagination {
  bottom: auto;
  top: 20px;
  text-align: right;
  right: 40px;
}

.owl-slider-gallery .owl-controls .owl-buttons > div {
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-transform: translateY(-50%) scale(2);
  -ms-transform: translateY(-50%) scale(2);
  -o-transform: translateY(-50%) scale(2);
  -webkit-transform: translateY(-50%) scale(2);
  transform: translateY(-50%) scale(2);
}

.owl-slider-gallery .owl-controls .owl-buttons .owl-next {
  right: 50px;
}

.owl-slider-gallery .owl-controls .owl-buttons .owl-prev {
  left: 50px;
}

/* Single-image gallery (class set by footer.php when there is only one photo).
   Full-width static banner — same look as the carousel, minus the slider. */
.gallery-single { background-color: white; }
.gallery-single .item { background-position: center; background-size: cover; }
@media (min-width: 768px) {
  .gallery-single .item { height: 600px; }
  .gallery-single .item img { display: none; }
}
@media (min-width: 1200px) {
  .gallery-single .item { height: 800px; }
}

/*  
    ----------------------------------
    10. Owl-rooms-carousel
    ----------------------------------
*/
.owl-rooms {
  margin-top: -20px;
}

.owl-rooms .owl-controls .owl-pagination {
  bottom: -10px;
}

.owl-rooms .item article {
  margin-top: 20px;
}

@media (min-width: 480px) {
  .owl-rooms {
    width: auto;
    margin-left: -15px;
    margin-right: -15px;
  }
  .owl-rooms .item {
    padding: 0 15px;
  }
  .owl-rooms .owl-controls .owl-pagination {
    bottom: -20px;
  }
}

/*  
    ----------------------------------
    11. Button styles
    ----------------------------------
*/
.btn {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
  text-transform: uppercase;
  border-radius: 2px;
}

.btn.btn-main {
  background-color:#eeeeee;
}

.btn.btn-main:hover {
  background-color: #002639;
}

.btn.btn-main, .btn.btn-main:hover, .btn.btn-main:focus, .btn.btn-main:active {
  color: #fff;
}

.btn.btn-clean {
  background-color: rgb(0 0 0 / 40%);
  border-color: rgba(255, 255, 255, 0.2);
  color: white !important;
}

.btn.btn-clean:hover {
  background-color: white;
  border-color: white;
  color: black !important;
}

.btn.btn-clean-dark {
  background-color: transparent;
  border-color: #c9b384;
  color: #607057 !important;
}

.btn.btn-clean-dark:hover {
  background-color: #607057;
  border-color: #607057;
  color: #fff !important;
}

.btn.btn-buy {
   background-color:#eeeeee;
  color: white;
  position: absolute;
  padding: 0;
  right: 10px;
  top: 0;
  width: 80px;
  height: 80px;
  font-size: 20px;
  line-height: 50px;
  text-align: center;
  overflow: hidden;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  z-index: 20;
}

.btn.btn-buy:after, .btn.btn-buy:before {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  line-height: 80px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.btn.btn-buy:before {
  font-family: 'LinearIcons';
  content: "\e82e";
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.btn.btn-buy:after {
  font-family: "Josefin Sans", sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  content: attr(data-text);
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.btn.btn-buy:hover:before {
  font-family: 'LinearIcons';
  content: "\e82e";
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.btn.btn-buy:hover:after {
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

/*  
    ----------------------------------
    12. Breadcrumbs
    ----------------------------------
*/
.breadcrumb.breadcrumb-inverted {
  background: transparent;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.breadcrumb.breadcrumb-inverted > li {
  color: white;
}

.breadcrumb.breadcrumb-inverted > li > a {
  color: white;
}

.breadcrumb > li.active,
.breadcrumb > li.active a {
  color: #232662;
}

.breadcrumb > li a.active {
  color: #232662;
}

/*  
    ----------------------------------
    13. Checkbox
    ----------------------------------
*/
.checkbox {
  margin: 0;
  padding: 15px 0;
}

.checkbox label {
  padding-left: 35px;
  line-height: 1.8;
  font-weight: 300;
}

.checkbox label a {
  color: #8b8b8b;
  text-decoration: underline;
}

.checkbox label a:hover {
  color: #232662;
}

.checkbox label small {
  line-height: 1.3;
  display: block;
}

.checkbox input[type="checkbox"], .checkbox input[type="radio"] {
  display: none;
}

.checkbox input[type="checkbox"] + label:before,
.checkbox input[type="radio"] + label:before {
  font-family: 'LinearIcons';
  content: "";
  line-height: 22px;
  font-size: 16px;
  position: absolute;
  display: inline-block;
  height: 25px;
  width: 25px;
  border: 1px solid #232662;
  padding: 0;
  left: 0;
  top: 18px;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-transform: scale(0.8);
  -ms-transform: scale(0.8);
  -o-transform: scale(0.8);
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.checkbox input[type="checkbox"]:checked + label:before,
.checkbox input[type="radio"]:checked + label:before {
  color: #232662;
  border-color: transparent;
  text-align: center;
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.checkbox input[type="checkbox"]:checked + label:before {
  content: "\e87f";
}

.checkbox input[type="radio"]:checked + label:before {
  content: "\e880";
}

.checkbox input[type="checkbox"]:checked + label:after,
.checkbox input[type="radio"]:checked + label:after {
  font-weight: bold;
}

/*  
    ----------------------------------
    14. Sections
    ----------------------------------
*/
section {
  padding-top: 35px;
  padding-bottom: 35px;
}

@media (min-width: 768px) {
  section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

@media (min-width: 992px) {
  section {
    padding-top: 70px;
    padding-bottom: 70px;
  }
}

@media (min-width: 1200px) {
  section {
    padding-top: 100px;
    padding-bottom: 100px;
  }
}

/*  
    ----------------------------------
    15. Section header
    ----------------------------------
*/
.section-header {
  display: block;
  padding-bottom: 15px;
}

.section-header .title {
  margin-top: 0;
  margin-bottom: 5px;
  color:#607057;
  font-family: "Josefin Sans", serif;
  position: relative;
  text-transform: uppercase;
}

.section-header .title span {
  display: block;
  color: #009D94;
}

.section-header .title .btn {
  position: absolute;
  right: 0;
  top: 3px;
}

.section-header .title:last-child {
  margin-bottom: 0;
}

.section-header .subtitle {
  text-transform: none;
}

.section-header .text p:last-child {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .section-header {
    padding-bottom: 30px;
  }
  .section-header .title span {
    display: inline-block;
  }
}

@media (min-width: 992px) {
  .section-header {
    padding-bottom: 35px;
  }
}

@media (min-width: 1200px) {
  .section-header {
    padding-bottom: 40px;
  }
}

@media (max-width: 767px) {
  .section-header .title {
    position: relative;
  }
  .section-header .title .btn {
    position: absolute;
    right: 0;
    top: 3px;
  }
}

/*  ----------------------------------
    16. Page
    ----------------------------------
*/
.page {
  padding-top: 0;
  padding-bottom: 0;
}

.page .page-header {
  margin-top: 0;
  border-bottom: 0;
  text-transform: uppercase;
}

/*  ----------------------------------
    17. Page header
    ----------------------------------
*/
.page-header {
  background-position: center;
  background-size: cover;
  padding-top: 80px;
  padding-bottom: 35px;
  margin-bottom: 20px;
  display: block;
  text-align: center;
  background-color: #475340;
  color: white;
}

.page-header .title {
  margin-top: 0;
  margin-bottom: 5px;
  color: white;
  font-family: "Josefin Sans", serif;
  text-transform: uppercase;
}

.page-header .title .btn {
  margin-left: 10px;
}

.page-header .title:last-child {
  margin-bottom: 0;
}

.page-header p {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .page-header {
    padding-top: 200px;
    padding-bottom: 200px;
    margin-bottom: -160px;
  }
}

@media print {
  .page-header {
    padding: 15px 0;
  }
}

/*  
    ----------------------------------
    18. Category header
    ----------------------------------
*/
.category-header {
  background: #474747;
  /* Old browsers */
  background: -moz-linear-gradient(left, #474747 0%, #a0a0a0 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #474747 0%, #a0a0a0 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #474747 0%, #a0a0a0 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#a0a0a0',GradientType=1 );
  /* IE6-9 */
}

/*  
    ----------------------------------
    19. Frontpage-slider
    ----------------------------------
*/
.frontpage-slider {
  padding: 0;
  background: #474747;
  /* Old browsers */
  background: -moz-linear-gradient(left, #474747 0%, #a0a0a0 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #474747 0%, #a0a0a0 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #474747 0%, #a0a0a0 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#a0a0a0',GradientType=1 );
  /* IE6-9 */
}

@media (max-width: 991px) {
  .frontpage-slider .container {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
  }
}

/*  
    ----------------------------------
    20. Image Blocks
    ----------------------------------
*/
.image-blocks.image-blocks-header {
  padding-top: 0;
}

@media (min-width: 768px) {
  .image-blocks.image-blocks-header {
    padding-top: 0;
  }
  .image-blocks.image-blocks-category {
    padding-top: 0;
  }
}

.image-blocks .section-header {
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: #474747;
  min-height: 250px;
  padding-top: 40px;
  margin-bottom: -130px;
}

.image-blocks .section-header, .image-blocks .section-header .title {
  color: white;
}

@media (min-width: 992px) {
  .image-blocks .section-header {
    min-height: 400px;
    padding-top: 100px;
    margin-bottom: -180px;
  }
}

.image-blocks.image-blocks-theme .blocks {
  color: white;
  box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.2);
}

.image-blocks.image-blocks-theme .blocks .item {
   background-color:#eeeeee;
}

.image-blocks .blocks {
  position: relative;
  display: flex;
  flex-flow: column;
  margin-bottom: 15px;
}

.image-blocks .blocks:before {
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  background-color: inherit;
  display: block;
  position: absolute;
  z-index: -1;
}

.image-blocks .blocks .btn {
  margin-top: 15px;
}

.image-blocks .blocks .item {
  background-color:#efefef;
  position: relative;
  z-index: 9;
  order: 2;
}

.image-blocks .blocks .item .text {
  padding: 20px;
}

.image-blocks .blocks .item .text small {
  display: block;
}

.image-blocks .blocks .item .text .price {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
}

.image-blocks .blocks .item .room-facilities {
  padding: 15px 0;
  margin: 20px 0;
  border-top: 1px solid rgba(0, 38, 57, 0.15);
  border-bottom: 1px solid rgba(0, 38, 57, 0.15);
}

.image-blocks .blocks .item .room-facilities .hotelicon {
  font-size: 35px;
  display: block;
  text-align: center;
}

.image-blocks .blocks .item .room-facilities figure {
  display: inline-block;
  padding-right: 15px;
  text-align: center;
}

.image-blocks .blocks .item .room-facilities figure:last-child {
  padding-right: 0;
}

.image-blocks .blocks .item .room-facilities figure figcaption {
  font-size: 75%;
}

@media (max-width: 991px) {
  .image-blocks .blocks .item .room-facilities {
    white-space: nowrap;
    overflow-x: scroll;
  }
}

.image-blocks .blocks .item .book {
  display: table;
}

.image-blocks .blocks .item .book .btn {
  margin: 0;
}

.image-blocks .blocks .item .book > div {
  display: table-cell;
  vertical-align: middle;
  padding-right: 15px;
}

.image-blocks .blocks .item .book > div:nth-child(2) {
  padding-left: 15px;
  padding-right: 0;
  font-size: 70%;
}

.image-blocks .blocks .item .book > div > span {
  display: block;
  margin-bottom: 0;
}

.image-blocks .blocks .image {
  order: 1;
}

.image-blocks .blocks .image img {
  display: inline-block;
  width: 100%;
}

@media (min-width: 768px) {
  .image-blocks .blocks {
    margin-bottom: 0;
  }
  .image-blocks .blocks .item {
    width: 50%;
    padding-right: 50px;
    padding-left: 50px;
  }
  .image-blocks .blocks .item .text {
    padding: 70px 0;
  }
  .image-blocks .blocks .item .room-facilities {
    margin: 40px 0;
  }
  .image-blocks .blocks .image {
    background-position: center;
    background-size: cover;
    position: absolute;
    width: 50%;
    height: 100%;
    right: 0;
    top: 0;
  }
  .image-blocks .blocks .image img {
    display: none;
  }
  .image-blocks .blocks.blocks-right .item {
    margin-left: 0%;
  }
  .image-blocks .blocks.blocks-right .image {
    right: 0%;
  }
  .image-blocks .blocks.blocks-left .item {
    margin-left: 50%;
  }
  .image-blocks .blocks.blocks-left .image {
    right: 50%;
  }
}

.image-blocks .text-block {
  padding: 15px 0;
}

@media (min-width: 768px) {
  .image-blocks .text-block {
    padding: 40px 0;
  }
}

@media (min-width: 1200px) {
  .image-blocks .text-block {
    padding: 70px 0;
  }
}

.image-blocks .text-block.text-block-borders {
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
}

.image-blocks .text-block h2,
.image-blocks .text-block .h2 {
  text-align: center;
  position: relative;
  margin-bottom: 40px;
}

.image-blocks .text-block h2:before, .image-blocks .text-block h2:after,
.image-blocks .text-block .h2:before,
.image-blocks .text-block .h2:after {
  content: "";
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #dddddd;
}

.image-blocks .text-block h2:before,
.image-blocks .text-block .h2:before {
  bottom: -25px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.image-blocks .text-block h2:after,
.image-blocks .text-block .h2:after {
  bottom: -20px;
  width: 60px;
  height: 1px;
}

@media (min-width: 768px) {
  .image-blocks .text-block h2,
  .image-blocks .text-block .h2 {
    margin-bottom: 70px;
  }
  .image-blocks .text-block h2:before,
  .image-blocks .text-block .h2:before {
    bottom: -35px;
  }
  .image-blocks .text-block h2:after,
  .image-blocks .text-block .h2:after {
    bottom: -30px;
    width: 100px;
  }
}

.image-blocks .tripadvisor {
  padding-bottom: 40px;
}

/*  
    ----------------------------------
    21. Scroll to top
    ----------------------------------
*/
.scroll-top {
  visibility: hidden;
  padding: 18px 20px;
  background-color: #002639;
  color: white;
  position: fixed;
  bottom: 15px;
  right: 20px;
  z-index: 999;
  border-radius: 100%;
  cursor: pointer;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
}

.scroll-top.visible {
  visibility: visible;
  opacity: 1;
}

.scroll-top.active {
  background-color: black;
}

.scroll-top:hover {
  background-color: #333;
}

/*  
    ----------------------------------
    22. Stretcher
    ----------------------------------
*/
.stretcher-wrapper {
  padding-bottom: 0;
  border-top: 1px solid #eeeeee;
}

.stretcher-wrapper.stretcher-wrapper-noheader {
  padding-top: 0;
}

.stretcher-wrapper .section-header {
  background-color: white;
  position: relative;
}

.stretcher-wrapper .section-header:before {
  content: '';
  position: absolute;
  border-width: 20px 20px 0px 20px;
  border-style: solid solid solid solid;
  border-color: white transparent white;
  bottom: -15px;
  left: 50%;
  z-index: 2;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.stretcher-wrapper .stretcher {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
  font-size: 0;
  margin: 0;
  padding: 0;
}

.stretcher-wrapper .stretcher .stretcher-item {
  position: relative;
  background-size: cover;
  background-position: center;
  display: block;
  width: 100%;
  height: 30vh;
  overflow: hidden;
  -moz-transition: width 0.5s;
  -o-transition: width 0.5s;
  -webkit-transition: width 0.5s;
  transition: width 0.5s;
}

.stretcher-wrapper .stretcher .stretcher-item > a {
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  z-index: 99;
}

.stretcher-wrapper .stretcher .stretcher-item:hover > a {
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.stretcher-wrapper .stretcher .stretcher-item.more {
  background-color:#000000;
  position: relative;
  height: 100px;
}

.stretcher-wrapper .stretcher .stretcher-item.more a {
  position: absolute;
  width: 100%;
  height: 100%;
}

.stretcher-wrapper .stretcher .stretcher-item.more .more-icon {
  font-size: 70px;
  color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.stretcher-wrapper .stretcher .stretcher-item.more .more-icon,
.stretcher-wrapper .stretcher .stretcher-item.more .more-icon span {
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.stretcher-wrapper .stretcher .stretcher-item.more .more-icon span {
  display: inline-block;
}

.stretcher-wrapper .stretcher .stretcher-item.more .more-icon span:before, .stretcher-wrapper .stretcher .stretcher-item.more .more-icon span:after {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  white-space: nowrap;
}

.stretcher-wrapper .stretcher .stretcher-item.more .more-icon span:before {
  content: attr(data-title-show);
  opacity: 0;
  font-size: 16px;
}

.stretcher-wrapper .stretcher .stretcher-item.more .more-icon span:after {
  content: attr(data-title-hide);
  opacity: 1;
}

.stretcher-wrapper .stretcher .stretcher-item.more:hover .more-icon span:before {
  opacity: 1;
}

.stretcher-wrapper .stretcher .stretcher-item.more:hover .more-icon span:after {
  opacity: 0;
}

@media (min-width: 992px) {
  .stretcher-wrapper .stretcher .stretcher-item.more, .stretcher-wrapper .stretcher .stretcher-item.more.inactive {
    width: 8%;
  }
  .stretcher-wrapper .stretcher .stretcher-item.more.active {
    width: 28%;
  }
  .stretcher-wrapper .stretcher .stretcher-item.more.more {
    height: 100%;
  }
}

.stretcher-wrapper .stretcher .stretcher-item.inactive, .stretcher-wrapper .stretcher .stretcher-item.active {
  width: 100%;
}

@media (min-width: 992px) {
  .stretcher-wrapper .stretcher .stretcher-item {
    width: 23%;
    height: 100%;
    display: inline-block;
  }
  .stretcher-wrapper .stretcher .stretcher-item.inactive {
    width: 18%;
  }
  .stretcher-wrapper .stretcher .stretcher-item.active {
    width: 38%;
  }
}

.stretcher-wrapper .stretcher .stretcher-item .stretcher-logo {
  background-color: rgba(96, 112, 87, 0.4);
  opacity: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -webkit-transition: opacity 0.2s;
  transition: opacity 0.2s;
  font-size: initial;
  color: white;
}

.stretcher-wrapper .stretcher .stretcher-item .stretcher-logo img,
.stretcher-wrapper .stretcher .stretcher-item .stretcher-logo .text {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.stretcher-wrapper .stretcher .stretcher-item .stretcher-logo .text {
  text-align: center;
}

.stretcher-wrapper .stretcher .stretcher-item .stretcher-logo .text .f-icon {
  font-size: 100px;
}

.stretcher-wrapper .stretcher .stretcher-item .stretcher-logo .text .text-intro {
  display: block;
}

.stretcher-wrapper .stretcher .stretcher-item:hover .stretcher-logo {
  opacity: 0;
}

.stretcher-wrapper .stretcher .stretcher-item figure {
  background-color: rgba(0, 38, 57, 0.5);
  color: white;
  position: absolute;
  z-index: 9;
  font-size: initial;
  padding: 20px 10px;
  width: 100%;
  left: 0;
  bottom: 0;
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.stretcher-wrapper .stretcher .stretcher-item figure figcaption {
  white-space: normal;
  font-size: 12px;
}

.stretcher-wrapper .stretcher .stretcher-item figure h4 {
  margin-bottom: 0;
}

@media (min-width: 992px) {
  .stretcher-wrapper .stretcher .stretcher-item figure {
    padding: 20px 30px;
  }
}

.stretcher-wrapper .stretcher .stretcher-item:hover figure {
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media (min-width: 992px) {
  .stretcher-wrapper .stretcher {
    height: 500px;
    white-space: nowrap;
  }
  .stretcher-wrapper.stretcher-wrapper-frontpage .stretcher {
    height: 100vh;
  }
  .stretcher-wrapper.stretcher-wrapper-frontpage .stretcher .stretcher-item figure {
    bottom: 20%;
    -moz-transform: translate3d(-100%, 0, 0);
    -ms-transform: translate3d(-100%, 0, 0);
    -o-transform: translate3d(-100%, 0, 0);
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    overflow: hidden;
    padding: 50px 30px;
  }
  .stretcher-wrapper.stretcher-wrapper-frontpage .stretcher .stretcher-item:hover figure {
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

/*  
    ----------------------------------
    23. Banner
    ----------------------------------
*/
.banner {
  position: relative;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  padding-top: 200px;
  padding-bottom: 200px;
  color: white;
   background-color:#eeeeee;
}

.banner .btn {
  margin-top: 40px;
}

/*  
    ----------------------------------
    24. Instagram
    ----------------------------------
*/
.instagram {
  padding-top: 35px;
  padding-bottom: 0;
}

.instagram .gallery .item {
  width: 16.66667%;
  float: left;
  overflow: hidden;
}

.instagram .gallery .item img {
  width: 100%;
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}

.instagram .gallery .item:hover img {
  -moz-transform: scale(1.08);
  -ms-transform: scale(1.08);
  -o-transform: scale(1.08);
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

@media (min-width: 768px) {
  .instagram {
    padding-top: 20px;
  }
}

@media (min-width: 992px) {
  .instagram {
    padding-top: 35px;
  }
}

@media (min-width: 1200px) {
  .instagram {
    padding-top: 50px;
  }
}

/*  
    ----------------------------------
    25. Contact
    ----------------------------------
*/
.contact {
  background-color: transparent;
  padding: 0 0 100px 0;
}

.contact .map {
  height: 400px;
}

.contact .contact-block {
  margin-top: -80px;
}

.contact .contact-block .banner {
  padding: 50px 40px;
  background-image: url(https://grandecentrepointprestige.com/img/contact.png);
  background-position: center;
  background-size: 80% auto;
  background-repeat: no-repeat;
}

.contact .contact-block .contact-info {
  background-color: #eeeeee;
  padding-bottom: 15px;
}

.contact .contact-block .contact-info figure {
  padding: 15px;
}

.contact .contact-block .contact-info figure figcaption > strong {
  display: block;
  padding: 7.5px 0;
}

.contact .contact-block .contact-info figure figcaption > span {
  font-size: 90%;
}

.contact .contact-block .contact-info figure .icon {
  font-size: 50px;
  color: #232662;
}

.contact .contact-block .contact-form {
  display: none;
  margin-top: 50px;
}

.contact .contact-block .contact-form .form-control {
  border-color: transparent;
}

.contact .map-info-window {
  padding: 15px;
}

.contact .map-info-window .fa {
  width: 20px;
  text-align: center;
  margin-right: 3px;
  display: inline-block;
}

/*  
    ----------------------------------
    26. Tabsy wrapper
    ----------------------------------
*/
.tabsy-wrapper.tabsy-wrapper-clean {
  padding: 0;
}

.tabsy-wrapper.tabsy-wrapper-frontpage {
  margin-top: -40px;
  padding: 0;
}

.tabsy-wrapper.tabsy-wrapper-frontpage .container {
  padding-left: 0;
  padding-right: 0;
}

.tabsy-wrapper.tabsy-wrapper-frontpage .tabsy {
  box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.5);
}

@media (min-width: 992px) {
  .tabsy-wrapper.tabsy-wrapper-frontpage {
    margin-top: -100px;
  }
}

@media (min-width: 1480px) {
  .tabsy-wrapper.tabsy-wrapper-frontpage .container {
    width: 80%;
  }
}

@media (max-width: 767px) {
  .tabsy-wrapper.tabsy-wrapper-frontpage {
    margin-top: -62px;
  }
}

.tabsy-wrapper .tabsy {
  background-size: cover;
  background-position: center;
  position: relative;
}

.tabsy-wrapper .tabsy .tabsy-images, .tabsy-wrapper .tabsy .tabsy-images > div {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.tabsy-wrapper .tabsy .tabsy-images > div {
  background-size: cover;
  background-position: center;
  opacity: 0;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.tabsy-wrapper .tabsy .tabsy-images > div.current {
  opacity: 1;
}

.tabsy-wrapper .tabsy .tabsy-images img {
  display: none;
}

.tabsy-wrapper .tabsy .tabsy-links .row {
  margin: 0;
}

.tabsy-wrapper .tabsy .tabsy-links figure {
  cursor: pointer;
  padding: 0;
  position: relative;
  min-height: 150px;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.tabsy-wrapper .tabsy .tabsy-links figure + figure {
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.tabsy-wrapper .tabsy .tabsy-links figure:after {
  font: normal normal normal 24px/30px LinearIcons;
  content: "\e876";
  -webkit-font-smoothing: antialiased;
  display: block;
  position: absolute;
  text-align: right;
  width: 100%;
  right: 0;
  bottom: 0;
  padding: 10px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.tabsy-wrapper .tabsy .tabsy-links figure a.link {
  background-color: transparent;
  font-size: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 88;
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.tabsy-wrapper .tabsy .tabsy-links figure figcaption {
  margin: 20px;
  overflow: hidden;
}

.tabsy-wrapper .tabsy .tabsy-links figure figcaption .date {
  font-size: 75%;
  display: block;
  color: #232662;
}

.tabsy-wrapper .tabsy .tabsy-links figure figcaption .title {
  display: block;
  margin-top: 5px;
  text-transform: none;
  color: white;
}

.tabsy-wrapper .tabsy .tabsy-links figure figcaption .desc {
  display: none;
  color: white;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  -moz-transform: translate3d(0, 100%, 0);
  -ms-transform: translate3d(0, 100%, 0);
  -o-transform: translate3d(0, 100%, 0);
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

@media (min-width: 768px) {
  .tabsy-wrapper .tabsy .tabsy-links figure figcaption .desc {
    display: block;
  }
}

.tabsy-wrapper .tabsy .tabsy-links figure.current {
  background-color: rgba(0, 0, 0, 0.5);
}

.tabsy-wrapper .tabsy .tabsy-links figure.current a.link {
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.tabsy-wrapper .tabsy .tabsy-links figure.current figcaption .desc {
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.tabsy-wrapper .tabsy .tabsy-links figure.current:after {
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

@media (min-width: 768px) {
  .tabsy-wrapper .tabsy .tabsy-links figure {
    min-height: 350px;
  }
}

@media (min-width: 768px) {
  .tabsy-wrapper .wrapper-more {
    margin-top: 20px;
  }
}

@media (min-width: 992px) {
  .tabsy-wrapper .wrapper-more {
    margin-top: 35px;
  }
}

/*  
    ----------------------------------
    27. Intro
    ----------------------------------
*/
.intro {
  background-color: #eeeeee;
  padding: 30px 0;
}

.intro.intro-white {
  background-color: white;
}

@media (min-width: 768px) {
  .intro {
    padding: 200px 0;
    text-align: center;
  }
}

/*  
    ----------------------------------
    28. Text blocks
    ----------------------------------
*/
.text-blocks {
  padding: 40px 0;
}

.text-blocks .text-block {
  padding: 70px 0;
  display: table;
  width: 100%;
  text-align: left;
}

.text-blocks .text-block > div {
  display: table-cell;
  vertical-align: middle;
}

.text-blocks .text-block .icon {
  font-size: 50px;
  padding: 0 70px;
}

@media (min-width: 992px) {
  .text-blocks {
    padding: 100px 0;
  }
}

/*  
    ----------------------------------
    29. Quotes
    ----------------------------------
*/
.quotes {
  color: white;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.quotes.quotes-ligther {
  background-color: #eeeeee;
  color: black;
}

.quotes.quotes-ligther .section-header, .quotes.quotes-ligther .section-header .title {
  color: black;
}

.quotes.quotes-ligther .section-header span, .quotes.quotes-ligther .section-header .title span {
  color: black;
}

.quotes .section-header {
  position: relative;
  z-index: 2;
  text-align: center;
}

.quotes .section-header,
.quotes .section-header .title {
  color: white;
}

.quotes .section-header span,
.quotes .section-header .title span {
  color: white;
}

.quotes .section-header img {
  margin: 15px 0 0;
}

.quotes .quote {
  text-align: center;
}

.quotes .quote .image {
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  width: 100px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  top: 0;
  margin-bottom: 40px;
}

.quotes .quote .image img {
  width: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

.quotes .quote .text h4, .quotes .quote .text .h4 {
  text-transform: none;
  margin-bottom: 10px;
}

.quotes .quote:hover .image {
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

.quotes .quote .more .rating {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 10px;
}

.quotes .quote .more .rating .icon {
  width: 16px;
  display: inline-block;
  color: #232662;
}

.quotes .owl-theme .owl-controls .owl-pagination {
  position: relative;
  bottom: 0;
  margin-top: 50px;
}

/*  
    ----------------------------------
    30. Team
    ----------------------------------
*/
.team {
  padding: 40px 0;
}

.team article {
  background-color: white;
  margin-bottom: 30px;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.team article.inactive {
  opacity: 0.2;
}

.team article.active {
  opacity: 1;
}

.team article .title {
  text-transform: none;
  margin: 0;
}

.team article .image img {
  width: 100%;
  display: block;
}

.team article a {
  color: white;
}

.team article .details {
   background-color:#eeeeee;
  color: white;
  text-align: center;
  position: absolute;
  width: 100%;
  overflow: hidden;
  height: 0;
  -moz-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -o-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  -webkit-transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.team article .details .inner {
  padding: 15px 0;
}

.team article .details-text {
  top: auto;
  bottom: 100%;
}

.team article .details-social {
  top: 100%;
  bottom: auto;
}

.team article .details-social .fa {
  width: 30px;
  height: 30px;
  padding: 5px;
  text-align: center;
}

.team article:hover {
  position: relative;
  z-index: 999;
}

.team article:hover .details-text {
  height: 70px;
}

.team article:hover .details-social {
  height: 60px;
}

/*  
    ----------------------------------
    31. Facilities
    ----------------------------------
*/
.facilities {
  background-color: #eeeeee;
}

.facilities .facilities-wrapper figure {
  position: relative;
  padding: 35px 20px;
  text-align: center;
  cursor: default;
  margin-bottom: 30px;
}

.facilities .facilities-wrapper figure:hover .hotelicon:after {
  -moz-transform: scale(1.8);
  -ms-transform: scale(1.8);
  -o-transform: scale(1.8);
  -webkit-transform: scale(1.8);
  transform: scale(1.8);
  background-color: #002639;
}

.facilities .facilities-wrapper figure:hover .title {
  -moz-transform: translateY(-30px);
  -ms-transform: translateY(-30px);
  -o-transform: translateY(-30px);
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  color: white;
}

.facilities .facilities-wrapper figure .hotelicon {
  position: relative;
  display: inline-block;
  font-size: 60px;
  color: white;
}

.facilities .facilities-wrapper figure .hotelicon:after {
   background-color:#eeeeee;
  content: "";
  left: 0;
  top: 0;
  z-index: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-transform: scale(1.3);
  -ms-transform: scale(1.3);
  -o-transform: scale(1.3);
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.facilities .facilities-wrapper figure .hotelicon:before {
  z-index: 1;
  position: relative;
}

.facilities .facilities-wrapper figure figcaption {
  position: relative;
}

.facilities .facilities-wrapper figure figcaption .title {
  margin-top: 15px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-bottom: 0;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

@media (min-width: 768px) {
  .facilities .facilities-wrapper .hotelicon {
    font-size: 50px;
  }
  .facilities.facilities-lg .facilities-wrapper .hotelicon {
    font-size: 60px;
  }
}

@media (min-width: 992px) {
  .facilities .facilities-wrapper .hotelicon {
    font-size: 70px;
  }
  .facilities.facilities-lg .facilities-wrapper .hotelicon {
    font-size: 60px;
  }
}

@media (max-width: 991px) {
  .facilities .container {
    width: 100%;
    padding-left: 0px;
    padding-right: 0px;
  }
}

/*  
    ----------------------------------
    32. Facility
    ----------------------------------
*/
@media (min-width: 992px) {
  .facility {
    padding-top: 0;
  }
}

.facility .facility-info {
  background-color: white;
  padding: 15px 0;
  display: block;
  position: relative;
}

@media (min-width: 992px) {
  .facility .facility-info {
    margin-top: -50px;
    padding: 40px;
  }
}

.facility .facility-addons {
  position: relative;
  z-index: 3;
}

.facility .facility-addons .nav-tabs {
  text-align: center;
  border: 0;
}

@media (min-width: 768px) {
  .facility .facility-addons .nav-tabs {
    width: 110px;
    position: absolute;
    left: -100px;
    top: 40px;
  }
}

.facility .facility-addons .nav-tabs > li {
  margin-bottom: 0;
  float: none;
  display: inline-block;
}

.facility .facility-addons .nav-tabs > li .hotelicon {
  display: block;
  font-size: 30px;
}

@media (min-width: 992px) {
  .facility .facility-addons .nav-tabs > li {
    margin-bottom: 20px;
  }
  .facility .facility-addons .nav-tabs > li .hotelicon {
    font-size: 50px;
  }
}

.facility .facility-addons .nav-tabs > li a {
  background-color: transparent;
  border-color: white;
  padding: 15px;
  border-radius: 0;
  border: 0;
}

.facility .facility-addons .nav-tabs > li a:before {
  content: "";
  display: block;
  left: 50%;
  top: 50%;
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
 background-color:#eeeeee;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  -moz-transform: translate(-50%, -50%) rotate(0deg) scale(0.02);
  -ms-transform: translate(-50%, -50%) rotate(0deg) scale(0.02);
  -o-transform: translate(-50%, -50%) rotate(0deg) scale(0.02);
  -webkit-transform: translate(-50%, -50%) rotate(0deg) scale(0.02);
  transform: translate(-50%, -50%) rotate(0deg) scale(0.02);
  z-index: -1;
}

@media (min-width: 992px) {
  .facility .facility-addons .nav-tabs > li a {
    padding: 20px 30px;
  }
}

.facility .facility-addons .nav-tabs > li.active a {
  color: white;
  position: relative;
}

.facility .facility-addons .nav-tabs > li.active a:before {
  opacity: 1;
  -moz-transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
  -ms-transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
  -o-transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
  -webkit-transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
  transform: translate(-50%, -50%) rotate(45deg) scale(0.9);
}

.facility .facility-addons .tab-content {
  padding: 15px 0;
}

@media (min-width: 992px) {
  .facility .facility-addons .tab-content {
    padding: 40px;
  }
  .facility .facility-addons .tab-content .tab-pane {
    display: block;
    visibility: hidden;
    height: 0;
    overflow: hidden;
  }
  .facility .facility-addons .tab-content .tab-pane.active {
    visibility: visible;
    height: auto;
  }
  .facility .facility-addons .tab-content .tab-pane.active .content {
    opacity: 1;
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  .facility .facility-addons .tab-content .tab-pane .content {
    width: 100%;
    opacity: 0;
    -moz-transition: all 0.6s;
    -o-transition: all 0.6s;
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
    -moz-transform: translate3d(-50px, 0, 0);
    -ms-transform: translate3d(-50px, 0, 0);
    -o-transform: translate3d(-50px, 0, 0);
    -webkit-transform: translate3d(-50px, 0, 0);
    transform: translate3d(-50px, 0, 0);
  }
}

/*  
    ----------------------------------
    33. Booking
    ----------------------------------
*/
.booking {
  padding-top: 0;
}

.booking.booking-inner {
  padding-bottom: 0;
}

@media (min-width: 992px) {
  .booking.booking-inner {
    margin-top: -175px;
    z-index: 9;
    position: relative;
    color: white;
  }
  .booking.booking-inner .booking-wrapper {
    position: relative;
  }
  .booking.booking-inner .booking-wrapper:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }
}

@media (max-width: 991px) {
  .booking.booking-inner .booking-wrapper {
    background-color:#eeeeee;
    color:#000000;
  }
}

.booking.booking-light-theme .booking-wrapper {
  border-bottom: 1px solid #dddddd;
}

.booking.booking-default-theme {
  padding-bottom: 0;
  color: white;
   background-color:#efefef;
}

.booking.booking-default-theme .section-header .title {
  color: white;
  text-align: center;
}

.booking .section-header {
  padding-top: 15px;
  padding-bottom: 0;
  background-color: transparent;
}

.booking .section-header span {
  font-size: 100%;
  color: inherit;
}

@media (min-width: 768px) {
  .booking .section-header {
    padding-top: 30px;
  }
}

@media (min-width: 992px) {
  .booking .section-header {
    padding-top: 35px;
  }
}

@media (min-width: 1200px) {
  .booking .section-header {
    padding-top: 40px;
  }
}

.booking .booking-wrapper {
  padding: 15px;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 200;
}

.booking .booking-wrapper .datepicker,
.booking .booking-wrapper .qty-result {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: transparent;
  text-indent: -99999px;
  border: 0;
  outline: none;
  cursor: pointer;
  z-index: 9;
}

.booking .booking-wrapper .date {
  position: relative;
  display: inline-block;
  padding-right: 30px;
}

.booking .booking-wrapper .date:after {
  font-family: 'LinearIcons';
  font-style: normal;
  font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-weight: normal;
  font-stretch: normal;
  text-transform: none;
  speak: none;
  -webkit-font-smoothing: antialiased;
  content: "\e87a";
  position: absolute;
  left: 100%;
  top: 50%;
  font-size: 30px;
  margin-top: -12px;
}

.booking .booking-wrapper .date .day {
  font-size: 40px;
  line-height: 40px;
}

.booking .booking-wrapper .date .year {
  display: none;
}

.booking .booking-wrapper .guests input {
  background: transparent;
  border: 0;
  outline: 0;
  cursor: pointer;
}

.booking .booking-wrapper .guests .qty-result-text {
  font-size: 40px;
  line-height: 40px;
}

@media (min-width: 992px) {
  .booking .booking-wrapper .guests .qty-result-text {
    font-size: 60px;
    line-height: 50px;
  }
}

.booking .booking-wrapper .guests input::-webkit-outer-spin-button,
.booking .booking-wrapper .guests input::-webkit-inner-spin-button {
  /* display: none; <- Crashes Chrome on hover */
  -webkit-appearance: none;
  margin: 0;
  /* <-- Apparently some margin are still there even though it's hidden */
}

.booking .booking-wrapper .guests .guest-list {
  display: none;
  background-color: white;
  position: fixed;
  z-index: 99999;
  margin: 0;
  padding: 0;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  left: 0;
  right: 0;
  width: 100%;
  top: 0;
}

.booking .booking-wrapper .guests .guest-list li {
  color: #3a3d45;
  padding: 0;
  list-style-type: none;
  padding: 10px 0;
}

.booking .booking-wrapper .guests .guest-list li.header, .booking .booking-wrapper .guests .guest-list li.footer {
  background-color:#eeeeee;
  color: #2a3026;
  padding: 20px 15px;
}

.booking .booking-wrapper .guests .guest-list li.header .qty-apply, .booking .booking-wrapper .guests .guest-list li.footer .qty-apply {
  font-size: 70%;
  padding: 4px;
  border: 1px solid #8a7048;
  color: #8a7048;
  cursor: pointer;
  float: right;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

.booking .booking-wrapper .guests .guest-list li div {
  font-size: large;
  float: left;
}

.booking .booking-wrapper .guests .guest-list li div:nth-child(1) {
  width: 20%;
  padding-left: 10px;
}

.booking .booking-wrapper .guests .guest-list li div:nth-child(2) {
  width: 40%;
}

.booking .booking-wrapper .guests .guest-list li div:nth-child(2) span {
  font-size: 18px;
  padding: 3px 10px;
  display: inline-block;
  font-weight: 300;
}

.booking .booking-wrapper .guests .guest-list li div:nth-child(2) span small {
  display: block;
  font-weight: 200;
}

.booking .booking-wrapper .guests .guest-list li div:nth-child(3) {
  width: 40%;
  text-align: right;
  padding-right: 10px;
  padding-top: 5px;
}

.booking .booking-wrapper .guests .guest-list li div > span {
  font-size: 70%;
}

.booking .booking-wrapper .guests .guest-list li .qty-amount {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border: 2px solid #dddddd;
  border-radius: 100%;
  font-weight: 500;
}

.booking .booking-wrapper .guests .guest-list li .qty-btn {
  border: 2px solid #dddddd;
  border-radius: 100%;
  font-size: 20px;
  width: 40px;
  height: 40px;
  line-height: 30px;
  margin-left: 7px;
  outline: none;
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

.booking .booking-wrapper .guests .guest-list li .qty-btn:hover {
   background-color:#eeeeee;
  color: white;
  border-color: #232662;
}

@media (min-width: 768px) {
  .booking .booking-wrapper .guests .guest-list {
    position: absolute;
    width: auto;
    min-width: 350px;
    left: 0;
    top: 93px;
  }
}

@media (min-width: 992px) {
  .booking .booking-wrapper .guests .guest-list {
    top: 108px;
  }
}

.booking .booking-wrapper .date,
.booking .booking-wrapper .guests {
  position: relative;
  padding-top: 35px;
}

.booking .booking-wrapper .date .date-value,
.booking .booking-wrapper .guests .date-value {
  -moz-transition: all 0.5s;
  -o-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  font-family: "Josefin Sans", serif;
  text-transform: uppercase;
  text-shadow: 0 2px 5px rgb(0 0 0 / 50%);
}

.booking .booking-wrapper .date:before,
.booking .booking-wrapper .guests:before {
  position: absolute;
  content: attr(data-text);
  left: 0;
  top: 0;
}

.booking .booking-wrapper .date:hover .date-value,
.booking .booking-wrapper .guests:hover .date-value {
  -moz-transform: translateX(15px);
  -ms-transform: translateX(15px);
  -o-transform: translateX(15px);
  -webkit-transform: translateX(15px);
  transform: translateX(15px);
}

.booking .booking-wrapper .btn {
  display: block;
  padding: 20px;
  width: 100%;
  font-size: 120%;
  text-transform: none;
}

.booking .booking-wrapper .btn small {
  display: block;
  font-size: 50%;
}

@media (min-width: 992px) {
  .booking .booking-wrapper .text-size, .booking .booking-wrapper .date .day, .booking .booking-wrapper .guests .qty-result {
    font-size: 60px;
    line-height: 50px;
  }
  .booking .booking-wrapper {
    padding: 40px;
  }
  .booking .booking-wrapper .date .month {
    display: inline-block;
  }
  .booking .booking-wrapper .guests .qty-result {
    height: 80px;
  }
  .booking .booking-wrapper .btn {
    margin-top: 5px;
  }
}

@media (max-width: 767px) {
  .booking .booking-wrapper .date {
    padding-right: 0;
  }
  .booking .booking-wrapper .date:after {
    display: none;
  }
  .booking .booking-wrapper .btn {
    margin-top:0px;
  }
}

@media (max-width: 991px) {
  .booking .container {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/*  
    ----------------------------------
    34. Datepicker
    ----------------------------------
*/
.ui-datepicker {
  z-index: 10009 !important;
}

.ui-datepicker .ui-datepicker-calendar .ui-state-active {
  background-color:#eeeeee;
}

.ui-datepicker .ui-datepicker-title {
  background-color:#eeeeee;
  font-family: "Josefin Sans", sans-serif;
}

@media (max-width: 767px) {
  .ui-datepicker {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    top: 0 !important;
    margin-top: 0 !important;
    position: fixed !important;
  }
}

/*  
    ----------------------------------
    35. Rooms
    ----------------------------------
*/
.rooms {
  background-color: #eeeeee;
}

.rooms.rooms-widget {
  position: relative;
}

.rooms.rooms-widget:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 50%;
  left: 0;
  bottom: 0;
}

.rooms.rooms-category {
  background-color: transparent;
}

.rooms.rooms-inner {
  background-color: #eeeeee;
}

.rooms.rooms-inner:before {
  height: 77%;
  background-color: inherit;
}

.rooms.rooms-inner article .details {
  background-color: white;
}

@media (min-width: 768px) {
  .rooms.rooms-inner {
    background-color: transparent;
    margin-top: -150px;
    padding-top: 0;
  }
  .rooms.rooms-inner:before {
    background-color: #eeeeee;
  }
  .rooms.rooms-inner .section-header {
    padding-bottom: 20px;
    color: white;
  }
  .rooms.rooms-inner .section-header .title, .rooms.rooms-inner .section-header .title span {
    color: white;
    font-size: 22px;
  }
}

.rooms article {
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-bottom: 40px;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.rooms article .image {
  position: relative;
}

.rooms article .image img {
  width: 100%;
}

.rooms article .image .room-facility {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.rooms article .details {
  padding: 15px;
  background-color:#efefef;
}

.rooms article .details .text {
  margin-bottom: 15px;
}

.rooms article .details .text .title {
  margin-bottom: 0;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: uppercase;
}

.rooms article .details .text p {
  margin-bottom: 0;
}

.rooms article .details .book {
  display: table;
  width: 100%;
}

.rooms article .details .book > div {
  display: table-cell;
  vertical-align: middle;
}

.rooms article .details .book > div:nth-child(2) {
  padding-left: 15px;
  font-size: 80%;
  text-align: right;
}

.rooms article .details .book > div > .price {
  display: block;
  margin-bottom: 0;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
}

@media (min-width: 767px) {
  .rooms article {
    margin-bottom: 30px;
  }
  .rooms article .details {
    padding: 30px;
  }
  .rooms article:hover {
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
    -moz-transform: scale(1.03);
    -ms-transform: scale(1.03);
    -o-transform: scale(1.03);
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
}

@media (min-width: 991px) {
  .rooms article {
    margin-bottom: 40px;
  }
  .rooms article .details {
    padding: 20px;
  }
}

@media (min-width: 1199px) {
  .rooms article {
    margin-bottom: 40px;
  }
  .rooms article .details {
    padding: 35px;
  }
}

/*  
    ----------------------------------
    36. Room
    ----------------------------------
*/
@media (max-width: 991px) {
  .room .room-gallery {
    margin-top: -20px;
  }
  .room .room-gallery .container {
    width: 100%;
    padding-left:0;
    padding-right:0;
  }
}

.room .room-block {
  padding-top: 40px;
}

.room .room-block.room-aminities figure {
  text-align: center;
  margin-bottom: 15px;
}

.room .room-block.room-aminities figure .hotelicon {
  font-size: 50px;
}

.room .room-block.room-aminities figure p {
  /*white-space: nowrap;*/
  /*text-overflow: ellipsis;*/
  overflow: hidden;
  margin-bottom: 0;
}

.room .room-block .box {
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #dddddd;
}

.room .room-block .box:last-child {
  border-bottom: 0;
}

@media (min-width: 768px) {
  .room .room-block {
    padding-top: 70px;
  }
  .room .room-block figure {
    margin-bottom: 0;
  }
  .room .room-block figure .hotelicon {
    font-size: 50px;
  }
}

.room .room-overview .title {
  position: relative;
  text-align: center;
  margin-bottom: 40px;
text-transform: uppercase;
}

.room .room-overview .title:before, .room .room-overview .title:after {
  content: "";
  position: absolute;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: #dddddd;
}

.room .room-overview .title:before {
  bottom: -25px;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  text-transform: uppercase;
}

.room .room-overview .title:after {
  bottom: -20px;
  width: 60px;
  height: 1px;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .room .room-overview .title {
    margin-bottom: 70px;
  }
  .room .room-overview .title:before {
    bottom: -35px;
  }
  .room .room-overview .title:after {
    bottom: -30px;
    width: 100px;
  }
}

/*  
    ----------------------------------
    37. Gallery
    ----------------------------------
*/
.gallery {
  position: relative;
  padding: 0;
}

.gallery .section-header {
  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=0 );
  /* IE6-9 */
  position: absolute;
  width: 100%;
  min-height: 30%;
  left: 0;
  right: 0;
  top: 0;
  padding-top: 40px;
  z-index: 999;
  text-align: center;
}

.gallery .section-header, .gallery .section-header .title {
  color: white;
}

.gallery .section-header .title span {
  color: white;
}

.gallery .section-header p {
  color: #3a3d45;
}

.gallery .item {
  background-position: center;
  background-size: cover;
}

.gallery .owl-controls .owl-buttons > div {
  /*background-color: $color-base;*/
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-transform: scale(3);
  -ms-transform: scale(3);
  -o-transform: scale(3);
  -webkit-transform: scale(3);
  transform: scale(3);
}

.gallery .owl-controls .owl-buttons .owl-next {
  right: 50px;
}

.gallery .owl-controls .owl-buttons .owl-prev {
  left: 50px;
}

/*  
    ----------------------------------
    38. Blog
    ----------------------------------
*/
.blog {
  position: relative;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

.blog .title {
  color: #3a3d45;
}

.blog.blog-category, .blog.blog-item {
  background-color: transparent;
}

@media (min-width: 992px) {
  .blog.blog-category, .blog.blog-item {
    padding-top: 0;
    padding-bottom: 40px;
  }
}

.blog.blog-widget {
  background-color: #eeeeee;
  position: relative;
  padding-bottom: 40px;
}

@media (min-width: 768px) {
  .blog.blog-widget:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0;
    bottom: 0;
     background-color:#eeeeee;
  }
}

.blog.blog-widget article .text {
  background-color: white;
}

.blog aside {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  background-color:#efefef;
}

.blog aside .booking .booking-wrapper {
  padding: 20px;
}

.blog aside .booking .booking-wrapper .date:after {
  display: none;
}

.blog aside .booking .booking-wrapper .date .day {
  font-size: 50px;
  line-height: 55px;
}

.blog aside .booking .booking-wrapper .btn {
  font-size: 100%;
  margin-top: 15px;
}

.blog aside .box {
  padding: 20px;
  position: relative;
  border-bottom: 1px solid #dddddd;
}

.blog aside .box .title {
  padding-top: 7.5px;
  margin-bottom: 15px;
}

.blog aside .box ul {
  margin: 0;
  padding: 0;
}

.blog aside .box ul li {
  list-style-type: circle;
  margin-left: 20px;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.blog aside .box ul li:hover {
  -moz-transform: translateX(10px);
  -ms-transform: translateX(10px);
  -o-transform: translateX(10px);
  -webkit-transform: translateX(10px);
  transform: translateX(10px);
}

.blog aside .box ul li a {
  color: black;
  display: block;
  padding: 5px 0;
  border-bottom: 1px solid #eaeaea;
}

.blog aside .box ul li.active {
  list-style-type: disc;
}

.blog aside .box ul li.active a {
  color: #232662;
  opacity: 0.8;
}

.blog aside .box ul li:last-child a {
  border-bottom: 0;
}

.blog aside .box.box-search {
  padding: 0;
  position: relative;
  background-color: white;
}

.blog aside .box.box-search .form-control {
  border: 0;
}

.blog aside .box.box-search .btn {
  position: absolute;
  right: 10px;
  top: 8px;
}

.blog aside .box.box-posts ul li {
  list-style-type: none;
  margin-left: 0;
}

.blog aside .box.box-posts ul li a {
  position: relative;
  display: table;
  width: 100%;
}

.blog aside .box.box-posts ul li a > span {
  display: table-cell;
  vertical-align: middle;
}

.blog aside .box.box-posts ul li a .date {
  width: 40px;
  text-align: center;
  line-height: 1;
}

.blog aside .box.box-posts ul li a .date span {
  display: block;
}

.blog aside .box.box-posts ul li a .date span:nth-child(1) {
  font-size: 75%;
}

.blog aside .box.box-posts ul li a .date span:nth-child(2) {
  font-weight: 500;
  font-size: 20px;
}

.blog aside .box.box-posts ul li a .text {
  padding-left: 5px;
}

.blog aside .box.box-tags ul li {
  margin: 0 2px 2px 0;
  display: block;
  float: left;
}

.blog aside .box.box-tags ul li:hover {
  -moz-transform: none;
  -ms-transform: none;
  -o-transform: none;
  -webkit-transform: none;
  transform: none;
}

.blog aside .box.box-tags ul li a {
  padding: 7.5px;
  border: 0;
   background-color:#eeeeee;
  color: white;
  font-size: 13px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
}

.blog aside .box.box-tags ul li a:hover {
  background-color: #002639;
}

@media (min-width: 768px) {
  .blog aside {
    display: block;
  }
}

.blog article {
  position: relative;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  margin-bottom: 15px;
}

.blog article .image {
  position: relative;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.blog article .image img {
  width: 100%;
}

.blog article .image .room-facility {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.blog article .text {
  position: relative;
  padding: 15px;
  background-color: #eeeeee;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

@media (min-width: 992px) {
  .blog article .text {
    padding: 25px;
  }
}

.blog article .text .time {
  width: 65px;
  height: 65px;
  display: block;
   background-color:#eeeeee;
  font-size: 65%;
  color: #515561;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  position: absolute;
  top: -50px;
  left: 50%;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  padding: 10px;
}

.blog article .text .time span {
  display: block;
  color: white;
  text-align: center;
  line-height: 1;
}

.blog article .text .time span:nth-child(2) {
  font-size: 22px;
}

.blog article .text .title {
  margin-top: 5px;
  margin-bottom: 5px;
  overflow: hidden;
  height: 45px;
  text-transform: uppercase;
}

@media (min-width: 992px) {
  .blog article .text .title {
    height: 58px;
  }
}

.blog article .text p {
  margin-bottom: 0;
}

.blog article .text .book {
  display: table;
  width: 100%;
}

.blog article .text .book > div {
  display: table-cell;
  vertical-align: middle;
}

.blog article .text .book > div:nth-child(2) {
  padding-left: 15px;
  font-size: 70%;
  text-align: right;
}

.blog article .text .book > div > .price {
  display: block;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .blog article {
    margin-bottom: 40px;
  }
  .blog article .text {
    -moz-transform: translate(0, -30px);
    -ms-transform: translate(0, -30px);
    -o-transform: translate(0, -30px);
    -webkit-transform: translate(0, -30px);
    transform: translate(0, -30px);
  }
  .blog article:hover .text {
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@media (min-width: 767px) {
  .blog article {
    margin-bottom: 30px;
  }
  .blog article .details {
    padding: 30px;
  }
}

@media (min-width: 991px) {
  .blog article {
    margin-bottom: 40px;
  }
  .blog article .details {
    padding: 40px;
  }
}

.blog.blog-item .content {
  background-color:#efefef;
  padding: 20px;
}

@media (min-width: 768px) {
  .blog.blog-item .content {
    padding: 35px;
  }
}

@media (min-width: 992px) {
  .blog.blog-item .content {
    padding: 80px;
  }
}

.blog.blog-item .content .title small {
  font-weight: 300;
  display: block;
  margin-bottom: 15px;
}

.blog .blog-info.blog-info-top {
  border-bottom: 1px solid #dddddd;
  border-top: 1px solid #dddddd;
  padding: 5px 0;
  margin-bottom: 20px;
  text-align: left;
}

@media (min-width: 992px) {
  .blog .blog-info.blog-info-top {
    padding: 10px 0;
  }
}

.blog .blog-info .entry {
  padding: 5px 10px 5px 25px;
  list-style-type: none;
  display: inline-block;
  font-size: 90%;
}

.blog .blog-info .entry .fa {
  margin-left: -25px;
  width: 20px;
  text-align: center;
  margin-right: 5px;
}

.blog .blog-info .entry.divider {
  border-bottom: 1px solid #dddddd;
  margin-bottom: 10px;
}

/*  
    ----------------------------------
    39. Cards
    ----------------------------------
*/
.cards {
  position: relative;
  border-top: 0px solid #eeeeee;
}

.cards.cards-block {
  padding-top: 40px;
  padding-bottom: 40px;
  margin-top: 40px;
}

.cards figure {
  position: relative;
  overflow: hidden;
  margin-bottom: 30px;
}

.cards figure figcaption {
  position: relative;
  background-position: center;
  background-size: cover;
  -moz-transition: all 5s;
  -o-transition: all 5s;
  -webkit-transition: all 5s;
  transition: all 5s;
}

.cards figure figcaption img {
  width: 100%;
}

.cards figure figcaption:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.cards figure.active figcaption {
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  -webkit-transform: scale(1.5);
  transform: scale(1.5);
}

.cards figure.active figcaption:before {
  opacity: 0.8;
}

.cards figure .btn {
  position: absolute;
  top: 70%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.cards figure.active .btn {
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 50%;
}

@media (min-width: 768px) {
  .cards figure figcaption {
    min-height: 360px;
  }
  .cards figure figcaption img {
    display: none;
  }
  .cards figure .btn {
    top: 80%;
  }
}

/*  
    ----------------------------------
    40. Subscribe
    ----------------------------------
*/
.subscribe {
  position: relative;
  z-index: 999;
  padding: 142px 0;
  background-image: url(https://grandecentrepointprestige.com/img/contact.png);
  background-position: center;
  background-size: 60% auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
   background-color:#eeeeee;
}

@media print {
  .subscribe {
    display: none !important;
  }
}

.subscribe .box {
  max-width: 500px;
  margin: 0 auto;
  color: white;
  text-align: center;
}

.subscribe .box .title {
  margin-bottom: 0;
}

.subscribe .box:before, .subscribe .box:after {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
}

.subscribe .box:before {
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 100%;
  height: 400px;
  left: 0;
  z-index: -1;
}

.subscribe .box:after {
   background-color:#eeeeee;
  -moz-transform: translate(-50%, -50%) rotate(45deg);
  -ms-transform: translate(-50%, -50%) rotate(45deg);
  -o-transform: translate(-50%, -50%) rotate(45deg);
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
  transform: translate(-50%, -50%) rotate(45deg);
  width: 300px;
  height: 300px;
  left: 50%;
  z-index: -1;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
  opacity: .5;
}

@media (min-width: 768px) {
  .subscribe .box:after {
    width: 400px;
    height: 400px;
  }
}

.subscribe .box .form-group {
  max-width: 300px;
  margin: 0 auto;
  position: relative;
}

.subscribe .box .form-group .btn {
  position: absolute;
  top: 50%;
  right: 10px;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media (min-width: 768px) {
  .subscribe .box .form-group {
    max-width: 400px;
  }
}

/*  
    ----------------------------------
    41. Events
    ----------------------------------
*/
.events .event {
  display: table;
  width: 100%;
  margin-bottom: 10px;
  padding: 10px;
}

.events .event > div {
  display: table-cell;
  vertical-align: middle;
}

.events .event .date-card {
  padding-top: 8px;
  width: 80px;
  height: 80px;
  text-align: center;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  border: 1px solid #dddddd;
  font-size: 70%;
  line-height: 1;
}

.events .event .date-card strong {
  display: block;
  font-size: 45px;
  font-weight: 300;
}

.events .event .caption {
  padding-left: 15px;
}

/*  
    ----------------------------------
    42. Checkout
    ----------------------------------
*/
.checkout {
  background-color: #eeeeee;
  padding-top: 0;
  padding-bottom: 15px;
}

.checkout hr {
  border-color: #dddddd;
}

.checkout .cart-wrapper {
  margin: 15px 0;
}

@media print {
  .checkout .cart-wrapper {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
  }
  .checkout .cart-wrapper + .cart-wrapper {
    border-top: 0;
  }
}

@media (min-width: 768px) {
  .checkout .cart-wrapper {
    padding: 40px 0;
  }
}

.checkout .white-block {
  background-color: white;
  padding: 20px 15px;
  margin-bottom: 15px;
}

.checkout .note-block {
  background-color: white;
}

.checkout .note-block strong {
  font-weight: 500;
}

.checkout .payment {
  display: none;
  border: 1px solid #dddddd;
  padding: 15px;
}

@media (min-width: 992px) {
  .checkout .payment {
    padding: 40px;
  }
}

.checkout .payment.active {
  display: block;
}

.checkout .payment .payment-header {
  display: table;
  width: 100%;
  margin-bottom: 15px;
}

.checkout .payment .payment-header > div {
  display: table-cell;
  vertical-align: middle;
}

.checkout .payment .payment-header > div:nth-child(2) {
  text-align: right;
}

.checkout .payment .payment-header > div .fa {
  color: #232662;
  font-size: 30px;
}

.checkout .title {
  margin: 0;
}

.checkout .cart-block {
  position: relative;
}

.checkout .cart-block .title {
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
}

.checkout .cart-block.cart-block-header {
  display: none;
  background-color: white;
  font-weight: 500;
  text-transform: uppercase;
}

.checkout .cart-block.cart-block-item {
  background-color: white;
}

.checkout .cart-block.cart-block-footer {
  color: black;
  margin-top: 1px;
  background-color: white;
  padding: 15px 35px;
}

.checkout .cart-block.cart-block-footer > div {
  padding: 0;
}

.checkout .cart-block.cart-block-footer > div:nth-child(1), .checkout .cart-block.cart-block-footer > div:nth-child(2) {
  width: 50%;
}

.checkout .cart-block.cart-block-footer > div:nth-child(2) {
  text-align: right;
}

.checkout .cart-block.cart-block-footer .form-coupon {
  display: inline-block;
  width: inherit;
  margin-left: 10px;
  text-align: left;
}

.checkout .cart-block > div {
  padding: 0 35px;
}

.checkout .cart-block > div img {
  width: 100%;
  vertical-align: middle;
}

.checkout .cart-block > div.image {
  padding: 0;
}

.checkout .cart-block > div.quantity, .checkout .cart-block > div.price {
  width: 50%;
  float: left;
}

.checkout .cart-block > div.quantity .form-quantity {
  background-color: transparent;
  display: inline-block;
  width: 80px;
  padding: 0;
  border: 0;
  font-size: 50px;
  box-shadow: none;
  font-weight: 200;
}

.checkout .cart-block .price > span {
  display: block;
  text-align: right;
}

.checkout .cart-block .price .final {
  margin: 0;
  font-family: "Josefin Sans", sans-serif;
  font-weight: 300;
}

.checkout .cart-block .price .discount {
  text-decoration: line-through;
}

.checkout .cart-block .icon-delete {
  position: absolute;
  cursor: pointer;
  padding: 5px;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.checkout .cart-block .icon-delete:hover {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

@media (min-width: 768px) {
  .checkout {
    padding-bottom: 70px;
  }
  .checkout .white-block {
    padding: 35px;
  }
  .checkout .cart-block {
    display: table;
    width: 100%;
    margin-bottom: 1px;
  }
  .checkout .cart-block.cart-block-header {
    display: table;
    padding: 15px;
  }
  .checkout .cart-block.cart-block-header > div {
    padding: 0;
    width: auto !important;
  }
  .checkout .cart-block.cart-block-header > div:last-child {
    text-align: right;
  }
  .checkout .cart-block.cart-block-footer .form-coupon {
    position: absolute;
    top: 6px;
  }
  .checkout .cart-block.cart-block-footer.cart-block-footer-price {
    padding: 35px 35px;
    background-color: white;
  }
  .checkout .cart-block > div {
    display: table-cell;
    vertical-align: middle;
  }
  .checkout .cart-block > div img {
    width: 100%;
    vertical-align: middle;
  }
  .checkout .cart-block > div:nth-child(1) {
    width: 50%;
  }
  .checkout .cart-block > div:nth-child(2) {
    width: 30%;
  }
  .checkout .cart-block > div:nth-child(3) {
    width: 20%;
    text-align: center;
  }
  .checkout .cart-block > div:nth-child(4) {
    width: 20%;
  }
  .checkout .cart-block > div.quantity, .checkout .cart-block > div.price {
    float: none;
  }
  .checkout .cart-block > div.quantity {
    text-align: center;
    border-left: 1px solid #dddddd;
    border-right: 1px solid #dddddd;
  }
  .checkout .cart-block .title {
    padding: 0 0 0 35px;
  }
  .checkout .cart-block .price {
    padding-right: 35px;
  }
  .checkout .cart-block .price > span {
    display: block;
    text-align: right;
  }
  .checkout .cart-block .price .final {
    margin: 0;
  }
  .checkout .cart-block .price .discount {
    text-decoration: line-through;
  }
  .checkout .cart-block .form-control {
    text-align: center;
  }
}

@media (max-width: 767px) {
  .checkout .cart-block {
    padding: 15px;
  }
  .checkout .cart-block > div {
    padding: 0 10px;
  }
  .checkout .cart-block > div.price {
    width: 100%;
  }
  .checkout .cart-block .image {
    margin-bottom: 15px;
  }
  .checkout .cart-block .title {
    margin-bottom: 15px;
  }
  .checkout .cart-block .form-control {
    height: 30px;
  }
  .checkout .cart-block.cart-block-footer {
    color: black;
    padding: 15px;
  }
  .checkout .cart-block.cart-block-footer > div {
    float: left;
  }
  .checkout .cart-block.cart-block-footer .form-coupon {
    margin-top: 10px;
    margin-left: 0;
  }
}

/*  
    ----------------------------------
    43. Step wrapper
    ----------------------------------
*/
.step-wrapper {
  background-color: white;
  padding: 15px 0 20px 0;
}

@media (min-width: 992px) {
  .step-wrapper {
    padding: 70px 0 40px 0;
  }
}

@media print {
  .step-wrapper {
    display: none !important;
  }
}

.step-wrapper header {
  padding: 0;
}

.step-wrapper header .title {
  padding-top: 15px;
  color: white;
}

@media (min-width: 768px) {
  .step-wrapper header .title {
    padding-top: 40px;
  }
}

.step-wrapper .stepper {
  color: white;
}

.step-wrapper .stepper > ul {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
}

.step-wrapper .stepper > ul > li {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  text-align: center;
  padding: 0;
}

.step-wrapper .stepper > ul > li:first-child:before {
  display: none;
}

.step-wrapper .stepper > ul > li:before {
  background-color: #dddddd;
  position: absolute;
  display: block;
  content: "";
  width: 100%;
  height: 1px;
  top: 50%;
  right: 50%;
  z-index: 0;
}

.step-wrapper .stepper > ul > li span {
  background-color: white;
  font-size: 50px;
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
  z-index: 9;
  color: #dddddd;
  font-family: 'LinearIcons';
}

.step-wrapper .stepper > ul > li span:before {
  content: "\e880";
}

.step-wrapper .stepper > ul > li span:after {
  content: attr(data-text);
  position: absolute;
  display: inline-block;
  bottom: 100%;
  text-transform: uppercase;
  text-align: center;
  width: initial;
  left: 50%;
  font-size: 10px;
  white-space: nowrap;
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  font-family: "Josefin Sans", sans-serif;
}

@media (min-width: 992px) {
  .step-wrapper .stepper > ul > li span {
    width: 50px;
    height: 60px;
    font-size: 50px;
    line-height: 60px;
  }
  .step-wrapper .stepper > ul > li span:after {
    font-size: 18px;
    line-height: initial;
  }
}

.step-wrapper .stepper > ul > li.active:before {
  background-color: black;
}

.step-wrapper .stepper > ul > li.active span {
  color: black;
}

.step-wrapper .stepper > ul > li.active span:before {
  content: "\e87f";
}

/*  
    ----------------------------------
    44. Login wrapper
    ----------------------------------
*/
.login-wrapper.login-wrapper-page {
  background-color: #eeeeee;
}

.login-wrapper .white-block {
  background-color: white;
  padding: 20px 15px;
  margin-bottom: 15px;
}

@media (min-width: 768px) {
  .login-wrapper .white-block {
    padding: 35px;
  }
}

.login-wrapper .login-block.login-block-signin {
  display: none;
}

.login-wrapper .login-block.login-block-signup {
  display: block;
}

/*  
    ----------------------------------
    45. Not found
    ----------------------------------
*/
.not-found {
  background: #474747;
  /* Old browsers */
  background: -moz-linear-gradient(left, #474747 0%, #a0a0a0 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #474747 0%, #a0a0a0 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #474747 0%, #a0a0a0 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#a0a0a0',GradientType=1 );
  /* IE6-9 */
  padding: 80px 0;
  text-align: center;
  color: white;
  overflow: hidden;
}

.not-found .title {
  position: relative;
  color: white;
  font-size: 60px;
  margin-bottom: 15px;
  line-height: 0.8;
  z-index: 2;
}

.not-found .title:before {
  content: attr(data-title);
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%) scale(8);
  -ms-transform: translate(-50%, -50%) scale(8);
  -o-transform: translate(-50%, -50%) scale(8);
  -webkit-transform: translate(-50%, -50%) scale(8);
  transform: translate(-50%, -50%) scale(8);
  color: white;
  opacity: 0.05;
  font-size: 40px;
  z-index: -1;
}

@media (min-width: 992px) {
  .not-found {
    padding: 280px 0;
  }
  .not-found .title {
    font-size: 250px;
  }
  .not-found .title:before {
    font-size: 60px;
  }
}

.not-found .subtitle {
  color: white;
}

.not-found a {
  color: white;
  text-decoration: underline;
}

.not-found a:hover {
  color: #006a9f;
}

.not-found p {
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

/*  
    ----------------------------------
    46. Comments
    ----------------------------------
*/
.comments {
  display: block;
  background-color: #eeeeee;
}

.comments h2 {
  font-size: 18px;
}

.comments .fa.active {
  color: #232662;
}

.comments h2 .rating {
  display: inline-block;
}

.comments .rate-box {
  display: block;
  width: 100%;
  background-color: white;
  padding: 20px 30px;
  border: 1px solid #eee;
}

.comments .rate-box strong {
  margin: 0 0 10px 0;
  font-size: 17px;
}

.comments .rate-box .rating {
  padding: 5px 0;
}

@media (min-width: 992px) {
  .comments .rate-box {
    width: 33.333333333%;
    float: left;
  }
}

@media (max-width: 1199px) {
  .comments {
    margin-bottom: 20px;
  }
}

.comments content {
  max-width: 700px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.comments .comment-header {
  padding: 20px 0;
  border-top: 1px solid #dddddd;
  border-bottom: 1px solid #dddddd;
  text-align: center;
}

.comments .comment-header a {
  display: inline-block;
}

.comments .comment-block {
  margin-top: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid #dddddd;
  padding-left: 15px;
  padding-right: 30px;
}

.comments .comment-block:last-child,
.comments .comment-block > .comment-block {
  border-bottom: none;
}

.comments .comment-block > .comment-block {
  background-color: #eeeeee;
  border-top: 1px solid rgba(221, 221, 221, 0.5);
  padding-bottom: 20px;
  padding-top: 20px;
}

@media (min-width: 768px) {
  .comments .comment-block {
    padding-left: 40px;
    padding-right: 40px;
  }
  .comments .comment-block > .comment-block {
    margin-left: 50px;
  }
}

.comments .comment-user {
  display: table;
  width: 100%;
}

.comments .comment-user div {
  display: table-cell;
  vertical-align: middle;
  text-align: left;
}

.comments .comment-user div img {
  border-radius: 100%;
  width: 40px;
}

.comments .comment-user div h5 {
  margin: 0;
}

.comments .comment-user div h5 small {
  display: block;
  padding: 4px 0;
}

.comments .comment-user div:first-child {
  width: 50px;
}

.comments .comment-desc {
  margin-left: 50px;
  margin-top: 10px;
}

.comments .comment-add {
  margin-top: 40px;
  padding: 0 20px 20px;
}

.comments .comment-add .comment-reply-message {
  margin-bottom: 15px;
}

.comments .comment-add .comment-reply-message .title {
  margin-bottom: 10px;
}

.comments .comment-add .btn-circle {
  background-color: black;
  color: white;
}

/*  
    ----------------------------------
    47. About
    ----------------------------------
*/
.about {
  background-color: white;
}

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

.about .text-block .image {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 35px 0;
}

@media (min-width: 768px) {
  .about .text-block .image {
    margin: 35px 0;
  }
}

.about .text-block .image > img {
  width: 100%;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.about .text-block .image .caption {
  position: absolute;
  left: 40px;
  bottom: 40px;
  color: white;
}

.about .text-block .image:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: 1px solid #dddddd;
  -moz-transform: scale(0.95, 0.93);
  -ms-transform: scale(0.95, 0.93);
  -o-transform: scale(0.95, 0.93);
  -webkit-transform: scale(0.95, 0.93);
  transform: scale(0.95, 0.93);
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.about .text-block .image:hover:after {
  border-color: #3a3d45;
}

.about .text-block .image:hover > img {
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.about .text-block .text .gallery {
  margin: 15px 0;
}

.about .text-block .text .gallery .item {
  min-height: 220px;
}

@media (min-width: 768px) {
  .about .text-block .text .gallery {
    margin: 40px 0;
  }

}

.about .text-block h2 {
  margin-top: 15px;
}

@media (min-width: 768px) {
  .about .text-block h2 {
    margin-top: 40px;
  }
}

@media (min-width: 992px) {
  .about .text-block h2 {
    margin-top: 70px;
  }
}

/*  
    ----------------------------------
    48. Shortcodes
    ----------------------------------
*/
.shortcodes {
  padding: 40px 0;
  background-color: #f8f8f8;
}

.shortcodes .buttons .btn {
  display: block;
  width: 100%;
}

.shortcodes .buttons .button-box {
  background-size: cover;
  background-position: center;
  min-height: 200px;
}

.shortcodes .list-group-item {
  padding: 0;
}

.shortcodes .list-group-item a {
  padding: 10px 15px;
  display: block;
  color: #666;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 80%;
}

.shortcodes .list-group-item a.active, .shortcodes .list-group-item a:hover {
  background-color: #ddd;
}

.shortcodes article {
  border: 1px solid #ddd;
  background-color: white;
  padding: 15px;
  display: block;
  margin-bottom: 70px;
}

.shortcodes article h1:first-child + hr {
  border-color: #232662;
}

.shortcodes article .icons figure {
  text-align: center;
  display: block;
  margin-bottom: 20px;
}

.shortcodes article .icons figure .icon {
  font-size: 78px;
}

.shortcodes article .icons figure figcaption {
  font-size: small;
  display: block;
  white-space: nowrap;
}

.shortcodes .well {
  background-color: #666;
  margin: 15px 0;
  background-position: center;
  background-size: cover;
}

.shortcodes .affix {
  top: 90px;
  width: 212px;
}

@media (min-width: 1200px) {
  .shortcodes .affix {
    width: 262px;
  }
}

.shortcodes .icons-wrapper figure {
  text-align: center;
  font-size: 50px;
}

.shortcodes .icons-wrapper figure figcaption {
  font-size: 14px;
}

.shortcodes .show-all {
  float: right;
}

.shortcodes .bs-glyphicons {
  margin: 0 -10px 20px;
  overflow: hidden;
  max-height: 230px;
}

.shortcodes .bs-glyphicons li {
  float: left;
  width: 25%;
  height: 115px;
  padding: 10px;
  font-size: 10px;
  line-height: 1.4;
  text-align: center;
  background-color: #f9f9f9;
  border: 1px solid #fff;
}

.shortcodes .bs-glyphicons .glyphicon {
  margin-top: 5px;
  margin-bottom: 10px;
  font-size: 24px;
}

.shortcodes .bs-glyphicons .glyphicon-class {
  display: block;
  text-align: center;
  word-wrap: break-word;
  /* Help out IE10+ with class names */
}

.shortcodes .bs-glyphicons li:hover {
  color: #fff;
   background-color:#eeeeee;
}

.shortcodes #glyphs.expanded .bs-glyphicons {
  max-height: 100%;
}

.shortcodes .bs-glyphicons-list {
  padding-left: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .shortcodes .bs-glyphicons {
    margin-right: 0;
    margin-left: 0;
  }
  .shortcodes .bs-glyphicons li {
    width: 12.5%;
    font-size: 12px;
  }
}

/*  ----------------------------------
    49. Footer
    ----------------------------------
*/
footer {
  padding: 40px 0;
}

footer a:hover {
  color: rgba(255, 255, 255, 0.6);
}

footer .footer-left,
footer .footer-right {
  text-align: center;
}

@media (min-width: 768px) {
  footer .footer-left {
    text-align: left;
  }
  footer .footer-right {
    text-align: right;
  }

}

footer .footer-social .icons {
  margin-top: 40px;
  text-align: center;
}

footer .footer-social .icons ul {
  margin: 0;
  padding: 0;
}

footer .footer-social .icons ul > li {
  list-style-type: none;
  display: inline-block;
}

footer .footer-social .icons ul > li > a {
  padding: 5px;
}

footer .footer-social .copyright {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
}
/* Flashing */
.hover13 figure:hover img {
	opacity: 1;
	-webkit-animation: flash 1.5s;
	animation: flash 1.5s;
}
@-webkit-keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
@keyframes flash {
	0% {
		opacity: .4;
	}
	100% {
		opacity: 1;
	}
}
.col_mobile{display:block;}
@media (max-width: 991px){
  .shortcodes .icons-wrapper figure figcaption {
    font-size:15px;
}
.col_mobile{width: 100%;display: none;}

.row {
  margin-left:0px;
  margin-right:0px;
}
.booking-wrapper .row {
  margin-left:-15px;
  margin-right:-15px;
}
.zone .row {
  margin-left:-15px;
  margin-right:-15px;
}
}
.month{font-family: "Josefin Sans", sans-serif;display: inline-block; text-transform: capitalize;}
@media (max-width: 1365px){
nav.navigation-main .navigation-block ul li a {padding: 10px;}}
.collapse {display: none;}
/* Version 1.1.0. 
 * Theme credit ElaThemes.com */

footer {
    background-color: #607057;
    color: #ffffff;
}
footer a {
    color: #ffffff;
}
.roomfont{font-size:inherit;}
.roomfontindex{
  font-size: 10px;
  font-weight: 300;
  letter-spacing: 0.4px;
  color: #a0a5a0;
  text-transform: none;
  display: inline-block;
  margin-top: 2px;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {text-align: center;}
.nav-tabs > li > a {text-align: center;}
.hotelicon {font-size: 30px;}
@media (max-width: 991px){
.amenities{font-size:15px;}
.fa-light, .fal {font-size: 17px;}
.plan_icon{max-width: 90px;}
}


@media (min-width: 992px){
.amenities{font-size:30px;}
.fa-light, .fal {font-size:20px;}
.plan_icon{max-width: 177px;}

}


/* ===== pages.css ===== */
/* ============================================================
   pages.css — Page-specific styles
   Extracted from inline <style> blocks across PHP templates.
   Brand palette / global rules live in theme.css.
   ============================================================ */


/* ============================================================
   1. Shared detail-page tweaks
   Used by: dining/*, facilities/*, accommodations/* (17 pages)
   ============================================================ */
@media (min-width: 768px) {
  .cards figure figcaption { min-height: 200px; }
}
.checkul li {
  padding-left: 1.3em;
  list-style: none;
  padding-bottom: 8px;
}


/* ============================================================
   2. Homepage (index.php)
   Prefix: .idx-*, .services-*
   ============================================================ */
  /* ============ Water Park Preview - Premium Dark ============ */
  .idx-waterpark {
    padding: 80px 0;
    background: linear-gradient(135deg, #3d4838 0%, #2a3026 50%, #4a4d44 100%);
    position: relative;
    overflow: hidden;
  }
  .idx-wp-bg-glow-1 {
    position: absolute;
    top: -100px;
    left: -50px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,179,132,0.18) 0%, transparent 70%);
    pointer-events: none;
  }
  .idx-wp-bg-glow-2 {
    position: absolute;
    bottom: -100px;
    right: -40px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(96,112,87,0.20) 0%, transparent 70%);
    pointer-events: none;
  }
  /* Override Bootstrap .container ให้กว้างขึ้นเฉพาะ section นี้ */
  .idx-waterpark > .container {
    max-width: 1500px;
    width: 92%;
  }
  .idx-wp-inner {
    position: relative;
    z-index: 2;
  }

  /* Heading */
  .idx-wp-head {
    text-align: center;
    margin-bottom: 32px;
  }
  .idx-wp-eyebrow {
    font-size: 10px;
    letter-spacing: 6px;
    color: #c9b384;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 12px;
  }
  .idx-wp-title {
    font-size: 44px;
    font-weight: 200;
    color: #fff;
    margin: 0;
    letter-spacing: -1px;
    line-height: 1;
  }
  .idx-wp-subtitle-italic {
    font-size: 22px;
    font-weight: 300;
    color: #c9b384;
    font-style: italic;
    margin: 6px 0 0;
  }
  .idx-wp-subtitle {
    font-size: 13.5px;
    color: rgba(255,255,255,0.75);
    margin: 18px auto 0;
    max-width: 520px;
    line-height: 1.75;
  }

  /* Stats Bar */
  .idx-wp-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: rgba(255,255,255,0.08);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 32px;
  }
  .idx-wp-stat {
    background: rgba(255,255,255,0.03);
    padding: 22px 16px;
    text-align: center;
  }
  .idx-wp-stat-num {
    font-size: 30px;
    font-weight: 200;
    color: #fff;
    line-height: 1;
  }
  .idx-wp-stat-lbl {
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    margin-top: 8px;
    font-weight: 600;
  }

  /* Split Banners */
  .idx-wp-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
  }
  .idx-wp-zone {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    display: block;
    transition: transform 0.4s, border-color 0.3s;
  }
  .idx-wp-zone:hover {
    transform: translateY(-5px);
    border-color: rgba(255,255,255,0.18);
    text-decoration: none;
  }

  /* Banner top of each zone */
  .idx-wp-zone-banner {
    position: relative;
    aspect-ratio: 16/7;
    min-height: 180px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
  }
  .idx-wp-zone-lost .idx-wp-zone-banner {
    background-color: #8a7048;
    background-image: linear-gradient(135deg, #c9b384 0%, #8a7048 50%, #607057 100%);
  }
  .idx-wp-zone-tomo .idx-wp-zone-banner {
    background-color: #6a6d63;
    background-image: linear-gradient(135deg, #a8a89c 0%, #6a6d63 50%, #3d3f38 100%);
  }
  .idx-wp-zone-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.8) 100%);
    transition: background 0.3s;
  }
  .idx-wp-zone:hover .idx-wp-zone-overlay {
    background: linear-gradient(180deg, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.85) 100%);
  }

  .idx-wp-zone-num {
    position: absolute;
    top: 16px;
    left: 20px;
    color: #fff;
    font-size: 10px;
    letter-spacing: 3px;
    opacity: 0.9;
    font-weight: 600;
    z-index: 2;
  }
  .idx-wp-zone-text {
    position: absolute;
    bottom: 18px;
    left: 20px;
    right: 20px;
    color: #fff;
    z-index: 2;
  }
  .idx-wp-zone-name {
    font-size: 26px;
    font-weight: 300;
    color: #fff;
    margin: 0;
    letter-spacing: -0.5px;
  }
  .idx-wp-zone-tag {
    font-size: 12.5px;
    font-style: italic;
    opacity: 0.85;
    margin-top: 3px;
  }

  /* Features Grid (below banner) */
  .idx-wp-features {
    padding: 18px 18px 20px;
  }
  .idx-wp-features-label {
    font-size: 9.5px;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 14px;
  }
  .idx-wp-zone-lost .idx-wp-features-label { color: #c9b384; }
  .idx-wp-zone-tomo .idx-wp-features-label { color: #b8b8ac; }

  .idx-wp-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .idx-wp-feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 10px 4px;
    border-radius: 4px;
    transition: background 0.2s, transform 0.2s;
  }
  .idx-wp-feature:hover {
    background: rgba(255,255,255,0.05);
    transform: translateY(-2px);
  }
  .idx-wp-feature i {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    font-size: 18px;
    margin-bottom: 8px;
    line-height: 1;
  }
  .idx-wp-zone-lost .idx-wp-feature i { color: #c9b384; }
  .idx-wp-zone-tomo .idx-wp-feature i { color: #b8b8ac; }
  .idx-wp-feature span {
    display: block;
    font-size: 10.5px;
    color: rgba(255,255,255,0.85);
    line-height: 1.3;
    font-weight: 500;
  }

  /* Shared Features Bar */
  .idx-wp-shared {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    padding: 14px 20px;
    margin-bottom: 24px;
    text-align: center;
  }
  .idx-wp-shared-label {
    font-size: 9.5px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.5);
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 600;
  }
  .idx-wp-shared-items {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .idx-wp-shared-item {
    font-size: 11.5px;
    color: rgba(255,255,255,0.85);
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .idx-wp-shared-item i {
    font-size: 14px;
    color: #c9b384;
  }

  /* Foot CTA */
  .idx-wp-foot {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  .idx-wp-foot-info {
    font-size: 11px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
    font-weight: 600;
  }
  .idx-wp-button {
    background: #c9b384;
    color: #2a3026 !important;
    padding: 14px 30px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 3px;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
  }
  .idx-wp-button:hover {
    background: #d6c094;
    text-decoration: none;
    transform: translateY(-2px);
  }
  .idx-wp-button i { margin-left: 4px; }

  /* Responsive */
  @media (max-width: 991px) {
    .idx-wp-title { font-size: 36px; }
    .idx-wp-stats { grid-template-columns: repeat(4, 1fr); }
    .idx-wp-stat-num { font-size: 24px; }
    .idx-wp-zone-name { font-size: 22px; }
    .idx-wp-features-grid { grid-template-columns: repeat(4, 1fr); }
    .idx-wp-shared-items { gap: 18px; }
  }
  @media (max-width: 600px) {
    .idx-waterpark { padding: 50px 0; }
    .idx-wp-title { font-size: 30px; }
    .idx-wp-subtitle-italic { font-size: 18px; }
    .idx-wp-stats { grid-template-columns: repeat(2, 1fr); }
    .idx-wp-stat { padding: 16px 12px; }
    .idx-wp-stat-num { font-size: 22px; }
    .idx-wp-split { grid-template-columns: 1fr; }
    .idx-wp-zone-banner { aspect-ratio: 16/9; }
    .idx-wp-zone-name { font-size: 22px; }
    .idx-wp-features { padding: 14px; }
    .idx-wp-features-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .idx-wp-feature i { font-size: 16px; }
    .idx-wp-feature span { font-size: 9.5px; }
    .idx-wp-shared { padding: 12px 16px; }
    .idx-wp-shared-items {
      flex-direction: column;
      gap: 8px;
      align-items: center;
    }
    .idx-wp-foot { flex-direction: column; gap: 14px; }
  }
  /* ============ Services & Facilities Grid ============ */
  .services-facilities {
    padding: 80px 0 100px;
    background: #fff;
  }
  .services-title {
    text-align: center;
    margin: 0 0 50px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 3px;
    color: #6b7c5e;
    text-transform: uppercase;
  }
  .services-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 40px 16px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 20px;
  }
  .services-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    min-height: 90px;
  }
  .services-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 28px;
    line-height: 1;
  }
  .services-icon i {
    color: inherit;
    font-size: inherit;
  }
  .services-label {
    font-size: 13px;
    color: #555;
    line-height: 1.4;
    font-weight: 400;
    letter-spacing: 0.3px;
  }

  /* Tablet: 4 columns */
  @media (max-width: 991px) {
    .services-grid { grid-template-columns: repeat(4, 1fr); gap: 32px 12px; }
    .services-facilities { padding: 60px 0 80px; }
  }

  /* Mobile: 3 columns */
  @media (max-width: 600px) {
    .services-grid { grid-template-columns: repeat(3, 1fr); gap: 28px 8px; padding: 0 12px; }
    .services-title { font-size: 18px; margin: 0 0 35px; letter-spacing: 2px; }
    .services-icon { font-size: 24px; width: 32px; height: 32px; margin-bottom: 10px; }
    .services-label { font-size: 12px; }
  }


/* ============================================================
   3. Time Traveller water-park page
   Prefix: .tt-*, .time-traveller-page
   ============================================================ */
/* ============ Time Traveller — Photo-Heavy Layout ============ */

.time-traveller-page {
  /* Sage CI cosmic background — matches .tt-grd-hero so the whole page reads as
     one dark, immersive surface (explorers + sections sit on it seamlessly). */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(96, 112, 87, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(201, 179, 132, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, #14180f 0%, #1a1f17 60%, #1a1f17 100%);
  color: #e8e6df;
}
/* Section titles/eyebrows sit directly on the dark bg → light them up.
   (Cards keep their own #fff backgrounds, so their inner text is unaffected.) */
.time-traveller-page .tt-sec-title { color: #fff; }
.time-traveller-page .tt-eyebrow { color: #c9b384; }
.time-traveller-page .container { max-width: 1200px; padding: 0 30px; margin: 0 auto; }

/* ============ Common card overlay (gradient bottom) ============ */
.tt-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}
.tt-card-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 22px 22px 20px;
  color: #fff;
  z-index: 2;
}
.tt-card-text h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.3px;
}
.tt-card-text p {
  margin: 5px 0 0;
  font-size: 12px;
  line-height: 1.6;
  opacity: 0.9;
}

/* ============ Common headers ============ */
.tt-section { padding: 50px 0 30px; }
/* ===== Zone backgrounds — strong visual differentiation =====
   Lost World  →  ancient parchment/earth tones (warm, primal)
   Tomorrow Land →  cool steel/silver tones (futuristic, tech)
*/
.tt-section-lost {
  /* Solid parchment colour — adjacent sections blend seamlessly with no
     gradient seams between them. */
  background: #ebe6d8;
  color: #4a3a28;
  position: relative;
}
.tt-section-lost::before {
  /* Subtle hieroglyph-like texture using dots */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 25% 20%, rgba(138, 112, 72, 0.20), transparent),
    radial-gradient(1.5px 1.5px at 70% 40%, rgba(138, 112, 72, 0.15), transparent),
    radial-gradient(1px 1px at 45% 70%, rgba(138, 112, 72, 0.18), transparent),
    radial-gradient(1px 1px at 85% 80%, rgba(138, 112, 72, 0.15), transparent);
  pointer-events: none;
  opacity: 0.6;
}
.tt-section-lost > .container { position: relative; z-index: 1; }

.tt-section-tomo {
  /* Solid steel colour — adjacent sections blend seamlessly. */
  background: #e6eaee;
  color: #2a3340;
  position: relative;
}
.tt-section-tomo::before {
  /* Faint tech grid lines */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(90, 100, 115, 0.08) 1px, transparent 1px),
    linear-gradient(0deg,  rgba(90, 100, 115, 0.06) 1px, transparent 1px);
  background-size: 60px 60px, 60px 60px;
  pointer-events: none;
  opacity: 0.5;
}
.tt-section-tomo > .container { position: relative; z-index: 1; }
.tt-sec-head { text-align: center; margin-bottom: 28px; }
.tt-eyebrow {
  font-size: 10px;
  letter-spacing: 4px;
  color: #8a7048;
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 8px;
  display: inline-block;
}
.tt-eyebrow-lost  { color: #607057; }
.tt-eyebrow-tomo  { color: #5a5d54; }
.tt-eyebrow-caves { color: #c9b384; }
.tt-eyebrow-futsal { color: #607057; }
.tt-sec-title {
  font-size: 28px;
  font-weight: 200;
  margin: 0;
  letter-spacing: -0.5px;
  color: #2a3026;
}
.tt-sec-title-dark { color: #fff; }

/* ============ 1. CINEMATIC HERO ============ */
.tt-hero {
  position: relative;
  min-height: 480px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.tt-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.85) 100%);
}
.tt-hero-content {
  position: relative;
  z-index: 2;
  padding: 50px 30px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 30px;
  width: 100%;
  color: #fff;
}
.tt-hero-eyebrow {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  opacity: 0.9;
  font-weight: 600;
}
.tt-hero-title {
  font-size: 56px;
  font-weight: 200;
  letter-spacing: -1px;
  margin: 0;
  line-height: 1;
  color: #fff;
}
.tt-hero-tagline {
  font-size: 22px;
  font-style: italic;
  margin: 8px 0 16px;
  opacity: 0.85;
  font-weight: 300;
}
.tt-hero-desc {
  font-size: 14px;
  line-height: 1.8;
  opacity: 0.85;
  max-width: 480px;
  margin: 0;
}
.tt-hero-stats {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}
.tt-hero-stat-num {
  font-size: 32px;
  font-weight: 200;
  line-height: 1;
}
.tt-hero-stat-lbl {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 6px;
  opacity: 0.8;
  font-weight: 600;
}

/* ============ 2. ZONE BANNERS (Split) ============ */
.tt-zone-banners {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;          /* override default <section> padding */
}

/* ===== Animated molten-gold seam between Lost World and Tomorrow Land =====
   A glowing molten-gold beam flows down the centre seam between the two
   zone banners — an animated champagne/bronze gradient with a warm glow.
   Kept strictly within the CI palette (no orange/red): bronze deep →
   antique gold → champagne. Sits over dark photo banners, so antique
   gold reads correctly.
*/
.tt-zone-banners::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  /* Molten lava — vivid orange/red (intentionally OUTSIDE the CI palette,
     approved by the site owner specifically for this Lost World / Tomorrow
     Land lava divider). */
  background:
    linear-gradient(180deg,
      #7a1505 0%,
      #c5300a 12%,
      #f24405 28%,
      #ff7a18 42%,
      #ffc14d 52%,
      #ff7a18 62%,
      #f24405 78%,
      #c5300a 90%,
      #7a1505 100%);
  background-size: 100% 300%;
  box-shadow:
    0 0 12px rgba(255, 110, 30, 0.85),
    0 0 28px rgba(242, 68, 5, 0.60),
    0 0 60px rgba(197, 48, 10, 0.40);
  animation: tt-lava-flow 12s linear infinite,
             tt-lava-pulse 5s ease-in-out infinite alternate;
  z-index: 5;
  pointer-events: none;
  border-radius: 4px;
}


@keyframes tt-lava-flow {
  /* Animate the gradient UPWARDS relative to viewport so the visible
     colour bands appear to flow DOWNWARDS — matches gravity. */
  0%   { background-position: 0% 0%; }
  100% { background-position: 0% -300%; }
}
@keyframes tt-lava-pulse {
  0%   { opacity: 0.85; filter: brightness(1) saturate(1); }
  100% { opacity: 1;    filter: brightness(1.3) saturate(1.3); }
}

@media (max-width: 767px) {
  /* On mobile the banners stack vertically — turn the lava into a
     horizontal flowing stream between the two stacked banners. */
  .tt-zone-banners {
    grid-template-columns: 1fr;
  }
  .tt-zone-banners::before {
    top: 50%;
    bottom: auto;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    width: auto;
    height: 6px;
    background:
      linear-gradient(90deg,
        #7a1505 0%, #c5300a 12%, #f24405 28%, #ff7a18 42%, #ffc14d 52%,
        #ff7a18 62%, #f24405 78%, #c5300a 90%, #7a1505 100%);
    background-size: 300% 100%;
    animation: tt-lava-flow-h 12s linear infinite,
               tt-lava-pulse 5s ease-in-out infinite alternate;
  }
  @keyframes tt-lava-flow-h {
    0%   { background-position: 0% 0%; }
    100% { background-position: 300% 0%; }
  }
}
.tt-zone-banner {
  position: relative;
  aspect-ratio: 16 / 9;        /* uniform cinematic ratio for both zones */
  min-height: 0;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}
.tt-zone-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.1) 30%, rgba(0,0,0,0.85) 100%);
}
.tt-zone-banner-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 36px 32px 32px;
  color: #fff;
  z-index: 2;
}
.tt-zone-banner-num {
  font-size: 11px;
  letter-spacing: 5px;
  text-transform: uppercase;
  opacity: 0.9;
  margin-bottom: 8px;
  font-weight: 600;
}
.tt-zone-banner-title {
  font-size: 40px;
  font-weight: 300;
  margin: 0;
  letter-spacing: -0.5px;
  color: #fff;
}
.tt-zone-banner-tag {
  font-size: 14px;
  font-style: italic;
  margin: 6px 0 14px;
  opacity: 0.85;
}
.tt-zone-banner-desc {
  font-size: 13px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.85;
  max-width: 420px;
}

/* ============ 3 & 7. TOWER SLIDES GRID ============ */
.tt-slides-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
}
.tt-slide-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.18);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tt-slide-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(42, 48, 38, 0.30);
}
.tt-floor-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,0.95);
  padding: 5px 11px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  z-index: 3;
}
.tt-floor-lost { color: #607057; }
.tt-floor-tomo { color: #5a5d54; }

/* ============ 4 & 8. POOLS MOSAIC ============ */
.tt-pool-mosaic {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 180px 180px;
  gap: 10px;
  margin-bottom: 10px;
}
.tt-pool-card {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.16);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tt-pool-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 22px 50px rgba(42, 48, 38, 0.26);
}
.tt-pool-large { grid-row: 1 / 3; }
.tt-pool-small1 { grid-column: 2; grid-row: 1; }
.tt-pool-small2 { grid-column: 2; grid-row: 2; }
.tt-pool-small1 .tt-card-text,
.tt-pool-small2 .tt-card-text { padding: 16px 16px 14px; }
.tt-pool-small1 .tt-card-text h4,
.tt-pool-small2 .tt-card-text h4 { font-size: 15px; }
.tt-pool-wide {
  height: 160px;
}

/* ============ 5. CAVES (Dark theme) ============ */
.tt-caves-section { padding: 60px 0 40px; }
.tt-caves-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.tt-cave-card {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.40);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tt-cave-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}
.tt-cave-text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px 12px 14px;
  text-align: center;
  z-index: 2;
}
.tt-cave-num {
  font-size: 10px;
  letter-spacing: 2px;
  color: #c9b384;
  font-weight: 600;
  margin-bottom: 3px;
}
.tt-cave-text h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
}

/* ============ 6. SHELTERS ============ */
.tt-shelters-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 14px;
  align-items: stretch;
}
.tt-shelters-image {
  position: relative;
  min-height: 260px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.16);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tt-shelters-image:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 50px rgba(42, 48, 38, 0.26);
}
.tt-shelters-image .tt-card-text { padding: 24px 24px 22px; }
.tt-shelters-image .tt-card-text h4 { font-size: 22px; }
.tt-shelters-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 8px;
}
.tt-shelter {
  background: #fff;
  border: 1px solid rgba(232, 224, 200, 0.8);
  border-radius: 16px;
  box-shadow: 0 8px 22px rgba(42, 48, 38, 0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  cursor: pointer;
}
.tt-shelter:hover {
  transform: translateY(-4px);
  background: linear-gradient(135deg, #f5f3ed 0%, #ebe6d8 100%);
  box-shadow: 0 16px 36px rgba(42, 48, 38, 0.16);
}
.tt-shelter i { font-size: 18px; color: #607057; }
.tt-shelter span { font-size: 13px; color: #607057; font-weight: 700; letter-spacing: 1px; }

/* ============ 9. BEYOND THE WATER ============ */
.tt-beyond-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.tt-beyond-card {
  position: relative;
  min-height: 220px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.16);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tt-beyond-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(42, 48, 38, 0.26);
}
.tt-token-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: #c9b384;
  color: #2a3026;
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  z-index: 3;
}
.tt-mirror-card {
  position: relative;
  height: 200px;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.16);
}

/* ============ 10. SHARED FEATURES ============ */
.tt-shared-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.tt-shared-card {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.14);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tt-shared-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 50px rgba(42, 48, 38, 0.24);
}

/* ============ 11. GALLERY ============ */
.tt-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 180px 180px;
  gap: 10px;
}
.tt-gallery-item {
  border-radius: 18px;
  overflow: hidden;
  display: block;
  box-shadow: 0 10px 28px rgba(42, 48, 38, 0.14);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tt-gallery-item:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 45px rgba(42, 48, 38, 0.24);
}
.tt-gallery-item-0 { grid-row: 1 / 3; }
.tt-gallery-item-1 { grid-column: 2; grid-row: 1; }
.tt-gallery-item-2 { grid-column: 3; grid-row: 1; }
.tt-gallery-item-3 { grid-column: 2; grid-row: 2; }
.tt-gallery-item-4 { grid-column: 3; grid-row: 2; }
.tt-gallery-item-5 { display: none; }

/* ============ 12. FUTSAL ============ */
.tt-futsal-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  background: #fff;
  border: 1px solid rgba(232, 224, 200, 0.6);
  border-radius: 22px;
  overflow: hidden;
  min-height: 320px;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.10);
}
.tt-futsal-image {
  position: relative;
  min-height: 320px;
}
.tt-futsal-text {
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tt-futsal-text .tt-eyebrow-futsal { margin-bottom: 10px; }
.tt-futsal-name { font-size: 24px; font-weight: 400; color: #2a3026; margin: 0 0 4px; }
.tt-futsal-tag { font-size: 13px; font-style: italic; color: #7a7060; margin-bottom: 16px; }
.tt-futsal-text p { font-size: 13px; line-height: 1.75; color: #4a4538; margin: 0 0 16px; }
.tt-futsal-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tt-tag {
  font-size: 10px;
  background: #ebe6d8;
  color: #5a5040;
  padding: 4px 10px;
  border-radius: 3px;
  letter-spacing: 0.3px;
}
.tt-futsal-hours { font-size: 11px; color: #7a7060; letter-spacing: 1px; }
.tt-futsal-hours i { margin-right: 4px; }

/* ============ 13. SAFETY ============ */
.tt-safety-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.tt-safety-card {
  background: #fff;
  border: 1px solid #e0dcc8;
  border-radius: 8px;
  padding: 26px;
}
.tt-safety-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e0dcc8;
}
.tt-safety-head i { font-size: 22px; }
.tt-safety-bring .tt-safety-head i { color: #607057; }
.tt-safety-rules .tt-safety-head i { color: #a06850; }
.tt-safety-head h4 {
  margin: 0;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
}
.tt-safety-bring .tt-safety-head h4 { color: #607057; }
.tt-safety-rules .tt-safety-head h4 { color: #a06850; }
.tt-safety-card ul { margin: 0; padding-left: 18px; }
.tt-safety-card li {
  font-size: 12.5px;
  color: #4a4538;
  line-height: 1.9;
  padding: 2px 0;
}

/* ============ 14. CTA ============ */
.tt-cta { padding: 40px 0 80px; }
.tt-cta-bar {
  background: #2a3026;
  padding: 30px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  border-radius: 8px;
}
.tt-cta-info { display: flex; flex-direction: column; }
.tt-cta-eyebrow {
  font-size: 10px;
  letter-spacing: 2.5px;
  color: #c9b384;
  text-transform: uppercase;
  margin-bottom: 6px;
  font-weight: 600;
}
.tt-cta-value { font-size: 17px; color: #fff; }
.tt-cta-button {
  background: #fff;
  color: #2a3026 !important;
  border: none;
  padding: 14px 28px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.2s;
}
.tt-cta-button:hover { background: #ebe6d8; text-decoration: none; }
.tt-cta-button i { margin-left: 6px; }

/* ============ RESPONSIVE - TABLET ============ */
@media (max-width: 991px) {
  .tt-hero { min-height: 400px; }
  .tt-hero-content { flex-direction: column; align-items: flex-start; padding: 36px 30px; }
  .tt-hero-title { font-size: 42px; }
  .tt-hero-tagline { font-size: 18px; }
  .tt-hero-stats { gap: 24px; margin-top: 8px; }

  .tt-zone-banners { grid-template-columns: 1fr; }
  .tt-zone-banner-title { font-size: 32px; }

  .tt-slides-grid { grid-template-columns: 1fr 1fr 1fr; }
  .tt-caves-grid { grid-template-columns: repeat(5, 1fr); }
  .tt-shared-grid { grid-template-columns: 1fr; }
  .tt-beyond-grid { grid-template-columns: 1fr; }
  .tt-shelters-row { grid-template-columns: 1fr; }
  .tt-futsal-card { grid-template-columns: 1fr; }
  .tt-futsal-image { min-height: 220px; }
  .tt-safety-grid { grid-template-columns: 1fr; }

  .tt-sec-title { font-size: 24px; }
}

/* ============ RESPONSIVE - MOBILE ============ */
@media (max-width: 600px) {
  .time-traveller-page .container { padding: 0 16px; }

  .tt-hero { min-height: 360px; }
  .tt-hero-title { font-size: 32px; }
  .tt-hero-tagline { font-size: 15px; }
  .tt-hero-desc { font-size: 12.5px; }
  .tt-hero-stats { gap: 16px; }
  .tt-hero-stat-num { font-size: 22px; }

  .tt-zone-banner { min-height: 280px; }
  .tt-zone-banner-content { padding: 24px 20px 22px; }
  .tt-zone-banner-title { font-size: 28px; }

  .tt-section { padding: 36px 0 18px; }
  .tt-sec-title { font-size: 20px; }
  .tt-eyebrow { font-size: 9px; letter-spacing: 3px; }

  .tt-slides-grid { grid-template-columns: 1fr; gap: 10px; }
  .tt-slide-card { aspect-ratio: 16/10; }

  .tt-pool-mosaic { grid-template-columns: 1fr; grid-template-rows: 200px 140px 140px; }
  .tt-pool-large { grid-row: 1; grid-column: 1; }
  .tt-pool-small1 { grid-column: 1; grid-row: 2; }
  .tt-pool-small2 { grid-column: 1; grid-row: 3; }
  .tt-pool-wide { height: 140px; }

  .tt-caves-grid { grid-template-columns: repeat(3, 1fr); }
  .tt-caves-grid > :nth-child(4), .tt-caves-grid > :nth-child(5) { grid-column: span 1; }

  .tt-shelters-image { min-height: 200px; }
  .tt-shelters-grid { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 60px); }

  .tt-gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 140px 140px 140px;
  }
  .tt-gallery-item-0 { grid-row: 1; grid-column: 1 / 3; }
  .tt-gallery-item-1 { grid-column: 1; grid-row: 2; }
  .tt-gallery-item-2 { grid-column: 2; grid-row: 2; }
  .tt-gallery-item-3 { grid-column: 1; grid-row: 3; }
  .tt-gallery-item-4 { grid-column: 2; grid-row: 3; }

  .tt-futsal-text { padding: 24px 20px; }
  .tt-futsal-name { font-size: 20px; }

  .tt-cta-bar { flex-direction: column; align-items: stretch; padding: 24px 20px; text-align: center; }
}


/* ============================================================
   4. Blog sidebar / static pages
   Prefix: .blog-item, .blog-sidebar
   Used by: pages/* (via includes/blog-sidebar.php)
   ============================================================ */
/* ============ Blog Item Page Styles ============ */

/* Container ของ blog item - ปรับ padding บนเพื่อให้เริ่มอ่านได้ทันที */
.blog.blog-item {
  padding: 60px 0;
  background: #fff;
}

/* ============ Main Content Styles ============ */
.blog-item .content {
  padding-right: 30px;
}
.blog-item .content h1 {
  margin: 0 0 24px;
  padding: 0;
  font-size: 28px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: #222;
  text-transform: none;
  border: none;
}
.blog-item .content h4 {
  margin: 36px 0 14px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: #2a3026;
  text-transform: none;
}
@media (min-width: 992px) {
  .blog-item .content h4 { font-size: 18px; }
}
.blog-item .content h4:first-of-type {
  margin-top: 28px;
}
.blog-item .content p {
  font-size: 15px;
  line-height: 1.75;
  color: #4a4538;
  margin: 0 0 16px;
}
.blog-item .content ul {
  padding-left: 20px;
  margin: 8px 0 16px;
}
.blog-item .content li {
  font-size: 15px;
  line-height: 1.75;
  color: #4a4538;
  padding: 3px 0;
}
@media (min-width: 992px) {
  .blog-item .content p,
  .blog-item .content li { font-size: 17px; }
}
.blog-item .content a {
  color: #607057;
  text-decoration: underline;
}
.blog-item .content a:hover {
  color: #2a3026;
}
.blog-item .content i.fa-light,
.blog-item .content i.fa-duotone {
  font-size: 15px;
  color: #8a7048;
  margin-right: 6px;
}
.blog-item .content strong {
  font-weight: 600;
  color: #2a3026;
}

/* Responsive */
@media (max-width: 767px) {
  .blog-item .content {
    padding-right: 0;
  }
  .blog-item .content h1 {
    font-size: 24px;
  }
  .blog.blog-item {
    padding: 30px 0;
  }
}

/* ============ Sidebar Styles ============ */
.blog-sidebar {
  font-family: inherit;
  padding-top: 0;
}

/* Generic card */
.sidebar-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 16px;
}

/* Heading style (small uppercase) */
.sidebar-heading {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #888;
  padding: 0;
  border: none;
}

/* Contact items */
.sidebar-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 7px 0;
  font-size: 13px;
  line-height: 1.55;
  color: #444;
}
.sidebar-item i {
  font-size: 14px;
  color: #aaa;
  flex-shrink: 0;
  margin-top: 3px;
  width: 16px;
  text-align: center;
}
.sidebar-item a {
  color: #444;
  text-decoration: none;
  transition: color 0.2s;
}
.sidebar-item a:hover {
  color: #000;
  text-decoration: underline;
}
.sidebar-email {
  word-break: break-all;
}

/* CTA Block */
.sidebar-cta {
  background: #2c2c2a;
  color: #fff;
  padding: 22px 20px;
  border-radius: 4px;
  text-align: center;
  margin-bottom: 16px;
}
.sidebar-cta-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #fff;
  padding: 0;
  border: none;
}
.sidebar-cta-text {
  margin: 0 0 16px;
  font-size: 11.5px;
  color: rgba(255,255,255,0.7);
  line-height: 1.5;
}
.sidebar-cta-btn {
  display: block;
  background: #fff;
  color: #2c2c2a !important;
  padding: 11px 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.sidebar-cta-btn:hover {
  background: #e8e8e8;
  text-decoration: none;
}

/* Quick Links */
.sidebar-links {
  display: flex;
  flex-direction: column;
}
.sidebar-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  font-size: 13px;
  color: #444;
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
  transition: padding 0.2s;
}
.sidebar-links a:last-child {
  border-bottom: none;
}
.sidebar-links a i {
  font-size: 12px;
  color: #bbb;
  transition: color 0.2s, transform 0.2s;
}
.sidebar-links a:hover {
  padding-left: 4px;
  color: #000;
  text-decoration: none;
}
.sidebar-links a:hover i {
  color: #333;
  transform: translateX(2px);
}

/* Responsive: on mobile, add top margin */
@media (max-width: 767px) {
  .blog-sidebar {
    margin-top: 30px;
    padding-top: 0;
  }
}


/* ============================================================
   5. Conference centre (conventions/conference-centre.php)
   ============================================================ */
.table-bordered td, .table-bordered th {
  text-align: center;
}
.image-blocks .btn {
  display: block;
  padding: 10px 16px;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.image-blocks .btn.btn-sm {
  padding: 8px 14px;
  font-size: 13px;
}
@media (max-width: 600px) {
  .image-blocks .btn { font-size: 12px; }
}

/* Dining/section header: give intro text + CTA more breathing room
   so the dining cards (with negative margin-top) don't overlap them. */
.image-blocks .section-header {
  min-height: 360px;
  padding-top: 60px;
  padding-bottom: 100px;
  margin-bottom: -60px;
  position: relative;
  background-size: cover;
  background-position: center;
}
.image-blocks .section-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  pointer-events: none;
  z-index: 1;
}
.image-blocks .section-header > * {
  position: relative;
  z-index: 2;
}
/* Lift the dining cards above the section-header overlay so the dark film
   never bleeds across the image (negative margin-top causes overlap). */
.image-blocks > .container,
.image-blocks .blocks {
  position: relative;
  z-index: 3;
}

/* ============================================================
   13. Footer — mesh gradient + subtle diagonal stripes (CSS-only)
   ============================================================ */
footer {
  position: relative;
  background-color: #e4e4e4 !important;
  background-image:
    /* diagonal stripes — very subtle */
    repeating-linear-gradient(
      135deg,
      rgba(103, 118, 94, 0.05) 0 1px,
      transparent 1px 14px
    ),
    /* mesh: champagne glow top-left */
    radial-gradient(
      ellipse at 15% 10%,
      rgba(193, 193, 193, 0.35),
      transparent 55%
    ),
    /* mesh: sage glow bottom-right */
    radial-gradient(
      ellipse at 85% 90%,
      rgba(96, 112, 87, 0.25),
      transparent 55%
    ),
    /* mesh: soft warm light center */
    radial-gradient(
      circle at 50% 30%,
      rgba(229, 229, 229, 0.5),
      transparent 60%
    );
  color: #4a4538;


  
}
footer a { color: #2a3026; }
footer a:hover { color: #607057; }
footer .footer-social .copyright,
footer .footer-left,
footer .footer-right {
  color: #5a5040;
}

/* Quick Links list — remove default bullets/padding so items stay
   centred on mobile (matches the other footer columns). */
footer .footer-left ul,
footer .footer-right ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
footer .footer-left ul li,
footer .footer-right ul li {
  margin: 0 0 6px 0;
}

/* ============================================================
   14. Page Header — sage→deep gradient (3-stop)
   ============================================================ */
.page-header {
  background-color: #3d4a39;
  background-image: linear-gradient(
    135deg,
    #54654e 0%,
    #3d4a39 55%,
    #273025 100%
  );
}

/* ============================================================
   15. Expandable text block (Read more / Read less)
   Usage:
     <div class="expand-block">
       <div class="expand-content">
         <p>...</p>
         <p>...</p>
       </div>
       <button class="expand-toggle"
               data-more="Read more" data-less="Read less">Read more</button>
     </div>
   ============================================================ */
.expand-block {
  position: relative;
}
.expand-block .expand-content {
  position: relative;
  max-height: 7em;
  overflow: hidden;
  transition: max-height 0.6s ease;
}
.expand-block .expand-content::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 4em;
  background: linear-gradient(to bottom, rgba(245,243,237,0), rgb(255, 255, 255) 90%);
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.expand-block.is-open .expand-content {
  max-height: 200em;
}
.expand-block.is-open .expand-content::after {
  opacity: 0;
}
.expand-toggle {
  display: inline-block;
  margin-top: 14px;
  padding: 8px 22px;
  background: transparent;
  border: 1px solid rgba(96, 112, 87, 0.5);
  color: #607057;
  font-family: "Josefin Sans", sans-serif;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  border-radius: 2px;
  transition: all 0.3s ease;
}
.expand-toggle:hover,
.expand-toggle:focus {
  background: #607057;
  color: #fff;
  border-color: #607057;
  outline: none;
}
/* When the section background isn't cream, override the fade to match */
.expand-block[data-fade="dark"] .expand-content::after {
  background: linear-gradient(to bottom, rgba(39,48,37,0), rgba(39,48,37,1) 90%);
}
/* Accommodations preview section uses #eeeeee */
.rooms.rooms-widget .expand-block .expand-content::after {
  background: linear-gradient(to bottom, rgba(238,238,238,0), rgba(238,238,238,1) 90%);
}

/* Services grid expand — show ~2 rows of icons when collapsed */
.expand-services .expand-content {
  max-height: 280px;
}
.expand-services.is-open .expand-content {
  max-height: 3000px;
}
@media (max-width: 767px) {
  .expand-services .expand-content {
    max-height: 360px;
  }
}

/* About Section (index hotel description) — short preview height */
.expand-about .expand-content {
  max-height: 8em;
}
.expand-about.is-open .expand-content {
  max-height: 4000px;
}

/* Submenu arrow — point to the active menu item (desktop only) */
@media (min-width: 992px) {
  nav.navigation-main .navigation-block > ul > li {
    position: relative;
  }
  /* Hide the arrow that was anchored to the dropdown's left edge */
  nav.navigation-main .navigation-block > ul li > ul:after,
  nav.navigation-main .navigation-block > ul.navigation-right li > ul:after {
    display: none;
  }
  /* Draw a new arrow centered under the hovered/active menu item
     — only when the item actually has a dropdown submenu */
  nav.navigation-main .navigation-block > ul > li.hovered:has(> ul)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border: 10px solid transparent;
    border-bottom-color: #fff;
    pointer-events: none;
    z-index: 1000;
  }
}

/* Room card bullet icons — sage themed, fixed width for tidy alignment */
.room-bullet-ico {
  color: #607057;
  width: 20px;
  margin-right: 8px;
  text-align: center;
  font-size: 14px;
  vertical-align: middle;
}

/* Inline info tooltip (e.g. next to "Capacity 2 adults 1 child ⓘ") */
.info-tip {
  position: relative;
  display: inline-block;
  margin-left: 4px;
  color: #607057;
  cursor: help;
  vertical-align: middle;
  font-size: 13px;
}
.info-tip::after {
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  background: #2a3026;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  font-family: 'Josefin Sans', sans-serif;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  padding: 8px 12px;
  border-radius: 4px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
  z-index: 20;
}
.info-tip::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #2a3026;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 20;
}
.info-tip:hover::after,
.info-tip:focus::after,
.info-tip:hover::before,
.info-tip:focus::before {
  opacity: 1;
  visibility: visible;
}
.info-tip:hover::after,
.info-tip:focus::after {
  transform: translateX(-50%) translateY(-2px);
}

/* Section footnote (e.g. * Kids under 7 stay free across all rooms) */
.section-footnote {
  margin: 26px auto 0;
  padding: 14px 20px 0;
  font-size: 13px;
  font-style: italic;
  color: #7a7060;
  text-align: center;
  border-top: 1px solid rgba(122, 112, 96, 0.18);
}
.section-footnote a {
  color: #607057;
  text-decoration: underline;
}
.section-footnote a:hover {
  color: #2a3026;
}
.image-blocks .section-header .container > p {
  color: #fff;
  font-size: 16px;
  line-height: 1.7;
  max-width: 720px;
  margin: 12px auto 18px;
}
.image-blocks .section-header .container > p:last-child {
  margin-bottom: 0;
}
.image-blocks .section-header .btn.btn-clean-dark {
  display: inline-block;
  color: #fff !important;
  border-color: rgba(255,255,255,0.6);
}
.image-blocks .section-header .btn.btn-clean-dark:hover {
  background-color: #fff;
  color: #2a3026 !important;
  border-color: #fff;
}
@media (min-width: 992px) {
  .image-blocks .section-header {
    min-height: 520px;
    padding-top: 120px;
    padding-bottom: 140px;
    margin-bottom: -100px;
  }
  .image-blocks .section-header .container > p {
    font-size: 18px;
  }
}

/* ============================================================
   11. Accommodations Preview — edge-to-edge, larger images
   (index.php → section.rooms.rooms-widget)
   ============================================================ */
.rooms.rooms-widget > .container:last-child {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}
.rooms.rooms-widget .owl-rooms {
  margin-left: 0;
  margin-right: 0;
}
.rooms.rooms-widget .owl-rooms .item {
  padding: 0;
}
.rooms.rooms-widget article {
  margin: 12px 6px;
  background-color: #fff;
  border: 1px solid rgba(232, 224, 200, 0.6);
  border-radius: 22px !important;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.08) !important;
  overflow: hidden;
  position: relative;
  z-index: 1;
  transform: scale(1);
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.rooms.rooms-widget article:hover {
  z-index: 10;
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 22px 50px rgba(42, 48, 38, 0.18) !important;
}
.rooms.rooms-widget .owl-item {
  position: relative;
  transition: z-index 0s linear 0.7s;
}
.rooms.rooms-widget .owl-item:hover {
  z-index: 10;
  transition: z-index 0s;
}
.rooms.rooms-widget article .image {
  overflow: hidden;
  position: relative;
  margin: 14px 14px 0 14px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(42, 48, 38, 0.12);
}
.rooms.rooms-widget article .image img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center center;
  will-change: transform;
}
.rooms.rooms-widget article:hover .image img {
  transform: scale(1.06);
}

/* ============================================================
   12. Attractions section — dark overlay on background image
   (index.php → section.quotes.quotes-slider)
   ============================================================ */
.quotes.quotes-slider {
  position: relative;
  background-size: cover;
  background-position: center;
}
.quotes.quotes-slider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.75);
  pointer-events: none;
  z-index: 1;
}
.quotes.quotes-slider > * {
  position: relative;
  z-index: 2;
}
.rooms.rooms-widget article .details {
  background-color: transparent;
  padding: 18px 20px 24px;
}
.rooms.rooms-widget article .details .text .title a {
  color: #2a3026;
}
@media (max-width: 991px) {
  .row {
    margin-left: 10px;
    margin-right: 10px;
  }
}
.text-nowrap {
  white-space: nowrap !important;
}
.mr-3 { margin-right: 1rem !important; }
.mr-1 { margin-right: 0.25rem !important; }
.room-facilities figure {
  display: inline-block;
  margin: 10px;
  text-align: center;
  vertical-align: top;
}
.blocks-left {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  border: 1px solid #eee;
}
.blocks-left .item {
  flex: 1 1 50%;
  padding: 30px;
  min-width: 300px;
}
.blocks-left .image {
  flex: 1 1 50%;
  aspect-ratio: 16 / 9;
  min-height: 0;
  background-size: cover;
  background-position: center;
}
.blocks-left .image img {
  display: none;
}

/* ============================================================
   Override theme.css absolute-positioned image on desktop
   so .blocks-left/.blocks-right images keep 16:9 ratio
   ============================================================ */
@media (min-width: 992px) {
  .image-blocks .blocks.blocks-left,
  .image-blocks .blocks.blocks-right {
    display: flex !important;
    align-items: flex-start;
    position: relative;
    min-height: 0;
  }
  .image-blocks .blocks.blocks-left .item,
  .image-blocks .blocks.blocks-right .item {
    flex: 1 1 50%;
    margin-left: 0 !important;
    padding: 30px !important;
  }
  .image-blocks .blocks.blocks-left .image,
  .image-blocks .blocks.blocks-right .image {
    flex: 0 0 50%;
    position: relative !important;
    width: 50% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    right: auto !important;
    top: auto !important;
    align-self: center;
  }
  /* blocks-left → image first (left), item second (right) */
  .image-blocks .blocks.blocks-left .image { order: 1; }
  .image-blocks .blocks.blocks-left .item  { order: 2; }
  /* blocks-right → item first (left), image second (right) */
  .image-blocks .blocks.blocks-right .item  { order: 1; }
  .image-blocks .blocks.blocks-right .image { order: 2; }
}


/* ============================================================
   6. Weddings (conventions/weddings.php)
   ============================================================ */
@media (min-width: 768px) {
  .cards figure figcaption { min-height: 200px; }
}


/* ============================================================
   7. Local attractions (pages/local-attractions.php)
   ============================================================ */
.att.box {
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}
.att.box:last-child {
  border-bottom: none;
}
.att.box p {
  margin: 5px 0;
}
.att.box a {
  color: #333;
  text-decoration: none;
}
.att.box a:hover {
  text-decoration: underline;
}
.blog-item h4 {
  margin-top: 40px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #333;
}
.blog-item h4:first-of-type {
  margin-top: 20px;
}


/* ============================================================
   8. Token redemption (pages/token-redemption.php)
   ============================================================ */
.blog-item .img-responsive {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}
.blog-item .h1.title {
  margin-bottom: 30px;
  text-align: center;
}


/* ============================================================
   9. Language switcher (includes/nav-menu.php)
   ============================================================ */
.lang-switcher .lang-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 140px;
  background: #fff;
  border: 1px solid #e0dcc8;
  border-radius: 4px;
  list-style: none;
  margin: 0;
  padding: 6px 0;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.lang-switcher .lang-dropdown.open,
.lang-switcher:hover .lang-dropdown,
.lang-switcher:focus-within .lang-dropdown { display: block; }

/* Invisible safety bridge so cursor can move from trigger to dropdown
   without the menu closing in the gap between them. */
.lang-switcher::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  width: 100%;
  height: 8px;
}
.lang-switcher .lang-dropdown li { margin: 0; padding: 0; }
.lang-switcher .lang-dropdown li a {
  display: block;
  padding: 8px 16px;
  color: #4a4538;
  font-size: 13px;
  text-decoration: none;
  border: 0;
}
.lang-switcher .lang-dropdown li a:hover { background: #f5f3ed; color: #607057; }
.lang-switcher .lang-dropdown li.active a { color: #607057; font-weight: 700; }

nav.navigation-top .box > a { color: #fff; }
nav.navigation-top .box > a:hover { color: #c9b384; }
nav.navigation-top .box {
  font-size: 13px;             /* match main nav size */
  font-weight: 400;
  letter-spacing: 0.5px;
}


/* ============================================================
   16. Facilities Highlights — Bento Grid layout
   ============================================================ */
.bento-section { padding-bottom: 60px; }
/* Wider container for HOTEL HIGHLIGHTS (~ +30% over default 1300px) */
.bento-section > .container,
.bento-section .section-header .container {
  max-width: 1690px;
  width: calc(100% - 40px);
}

/* ===== Facility Highlights — 16:9 card slider + lightbox ===== */
.fh-wrap { position: relative; }
.fh-track {
  display: flex; gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; padding: 4px 2px 16px; scrollbar-width: none;
}
.fh-track::-webkit-scrollbar { display: none; }

.fh-card {
  position: relative; flex: 0 0 auto;
  width: calc((100% - 32px) / 3);            /* 3 per view (desktop) */
  aspect-ratio: 16 / 9;                       /* 16:9 cards */
  scroll-snap-align: start;
  overflow: hidden; border-radius: 14px;
  background: #2a3026; color: #fff; text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s;
}
.fh-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background-image: var(--bg-url); background-size: cover; background-position: center;
  transition: transform .7s cubic-bezier(.22,1,.36,1);
}
.fh-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.32); }
.fh-card:hover::before { transform: scale(1.07); }
.fh-card-grad {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0) 32%, rgba(0,0,0,.80) 100%);
}
.fh-ico {
  position: absolute; top: 15px; left: 17px; z-index: 2;
  color: #c9b384; font-size: 19px;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.7)) drop-shadow(0 0 10px rgba(0,0,0,.5));
  transition: transform .4s ease;
}
.fh-card:hover .fh-ico { transform: scale(1.1); }
.fh-card-text { position: absolute; left: 19px; right: 19px; bottom: 16px; z-index: 2; }
.fh-card-text::before {
  content: ''; display: block; width: 30px; height: 2px; background: #c9b384;
  margin-bottom: 9px; transition: width .4s cubic-bezier(.22,1,.36,1);
}
.fh-card:hover .fh-card-text::before { width: 58px; }
.fh-card-name {
  margin: 0 0 5px; font-family: 'Josefin Sans', sans-serif;
  font-size: 17px; font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase;
  line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,.75), 0 2px 16px rgba(0,0,0,.6);
}
.fh-card-tag {
  margin: 0; font-size: 10.5px; font-weight: 400; letter-spacing: 2.4px; text-transform: uppercase;
  color: rgba(201,179,132,.96); text-shadow: 0 1px 3px rgba(0,0,0,.8);
}

/* slider arrows */
.fh-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 26px; line-height: 1; padding-bottom: 3px; cursor: pointer;
  background: rgba(42,48,38,.55); border: 1.5px solid rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  box-shadow: 0 2px 14px rgba(0,0,0,.3);
  transition: background .2s, border-color .2s, transform .2s;
}
.fh-arrow:hover { background: rgba(96,112,87,.92); border-color: #c9b384; transform: translateY(-50%) scale(1.07); }
.fh-prev { left: -10px; } .fh-next { right: -10px; }

/* lightbox */
.fh-lb {
  position: fixed; inset: 0; z-index: 9999; display: none;
  align-items: center; justify-content: center; padding: 4vw;
  background: rgba(20,24,15,.86); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.fh-lb.on { display: flex; }
.fh-lb-inner {
  display: grid; grid-template-columns: 1.25fr 1fr;
  max-width: 1040px; width: 100%; background: #14180f;
  border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.fh-lb-img img { width: 100%; height: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.fh-lb-info { padding: 40px 38px; color: #f5f3ed; display: flex; flex-direction: column; }
.fh-lb-tag { margin: 0 0 9px; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #c9b384; }
.fh-lb-name { margin: 0 0 16px; font-size: 26px; font-weight: 300; letter-spacing: .5px; color: #fff; }
.fh-lb-desc { margin: 0 0 18px; font-size: 14.5px; line-height: 1.75; color: rgba(245,243,237,.82); font-weight: 300; }
.fh-lb-loc { margin: 0 0 26px; font-size: 12.5px; letter-spacing: .4px; color: #a0a5a0; }
.fh-lb-loc i { color: #c9b384; margin-right: 6px; }
.fh-lb-btn {
  margin-top: auto; align-self: flex-start; display: inline-block; padding: 12px 30px;
  background: #607057; color: #fff; text-decoration: none;
  font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 500;
  border-radius: 2px; transition: background .25s, color .25s;
}
.fh-lb-btn:hover { background: #c9b384; color: #2a3026; }
.fh-lb-x {
  position: absolute; top: 22px; right: 26px; z-index: 3;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: 26px; line-height: 1;
}
.fh-lb-x:hover { background: rgba(96,112,87,.9); }
.fh-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.3); color: #fff;
  font-size: 28px; line-height: 1; padding-bottom: 3px;
}
.fh-lb-nav:hover { background: rgba(96,112,87,.9); }
.fh-lb-prev { left: 18px; } .fh-lb-next { right: 18px; }

/* tablet: 2 per view */
@media (max-width: 991px) { .fh-card { width: calc((100% - 16px) / 2); } }
/* mobile: ~1 per view (peek next) + swipe */
@media (max-width: 640px) {
  .fh-card { width: 86%; }
  .fh-arrow { display: none; }
  .fh-lb { padding: 0; align-items: flex-end; }
  .fh-lb-inner { grid-template-columns: 1fr; max-width: 100%; border-radius: 18px 18px 0 0; max-height: 92vh; overflow-y: auto; }
  .fh-lb-info { padding: 26px 24px 30px; }
  .fh-lb-name { font-size: 22px; }
  .fh-lb-nav { width: 40px; height: 40px; font-size: 24px; top: 28%; }
}


/* ============================================================
   17. Dining Preview — Interactive Stage (List left + Image right)
   ============================================================ */
.dining-stage-section { padding-bottom: 60px; }
.dining-stage-section .container { padding-top: 50px; padding-bottom: 20px; }

/* Dining section header — CI sage gradient (fallback when image missing) */
.dining-stage-header {
  background-color: #607057;
  background-image: linear-gradient(135deg, #54654e 0%, #3d4a39 50%, #273025 100%);
}
.dining-stage-header .title,
.dining-stage-header .container > p {
  color: #fff !important;
}
.dining-stage-header .container > p {
  text-shadow: 0 1px 8px rgba(0,0,0,0.25);
}
.dining-stage-header .btn.btn-clean-dark {
  color: #fff !important;
  border-color: #c9b384;
  background-color: transparent;
}
.dining-stage-header .btn.btn-clean-dark:hover {
  background-color: #c9b384;
  border-color: #c9b384;
  color: #2a3026 !important;
}

.ds-stage {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 40px;
  align-items: center;
}

/* ---------- LEFT: zone-grouped list ---------- */
.ds-left { padding-top: 6px; }
.ds-group { margin-bottom: 28px; }
.ds-group:last-child { margin-bottom: 0; }

.ds-group-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e0dcc8;
}
.ds-group-head i {
  font-size: 14px;
  color: #607057;
}
.ds-group-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 18px;
  font-weight: 500;
  color: #2a3026;
  letter-spacing: 0.4px;
}
.ds-group-sub {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8a7048;
}

.ds-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ds-list li { margin: 0; padding: 0; }
.ds-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 4px 10px 8px;
  font-size: 15px;
  color: #4a4538;
  text-decoration: none;
  border-left: 2px solid transparent;
  transition: color 0.25s, border-color 0.25s, background 0.25s, padding-left 0.3s;
}
.ds-item:hover {
  color: #607057;
  background: #fafaf5;
  text-decoration: none;
}
.ds-bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c4b898;
  transition: background 0.25s, transform 0.25s;
  flex-shrink: 0;
}
.ds-item:hover .ds-bullet { background: #607057; }

.ds-item.active {
  color: #607057;
  font-weight: 500;
  border-left-color: #607057;
  padding-left: 14px;
  background: #fafaf5;
}
.ds-item.active .ds-bullet {
  background: #c9b384;
  transform: scale(1.4);
  box-shadow: 0 0 0 4px rgba(201,179,132,0.2);
}

/* ---------- RIGHT: image stage ---------- */
.ds-right-wrap {
  position: relative;
  padding: 18px 22px 18px 0;       /* room for stacked cards behind */
}
/* Stacked "deck" effect — faded card edges peek from behind */
.ds-right-wrap::before,
.ds-right-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 22px;
  bottom: 0;
  border-radius: 10px;
  background: #d4c8a8;
  z-index: 0;
  pointer-events: none;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.ds-right-wrap::before {
  transform: translate(10px, -10px) rotate(1.5deg);
  background: #c4b898;
  opacity: 0.75;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.25);
}
.ds-right-wrap::after {
  transform: translate(20px, -20px) rotate(3deg);
  background: #b8b8ac;
  opacity: 0.55;
  box-shadow: 0 12px 24px -10px rgba(0,0,0,0.2);
}
.ds-right-wrap:hover::before {
  transform: translate(6px, -6px) rotate(1deg);
  opacity: 0.85;
}
.ds-right-wrap:hover::after {
  transform: translate(12px, -12px) rotate(2deg);
  opacity: 0.65;
}

.ds-right {
  position: relative;
  height: 520px;
  border-radius: 10px;
  overflow: hidden;
  background: #2a3026;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.35);
  z-index: 1;          /* sit above the stacked deck */
}

.ds-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.04);
  transition: opacity 0.7s ease, transform 1.2s ease, visibility 0s linear 0.7s;
}
.ds-slide.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: opacity 0.7s ease, transform 7s ease, visibility 0s linear;
}

.ds-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

/* Restaurant logo — top-left, tinted white for legibility on any image */
.ds-logo {
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 4;
  padding: 10px 14px;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 4px;
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ds-logo img {
  display: block;
  max-height: 38px;
  max-width: 160px;
  object-fit: contain;
  filter: brightness(0) invert(1);   /* force pure white */
  opacity: 0.95;
}
/* Chef Man Seafood's logo is a flat colour emblem on a solid gold square
   (not a transparent die-cut like the others) — the white-forcing filter would
   turn it into a solid white block. Show it in its original colours instead. */
.ds-slide[data-slug="chef-man-seafood"] .ds-logo img { filter: none; opacity: 1; }
/* Hide logo when overlay is open so it doesn't clash with the big title */
.ds-right:hover .ds-slide.active .ds-logo {
  opacity: 0;
  transform: translateY(-6px);
}

/* Bottom caption (always visible) */
.ds-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 70px 28px 24px 28px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
  color: #fff;
  z-index: 2;
  transition: opacity 0.35s ease;
}
.ds-caption h4 {
  margin: 0 0 4px 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: #fff;
}
.ds-caption span {
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}

/* Hover overlay with full description */
.ds-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 14, 0.78);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 50px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s ease, visibility 0s linear 0.45s;
  z-index: 3;
}
.ds-right:hover .ds-slide.active .ds-overlay {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.45s ease, visibility 0s linear;
}
.ds-right:hover .ds-slide.active .ds-caption {
  opacity: 0;
}

.ds-overlay-inner {
  max-width: 580px;
  text-align: left;
  color: #fff;
  transform: translateY(10px);
  transition: transform 0.5s ease;
}
.ds-right:hover .ds-slide.active .ds-overlay-inner {
  transform: translateY(0);
}
.ds-ov-name {
  margin: 0 0 6px 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: #fff;
}
.ds-ov-tag {
  margin: 0 0 18px 0;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #c9b384;
}
.ds-ov-desc {
  margin: 0 0 22px 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.9);
}
.ds-ov-more {
  display: inline;
  margin-left: 4px;
  color: #c9b384;
  letter-spacing: 1px;
  font-weight: 400;
}
.ds-ov-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 24px;
}
.ds-ov-meta span {
  font-size: 12px;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.9);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ds-ov-meta i { color: #c9b384; }
.ds-ov-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #c9b384;
  background: transparent;
  border-radius: 2px;
  text-decoration: none;
  transition: background 0.3s ease, color 0.3s ease, gap 0.3s ease;
}
.ds-ov-btn:hover {
  background: #c9b384;
  color: #2a3026;
  text-decoration: none;
  gap: 14px;
}

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
  .ds-stage { grid-template-columns: 280px 1fr; gap: 24px; }
  .ds-right { height: 440px; }
  .ds-ov-desc { font-size: 14px; }
}
/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  .ds-stage { grid-template-columns: 1fr; gap: 24px; }
  .ds-right { height: 360px; }
  .ds-overlay { padding: 24px; }
  .ds-ov-name { font-size: 22px; }
  .ds-ov-desc { font-size: 13px; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  /* On mobile show overlay on tap-active slide */
  .ds-slide.active .ds-overlay { opacity: 1; visibility: visible; background: rgba(15,18,14,0.6); }
  .ds-slide.active .ds-caption { display: none; }
}

/* ---------- Mobile / Desktop visibility switch (dining) ---------- */
.ds-mobile { display: none; }
@media (max-width: 767px) {
  .ds-desktop { display: none !important; }
  .ds-mobile  { display: block; }
}

/* ---------- Mobile vertical cards ---------- */
.ds-mobile .dm-group { margin-bottom: 32px; }
.ds-mobile .dm-group:last-child { margin-bottom: 0; }

.ds-mobile .dm-group-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 14px; padding-bottom: 8px;
  border-bottom: 1px solid #e0dcc8;
}
.ds-mobile .dm-group-head i { font-size: 14px; color: #607057; }
.ds-mobile .dm-group-label {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 17px; font-weight: 500;
  color: #2a3026; letter-spacing: 0.4px;
}
.ds-mobile .dm-group-sub {
  margin-left: auto;
  font-size: 10.5px; letter-spacing: 0.18em;
  color: #8a7048; text-transform: uppercase;
}

.ds-mobile .dm-card {
  display: block;
  margin-bottom: 16px;
  background: #fafaf5;
  border: 1px solid #e0dcc8;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 10px rgba(42,48,38,0.05);
  transition: box-shadow .2s, transform .2s;
}
.ds-mobile .dm-card:active { transform: scale(0.99); }
.ds-mobile .dm-card:last-child { margin-bottom: 0; }

.ds-mobile .dm-card-img {
  position: relative;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.ds-mobile .dm-card-logo {
  position: absolute; top: 12px; left: 12px;
  background: rgba(255,255,255,0.9);
  padding: 6px 10px; border-radius: 6px;
  max-width: 90px;
}
.ds-mobile .dm-card-logo img { display: block; height: 28px; width: auto; }

.ds-mobile .dm-card-body { padding: 16px; }
.ds-mobile .dm-card-name {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 19px; font-weight: 500;
  color: #2a3026;
  margin: 0 0 4px;
  letter-spacing: 0.3px;
}
.ds-mobile .dm-card-tag {
  font-size: 13px; color: #8a7048;
  margin: 0 0 12px;
  font-style: italic;
}
.ds-mobile .dm-card-meta {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12.5px; color: #5a5040;
  margin-bottom: 12px;
}
.ds-mobile .dm-card-meta i { color: #607057; margin-right: 6px; width: 14px; }
.ds-mobile .dm-card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #607057; font-weight: 500;
}
.ds-mobile .dm-card-cta i { font-size: 11px; }


/* ============================================================
   10. About Section — larger body text for readability
   ============================================================ */
.section-header .container > p {
  font-size: 19px;
  line-height: 1.75;
  font-weight: 300;
  color: #4a4538;
}
@media (min-width: 992px) {
  .section-header .container > p {
    font-size: 20px;
    line-height: 1.8;
  }
}


/* ============================================================
   18. Hotel Collection — sister properties tiered grid
   ============================================================ */
.hcol-section {
  background-color: #eeeeee;
  padding: 80px 0 90px 0;
  color: #4a4538;
}

.hcol-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 50px auto;
}
.hcol-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8a7048;
  margin-bottom: 12px;
}
.hcol-section .hcol-title {
  font-family: 'Josefin Sans', sans-serif;
  font-size: 38px;
  font-weight: 400;
  letter-spacing: 0.6px;
  color: #2a3026;
  margin: 0 0 16px 0;
  line-height: 1.2;
  display: block;
}
@media (min-width: 992px) {
  .hcol-section .hcol-title { font-size: 42px; }
}
.hcol-intro {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #5a5040;
  margin: 0;
}

/* Tier section */
.hcol-tier { margin-top: 42px; }
.hcol-tier:first-of-type { margin-top: 0; }

.hcol-tier-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
}
.hcol-tier-label {
  margin: 0;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #2a3026;
}
.hcol-tier-sub {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a7048;
}
.hcol-tier-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, #c4b898 0%, transparent 100%);
}
.hcol-tier-desc {
  margin: 0 0 16px;
  max-width: 760px;
  font-size: 14px;
  line-height: 1.7;
  color: #5a5040;
}

/* Card grid */
.hcol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.hcol-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 26px 18px;
  min-height: 150px;
  background: #ffffff;
  border-radius: 8px;
  color: #4a4538;
  text-decoration: none;
  text-align: center;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease, border-color 0.3s ease,
              box-shadow 0.3s ease;
}
.hcol-card:hover {
  transform: translateY(-4px);
  background: #ffffff;
  border-color: #c9b384;
  box-shadow: 0 14px 28px -12px rgba(0,0,0,0.15);
  color: #2a3026;
  text-decoration: none;
}

.hcol-logo {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hcol-logo img {
  max-height: 56px;
  max-width: 80%;
  object-fit: contain;
  /* Tint every logo to a uniform #797979 gray
     (brightness 0 → pure black; invert 47.5% → mid gray) */
  filter: brightness(0) invert(0.475);
  transition: filter 0.3s ease, transform 0.3s ease;
}
.hcol-card:hover .hcol-logo img {
  filter: brightness(0) invert(0.25);
  transform: scale(1.04);
}
.hcol-card.is-current .hcol-logo img {
  filter: brightness(0) invert(0.15);
}


/* Current hotel — accent badge + champagne border */
.hcol-card.is-current {
  background: #fafaf5;
  border-color: #c9b384;
  cursor: default;
}
.hcol-card.is-current:hover {
  transform: none;
  box-shadow: none;
}
.hcol-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #2a3026;
  background: #c9b384;
  padding: 3px 8px;
  border-radius: 2px;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
  .hcol-grid { grid-template-columns: repeat(2, 1fr); }
  .hcol-title { font-size: 30px; }
}
@media (max-width: 600px) {
  .hcol-section { padding: 60px 0 70px 0; }
  .hcol-grid { grid-template-columns: 1fr; gap: 10px; }
  .hcol-title { font-size: 26px; }
  .hcol-tier-head { flex-wrap: wrap; }
}


/* ============================================================
   19. Mobile Menu — Accordion Drawer (refined)
   Overrides theme.css defaults for a more polished mobile UX
   ============================================================ */
@media (max-width: 991px) {

  /* Lock body scroll when menu is open */
  body.menu-open { overflow: hidden; }

  /* Backdrop overlay behind menu — tap to close */
  .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 24, 15, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0s linear 0.35s;
  }
  body.menu-open .menu-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.35s ease;
  }

  /* Drawer container — slide from right */
  nav.navigation-main .navigation-block {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 88% !important;
    max-width: 380px;
    background: #fafaf5 !important;
    z-index: 999;
    -webkit-transform: translate3d(100%, 0, 0) !important;
    -ms-transform: translate3d(100%, 0, 0) !important;
    transform: translate3d(100%, 0, 0) !important;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important;
    overflow-y: auto;
    overflow-x: hidden;
    box-shadow: -10px 0 30px rgba(0,0,0,0.2);
    padding: 0 0 90px 0;
    -webkit-overflow-scrolling: touch;
  }
  nav.navigation-main .navigation-block.open {
    -webkit-transform: translate3d(0, 0, 0) !important;
    -ms-transform: translate3d(0, 0, 0) !important;
    transform: translate3d(0, 0, 0) !important;
    background-color: #fafaf5 !important;   /* override theme.css '#000000' on .open */
  }

  /* Brand header inside drawer */
  .mobile-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: linear-gradient(135deg, #607057 0%, #4a563f 100%);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 5;
  }
  .mobile-menu-brand {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.3;
  }
  .mobile-menu-brand small {
    display: block;
    font-size: 9px;
    font-weight: 400;
    letter-spacing: 2px;
    color: #c9b384;
    margin-top: 3px;
  }
  .mobile-menu-close {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    border: 0;
    transition: background 0.2s;
  }
  .mobile-menu-close:hover { background: rgba(255,255,255,0.25); }

  /* List items — refined */
  nav.navigation-main .navigation-block > ul {
    margin: 0;
    padding: 8px 0;
  }
  nav.navigation-main .navigation-block > ul > li {
    border-bottom: 1px solid #e8e3d4;
    position: relative;
  }
  nav.navigation-main .navigation-block > ul > li:last-child {
    border-bottom: 0;
  }
  nav.navigation-main .navigation-block > ul > li > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px !important;
    color: #2a3026 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    transition: color 0.2s, background 0.2s;
  }
  nav.navigation-main .navigation-block > ul > li > a:hover,
  nav.navigation-main .navigation-block > ul > li.expanded > a {
    background: #f0ede0;
    color: #607057 !important;
  }

  /* Chevron icon */
  nav.navigation-main .navigation-block .open-dropdown {
    color: #8a8d80;
    transition: transform 0.3s ease;
  }
  nav.navigation-main .navigation-block > ul > li.expanded .open-dropdown {
    transform: rotate(180deg);
    color: #607057;
  }

  /* Submenu — accordion expanded */
  nav.navigation-main .navigation-block > ul > li > ul {
    background: #f5f3ed !important;
    padding: 4px 0 8px 0;
    display: none;
  }
  /* Dotted divider between submenu items */
  nav.navigation-main .navigation-block > ul > li > ul li {
    border-bottom: 1px dotted #c4b898;
  }
  nav.navigation-main .navigation-block > ul > li > ul li:last-child {
    border-bottom: 0;
  }
  nav.navigation-main .navigation-block > ul > li > ul li a {
    display: block;
    padding: 10px 22px 10px 38px !important;
    color: #4a4538 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px;
    text-transform: none;
    border-left: 2px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
  }
  nav.navigation-main .navigation-block > ul > li > ul li a:hover {
    background: #ebe6d8;
    color: #607057 !important;
    border-left-color: #c9b384;
  }
  /* Sub-label (e.g. "Room size 50 sq.m" / "33rd Floor · Rooftop") */
  nav.navigation-main .navigation-block .roomfontindex {
    display: block !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    letter-spacing: 0.6px;
    color: #8a8d80 !important;
    text-transform: none;
    margin-top: 2px;
  }

  /* Sticky bottom CTA bar */
  .mobile-menu-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: auto;
    width: 88%;
    max-width: 380px;
    display: flex;
    gap: 0;
    background: #2a3026;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
                opacity 0.3s ease, visibility 0s linear 0.4s;
  }
  body.menu-open .mobile-menu-cta {
    opacity: 1;
    visibility: visible;
    right: 0;
    left: auto;
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
                opacity 0.3s ease;
  }
  .mobile-menu-cta a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
    transition: background 0.25s;
  }
  .mobile-menu-cta a:hover { color: #fff; text-decoration: none; }
  .mobile-menu-cta i { font-size: 14px; color: #c9b384; }
  .mobile-menu-cta .cta-book {
    background: #c9b384;
    color: #2a3026;
  }
  .mobile-menu-cta .cta-book i { color: #2a3026; }
  .mobile-menu-cta .cta-book:hover { background: #fff; color: #2a3026; }
  .mobile-menu-cta .cta-call:hover { background: #3a4030; }

  /* Hide elements we don't want on mobile in the new drawer */
  nav.navigation-main .navigation-block > ul > li > ul:after {
    display: none;          /* hide the legacy arrow caret */
  }
}

/* Desktop unaffected — hide mobile-only chrome */
@media (min-width: 992px) {
  .mobile-menu-head,
  .mobile-menu-cta,
  .menu-backdrop { display: none !important; }
}


/* ============================================================
   21. Why Book Direct — centered CTA card
   ============================================================ */
.bookdirect {
  background: #fafaf5;
  padding: 60px 0;
  border-top: 1px solid #ebe6d8;
  border-bottom: 1px solid #ebe6d8;
}

.bookdirect-card {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: 0 24px;
}

.bookdirect-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: #8a7048;
  margin-bottom: 18px;
  padding: 4px 12px;
  border: 1px solid rgba(201,179,132,0.5);
  border-radius: 2px;
}

.bookdirect-icon {
  display: block;
  font-size: 48px;
  color: #c9b384;
  margin: 0 auto 18px auto;
  line-height: 1;
}

.bookdirect-title {
  margin: 0 0 14px 0;
  font-size: 26px;
  font-weight: 400;
  letter-spacing: 0.5px;
  color: #2a3026;
  text-transform: none;
  line-height: 1.25;
}
@media (min-width: 992px) {
  .bookdirect-title { font-size: 30px; }
}

.bookdirect-lead {
  margin: 0 0 24px 0;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: #5a5040;
}
.bookdirect-lead strong {
  color: #607057;
  font-weight: 500;
}

.bookdirect-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #2a3026;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 12px 26px;
  border: 1px solid #c9b384;
  border-radius: 2px;
  background: transparent;
  transition: background 0.3s, color 0.3s, gap 0.3s;
}
.bookdirect-link:hover {
  background: #c9b384;
  color: #2a3026;
  text-decoration: none;
  gap: 14px;
}
.bookdirect-link i { font-size: 14px; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
  .bookdirect { padding: 48px 0; }
  .bookdirect-icon { font-size: 40px; margin-bottom: 14px; }
}


/* ============================================================
   20. Desktop Mega Menu (with thumbnails)
   Replaces the legacy small dropdown with full-width card panel
   ============================================================ */
@media (min-width: 992px) {

  /* Force li to be static so mega panel can span the full nav width
     (theme.css sets position:relative on navigation-right li — override) */
  nav.navigation-main .navigation-block > ul.navigation-left > li:has(> ul.mega-panel),
  nav.navigation-main .navigation-block > ul.navigation-right > li:has(> ul.mega-panel) {
    position: static !important;
  }

  /* ========== MEGA PANEL ========== */
  nav.navigation-main .navigation-block > ul > li > ul.mega-panel {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    background: #ffffff;
    box-shadow: 0 24px 48px -20px rgba(0,0,0,0.25),
                0 4px 12px rgba(0,0,0,0.08);
    border-top: 1px solid #e8e3d4;
    padding: 32px 40px 40px 40px;
    z-index: 999;

    /* Reset legacy styles */
    background-color: #ffffff !important;
    margin: 0;

    /* Grid of cards */
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px 20px;
    align-items: stretch;

    /* Hidden by default — show on parent hover */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                visibility 0s linear 0.3s;
    pointer-events: none;
  }
  nav.navigation-main .navigation-block > ul > li.hovered > ul.mega-panel,
  nav.navigation-main .navigation-block > ul > li:hover > ul.mega-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: auto;
  }

  /* Mega panel title (full-width header row) */
  .mega-panel .mega-head {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0 0 6px 0;
    padding: 0 0 14px 0;
    border: 0 !important;        /* kill theme.css border-top on nested li */
    border-bottom: 1px solid #e8e3d4 !important;
    display: block;
  }
  .mega-panel .mega-title {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #8a7048;
  }

  /* ========== CARDS ========== */
  .mega-panel > li.has-thumb {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
  }
  .mega-panel > li.has-thumb > a {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 0 !important;
    color: #2a3026 !important;
    text-transform: none !important;
    text-align: left !important;
    background: transparent !important;
    line-height: 1.3;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mega-panel > li.has-thumb > a:hover {
    transform: translateY(-4px);
    color: #2a3026 !important;
    background: transparent !important;
    text-decoration: none;
  }

  .mega-panel .nav-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 6px;
    background: #f5f3ed;
    margin-bottom: 12px;
    position: relative;
  }
  .mega-panel .nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.4s ease;
  }
  .mega-panel .nav-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(96,112,87,0) 100%);
    transition: background 0.35s ease;
  }
  .mega-panel > li.has-thumb > a:hover .nav-thumb img {
    transform: scale(1.06);
  }
  .mega-panel > li.has-thumb > a:hover .nav-thumb::after {
    background: linear-gradient(180deg, transparent 40%, rgba(96,112,87,0.35) 100%);
  }

  .mega-panel .nav-text {
    display: block;
    padding: 0 4px;
  }
  .mega-panel .nav-name {
    display: block;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #2a3026;
    margin-bottom: 4px;
    transition: color 0.25s ease;
  }
  .mega-panel > li.has-thumb > a:hover .nav-name { color: #607057; }

  .mega-panel .nav-text .roomfontindex {
    display: block !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    letter-spacing: 0.5px !important;
    color: #8a8d80 !important;
    text-transform: none !important;
    margin-top: 0 !important;
  }

  /* Items without thumb (fallback text-only rows inside mega panel — rare) */
  .mega-panel > li:not(.has-thumb):not(.mega-head) {
    list-style: none;
  }
  .mega-panel > li:not(.has-thumb):not(.mega-head) > a {
    display: block;
    padding: 10px 4px;
    color: #2a3026;
    font-size: 13px;
  }

  /* Stagger entrance animation per card */
  .mega-panel > li.has-thumb {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
  nav.navigation-main .navigation-block > ul > li.hovered > ul.mega-panel > li.has-thumb,
  nav.navigation-main .navigation-block > ul > li:hover > ul.mega-panel > li.has-thumb {
    opacity: 1;
    transform: translateY(0);
  }
  .mega-panel > li.has-thumb:nth-child(2) { transition-delay: 0.05s; }
  .mega-panel > li.has-thumb:nth-child(3) { transition-delay: 0.10s; }
  .mega-panel > li.has-thumb:nth-child(4) { transition-delay: 0.15s; }
  .mega-panel > li.has-thumb:nth-child(5) { transition-delay: 0.20s; }
  .mega-panel > li.has-thumb:nth-child(6) { transition-delay: 0.25s; }
  .mega-panel > li.has-thumb:nth-child(7) { transition-delay: 0.30s; }
  .mega-panel > li.has-thumb:nth-child(8) { transition-delay: 0.35s; }
  .mega-panel > li.has-thumb:nth-child(9) { transition-delay: 0.40s; }


  /* ============================================================
     Mega Panel — GROUPED variant (columns by zone)
     ============================================================ */
  .mega-panel.mega-grouped {
    gap: 16px 28px !important;
    padding: 26px 36px 32px 36px !important;
  }
  /* Use exact column count per group — each column fills 1fr of panel width */
  .mega-panel.mega-grouped-2 { grid-template-columns: repeat(2, 1fr) !important; }
  .mega-panel.mega-grouped-3 { grid-template-columns: repeat(3, 1fr) !important; }
  .mega-panel.mega-grouped-4 { grid-template-columns: repeat(4, 1fr) !important; }
  .mega-panel.mega-grouped-5 { grid-template-columns: repeat(5, 1fr) !important; }
  .mega-panel.mega-grouped-6 { grid-template-columns: repeat(6, 1fr) !important; }

  .mega-grouped > li.mega-zone-group {
    list-style: none;
    margin: 0;
    padding: 0 20px 0 0;
    border: 0 !important;        /* override theme.css '1px solid #dddddd' border-top */
    background: transparent;
    display: block;
    position: relative;
  }
  /* Vertical dotted divider between columns (skip last) */
  .mega-grouped > li.mega-zone-group:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 4px;
    right: 0;
    border-right: 1px dotted #c4b898;
  }

  .mega-grouped .mega-zone-title {
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8a7048;
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px dotted #c4b898;
    line-height: 1.5;
    word-spacing: 1px;
  }
  /* Adults/Child icons inside zone title */
  .mega-grouped .mega-zone-title .mz-icon {
    display: inline-block;
    margin: 0 2px 0 1px;
    font-size: 12px;
    color: #607057;
    vertical-align: -1px;
  }

  .mega-grouped .mega-zone-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column;
    gap: 4px;
    /* Override theme.css hiding nested ul (which also hits this inner list) */
    opacity: 1 !important;
    visibility: visible !important;
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    background: transparent !important;
    min-width: 0 !important;
    border-radius: 0 !important;
  }
  .mega-grouped .mega-zone-items::after {
    content: none !important;     /* remove caret arrow from theme.css */
  }
  .mega-grouped .mega-zone-items > li {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0 !important;
    border-top: 0 !important;     /* override theme.css '1px solid #dddddd' on nested li */
    background: transparent !important;
  }

  /* Horizontal card: thumb (left, small) + text (right) */
  .mega-grouped .mega-zone-items > li > a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 8px 6px !important;
    border-radius: 4px;
    color: #2a3026 !important;
    text-transform: none !important;
    text-align: left !important;
    background: transparent !important;
    line-height: 1.3;
    transition: background 0.2s ease, transform 0.25s ease;
  }
  .mega-grouped .mega-zone-items > li > a:hover {
    background: #fafaf5 !important;
    color: #607057 !important;
    text-decoration: none;
    transform: none;
  }

  .mega-grouped .nav-thumb {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;
    aspect-ratio: 1 / 1;
    border-radius: 4px;
    overflow: hidden;
    margin: 0;
    background: #f5f3ed;
    position: relative;
  }
  .mega-grouped .nav-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
  }
  .mega-grouped .nav-thumb::after { display: none; }
  .mega-grouped > li.mega-zone-group .mega-zone-items > li > a:hover .nav-thumb img {
    transform: scale(1.08);
  }

  .mega-grouped .nav-text {
    flex: 1;
    min-width: 0;
    padding: 0;
  }
  .mega-grouped .nav-name {
    display: block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: #2a3026;
    line-height: 1.3;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease;
  }
  .mega-grouped > li.mega-zone-group .mega-zone-items > li > a:hover .nav-name {
    color: #607057;
  }
  .mega-grouped .nav-text .roomfontindex {
    display: block !important;
    font-size: 10px !important;
    font-weight: 300 !important;
    letter-spacing: 0.3px !important;
    color: #8a8d80 !important;
    text-transform: none !important;
    margin-top: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* No stagger needed for grouped — feels cleaner without it */
  .mega-grouped > li.mega-zone-group {
    opacity: 1;
    transform: none;
  }
}


/* ============================================================
   22. Gallery Slider — Peek-a-boo (edge-to-edge, sides bleed off-screen)
   Applies to .owl-slider-gallery on detail pages
   ============================================================ */

/* Wrapper section — break out of .container, span the viewport */
.room-gallery {
  position: relative;
  z-index: 1;
  padding: 0 0 130px 0;            /* leaves 30px gap below the floating booking card (-100px margin) */
  margin: 0;
  background: transparent;
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
}
@media (max-width: 991px) {
  .room-gallery {
    padding: 0 0 30px 0;
    margin-left: 0;
    width: 100%;
  }
}

/* Remove the inner .container constraint so slider can extend beyond viewport */
.room-gallery > .container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Make the owl slider wider than viewport so side items get clipped.
   The wider the slider, the bigger the center image proportionally.
   On narrower viewports we increase the multiplier so the center
   doesn't shrink with the screen. */
.owl-slider-gallery {
  background: transparent !important;
  padding: 0 !important;
}
/* Desktop (≥992px) — side images show only 40% of their width, center dominates.
   Math: side_visible 40% × 2 sides + center 100% = 1.8 × item_width
         slider_width = 3 × item_width = 3 × (viewport / 1.8) ≈ 167vw
         margin-left to center the middle item: (100 − 167) / 2 = −33.5vw  */
@media (min-width: 992px) {
  .owl-slider-gallery {
    width: 167vw !important;
    margin-left: -33.5vw !important;
  }
}

/* Each item — uniform size, edge-to-edge, NO scaling */
.owl-slider-gallery .owl-item {
  padding: 0 !important;
  box-sizing: border-box;
  position: relative;
  /* Allow .item to overflow into neighbouring owl-items */
  overflow: visible !important;
}
.owl-slider-gallery .owl-item.center {
  z-index: 10;                /* centre always sits on top */
}
.owl-slider-gallery,
.owl-slider-gallery .owl-wrapper-outer,
.owl-slider-gallery .owl-wrapper { overflow: visible !important; }
.owl-slider-gallery .owl-item .item {
  position: relative;
  overflow: hidden;
  margin: 12px -10px;
  padding: 0;
  opacity: 1 !important;
  filter: none !important;
  border-radius: 18px;
  background-color: #ebe6d8;
  box-shadow: 0 10px 28px rgba(42, 48, 38, 0.12) !important;
  aspect-ratio: 16 / 9;
  height: auto;
  width: calc(100% + 20px);
  z-index: 1;
  clip-path: inset(0 round 18px);
  -webkit-clip-path: inset(0 round 18px);
  transition: clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              -webkit-clip-path 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
  will-change: clip-path;
}

/* Soft inner ring for premium feel */
.owl-slider-gallery .owl-item .item::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  pointer-events: none;
  z-index: 2;
}

/* Desktop: head & tail (peek items) — clip 5% off top & bottom */
@media (min-width: 768px) {
  .owl-slider-gallery .owl-item.active:not(.center) .item {
    clip-path: inset(5% 0 round 18px);
    -webkit-clip-path: inset(5% 0 round 18px);
  }
  .owl-slider-gallery .owl-item.center .item {
    z-index: 20;                              /* centre's .item on top */
    box-shadow: 0 14px 36px rgba(42, 48, 38, 0.20) !important;
  }
}
/* Mobile: full-width image — no rounded corners, full natural height, tight to header */
@media (max-width: 767px) {
  .owl-slider-gallery .owl-item .item {
    margin: 0 0 10px;            /* tight gap to the header above */
    width: 100%;
    max-height: none;           /* don't limit image height */
    aspect-ratio: auto;         /* show the full image (no 16:9 crop) */
    height: auto;
    border-radius: 0;           /* no rounded corners */
    clip-path: none;
    -webkit-clip-path: none;
    overflow: visible;
    box-shadow: none !important;
  }
  .owl-slider-gallery .owl-item .item::after { display: none; }   /* drop the rounded inner ring */
  .owl-slider-gallery .owl-item .item img {
    display: block;
    width: 100%;
    height: auto;               /* natural height — whole photo visible */
  }
}


/* Pagination dots — hidden (autoplay handles navigation) */
.owl-slider-gallery .owl-controls .owl-pagination {
  display: none !important;
}

/* Hide nav arrows for a cleaner peek-a-boo look (sides hint at next/prev anyway) */
.owl-slider-gallery .owl-controls .owl-buttons { display: none !important; }


/* ============================================================
   23. Booking Form — Floating Card (Aman-style)
   Overrides theme.css to render the booking bar as a premium
   cream card that floats over the slider's bottom edge.
   ============================================================ */
@media (min-width: 992px) {
  /* Outer container — keep the negative margin trick but adjust z-index */
  .booking.booking-inner {
    margin-top: -100px !important;
    z-index: 20;
    position: relative;
    color: #2a3026 !important;
  }
  .booking.booking-inner .container {
    max-width: 1140px;
  }

  /* The card — Apple "liquid glass" (frosted, translucent, luminous edge) */
  .booking.booking-inner .booking-wrapper {
    position: relative;
    background:
      linear-gradient(135deg,
        rgba(255, 255, 255, 0.19) 0%,
        rgba(250, 250, 245, 0.12) 48%,
        rgba(245, 243, 237, 0.14) 100%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;
    box-shadow:
      0 18px 50px -18px rgba(42, 48, 38, 0.45),   /* ambient depth */
      0 6px 18px rgba(0, 0, 0, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.70),     /* top glass highlight */
      inset 0 0 0 1px rgba(255, 255, 255, 0.10),   /* inner rim */
      inset 0 -10px 24px -12px rgba(255, 255, 255, 0.25);
    padding: 26px 16px !important;
    font-family: 'Josefin Sans', sans-serif;
  }
  /* Homepage only: clearer glass — owner request. White tint reduced further
     (~0.04) so the hero shows through more; frosted blur kept for legibility. */
  body.home .booking.booking-inner .booking-wrapper {
    background:
      linear-gradient(135deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(250, 250, 245, 0.03) 48%,
        rgba(245, 243, 237, 0.04) 100%) !important;
  }
  /* Faint sheen across the top of the glass.
     NB: no overflow:hidden on the card (it would clip the guest dropdown),
     so the sheen carries its own top-corner radius to stay inside the card. */
  .booking.booking-inner .booking-wrapper:before {
    content: "" !important;
    display: block !important;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 55%;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    z-index: 0;
  }
  .booking.booking-inner .booking-wrapper > .row { position: relative; z-index: 1; }

  /* Each column has subtle vertical divider on its right */
  .booking.booking-inner .booking-wrapper > .row > [class*="col-"] {
    position: relative;
    padding: 8px 24px;
  }
  .booking.booking-inner .booking-wrapper > .row > [class*="col-"]:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 14px;
    bottom: 14px;
    right: 0;
    width: 1px;
    border: 0;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.40) 50%,
      rgba(255, 255, 255, 0) 100%);
  }

  /* ===== Eyebrow label (data-text via ::before) ===== */
  .booking.booking-inner .booking-wrapper .date::before,
  .booking.booking-inner .booking-wrapper .guests::before {
    content: attr(data-text);
    position: static !important;
    display: block;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 2.2px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, 0.92) !important;
    margin-bottom: 10px !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45) !important;
    line-height: 1 !important;
  }

  /* Hide the LinearIcons chevron on dates — using our own icon instead */
  .booking.booking-inner .booking-wrapper .date::after {
    content: "" !important;
    font-size: 0 !important;
    display: none;
  }

  /* ===== Field row layout ===== */
  .booking.booking-inner .booking-wrapper .date,
  .booking.booking-inner .booking-wrapper .guests {
    position: relative;
    padding: 0 !important;
    padding-left: 36px !important;
    display: block !important;
    min-height: 56px;
  }
  /* Icon before each field */
  .booking.booking-inner .booking-wrapper .date,
  .booking.booking-inner .booking-wrapper .guests {
    background-position: 0 26px;
    background-repeat: no-repeat;
    background-size: 22px 22px;
  }
  /* Use FontAwesome via inline pseudo — actually simpler: just rely on text */
  .booking.booking-inner .booking-wrapper #dateArrival > .date-icon,
  .booking.booking-inner .booking-wrapper #dateDeparture > .date-icon,
  .booking.booking-inner .booking-wrapper .guests > .date-icon { display: none; }

  /* ===== Date value (formatted date displayed) ===== */
  .booking.booking-inner .booking-wrapper .date .date-value,
  .booking.booking-inner .booking-wrapper .guests .date-value {
    position: static !important;
    display: block !important;
    color: #ffffff !important;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 26px !important;
    font-weight: 400 !important;
    letter-spacing: 0.5px;
    line-height: 1.2 !important;
    margin-top: 0 !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.40) !important;
    text-transform: none !important;
  }
  /* Override hover translate from theme */
  .booking.booking-inner .booking-wrapper .date:hover .date-value,
  .booking.booking-inner .booking-wrapper .guests:hover .date-value {
    transform: none !important;
  }

  /* Day digit */
  .booking.booking-inner .booking-wrapper .date .day,
  .booking.booking-inner .booking-wrapper .guests .qty-result-text {
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    color: #ffffff;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.40);
  }
  .booking.booking-inner .booking-wrapper .date .month {
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.80);
    margin-left: 4px;
    font-weight: 300;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  }
  .booking.booking-inner .booking-wrapper .date .year {
    display: none !important;
  }

  /* Datepicker invisible input — keep clickable but invisible */
  .booking.booking-inner .booking-wrapper .datepicker,
  .booking.booking-inner .booking-wrapper .qty-result {
    background: transparent !important;
    color: transparent !important;
    border: 0 !important;
  }

  /* ===== Submit button ===== */
  .booking.booking-inner .booking-wrapper .btn {
    background: linear-gradient(135deg, #6b7c61 0%, #607057 55%, #556349 100%) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 12px !important;
    padding: 16px 22px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    box-shadow:
      0 8px 20px -8px rgba(96, 112, 87, 0.55),
      inset 0 1px 0 rgba(255, 255, 255, 0.30);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    width: 100% !important;
    height: auto;
  }
  .booking.booking-inner .booking-wrapper .btn:hover {
    background: linear-gradient(135deg, #d2bd8e 0%, #c9b384 55%, #bda572 100%) !important;
    color: #2a3026 !important;
    transform: translateY(-2px);
    box-shadow:
      0 12px 26px -8px rgba(201, 179, 132, 0.60),
      inset 0 1px 0 rgba(255, 255, 255, 0.45);
  }
  .booking.booking-inner .booking-wrapper .btn small {
    display: block;
    font-size: 9px !important;
    font-weight: 400;
    letter-spacing: 1.6px;
    margin-top: 4px;
    opacity: 0.85;
  }
  .booking.booking-inner .booking-wrapper .btn span {
    font-family: 'Josefin Sans', sans-serif !important;
  }

  /* Guest dropdown panel — refined */
  .booking.booking-inner .booking-wrapper .guests .guest-list {
    background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.82) 0%,
      rgba(250, 250, 245, 0.72) 100%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    backdrop-filter: blur(22px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 14px;
    box-shadow:
      0 18px 44px -16px rgba(42, 48, 38, 0.40),
      inset 0 1px 0 rgba(255, 255, 255, 0.70);
    top: calc(100% + 10px) !important;
  }
  /* Dropdown header — blend the solid #eee band into the frosted glass */
  .booking.booking-inner .booking-wrapper .guests .guest-list li.header {
    background: rgba(255, 255, 255, 0.28) !important;
    color: #2a3026 !important;
    font-size: 13px;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 14px 14px 0 0;
  }
  .booking.booking-inner .booking-wrapper .guests .guest-list li.header .qty-apply {
    border-color: #8a7048 !important;
    color: #8a7048 !important;
  }
}

/* Mobile — keep theme defaults but a touch nicer */
@media (max-width: 991px) {
  .booking.booking-inner .booking-wrapper {
    background: #fafaf5 !important;
    border-radius: 4px;
    padding: 22px 16px !important;
  }
  .booking.booking-inner .booking-wrapper h3 {
    color: #2a3026 !important;
    font-size: 18px;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
  }
  .booking.booking-inner .booking-wrapper p {
    color: #5a5040 !important;
    font-size: 13px;
  }
  .booking.booking-inner .booking-wrapper .btn {
    background: #607057 !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 14px 18px !important;
    margin-top: 10px;
    letter-spacing: 1.6px;
  }
}




/* ============================================================
   25. Venue Card — Conference Centre hall layout (rebuilt)
   ============================================================ */
.venues { display: flex; flex-direction: column; gap: 32px; }

.venue-card {
  display: grid;
  grid-template-columns: 70% 30%;   /* image 70% · body 30% */
  align-items: stretch;
  gap: 0;
  min-height: 434px;          /* uniform height (reduced 30%) */
  background: #ffffff;
  border: 1px solid rgba(232, 224, 200, 0.6);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(42, 48, 38, 0.10);
  transition: box-shadow 0.4s ease, transform 0.4s ease;
}
@media (max-width: 991px) {
  .venue-card { min-height: 0; }  /* let it auto-size on mobile */
}
.venue-card:hover {
  box-shadow: 0 22px 50px rgba(42, 48, 38, 0.18);
  transform: translateY(-6px);
}

/* Alternate image/body order — also swap column ratios so the image
   column is always the same width (image always in 5fr track) */
.venue-card.is-flipped {
  grid-template-columns: 30% 70%;   /* body 30% · image 70% */
}
.venue-card.is-flipped .venue-card-image { order: 2; }
.venue-card.is-flipped .venue-card-body  { order: 1; }

/* ===== Image side ===== */
.venue-card-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #f5f3ed;
  min-height: 320px;
  align-self: stretch;
  /* In CSS Grid, align-self: stretch (default) makes the cell fill the row
     height. background-size: cover then fills the rendered box. */
}
.venue-card-tour {
  position: absolute;
  top: 16px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  background: rgba(255,255,255,0.92);
  color: #2a3026;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  border-radius: 12px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  box-shadow: 0 4px 12px rgba(42, 48, 38, 0.15);
  transition: background 0.25s, color 0.25s, transform 0.25s;
}
.venue-card-tour:hover {
  background: #c9b384;
  color: #2a3026;
  text-decoration: none;
}

/* ===== Body side ===== */
.venue-card-body {
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #fafaf5;
}

.venue-card .venue-card-head {
  margin: 0 0 18px 0 !important;
  padding: 0 !important;
  display: block !important;
}
.venue-card .venue-card-name {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #2a3026 !important;
  line-height: 1.25 !important;
}
.venue-card-rule {
  display: block;
  width: 36px;
  height: 1px;
  background: #c9b384;
}

/* Meta info row (Dimension · Area · Ceiling) */
.venue-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin: 0 0 18px 0;
  padding: 14px 0;
  border-top: 1px dotted #d4c8a8;
  border-bottom: 1px dotted #d4c8a8;
}
.venue-meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.venue-meta-item dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #8a7048;
  margin: 0;
}
.venue-meta-item dd {
  font-size: 14px;
  font-weight: 500;
  color: #2a3026;
  margin: 0;
}

/* Equipment tags */
.venue-equipment {
  list-style: none;
  margin: 0 0 22px 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.venue-equipment li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #607057;
  background: rgba(96,112,87,0.08);
  border-radius: 14px;
}
.venue-equipment li i { font-size: 12px; }

/* Capacity grid */
.venue-capacity-title {
  margin: 0 0 14px 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #8a7048;
}
.venue-capacity-grid {
  display: grid;
  /* 3 columns — fits 8 items in 3 compact rows. */
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (max-width: 600px) {
  .venue-capacity-grid { grid-template-columns: repeat(3, 1fr); }
}
.venue-cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 4px;
  border: 1px solid rgba(232, 224, 200, 0.8);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(42, 48, 38, 0.04);
  transition: transform 0.25s ease, border-color 0.25s, box-shadow 0.25s;
}
.venue-cap:hover {
  border-color: #c9b384;
  background: #fafaf5;
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(42, 48, 38, 0.10);
}
.venue-cap-icon {
  width: 24px;
  height: 24px;
}
.venue-cap-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: #7a7060;
  text-align: center;
  line-height: 1.2;
}
.venue-cap-value {
  font-size: 16px;
  font-weight: 500;
  color: #2a3026;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ===== Responsive ===== */
@media (max-width: 991px) {
  .venue-card,
  .venue-card.is-flipped {
    grid-template-columns: 1fr !important;   /* stack vertical on mobile */
  }
  .venue-card.is-flipped .venue-card-image { order: 1; }
  .venue-card.is-flipped .venue-card-body  { order: 2; }
  .venue-card-image { min-height: 220px; }
  .venue-card-body { padding: 28px 24px; }
}


/* ============================================================
   26. Google Form embed (media-influencer-request page)
   ============================================================ */
.gform-embed {
  margin: 28px 0;
  background: #fafaf5;
  border: 1px solid #e8e3d4;
  border-radius: 6px;
  overflow: hidden;
}
.gform-embed iframe {
  display: block;
  width: 100% !important;
  max-width: 100%;
  border: 0;
  background: transparent;
}

/* Empty-state placeholder (e.g. Guest Reviews before opening) */
.blog-item .content .empty-state {
  text-align: center;
  padding: 60px 20px;
  background: #fafaf5;
  border: 1px dashed #d4c8a8;
  border-radius: 6px;
  color: #5a5040;
  margin: 30px 0;
}
.blog-item .content .empty-state small {
  display: inline-block;
  margin-top: 10px;
  color: #8a7048;
  font-size: 13px;
}

/* ============================================================
   27. Amenities Grid — dotted dividers between cells
   (accommodations/*.php → .amenities-grid)

   Pattern: each cell renders one dotted vertical divider (::after)
   and one dotted horizontal divider (::before). We control which
   cells SHOW each divider per breakpoint via CSS variables — much
   cleaner than chained :not(:nth-child) overrides.
   ============================================================ */
.amenities-grid {
  display: grid;
  /* columns set per breakpoint below */
  margin: 30px 0 40px 0;
  padding: 20px 0;
}
.amenities-cell {
  position: relative;
  padding: 18px 14px;
  text-align: center;
}

/* Figure inside cells — clear default margins */
.amenities-cell figure { margin: 0; }
.amenities-cell figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.amenities-cell figcaption p {
  font-size: 13px;
  line-height: 1.5;
  color: #4a4538;
  margin: 0;
}
.amenities-cell .amenities {
  font-size: 28px;
  color: #607057;
}

/* --- Lighter typography in room detail (per request: felt too heavy) ---
   Sub-headings drop 500 -> 400; body lists/labels use the lightest Josefin
   Sans weight we ship (300). Scoped to .room so the rest of the site is
   unaffected. */
.room .room-policy h4 {
  font-weight: 400;
  letter-spacing: 0.4px;
}
.room .checkul li,
.room .room-policy ul li,
.room .amenities-cell figcaption p {
  font-weight: 300;
}

/* --- Shared divider styles (applied in each breakpoint below) --- */
.amenities-cell::after,
.amenities-cell::before { content: none; }   /* default off */

/* ===== Desktop — 6 columns (min-width 992px) ===== */
@media (min-width: 992px) {
  .amenities-grid { grid-template-columns: repeat(6, 1fr); }

  .amenities-cell:not(:nth-child(6n))::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    right: 0;
    border-right: 1px dotted #c4b898;
  }
  .amenities-cell:not(:nth-last-child(-n+6))::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    border-bottom: 1px dotted #c4b898;
  }
}

/* ===== Tablet — 3 columns (576px – 991px) ===== */
@media (min-width: 576px) and (max-width: 991px) {
  .amenities-grid { grid-template-columns: repeat(3, 1fr); }

  .amenities-cell:not(:nth-child(3n))::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    right: 0;
    border-right: 1px dotted #c4b898;
  }
  .amenities-cell:not(:nth-last-child(-n+3))::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    border-bottom: 1px dotted #c4b898;
  }
}

/* ===== Mobile — 2 columns (≤575px) ===== */
@media (max-width: 575px) {
  .amenities-grid { grid-template-columns: repeat(2, 1fr); }

  .amenities-cell:not(:nth-child(2n))::after {
    content: "";
    position: absolute;
    top: 18%;
    bottom: 18%;
    right: 0;
    border-right: 1px dotted #c4b898;
  }
  .amenities-cell:not(:nth-last-child(-n+2))::before {
    content: "";
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;
    border-bottom: 1px dotted #c4b898;
  }
}

/* ============================================================
   28. Amenities Banner — 5 lifestyle images row
   (accommodations/*.php → .amenities-banner)
   ============================================================ */
.amenities-banner {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 85%;             /* reduced 15% from full width */
  margin: 40px auto 30px;     /* center */
  padding: 0 8px;
}
@media (max-width: 991px) {
  .amenities-banner { max-width: 100%; }   /* full width on tablet/mobile */
}
.amenities-banner-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 18px;
  overflow: hidden;
  background: #ebe6d8;
  box-shadow: 0 10px 28px rgba(42, 48, 38, 0.10);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.amenities-banner-item::after {
  /* Soft inner shadow ring for premium feel */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.amenities-banner-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(42, 48, 38, 0.20);
}
.amenities-banner-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.amenities-banner-item:hover img {
  transform: scale(1.08);
}

/* Tablet — 3 columns (5th image spans full width below for nice layout) */
@media (max-width: 991px) {
  .amenities-banner { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* Mobile — 2 columns */
@media (max-width: 575px) {
  .amenities-banner { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* ============================================================
   29. Time Traveller Hero — Guardians-style cosmic variant
   (water-park/time-traveller.php → .tt-grd-hero)
   ============================================================ */
.tt-grd-hero {
  /* Sage CI cosmic gradient — matches brand green theme. */
  background:
    radial-gradient(ellipse at 30% 20%, rgba(96, 112, 87, 0.45) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 80%, rgba(201, 179, 132, 0.22) 0%, transparent 55%),
    linear-gradient(180deg, #14180f 0%, #1a1f17 60%, #1a1f17 100%) !important;
  /* Override .grd-hero margin-top:50px — the page bg below it is cream
     and shows as a white band through the transparent fixed nav.
     Use padding instead so the hero's dark gradient fills the area
     BEHIND the nav from the very top. */
  margin-top: 0 !important;
  padding-top: 50px !important;
}
@media (max-width: 991px) {
  .tt-grd-hero {
    padding-top: 90px !important;
  }
}

/* Stats row inside the cosmic hero */
.tt-hero-stats-cosmic {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px 56px;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px dotted rgba(201, 179, 132, 0.35);
}
.tt-hero-stats-cosmic .tt-hero-stat {
  text-align: center;
  min-width: 90px;
}
.tt-hero-stats-cosmic .tt-hero-stat-num {
  font-size: 32px;
  font-weight: 300;
  color: #c9b384;
  letter-spacing: 1px;
  line-height: 1;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 992px) {
  .tt-hero-stats-cosmic .tt-hero-stat-num { font-size: 42px; }
}
.tt-hero-stats-cosmic .tt-hero-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 575px) {
  .tt-hero-stats-cosmic { gap: 24px 28px; margin-top: 32px; padding-top: 24px; }
  .tt-hero-stats-cosmic .tt-hero-stat-num { font-size: 26px; }
}

/* ============================================================
   30. Beyond-card additions — tagline + tags row
   (water-park/time-traveller.php → .tt-beyond-card)
   ============================================================ */
.tt-beyond-card .tt-card-text {
  /* Ensure text sits at bottom and has room for extra content */
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tt-card-tagline {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #c9b384;
  margin-bottom: 2px;
}
.tt-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tt-beyond-card .tt-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  backdrop-filter: blur(4px);
}

/* ============================================================
   31. Zone Intro — rich description between banner and content
   (water-park/time-traveller.php → .tt-zone-intro)
   ============================================================ */
.tt-zone-intro { padding: 80px 0 60px !important; }
.tt-zone-intro-inner {
  max-width: 880px;
  margin: 0 auto;
  text-align: center;
}

/* ===== Big zone headline (Zone XX + ZONE NAME) ===== */
.tt-zone-headline {
  margin-bottom: 36px;
}
.tt-zone-headline .tt-zone-num {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 2px;
  margin-bottom: 22px;
}
.tt-zone-headline .tt-zone-name {
  font-size: 44px;
  font-weight: 300;
  letter-spacing: 6px;
  line-height: 1.05;
  margin: 0 0 22px 0;
  text-transform: uppercase;
}
@media (min-width: 992px) {
  .tt-zone-headline .tt-zone-name { font-size: 72px; letter-spacing: 10px; }
}
.tt-zone-headline .tt-zone-rule {
  display: inline-block;
  width: 60px;
  height: 2px;
}

/* — Lost World variant: bronze + earthy — */
.tt-zone-headline-lost .tt-zone-num {
  color: #fff;
  background: #8a7048;                                    /* bronze deep */
  box-shadow: 0 6px 14px rgba(138, 112, 72, 0.30);
}
.tt-zone-headline-lost .tt-zone-name {
  color: #4a3a28;                                         /* warm earth brown */
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
}
.tt-zone-headline-lost .tt-zone-rule {
  background: linear-gradient(90deg, transparent, #8a7048, transparent);
}

/* — Tomorrow Land variant: steel + cool — */
.tt-zone-headline-tomo .tt-zone-num {
  color: #fff;
  background: #4a5d6e;                                    /* steel blue */
  box-shadow: 0 6px 14px rgba(74, 93, 110, 0.30);
}
.tt-zone-headline-tomo .tt-zone-name {
  color: #2a3340;                                         /* tech-dark */
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.5);
}
.tt-zone-headline-tomo .tt-zone-rule {
  background: linear-gradient(90deg, transparent, #4a5d6e, transparent);
}
.tt-zone-intro-text {
  font-size: 15px;
  line-height: 1.85;
  color: #4a4538;
  margin: 0;
  font-weight: 300;
}
@media (min-width: 992px) {
  .tt-zone-intro-text { font-size: 16px; }
}
.tt-zone-intro-text br + br {
  /* Add extra space between paragraphs */
  display: block;
  content: " ";
  margin-top: 12px;
}

/* ============================================================
   32. Mobile menu — hide thumbnails, show clean text-only items
   ============================================================ */
@media (max-width: 991px) {
  /* Hide all preview thumbnails — text only for easier tapping */
  nav.navigation-main .nav-thumb,
  .mega-panel .nav-thumb {
    display: none !important;
  }

  /* Strip thumb-related layout from items — back to simple text rows */
  nav.navigation-main .mega-panel > li.has-thumb,
  nav.navigation-main .mega-panel > li.has-thumb > a {
    display: block !important;
    min-height: 0 !important;
  }
  nav.navigation-main .mega-panel > li.has-thumb > a {
    padding: 14px 20px !important;
    border: none !important;
    border-bottom: 1px solid rgba(96, 112, 87, 0.08) !important;
    background: transparent !important;
  }

  /* Tap-friendly link rows */
  nav.navigation-main .mega-panel a {
    display: block;
    padding: 18px 22px;
    font-size: 18px;
    color: #2a3026;
    line-height: 1.35;
  }
  nav.navigation-main .mega-panel .nav-name {
    font-size: 18px !important;
    font-weight: 500;
    color: #2a3026;
  }
  /* Override main nav item font for top-level too */
  nav.navigation-main > ul > li > a {
    font-size: 17px !important;
    padding: 16px 22px !important;
  }
  /* Hide the small italic detail line under nav names (e.g. "50 sq.m. · Sea view") */
  nav.navigation-main .mega-panel .roomfontindex {
    display: none !important;
  }

  /* Zone groups — keep the group title (e.g. "Lost World", "Tomorrow Land") tidy */
  nav.navigation-main .mega-zone-group { margin-bottom: 12px; }
  nav.navigation-main .mega-zone-title {
    display: block;
    padding: 10px 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #8a7048;
    background: rgba(96, 112, 87, 0.05);
  }
  nav.navigation-main .mega-zone-items { padding: 0; list-style: none; }
}

/* ============================================================
   33. Time Traveller hero logo
   ============================================================ */
.tt-hero-logo {
  margin: 8px 0 28px 0;
  display: flex;
  justify-content: center;
}
.tt-hero-logo img {
  max-width: 100%;
  width: auto;
  height: auto;
  max-height: 220px;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55));
}
@media (max-width: 991px) {
  .tt-hero-logo img { max-height: 150px; }
}

/* Screen-reader only — keeps h1 for SEO/a11y without showing duplicated text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   34. Zone intro — fade text into the gradient bg cleanly.
   The default ::after fade uses a solid colour which produces a faint
   "film" on top of gradient backgrounds. Hide it and use mask-image on
   the text instead — the text itself fades to transparency, so the
   live bg shows through with no colour mismatch.
   ============================================================ */
.tt-section-lost .expand-block .expand-content::after,
.tt-section-tomo .expand-block .expand-content::after {
  display: none;
}
.tt-section-lost .expand-block:not(.is-open) .expand-content,
.tt-section-tomo .expand-block:not(.is-open) .expand-content {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
}

/* Override toggle button colours per zone for harmonious look */
.tt-section-lost .expand-toggle {
  border-color: rgba(138, 112, 72, 0.5);
  color: #8a7048;
}
.tt-section-lost .expand-toggle:hover,
.tt-section-lost .expand-toggle:focus {
  background: #8a7048;
  border-color: #8a7048;
  color: #fff;
}
.tt-section-tomo .expand-toggle {
  border-color: rgba(74, 93, 110, 0.5);
  color: #4a5d6e;
}
.tt-section-tomo .expand-toggle:hover,
.tt-section-tomo .expand-toggle:focus {
  background: #4a5d6e;
  border-color: #4a5d6e;
  color: #fff;
}

/* ============================================================
   35. Mobile menu — language switcher inside drawer
   ============================================================ */
/* Hide on desktop — only meant for the mobile drawer */
.mobile-lang { display: none; }

@media (max-width: 991px) {
  .mobile-lang { display: block; }
  .mobile-lang {
    margin: 8px 0 90px 0;       /* bottom margin clears the sticky CTA */
    padding: 18px 0 8px 0;
    border-top: 1px solid rgba(96, 112, 87, 0.15);
  }
  .mobile-lang-label {
    display: block;
    padding: 0 22px 14px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2.2px;
    text-transform: uppercase;
    color: #8a7048;
  }
  .mobile-lang-label i { margin-right: 8px; }

  .mobile-lang-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .mobile-lang-list li {
    border-bottom: 1px solid rgba(96, 112, 87, 0.08);
  }
  .mobile-lang-list li:nth-child(odd) {
    border-right: 1px solid rgba(96, 112, 87, 0.08);
  }
  nav.navigation-main .mobile-lang-list a {
    display: flex !important;
    align-items: baseline;
    gap: 10px;
    padding: 14px 22px !important;
    color: #2a3026 !important;
    text-decoration: none;
    font-size: 15px;
    opacity: 1 !important;
  }
  nav.navigation-main .mobile-lang-list .mobile-lang-code {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #8a7048 !important;
    min-width: 24px;
  }
  nav.navigation-main .mobile-lang-list .mobile-lang-name {
    font-size: 15px;
    font-weight: 500;
    color: #2a3026 !important;
  }
  .mobile-lang-list li.active a {
    background: rgba(96, 112, 87, 0.08);
  }
  .mobile-lang-list li.active .mobile-lang-name {
    color: #607057;
    font-weight: 600;
  }
}

/* ============================================================
   36. FAQ Page — Q&A accordion
   ============================================================ */
/* FAQ page — clear normal layout (override the negative margin-bottom
   that .page-header uses on hero-style detail pages). */
.faq-page .page-header { margin-bottom: 0 !important; }

/* Outer container — generous spacing from page-header */
.faq-wrap {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 80px 20px !important;
}
@media (max-width: 767px) {
  .faq-wrap { padding: 50px 20px !important; }
}

.faq-group {
  margin-bottom: 40px;
  padding-top: 0 !important;       /* override default <section> padding */
  padding-bottom: 0 !important;
}
.faq-group-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #8a7048;
  margin: 0 0 16px 0;
  padding-bottom: 12px;
  border-bottom: 1px solid #e0dcc8;
}
.faq-item {
  border-bottom: 1px solid rgba(96, 112, 87, 0.12);
  padding: 4px 0;
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 32px 18px 0;
  position: relative;
  font-size: 16px;
  font-weight: 500;
  color: #2a3026;
  line-height: 1.45;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 18px;
  font-size: 22px;
  font-weight: 300;
  color: #607057;
  transition: transform 0.3s ease;
}
.faq-item[open] summary::after {
  content: "−";
}
.faq-item summary:hover { color: #607057; }
.faq-answer {
  padding: 0 32px 22px 0;
  font-size: 15px;
  line-height: 1.75;
  color: #5a5040;
  font-weight: 300;
}

/* Beach Shelters — simplified single-image layout (no booking grid) */
.tt-shelters-row.tt-shelters-row--single {
  grid-template-columns: 1fr;
}
.tt-shelters-image.tt-shelters-image--wide {
  min-height: 360px;
  aspect-ratio: 21 / 9;
  max-height: 480px;
}
@media (max-width: 991px) {
  .tt-shelters-image.tt-shelters-image--wide {
    aspect-ratio: 16 / 9;
    min-height: 240px;
  }
}
.tt-shelters-image.tt-shelters-image--wide .tt-card-text {
  padding: 32px 36px;
  max-width: 640px;
}
.tt-shelters-image.tt-shelters-image--wide .tt-card-text h4 {
  font-size: 28px;
  margin-bottom: 10px;
}
.tt-shelters-image.tt-shelters-image--wide .tt-card-text p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  color: rgba(255,255,255,0.9);
}


/* ============================================================
   37. Voyage Battle — game details / conditions / stages
   ============================================================ */
.vb-info { max-width: 560px; }

.vb-block-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #c9b384;
  margin: 22px 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px dotted rgba(201, 179, 132, 0.30);
}

/* Game Details + Playing Conditions — bullet lists */
.vb-details ul,
.vb-conditions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vb-details li,
.vb-conditions li {
  position: relative;
  padding: 6px 0 6px 22px;
  font-size: 14px;
  line-height: 1.65;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
}
.vb-details li::before,
.vb-conditions li::before {
  content: "▸";
  position: absolute;
  left: 4px;
  top: 6px;
  color: #c9b384;
  font-size: 12px;
}
.vb-details li strong,
.vb-conditions li strong {
  color: #fff;
  font-weight: 500;
}

/* Game Stages — for Voyage Battle Series */
.vb-stages { margin-top: 8px; }
.vb-stage-list {
  list-style: none;
  margin: 0 0 8px 0;
  padding: 14px 18px;
  background: rgba(201, 179, 132, 0.08);
  border-left: 2px solid #c9b384;
  border-radius: 0 4px 4px 0;
}
.vb-stage-list li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 6px 0;
  font-size: 14px;
}
.vb-stage-list li + li {
  border-top: 1px dotted rgba(201, 179, 132, 0.18);
}
.vb-stage-name {
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #c9b384;
  font-size: 11px;
  min-width: 110px;
}
.vb-stage-sub {
  font-style: italic;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
}

@media (max-width: 600px) {
  .vb-stage-list li { flex-direction: column; gap: 2px; }
  .vb-stage-name { min-width: 0; }
}

/* ============================================================
   23b. Booking card on INNER pages (not the homepage)
   On the homepage (body.home) the card floats over the dark hero, so
   the labels/values are white. On every other page the card sits on a
   LIGHT page background — switch to dark text (and a near-solid cream
   card) so it stays readable. Scoped with body:not(.home) so the
   homepage glass treatment is untouched.
   ============================================================ */
@media (min-width: 992px) {
  body:not(.home) .booking.booking-inner .booking-wrapper {
    background: linear-gradient(135deg,
      rgba(250, 250, 245, 0.96) 0%,
      rgba(245, 243, 237, 0.94) 100%) !important;
  }
  body:not(.home) .booking.booking-inner .booking-wrapper .date::before,
  body:not(.home) .booking.booking-inner .booking-wrapper .guests::before {
    color: #8a7048 !important;
    text-shadow: none !important;
  }
  body:not(.home) .booking.booking-inner .booking-wrapper .date .date-value,
  body:not(.home) .booking.booking-inner .booking-wrapper .guests .date-value,
  body:not(.home) .booking.booking-inner .booking-wrapper .date .day,
  body:not(.home) .booking.booking-inner .booking-wrapper .guests .qty-result-text {
    color: #2a3026 !important;
    text-shadow: none !important;
  }
  body:not(.home) .booking.booking-inner .booking-wrapper .date .month {
    color: #5a5040 !important;
    text-shadow: none !important;
  }
}

/* ============================================================
   25. MORE DETAILS card buttons — Uiverse tooltip button (CI sage)
   Adapted from Uiverse.io (mrhyddenn). White card at rest; on hover it
   fills with a CI sage gradient and a tooltip (room/venue name) pops up
   above. Original used blue — swapped to sage to stay on-palette.
   Tooltip uses .detail-tip (NOT .tooltip) to avoid Bootstrap's clash.
   Scoped to .btn-sm.btn-clean-dark = the MORE DETAILS / Read more cards.
   ============================================================ */
.btn.btn-sm.btn-clean-dark {
  position: relative !important;
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  background: #ffffff !important;
  color: #2a3026 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 13px 24px !important;
  font-weight: 600 !important;
  white-space: nowrap;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.10) !important;
  transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
.btn.btn-sm.btn-clean-dark .detail-tip {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: none;
  white-space: nowrap;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 12px;
  border-radius: 6px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.10);
  opacity: 0;
  pointer-events: none;
  z-index: 20;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btn.btn-sm.btn-clean-dark .detail-tip::before {
  position: absolute;
  content: "";
  height: 9px;
  width: 9px;
  background: #ffffff;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.btn.btn-sm.btn-clean-dark:hover .detail-tip {
  top: -44px;
  opacity: 1;
  pointer-events: auto;
}
.btn.btn-sm.btn-clean-dark:hover,
.btn.btn-sm.btn-clean-dark:hover .detail-tip,
.btn.btn-sm.btn-clean-dark:hover .detail-tip::before {
  background: linear-gradient(320deg, #4f5d45, #6b7c61) !important;
  color: #ffffff !important;
}

/* ============================================================
   26. expand-toggle (Read more / less) — match the §25 card button
   Same Uiverse-style white card → CI sage gradient on hover, to stay
   visually consistent with the MORE DETAILS buttons. No tooltip (this
   is a label-swapping toggle, not a named link). The two Time Traveller
   zones keep their accent colour on hover (Lost=bronze, Tomorrow=stone).
   ============================================================ */
.expand-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff !important;
  color: #2a3026 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 11px 26px !important;
  font-weight: 600;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.10) !important;
  transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
.expand-toggle:hover,
.expand-toggle:focus {
  background: linear-gradient(320deg, #4f5d45, #6b7c61) !important;
  color: #ffffff !important;
  outline: none;
}
.tt-section-lost .expand-toggle:hover,
.tt-section-lost .expand-toggle:focus {
  background: linear-gradient(320deg, #6e5733, #8a7048) !important;
  color: #ffffff !important;
}
.tt-section-tomo .expand-toggle:hover,
.tt-section-tomo .expand-toggle:focus {
  background: linear-gradient(320deg, #3a4a58, #4a5d6e) !important;
  color: #ffffff !important;
}

/* ============================================================
   27. bookdirect-link (TOKEN REDEMPTION CTA) — match §25/§26 card button
   Content link → token-redemption page (not the reservation engine), so
   it gets the same white-card → CI sage gradient hover for consistency.
   Keeps its arrow icon and the gap nudge on hover.
   ============================================================ */
.bookdirect-link {
  position: relative;
  background: #ffffff !important;
  color: #2a3026 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 13px 26px !important;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.10) !important;
  transition: background 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55),
              color 0.25s ease, box-shadow 0.25s ease, gap 0.25s ease !important;
}
.bookdirect-link:hover {
  background: linear-gradient(320deg, #4f5d45, #6b7c61) !important;
  color: #ffffff !important;
  gap: 14px;
}

/* ============================================================
   28. idx-wp-button (EXPLORE THE PARK) — match §25–27 card button
   Homepage water-park CTA. Sits on a dark section, so the white card
   reads well and turns CI sage on hover, consistent with the rest.
   Appended after the §-block above so it wins over the gold rule.
   ============================================================ */
.idx-wp-button {
  position: relative;
  background: #ffffff !important;
  color: #2a3026 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 30px !important;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.10) !important;
  transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
.idx-wp-button:hover {
  background: linear-gradient(320deg, #4f5d45, #6b7c61) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

/* ============================================================
   29. tt-cta-button (Time Traveller final CTA) — match §25–28 card button
   ============================================================ */
.tt-cta-button {
  position: relative;
  background: #ffffff !important;
  color: #2a3026 !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 14px 28px !important;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.10) !important;
  transition: all 0.25s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}
.tt-cta-button:hover {
  background: linear-gradient(320deg, #4f5d45, #6b7c61) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}