@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@300;400&display=swap');

@font-face {
    font-family: 'DM Sans Light';
    src: url('../fonts/DMSans-Light.woff2') format('woff2'),
    url('../fonts/DMSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Marcellus';
    src: url('../fonts/Marcellus-Regular.woff2') format('woff2'),
    url('../fonts/Marcellus-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans Thai - Regular';
    src: url('../fonts/NotoSansThai-Regular.woff2') format('woff2'),
    url('../fonts/NotoSansThai-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Noto Sans Thai - Light';
    src: url('../fonts/NotoSansThai-Light.woff2') format('woff2'),
    url('../fonts/NotoSansThai-Light.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


::selection {
    background-color: var(--primary-color);
    color: var(--white);
}
body {
    padding: 0;
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.3;
    overflow-x: hidden;
    color: var(--body-color);
    background-color: var(--light-color);
}
a {
    color: inherit;
    cursor: pointer;
    text-transform: capitalize;
    text-decoration: none;
    transition: all .25s;
}
a:hover {
    color: var(--primary-color);
}
button, input {
    outline: none;
}
select {
    -webkit-appearance: inherit;
    -moz-appearance: inherit;
    appearance: inherit;
    list-style: none;
    font-size: inherit;
    letter-spacing: initial;
    outline: none;
    font-family: inherit;
}
h1, h2 , h3, h4 {
    padding: 0;
    margin: 0;
    font-weight: inherit;
    font-family: var(--font-header);
    color: var(--black);
}
h1, h2, h3, h4 {
    text-transform: capitalize;
}
h1 {
    font-size: 32px;
}
h2 {
    font-size: 28px;
}
h3 {
    font-size: 24px;
}
h4 {
    font-size: 20px;
}
p {
    margin-bottom: 0;
    margin-top: 10px;
}
figure {
    margin: 0;
}
ul, li {
    list-style: none;
    padding: 0;
    margin: 0;
}
img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
.clearfix::before {
    display: table;
    content: "";
}
.thai_lang .reservation-box, .thai_lang .input_in_out, .thai_lang h1,.thai_lang h2,.thai_lang h3,.thai_lang h4,.thai_lang h5, .thai_lang .slide-main-heading, .thai_lang .from-right,
.thai_lang body, .thai_lang p, .thai_lang .btn_style1, .thai_lang .reservation-check select, .thai_lang .tagline, .thai_lang .main_menu li, .thai_lang .tagline_offers, .thai_lang .contact_info span,
.thai_lang .slide_facilities .slick-active .box_facilities::before{
    font-family: var(--font-thai) !important;
}
.fix_body {
    overflow: hidden;
}

/*-------------------------------------*/
/* BANNER */
/*-------------------------------------*/
.popup_banner {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgb(0 19 20 / 80%);
    z-index: 10;
}
.detail_pop {
    position: fixed;
    width: 450px;
    height: max-content;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
}
.d_popup {
    position: relative;
}
.d_popup .title_banner img {
    height: 50px;
}
.c_popup {
    position: absolute;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--primary-color);
    display: inline-block;
    right: -23px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    padding: 10px;
    top: -22px;
}
.c_popup img {
    width: auto;
    height: 20px;
    transform: rotate(90deg);
    transition: all .6s;
    filter: brightness(0) invert(1);
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
    left: 0;
    right: 0;
}
.c_popup:hover img {
    transform: rotate(-90deg);
}
.overf {
    overflow: hidden;
}
.new_popup .item img {
    width: 100%;
}
/*-------------------------------------*/
/* HEADER */
/*-------------------------------------*/
.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #fff;
    z-index: 2;
}
.main-header .container {
    padding: 0;
    max-width: 100% !important;
}
.box_header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.box_logo {
    align-items: center;
    padding: 16px 30px;
    float: left;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}
.box_logo img {
    height: auto;
    filter: brightness(0) invert(1);
    width: 130px;
    transition: all 0.5s;
}
.top_bar {
    align-items: center;
    font-size: 14px;
    display: flow-root;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.top_bar:last-child {
    border-bottom: none;
}
.col_left {
    float: left;
}
.col_right {
    float: right;
    padding: 15px 30px;
}
.col_right.col_book {
    padding: 0 30px 0 0;
}
.icon-check:before {
    vertical-align: middle;
}
.contact_info li{
    padding: 15px 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    float: left;
    position: relative;
}
.contact_info .lang_parent li {
    border-right: none;
    width: auto;
    line-height: normal;
}
.contact_info span {
    margin-left: 5px;
}
.contact_info i {
    vertical-align: middle;
}
.btn_lang {
    background-color: inherit;
    color: var(--white);
    padding: 0;
    border: none;
}
.box_lang:hover .lang_parent {
    opacity: 1;
    bottom: -38px;
    transform: translateY(0);
}
.lang_parent{
     opacity: 0;
     position: absolute;
     background-color: var(--white);
    transform: translateY(-1em);
    transition: all 0.25s;
 }
.lang_parent.active {
    display: block;
    bottom: -38px;
}
.lang_parent li {
    display: block;
    text-align: left;
    padding: 10px 20px;
}
.lang_parent li.active {
    display: none;
}
.lang_parent li a:hover{
    color: var(--primary-color) !important;
}
.lang_parent:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    top: 0;
    box-sizing: border-box;
    border: 6px solid var(--white);
    transform-origin: 0 0;
    transform: rotate(135deg);
    box-shadow: rgba(0, 0, 0, 0.05) -2px 2px 2px 0;
    right: 10px;
    margin: auto;
}
.lang_parent a {
    color: var(--body-color) !important;
}
/* --- Main Navigation Bar --- */
.main-nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* --- Main Menu --- */
.main_menu {
    padding: 0 30px;
    float: left;
}
.main_menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.main_menu li {
    float: left;
    padding-right: 15px;
    line-height: 50px;
}
.main_menu li a {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.5);
    display: block;
    transition: color 0.3s;
}
.main_menu li a.active, .main_menu li a:hover {
    color: #fff;
}
.dropdown_new .dropdown_menu {
    background: #fffffff2;
    opacity: 0;
    position: absolute;
    pointer-events: none;
    transform: translateY(-2em);
    transition: all .5s;
}
.main_menu .dropdown_menu li a {
    color: var(--body-color);
}
.main_menu .dropdown_menu li a:hover {
    color: var(--white);
    background: var(--primary-color);
}
.dropdown_menu li {
    width: 100%;
    padding: 0 !important;
    margin: 0;
    white-space: nowrap;
    border: none;
    line-height: initial;
    float: none;
}
.dropdown_menu a {
    line-height: normal;
    padding: 10px;
    text-align: left;
    display: inline-block;
    width: 100%;
}
.dropdown_new:hover .dropdown_menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.scroll_menu {
    position: fixed;
    box-shadow: rgba(0, 0, 0, 0.09) 0 0 10px;
    background: #fffaf5f7;
    transition: all 0.5s;
}
.scroll_menu .top_bar:first-child {
    display: none;
}
.scroll_menu .main_menu li {
    line-height: 60px;
}
.scroll_menu .main_menu li a {
    color: var(--body-color);
}
.scroll_menu .main_menu li a.active {
    color: var(--primary-color);
}
.scroll_menu .main_menu .dropdown_menu li a:hover {
    color: var(--white);
}
.scroll_menu .box_logo img {
    filter: none;
    width: 80px;
}
.scroll_menu .box_logo {
    border-right: 1px solid #dddddd;
    padding: 9px 30px;
}
.scroll_menu .top_bar:last-child {
    line-height: 30px;
}
.scroll_menu .box_header {
    border-bottom: none;
}
.scroll_menu.main-header .container, .scroll_menu.main-header .col_right.col_book{
    padding: 0;
}
.scroll_menu .box_booknow .btn_style2 {
    line-height: 40px;
}
.nav_booknow_mobile {
    display: none;
}
/*-------------------------------------*/
/* MENU MOBILE */
/*-------------------------------------*/
.menu_mobile {
    display: none;
    position: relative;
    cursor: pointer;
    color: var(--white);
    padding: 0 30px;
    transition: all 500ms ease;
}
.scroll_menu .menu_mobile {
    color: var(--body-color);
}
.scroll_menu .menu_mobile .hamburger.active {
    color: var(--white);
}
.hamburger {
    height: 100%;
    line-height: 50px;
    float: left;
    z-index: 11;
    cursor: pointer;
    transition: all 0.6s;
}
.bar_hamburger {
    position: relative;
    width: 30px;
    /* height: 100%; */
    display: inline-block;
    top: -14px;
    margin-right: 10px;
}
.hamburger label {
    float: right;
    position: relative;
    cursor: pointer;
}
.hamburger:hover {
    opacity: 1;
}
.hamburger.active .top {
    -webkit-transform: translateY(8px) translateX(0) rotate(45deg);
    transform: translateY(8px) translateX(0) rotate(45deg);
    background: var(--white) !important;
}
.hamburger.active .middle {
    opacity: 0;
    background: var(--white);
}
.hamburger.active .bottom {
    -webkit-transform: translateY(-8px) translateX(0) rotate(-45deg);
    transform: translateY(-8px) translateX(0) rotate(-45deg);
    background: var(--white) !important;
}
.bar_hamburger span {
    border: none;
    height: 1px;
    width: 100%;
    position: absolute;
    transition: all .35s ease;
    cursor: pointer;
    background: var(--white);
    display: block;
}
.main-header.scroll_menu .bar_hamburger span {
    background: var(--primary-color);
}
.bar_hamburger span:nth-of-type(2) {
    top: 8px;
}
.bar_hamburger span:nth-of-type(3) {
    top: 16px;
}
.scroll_menumobile {
    overflow: scroll;
    display: inline-block;
    width: 100%;
    height: 80%;
    margin-top: 120px;
}
.navbar_fix {
    padding: 0 50px !important;
    display: inline-block;
    width: 100%;
}
.overlay_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(300px);
    transition: all 500ms ease-in-out;
    overflow: hidden;
    z-index: 9;
    background: var(--primary-color);
}
.overlay_menu.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-0);
}
.overlay_menu.open li {
    -webkit-animation: fadeInUp .5s ease forwards;
    animation: fadeInUp .5s ease forwards;
    -webkit-animation-delay: .35s;
    animation-delay: .35s;
}

.overlay_menu.open li:nth-of-type(2) {
    -webkit-animation-delay: .40s;
    animation-delay: .40s;
}

.overlay_menu.open li:nth-of-type(3) {
    -webkit-animation-delay: .45s;
    animation-delay: .45s;
}

.overlay_menu.open li:nth-of-type(4) {
    -webkit-animation-delay: .50s;
    animation-delay: .50s;
}

.overlay_menu.open li:nth-of-type(5) {
    -webkit-animation-delay: .55s;
    animation-delay: .55s;
}

.overlay_menu.open li:nth-of-type(6) {
    -webkit-animation-delay: .60s;
    animation-delay: .60s;
}

.overlay_menu.open li:nth-of-type(7) {
    -webkit-animation-delay: .65s;
    animation-delay: .65s;
}

.overlay_menu.open li:nth-of-type(8) {
    -webkit-animation-delay: .70s;
    animation-delay: .70s;
}

.overlay_menu nav {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    text-align: center;
}
.overlay_menu ul li {
    display: block;
    position: relative;
    padding: 5px 0;
    opacity: 0;
    width: 100%;
    line-height: normal;
}
.overlay_menu ul li a {
    display: block;
    position: relative;
    color: var(--white);
    opacity: .5;
    text-decoration: none;
    overflow: hidden;
    line-height: inherit;
    transition: all 0.5s;
}
.overlay_menu ul li a:hover,
.overlay_menu ul li a.active,
.navbar_fix .active > a,
.base_plus_icon.active .plus_icon:before,
.base_plus_icon.active .plus_icon:after {
    opacity: 1 !important;
    color: var(--secondary-color);
}
.navbar_fix .active .base_plus_icon .plus_icon:before,
.navbar_fix .active .base_plus_icon .plus_icon:after {
    background-color: var(--secondary-color);
    opacity: 1;
}
.overlay_menu ul li a:hover:after,
.overlay_menu ul li a:focus:after,
.overlay_menu ul li a:active:after {
    width: 100%;
}
.overlay_menu .active:after {
    content: none;
}
.base_plus_icon{
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 100%;
    z-index: 55;
    cursor: pointer;
    display: block;
}
.base_plus_icon .plus_icon{
    position: absolute;
    width: 20px;
    height: 20px;
    right: 0;
    top: 4px;
    display: block;

}
.base_plus_icon .plus_icon:before,
.base_plus_icon .plus_icon:after{
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--white);
    margin: auto;
    display: block;
    transition: all 0.6s;
}
.base_plus_icon:hover .plus_icon:before,
.base_plus_icon:hover .plus_icon:after{
    background-color: var(--white);
}
.base_plus_icon .plus_icon:before{
    width: 1px;
    height: 20px;
    opacity: .5;
}
.base_plus_icon .plus_icon:after{
    width: 20px;
    height: 1px;
    opacity: .5;
}
.base_plus_icon .plus_icon.active:before{
    display: none;
}
.info {
    display: none;
    padding: 10px 15px 0!important;
}
.info.active {
    display: block !important;
}
.info li{
    padding: 5px!important;
}
/*************************/
/* SLIDERS */
/*************************/
.creative-parallax-slider {
    z-index: 0;
    overflow: hidden;
}
.slider-wrap {
    background: #000000;
    height: 100vh;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    position: relative;
    transition: all .4s ease;
}
.swiper-slide-inner {
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    height: 100%;
    width: 100%;
}
.swiper-slide{
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.slide-bg {
    z-index: 0;
    visibility: inherit;
    font-weight: 400;
    white-space: nowrap;
    background-color: rgb(0 0 0 / 20%);
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: auto;
    top: 0;
    right: 0;
}
/*.swiper-slide-active .slide-bg{*/
/*    animation: zoomInBg 1.5s ease forwards;*/
/*}*/
.slide-detail {
    width: 100%;
    padding: 0 100px;
    z-index: 1;
    align-content: center;
    text-transform: capitalize;
    color: var(--white);
    text-align: left;
}
.swiper-button-next,
.swiper-button-prev {
    margin-top: 0;
    width: auto;
    height: auto;
    top: auto;
    bottom: 50px;
    background-image: none;
    -webkit-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
    font-size: 15px;
    color: var(--white);
    display: flex;
    opacity: .5;
}
.swiper-button-next {
    right: 100px;
}
.swiper-button-prev {
    left: 100px;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
    opacity: 1;
}
.swiper-button-next:before {
    content: '';
}
.slide-main-heading {
    display: block;
    line-height: normal;
    text-shadow: rgb(0 0 0 / 5%) 3px 3px 15px;
    font-size: 50px;
    white-space: normal;
    text-transform: capitalize;
    font-family: var(--font-header);
}

.thai_lang .slide-main-heading {
    line-height: 70px;
}
.thai_lang .swiper-slide-active .from-right {
    line-height: normal;
}
.from-left, .from-right {
    opacity: 0;
    filter: blur(4px);
    transition: opacity 0.5s ease, filter 0.5s ease;
}

.swiper-slide-active .from-left, .swiper-slide-inner.no-images .from-left{
    animation: fadeInLeft 1s ease forwards;
    animation-delay: .5s;
}
.swiper-slide-active .from-right, .swiper-slide-inner.no-images .from-right{
    animation: fadeInRight 1s ease forwards;
    animation-delay: .5s;
    margin-top: 5px;
}
.slide-des {
    /*line-height: 25px;*/
    color: var(--white);
    opacity: 0;
}
.swiper-slide-active .slide-des {
    transition: opacity .5s ease, filter 0.5s ease;
    animation: fadeUp .8s ease forwards;
    animation-delay: 1s;
}
.swiper-slide .img-container, .no-images .img-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition-timing-function: linear;
    transition-duration: 20s;
    transform: scale(1);
}
.swiper-slide .img-container img {
    transform-origin: 50% 50%;
}
.swiper-slide-active .img-container {
    transform: scale(1.3);
}
/* Keyframe animations for Description */
@keyframes fadeUp {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0);
        filter: blur(0);
    }
}
/* Keyframe animations for Main Heading */
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}
@keyframes fadeInRight {
    0% {
        opacity: 0;
        transform: translateX(50px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
        filter: blur(0);
    }
}
/* Keyframe animations for background */
@keyframes zoomInBg {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
.swiper-pagination-bullet-active {
    background: var(--white);
    opacity: 1;
}
.swiper-pagination-bullet-active:after {
    border: 1px solid var(--white);
    content: '';
    height: 16px;
    width: 16px;
    display: block;
    border-radius: 100%;
    position: absolute;
    top: 3px;
    bottom: 4px;
    margin: auto;
    left: -5px;
}
.swiper-pagination-bullet {
    background: var(--white);
    width: 6px;
    height: 6px;
    position: relative;
}
.swiper-container-horizontal>.swiper-pagination-bullets {
    bottom: 50px;
}
.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 7px;
}
.slide-social {
    position: absolute;
    color: #fff;
    right: 100px;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    z-index: 1;
    font-size: 18px;
    bottom: 0;

    display: flex;
    flex-wrap: wrap;
    align-content: center;
}
.slide-social li {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(20px) !important;
    background: rgba(255,255,255,0.08);
    transition: background .4s, transform .4s;
    margin: 5px 0;
}
.slide-social li:hover {
    background: var(--primary-color);
    transform: translateX(-5px);
}
.slide-social a:hover{
    color: #fff;
}
.slide-social i:before {
    vertical-align: middle;
}

/*-------------------------------------*/
/* BASIC */
/*-------------------------------------*/
.flex-center{
    display:-webkit-box;
    display: -webkit-flex;
    /*display:-ms-flexbox;*/
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-box-pack:center;
    -ms-flex-pack:center;
    justify-content:center
}
section {
    position: relative;
}
.btn_style1 {
    position: relative;
    padding: 9px 14px;
    transition: all .5s ease;
    border: none;
    background: none;
    cursor: pointer;
    display: inline-block;
    margin-top: 10px;
    overflow: hidden;
    width: fit-content;
    width: -webkit-fit-content;
}
.btn_style1:hover {
    color: var(--white) !important;
}
.btn_style1::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    background-color: var(--primary-color);
    z-index: -1;
    transition: all .5s ease;
    border-radius: 30px;
}
.btn_style1:hover::before {
    width: 100%;
}
.btn_style1:active:before {
    background: var(--primary-color);
}
.btn_style1::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 38px;
    height: 100%;
    color: var(--white);
    overflow: hidden;
    transition: all .5s ease;
    pointer-events: none;
    white-space: nowrap;
    padding: 9px 14px;
}

.btn_style1:hover::before {
    width: 100%;
}
.btn_style1:hover::after {
    color: var(--white) !important;
}

.btn_style2 {
    background-color: var(--primary-color);
    padding: 10px 30px;
    display: inline-block;
    transition: all 0.5s;
    cursor: pointer;
    height: 100%;
    position: relative;
    line-height: 30px;
}
.btn_style2:hover::before {
    transform: scaleX(1);
}
.btn_style2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    transform: scaleX(0);
    transform-origin: 0 50%;
    width: 100%;
    height: inherit;
    border-radius: inherit;
    background: var(--white);
    transition: all 0.475s;
}
.btn_style2:hover .btn_style2_content {
    position: relative;
    z-index: 1;
    color: var(--primary-color);
}
.box_booknow.active .btn_style2.btn_booknow {
    display: none;
}
.email {
    text-transform: lowercase;
}
.text_animate {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
    transition: opacity 0.8s ease, transform 0.8s ease, filter 0.8s ease;
}

.text_animate.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}

.box_images,.box_accommodation {
    position: relative;
    overflow: hidden;
    transition: opacity 1s ease, transform 1.2s ease;
    will-change: opacity, transform;
    width: 100%;
    height: 100%;
}

.box_images img, .box_accommodation img {
    width: 100%;
    display: block;
    transition: transform 0.8s ease-out;
    will-change: transform;

}
/*-------------------------------------*/
/* SECTION DESCRIPTION */
/*-------------------------------------*/
.section_descriptions  {
    position: relative;
    padding: 0;
    background-position: center;
    text-align: left;
}
.section_bg {
    background-image: url('../images/parallax-1.jpg');
    background-size: cover;
    position: relative;
    background-position: center;
}
.section_bg:before {
    content: '';
    background-color: var(--bg-main);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.section_bg.bg_haft:after {
    content: '';
    background: var(--light-color);
    width: 100%;
    height: 200px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.section_bg.bg_haft, .section_bg.bg_full {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
.content {
    padding: 100px 0;
    overflow: hidden;
    position: relative;
}
.box_descriptions {
    width: 80%;
    margin: auto;
    /*z-index: 1;*/
    text-align: center;
    position: relative;
}
.box_descriptions h1 span,
.box_content_gallery h3 span {
    display: block;
}
.bg_content, .bg_content h1, .bg_content h2, .bg_content h3 {
    color: var(--white);
}
.bg_content p {
    color: var(--gray);
}
.tagline {
    display: block;
    margin-bottom: 10px;
    text-transform: capitalize;
    color: var(--primary-color);
}
.bg_content .tagline {
    color: var(--secondary-color);
}
/*-------------------------------------*/
/* SLICK SLIDE */
/*-------------------------------------*/
.slick-dots button {
    width: 6px;
    height: 6px;
    background-color: var(--primary-color);
    opacity: .5;
    transition: all .5s;
}
.slick-dots li.slick-active button {
    background-color: var(--primary-color);
    opacity: 1;
}
.slick-dots li {
    padding: 5px;
}
.slick-dots li.slick-active {
    border: 1px solid var(--primary-color);
    border-radius: 100%;
}
.section_bg .slick-dots button {
    background-color: var(--secondary-color);
}
.section_bg .slick-dots li.slick-active button {
    background-color: var(--secondary-color);
}
.section_bg .slick-dots li.slick-active {
    border: 1px solid var(--secondary-color);
}

/*-------------------------------------*/
/* SECTION OFFERS */
/*-------------------------------------*/
.section_offers .content {
    padding: 0 0 100px;
}
.slide_offers .slick-slide {
    overflow: hidden;
    position: relative;
}
.slide_offers .box_images {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.slide_offers .box_images::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #0000001a;
    transition: transform 0.5s ease-out;
    will-change: transform;
    pointer-events: none;
}

.text_offers {
    position: absolute;
    left: 0;
    padding: 30px;
    bottom: -80px;
    z-index: 2;
    transition: all 0.5s;
    color: var(--gray);
}
.text_offers .tagline_offers,
.text_offers .btn_style1 {
    opacity: 0;
    transition: all 0.5s;
}
.text_offers h3 {
    color: var(--white);
}

.tagline_offers {
    display: block;
    margin-top: 10px;
}
.slide_offers {
    margin-bottom: 100px;
}
.slide_offers .slick-slide,
.slide_accommodation .slick-slide {
    transition: margin-top 0.5s ease;
}

.slide_offers .slide:hover .text_offers {
    bottom: 0;
}
.slide_offers .slide:hover .text_offers .tagline_offers, .slide_offers .slide:hover .text_offers .btn_style1 {
    opacity: 1;
}
.slick-arrow {
    background: var(--primary-color);
}
.slick-arrow:hover {
    background: var(--secondary-color);
}
.slide_offers .slick-next,
.slide_offers .slick-prev {
    display: none !important;
}
.slide_offers .slick-track {
    margin: auto;
}
/*-------------------------------------*/
/* SECTION FACILITIES */
/*-------------------------------------*/
.section_facilities {
    overflow: hidden;
}
.slide_facilities {
    counter-reset: list-slider;
}
.slide_facilities .slide {
    counter-increment: list-slider;
}
.slide_facilities .slick-list {
    width: 388px;
    margin: auto;
    overflow: inherit;
}
.slide_facilities .box_facilities {
    height: 450px;
    overflow: hidden;
    padding-top: 50px;
}
.slide_facilities .box_images {
    width: 100%;
    float: right;
}
.slide_facilities .slick-active .box_images {
    width:90%;
}
.slide_facilities .btn_style1::before {
    background-color: #06a9b3;
}
.text_facilities {
    opacity: 0;
    position: absolute;
    left: 25px;
    transition: opacity 350ms ease;
    color: var(--white);
    z-index: 1;
    top: 0;
    bottom: -50px;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    height: 100%;
    padding-top: 50px;
}
.text_facilities h3 {
    color: var(--white);
    width: 100%;
    font-size: 32px;
    transition: transform 500ms ease;
    transition-delay: 100ms;
    transform: translateY(-25%);
}
.thai_lang .text_facilities h3 {
    width: 100%;
}
.slick-active .text_facilities h3,.slide_facilities .slick-active .btn_style1 {
    transform: translateY(0);
}
.slide_facilities .btn_style1 {
    transform: translateY(25%);
    transition: transform 500ms ease;
    transition-delay: 200ms;
}
.slide_facilities .box_facilities::before {
    content: "0" counter(list-slider);
    position: absolute;
    left: 25px;
    top: 0;
    font-size: 90px;
    font-weight: 600;
    line-height: 0.8;
    color: white;
    transform: scale(.1);
    opacity: 0;
    z-index: -1;
    transition: all 400ms ease;
}
.slide_facilities .slick-active .box_facilities::before {
    opacity: 0.4;
    transform: scale(1);
}
.slide_facilities .slick-arrow {
    display: none !important;
}
.slide_facilities .slick-slide.slick-active {
    pointer-events: auto;
}

.slide_facilities .slick-slide {
    transition: all 0.6s;
    transform: scale(1);
    -webkit-transform: scale(1);
    padding: 0 25px;
    pointer-events: none;
}
.slide_facilities .slick-slide:hover .btn_style1::before {
    width: 100%;
}
.slide_facilities .slick-slide.slick-current.slick-active .text_facilities {
    opacity: 1;
}
.slide_facilities .slick-cloned {
    opacity: 0;
}
/*-------------------------------------*/
/* SECTION ACCOMMODATIONS */
/*-------------------------------------*/
/*.slide_accommodation .slide:hover {*/
/*    cursor: url('../images/icon/drag.svg') 36 36, auto;*/
/*}*/
.slide_accommodation {
    /*cursor: none;*/
    z-index: 1;
}
.slide_accommodation .slide:hover .btn_style1::before {
    width: 100%;
}
.text_accommodations p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-align: left !important;
    overflow: hidden;
}
#custom-cursor {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    background-color: #008c94b5;
    color: #ffffff;
    border-radius: 100%;
    z-index: 9999;
    display: none;
    width: 80px;
    height: 80px;
    align-content: center;
    text-align: center;
    transform: translate(-50%, -50%);
}
.section_accommodations .section_bg.bg_haft:after,
.section_other .section_bg.bg_haft:after {
    top: 0;
}
.box_accommodation {
    height: 350px;
    position: relative;
}
.text_accommodations {
    position: absolute;
    bottom: 0;
    transition: opacity 350ms ease;
    color: var(--gray);
    padding: 30px;
    z-index: 2;
}
.text_accommodations h3 {
    color: var(--white);
}
.box_accommodation::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#131B1C00, #131B1C);
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}
.slide_accommodation .slick-list {
    margin-right: -10px;
    margin-left: -10px;
}
.slide_accommodation .slick-slide {
    padding: 0 10px;
}
.slide_accommodation .slick-arrow {
    display: none !important;
}
.section_accommodations .amenity_descriptions {
    position: relative;
}
.bg {
    position: absolute;
    top: 90px;
    overflow: hidden;
    height: 110px;
    width: 100%;
    z-index: 1;
}
.bg .flow_txt {
    position: relative;
    z-index: -2;
    opacity: .1;
    font-size: 100px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    animation: flow 20s linear infinite ;
    -webkit-animation: flow 20s linear infinite;
    -moz-animation: flow 20s linear infinite;
    -ms-animation: flow 20s linear infinite;
    -o-animation: flow 20s linear infinite;
    text-transform: capitalize;
}
@keyframes flow {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* ROOM AMENITIES */
.amenity-list {
    text-align: center;
    font-size: 0;
    padding-top: 50px;
    width: 80%;
    margin: auto;
}
.amenity-item {
    width: calc(17% - 2%);
    margin: 0 2% 20px 0;
    display: inline-block;
    vertical-align: text-top;
    font-size: 16px;
}
.amenity-item:nth-child(6n) {
    margin-right: 0;
}
.amenity-item:last-child {
    margin-right: 0 !important;
}
.amenity-set {
    min-height: 120px;
    align-content: center;
    transition: transform .6s ease, filter .6s ease;
}
.images_icon {
    object-fit: cover;
    display: inline-block;
    width: 50px;
    height: 50px;
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
    background: var(--secondary-color);

}
.amenity-item:hover .amenity-set {
    transform: translateY(-6px) scale(1.05);
}

.amenity-item p {
    margin-top: 5px;
    text-transform: capitalize;
}
.amenity-animate {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.amenity-animate.active {
    opacity: 1;
    transform: translateY(0);
}
/*-------------------------------------*/
/* PAGE PAGE CHILD */
/*-------------------------------------*/
.section_contentchild .list_contentchild {
    position: relative;
    padding: 100px 0;
}
.section_contentchild .box_child {
    position: relative;
    display: inline-flex;
}
.section_contentchild .box_child .tagline {
    margin-top: 10px;
    margin-bottom: 0;
}
.section_contentchild .box_child .btn_style1 {
    margin-top: 12px;
}
.section_contentchild .box_child .box_images_content {
    transition: .5s;
    position: relative;
    order: 1;
    height: 400px;
}

.section_contentchild .box_child .box_images_content.box_images_offers {
    height: auto;
}
.section_contentchild .list_contentchild:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(50% - 100px);
    height: 100%;
    background: var(--background-color);
    z-index: -1;
}
.section_contentchild .box_child .big_image {
    overflow: hidden;
    width: calc(100% - 50px);
    height: calc(100% - 50px);
}
.section_contentchild .box_child .small_image {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 200px !important;
    width: 200px;
    overflow: hidden;
}
.section_contentchild .box_child .full_image {
    display: grid;
}
.section_contentchild .box_child .box_content {
    margin: auto;
    align-content: center;
    padding: 50px 0 50px 50px;
    order: 2;
}
.section_contentchild .box_child .box_content p {
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.section_contentchild .box_child .box_content .btn_style1 {
    z-index: 1;
}
.section_contentchild .box_child .box_content ul {
    margin: 10px 0;
    padding-left: 30px;
}
.section_contentchild .box_child .box_content li {
    list-style: disc;
}
.section_contentchild .list_contentchild:nth-child(even) .box_child .box_images_content {
    order: 2;
}
.section_contentchild .list_contentchild:nth-child(even) .box_child .box_content {
    order: 1;
    padding: 50px 50px 50px 0;
}
.section_contentchild .list_contentchild:nth-child(even)::before{
    right: 0;
    left: auto;
    background: rgb(0 139 148 / 20%);
}

/*-------------------------------------*/
/* PAGE PAGE INFO */
/*-------------------------------------*/
.slide_infophotos .slick-slide {
    overflow: hidden;
    position: relative;
}
.slide_infophotos .box_images {
    height: 400px;
    overflow: hidden;
    position: relative;
}
.slide_infophotos {
    margin-bottom: 100px;
}
.slide_infophotos .slick-slide {
    transition: margin-top 0.5s ease;
}
.infophotos:focus {
    outline: none;
}
.slide_infophotos .slide {
    cursor: zoom-in;
}
/*.slide_infophotos .slick-next,*/
/*.slide_infophotos .slick-prev {*/
/*    display: none !important;*/
/*}*/
.slide_infophotos .slick-track {
    margin: auto;
}
.slide_infophotos .slick-slide {
    padding: 0 10px;
}
.slide_other {
    margin-top: 50px;
    z-index: 1;
}
.slide_other .slick-slide {
    padding: 0 10px;
}
.slide_other .slick-list, .slide_infophotos .slick-list  {
    margin-right: -10px;
    margin-left: -10px;
}
.slide_other .slide:hover .btn_style1::before {
    width: 100%;
}
.slide_other .slick-arrow {
    display: none !important;
}
.slide_infophotos .slick-next.slick-disabled {
    display: none !important;
}
.slide_infophotos .slick-arrow {
    display: none !important;
}
/*-------------------------------------*/
/* GALLERY */
/*-------------------------------------*/
.lg-outer .lg-thumb-item {
    border-radius: 0;
}
.lg-outer .lg-thumb-item.active,
.lg-outer .lg-thumb-item:hover {
    border-color: var(--primary-color);
}
.lg-sub-html p {
    margin: 0;
    font-size: 15px;
    text-transform: capitalize;
}
.box_gallery.box_images {
    height: 350px;
}
.section_gallery [class*="col-"] {
    padding: 10px;
}
.section_gallery .row {
    margin-top: -10px;
    margin-bottom: -10px;
}
.section_gallery .item {
    position: relative;
    cursor: zoom-in;
}
.text_gallery {
    color: #ffffff;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    text-align: center;
    z-index: 1;
}
.box_gallery:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transition: all .5s;
    pointer-events: none;
    background: rgb(0 140 148 / 50%);
    opacity: 0;
}
.box_gallery:hover:after {
    opacity: 1;
}
.box_gallery .text_gallery h4 {
    color: #ffffff;
    -webkit-transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

.box_gallery .text_gallery p {
    padding: 0 0 25px;
    opacity: 0;
    -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
    transition: opacity 0.35s, transform 0.35s;
    -webkit-transform: translate3d(0,10px,0);
    transform: translate3d(0,10px,0);
}

.box_gallery:hover h4,
.box_gallery:hover p {
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
/*-------------------------------------*/
/* CONTACT US */
/*-------------------------------------*/
.section_contentchild .box_child.box_child_contact .box_content p {
    display: inline-block;
}
.section_contentchild .box_child.box_child_contact .box_content {
    padding: 0 0 0 50px;
}
.section_contentchild .box_child .box_images_content.box_images_contact {
    height: 100%;
}
.box_child_contact {
    margin-top: 50px;
}
.list_contact {
    position: relative;
    margin-bottom: 25px;
}
.list_contact:last-child {
    margin-bottom: 0;
}
.icon_contact {
    position: absolute;
    background: var(--bg-main);
    left: -20px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    padding: 10px;
    top: 0;
    bottom: 0;
    text-align: center;
    margin: auto;
    color: #ffffff;
    font-size: 18px;
}
.contact-set {
    transition: transform .6s ease, filter .6s ease;
    background: #d4e4e2;
    padding: 20px 20px 20px 40px;
    border-radius: 10px;
    height: 120px;
    align-content: center;
}
.list_contact:hover .contact-set {
    transform: translateY(-6px) scale(1.05);
}
.input_contact {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.08);
    width: 100%;
    padding: 20px;
    border-radius: 5px;
    position: relative;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.input_contact input {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgb(238 238 238 / 50%);
    background: none;
    padding: 0;
    color: #eeeeee;
}
.input_contact i {
    position: absolute;
    top: 20px;
    right: 20px;
}
.notificationAtInput + label {
    display: block !important;
}
.notificationAtInput {
    border: none;
    border-bottom: 1px solid var(--secondary-color) !important;
}
.form_contact {
    width: 800px;
    margin: auto;
    padding-top: 50px;
}
.form_contact input + label {
    font-weight: lighter;
    margin-top: 5px;
    color: var(--secondary-color);
    display: none;
    position: relative;
    text-align: left;
    font-size: 12px;
}
.form_contact label span {
    position: absolute;
    bottom: 40px;
    right: 10px;
}
.form_contact label span svg {
    width: 16px;
    height: 16px;
}
.form_contact h4 {
    padding: 0 0 10px;
    color: #ffffff;
    font-size: 16px;
}
.form_contact [class*=col-] {
    margin-bottom: 20px;
    padding-right: 10px;
    padding-left: 10px;
}
.form_contact .row {
    padding-left: 2px;
    padding-right: 2px;
}
.input_contact textarea {
    font-family: inherit;
    font-size: inherit;
    color: #eeeeee;
    width: 100%;
    border: none;
    border-bottom: 1px solid rgb(238 238 238 / 50%);
    height: 100px;
    padding: 0;
    background: none;
}
.input_contact textarea:focus {
    outline: none;
    box-shadow: none;
}
#notificationEmail {
    height: auto;
    padding: 10px;
    text-align: center;
    width: 100%;
    font-size: 16px;
    display: none;
    z-index: 9999;
    top: 0;
}
.form_contact .btn_style1 {
    color: #ffffff;
    line-height: normal;
    text-align: left;
    width: auto;
}
.form_contact .btn_style1::before {
    background-color: var(--secondary-color);
}
.form_contact .btn_style1::after {
    color: var(--primary-color) !important;
}
.form_contact .btn_style1:hover {
    color: var(--primary-color) !important;
}
/*-------------------------------------*/
/* FOOTER */
/*-------------------------------------*/
.section_footer {
    background-image: url('../images/parallax-2.jpg');
    background-size: cover;
    position: relative;
    overflow: hidden;
}
.section_footer:before {
    content: '';
    background-image: linear-gradient(#EBE2D500, #EBE2D5);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.section_footer .box_contact {
    padding: 0 100px 0 0;
}
.home .section_footer .content {
    padding: 100px 0 50px;
}
.section_footer .content {
    padding: 50px 0;
}
.quick_link {
    display: inline-table;
    margin-top: 15px;
}
.quick_link li {
    width: 50%;
    margin-bottom: 5px;
    display: inline-block;
    vertical-align: top;
}
.thai_lang .quick_link li:nth-child(even){
    padding-left: 30px;
}
.box_social {
    margin-top: 15px;
    color: var(--white);
}
.box_social .social {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 5px;
    display: inline-block;
    background: var(--primary-color);
    transition: all .25s;
    font-size: 18px;
    text-align: center;
    border-radius: 50%;
    padding: 6px;
}
.box_social .social i {
    vertical-align: middle;
}
.box_social .social:hover {
    background: var(--white);
}
.copyright {
    font-size: 14px;
    position: relative;
    padding: 15px 0;
    border-top: 1px solid #dfd8cc;
}
.copyright a {
    color: var(--primary-color);
    font-style: italic;
}
.copyright a:hover {
    opacity: .6;
}
.copyright span {
    opacity: .6;
}
.copyright p {
    display: inline;
    margin-top: 0;
}
.copyright .hoteliers {
    float: right;
}
/* FOOTER GALLERY */
.content_gallery {
    padding-top: 100px;
    position: relative;
    text-align: center;
}
.content_gallery .box_images {
    height: 500px;
}
.content_gallery .box_content_gallery {
    margin: auto;
    align-content: center;
    height: 100%;
    justify-items: center;
    display: inline-grid;
}
.content_gallery .box_images.small_image img{
    padding-top: 100px;
}
/*-------------------------------------*/
/* SITE MAP */
/*-------------------------------------*/
.sitemap_list{
    padding: 0;
    margin: 0;
}
.sitemap_list li {
    list-style: none;
    padding: 0 0 10px;
    text-align: left;
}
.sitemap_list li:last-child {
    padding: 0;
}
.section_sitemap a:hover {
    color: var(--primary-color);
}

.sitemap_list ul {
    padding: 10px 0 0 40px;
}

.submenu_sitemap {
    margin: 0 !important;
}
.submenu_sitemap li {
    list-style: disc;
}
.submenu_sitemap li:last-child {
    padding: 0;
}
.sitemap_list {
    padding-left: 50px;
}
/*-------------------------------------*/
/* CURSOR MOUSE */
/*-------------------------------------*/
.cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    background-color: #fff;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition:
            width 0.3s ease,
            height 0.3s ease,
            transform 0.3s ease,
            background-color 0.3s ease,
            opacity 0.3s ease;
}
/* cursor วงนอก */
.second-cursor {
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,.2);
}
/* hover */
.cursor.big {
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,.3);
}
/* cursor วงนอกตอน hover */
.second-cursor.big {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.3;
    width: 0;
    height: 0;
}
/*-------------------------------------*/
/* DOWNLOAD */
/*-------------------------------------*/
.row.download [class*="col-"] {
    padding-bottom: 20px;
}