:root {
    --default-font-family: "Prompt", -apple-system, BlinkMacSystemFont, sans-serif,
    "PingFang SC","Hiragino Sans GB", "Microsoft Yahei UI", "Microsoft Yahei", "Source Han Sans CN";
    --primary-color: #a2845e;
    --primary-border: #a2874a;
    --secondary-color: #fff4df;
    --black-color: #3e3c3c;
}

    .bg-primary {
        background: var(--primary-color) !important;
    }
    .bg-secondary {
        background: var(--secondary-color) !important;
    }
    .bg-light {
        background: #f5f6ee !important;
    }
    .border-top-divider {
        border-top: 1px solid #636464;
    }
    .text-black {
        color: var(--black-color) !important;
    }
    .text-primary {
        color: var(--primary-color) !important;
    }
    .text-secondary {
        color: var(--secondary-color) !important;
    }

    .pt-20, .py-20 {
        padding-top: 20% !important;
    }
    .pb-20, .py-20 {
        padding-bottom: 20% !important;
    }
    .ps-20, .px-20 {
        padding-left: 20% !important;
    }
    .pe-20, .px-20 {
        padding-right: 20% !important;
    }
    .ps-10, .px-10 {
        padding-left: 10vw !important;
    }
    .pe-10, .px-10 {
        padding-right: 10vw !important;
    }
    @media (min-width: 768px) {
        .pt-md-20, .py-md-20 {
            padding-top: 20% !important;
        }
        .pb-md-20, .py-20 {
            padding-bottom: 20% !important;
        }
        .ps-md-20, .px-md-20 {
            padding-left: 20vw !important;
        }
        .pe-md-20, .px-md-20 {
            padding-right: 20vw !important;
        }
        .ps-md-10, .px-md-10 {
            padding-left: 10vw !important;
        }
        .pe-md-10, .px-md-10 {
            padding-right: 10vw !important;
        }
        .h-md-100 {
            height: 100% !important;
        }
        .w-md-100 {
            width: 100% !important;
        }
        .w-md-50 {
            width: 50% !important;
        }
        .w-md-30vw {
            width: 35vw !important;
        }
        .w-md-20vw {
            width: 20vw !important;
        }
    }
    @media (max-width: 767.98px) {
        .h-xs-100 {
            height: 100% !important;
        }
        .w-xs-100 {
            width: 100% !important;
        }
        .w-xs-50 {
            width: 50% !important;
        }
    }
    .mt--5, .my--5 {
        margin-top: -3rem !important;
    }
    .mb--5, .my--5 {
        margin-bottom: -3rem !important;
    }
    .ms--5, .mx--5 {
        margin-left: -3rem !important;
    }
    .me--5, .mx--5 {
        margin-right: -3rem !important;
    }
    @media (min-width: 768px) {
        .mt-md--5, .my-md--5 {
            margin-top: -3rem !important;
        }
        .mb-md--5, .my-md--5 {
            margin-bottom: -3rem !important;
        }
        .ms-md--5, .mx-md--5 {
            margin-left: -3rem !important;
        }
        .me-md--5, .mx-md--5 {
            margin-right: -3rem !important;
        }
    }
    @media (max-width: 767.98px) {
        .ms-xs-0, .mx-xs-0 {
            margin-left: 0 !important;
        }
        .me-xs-0, .mx-xs-0 {
            margin-right: 0 !important;
        }
    }


/* SCROLLBAR */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}
.no-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
@media (max-width: 767.98px) {
    .no-scrollbar-xs::-webkit-scrollbar {
        display: none;
    }
    .no-scrollbar-xs {
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
}
::-webkit-scrollbar { /* width */
    width: 5px;
    height: 1px;
}
::-webkit-scrollbar-track { /* Track */
    background: transparent;
    box-shadow: inset 0 0 5px #e2e6e4;
    border-radius: 4px;
    border-left: 1.5px solid transparent;
    border-right: 1.5px solid transparent;
}
::-webkit-scrollbar-thumb { /* Handle */
    background: var(--primary-color);
    border-radius: 4px;
}
/* END-SCROLLBAR */

/* DRAGSCROLL */
.drag-scroll:hover::-webkit-scrollbar {
    width: 1px;
    height: 5px;
}
.drag-scroll {
    cursor: grab;
    overflow-x: scroll;
    user-select: none;
}
.drag-scroll .drag-content .pe-3:last-child {
    padding-right: 0 !important;
}
@media (max-width: 767.98px) {
    .drag-scroll .drag-content {
        width: 90vw !important;
    }
    .drag-scroll .drag-content.drag-container {
        width: max-content !important;
    }
    .drag-scroll .drag-content.drag-container > * {
        min-width: 90vw !important;
        width: 90vw !important;
    }
    .drag-scroll .drag-content img {
        height: 400px !important;
    }
}
.cursor-default {
    cursor: default;
}
.cursor-pointer {
    cursor: pointer;
}
/* END-DRAGSCROLL */

/* SLICK */
.slick-list, .slick-slider, .slick-track {position:relative; display:block}
.slick-loading .slick-slide, .slick-loading .slick-track {visibility:hidden}
.slick-slider {box-sizing:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-khtml-user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}.slick-list{overflow:hidden;margin:0;padding:0}
.slick-list:focus {outline:0}
.slick-list.dragging {cursor:pointer;cursor:hand}
.slick-slider .slick-list, .slick-slider .slick-track {-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track {top:0;left:0;margin-left:auto;margin-right:auto}
    .slick-track:after, .slick-track:before {display:table;content:''}
    .slick-track:after {clear:both}
.slick-slide {display:none;float:left;height:100%;min-height:1px}
    [dir=rtl] .slick-slide {float:right}
    .slick-slide img {display:block}
    .slick-slide.slick-loading img {display:none}
    .slick-slide.dragging img {pointer-events:none}
    .slick-initialized .slick-slide {display:block}
    .slick-vertical .slick-slide {display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden {display:none}
/* END-SLICK */

/*!
 * Datepicker v0.6.5
 * https://github.com/fengyuanchen/datepicker
 *
 * Copyright (c) 2014-2018 Chen Fengyuan
 * Released under the MIT license
 *
 * Date: 2018-03-31T06:16:43.444Z
 */.datepicker-container{background-color:#fff;direction:ltr;font-size:12px;left:0;line-height:30px;position:fixed;top:0;-ms-touch-action:none;touch-action:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;width:210px;z-index:-1;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}.datepicker-container:after,.datepicker-container:before{border:5px solid transparent;content:" ";display:block;height:0;position:absolute;width:0}.datepicker-dropdown{border:1px solid #ccc;box-shadow:0 3px 6px #ccc;box-sizing:content-box;position:absolute;z-index:1}.datepicker-inline{position:static}.datepicker-top-left,.datepicker-top-right{border-top-color:#39f}.datepicker-top-left:after,.datepicker-top-left:before,.datepicker-top-right:after,.datepicker-top-right:before{border-top:0;left:10px;top:-5px}.datepicker-top-left:before,.datepicker-top-right:before{border-bottom-color:#39f}.datepicker-top-left:after,.datepicker-top-right:after{border-bottom-color:#fff;top:-4px}.datepicker-bottom-left,.datepicker-bottom-right{border-bottom-color:#39f}.datepicker-bottom-left:after,.datepicker-bottom-left:before,.datepicker-bottom-right:after,.datepicker-bottom-right:before{border-bottom:0;bottom:-5px;left:10px}.datepicker-bottom-left:before,.datepicker-bottom-right:before{border-top-color:#39f}.datepicker-bottom-left:after,.datepicker-bottom-right:after{border-top-color:#fff;bottom:-4px}.datepicker-bottom-right:after,.datepicker-bottom-right:before,.datepicker-top-right:after,.datepicker-top-right:before{left:auto;right:10px}.datepicker-panel>ul{margin:0;padding:0;width:102%}.datepicker-panel>ul:after,.datepicker-panel>ul:before{content:" ";display:table}.datepicker-panel>ul:after{clear:both}.datepicker-panel>ul>li{background-color:#fff;cursor:pointer;float:left;height:30px;list-style:none;margin:0;padding:0;text-align:center;width:30px}.datepicker-panel>ul>li:hover{background-color:#e5f2ff}.datepicker-panel>ul>li.muted,.datepicker-panel>ul>li.muted:hover{color:#999}.datepicker-panel>ul>li.highlighted{background-color:#e5f2ff}.datepicker-panel>ul>li.highlighted:hover{background-color:#cce5ff}.datepicker-panel>ul>li.picked,.datepicker-panel>ul>li.picked:hover{color:#39f}.datepicker-panel>ul>li.disabled,.datepicker-panel>ul>li.disabled:hover{background-color:#fff;color:#ccc;cursor:default}.datepicker-panel>ul>li.disabled.highlighted,.datepicker-panel>ul>li.disabled:hover.highlighted{background-color:#e5f2ff}.datepicker-panel>ul>li[data-view="month next"],.datepicker-panel>ul>li[data-view="month prev"],.datepicker-panel>ul>li[data-view="year next"],.datepicker-panel>ul>li[data-view="year prev"],.datepicker-panel>ul>li[data-view="years next"],.datepicker-panel>ul>li[data-view="years prev"],.datepicker-panel>ul>li[data-view=next]{font-size:18px}.datepicker-panel>ul>li[data-view="month current"],.datepicker-panel>ul>li[data-view="year current"],.datepicker-panel>ul>li[data-view="years current"]{width:150px}.datepicker-panel>ul[data-view=months]>li,.datepicker-panel>ul[data-view=years]>li{height:52.5px;line-height:52.5px;width:52.5px}.datepicker-panel>ul[data-view=week]>li,.datepicker-panel>ul[data-view=week]>li:hover{background-color:#fff;cursor:default}.datepicker-hide{display:none}
.daterangepicker{position:absolute;color:inherit;background-color:#fff;border-radius:4px;border:1px solid #ddd;width:278px;max-width:none;padding:0;margin-top:7px;top:100px;left:20px;z-index:3001;display:none;font-family:arial;font-size:15px;line-height:1em}.daterangepicker:after,.daterangepicker:before{position:absolute;display:inline-block;content:''}.daterangepicker:before{top:-7px;border-right:7px solid transparent;border-left:7px solid transparent;border-bottom:7px solid #ccc}.daterangepicker:after{top:-6px;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent}.daterangepicker.opensleft:before{right:9px}.daterangepicker.opensleft:after{right:10px}.daterangepicker.openscenter:after,.daterangepicker.openscenter:before{left:0;right:0;width:0;margin-left:auto;margin-right:auto}.daterangepicker.opensright:before{left:9px}.daterangepicker.opensright:after{left:10px}.daterangepicker.drop-up{margin-top:-7px}.daterangepicker.drop-up:before{top:initial;bottom:-7px;border-bottom:initial;border-top:7px solid #ccc}.daterangepicker.drop-up:after{top:initial;bottom:-6px;border-bottom:initial;border-top:6px solid #fff}.daterangepicker.single .daterangepicker .ranges,.daterangepicker.single .drp-calendar{float:none}.daterangepicker.single .drp-selected{display:none}.daterangepicker.show-calendar .drp-buttons,.daterangepicker.show-calendar .drp-calendar{display:block}.daterangepicker.auto-apply .drp-buttons{display:none}.daterangepicker .drp-calendar{display:none;max-width:270px}.daterangepicker .drp-calendar.left{padding:8px 0 8px 8px}.daterangepicker .drp-calendar.right{padding:8px}.daterangepicker .drp-calendar.single .calendar-table{border:none}.daterangepicker .calendar-table .next span,.daterangepicker .calendar-table .prev span{color:#fff;border:solid #000;border-width:0 2px 2px 0;border-radius:0;display:inline-block;padding:3px}.daterangepicker .calendar-table .next span{transform:rotate(-45deg);-webkit-transform:rotate(-45deg)}.daterangepicker .calendar-table .prev span{transform:rotate(135deg);-webkit-transform:rotate(135deg)}.daterangepicker .calendar-table td,.daterangepicker .calendar-table th{text-align:center;vertical-align:middle;min-width:32px;width:32px;height:24px;line-height:24px;font-size:12px;border-radius:4px;border:1px solid transparent;white-space:nowrap;cursor:pointer}.daterangepicker .calendar-table{border:1px solid #fff;border-radius:4px;background-color:#fff}.daterangepicker .calendar-table table{width:100%;margin:0;border-spacing:0;border-collapse:collapse}.daterangepicker td.available:hover,.daterangepicker th.available:hover{background-color:#eee;border-color:transparent;color:inherit}.daterangepicker td.week,.daterangepicker th.week{font-size:80%;color:#ccc}.daterangepicker td.off,.daterangepicker td.off.end-date,.daterangepicker td.off.in-range,.daterangepicker td.off.start-date{background-color:#fff;border-color:transparent;color:#999}.daterangepicker td.in-range{background-color:#ebf4f8;border-color:transparent;color:#000;border-radius:0}.daterangepicker td.start-date{border-radius:4px 0 0 4px}.daterangepicker td.end-date{border-radius:0 4px 4px 0}.daterangepicker td.start-date.end-date{border-radius:4px}.daterangepicker td.active,.daterangepicker td.active:hover{background-color:#357ebd;border-color:transparent;color:#fff}.daterangepicker th.month{width:auto}.daterangepicker option.disabled,.daterangepicker td.disabled{color:#999;cursor:not-allowed;text-decoration:line-through}.daterangepicker select.monthselect,.daterangepicker select.yearselect{font-size:12px;padding:1px;height:auto;margin:0;cursor:default}.daterangepicker select.monthselect{margin-right:2%;width:56%}.daterangepicker select.yearselect{width:40%}.daterangepicker select.ampmselect,.daterangepicker select.hourselect,.daterangepicker select.minuteselect,.daterangepicker select.secondselect{width:50px;margin:0 auto;background:#eee;border:1px solid #eee;padding:2px;outline:0;font-size:12px}.daterangepicker .calendar-time{text-align:center;margin:4px auto 0;line-height:30px;position:relative}.daterangepicker .calendar-time select.disabled{color:#ccc;cursor:not-allowed}.daterangepicker .drp-buttons{clear:both;text-align:right;padding:8px;border-top:1px solid #ddd;display:none;line-height:12px;vertical-align:middle}.daterangepicker .drp-selected{display:inline-block;font-size:12px;padding-right:8px}.daterangepicker .drp-buttons .btn{margin-left:8px;font-size:12px;font-weight:700;padding:4px 8px}.daterangepicker.show-ranges .drp-calendar.left{border-left:1px solid #ddd}.daterangepicker .ranges{float:none;text-align:left;margin:0}.daterangepicker.show-calendar .ranges{margin-top:8px}.daterangepicker .ranges ul{list-style:none;margin:0 auto;padding:0;width:100%}.daterangepicker .ranges li{font-size:12px;padding:8px 12px;cursor:pointer}.daterangepicker .ranges li:hover{background-color:#eee}.daterangepicker .ranges li.active{background-color:#08c;color:#fff}@media (min-width:564px){.daterangepicker.ltr .drp-calendar.right .calendar-table,.daterangepicker.rtl .drp-calendar.left .calendar-table{border-left:none;border-top-left-radius:0;border-bottom-left-radius:0}.daterangepicker.ltr .drp-calendar.left .calendar-table,.daterangepicker.rtl .drp-calendar.right .calendar-table{border-right:none;border-top-right-radius:0;border-bottom-right-radius:0}.daterangepicker{width:auto}.daterangepicker .ranges ul{width:140px}.daterangepicker.single .ranges ul{width:100%}.daterangepicker.single .drp-calendar.left{clear:none}.daterangepicker.single.ltr .drp-calendar,.daterangepicker.single.ltr .ranges{float:left}.daterangepicker.single.rtl .drp-calendar,.daterangepicker.single.rtl .ranges{float:right}.daterangepicker.ltr{direction:ltr;text-align:left}.daterangepicker.ltr .drp-calendar.left{clear:left;margin-right:0}.daterangepicker.ltr .drp-calendar.left .calendar-table{padding-right:8px}.daterangepicker.ltr .drp-calendar.right{margin-left:0}.daterangepicker.ltr .drp-calendar,.daterangepicker.ltr .ranges{float:left}.daterangepicker.rtl{direction:rtl;text-align:right}.daterangepicker.rtl .drp-calendar.left{clear:right;margin-left:0}.daterangepicker.rtl .drp-calendar.left .calendar-table{padding-left:12px}.daterangepicker.rtl .drp-calendar.right{margin-right:0}.daterangepicker.rtl .drp-calendar,.daterangepicker.rtl .ranges{text-align:right;float:right}}@media (min-width:730px){.daterangepicker .ranges{width:auto}.daterangepicker.ltr .ranges{float:left}.daterangepicker.rtl .ranges{float:right}.daterangepicker .drp-calendar.left{clear:none!important}}
/* END-DATEPICKER */

*, ol, ul {
    margin: 0;
    padding: 0;
    font-family: var(--default-font-family);
    -webkit-tap-highlight-color: transparent;
}

a{
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color:    rgba(255, 255, 255, 0);
    tap-highlight-color:    rgba(255, 255, 255, 0);
}

input,
select,
textarea,
button {
    outline: 0;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
    font-family: var(--default-font-family) !important;
}

h1, h2, h3,
.h1, .h2, .h3 {
    font-weight: 300;
}

h2,
.h1, .h2 {
    font-size: 36px;
}

h1,
.h1 {
    font-size: 57px;
}

p,
.content,
.container-content {
    color: var(--black-color);
    font-family: var(--default-font-family) !important;
    font-size: 14px !important;
    font-weight: 300;
    line-height: 24px;
    letter-spacing: 1px;
    margin-bottom: 33px;
}
    .content > *,
    .container-content > * {
        width: 100% !important;
    }

figure {
    margin: initial;
}

:focus {
    outline: none;
}

.center-flex {
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.center-relative {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

section {
    background-color: white;
    padding: 89px 0 105px;
    overflow: hidden;
}

section svg {
    height: 16px;
}

.container{
    width: 90%;
    max-width: 1071px;
    margin: 0 auto;
}
    
    .container h2,
    .container .h2{
        width: 80%;
        color: #484848;
        color: var(--black-color);
        --opacity: 0.6;
    }

    .container ul {
        margin-left: 20px;
    }

    .container-content h2,
    .container-content h2 > *,
    .container-content h3,
    .container-content h3 > *,
    .container-content h4,
    .container-content h4 > * {
        font-weight: 500;
        padding-bottom: 0 !important;
    }

    .container-content p > *,
    .container-content td > * {
        font-family: inherit !important;
        font-weight: inherit !important;
        font-size: inherit !important;
        color: inherit !important;
    }

.bg-cover-set{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.noselect{
    -webkit-touch-callout: none; /* iOS Safari */
        -webkit-user-select: none; /* Safari */
         -khtml-user-select: none; /* Konqueror HTML */
             -moz-user-select: none; /* Firefox */
                -ms-user-select: none; /* Internet Explorer/Edge */
                        user-select: none; /* Non-prefixed version, currently
                                                                    supported by Chrome and Opera */
}

.god-hand{
    width: 100%;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

input,
textarea{
    border: 0px;
    box-shadow: none;
    border-radius: 0px;
}

/* LETS ROOOOCCCCCKKKKKK ~~*/
/* NOTE: HERO HEAD */

#hero-header{
    width: 100%;
    height: 100vh;
    position: relative;
    --overflow: hidden;
}

#hero-header div{
    z-index: +1;
}

#hero-header .plx-img{
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: -99;
}

.nav-head{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10000;
    transform: translateY(0px);
    transition: transform 500ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

    .nav-head:not(.sage-mode) .gradiance{
        position: absolute;
        height: 50vh;
        width: 100%;
        background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        z-index: -99;
    }

.modal {
    z-index: 10002;
}
.modal-backdrop {
    z-index: 10001;
}
.offcanvas {
    z-index: 10000;
}

.navcon{
    justify-content: space-between;
    max-width: 1440px;
    height: 113px;
    padding: 0 50px;
    margin: 0 auto;
}

.hero-logo{
    width: auto;
    height: 65px;
}

.top-menu ul:not(.dropdown-menu){
    display: flex;
}

    .dropdown-menu {
        padding: 0;
        margin-top: 20px !important;
        background-color: var(--primary-color);
        border-radius: 0;
        border: none;
        min-width: max-content;
    }
    .dropdown-menu .dropdown-submenu {
        display: none;
        position: absolute;
        margin-top: -35px !important;
        left: 100% !important;
        top: auto !important;
        border-top: 1px solid white;
    }
    .dropdown-menu .dropdown-submenu-left {
        right: 100%;
        left: auto !important;
    }
    .dropdown-menu > li:hover > .dropdown-submenu {
        display: block;
    }
    .dropdown-item {
        min-width: 100%;
        width: max-content;
        padding-right: 20px;
    }
    .dropdown-item:hover {   
        background: var(--primary-color);
    }
    .dropdown-item img {
        position: absolute;
        height: 10px;
        right: 10px;
        filter: contrast(1) invert(1);
    }

.top-menu {
    z-index: 1;
}

#pop-menu .drp-d li,
.top-menu ul li,
.dwn{
    list-style: none;
    color: white;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 13px;
    margin: 0 24px;
    line-height: 113px;
}
    
    .nav-head:not(.sage-mode) .top-menu ul li,
    .nav-head:not(.sage-mode) .dwn {
        color: var(--primary-color);
    }
    .nav-head:not(.sage-mode) .burger li{
        border-top-color: var(--primary-color);
    }
    

    .top-menu ul.dropdown-menu li{
        line-height: normal !important;
        margin: 10px 0;
        margin: 0 auto;
        padding: 12px 0;
        border-bottom: 1px solid #E8E8E8;
        font-size: 12px;
        letter-spacing: 0.1px;
        --text-align: center;
    }
    .top-menu ul.dropdown-menu li:last-of-type{
        border: 0px;
    }
    .top-menu ul.dropdown-menu li a{
        color: white;
    }

.dwn{
    margin: 0;
    position: relative;
}

.hgreet{
    width: 100%;
    color: white;
    --padding-left: 41px;
}

.hgreet h1,
.hgreet .h1{
    font-size: 53px;
    max-width: 80%;
    line-height: 53px;
    padding-bottom: 15px;
}

.hgreet p{
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.3px;
    line-height: 14px;
    margin: 0;
}

.greeting,
.head-book{
    max-width: 1440px;
    padding-right: 50px;
    margin: 0 auto;
    padding-left: calc((100% - 1070px) / 2);
}

@media (max-width: 1440px){
    .hgreet{
        padding-left: 0;
    }
}
@media (max-width: 580px){
     .hgreet{
        max-width: 90% !important;
        padding: 0 10.5px !important;
        margin: auto;
    }
}
.container .greeting,
.container .head-book{
    max-width: 100%;
    padding: 0 !important;
}
@media (min-width: 767.9px){
     header:not(.container) .head-book{
        padding: 0 10% !important;
    }
}
.con-book {
    width: 100% !important;
    max-width: 100% !important;
    margin: auto !important;
    height: auto !important;
}

.withlove{
    position: relative;
}

.embel-embel{
    --border-bottom: 1px solid #C7C7C7;
    --padding-bottom: 13px;
    width: calc(100% - 399px);
    color: white;
    justify-content: flex-end;
    height: fit-content;
    position: absolute;
    bottom: 50%;
    right: 0;
}

.additional-btn-hm{
    font-size: 13px;
    letter-spacing: 0.3px;
    line-height: 15px;
    background-size: 27px;
    background-position: left center;
    background-repeat: no-repeat;
    padding: 10px 0 10px 50px;
    cursor: pointer;
}

.xs-min{
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 1.5px;
    line-height: 14px;
    margin-bottom: 15px;
    --opacity: 0.61;
}

.embel-embel a.hhr-arrow{
    height: 25px;
    width: 25px;
    padding: 0;
    margin-left: 20px;
    background-position: center;
    background-size: 38%;
    cursor: pointer;
}

.embel-embel a.hhr-arrow:nth-last-child(2){
    transform: rotate(180deg);
}

.embel-embel p.niu{
    font-size: 22px;
    line-height: 25px;
}

.niu {
    color: #A5A5A5
}
.niu strong,
.niu span{
    font-family: inherit;
}

.embel-embel a{
    height: fit-content;
    font-size: 13px;
    line-height: 28px;
    letter-spacing: 1px;
    font-weight: 500;
    padding-right: calc(29px + 26.79px);
    background-repeat: no-repeat;
    background-size: 26.79px;
    background-position: right center;

}

.head-book{
    position: absolute;
    bottom: 20px;
    height: 65px;
    right: 0;
    width: -webkit-fill-available;
    width: -moz-available;
    /* overflow: hidden; */
    justify-content: space-between;
}

.con-book{
    width: 90%;
    max-width: 858.95px;
    height: 65px;
    position: relative;
    /* overflow: hidden; */
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    background-color: rgba(255, 255, 255, 0.3);
    background-color: white;
    border-radius: 10px;
}

/* form book */
.bparent{
    background-size: 9px auto;
    background-repeat: no-repeat;
    background-position: right center;

    padding-right: 24px;
    font-size: 12px;
    font-weight: 500;
    line-height: 14px;
    color: white;
    cursor: pointer;
    position: relative;
    line-height: 65px;

}

.bparent p{
    font-size: 12px;
}

.minion-pop{
    position: absolute;
    background-color: white;
    left: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-20px);
    bottom: 75px;
    transition: all 0.2s ease-in-out;
}

.minion-pop.actv{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0px);
}

.minion-pop li{
    color: #525252;
    list-style: none;
    font-size: 12px;
    font-weight: 500px;
    line-height: 14px;
    padding: 16px 10px 16px 2px;
    border-bottom: 1px solid #E8E8E8;
    width: max-content;
    margin:    0 16px;
}

.minion-pop li:last-child{
    border-bottom: 0px;
}

.con-book span,
.con-book input,
.con-book input::placeholder,
.con-book p,
.con-book a {
    color: white;
    color: var(--primary-color);
    font-size: 12px !important;
    line-height: 65px;
    margin-bottom: 0;
}
.con-book input,
.con-book input::placeholder {
    letter-spacing: 1px;
    opacity: 0.8;
}

.con-book input,
.con-book p {
    opacity: 1 !important;
}

.con-book label{
    margin-left: 20px;
    line-height: 65px;
    display: flex;
}

.con-book form{
    width: 100%;
    justify-content: space-between;
}

.btn-book,
.solo{
    width: 190px;
    height: 50px;
    background-color: var(--primary-color);
    color: white;
    font-size: 18px;
    letter-spacing: 1px;
    font-weight: 600;
    cursor: pointer;
}
    .btn-book span {
        color: white !important;
    }

.daterangepicker{
    border-radius: 0px;
}

.daterangepicker.drop-up:after,
.daterangepicker.drop-up:before,
.daterangepicker:after,
.daterangepicker:before,
.daterangepicker .drp-selected{
    display: none;
}

.daterangepicker .calendar-table th,
.daterangepicker .calendar-table td{
    font-size: 10px;
    font-weight: 500;
    line-height: 11px;
    min-width: 37px;
    max-width: 37px;
    height: 37px;
    font-family: 'Work Sans', sans-serif;
    /* text-align: right; */
}

.daterangepicker .calendar-table th{
    font-weight: 600;
}

.daterangepicker.ltr .drp-calendar.left{
    padding-right: 10px;
    border-right: 1px solid #F0F0F0;
}

.daterangepicker{
    width: auto;
}

.daterangepicker td.start-date.end-date{
    border-radius: 0%;
    /* background-color: var(--primary-color); */
    background-color: transparent;
    /* text-align: center; */
    z-index: +1;

    position: relative;
}

.daterangepicker td.today{
    position: relative;
}

.daterangepicker td.today::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    padding-left: 23px;
    padding-top: 23px;
    border-radius: 50%;
    background-color: var(--primary-color);
    z-index: -1;
}

.daterangepicker td.today::after{
    content: 'Today';
    position: absolute;
    color: black;
    top: -5px;
    left: 50%;
    font-size: 8px;
    font-weight: 500;
    transform: translateX(-50%);
}

.daterangepicker .calendar-table th:first-child,
.daterangepicker .calendar-table td.weekend:first-child{
    color: #EB2121;
}

.daterangepicker .calendar-table th.month{
    font-size: 12px;
    font-weight: 600;
    color: #525252;
    text-align: left;
}

.daterangepicker .drp-calendar:nth-child(2) th.month{
    text-align: right;
}

.daterangepicker .drp-buttons{
    border: 0px;
    background-color: #F2F2F2;
    padding: 15px 10px;
}

.daterangepicker .drp-buttons .btn{
    border-radius: 0px;
    background-color: var(--primary-color);
    color: white;
    border: 0px;
    padding: 5px 16px;
    cursor: pointer;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-size: 10px;
}

.daterangepicker{
    display: block !important;
    visibility: hidden;
    opacity: 0;
    margin-top: -20px !important;

    transition-property: visibility , opacity , margin-top;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
}

.daterangepicker.drop-up.actv,
.daterangepicker.actv{
    visibility: visible;
    opacity: 1;
    margin-top: -10px !important;
}

.daterangepicker.down.actv{
    margin-top: 10px !important;
}

.daterangepicker.up,
.daterangepicker.down{
    display: flex !important;
}

.daterangepicker.down{
    transform: translateX(-50px);
}

.daterangepicker td.in-range{
    background-color: rgba(168, 145, 84,0.3);
}

.daterangepicker td.active, .daterangepicker td.active:hover{
    background-color: var(--primary-color);
}

.mclose,
.mhead,
.btn-book a{
    display: none;
}

.btn-book p,
.solo{
    width: 100%;
    line-height: 50px;
    text-align: center;
}

.solo{
    border: 0px;
    box-shadow: 0px;
    border-radius: 0px;
    display: none;
}

.con-book.im-going-solo form,
.con-book.im-going-solo div{
    display: none
}

.im-going-solo .solo{
    display: block;
}

.con-book.im-going-solo{
    width: auto;
    margin-left: 27px;
}
/* end form book */

/* NOTE: SAGE MODE NAV MENU HERO BRO! */
.nav-head.sage-mode{
    position: fixed;
    background-color: white;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transform: translateY(0px);
    /* visibility: hidden; */
    /* transition: transform 0.5s ease-out; */
}

.nav-head.temphide{
    /* visibility: visible; */
    transform: translateY(-113px);
    /* transition: transform 0.5s ease-out; */
}

.nav-head.sage-mode .navcon{
    height: 57px;
    padding: 0px;
    padding-left: 50px;
    max-width: 1940px;
    z-index: 9999;
}

.nav-head.sage-mode .top-menu ul li,
.nav-head.sage-mode .dwn,
.hdn_treasure{
    line-height: 57px;
    border-radius: 0;
    color: #707070;
}

.nav-head.sage-mode .dwn span{
    border-color: rgba(112, 112, 112, 0.41);
}

    .dwn.burgh{
        display: block;
        position: relative;
    }
    
    .dwn.burgh span{
        margin-right: 24px;
        padding-left: 33px;
    }

    .burger{
        width: 19px;
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        flex-direction: column;
        align-items: start;
    }

    .burger li{
        width: 100%;
        border-top: 1px solid #FFF;
    }

    .nav-head.sage-mode .burger li{
        border-color: var(--primary-color);
    }

    .burger li:nth-child(1){
        width: 16px;
        margin-bottom: 4px;
    }

    .burger li:nth-child(3){
        width: 14px;
        margin-top: 4px;
    }

.hdn_treasure{
    border-radius: 3rem;
    --line-height: 57px;
    line-height: 40px;
    font-size: 12px;
    padding: 0 35px;
    margin: 5px;
    color: white;
    background-color: var(--primary-color);
    display: block;
    cursor: pointer;
}

.sage-mode .hero-logo{
    height: 46px;
}

/* NOTE: weather */
.weather_time{
    color: white;
}

.weather_time span{
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 16px;
    line-height: 65px;
    padding-left: 27px;
    margin-left: 16px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.2px;
}

.weather_time span.header-cloud{
    padding-left: 32px;
}

.weather_time span i{
    opacity: 0.61;
    font-style: normal;
    margin-left: 5px;
}

.saipop{
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 65px;

    background-position: right center;
    background-repeat: no-repeat;
    background-size: 27px auto;

    padding-right: 56px;
}

/* SPECIAL OFFERS !!!!! */
/* NOTE: special offers cuk */
#special-offers{
    width: 100%;
    padding: 100px 0;
    background-color: white;
}

.common-detail-button{
    position: absolute;
    right: 0;
    bottom: 3px;
    font-size: 13px;
    font-weight: 600;
    color: #3E3C3C;
    letter-spacing: 1px;line-height: 15px;
    text-transform: uppercase;
}

.common-head{
    position: relative;
    margin-bottom: 87px;
}

.common-head h2,
.common-head .h2{
    font-size: 45px;
    font-size: 40px;
    line-height: 40px;
    color: #3E3C3C;
    text-transform: capitalize;
}

.common-head p{
    font-weight: 200;
    letter-spacing: 0.1px;
    line-height: 24px;
    font-size: 15px;
    margin-top: 28px;
    max-width: 376.5px;
}

.sos{
    width: 1071px;
    background-color: var(--secondary-color);
    margin-right: 24px;
    opacity: 0.45;
    transition: opacity 1s ease-in-out;
    transition-delay: 0s;
    background-color: white;
    width: 100vw;
}

.sos.slick-center,
.each-acco-slide.slick-center::after{
    opacity: 1;
    transition: opacity 1s ease-in-out;
    transition-delay: 0.4s;
}

.sos-content,
.sos-img{
    width: 60%;
    height: 439.73px;
}
    .sos-content {
        width: 40%;
    }

.sos-content::after,
.sos-img::after{
    content: '';
    clear: both;
}

.sos-content{
    width: 50%;
    align-items: flex-start;
}

.sos-content figcaption{
    width: 90%;
    max-width: 426px;
    margin: 0 auto;
    height: 100%;
    padding-top: 10px;
}

.sos-content h3{
    font-size: 24px;
    line-height: 22px;
    /* color: var(--primary-color); */
    padding-bottom: 24px;
}

.sos-content p{
    max-width: 413.5px;
    font-weight: 200;
    font-size: 15px;
    letter-spacing: 0.1px;
    line-height: 24px;
    height: 129px;
    max-height: 129px;
}

.sos-content div{
    justify-content: space-between;
    width: 95%;
    padding-top: 17px;
}

.sos-content div a{
    position: relative;
    bottom: 0px;
    line-height: 21px;
    font-size: 12px;
    font-weight: 500;
    color: var(--primary-color);
}

/*
.sos-content div a::after{
    content: '';
    padding-left: 43px;
    border-top: 1px solid #707070;
    position: absolute;
    left: -59px;
    top: 50%;
    transform: translateY(-50%);
}
*/

.sos-content div span{
    font-size: 24px;
    line-height: 22px;
    color: #3E3C3C;
    position: relative;
}

.sos-content div span::after{
    content:    attr(text-rate);
    position: absolute;
    font-size: 10px;
    font-weight: 200;
    letter-spacing: 1px;
    left: 0;
    top: -20px;

}


/* NOTE: LITTLE STORY */
#little-story{
    width: 100%;
    padding: 47px 0 66px;
    background-color: white;
    position: relative;
}

.container-right{
    max-width: 580px;
    padding-top: 1rem;
    color: var(--black-color);
}

.container-right h4,.container-right h3,
.sum-con h4,.sum-con h3
{
    color: #454545;
    font-size: 14px;
    padding-bottom: 22px;
    position: relative;
    padding-left: 42px;
}

.sum-con h4,.sum-con h3{
    font-size: 20px;
    color: #ACACAC;
}

.container-right h4::before,.container-right h3::before,
.sum-con h4::before,.sum-con h3::before{
    content: '';
    padding-left: 30px;
    border-top: 1px solid #707070;
    margin-right: 12px;
    position: absolute;
    left: 0;
    top: 8px;
}

.sum-con h4::before,.sum-con h3::before{
    top: 11px;
    border-color: #C3C0C0;
}

.belongs-static-content .gdi{
    /* justify-content: space-between; */
    flex-wrap: nowrap;
}

.common-head a,
.container-right a{
    font-size: 12px;
    color: #585858;
    line-height: 14px;
    letter-spacing: 1px;
    font-weight: 600;

    position: relative;
    text-transform: uppercase;
}

    /*
    .container-right a::after{
        content: '';
        border-bottom: 1px solid #585858;
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: -3px;
        left: 0;
    }
    */

/* NOTE: HOME ACCOMMODATION */
#home-accommodation{
    padding: 100px 0;
    background-color: white;
    justify-content: center;
}

.con-desc-slider{
    position: relative;
    min-width: 456px;
    min-width: 60vw;
    height: 574.38px;
    background-color: var(--secondary-color);
    background-color: white;
}

.con-acco-slider{
    transform: rotate(180deg);
    width: calc(100% - 456px);
}

.each-acco-slide{
    width: 789.92px;
    height: 574.38px;
    background-color: #3E3C3C;
    margin-left: 9.1px;
    position: relative;
    transform: rotate(180deg);
}

.each-acco-slide::after{
    content: '';
    padding-left: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: #483E3E;
    opacity: 0.75;
    transition: all 1s ease-in-out;
    transition-delay: 0s;
    visibility: visible;
}

.each-acco-slide.slick-current::after{
    opacity: 0;
    transition-delay: 0.4s;
    visibility: hidden;
}

.each-acco-slide .nsl{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kotak{
    width: calc(442px - 102px);
    height: 456px;
    position: absolute;
    align-items: flex-start;
    z-index: 1;
    right: 65px;
    top: 50%;
    padding: 0 45px 0 57px;
    --transform: translateY(-50%);
    padding-right: 0;
    padding-top: 20px !important;
    height: 100% !important;
    width: auto;
    right: auto;
    top: 0;
}

.ac-count{
    font-size: 24px;
    line-height: 49px;
}

.ac-count i{
    font-style: normal;
    font-family: inherit;
}

.ac-count,
.ac-title{
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 11px;
    color: #707070;
    margin: 12px 0 22px;
    text-transform: uppercase;
}

.kotak h3{
    font-size: 42px;
    line-height: 40px;
    max-height: 80px;
    overflow: hidden;
    min-height: 80px;
}

.kotak .p,
.kotak p{
    min-height: 65px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    max-width: 285px;
    color: #707070;
    margin-top: 17px;
    margin-bottom: 0;
    padding-left: 53.5px;
    position: relative;
    overflow: hidden;
    max-width: 500px;
    max-height: 160px;
}
.kotak .p {
    padding-left: 0;
}

/*
.kotak p::after{
    content: '';
    padding-left: 34px;
    position: absolute;
    left: 0;
    border-top: 1px solid #707070;
    top: 9px;
}
*/

.kotak a.ac-discover{
    padding: 13.8px 38px;
    border: 1px solid #707070;
    font-size: 11px;
    letter-spacing: 1px;
    line-height: 13px;
    font-weight: 600;
    margin-top: 29px;
    text-transform: uppercase;
}

.kotak nav{
    position: absolute;
    width: calc(100% - 57px);
    padding-left: 57px;
    height: calc((574.38px - 456px) / 2);
    bottom: -61.19px;
    left: 0;
    --justify-content: space-between;
    width: 100%;
    bottom: 0;
}

.kotak nav div{
    justify-content: space-between;
    height: fit-content;
    position: relative;
    --top: 50%;
    --transform: translateY(-50%);
    align-self: center;
}

.kotak nav div span,
.ft-hic a{
    font-size: 12px;
    --line-height: 22px;
    padding: 5px 8px;
    color: var(--primary-color);
    color: white;
    text-transform: capitalize;
    cursor: pointer;
}

.kotak nav a{
    font-size: 12px;
    font-weight: 500;
    --letter-spacing: 1.5px;
    line-height: calc((574.38px - 456px) / 2);
    color: #707070;
    color: var(--primary-color);
    text-transform: uppercase;
}

/* NOTE: INTERESTING SPOT */
#home-interesting{
    height: 691.07px;
    background-color: #707070;
    position: relative;
}

.hi-content{
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: +1;
    color: white;
}

.hi-content .h3{
    font-size: 51px;
    line-height: 53px;
    margin-top: 26px;
}

.hi-content p{
    font-weight: 500;
    max-width: 390.71px;
    min-height: 135.84px;
    max-height: 135.84px;
    font-size: 14px;
    letter-spacing: 0.1px;
    line-height: 24px;
    margin-top: 54.2px;
}

.hi-content span{
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: 0.1px;
}

.hi-content strong{
    font-size: 12px;
    letter-spacing: 1.5px;
    line-height: 14px;
    font-weight: 700;
}

.kotak h3,
.kotak .p,
.kotak p,
.ac-count,
.hi-content .h3,
.hi-content span,
.hi-content p{
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.kotak h3.actv,
.kotak .p.actv,
.kotak p.actv,
.ac-count.actv,
.hi-content .h3.actv,
.hi-content span.actv,
.hi-content p.actv{
    opacity: 1;
}

.ft-hic{
    border-top: 1px solid rgba(255, 255, 255, 0.35);
    height: 55px;
    margin-top: 153.7px;
    justify-content: space-between;
}

.ft-hic i,
.ft-hic b{
    font-family: inherit;
    font-weight: 400;
    font-style: normal;
}

.ft-hic a.r2{
    font-size: 26px;
    line-height: 36px;
}

.ft-hic a{
    line-height: 55px;
}

.each-interest{
    width: 100vw;
    height: 691.07px;
}

#home-interesting::after{
    content: '';
    padding-left: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: black;
    opacity: 0.28;
}

#why-us .ava-wu{
    overflow: hidden;
}

#why-us .ava-wu img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#home-reviews{
    padding-bottom: 118.5px;
    background-color: white;
    overflow: hidden;
    position: relative;
}

.each-review a:hover {
    color: var(--primary-color);
}

.rev-menus{
    width: 100%;
    margin-left: 30.5px;
    height: fit-content;
    justify-content: flex-end;
    border-bottom: 1px solid #DDDDDD;
    position: relative;
}

.rev-menus a{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 14px;
    padding-bottom: 17.8px;
    color: #3E3C3C;
    opacity: 0.46;
    margin-left: 55px;
    text-transform: uppercase;
}

.rev-menus a.actv{
    opacity: 1;
    color: var(--primary-color);
}

.rev-menus::after{
    content: '';
    padding-left: 100%;
    position: absolute;
    bottom: -1px;
    right: -100%;
    border-bottom: inherit;
}

/* NOTE: FOOOOOOOTER BRUH ! */

footer{
    --padding-top: 81px;
    background-color: var(--primary-color);
    position: relative;
    z-index: 9999;
}
svg {
    height: 36px;
}

.ft-arw-up{
    position: absolute;
    top: 89px;
    font-weight: 500;
    color: var(--black-color);
    font-size: 11px;
    letter-spacing: 1px;
    opacity: 0.58;
    padding-left: calc(42px + 18.5px);

    right: 41px;
    transform-origin: right;
    transform: rotate(90deg) translateX(100%);
    cursor: pointer;
}

.ft-arw-up::before,
.ft-arw-up::after{
    content: '';
    position: absolute;
    left: 0;
    transform: translateY(-50%);
    top: 50%;
    display: inline-block;
    border-top: 1px solid var(--black-color);
    width: 42px;
}

.ft-arw-up::after{
    width: 8px;
    transform-origin: left;
    transform: rotate(-45deg) translateY(-50%);
}

.cfbox{
    justify-content: space-between;
}

.cfbox .foot-box{
    width: 50%;
}

.cfbox .foot-box:nth-child(1),
.cfbox .foot-box:nth-child(2){
    max-width: 30%;
}

.f-top,
.f-mid{
    border-bottom: 1px solid #707070;
}

.cfbox h2,
.f-mid .foot-box:nth-child(2) a{
    letter-spacing: 0.1px;
    line-height: 24px;
}

.f-mid .foot-box small {
    font-size: 12px;
}

.f-top{
    padding-bottom: 65.5px;
}

.f-mid{
    padding: 43.5px 0;
}

.foot-box form,
.con-contact-reserv{
    margin-top: 32.2px;
    margin-top: 10px;
    --min-height: 214px;
    --max-height: 214px;
    align-items: flex-start;
    justify-content: space-between;
}

.foot-box form input{
    background-color: transparent;
    border: none;
    border-radius: 0px;
    box-shadow: none;

    width: 100%;
    border-bottom: 1px solid #D0D0D0;
    font-size: 16px;
    color: var(--black-color);
    font-weight: 300;
    letter-spacing: 0.1px;
    padding-bottom: 10px;
}

.foot-box form p > strong{
    display: block;
    font-size: 12px;
    font-weight: 700;
}

.foot-box form p{
    color: var(--black-color);
    font-size: 12px !important;
    font-weight: 300;
    letter-spacing: 0.1px;
    line-height: 20px;
    margin-bottom: 13px;
}

input[type="radio"],
input[type="checkbox"]{
        display:none;
}
footer input[type="radio"] + label {
        color: white;
        font-size:12px;
        font-weight: 200;
        line-height: 51.62px;
        letter-spacing: 0.1px;
        opacity: 1;
}
footer input[type="radio"] + label span,
footer input[type="checkbox"] + label span {
        display:inline-block;
        width:23px;
        height:23px;
        margin-right: 13.8px;
        vertical-align:middle;
        cursor:pointer;
        border: 1.5px solid #707070;
        border-radius:    50%;
        position: relative;
}
footer .error input[type="radio"] + label span,
footer .error input[type="checkbox"] + label span {
        border-color: red;
}
footer input[type="radio"] + label span::after,
footer input[type="checkbox"] + label span::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-46%);
    padding-left: 0px;
    height: 0px;
    background-color: white;
    border-radius: 50%;
    opacity: 0.8;
    transition: all 0.2s;
}
footer input[type="radio"]:checked + label span::after,
footer input[type="checkbox"]:checked + label span::after{
    padding-left: 12px;
    height: 12px;
}

.foot-box form div:last-child{
    justify-content: space-between;
    width: 100%;
}

.foot-box form div:last-child a{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 24px;
    color: var(--black-color);
    padding: 13px 30px;
    border: 1px solid #707070;
}

.con-contact-reserv p{
    font-size: 14px;
    letter-spacing: 0.1px;
    line-height: 25px;
    color: var(--black-color);
}

.con-contact-reserv strong,
.con-contact-reserv span{
    display: block;
}

.con-contact-reserv strong{
    font-size: 13px;
    line-height: 15px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.con-contact-reserv span{
    font-weight: 200;
    padding-bottom: 25px;
}

.f-mid ul{
    display: flex;
    flex-wrap: wrap;
}

.f-mid li{
    color: var(--black-color);
    list-style: none;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 13px;
    width: calc(100% / 3);
    width: calc(100% / 2);
    margin-bottom: 19px;
}

.f-mid li:hover{
    color: white;
}

.f-mid li:last-child,
.f-mid li:nth-last-child(2),
.f-mid li:nth-last-child(3){
    margin-bottom: 0px;
}

.f-mid .foot-box:nth-child(2){
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    color: var(--black-color);
}

.f-mid .foot-box:nth-child(2) span{
    font-size: 13px;
    line-height: 20px;
    letter-spacing: 0.1px;
    font-weight: 300;
}

/* NOTE: ANIMATE INPUT FIELD */

.label-transition{
    -webkit-transition: all 0.3s ease;
    transition:                 all 0.3s ease;
}

.group-lb{
    position: relative;
    width: 100%;
}

.group-lb label{
    position:absolute;
    pointer-events:none;
    width: 100%;
    left: 0;
    letter-spacing: 0.1px;
    /* z-index: -1; */
    top: 0;
    font-size: 16px;
    color: var(--black-color);
    font-weight: 300;
}

.group-lb:focus ~ label ,
footer input:valid ~ label,
footer textarea:valid ~ label,
footer input:focus ~ label,
footer textarea:focus ~ label{
    top: -16px;
    font-size: 11px;
    --opacity: 0.5;
}

:not(output):-moz-ui-invalid {
    box-shadow: none;
}

.group-lb::after{
    content: '';
    background-color: red;
    padding-left: 0;
    height: 2px;
    position: absolute;
    bottom: 0;
    opacity: 0;
    -webkit-transition: all 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
    transition:                 all 400ms cubic-bezier(0.075, 0.82, 0.165, 1);
}

.txtarea.group-lb::after{
    bottom: -2px;
}

.group-lb.invalid::after{
    padding-left: 100%;
    opacity: 1;
    left: 0;
}

/* ====================================== */
/* NOTE: DINING PAGE BRO */
#dining-reserve.before-detail{
    visibility: hidden;
    opacity: 0;

    transition-property: visibility , opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

#dining-reserve.before-detail.actv{
    opacity: 1;
    visibility: visible;
}

#dining-reserve.before-detail .con-dining-reserve{
    background-color: white;
}

#dining-greeting{
    background-color: white;
    padding: 168.1px 0;
}

#dining-greeting p{
    width: 90%;
    max-width: 632.5px;
    color: var(--black-color);
    letter-spacing: 0.1px;
    line-height: 24px;
    font-size: 15px;
    font-weight: 300;
    margin: 0 auto;
}

#list-dining{
    background-color: white;
    padding-bottom: 9.5px;
}

.the-list{
    background-color: var(--primary-color);
    height: 400px;
    margin-top: 9.5px;
}
.the-list.taller{
    height: 571.64px;
}

.the-list:first-child{
    margin-top: 0px;
}

.the-list:not(.no-reverse):nth-child(odd){
    flex-direction: row-reverse;
}

.the-list .con-dining-slider,
.the-list .list-content{
    width: 50%;
    height: 100%;
}

.the-list .con-dining-slider{
    background-color: #3E3C3C;
    overflow: hidden;
}

.list-content nav{
    justify-content: space-between;
}

.list-content nav a{
    color: #3E3C3C;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    line-height: 15px;
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
}

.list-content nav a:first-child::after{
    content: '';
    padding-left: 100%;
    position: absolute;
    left: 0;
    bottom: 15px;
    border-top: 1px solid #707070;

}

.list-content nav a:first-child{
    line-height: 47px;
}

.list-content nav a.dn-reserve{
    border: 1px solid #707070;
    padding: 15px 27px;
}

.list-content span{
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1.5px;
    line-height: 14px;
    color: #3E3C3C;
    opacity: 0.49;
    text-transform: uppercase;
}

.list-content h2{
    font-size: 46px;
    line-height: 53px;
    color: #3E3C3C;
    margin: 40px 0 38px;
}

.list-content h2 a,
.ups h2 a,
.ups .h2 a{
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
    font-family: inherit;
    margin: inherit;
    padding: inherit;
}

.list-content p{
    font-size: 15px;
    font-weight: 300;
    line-height: 21px;
    margin-bottom: 25px;
}

.list-content p:last-child{
    margin-bottom: 0px;
}

.f-p{
    max-width: 373px;
    min-height: 173px;
    max-height: 173px;
    overflow: hidden;
    padding-left: 53.5px;
    margin-bottom: 50px;
    position: relative;
}

.list-content .f-p::after{
    content: '';
    padding-left: 34px;
    border-top: 1px solid #707070;
    position: absolute;
    top: 8px;
    left: 0;
}

.each-g{
    height: 571.64px;
}

.each-g img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
}

.con-dining-slider nav{
    width: 57px;
    height: 19px;
    position: absolute;
    right: 34px;
    bottom: 26px;
    justify-content: space-between;
    z-index: +1;
}

.con-dining-slider nav a{
    cursor: pointer;
    padding: 0 5px;
}

.con-dining-slider nav a:first-child img{
    transform: rotate(180deg);

}

.con-dining-slider nav img{
    width: auto;
    height: 100%;
}

.each-g a{
    position: relative;
}

/* .con-dining-slider::after, */
.each-g a::after{
    content: '';
    padding-left: 100%;
    height: 174px;
    position: absolute;
    bottom: 0;
    transform: rotate(180deg);
    background: -moz-linear-gradient(top, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0.38) 0%,rgba(0,0,0,0) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0.38) 0%,rgba(0,0,0,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#61000000', endColorstr='#00000000',GradientType=0 );
}

/* NOTE: DETAIL DINING */
#greeting-dining{
    padding: 167.9px 0 191.5px;
    background-color: white;
}

.gdi{
    flex-wrap: wrap;
}

.gdi h2,
.gdi .h2{
    font-size: 36px;
    line-height: 40px;
    padding-bottom: 28px;
    width: 100%;
    color: var(--black-color);
}

.gdi div h2{
    font-size: 24px;
}

.gdi figure h2{
    font-size: 20px;
    padding-left: 6px;
    line-height: 79px;
}

.gdi p{
    --max-width: 494.5px;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.1px;
    line-height: 24px;
    color: var(--black-color);
    /* min-height: 156.84px; */
    margin-bottom: 0;
}

/*
.gdi .sum-con p{
    margin-bottom: 20px;
}

.gdi .sum-con p:last-of-type{
    margin-bottom: 85px;
}

.gdi .capt,
*/
.m1{
    width: 50%;
}

.m2{
    width: 35%;
}
.m2 p{
    max-width: 234px;
}

.m span,
.m p{
    font-size: 16px;
    line-height: 19px;
    color: #696969;
    min-height: auto;
    margin: 0px;
}

.gdi figure{
    border-top: 1px solid #DBDBDB;
    border-bottom: 1px solid #DBDBDB;
    width: 100%;
    margin-top: 127.5px;
    height: 79px;
    justify-content: space-between;
}

.gdi figure a{
    width: 38px;
    height: 38px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    margin-right: 6px;
    background-color: #C7B073;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px auto;
}

#dining-reserve{
    width: 100%;
    min-height: 100vh;
    background-color: var(--secondary-color);
    position: relative;
}

#dining-reserve::after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.65) 40%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.65) 40%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.65) 40%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
}

#dining-reserve.before-detail{
    background-color: #565656;
    position: fixed;
    top: 0;
    z-index: 10000;
}

#dining-reserve.before-detail::after{
    display: none;
}

#home-accommodation.detail-dining{
    padding-top: 0px;
}

/* NOTE: DINING RESERVE FORM */
.con-dining-reserve{
    width: calc(90% - 128px);
    max-width: 1022px;
    padding: 73.5px 64px 97.8px;
    background-color: rgba(255,255,255,0.81);
    z-index: +1;
}

.con-dining-reserve header{
    width: 343px;
}

.con-dining-reserve header h2{
    font-size: 36px;
    line-height: 40px;
    padding-bottom: 6px;
}
.con-dining-reserve header p{
    font-size: 14px;
    letter-spacing: 0.1px;
    line-height: 16px;
    color: var(--black-color);
}

.dnr-form{
    width: calc(100% - 343px);
    justify-content: space-between;
    flex-wrap: wrap;
}

    .dnr-form p.required > label:after {
        content: '*';
        color: red;
        margin-left: 5px;
    }
    .dnr-form p.required > span,
    .dnr-form p.required > small {
        position: absolute;
        margin-top: 40px;
        margin-left: -15px;
        font-size: 12px;
        line-height: initial;
    }

.f-opt{
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px auto;
    position: relative;
}

.f-opt ul{
    position: absolute;
    width: 100%;
    right: 0;
    top: calc(100% + 10px);
    z-index: +1;
    visibility: hidden;
    opacity: 0;
    background-color: white;
    transition: opacity 0.2s;

    box-shadow: 0 3px 6px #ccc;
    box-sizing: content-box;
}

.f-opt.actv ul{
    opacity: 1;
    visibility: visible;
}

.dnr-form .f-opt input{
    cursor: pointer !important;
}

.dnr-form input,
.dnr-form textarea,
.f-opt ul li{
    border: 0px;
    background-color: transparent;
    border-radius: 0px;
    box-shadow: none;
    margin-left: 21px;
    font-size: 16px;
    line-height: 22px;
    padding: 8.5px 0;
    width: 100%;
}

.f-opt ul li{
    list-style: none;
    color: black;
    width: 80%;
    margin: 0 auto;
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    cursor: pointer;
    font-size: 16px;
}

.f-opt ul li:last-of-type{
    border: 0px;
}

.dnr-form p,
.dnr-form .f-opt{
    width: 48%;
    max-width: 310.53px;
    height: fit-content;
    margin-bottom: 30px;
    border-bottom: 1px solid rgba(160, 160, 160,0.29);
    position: relative;
}

.dnr-form .ffx{
    width: 100%;
    max-width: 100%;
    flex-direction: column;
}

.dnr-form .ffx textarea{
    margin: 0px;
}

.dnr-form .ffx label{
    margin-bottom: 20px;
}

.dnr-form label{
    min-width: max-content;
    font-size: 13px;
    line-height: 39px;
}

.dnr-form button{
    padding: 22px 50px;
    background-color: var(--primary-color);
    border: 0px;
    box-shadow: none;
    border-radius: 0px;
    color: white;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 12px;
    margin-top: 16px;
    cursor: pointer;
}

/* END DINING RESERVE FORM */


/* NOTE: DETAIL ACTIVITIES */
#greeting-dining.belongs-detail-activities{
    padding-bottom: 100px;
}

.belongs-detail-activities .gdi figure{
    margin-top: 100px;
}

#home-accommodation.prt.detail-activities{
    padding-top: 0px;
}

#home-accommodation.prt.detail-activities h2{
    padding: 0px;
}

.belongs-detail-activities .gdi div h2{
    padding-bottom: 5px;
}

.belongs-detail-activities .m2{
    width: 300px;
}

.m{
    margin-bottom: 20px;
}

/* .belongs-detail-activities .m p,
.belongs-detail-activities .m span{
    font-size: 20px;
    opacity: 0.5;
} */

/* NOTE: DETAIL ACTIVITIES */
.belongs-detail-facilities .m li{
    border-bottom: 1px solid #DBDBDB;
    padding: 18px 0;
    padding-left: 27px;
    list-style: none;
    position: relative;
}

.belongs-detail-facilities .gdi div h2{
    border-bottom: 1px solid #DBDBDB;
}

.belongs-detail-facilities .m li::before{
    content: '';
    padding: 4px;
    border-radius: 50%;
    background-color: #AFAFAF;
    position: absolute;
    left: 0;
    margin-top: 6px;
}

.belongs-detail-facilities .m p{
    margin-top: 18px;
}

.belongs-detail-facilities .m li,
.belongs-detail-facilities .m p{
    font-size: 14px;
    font-weight: 300;

}

.cnt-m{
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.cnt-m .m{
    width: calc(50% - 16px);
}

/* NOTE: SPA BUKAN KALENG KALENG */
#greeting-dining.belongs-spa figure{
    margin-top: 0px;
    border: 0px;
}

#greeting-dining.belongs-spa h2{
    font-size: 30px;
}

#greeting-dining.belongs-spa figure a{
    width: auto;
    height: fit-content;
    border-radius: 0px;
    background-color: transparent;
    border: 1px solid #707070;
    font-size: 13px;
    font-weight: 500;
    padding: 14px 30px;
}

#menu-spa{
    margin-top: 20px;
}

.con-mn{
    border-bottom: 1px solid #9D9D9D;
    padding-top: 29px;
}

.con-mn .lhead{
    width: 100%;
    justify-content: space-between;
}

.con-mn:first-child{
    border-top: 1px solid #9D9D9D;
}

.con-mn.actv{
    border-bottom: 0px;
}

.con-mn h3{
    font-size: 16px;
    color: #212121;
    font-weight: 500;
    padding-left: 62px;
    font-family: 'Work Sans', sans-serif;
    position: relative;
    cursor: pointer;
}

.con-mn h3::after,
.con-mn h3::before{
    content: '';
    padding-left: 12px;
    border-top: 2px solid #B1B1B1;
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
}

.con-mn h3::before{
    transform: translateY(-50%) rotate(90deg);
    transition: all 0.3s ease-in-out;
    opacity: 1;
}

.con-mn.actv h3::before{
    top: 100%;
    opacity: 0;
}

.spa-pr{
    width: 195px;
    font-size: 14px;
    font-weight: 300;
    color: #B2B2B2;
    letter-spacing: 0.1px;
    text-transform: capitalize;
}

.spa-pr strong{
    font-weight: 500;
    color: #606060;
}

.con-mn ul{
    width: 100%;
}

.con-mn .roar{
    width: 100%;
    margin-top: 29px;
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.con-mn ul li{
    list-style: none;
    background-color: #FAFAFA;
    border-top: 1px solid #E6E6E6;
    padding: 0 28.5px 0 38px;
    height: 73px;
    line-height: 73px;
    justify-content: space-between;
}

.con-mn ul li:last-child{
    border-bottom: 1px solid #E6E6E6;
}

.con-mn ul li:first-child{
    padding: 27px 28.5px 27px 38px;
    height: auto;
    line-height: normal;
}

.con-mn ul li:first-child p{
    font-weight: 300;
    font-size: 13px;
    letter-spacing: 0.1px;
    line-height: 22px;
    color: var(--black-color);
}

.ii{
    justify-content: space-between;
    width: 302px;
    font-size: 14px;
    color: #606060;
}

.libtn{
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    cursor: pointer;
}

/* NOTE: BOOK SPA */
#book-spa{
    width: 100%;
    min-height: 100vh;
    background-color: white;
    position: fixed;
    top: 0;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    transition-property: visibility , opacity;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
}

#book-spa.actv{
    visibility: visible;
    opacity: 1;
}

#book-spa .container{
    justify-content: space-between;
}

.bsc{
    width: calc(50% - 39px);
}

.bsc h2{
    font-size: 28px;
    line-height: 34px;
    color: var(--primary-color);
    margin-bottom: 28px;
}

.bsc input,
.bsc textarea{
    width: 100%;
    box-shadow: none;
    border-radius: 0px;
    border: 0px;
    padding: 12px 0;
    color: var(--black-color);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1px;
}

.triplet .spa_date,
.triplet .tpo_{
    padding: 12px 0;
    color: var(--black-color);
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1px;
    width: auto;
    padding-right: 15px;
    margin-right: 35px;
    cursor: pointer;

    background-size: 11px auto;
    background-position: right center;
    background-repeat: no-repeat;
    position:relative;
}

.triplet .spa_date{
    padding: 0;
    width: 100px;
    margin: 0;
}

.triplet .tpo_ span{
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0.1px;
    width: max-content;
    min-width: max-content;
}

.tpo_ ul{
    background-color: white;
    position: absolute;
    left: 0;
    top: 40px;
    width: max-content;

    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 3px 6px #ccc;
    z-index: 1;
}

.tpo_ ul.actv{
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

.tpo_ ul li{
    font-size: 13px;
    margin: 0 10px;
    padding: 10px 20px;
    /* color: white; */
    list-style: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.tpo_ ul li:last-of-type{
    border: 0px;
}

.bsc .group{
    border-bottom: 1px solid rgba(112,112,112,0.29);
    margin-bottom: 8px;
}

.bsc .group.er_{
    border-color: red;
}

.bsc label{
    font-size: 12px;
    color: #797979;
    min-width: fit-content;
    margin-right: 15px;
    line-height: 44px;
}

.bradio{
    width: 100%;
    margin-bottom: 17px;
}

.wrp{
    flex-wrap: wrap;
}

.bradio label{
    font-size: 16px !important;
    letter-spacing: 1px;
    line-height: 20px;
    position: relative;
    padding-left: 20px;
    top: 0 !important;
    opacity: 1 !important;
    margin-right: 75px;
    cursor: pointer;
}

.bradio label::after,
.bradio label::before,
.agr label::before{
    content: '';
    width: 11px;
    height: 11px;
    border: 1px solid #B28A6C;
    position: absolute;
    left: 0;
    top: 50%;
    border-radius: 50%;
    transform: translateY(-50%);
}

.bradio input:checked + label::before{
    content: '';
    position: absolute;
    width: 7px;
    height: 7px;
    left: 2px;
    background-color: #B88760;
}

.agr{
    padding-bottom: 21.5px;
    padding-top: 10px;
}

.agr label{
    font-size: 13px;
    line-height: 18px;
    color: #A5A5A5;
    padding-left: 29px;
    display: block;
    position: relative;
    cursor: pointer;
}

.agr label::before{
    border-radius: 0px;
    top: 3px;
    transform: none;
}

.agr.er_ label::before{
    border: 2px solid red;
}

.agr label::after{
    content: '';
    position: absolute;
    left: 3px;
    top: 0;
    background-image: url(images/svg/check.svg);
    background-repeat: no-repeat;
    background-size: 100%;
}

.agr input:checked + label::after{
    width: 14px;
    height: 18px;
}

.bsc .group:last-child{
    border-bottom: 0px;
}

.ft-spabook .bsc{
    border-top: 1px solid rgba(112, 112, 112, 0.29);
}

.fff{
    padding-top: 36.5px;
}

.fff p{
    font-size: 12px;
    line-height: 16px;
    color: var(--black-color);
}

.fff a{
    padding: 13px 54px;
    background-color: var(--primary-color);
    color: white;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    cursor: pointer;
}

.fff:last-child{
    text-align: right;
    padding-top: 49.5px;
}

.spb-c{
    cursor: pointer;
    position: absolute;
    top: 19px;
    right: 18px;
    width: 13px;
    padding: 5px;
}

/* NOTE: ACCOMODATION */
#list-accom{
    background-color: white;
    padding-bottom: 32px;
}

#list-accom.nyuh-kuning{
    padding-bottom: 10px;
}
/* LIST MONKEY FORES */
.monkey-forest .accom-container{
    width: 100%;
    --width: calc(100% - 64px);
    max-width: 1378px;
    margin:    0 auto;

    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(auto, 437.54px)); */
    grid-template-columns: repeat(auto-fit, minmax(auto,calc((100% - 64px) / 3)));
    grid-gap: 32px;
}

.each-acco figure{
    /* width: 100%; */
    height: 228.32px;
    background-color: #797979;
}

.each-acco figcaption{
    padding-top: 32.7px;
    background-color: var(--primary-color);
}

.each-acco figcaption .ups,
.dwnt{
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 46.3px;
    border-bottom: 1px solid #E3E3E3;
}

.ups span{
    color: var(--black-color);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1px;
    opacity: 0.65;
    width: 100%;
}

.ups h2,
.ups .h2{
    font-size: 29px;
    --line-height: 48px;
    margin: 5.4px 0 24.6px 0;
    width: 100%;
}

.ups p{
    min-width: 116px;
    margin-bottom: 21.6px;
    font-size: 11px;letter-spacing: 0.5px;
    line-height: 17px;
    color: #020202;
    text-transform: uppercase;
}

.ups p span{
    display: block;
    margin-bottom: 2px;
}

.dwnt{
    padding-top: 23px;
    padding-bottom: 23px;
    border: 0px;
}

.dwnt a{
    height: auto;
    color: black;
    letter-spacing: 1.5px;
    font-weight: 500;
    cursor: pointer;
}

.dwnt a:first-child{
    font-size: 11px;
    position: relative;
    line-height: 38px;
    padding-left: 1px;
}

.dwnt a:first-child::after{
    content: '';
    position: absolute;
    border-top: 1px solid #707070;
    width: 100%;
    bottom: 13px;
    left: 0;
}

.dwnt a:last-child{
    padding: 11px 22px;
    border: 1px solid #707070;
    font-size: 12px;
}

/* END LIST MF */

/* NOTE: ACCOMODATION NYUH KUNING */
.nyuh-kuning figcaption,
.monkey-forest .nk-capt,
.nyuh-kuning .fmf{
    display: none;
}

.monkey-forest .fmf{
    display: block;
    width: 100%;
    height: 100%;
}

.nyuh-kuning .accom-container{
    width: 99%;
    max-width: 1419px;
    margin:    0 auto;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(auto, calc((100% - 10px)/2)));
    /* grid-auto-rows: minmax(auto, 437.54px); */
    grid-gap: 10px;
}

.nyuh-kuning figure{
    height: 413.49px;
    position: relative;
    overflow: hidden;
}

.nyuh-kuning figure::after{
    content: '';
    bottom: 0;
    width: 100%;
    height: 100%;
    max-height: 257.14px;
    opacity: 0.76;
    position: absolute;
    transition: all 0.5s ease;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 );
}

.nyuh-kuning figure::before{
    content: '';
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    transition: opacity 0.5s ease;
    background-color: rgba(0, 0, 0, 0.58);
}

/* NOTE: hover accommodation */
.nyuh-kuning figure:hover::after{
    opacity: 0;
}

.nyuh-kuning figure:hover::before{
    opacity: 1;
}

.nyuh-kuning .nk-capt{
    position: absolute;
    color: white;
    z-index: +1;
    padding: 50px 67px;
    bottom: 0;
    width: calc(100% - 134px);
    max-height: 50px;
    /* background-color: rgba(0, 0, 0, 0); */
    transition-property: max-height , background-color;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    overflow: hidden;
    /* min-height: calc(100% - 100px); */
}

.nyuh-kuning figure:hover .nk-capt{
    /* height: calc(100% - 100px); */
    /* background-color: rgba(0, 0, 0, 0.58); */
    max-height: calc(100% - 100px);
}

.nyuh-kuning .nk-capt span{
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 12px;
    opacity: 0.65;
}

.nyuh-kuning .nk-capt p{
    font-size: 13px;
    line-height: 20px;
    margin-top: 30px;
    margin-bottom: 12px;
    max-height: 50px;
    min-height: 50px;
    max-width: 476px;
    overflow: hidden;
    transition-property: transform , opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0.3s;
    opacity: 0;
    transform: translateY(30px);
}

.nyuh-kuning .nk-capt ul{
    flex-wrap: wrap;
    justify-content: space-between;
    min-height: 95px;
    max-height: 95px;
    overflow: hidden;

    transition-property: transform , opacity;
    transition-duration: 0.5s;
    transition-timing-function: ease;
    transition-delay: 0.5s;
    opacity: 0;
    transform: translateY(30px);
}

.nyuh-kuning figure:hover .nk-capt p,
.nyuh-kuning figure:hover .nk-capt ul{
    opacity: 1;
    transform: translateY(0);
}

.nyuh-kuning .nk-capt li{
    list-style: none;
    width: 40%;
    font-size: 13px;
    height: max-content;
    background-image: url(images/svg/check_amenities-w.svg);
    background-size: 14px;
    background-color: left center;
    padding-left: 26px;
    background-repeat: no-repeat;
}

.nyuh-kuning .nk-capt h2{
    font-size: 32px;
    line-height: 43px;
    margin-top: 10px;
    position: relative;
}

.nyuh-kuning .nk-capt .agvht{
    width: 100%;
    justify-content: space-between;
    margin-top: 17px;
}

.nyuh-kuning .nk-capt .agvht a{
    display: block;
    font-size: 12px;
    cursor: pointer;
    letter-spacing: 1.5px;
}

/* .nyuh-kuning .nk-capt .agvht a:first-of-type{
    display: none;
} */

.nyuh-kuning .nk-capt .agvht a:last-of-type{
    padding: 15px 34px;
    border: 1px solid white;
}

.nyuh-kuning .nk-capt .agvht a.fty-dt{
    /* height: max-content; */
    position: relative;
    padding: 15px 0;
}

.nyuh-kuning .nk-capt .agvht a.fty-dt::after{
    content: '';
    padding-left: 100%;
    border-top: 1px solid white;
    position: absolute;
    left: 0;
    bottom: 14px;
}


/* NOTE: symbolllll */
.nyuh-kuning .nk-capt h2::after,
.nyuh-kuning .nk-capt h2::before{
    content: '';
    padding-left: 20px;
    border-top: 1px solid white;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.nyuh-kuning .nk-capt h2::after{
    transform: rotate(90deg) translateY(-50%);
}

/* NOTE: DETAIL ACCOMMODATION */
.spec,
.amen,
#greeting-dining.belongs-dt-acco .capt{
    width: 50%;
}

#greeting-dining.belongs-dt-acco{
    padding-bottom: 80px;
}

.spec,
.amen{
    flex-wrap: wrap;
    justify-content: space-between;
}

.spec h2,
.amen h2{
    width: 100%;
}

.spec p{
    min-height: auto;
    color: var(--black-color);
    font-size: 13px;
    line-height: 20px;
    font-weight: 300;
    text-transform: uppercase;
    min-width: 238px;
    max-width: 414px;
}

.spec p:last-child{
    text-transform: none;
}

.spec p span{
    display: block;
    margin-bottom: 12px;
    font-weight: 500;
    line-height: 13px;
    /* opacity: 0.57; */
    opacity: 0.8;
}

.amen ul{
    flex-wrap: wrap;
}

.amen ul li{
    list-style: none;
    width: calc(50% - 27px);
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 300;
    color: #535353;
    padding-left: 27px;
    background-repeat: no-repeat;
    background-position: left 2px;
    background-size: 20px;
}

#dining-reserve.belongs-to-dt-acco{
    min-height: auto;
    padding: 39px 0;
}

#dining-reserve.belongs-to-dt-acco::after{
    display: none;
}

.belongs-to-dt-acco .con-dining-reserve{
    width: calc(1440px - 78px);
    padding: 85px 0 78px 0;
    background-color: rgba(255,255,255,0.76);
}

.xvo{
    width: 90%;
    margin: 0 auto;
    max-width: 1013px;
}

/* NOTE: HERO SLIDER CUK */
#hero-adt-slider{
    width: 100%;
    height: 100vh;
    background-color: #565656;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10000;
    color: white;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
}

#hero-adt-slider.actv{
    opacity: 1;
    visibility: visible;
}

#hero-adt-slider h2,
#hero-adt-slider .h2{
    text-transform: capitalize;
    font-size: 28px;
    line-height: 53px;
}

#hero-adt-slider span{
    font-size: 11px;
    letter-spacing: 0.2px;
}

#hero-adt-slider span.ac-count{
    font-size: 28px;
    margin-top: 35px;
}

#hero-adt-slider span.ac-count b{
    font-size: inherit;
    font-family: inherit;
}

#hero-adt-slider .cls{
    position: absolute;
    right: 23px;
    top: 21px;
    width: 28px;
    height: auto;
    padding: 5px;
    cursor: pointer;
    opacity: 0.7;
}

.h-adt-slider{
    margin: 60px 0 15px;
    position: relative;
    width: 100vw;
    min-height: 482.7px;
}

.slide-bg-hero{
    width: 728.15px;
    height: 443.78px;
    background-color: #303030;
    margin: 0 30px;
    opacity: 0.15;
    margin-top: 19.46px;
    transition: all 0.47s ease-in-out;
    transition-delay: 0s;
}

.slide-bg-hero.slick-center{
    margin-top: 0;
    opacity: 1;
    height: 482.7px;
    transition-delay: 0.4s;
}

.sh-n{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    /* width: calc((100vw - 728.15px) / 2); */
    padding: 50px;
    z-index: 999;
    right: 100px;
    border-radius: 50%;

    background-position: center;
    background-repeat: no-repeat;
    background-size: auto 35px;

    cursor: pointer;
}

.sh-n.p{
    left: 100px;
    right: auto;
    transform: rotateY(180deg) translateY(-50%);
}

/* NOTE: GALLERYYYYYYYYYYYYYYYYYYYYY */
#galegale{
    flex-wrap: wrap;
    background-color: white;
}

.thumbnail-gallery{
    background-color: #3E3C3C;
    width: calc(100% / 3);
    height: calc(100vw / 3);
    color: white;
    position: relative;
}

.thumbnail-gallery::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.38;
}

.thumbnail-gallery *{
    z-index: +1;
}

.thumbnail-gallery:nth-child(1),
.thumbnail-gallery:nth-child(2){
    width: 50%;
    height: 582px;
}

.thumbnail-gallery:last-child{
    width: 100%;
    height: 582px;
}

.thumbnail-gallery h2{
    font-size: 34px;
}

.thumbnail-gallery a{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 42px;

    font-size: 9px;
    letter-spacing: 0.3px;
    padding: 13px 31px;
    border: 1px solid rgba(255, 255, 255, 0.48);
}

.belongs-offers .ups h2,
.belongs-offers .ups .h2{
    margin-bottom: 13px;
}

.belongs-offers .ups .mbro{
    text-transform: none;
    font-size: 13px;
    opacity: 0.9;
    --max-height: 51px;
    --min-height: 51px;
    overflow: hidden;
}

.belongs-to-gallery{
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease-in-out;
}

.belongs-to-gallery.actv{
    transform: translateY(0px);
    opacity: 1;
}

.btg-load{
    position: absolute;
    top: 50%;
    transition: translateY(-50%);
    width: 85px;
    height: 85px;
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.btg-load.hide{
    opacity: 0;
}

/* NOTE: MOBILE MENU */
.top-menu ul li.home{
    display: none;
}

#pop-menu,
.embel-embel.f-mob,
.jombs{
    display: none !important;
}

#home-accommodation.detail-accommodation figure{
    position: relative;
}

/* NOTE: POP UP BOOKING MAIN */

.mmenu-close{
    position: absolute;
    right: 46px;
    top: 30px;

    color: white;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 1px;
    padding-right: 22px;
    cursor: pointer;
    z-index: +1;
}

.mmenu-close::after,
.mmenu-close::before{
    content: '';
    padding-left: 11px;
    border-top: 1px solid white;
    transform-origin: center;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.mmenu-close::after{
    transform: translateY(-50%) rotateZ(-45deg);
}

.mmenu-close::before{
    transform: translateY(-50%) rotateZ(45deg);
}

#popup-book .mmenu-close::after,
#popup-book .mmenu-close::before,
#dining-reserve .mmenu-close::after,
#dining-reserve .mmenu-close::before{
padding-left: 18px;
left: 0;
}

#popup-book .mmenu-close,
#dining-reserve .mmenu-close{
    padding: 10px;
}

#popup-book{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 10000;
    visibility: hidden;
    overflow: hidden;

    transition-property: visibility , background-color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

#popup-book.actv{
    visibility: visible;
    background-color: rgba(0, 0, 0, 0.5);
}

#popup-book form{
    width: calc(100% - 100px);
    max-width: 350px;
    width: 95%;
    height: 100%;
    background-color: #3E3C3C;
    margin-left: auto;
    --padding: 78px 50px 0;
    transform: translateX(100%);
    opacity: 0;

    transition-property: opacity , transform;
    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.1s;
}

#popup-book.actv form{
    opacity: 1;
    transform: translateX(0%);
    transition-delay: 0.3s;
}

#popup-book .h2{
    color: rgba(255,255,255,0.7);
    font-size: 35px;
    opacity: 0.62;
    padding-bottom: 33px;
    padding: 15px 30px 5px 0;
}

#popup-book label{
    color: white;
    padding: 20px 0 10px;
    display: block;
    border-bottom: 1px solid rgba(237,237,237,0.11);
}

#popup-book label a p{
    color: white;
    font-size: 13px;
    margin: 0;
}

#popup-book label a{
    position: relative;
}

#popup-book label ul{
    position: absolute;
    top: 28px;
    z-index: 1;
    background-color: white;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-15px);
    transition: all 0.2s ease-in-out;
}

#popup-book label ul.actv{
    transform: translateY(0px);
    opacity: 1;
    visibility: visible;
}

#popup-book label ul li{
    width: 80%;
    padding: 15px 10px;
    color: #525252;
    list-style: none;
    font-size: 13px;
    border-bottom: 1px solid #E8E8E8;
    margin: 0 auto;
}

#popup-book label ul li:last-of-type{
    border: 0px;
}

#popup-book label span{
    display: block;
    opacity: 0.48;
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

#popup-book .bparent{
    font-size: 13px;
    line-height: normal;
    position: relative;
    display: block;
    background-size: 12px auto;
}

#popup-book input,
.head-book input{
    color: white;
    background-color: transparent;
    width: 100%;
    font-weight: 500;
    letter-spacing: 0.1px;
}
    .head-book input {
        color: var(--primary-color);
    }

.float-btn{
    background-color: var(--primary-color);
    color: white;
    padding: 22px 0;
    width: 100%;
    display: block;
    text-align: center;
    margin-top: 20px;
    border-radius: 10px;
    cursor: pointer;
}

#popup-book input::placeholder {
    color: white;
    opacity: 1;
}

#popup-book input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: white;
    opacity: 1;
}

#popup-book input::-ms-input-placeholder { /* Microsoft Edge */
    color: white;
    opacity: 1;
}

/* NOTE: MENU DROP DOWN */
.drp-d{
    position: absolute;
    display: block !important;
    top: 75%;
    width: 100%;
    min-width: 100px;
    padding: 0;
    background-color: var(--primary-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.2s ease-in-out;
}

.dwn:hover > .drp-d{
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
}

.sage-mode .drp-d{
    top: 100%;
}

#pop-menu .drp-d {
    margin-top: 16px;
}

#pop-menu .drp-d li,
.top-menu .drp-d li{
    line-height: normal !important;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    border-bottom: 1px solid #E8E8E8;
    letter-spacing: 0.1px;
    padding: 16px 0;
    font-size: 12px;
}

#pop-menu .drp-d li a,
.top-menu .drp-d li a{
    color: white;
}

#pop-menu .drp-d li:last-of-type,
.top-menu .drp-d li:last-of-type{
    border: 0px;
}

/* NOTE: CONTACT INFORMATION */
#contact-information{
    min-height: calc(100vh - 57px);
    padding-top: 57px;
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

#contact-information.actv{
    transform: translateX(0%);
}

.coninfo-map{
    width: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    height: auto;
}

.map-info{
    background-color: #292929;
    min-width: 385px;
    height: auto;
    position: relative;
}

.each-con-info{
    /* border: 1px solid white; */
    padding: 60px 50px;
    color: white;
}

.each-con-info.actv{
    background-color: #908E84;
}

.mdt{
    display: block;
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.1px;
    line-height: 18px;
}

.mdt.t{
    font-size: 14px;
    margin-bottom: 12px;
}

.mdt.a{
    margin-bottom: 20px;
}

.each-con-info.down{
    position: absolute;
    bottom: 0;
    /* border: 1px solid red; */
    width: calc(100% - 100px);
    padding: 0 50px;
}

.thesos{
    padding: 35px 0;
    border-bottom: 1px solid #3B3B3B;
}

.thesos a{
    margin-right: 25px;
}

.thesos img{
    height: 14px;
    width: auto;
}

.send-inq-map{
    padding: 35px 0;
    color: white;
    font-size: 12px;
    font-weight: 600;
    display: block;
    position: relative;
    cursor: pointer;
}

.send-inq-map::after{
    content: '';
    position: absolute;
    right: 0;
    padding: calc(29px / 2);
    border: 1px solid #707070;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    background-image: url(images/svg/arrow-tipis-white.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 6px auto;
}

#send_inq_coninfo{
    position: fixed;
    top: 0;
    z-index: 999999;
    width: 100%;
    height: 100vh;
    background-color: #292929;
    transition: transform 0.4s ease;
    transform: translateX(100%);
}

#send_inq_coninfo.actv{
    transform: translateX(0%);
}

.belongs-coninfo .dnr-form{
    width: 100%;
    margin-top: 35px;
}

.belongs-coninfo .con-dining-reserve{
    max-width: 870px;
    background-color: white;
}

.belongs-coninfo .dnr-form p{
    max-width: none;
}

.send-inq-map.tback{
    padding-left: 46px;
    position: absolute;
    top: 0;
    padding-right: 0px;
}

.send-inq-map.tback::after{
    right: auto;
    left: 0;
    transform: rotate(180deg) translateY(-50%);
    transform-origin: top;
}

/* NOTE: PT CURSOR MANAGEMENT CERIA */
.so-slider,
.why-us-slider-con,
.con-reviews-slider{
    cursor: -webkit-grab;
    cursor: -o-grab;
    cursor: -moz-grab;
    cursor: grab;
}

footer input:-webkit-autofill,
footer input:-webkit-autofill:hover,
footer input:-webkit-autofill:focus,
footer input:-webkit-autofill:active    {
        -webkit-box-shadow: 0 0 0 30px var(--primary-color) inset !important;
}

footer input:-webkit-autofill {
        -webkit-text-fill-color: white !important;
}

footer .group-lb label{
    background-color: var(--primary-color);
}

.footer_subscribe_button{
    cursor: pointer;
}

footer .require.error{
    border-color: red;
}

/* NOTE: JQUERY UI DATEPICKER */
.datepicker-container{
    width: 256px;
}

.datepicker-container *{
    font-family: 'Work Sans', sans-serif;
}

.datepicker-top-left, .datepicker-top-right{
    border: none;
}

.datepicker-panel>ul>li[data-view="month current"], .datepicker-panel>ul>li[data-view="year current"], .datepicker-panel>ul>li[data-view="years current"]{
    width: calc(100% - 60px);
    font-size: 12px;
    font-weight: 600;
    color: #525252;
}
.datepicker-panel>ul{
    width: 100%;
}

.datepicker-top-left:after, .datepicker-top-right:after,
.datepicker-top-left:before, .datepicker-top-right:before{
    display: none;
}

.datepicker-panel ul:first-of-type{
    padding: 5px 0;
    margin-bottom: 5px;
}

.datepicker-panel>ul>li{
    width: calc(100% / 7)
}

.datepicker-panel>ul>li.muted[data-view="day prev"]{
    text-decoration: line-through;
}

.datepicker-panel ul[data-view="week"]{
    font-weight: 600;
    font-size: 10px;
}

.datepicker-panel ul[data-view="days"]{
    font-size: 10px;
}

.datepicker-panel ul[data-view="week"] li:first-of-type,
.datepicker-panel ul[data-view="days"] li:nth-child(7n-6){
    color: red;
}

.datepicker-panel>ul>li.highlighted{
    position: relative;
    background-color: transparent;
    color: white;
}
.datepicker-panel>ul>li.highlighted::before{
    content: '';
    height: 23px;
    padding-left: 23px;
    border-radius: 50%;
    background-color: var(--primary-color);
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    position: absolute;
}

.datepicker-panel>ul>li.highlighted::after{
    content: 'Today';
    position: absolute;
    color: black;
    top: -16px;
    left: 50%;
    font-size: 8px;
    font-weight: 500;
    transform: translateX(-50%);
}

.datepicker-panel ul:first-of-type li:first-of-type,
.datepicker-panel ul:first-of-type li:last-of-type{
    width: 30px;
}

.datepicker-container.datepicker-hide{
    display: block;
    transition: all 0.2s;
    visibility: hidden;
    opacity: 0;
}

.datepicker-container{
    transition: all 0.2s;
    visibility: visible;
    opacity: 1;
}

/* NOTE: LORD LOADING */
.the-lord{
    width: 100%;
    height: 100vh;
    background-color: var(--primary-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1999;

    opacity: 0;
    visibility: hidden;
    transition: all 1s ease;
}

.the-lord.actv{
    opacity: 1;
    visibility: visible;
}

.the-lord .super-logo{
    width: 232px;
    height: auto;
}

.pace {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box;

    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;

    z-index: 2000;
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 5px;
    background-color: white;
    visibility: visible;
    opacity: 1;
    transition: all 1s ease;
}

.pace .pace-progress {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);

    display: block;
    position: absolute;
    right: 100%;
    width: 100vw;
    height: 5px;
    font-size: 20px;
    background: var(--primary-color);
    color: white;
    font-weight: 300;
    z-index: 2002;

}

.pace .pace-activity {
    position: absolute;
    width: 100%;
    height: 1px;
    z-index: 1999;
    background-color: #FFFFFF;
    opacity: 0.11;
}

.pace.pace-inactive {
    visibility: hidden;
    opacity: 0;
}

.ft-loader{
    position: absolute;
    bottom: 0;
    width: 100%;
    left: 0;
    height: 70px;
    z-index: 0;
    line-height: 70px;
}

.ft-loader p{
    font-weight: 300;
    font-size: 12px;
    letter-spacing: 0.1px;
    color: white;
    text-align: center;
}

/* NOTE: 404 NOT FOUND like yo crush */
#nf-404{
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
}

#nf-404::after{
    content: '';
    width: inherit;
    height: inherit;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.72);
}

#nf-404 *{
    z-index: +1;
    color: white;
}

#nf-404 h1,
#nf-404 h2{
    font-size: 66px;
    margin-bottom: 30px;
}

#nf-404 p{
    width: 80%;
    max-width: 400px;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
}

#nf-404 a:last-of-type{
    position: absolute;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 500;
    margin: 0 auto;
    bottom: 95px;
    cursor: pointer;
}

#nf-404 a:last-of-type::after{
    content: '';
    position: absolute;
    width: 100%;

    border-bottom: 1px solid #AFAFAF;
    bottom: -2px;
    left: 0;
}

#nf-404 a:first-of-type{
    position: absolute;
    margin: 0 auto;
    top: 95px;
}

#nf-404 a img{
    max-width: 158px;
}

#nf-404.modal_{
    width: calc(100vw - 50px);
    height: calc(100vh - 50px);
    top: 25px;
    left: 25px;
    /* background-color: rgba(255, 255, 255, 0.97); */
    background-color: white;
}

#nf-404.modal_::before{
    content: '';
    position: absolute;
    width: 100vw;
    padding-top: 100vh;
    background-color: rgba(0, 0, 0, 0.4);
    top: -25px;
    left: -25px;
}

#nf-404.modal_::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    top: 0;
    left: 0;
}

#nf-404.modal_ *{
    color: #606060;
}

#nf-404.modal_ p{
    width: 100%;
}

#nf-404.modal_{
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#nf-404.modal_.actv{
    visibility: visible;
    opacity: 1;
}

.load_{
    padding-left: 1px;
    opacity: 0;
    background-size: 50px;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 0;
    transition: all 0.3s ease;
}
.load_.actv{
    padding-left: 14px;
    opacity: 1;
    margin-right: 5px;
}

.p__.er{
    border-color: red !important;
}

input[name="treatment_location__"],
input[name="treatment_category__"],
input[name="treatment_list__"]{
    text-transform: capitalize;
    color: var(--primary-color);
}

.brand-new-logo{
    width: 175px;
    height: inherit;
    background-color: var(--primary-color);
    background-color: transparent;
}

.brand-new-logo img{
    --filter: brightness(0) invert(1);
    width: 100%;
}
    .brand-new-logo img.logo-big{
        display: block;
    }
    .brand-new-logo img.logo-sage{
        display: none;
    }

.nav-head.sage-mode .brand-new-logo img{
    filter: none;
    height: 57px;
}
    .nav-head.sage-mode .brand-new-logo img.logo-big{
        display: none;
    }
    .nav-head.sage-mode .brand-new-logo img.logo-sage{
        display: block;
    }

.nav-link {
    color: var(--black-color);
}

.nav-tabs .nav-link:focus, .nav-tabs .nav-link:hover {
    color: var(--primary-color);
}

.brand-new-btn img{
    float: right;
    margin: 20px 20px 0 -20px;
}

.float-btn.brand-new-btn img{
    width: 19.41px;
    margin-right: 10px;
    --top: 5px;
}

/* ================================ */
/* RESPONSIVE */

@media (max-width: 1345px){
    #pop-menu{
        position: fixed;
        top: 0;
        width: 100vw;
        height: 100vh;
        background-color: #3F3F3F;
        z-index: 10009;
        display: block !important;
        visibility: hidden;
        opacity: 0;
        transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    }

    #pop-menu.active{
        opacity: 1;
        visibility: visible;
    }

    .m-deslang{
        position: absolute;
        left: 46px;
        top: 30px;
    }

    .m-deslang .dwn{
        line-height: normal;
    }

    .m-deslang .dwn:first-child span{
        padding-left: 0px;
        border-left: 0px;
    }

    .cn-m-menu{
        width: 90%;
        max-width: 513px;
        position: relative;
        top: calc(50% + 43px);
        transform: translateY(-50%);
        margin: 0 auto;
        color: white;
    }

    .cn-m-menu h2{
        font-size: 30px;
    }

    .cn-m-menu h2::after{
        content:'';
        border-top: 1px solid var(--black-color);
        display: block;
        width: 100%;
        margin-left: 20px;
        height: min-content;
        position: relative;
        top: 19px;
    }

    .cn-m-menu ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 71px;
    }

    .cn-m-menu li{
        list-style: none;
        min-width: 160px;
        font-size: 20px;
        opacity: 0.56;
        margin-bottom: 27px;
    }

    .cn-m-menu li:nth-child(odd){
        width: 65%;
    }

    .cn-m-menu ul:last-of-type li{
        margin-bottom: 20px;
    }

    .cn-m-menu ul:last-of-type li a{
        font-family: 'Work Sans', sans-serif;
        font-size: 10px;
        letter-spacing: 1px;
    }

    .top-menu ul:not(.dropdown-menu){
        display: none;
    }
}

@media (max-width: 1024px){
    .container h2{
        font-size: 32px;
        line-height: 40px;
    }

    .xvo{
        display: block;
    }
    .dnr-form p{
        max-width: none;
    }
    .belongs-to-dt-acco .con-dining-reserve{
        width: calc(100% - 78px);
    }
    .con-dining-reserve header{
        width: auto;
    }
    .con-dining-reserve{
        display: block;
    }
    .dnr-form{
        width: 100%;
        margin-top: 35px;
    }
    #list-accom{
        padding-bottom: 33px;
    }
    .monkey-forest .accom-container{
        --width: calc(100% - 70px);
        grid-template-columns: repeat(auto-fit, minmax(auto,calc((100% - 33px) / 2)));
        grid-gap: 33px;
    }
    .nyuh-kuning .accom-container{
        width: calc(100% - 16px);
        grid-template-columns: repeat(auto-fit, minmax(auto,calc((100% - 8px) / 2)));
        grid-gap: 8px;
    }
    .nyuh-kuning .nk-capt{
        width: calc(100% - 70px);
        /* left: 35.5px;
        bottom: 30px; */
        max-height: 57px;
        padding: 35px 35px;
    }
    .nyuh-kuning figure{
        height: 333.49px;
    }

    .nyuh-kuning .nk-capt p{
        margin-top: 10px;
        min-height: 55px;
    }
    .nyuh-kuning .nk-capt h2{
        font-size: 28px;
    }

    .nyuh-kuning .nk-capt ul{
        min-height: 80px;
        max-height: 80px;
    }

    .nyuh-kuning .nk-capt .agvht{
        margin-top: 10px;
    }

    .nyuh-kuning figure:hover .nk-capt{
        max-height: calc(100% - 70px);
    }
    .ups p{
        margin-right: 10px;
    }
    .ups h2,
    .ups .h2{
        font-size: 28px;
    }
    .slide-bg-hero{
        width: 563.79px;
        height: 375.95px;
    }
    .slide-bg-hero.slick-center{
        height: 408.93px;
    }
    .sh-n{
        right: 0;
    }
    .sh-n.p{
        left: 0;
    }
    .thumbnail-gallery:nth-child(1), .thumbnail-gallery:nth-child(2){
        height: 50vw;
    }
    .thumbnail-gallery h2{
        font-size: 32px;
    }
    .gdi .capt, .m1, .m2{
        width: 290px !important;
    }
    .amen ul li{
        width: calc(100% - 27px);
    }
    .spec p{
        width: 80%;
    }

    #greeting-dining.belongs-spa p{
        max-width: calc(100% - 290px);
    }
    .container{
        max-width: 785px;
    }

    .o-con{
        height: auto;
    }
    .sos{
        width: 90vw;
        max-width: 785px;
        margin: 0 6px;
    }

    .sos-content,
    .sos-img{
        height: 359.9px;
    }

    .hero-logo{
        height: 59px;
    }

    .hgreet h1,
    .hgreet .h1{
        font-size: 45px;
        line-height: 48px;
        max-width: 445px;
    }

    .embel-embel a{
        background-size: 20px;
        font-size: 10px;
        padding-right: 39.5px;
    }

    .con-book{
        width: auto;
    }

    .common-head h2{
        font-size: 32px;
        line-height: 40px;
    }

    .common-head p{
        font-size: 14px;
        line-height: 20px;
        margin-top: 20px;
    }

    .common-detail-button{
        font-size: 12px;
    }

    .common-head{
        margin-bottom: 60px;
    }

    .sos-content h3{
        font-size: 22px;
        line-height: 22px;
    }

    .sos-content p{
        font-size: 12px;
        line-height: 20px;
    }

    .sos-content figcaption{
        max-width: 309.5px;
        min-height: 155px;
    }

    .container-right{
        margin-left: 15px;
        padding-top: 60px;
        max-width: 100%;
    }

    .con-acco-slider{
        width: calc(100% - 420px);
    }

    .con-desc-slider{
        min-width: auto;
        min-width: 40vw;
        height: 443.61px;
        width: 420px;
        background-color: transparent;
    }

    .each-acco-slide{
        width: 470.53px;
        height: 443.61px;
    }

    .kotak{
        height: 362px;
        right: 35px;
    }

    .kotak .p,
    .kotak p{
        max-width: 285px;
    }

    #home-interesting,
    .each-interest{
        height: 536.8px;
    }

    .hi-content strong{
        font-size: 10px;
    }

    .hi-content .h3{
        font-size: 43px;
        line-height: 53px;
        margin-top: 13px;
    }

    .hi-content span{
        font-size: 13px;
    }

    .hi-content p{
        font-weight: 300;
        font-size: 14px;
        line-height: 20px;
        margin-top: 40px;
    }

    .ft-hic{
        margin-top: 85px;
    }

    footer .container{
        max-width: 100%;
        width: calc(100% - 70px);
    }

    .con-reviews-slider .slick-list, .con-reviews-slider::before{
        padding-left: 35px;
    }

    .each-reviews{
        width: 330.71px;
        margin-right: 60px;
    }

    .each-reviews h3{
        font-size: 20px;
        margin-top: 22px;
        margin-bottom: 10px;
    }

    .each-reviews p{
        font-size: 12px;
        line-height: 24px;
    }

    .each-reviews i{
        margin-bottom: 35px;
    }

    .con-reviews-slider::after{
        padding-left: 255px;
    }

    .con-reviews-slider{
        border-top: 1px solid #DDDDDD;
        padding-top: 45px;
    }

    .rev-menus{
        border: 0px;
        transform: translateY(-100%);
    }

    .rev-menus a{
        padding-bottom: 0px;
    }

    section,
    #home-instagram{
        padding: 53px 0;
    }

    #home-reviews .common-head{
        margin-bottom: 30px;
    }

    .greeting, .head-book{
        padding-left: calc((100vw - 785px) / 2);
    }

    .solo{
        line-height: 50px;
        height: 50px;
        font-size: 14px;
        width: 182px;
    }

    .weather_time span{
        line-height: 50px;
    }

    .f-p{
        max-width: 325px;
    }
    #dining-greeting p{
        max-width: 566px;
    }
}

@media (max-width: 768px){
    .container{
        max-width: 560px
    }
    .container h2{
        margin: 0 auto;
    }

    .coninfo-map{
        height: 90vh;
    }

    .nyuh-kuning .nk-capt ul{
        display: none;
    }
    .nyuh-kuning .nk-capt p{
        font-size: 10px;
        line-height: 18px;
    }

    .nyuh-kuning .nk-capt .agvht a{
        font-size: 11px;
    }
    .nyuh-kuning .nk-capt .agvht a:last-of-type{
        padding: 11px 31px;
        height: max-content;
    }
    .belongs-static-content .gdi{
        flex-wrap: wrap;
        row-gap: 35px;
    }

    .belongs-static-content .gdi p{
        margin-top: 0px;
    }

    .belongs-static-content .gdi .capt{
        margin-bottom: 20px;
    }
    #contact-information{
        display: block;
        background-color: #292929;
    }
    .each-con-info.down{
        position: static;
    }
    .map-info{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        max-width: 561px;
        margin: 0 auto;
        padding-top: 52px;
        min-width: auto;
    }
    .each-con-info{
        padding: 0;
        /* width: 45%; */
        max-width: 240px;
    }
    .each-con-info.down{
        width: 100%;
        padding: 0;
        display: flex;
        justify-content: space-between;
        max-width: none;
        border-top: 1px solid #707070;
        margin-top: 30px;
    }
    .send-inq-map{
        padding-right: 62px;
    }
    #home-accommodation{
        overflow: hidden;
    }
    .belongs-to-dt-acco .con-dining-reserve{
        max-width: 605.03px;
    }
    .dnr-form button{
        margin-left: auto;
        margin-right: auto;
    }
    #dining-reserve.belongs-to-dt-acco{
        padding: 0;
    }
    .amen{
        max-width: 190px;
    }
    .gdi.container{
        justify-content: space-between;
        row-gap: 35px;
    }
    .spec p{
        width: 100%;
    }
    .gdi p{
        max-width: 100%;
        margin-top: 20px;
    }

    .m2 p{
        margin-top: 0;
    }
    .gdi figure{
        margin-top: 50px;
    }

    #greeting-dining{
        padding: 85px 0;
    }
    .gdi .capt, .m1, .m2{
        width: 50%;
    }
    .dnr-form p{
        width: 100%;
        max-width: none;
    }
    .con-dining-reserve{
        margin:     110px auto 81px;
        padding-right: 57px;
        padding-left: 57px;
        max-width: 461px;
    }
    #list-accom{
        padding-bottom: 10px;
    }
    .nyuh-kuning figure{
        height: 250.94px;
    }
    .nyuh-kuning .nk-capt h2{
        font-size: 24px;
    }
    .monkey-forest .accom-container{
        --width: calc(100% - 20px);
        grid-template-columns: repeat(auto-fit, minmax(auto,calc((100% - 10px) / 2)));
        grid-gap: 10px;
    }
    .each-acco figcaption .ups, .dwnt{
        padding-left: 30px;
        padding-right: 30px;
    }
    .thumbnail-gallery h2{
        font-size: 30px;
    }
    #greeting-dining.belongs-spa p{
        max-width: 100%;
    }
    .thumbnail-gallery,
    .thumbnail-gallery:last-child{
        width: 50vw;
        height: 50vw;
    }
    #dining-greeting p{
        max-width: 498.5px;
        text-align: center;
    }
    #dining-greeting{
        padding: 87px 0;
    }
    .gdi p:first-child{
        margin-top: 15px;
    }
    .con-mn h3{
        font-size: 15px;
    }

    .the-list{
        display: block;
        height: auto !important;
        width: calc(100% - 53px);
        margin: 0 auto 26.5px;
    }

    .list-content figure:first-child{
        width: 75%;
        padding: 43px 0;
    }
    .f-p{
        max-width: none;
        min-height: auto;

    }
    .the-list .con-dining-slider, .the-list .list-content{
        width: 100%;
        height: auto;
    }
    .navcon{
        padding: 0 45px;
    }

    .greeting,
    .head-book{
        padding: 0 calc((100vw - 560px) / 2);
    }

    .embel-embel{
        position: relative;
        width: 100%;
    }

    .withlove{
        display: block;
    }

    .embel-embel{
        padding-bottom: 0px;
        margin-top: 28px;
    }

    .embel-embel a{
        position: absolute;
        right: 0;
        color: transparent;
        bottom: 28px;
        background-size: 30px;
        background-position: right bottom;
        height: 30px;
    }

    .hgreet h1,
    .hgreet .h1{
        font-size: 50px;
    }

    .head-book,
    .solo{
        height: 60px;
    }

    .weather_time span,
    .head-book{
        line-height: 60px;
    }

    .common-head h2{
        text-align: center;
    }

    .common-head{
        text-align: center;
    }

    .common-head p{
        max-width: 376.5px;
        text-align: center;
        margin: 20px auto 20px;
    }

    .common-head .common-detail-button{
        position: static;
    }

    .sos .k768{
        flex-direction: column-reverse;
    }

    .sos-content, .sos-img{
        width: 100%;
    }

    .sos-img{
        height: 158px;
    }

    .sos-content{
        height: auto;
        padding: 19.5px 0;
    }

    .sos-content p,
    .sos-content div a::after,
    .os-con h4::before{
        --display: none;
    }

    .sos-content div{
        border-top: 1px solid rgba(175, 175, 175, 0.31);
        padding-top: 27px;
    }

    .sos-content h3{
        min-height: 97px;
        padding-bottom: 13px;
    }

    .sos{
        width: 287px;
        width: 70vw;
        margin: 0 4.5px;
    }

    .sos-content div span{
        font-size: 16px;
    }

    .container-right{
        padding: 0;
        margin-left: 0px;
        margin-top: 36px;
    }

    .container-right h4::before,.container-right h3::before,
    .sum-con h4::before,.sum-con h3::before{
        display: none;
    }


    .os-con h4{
        padding-left: 0px;
    }

    .con-acco-slider{
        width: 100%;
    }

    .each-acco-slide{
        width: 546.53px;
        height: 351.18px;
    }

    .kotak{
        bottom: 20%;
        right: calc((100vw - 546.53px) /2);
        width: calc(546.53px - 90px);
        height: auto;
        padding: 0;
        transform: none;
        flex-wrap: wrap;
        color: white;
        padding: 0px 45px;
        --justify-content: space-between;
        --flex-direction: row;
        top: 0;
    }

    .each-acco-slide::before{
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 200px;
        opacity: 0;
        transition: opacity 0.3s;
        background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.53) 100%);
        background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.53) 100%);
        background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.53) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#87000000',GradientType=0 );
    }
    .each-acco-slide.slick-current::before{
        opacity: 1;
    }

    .ac-count{
        min-width: 45px;
    }

    .ac-count,
    .ac-title{
        --width: calc(100% - 45px);
        --margin: 19px 0;
        color: white;
    }
    
    .kotak nav,
    .kotak nav a,
    .kotak nav div span,
    .ft-hic a,
    .kotak .p,
    .kotak p{
        color: white;
    }

    .kotak a.ac-discover{
        padding: 13px 35px;
        border-color: white;
    }

    .kotak h3{
        font-size: 32px;
        min-height: auto;
    }

    .kotak nav {
        width: calc(100% - 45px);
        padding-left: 40px;
    }

    .con-desc-slider {
        height: auto;
        min-width: auto;
        background-color: transparent;
    }

    #home-interesting, .each-interest{
        height: 422px;
    }

    #home-interesting .hi-content{
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .hi-content p{
        margin: 0 auto;
        margin-top: 18px;
        max-height: 100px;
        overflow: hidden;
    }

    .ft-hic{
        justify-content: center;
        margin-top: 35px;
    }
    .ft-hic nav{
        width: 175px;
        display: flex;
        justify-content: space-between;
        position: relative;
    }

    .ft-hic a.r2{
        --position: absolute;
        margin-top: 10px;
        left: 0;
        right: 0;
    }

    #home-reviews .common-head{
        display: block;
        max-width: 95%;
        max-width: 480px;
    }

    .rev-menus{
        position: static;
        margin: 0px;
        margin-top: 30px;
        justify-content: space-between;
    }

    .rev-menus a{
        margin: 0px;
    }

    .con-reviews-slider{
        border: 0px;
        padding-top: 0px;
    }

    .each-reviews{
        margin: 0 5.5px;
        width: 325.71px;
        padding: 36px 65px;
        background-color: #F8F8F8;
        text-align: center;
    }

    .review-stars{
        margin-right: auto;
        margin-left: auto;
    }

    .con-reviews-slider::after, .con-reviews-slider::before{
        display: none;
    }

    .f-top,
    .f-mid{
        display: block !important;
    }

    .cfbox .foot-box,
    .cfbox .foot-box:nth-child(1){
        width: 100%;
        max-width: 100%;
    }
    .cfbox .foot-box:nth-child(2){
        max-width: 100%;
        border-top: 1px solid #707070;
        margin-top: 36px;
        padding-top: 36px;
    }
    .con-contact-reserv{
        flex-direction: row;
        min-height: auto;
    }
    .f-top{
        padding-bottom: 36px;
    }
    .f-mid{
        padding: 36px 0;
    }
    .f-mid .foot-box:nth-child(2) b{
        margin-bottom: 10px;
    }

    footer .container{
        max-width: 561px;
    }
}

@media (max-width: 500px){
    .container h2{
        font-size: 26px;
        line-height: 36px;
        opacity: 1;
    }

    .coninfo-map{
        height: 190px;
    }
    .belongs-to-dt-acco .con-dining-reserve{
        width: 86%;
        margin: 7vw 0;
        padding: 29px 0 38px 0
    }
    .each-con-info{
        margin: 0 auto;
        width: calc(100% - 70px);
        max-width: none;
        padding-bottom: 19px;
        margin-bottom: 19px;
        border-bottom: 1px solid #707070;
    }

    .each-con-info.down{
        border: 0px;
        width: calc(100% - 70px);
        margin: 0 auto;
    }
    .thesos{
        display: none;
    }
    .send-inq-map{
        margin-bottom: 19px;
        padding: 0 40px 0 0;
    }
    .send-inq-map.tback{
        padding: 30px 0;
        margin: 0;
        padding-left: 40px;
    }
    #contact-information{
        min-height: auto;
    }
    .send-inq-map::after{
        padding: calc(19px / 2);
    }
    .gdi .capt, .m1, .m2{
        width: 100%;
    }

    .xvo{
        width: 83%;
    }
    .belongs-to-dt-acco .dnr-form p:last-of-type{
        flex-wrap: wrap;
    }

    .belongs-to-dt-acco .dnr-form p:last-of-type input{
        width: 100%;
        margin-left: 0;
    }
    .spec, .amen, #greeting-dining.belongs-dt-acco .capt{
        width: 100%;
    }
    .amen{
        max-width: none;
    }
    .con-dining-reserve{
        margin: 20px auto 55px;
        padding: 28px 26px;
        width: calc(85% - 52px);
        max-width: none;
    }
    .ft-arw-up{
        font-size: 8px;
        font-weight: 300;
        right: 19px;
    }
    .cn-m-menu ul{
        margin-top: 30px;
    }
    .cn-m-menu li{
        margin-bottom: 17px;
    }
    .cn-m-menu ul:last-of-type{
        margin-top: 10px;
        padding-top: 20px;
        border-top: 1px solid var(--black-color);
    }
    .cn-m-menu{
        top: auto;
        transform: none;
        padding: 60px 0 0px;
        max-width: 280px;
    }
    #pop-menu{
        overflow-y: scroll;
    }
    .m-deslang .dwn{
        display: block;
    }
    .m-deslang{
        position: static;
        width: auto;
        justify-content: space-between;
        padding: 25px 0;
        max-width: 280px;
        margin: 10px auto 0;
        border-top: 1px solid var(--black-color);
    }
    .m-deslang .dwn:first-child span{
        border: 0px;
    }
    .monkey-forest .accom-container{
        width: calc(100% - 20px);
        grid-template-columns: repeat(auto-fit, minmax(auto, 100%));
        grid-gap: 10px;
    }
    .nyuh-kuning .accom-container{
        width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(auto,100%));
        grid-gap: 5px;
    }
    #list-accom.nyuh-kuning{
        padding-bottom: 5px;
    }
    .each-acco figcaption .ups, .dwnt{
        padding-left: 30px;
        padding-right: 30px;
    }
    .sh-n{
        display: none !important;
    }
    .slide-bg-hero{
        width: 273.73px;
        height: 181.38px;
        margin: 0 7px;
    }
    .h-adt-slider{
        min-height: auto;
    }
    .slide-bg-hero.slick-center{
        height: 197.29px;
    }

    .thumbnail-gallery{
        width: 100% !important;
        height: 100vw !important;
    }
    #greeting-dining{
        padding: 65px 0;
    }
    .con-mn ul li,
    .con-mn ul li:first-child{
        padding-left: 25px;
        padding-left: 25px;
    }
    #greeting-dining .container{
        /* max-width: 561px; */
        width: 85%;
    }
    #dining-greeting p{
        max-width: 310px;
    }
    .each-g{
        height: 219px;
    }
    .the-list{
        width: calc(100% - 21px);
        margin: 0 auto 10.5px;
    }

    .gdi p{
        font-size: 12px;
        min-height: auto;
    }

    .gdi .sum-con p:last-of-type{
        margin-bottom: 50px;
    }

    .list-content h2{
        font-size: 28px;
        margin: 0px 0 10px;
    }

    #greeting-dining.belongs-spa h2{
        font-size: 26px;
    }
    #greeting-dining.belongs-spa figure a{
        font-size: 10px;
    }

    #greeting-dining.belongs-spa p.ii{
        width: 50%;
        flex-direction: column;
        justify-content: center;
        line-height: normal;
    }

    .ii span:first-child{
        opacity: 0.61;
    }

    .libtn{
        font-size: 14px;
    }
    .f-p{
        padding: 0;
        max-height: 83px;
    }
    .f-p::after,
    .spa-pr{
        display: none;
    }
    .list-content nav{
        padding-top: 19.7px;
        border-top: 1px solid #E3E3E3;
    }

    .list-content figure:first-child{
        width: 80%;
        padding-bottom: 19.7px;
    }
    .navcon{
        padding-left: 18px;
        padding-right: 0;
        flex-wrap: wrap;
    }
    .greeting{
        padding: 0 39px;
        flex-wrap: wrap;
    }

    .list-content nav a{
        font-size: 10px;
        font-weight: 500;
        color: #000000;
        height: fit-content;
    }

    .list-content nav a.dn-reserve{
        padding: 12px 19px;
    }

    .head-book{
        padding-right: 0;
        bottom: 0;
    }

    .choose-destination,
    .choose-lang,
    .weather_time span.header-cloud{
        display: none;
    }
    .hero-logo{
        height: 50px;
    }

    .hgreet{
        padding: 0;
    }
    .hgreet h1,
    .hgreet .h1{
        font-size: 36px;
        line-height: 36px;
    }

    .hgreet p{
        --width: 80%;
        line-height: 16px;
        max-height: 160px;
        overflow: hidden;
    }

    .con-book,
    .solo{
        width: 100%;
    }

    .con-book form,
    .blur{
        display: none !important;
    }

    .solo{
        display: block;
    }

    .weather_time span{
        line-height: 13px;
        height: fit-content;
        height: -moz-fit-content;
        position: relative;
        top: 50%;
        min-width: 59px;
        transform: translateY(-50%);
    }
    .weather_time span i{
        display: block;
        margin-left: 0px;
    }

    #special-offers{
        padding: 53px 0;
    }
    .common-head h2{
        font-size: 26px;
    }

    .sos{
        width: 85vw;
    }
    .sos-content figcaption{
        width: 80%;
    }
    #little-story{
        padding: 0;
    }
    .os-con p{
        line-height: 22px;
    }

    .sage-mode .hero-logo{
        height: 42px;
    }
    .nav-head.sage-mode .navcon{
        padding-left: 18px;
    }
    .dwn.burgh span{
        margin-left: 0px;
        border-left: 0px;
        padding-left: 0px;
    }

    .each-acco-slide{
        width: 85vw;
        height: 256.33px;
    }
    #home-accommodation{
        position: relative;
    }
    .con-desc-slider{
        width: 85vw;
        height: auto;
        position: absolute;
        --top: 45%;
        --left: 50%;
        --transform: translateY(-50%) translateX(-50%);
        height: 256px;
    }
    .kotak{
        width: 100%;
        position: static;
        padding: 0;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .ac-title{
        margin: 0;
        margin-bottom: 10px;
        font-weight: 500;
    }
    
    .kotak nav,
    .kotak .p,
    .kotak p{
        display: none;
    }
    .kotak h3{
        margin-bottom: 50px;
    }

    .each-acco-slide::after{
        display: none;
    }
    .each-acco-slide::before{
        opacity: 1;
        height: 100%;
        background: none;
        background-color: rgba(0, 0, 0, 0.38);
    }
    .hi-content p{
        width: 80%;
        max-height: 100px;
        overflow: hidden;
    }
    .each-reviews{
        width: 100vw;
        padding: 36px 0;
    }

    .each-reviews p{
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    .o-con{
        position: absolute;
        /* visibility: hidden; */
        flex-direction: column;
        width: calc(100% - 82px);
        background-color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        transform: translateY(25px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
    }

    .o-con.actv{
        visibility: visible;
        opacity: 1;
        transform: translateY(0px);
    }

    .o-con a{
        width: 80%;
        margin: 0 auto;
        padding: 18px 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    #home-reviews .common-head{
        width: 100%;
        margin-bottom: 0px;
    }

    .rev-menus{
        width: calc(100% - 82px);
        padding: 21px 41px 1px;
        border-top: 1px solid rgba(0, 0, 0, 0.1);
        position: relative;
        z-index: 9;
    }

    .rev-menus a.jombs{
        font-weight: 600;
        color: var(--primary-color);
        opacity: 1;
        display: block;
        width: 100%;
        text-align: left;
        cursor: pointer;
        background-image: url(images/svg/arrow-tipis-gold.svg);
        background-repeat: no-repeat;
        background-position: right center;
        background-size: 20px;
    }

    .foot-box form div:last-child{
        display: block !important;
    }

    .con-contact-reserv{
        display: block;
    }
    .con-contact-reserv p{
        margin-bottom: 25px;
    }

    .f-mid li{
        width: 50%;
    }

    .cfbox .foot-box:nth-child(2){
        border: 0px;
        margin-top: 5px;
    }

    .foot-box form div:last-child a{
        display: block;
        padding: 12px 40px;
        width: min-content;
        margin-top: 18px;
    }

    .cfbox .foot-box.k123{
        border-top: 1px solid #707070;
        margin-top: 36px;
    }

    .foot-box form, .con-contact-reserv{
        max-height: none;
    }

    .hdn_treasure{
        width: 100px;
        padding: 0;
        justify-content: center;
        flex-direction: column;
        text-align: center;
        font-size: 11px;
        font-weight: 500;
        display: none;
    }

    .sage-mode .hdn_treasure{
        width: 100px;
        font-size: 11px;
        display: block;
    }

    .embel-embel{
        display: none !important;
    }

    .embel-embel.f-mob{
        display: inline-block !important;
        margin-top: 30px;
        border-top: 1px solid #C7C7C7;
        border-bottom: 0px;
        position: static;
        padding-top: 15px;
    }

    .f-mob a{
        right: auto;
        /* top: 35px; */
        color: white;
        position: static;
        padding: 10px 0;
        background-position: left center;
        background-size: 19px;
        padding-left: 30px;
    }
    #hero-header::after{
        background-color: rgba(0,0,0,0.39);
    }

    .con-book.im-going-solo{
        margin-left: 0px;
    }
    .saipop{
        padding: 0;
        color: transparent;
    }

    .m2{
        margin:    19px 0;
    }

    .m span, .m p{
        margin: 0;
        font-size: 14px;
        font-weight: 400;
    }

    .dnr-form button{
        width: 100%;
    }

    .cnt-m .m{
        width: 100%;
        margin-bottom: 50px;
    }
    .belongs-detail-activities .gdi figure{
        display: none;
    }

    .dwn.dwn-p ul{
        transform: translateY(-25px);
        top: auto;
        bottom: 40px;
    }
    .dwn.dwn-p ul li{
        padding: 15px 0;
        width: 80%;
        margin: 0 auto;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        list-style: none;
        text-align: center;
    }
    .dwn.dwn-p ul li:last-of-type{
        border: 0px;
    }
}

.sage-wa-btn,
.floating-wa-btn {
    display: none;
}

.sage-mode:not(.temphide) .sage-wa-btn,
.floating-wa-btn {
    display: block;
    position: fixed;
    z-index: 9999999;
    top: 92vh;
    right: 15px;
    width: 45px;
    transition: all 0.3s ease;
}

.sage-mode:not(.temphide) ~ .floating-wa-btn {
    display: none;
}

.floating-wa-btn {
    top: auto;
    bottom: 25px;
}