:root {
  --laelay-primary: #0B6670;
  --laelay-primary-hover: #084B54;

  --laelay-secondary: #1B7F83;
  --laelay-accent: #40E0D0;

  --laelay-surface: #E8F5F3;
  --laelay-surface-strong: #D6ECE9;
  --laelay-muted: #9ACFCC;

  --laelay-footer: #073D44;

  --laelay-white: #FFFFFF;
  --laelay-focus: rgba(64, 224, 208, 0.4);
}
.box-whyus-accom{
   background: rgba(11, 102, 112, 0.9);
}
.list-why .why-icon img,.readmore i img,.btn-discover i img {
  filter: brightness(0) saturate(100%) invert(39%) sepia(31%)
          saturate(1038%) hue-rotate(134deg) brightness(91%) contrast(88%);
}
/* color-02 */
/* :root {
  --laelay-primary: #1D5F8A;
  --laelay-primary-rgb: 29, 95, 138;

  --laelay-primary-hover: #15445F;
  --laelay-secondary: #2F789F;
  --laelay-accent: #A8D7EA;

  --laelay-surface: #EEF6FA;
  --laelay-surface-strong: #DDECF4;
  --laelay-muted: #A9C5D6;

  --laelay-footer: #102F46;

  --laelay-white: #FFFFFF;
  --laelay-focus: rgba(168, 215, 234, 0.4);

  --laelay-icon-filter: brightness(0) saturate(100%)
    invert(42%) sepia(31%) saturate(1167%)
    hue-rotate(158deg) brightness(93%) contrast(89%);
}


.box-whyus-accom {
  background: rgba(var(--laelay-primary-rgb), 0.9);
}
.list-why .why-icon img,
.readmore i img,
.btn-discover i img {
  filter: brightness(0) saturate(100%) invert(39%) sepia(31%)
    saturate(1038%) hue-rotate(134deg) brightness(91%) contrast(88%);
}
.list-why .why-icon img,
.readmore i img,
.btn-discover i img {
  filter: var(--laelay-icon-filter);
} */


/* color-03 */
/* 
:root {
  --laelay-primary: #273E74;
  --laelay-primary-rgb: 39, 62, 116;

  --laelay-primary-hover: #192A52;

  --laelay-secondary: #52689A;

  --laelay-accent: #BFD5E6;

  --laelay-surface: #F2F5FA;

  --laelay-surface-strong: #E4EAF3;

  --laelay-muted: #AEBBD0;

  --laelay-footer: #10182F;

  --laelay-white: #FFFFFF;

  --laelay-focus: rgba(191, 213, 230, 0.45);

  --laelay-icon-filter: brightness(0) saturate(100%)
    invert(43%) sepia(14%) saturate(1735%)
    hue-rotate(183deg) brightness(90%) contrast(84%);
} */


.box-whyus-accom {
  background: rgba(var(--laelay-primary-rgb), 0.9);
}

.list-why .why-icon img,
.readmore i img,
.btn-discover i img {
  filter: var(--laelay-icon-filter);
}

.header .header-logo img{
   width: 196px;
}
.color-ci,
.color-gold {
  color: var(--laelay-secondary);
}

.color-ci-2,
.color-red {
  color: var(--laelay-primary);
}

.color-primaybrown {
  color: var(--laelay-primary) !important;
}



.font-md,
.font-brown-md,
.main-resortunique .resortunique-title h3,
.main-package .package-title h3,
.main-accom .front-accom-txt h3,
.txt-title-review,
.guarantee-card h3,
.main-hoteltravel .hoteltravel-txt h3,
.accom-list-page .accom-list-title h3,
.resort-detail-row .resort-detail-info h2,
.deal-items .deal-info-title h3,
.deal-items .deal-info-title h2,
.contact-info h2,
.contact-social h2,
.page-blog-title h1,
.dining-list-page .items-row h3,
.participating-page .guest-content h4 {
  color: var(--laelay-primary);
}

.title-main h1 strong.content-title,
.title-main h2 strong.content-title,
.boxcontent-title h2 strong.content-title,
.page-accom-title h1 strong.content-title,
.readmore,
.btn-discover,
.list-hotels li::marker,
.nav-tabhotel-inner.arrow a.active h2 {
  color: var(--laelay-primary)!important;
}



.link-txt-gold,
.link-click.lgold,
.link-click.ungold,
.main-welcome .welcome-text a,
.main-welcome .welcome-text ul li::marker,
.main-welcome .welcome-text ol li::marker,
.title-main h1,
.title-main h2,
.boxcontent-title h2,
.page-accom-title h1,
.accomlist-header i,
.accomlist-review h3,
.list-why .why-icon,
.see-amenities,
.see-amenities:focus,
.see-amenities.collapsed,
.resort-detail-row .resort-detail-info h2 span.sub-title,
.resort-detail-row .resort-detail-info .sub-titlehead,
.resort-detail-row .resort-detail-info .sub-title,
.box-icon-items h3,
.page-blog-title .sub-title,
.blog-detail-items h4,
.blog-detail-items a,
.blog-detail-items ul li::marker,
.blog-detail-items ol li::marker,
.deal-items .deal-info-title .sub-title,
.deal-items .list-offer-inner ul li::marker,
.deal-listsdetail h1,
.deal-listsdetail h2 {
  color: var(--laelay-secondary);
}

.readmore-click,
.deal-items .list-offer-inner h4,
.resort-detail-row .resort-detail-info .benefit{
  color: var(--laelay-secondary) !important;
}

.link-txt-gold:hover,
.link-click.lgold:hover,
.link-click.ungold:hover,
.blog-detail-items a:hover,
.readmore-click:hover {
  color: var(--laelay-primary);
}


.readmore-full,
.btn-borderfull,
.btn-readmore,
.box-engine-main .btn-bhk-room,
.menu-booknow,
.btn-deal {
  background-color: var(--laelay-primary);
  border-color: var(--laelay-primary);
  color: var(--laelay-white);
}

.readmore-full:hover,
.btn-borderfull:hover,
.btn-readmore:hover,
.box-engine-main .btn-bhk-room:hover,
.menu-booknow:hover,
.btn-deal:hover {
  background-color: var(--laelay-primary-hover);
  border-color: var(--laelay-primary-hover);
  color: var(--laelay-white);
}

.btn-border:hover {
  background: var(--laelay-primary);
  border-color: var(--laelay-primary);
  color: var(--laelay-white);
}

.btn-ci.btn-detail,
.btn-detail:hover {
  background: var(--laelay-secondary);
  color: var(--laelay-white) !important;
}

.readmore-full.gold {
  background-color: var(--laelay-secondary);
}

.readmore-full.gold:hover {
  background-color: var(--laelay-primary);
}




.header-menu [class*="nav--"] a:hover,
.nav-menu-hotels ul a.active,
.nav-menu-hotels ul a:hover,
.sub-menu-hotels h3 {
  color: var(--laelay-secondary);
}

.wsmenu > .wsmenu-list > li > a.active,
.wsmenu > .wsmenu-list > li:hover > a,
.wsmenu > .wsmenu-list > li > a:hover i,
.wsmenu > .wsmenu-list > li > a.active i,
.wsmenu > .wsmenu-list > li:hover > a > i,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li:hover > a,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li:hover > a {
  color: var(--laelay-primary);
}

.wsmenu > .wsmenu-list > li > .wsmegamenu .title {
  color: var(--laelay-primary);
}

.wsmenu > .wsmenu-list > li > .wsmegamenu li a:hover {
  color: var(--laelay-secondary);
}

.page-location .header svg {
  fill: var(--laelay-primary) !important;
}

.header .button-hamburger,.resort-detail-row .resort-detail-info .benefit .tag-number {
  background: var(--laelay-primary);
}



.bar-promotion,
.is-sticky .bar-promotion,
.top-sticky {
  background: var(--laelay-primary);
  color: var(--laelay-white);
}

.slide-arrow .navigation,
.main-accom .navpage-accom .navigation {
  background: var(--laelay-primary)!important;
}

.slide-arrow .navigation:hover,
.main-accom .navpage-accom .navigation:hover {
  background: var(--laelay-primary-hover);
}

.slide-arrow .navigation.gold {
  background: var(--laelay-secondary);
}

.slide-arrow .navigation.swiper-button-disabled,
.slide-arrow .navigation.gold.swiper-button-disabled,
.main-accom .navpage-accom .navigation.swiper-button-disabled {
  background: var(--laelay-muted) !important;
}

.bullet-theam
.swiper-pagination-bullet.swiper-pagination-bullet-active::before {
  border-color: var(--laelay-accent);
}

.bullet-theam
.swiper-pagination-bullet.swiper-pagination-bullet-active::after {
  background: var(--laelay-accent);
}

.fancybox-thumbs__list a::before {
  border-color: var(--laelay-accent);
}



.filter-rooms a.active,
.filter-gallery li a.selected {
  background: var(--laelay-secondary);
  color: var(--laelay-white);
}



.filter-rooms a:hover,
.filter-rooms a:focus {
  background: var(--laelay-primary);
  color: var(--laelay-white);
}


.accomlist-header i,
.list-why .why-icon,
.see-amenities,
.list-hotels.gold li::marker {
  color: var(--laelay-secondary);
}

.why-choose-list .fa,
.why-choose-list i {
  color: var(--laelay-secondary);
}

.accom-price-box .readmore-full {
  background: var(--laelay-secondary);
}

.accom-price-box .readmore-full:hover {
  background: var(--laelay-primary);
}




.nav-tabhotel-inner li a::before {
  background: var(--laelay-primary);
}

.nav-tabhotel-inner li a.active,
.nav-tabhotel-inner li a:hover,
.nav-tabhotel-inner li a.active h2,
.nav-tabhotel-inner li a:hover h2 {
  color: var(--laelay-primary);
}

.faq-click {
  color: var(--laelay-primary);
  border-bottom-color: var(--laelay-secondary);
}

.faq-click::after {
  border-color: var(--laelay-secondary);
  background: var(--laelay-secondary);
}

.arrow-left .faq-click:hover,
.arrow-left .faq-click::before,
.arrow-plus .faq-click::before {
  color: var(--laelay-secondary);
}




.custom-control-input:checked ~ .custom-control-label::before,
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked
  + input[type="hidden"]
  + label::before {
  background-color: var(--laelay-secondary);
  border-color: var(--laelay-secondary);
}

.icheck-primary > input:first-child:not(:checked):not(:disabled):hover
  + label::before {
  border-color: var(--laelay-secondary);
}

.ui-datepicker-material-header {
  background-color: var(--laelay-primary);
}

.ui-datepicker-material-header .ui-datepicker-material-day {
  background-color: var(--laelay-primary-hover);
}

.ui-datepicker-calendar .ui-state-highlight {
  color: var(--laelay-secondary);
}

.ui-datepicker-calendar .ui-state-active {
  background-color: var(--laelay-primary);
  color: var(--laelay-white);
}

.ui-datepicker-buttonpane .ui-datepicker-close,
.ui-datepicker-buttonpane .ui-datepicker-current {
  color: var(--laelay-primary);
}

.ui-datepicker-buttonpane .ui-datepicker-close:hover,
.ui-datepicker-buttonpane .ui-datepicker-current:hover {
  background: var(--laelay-primary);
  color: var(--laelay-white);
}

.ui-datepicker-prev.ui-state-hover,
.ui-datepicker-next.ui-state-hover {
  background: transparent;
}




.tab-selectroom .filter-check .show-applied {
  color: var(--laelay-secondary);
}

.tab-selectroom .filter-check .show-applied .st0,
.tab-selectroom .filter-check.active .filter-ck-inner .st0 {
  fill: var(--laelay-secondary) !important;
}

.tab-selectroom .filter-check.active .filter-ck-inner {
  color: var(--laelay-secondary);
}




.front-theam,
.wrap-banner,
.main-package,
.main-bestguarantee,
.main-hoteltravel,
.boxcontent-items,
.main-page-accom .main-rooms,
.why-choose,
.page-accom .swiper-slide,
.data-table-meeting th,
.thead-meeting,
.termsconditions-page .termsconditions-section::before,
.termsconditions-page .terms-aside-menu::before {
  background-color: var(--laelay-surface);
}

.accom-price-box,
.aside-dealbox,
.page-nav-flexible .navflex-body,
.hero-gmap .tab-gmap {
  background-color: var(--laelay-surface-strong);
}

.bg-pistachio,
.main-hoteltravel.theam-light .hoteltravel-items,
.data-resorts thead th {
  background-color: var(--laelay-surface-strong);
}




.footer {
  background: var(--laelay-footer);
}

.footer-section h3,
.footer-social ul li a:hover,
.footer-social ul li a:hover i,
.join-mail label,
.join-mail .mail,
.link-footer ul li a:hover {
  color: var(--laelay-accent);
}




a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--laelay-accent) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 4px var(--laelay-focus);
}


@import url("https://fonts.googleapis.com/css2?family=Marcellus&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600&display=swap");




:root {
  --font-title: "Marcellus", "Times New Roman", serif;
  --font-body: "Source Sans 3", Arial, sans-serif;

  --font-title-adjust: 0.41;
}

html,
body {
  font-family: var(--font-body);
}

body {
  font-weight: 300;
}



button,
input,
optgroup,
select,
textarea {
  font-family: var(--font-body);
}



h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-title);
}




.font-lg,
.accom-list-page .accom-list-title h3 {
  font-family: var(--font-title);
}




h3,
.footer-section h3,
.title-main h3,
.main-welcome .welcome-text h2,
.main-accom .front-accom-txt h3,
.txt-title-review,
.accomlist-items h2,
.accomlist-header h2,
.why-choose h2,
.accomlist-review h3,
.resort-detail-row
  .resort-detail-items
  .resort-detail-info
  h2,
.box-whyus-accom h2,
.box-listhotels-items .box-listhotels-txt h3,
.box-icon-items h3,
.contact-info h2,
.terms-conditions h2 {
  font-family: var(--font-title);
}


.font-bold,
.readmore-click,
.readmore-full,
.main-resortunique .resortunique-title .sub,
.main-hoteltravel .hoteltravel-txt h3,
.accom-listsdetail h2,
.why-choose h3,
.accom-important h2,
.nav-tabhotel-inner li a,
.nav-tabhotel-inner li a h2,
.resort-detail-row .resort-detail-info .benefit,
.faq-click,
.deal-items .deal-info-title .sub-title,
.deal-listsdetail h5 {
  font-family: var(--font-title);
  line-height: 1.2;
}


.title-main h1,
.title-main h2,
.boxcontent-title h2,
.page-accom-title h1 {
  font-family: var(--font-title);
}


.slide-caption h2,
.slide-caption h3 {
  font-family: var(--font-title);
}


.wsmenu h1,
.wsmenu h2,
.wsmenu h3,
.wsmenu h4,
.wsmenu h5,
.wsmenu h6,
.wsmenu > .wsmenu-list > li > .wsmegamenu .title {
  font-family: var(--font-title);
}


.main-welcome .readmore-click,
.contact-info .readmore {
  font-family: var(--font-title);
}



.page-blog-title .sub-title,
.terms-conditions table.table th {
  font-family: var(--font-title);
}


.deal-items .offer-pernight,
.deal-items .offer-pernight strong,
.deal-items .offer-discounted,
.deal-items .offer-top,
.deal-items .clock,
.deal-listsdetail h1,
.deal-listsdetail h2 {
  font-family: var(--font-title);
}

.active-tabmobile .btn-select {
  font-family: var(--font-title);
}



.font-titlebody,
.readmore,
.btn-readmore span,
.header-blog .wsmenu > .wsmenu-list > li > a,
.wsmenu,
.wsmenu > .wsmenu-list > li > a,
.guarantee-card h3,
.tab-selectroom .nav-tabhotel-inner a,
.btn-gengine-room,
.resort-detail-row
  .resort-detail-items
  .resort-detail-info
  .title-open,
.box-listhotels-items
  .box-listhotels-title
  .mins-drive,
.deal-items .list-offer-inner h4,
.deal-items .dealoffer-price .offer-top,
.flexible-booking .readmore-full {
  font-family: var(--font-body);
  font-weight: 400;
}


.accom-price-box .readmore-full,
.box-engine-room .form-control,
.aside-dealbox.deal-items
  .dealprice-box
  .readmore-full {
  font-family: var(--font-body);
  font-weight: 300;
}


.ui-datepicker-material-header,
.ui-datepicker-calendar .ui-state-active,
.nav-menu-hotels ul a,
.menu-booknow,
.resort-detail-row
  .resort-detail-info
  h2
  span.sub-title,
.full-gallery
  .swiper-pagnumber
  .swiper-pagination {
  font-family: var(--font-body);
}


.header-menu [class*="nav--"] a {
  font-family: var(--font-body);
}



.wsmenu > .wsmenu-list > li > a,
.nav-menu-hotels ul a,
.header-menu [class*="nav--"] a,
.header-blog .wsmenu > .wsmenu-list > li > a {
  font-weight: 400;
}




.menu-booknow,
.btn-readmore span,
.btn-gengine-room,
.flexible-booking .readmore-full {
  font-weight: 600;
}




input::placeholder,
textarea::placeholder {
  font-family: var(--font-body);
  font-weight: 300;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  font-family: var(--font-body);
  font-weight: 300;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
  font-family: var(--font-body);
  font-weight: 300;
}



body,
button,
input,
select,
textarea {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}



h1,
h2,
h3,
h4,
h5,
h6,
.font-lg,
.font-bold,
.readmore-click,
.readmore-full,
.main-resortunique .resortunique-title .sub,
.nav-tabhotel-inner li a,
.resort-detail-row .resort-detail-info .benefit,
.faq-click,
.deal-items .deal-info-title .sub-title,
.wsmenu > .wsmenu-list > li > .wsmegamenu .title,
.contact-info .readmore,
.page-blog-title .sub-title,
.terms-conditions table.table th,
.deal-items .offer-pernight,
.deal-items .offer-discounted,
.deal-items .offer-top,
.deal-items .clock,
.active-tabmobile .btn-select {
  font-size-adjust: var(--font-title-adjust);
}




.font-titlebody,
.guarantee-card h3,
.tab-selectroom .nav-tabhotel-inner a,
.accom-price-box .readmore-full,
.aside-dealbox.deal-items
  .dealprice-box
  .readmore-full,
.flexible-booking .readmore-full,
.deal-items .list-offer-inner h4,
.deal-items .dealoffer-price .offer-top {
  font-size-adjust: none;
}

.main-welcome .welcome-text{
   font-size: 1em;
}


@media (max-width: 1699.98px) {
  .wsmenu > .wsmenu-list > li > a {
    padding: 40px 10px 40px 10px!important;
    font-size: 1.7rem!important;
  }
  .header{
    padding-left: 20px!important;
  }
}

@media (max-width: 1399.98px) {
  .wsmenu > .wsmenu-list > li > a {
    padding: 40px 7px 40px 7px!important;
    font-size: 1.6rem!important;
  }
  .header .header-logo img {
    width: 180px!important;
  }
}

@media (max-width: 1240px) {
  .wsmenu > .wsmenu-list > li > a {
    padding: 40px 8px 40px 8px!important;
    font-size: 1.5rem!important;
  }
  .header .header-logo img {
    width: 180px!important;
  }
}

@media (max-width: 1119.98px) {
  .header .header-logo {
    padding-left: 0;
  }
}

@media (max-width: 500px) {
  .header .header-logo img {
    width: 130px !important;
    height: auto!important;
  }
  .menu-booknow {
    padding: 0px 15px!important;
  }
   .menu-booknow a {
    font-size: 1.4rem;
   }
   .header {
    padding-left: 15px !important;
  }
}