/* RESETS */

/* BOX SIZING */
*,
*::before,
*::after{
    box-sizing: border-box;
}


#root{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

body{
/*     background-color:#fbfbfb; */
}

/* #root{background-image: url(../images/wall.jpg);background-size: 20vw;backdrop-filter: none;background-attachment: fixed;} */

html{
    scroll-behavior: smooth;
    position: relative;
}

[type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}
table{width:100%;}
td{padding:5px;}
tr.total{border-top:solid 2px  #bbc081;border-bottom:none;font-weight:800;}
table,th,tr{
    border-bottom:solid 1px #e2e2e2;
    border-collapse: collapse;
    /*     width:100%;  */
}
.table-container{padding:20px;background-color:#f9f9f9;}
.table-container table{border:none; padding:20px;  }
.table-container tr>td:last-child{text-align:right;}
/* tr:first-child, tr:first-child td{border:none;} */

*[class*="br-"]:empty{margin-bottom:0;}

/* RESET MARGINS */
body,h1,h2,h3,h4,h5,h6,p,figure,picture{
    margin: 0;
    line-height: 1.5;
}
h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
    font-weight:100;
}
h3{
    font-family: var(--ff-secondary);
    font-size: var(--fs-400);
}
h4{
    font-family: var(--ff-secondary);
    font-size: var(--fs-450);
}
h5{
    font-family: var(--ff-secondary);
    font-size: var(--fs-300);
    /* color: white; */
}

.rate-title h4{
    margin-bottom:0;
}

.rate-title{
    margin-bottom:10px;
}

#booking-header{/* text-align:center; */flex:1;}

.user-msg:empty{padding:0;border:none;margin:0;}
.user-msg{border:solid 2px #ff1919;padding:10px;margin-top:10px;}
p a{font-family:var(--ff-p);}
p{
    font-family: var(--ff-p);
    line-height: 1.7;
    font-size:var(--fs-p);
}
p.pad-l{
    padding-left: 3rem;
}
div {
    font-family: var(--ff-p);
    font-size:var(--fs-p);
}
.check{
    display:flex;
    gap: 10px;
}
#categories{
    padding: 15px;
    border:solid 1px #cacaca;
    margin-bottom:30px;
    max-height: calc(100vh - 30px);
    position: sticky;
    top: 15px;
    overflow-y: scroll;
}
#categories h5{
    margin-bottom:10px;
}
.category{
    padding: 2px 0px 2px 15px;
    cursor:pointer;
    border-left:solid 2px #ffffff;
    transition: all 0.2s ease-out;
    user-select: none;
}
.category:hover{
    /* background-color:#0000ff08; */
    border-left:solid 2px blue;
    
}
.category.selected{
    color:blue!important;
    border-left:solid 2px blue;
    
}

#categories::-webkit-scrollbar-thumb {
    background: #ffffffc4;
}
#categories::-webkit-scrollbar-thumb {
    background: #f1f1f1;
    /* border: solid 1px #fff; */
    border-radius: 60px;
}
#categories::-webkit-scrollbar-track {
    background: #ffffff26;
}

/* /* width */
#categories::-webkit-scrollbar {
  width: 7px;
    
}


#escape.active{position:fixed;left:0;top:0;width:100vw;height:100vh;background-color:#48466f8a;}
span{font-family: var(--ff-p);font-size:var(--fs-p);}
label{font-family:var(--ff-p);font-size:var(--fs-250);font-weight:600;}
body{
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    /* position: fixed; */
    /* top: var(--bg-y-offset); */
}

img,picture{
    max-width: 100%;
    /* height: max-content; */
    height: auto;
}

.main-logo{
    height: 100%;
    width: auto;
    }
.hero-container{min-width:40vw;position:relative;width: 40vw;}
.hero-shot{
    object-fit:cover;
    height:100vh;
    position:sticky;
    top:0;
}

.single-extra{
    /* overflow-y:scroll; */
    /* padding:30px;  */
    /* background-color:#ffffff; */
    /* border-left:solid 1px var(--clr-dark-yellow); */
}

#extra-form-container {
    padding: 20px;
    border: solid 1px var(--clr-main-dark );
    border-radius: var(
    --border-radius);
    background-color: white;
    filter: drop-shadow(0px 10px 5px rgb(0 0 0 / 11%));
    position: sticky;
    top: 5vh;
}

#extra-form-container .btn-book{
    width:100%;
}

#extra-form-container #value{
    font-size: var(--fs-500);
    font-family: var(--ff-secondary);
}

video.hero-shot{
    width:100%;
}

/* forms */
input,button,textarea,select{font-family: inherit;}

/* Disable animatinos for people who chose to turn them off */




/* ------------------------------ */
a{
    font-family: var(--ff-secondary);
}
ul{
    font-family: var(--ff-p);
    list-style: none;
    padding-left: 1rem;
    font-size:var(--fs-p);
}

footer ul li::before{content:none;}
.sub-title-options li::before{content:none;}
ul li::before{
    color: azure;
    content: "⬖";
    color: var(--clr-dark-yellow); /* Change the color */
    font-weight: bold; /* If you want it to be bold */
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1em; /* Also needed for space (tweak if needed) */
    margin-left: -1em; /* Also needed for space (tweak if needed) */
    padding-right: 1.5em;
}
nav ul li{list-style: none!important;height:max-content;text-decoration: none;}
nav ul li::before{content: ''!important;}


.header .header-wrapper .sliding-menu-content::-webkit-scrollbar-thumb {
    background: #ffffffc4;
}
.header .header-wrapper .sliding-menu-content::-webkit-scrollbar-thumb {
    background: var(--clr-pink-accent);
    /* border: solid 1px #fff; */
    /* border-radius: 60px; */
}
.header .header-wrapper .sliding-menu-content::-webkit-scrollbar-track {
    background: #ffffff26;
}

/* /* width */
.header .header-wrapper .sliding-menu-content::-webkit-scrollbar {
  width: 12px;
}

/* Track */
*::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
/* *::-webkit-scrollbar-thumb {
} */

/* Handle on hover */
*::-webkit-scrollbar-thumb:hover {
  background: #555;
} */


main{
    min-height: 100vh;
}
.taly section{
    min-height: 60vh;
    position: relative;
}

.tb{
    
padding: 6rem 0;
}
/* RESETS */

/* ------------------- */
/* Text */
/* ------------------- */
.text-white{color:white;}
.text-center{text-align:center;}


/* ---------------- */
/* Utility classes  */
/* ---------------- */

.relative{position:relative;}

section{padding:20px 0;border-bottom:solid 1px var(--clr-dark-yellow);}
.res-details section .flex-resp-wrap{gap:30px!important;}
section:last-of-type{border-bottom:none;}
footer{
/*     margin-top:10vh; */
    min-height: 10vh;
    --pad:5vh;
    padding-top:var(--pad)!important;
    padding-bottom:var(--pad)!important;
    background-color:#fff;
    border-top:solid 1px #bbc386
    ;
    
}
footer .symbol{
    --size:50px;
    width:var(--size);
    height:var(--size);
}
footer p{
    font-size: var(--fs-100);
}
::-webkit-calendar-picker-indicator{
    width:10px;
    flex:0.3;
    padding:0;
}
footer .main-logo{
    margin-bottom: 40px;
    padding: 0;
    max-width: 200px;
}
footer li{
    color:white;
    font-family: var(--ff-p);
    font-weight: 100;
    font-size: var(--fs-200);
    /* display: flex; */
    /* justify-content: space-between; */
}

footer a{
/*     color: var(--clr-b-yellow); */
}
footer ul{
    list-style: none;
    padding: 0;
}
footer .row div{
    position: relative;
}
/* LAYOUTS */

.layout-60-40{}
.layout-60-40 > div:first-child{width:70%;}
.layout-60-40 > div:last-child{width:30%;}

.layout-40-60{}
.layout-40-60 > div:first-child{width:30%;}
.layout-40-60 > div:last-child{width:70%;}


/* LAYOUTS */

.h-100{min-height:100vh;}
.h-20{min-height:20vh;}
.center-xy{display: flex;flex-direction: column;align-items: center;width: 100%;justify-content: center;height: 100vh;}
.center-y{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.bottom-left{
        display: flex;
        flex-direction: column;
        width: fit-content;
        justify-content: end;
        height: 100vh;
        padding: var(--container-padding);
}
.center-x{
    width: 100%;
    text-align: center;
}
.center-img{
    margin: auto;
    display: block;
}
#creds .row{
    justify-content: center;
    gap: 4vw;
}
#creds{
    padding: 20px 0;
    border-bottom: solid 2px var(--clr-dark-yellow);
    background-color: #fff;
}
#creds img{
    width: 125px;
    image-rendering: auto;
    /* height: 125px; */
    height: auto;
}
button a{
    width: 100%;
    display: block;
    /* text-decoration: none; */
    padding: var(--button-pad);
    color: inherit;
transition: all 0.5s;}
button{
    height: fit-content;
    padding: 10px clamp(5px,1px,20px);
    font-family: var(--ff-secondary);
    border: solid 2px;
    font-size: var(--fs-400);
    background: none;
    /* padding: 0; */
    position: relative;
    /* border: none!important; */
    }

button:hover svg rect{
    stroke: var(--clr-b-yellow);
      /* stroke-width: 5; */
      stroke-dasharray: 322, 0;
      stroke-dashoffset: 0;
stroke-aligment: initial;/* paint-order: stroke; *//* outline-style: solid; */
  /* outline-width: 10px; */
  /* outline-offset: -10px; */}

button svg rect{
        stroke-dasharray: 210, 492;
    stroke-dashoffset: 227;
    /* stroke-dasharray: 0, 0; */
      /* stroke-dashoffset: 0; */width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 2px;
    stroke: rgb(255 255 255 / 22%);
    transition: all 0.5s ease-out;
}
button svg{
    width: 100%;
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
}

button:hover a{
    
}

button::after{
/* content: url('data:image/svg+xml; utf8, <svg> <rect x="0" y="0" fill="none" width="130" height="55" /> </svg>'); */
    /* content: url("data:image/svg+xml; %3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0' y='0' fill='none' width='130' height='85' style='stroke: %23ff0000;stroke-width: 5;stroke-dasharray: 110, 312;stroke-dashoffset: 227;'%3E%3C/rect%3E%3C/svg%3E"); */
  /* display: block; */
  /* content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='50' r='40' stroke='black' stroke-width='2' fill='red'/%3E%3Cpolyline points='20,20 40,25 60,40 80,120 120,140 200,180' style='fill:none;stroke:black;stroke-width:3'/%3E%3C/svg%3E "); *//* width: 100%; */
  /* height: 50px; */
  /* margin: 10px 5px 0 10px; */
/* background: aqua; *//* position: absolute; *//* top: 0; *//* left: 0; *//* z-index: 2; */}

#synxis-trigger{
    padding: var(--button-pad);
}
.btn-questions{
    color: #fff;
    border: none;
    text-decoration: underline;
    display: flex;
    align-items: center;
    position: relative;
    padding: var(--button-pad);
}
.main-book{
    font-family: var(--ff-secondary);
    background: none;
    /* font-size: var(--fs-400); */
    color: white;
    border-color: var(--clr-b-yellow);
    /* border-radius: var(--border-radius); */
    padding: var(--button-pad);
}
.main-book.trigger-active{
    background-color: var(--clr-dark-yellow);
    color: white!important;
}

.no-pad{padding: 0!important;}
.pad{padding:clamp(10px,3vw,20px);}

.flex{
    display: flex;
    gap: var(--gap,1rem)!important;
    flex-direction: row;
}
[type="checkbox"]{max-width:20px!important;margin:0;}
textarea{width:100%;min-height:100px;margin-bottom:0px!important;}
.flex-y-center{align-items:center;}
.no-gap{gap:0!important;}
.flex-even >*{
    flex-basis: 100%;
    min-width:unset;
}

#checkText{
    display:inline-block;
}

.bg2 {
    background-image: url(../images/palm.webp);
    background-repeat: no-repeat;
    background-position-y: calc( var(--bg-y-offset) * -0.1 );
}

.pattern-01 {
    background-image: url(../images/patterned_wooden_wall.webp);
    background-size: 20vw;
    background-position-y: calc( var(--bg-y-offset) * 0.3 );
}
#products-grid{
    width:100%;
    display:grid;
    gap: var(--gap);
    grid-template-columns: repeat(4, 25%);
}

.product{
    padding: 15px;
    border: solid 1px;
    border-color: #cacaca;
    background-color: white;
    filter: drop-shadow(0px 10px 5px rgb(0 0 0 / 11%));
    transition: var(--transition);
    display: flex;
    justify-content: space-evenly;
    gap: var(--gap);
    height:50vh;
}

.flex-left{justify-content: start!important;}
.flex-walls{justify-content: space-between;}
#room-page .modify-buttons{flex-direction:column;}
.flex-x-center{justify-content:center!important;}
.inline-links li{padding:0 5px;font-size: var(--fs-400);}
.inline-links li::after{content:" | ";color:#232323;}
.inline-links li:last-child::after{content:"";}
.vertical-center{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#login-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: center;
    gap: 30px;
    font-family: sans-serif;
}
#login-form img{
    width: clamp(70px,20vw,80px);
}
#login-form form input{
    height: 40px;
    font-family: sans-serif;
}
#login-form form{
    flex-direction: column;
    width: clamp(270px,50vw,500px);
    gap: 20px;
}
ul.inline-links{
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
}
.wrap{flex-wrap: wrap;}
.grid{
    display: grid;
    gap:var(--gap,1rem);
}
.flex--center{}
.text--center{
    text-align: center;
}
.title-center{
    width: 100%;
    text-align: center;
}
nav .container > *{
    /* height: 60px; */
}
nav a{/* display:block; *//* height: inherit; */text-decoration: none;color: #000;}
#cta{
    display: flex;
    align-items: center;
gap: 10px;}
.menu-button{
    width: 25px;
}
.exit:hover{
    background-color: var(--clr-main-trans);
    color: white;
    border-radius: 50px;
}
.exit{
    position:absolute;
    z-index: 10;
    cursor: pointer;
    transition: all 0.5s;
    padding: 5px 9px;
}

.loader{
    width: 30px;
    opacity: 0;
    transition: all 0.2s;
    position: absolute;
    left: -10px;
}
.loading{opacity: 1;}

.container {
    padding: 0px var(--container-padding);
    width: 100%;
    height: max-content;
}
.container-full{
    padding: 0px var(--container-padding);
}

/* #home.modify-mode #booking-widget,
#home.modify-mode #filters,
#home.modify-mode #rooms-container{
    opacity:0.5;
    pointer-events:none;
} */

.flex-center{justify-content: center;height: 100vh;/* max-height: 600px; *//* min-height: 500px; */height: clamp(500px,100vh,600px);}
.cards-container #card{height: auto;}
.row{
    /* padding: 3rem 0; */
    /* max-width: 80rem; */
    /* margin:0 auto; */
    justify-content: space-between;
    display: flex;
    gap: var(--gap);
}
.row>*{
    flex: 1;
}

*::-webkit-scrollbar {
    /* width: 6px; */
    /* height: 10px; */
    /* margin-right: 5px; */
}

*::-webkit-scrollbar-thumb {
    background: #8f8f8f;
    /* border: solid 1px #fff; */
/*     border-radius: 60px; */
}
*::-webkit-scrollbar-track {
    background: #ededed;
    /* border: solid 1px #fff; */
    margin: 0 10px;
}

.main-hero-container {
    /* background-color: aliceblue; */
    height: 70vh;
    position: relative;
    overflow: hidden;
}
.main-hero-container img{
    object-fit:cover;
    width: 100%;
    position: absolute;
    top: -21%;
}

nav ul{
    margin: 0;
    margin-top: 25px;
}

#filters{
    color: #fff;
}

.pad-y-20{padding: 20vh 0px;}
.pad-y-10{padding: 10vh 0px;}
.pad-y-5{padding: 5vh 0px;}
.pad-y-2{padding: 2vh 0px;}

.pad-y-20px{padding: 20px 0px;}
.pad-y-10px{padding: 10px 0px;}
.pad-y-5px{padding: 5px 0px;}
.pad-y-2px{padding: 2px 0px;}

.margin-y-20px{margin: 20px 0px;}
.margin-y-10px{margin: 10px 0px;}
.margin-y-5px{margin: 5px 0px;}
.margin-y-2px{margin: 2px 0px;}

.pad-x-20{padding: 0 20vh;}
.pad-x-10{padding: 0 10vh;}
.pad-x-5{padding: 0 5vh;}
.pad-x-2{padding: 0 2vh ;}

.pad-20{padding: 20vh;}
.pad-10{padding: 10vh;}
.pad-5{padding: 5vh;}
.pad-2{padding: 2vh;}

.br-10{margin-bottom:10px;}
.br-15{margin-bottom:15px;}
.br-20{margin-bottom:20px;}
.br-10vh{margin-bottom:10vh;}

.gap-10{gap:10px;}
.gap-15{gap:15px;}
.gap-20{gap:20px;}
.gap-30{gap:30px;}
.gap-10vh{gap:10vh;}


.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow:hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.col-md-1,
.col-1 {
    -ms-flex: 0 0 calc(var(--col)*1);
    flex: 0 0 calc(var(--col)*1);
    max-width: calc(var(--col)*1);
}

.col-md-2,
.col-2 {
    -ms-flex: 0 0 calc(var(--col)*2);
    flex: 0 0 calc(var(--col)*2);
    max-width: calc(var(--col)*2);
}

.col-md-3,
.col-3 {
    -ms-flex: 0 0 calc(var(--col)*3);
    /* flex: 0 0 calc(var(--col)*3); */
    /* max-width: calc(var(--col)*3); */
}

.col-md-4,
.col-4 {
    -ms-flex: 0 0 calc(var(--col)*4);
    /* flex: 0 0 calc(var(--col)*4); */
    /* max-width: calc(var(--col)*4); */
}

.col-md-5,
.col-5 {
    -ms-flex: 0 0 calc(var(--col)*5);
    flex: 0 0 calc(var(--col)*5);
    max-width: calc(var(--col)*5);
}

.col-md-6,
.col-6 {
    -ms-flex: 0 0 calc(var(--col)*6);
    flex: 0 0 calc(var(--col)*6);
    max-width: calc(var(--col)*6);
}

.col-md-7,
.col-7 {
    -ms-flex: 0 0 calc(var(--col)*7);
    flex: 0 0 calc(var(--col)*7);
    max-width: calc(var(--col)*7);
}

.col-md-8,
.col-8 {
    -ms-flex: 0 0 calc(var(--col)*8);
    flex: 0 0 calc(var(--col)*8);
    max-width: calc(var(--col)*8);
}

.col-md-9,
.col-9 {
    -ms-flex: 0 0 calc(var(--col)*9);
    flex: 0 0 calc(var(--col)*9);
    max-width: calc(var(--col)*9);
}

.col-md-10,
.col-10 {
    -ms-flex: 0 0 calc(var(--col)*10);
    flex: 0 0 calc(var(--col)*10);
    max-width: calc(var(--col)*10);
}

.col-md-11,
.col-11 {
    -ms-flex: 0 0 calc(var(--col)*11);
    flex: 0 0 calc(var(--col)*11);
    max-width: calc(var(--col)*11);
}

.col-md-12,
.col-12 {
    -ms-flex: 0 0 calc(var(--col)*12);
    flex: 0 0 calc(var(--col)*12);
    /* max-width: calc(var(--col)*12); */
}


/* FAQS START */
.faq:last-child {
    border-bottom: none;
}
.faq {
    border-bottom: solid 1px #e8e8e8;
    animation-name: faq;
    animation-duration: 1s;
    animation-timing-function: cubic-bezier(0.03, 0.66, 0.58, 1);
    animation-fill-mode: forwards;
    /* padding: 20px 0; */
    opacity: 0;
}

h1{font-family: var(--ff-main);font-weight: 100;font-size: var(--fs-550);line-height: 1.1;}
.main-section h1{
    font-size: var(--fs-750);
    line-height: 1.1;
    filter: drop-shadow(0px 4px 4px rgb(0,0,0,0.2));
}
.main-section h2{
    font-size: var(--fs-500);
    line-height: 1.1;
    color: var(--clr-b-yellow);
}
h2{font-family: var(--ff-main);font-weight: 100;font-size: var(--fs-650);line-height: 1.5ch;margin-bottom: 1.5rem;}
h3{
    font-weight: 100;
    font-family: var(--ff-main);
    font-size: var(--fs-500);
    color: black;
    line-height: 1.1;
    /* margin-bottom: 1.5rem; */
}
h3.pre-title{
    font-family: var(--ff-secondary);
    text-transform: uppercase;
    color: var(--clr-dark-yellow);
    font-size: var(--fs-400);
    margin-bottom: unset;
}
.blog-grid{display: grid;grid-template-columns: repeat(2, 1fr);gap: var(--gap);padding: 10vh;/* grid-template-rows: auto; */}
.post-preview a{text-decoration: none;color: #000;}
.post-preview .info{background-color: #fff;padding: 30px;height: 100%;}
.post-preview{/* min-height: 40vh; *//* height: 100%; *//* margin: 5vh 0; */border: solid 2px var(--clr-dark-yellow);filter: drop-shadow(3px 4px 5px rgb(0,0,0,0.2));display: flex;flex-direction: column;/* border:  solid; */}
.post-preview img{height: 250px;min-height: 250px;width: auto;object-fit: cover;}
.post-preview h2{font-size: var(--fs-500);line-height: 1.3;/* min-height: 4ch; */}
.post-preview > * {/* flex-basis: 100%; */}
.taly h1{
    font-size: var(--fs-600);
    line-height: 1.4;
}
.taly h2{
    font-size: var(--fs-500);
}

.taly h4 {
    font-family: 'Quattrocento Sans',
        sans-serif;
    font-family: 'Quattrocento Sans', sans-serif;
    /* font-size: clamp(1rem, 4vh, 1px)!important; */
    font-size: clamp(1rem, 1rem, 1.5rem);
    line-height: 28px;
    letter-spacing: 1.94px;
    text-transform: none;
    color: #475970;
}
.gform-body .gfield_label, .gform-body label, .gform-body select, .gform-body option {
    font-family: var(--ff-p);
    font-weight: 100!important;
}

.taly [data-status="1"] h4 {
    padding-left: 50px !important;
    transition: all 1s;
}

.faqs-container input {}

.faq-header:hover h4 {
    padding-left: 45px;
}

.faq h4 {
    /* padding-left: 32px; */
    line-height: inherit;
    /* transition: all 1s; */
    transition: all 0.2s;
    width: 100%;
    padding: 10px 0;
    padding-left: 32px;
    font-size: var(--fs-300);
    font-family: var(--ff-secondary);
}

.faq h4:before {
    content: '';
    background-color: var(--clr-dark-yellow);
    width: 20px;
    height: 2px;
    display: block;
    position: absolute;
    top: calc(50% - 1px);
    left: 0px;
}


.faqs-container a{
    text-decoration:underline;
    color: var(--clr-dark-yellow);
}
.faqs-container h3{
    /* font-size: var(--fs-600); */
    font-size: var(--fs-500);
    font-family: var(--ff-main);
    margin: 0;
}
.faqs-container {
    /* width: 80vh; */
    /* margin: 10vh auto; */
    position: relative;
    height: inherit;
}

.faq-content {
    height: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
}

.openFAQ {
    height: -webkit-fill-available !important;
    padding: 15px 0;
    -webkit-transition: all 100ms ease-in-out;
    -moz-transition: all 100ms ease-in-out;
    -ms-transition: all 100ms ease-in-out;
    -o-transition: all 100ms ease-in-out;
    opacity: 1;
    transition: all 150ms ease-in-out;
}

.faq-header {
    display: flex;
    flex-flow: row-reverse;
    justify-content: flex-end;
    align-items: baseline;
    cursor: pointer;
    width: 100%;
    border-radius: 5px;
    position: relative;
}

.taly p {
    font-family: 'Quattrocento Sans',
        sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 28px;
    letter-spacing: 1.94px;
    text-transform: none;
    color: #5c5c5c;
}

@keyframes faq {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }

    100% {
        transform: translateX(0px);
        opacity: 1;
    }
}

.faqs-container input[type="text"] {
    margin: 20px 0;
    width: 90%;
    border: none !important;
    border: solid 1px #ffffff;
    border-bottom: solid 2px #a0b6d1 !important;
    font-size: var(--fs-300);
    transition: all 0.5s;
    font-family: 'Quattrocento Sans', sans-serif;
}

.faqs-container input[type="text"]:focus-visible {
    outline: none;
    border: solid 1px #cacaca;
    border-bottom: solid 2px var(--clr-dark-yellow) !important;
}

.sticky{
    position: sticky;
    top: var(--sticky,20vh);
}

.sticky-container{
    /* height:100vh; */
    position:relative;
}

/* FAQS END */

.locked{
    overflow:hidden;
}


/* --------------------------------- */
/* MEAL MENUS */
/* --------------------------------- */

.menu-container h2 {
    /* border-bottom: solid 2px var(--clr-pink-accent); */
    width: fit-content;
    font-size: var(--fs-500);
}
.menu-container {
    justify-content: space-between;
}
.menu-container .menu-item {
    border-bottom: solid 1px var(--clr-dark-yellow);
    padding: 20px 0;
    justify-content: space-between;
}
.menu-item label{
    font-family: var(--ff-p);
    font-weight: bold;
}
.menu-item ol li{}
.menu-item .price {
    flex-basis: max-content;
    display: flex;
    align-items: center;
    font-family: var(--ff-secondary);
}
.menu-item ol{
    margin: 0;
    font-family: var(--ff-p);
}
.header-slider{
    padding: 0;
}
.lt-form input {color: rgb(15, 15, 15) !important;}
.lt-form input[type="submit"] {
    color: #fff !important;
    background-color: var(--clr-dark-yellow);
    width: 100%;
    padding: 10px 0;
    font-family: var(--ff-secondary);
    font-size: var(--fs-400);
    border: solid 2px #ffffff6e;
    border-radius: var(--border-radius);
}
.sign-up form input {color: rgb(0, 0, 0) !important;}
.lt-form{padding: 2rem 0;}
h3.key {
    font-size: clamp(20px, 1.0rem, 5rem);
    line-height: normal;
}

nav{
    /* border-bottom:solid 1px #cacaca; */
    padding: 10px var(--container-padding);
    background-color: #fff;
}
header {
    position: fixed;
    z-index: 20;
    width: 100%;
}
#main-menu {
    width: 100%;
    justify-content: space-between;
    background-color: var(--clr-main-trans);
    /* background-color: #ffffff; */
    backdrop-filter: blur(7px);
}

#main-menu ul li a{
    font-family:var(--ff-p);
    color:#fff;
    font-size: var(--fs-300);
    height: 100%;
    display: flex;
    align-items: center;
}

#main-menu ul li:hover::after {
    left: 0;
}
#main-menu ul li::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: -100%;
    right: 100%;
    bottom: 2px;
    background: var(--underline);
    height: 2px;
    width: 100%;
    transition: all .3s;
    transition-timing-function: ease-out;
}

#main-menu ul li:hover::before {
    right: 0;
}
#main-menu ul li::before {
    content: "";
    position: absolute;
    z-index: -1;
    /* left: 100%; */
    right: -100%;
    bottom: 0px;
    background: var(--underline);
    height: 2px;
    width: 100%;
    transition: all .3s;
    transition-timing-function: ease-out;
}

#main-menu ul li{position: relative;height: inherit;display: flex;align-items: center;/* width: -webkit-fill-available; */overflow: hidden;padding: 0 1vw;min-width: max-content;transition: all 0.2s;}
#main-menu .sub-menu{
    display: none;
    position:absolute;
    top: 100%;
    height: 100%;
    width: 100%;
}
#main-menu ul li:hover ul{/* display: flex; */background-color: #ffffff;}
#main-menu ul li:hover ul a{
    color: black;
}
#main-menu ul{
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    /* width: 50%; */
    justify-content: center;
    height: 100%;
    --underline: var(--clr-b-yellow);
    gap: 0;
}
#main-menu ul a{
    text-decoration: none;
}

#main-menu .sub-menu {
    position: fixed;
    max-height: 0;
    height: 0;
    left: 0;
    overflow: hidden;
    transition: all 0.5s!important;
    z-index: 999999;
    gap: 40px;
    width: 100vw;
    display: flex;
    padding: 0px 0px;
    transition: all 0.2s;
}

#main-menu ul li:hover .sub-menu {
    max-height: 60px;
    height: 60px;
    padding: 10px 25px;
    --underline: var(--clr-main-dark);
    border-bottom: solid 1px #ececec;
}

.vid-container .video-placeholder{
    width: 100%;
}
.vid-container{
    position: fixed;
    z-index: -1021;
    height: 100%;
    background-color: var(--clr-main-trans);
}
.unit-page .page-cover{}
.page-cover{
    position: relative;
    height: 70vh;
    overflow: hidden;
    padding-top: 80px;
}
.page-cover .info h1{
    color: white;
    font-size: var(--fs-800);
    filter: drop-shadow(0px 4px 4px rgb(0,0,0,0.2));
}
.page-cover .info h3{
    color: var(--clr-b-yellow);
}
.page-cover .info{
    left: var(--container-padding);
    bottom: var(--container-padding);
}
.page-cover>*{
    position: absolute;
}
.page-cover img.cover{
    position: absolute;
    z-index: -1;
}
.cover{
    /* position: absolute; */
    /* top: 0; */
    height: 100vh;
    max-height: 100vh;
    width: 100%;
    object-fit: cover;
    object-position: left;
}
.vid-container video{
    width: auto;
    min-width: 100vw;
    height: 100%;
    transform: scale(1.5);
}
.ly-03 #booking-widget button{
    width: 100%;
}
.btn-main{
    background-color: var(--clr-main-dark);
    border: solid 2px #ffffff21;
    color: white;
/*     width:200px; */
    width:100%;
    max-width:500px;
    /* border-radius: var(--border-radius); */
    /* padding: var(--button-pad); */
}
.btn-main:hover{background-color:#687187;}
button[disabled='true']{background-color: #aeaeae;}
.btn-async{padding: var(--button-pad);}
.btn-sec{
    background-color: #ffffff;
    color: #4e576e;
    /* border-radius: var(--border-radius); */
}
.btn-ter{
    background-color: #fafafa;
    color: #4e576e;
    border-radius: var(--border-radius);
}
header #booking-widget{
    background-color: #fff;
}
#booking-widget{
    gap:10px;
    /* border-bottom: solid 1px #d3c392; */
    padding: var(--gap,1rem) 0px;
}
#booking-widget input[type="text"]{
    margin:0;
    border: solid 1px #cacaca;
}
#booking-widget .btn-main{
    width:clamp(10px,100%,200px);
}
#book-now .qty{
    color: black;
}
#booking-widget form{
    gap: 30px;
    align-items: center;
    width: 100%;
    justify-content: space-between;
}
#booking-widget label{font-family: var(--ff-p);}
/* #booking-widget .spec::after{content: "";width: 1px;background-color: var(--clr-dark-yellow);height: 77%;position: absolute;left: 0px;top: 50%;transform: translateY(-50%);} */
footer .row div::after{content: "";width: 1px;background-color: var(--clr-dark-yellow);height: 100%;position: absolute;right: 10%;top: 50%;transform: translateY(-50%);}
#booking-widget .spec:last-child::after{}
footer .row div:last-of-type::after{
    display: none;
}
#booking-widget .spec:first-of-type::after{
    display: none;
}
#booking-widget .spec{
    display: flex;
    flex-direction: column;
    /* border-right: solid; */
    position: relative;
    /* max-width: 22ch; */
    /* font-family: var(--ff-p); */
    /* font-size: var(--fs-200); */
    padding: 10px;
/*     min-width:30%; */
    border: solid 1px #cacaca;
    background-color:#fff;
}

#booking-widget .value{
    font-family: var(--ff-secondary);
    font-size: var(--fs-400);
    border: none;
    background: none;
    outline: none;
}
#booking-widget input[type="number"]{
    width: 2ch;
}
/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
.qty:hover{
    background-color: #d7d7d752;
}
.sticky #room-booking .qty{
    color: black;
}
.sticky #room-booking .spec>div{width: 100%;}
.qty{
    font-size: 20px;
    font-weight: 100;
    line-height: 1;
    /* border: solid 1px; */
    padding: 0px 8px;
    border-radius: 3px;
    cursor: pointer;
    /* color: white; */
    transition: all 0.2s;
    user-select: none;
    border: solid 1px #a1a1a142;
    margin-right: 8px;
    line-height:0;
}
.bg-pattern{
    background-repeat: initial;
} 
/* .pattern-01{
    background-image: url('/wp-content/themes/las_terrazas/dist/images/patterned_wooden_wall.webp');
    background-size: 30vw;
    background-position-y: calc( var(--bg-y-offset) * 0.3 );
}

.pattern-03{
    background-image: url('/wp-content/themes/las_terrazas/dist/images/wooden_fence_47_85_ao.webp');
    background-size: 20vw;
}

.pattern-02{
    background-image: url('/wp-content/themes/las_terrazas/dist/images/marble.webp');
    background-size: 20vw;
    background-position-y: calc( var(--bg-y-offset) * 0.35 );
} */

.extra-content {
    display: flex;
    flex-direction: column;
    /* justify-content: space-around; */
    gap: 20px;
}

.extra-content h4{
    cursor:pointer;
}

/* ----------------------- */
/*  ACCOMODATION CARDS     */
/* ----------------------- */


.accom-card{
            border: solid 2px;
            border-color:#cacaca;
            background-color: white;
            width: clamp(430px,24vw,40vw);
            filter: drop-shadow(3px 4px 5px rgb(0,0,0,0.2));
            border-radius: var(--border-radius);
            /* transform: scale(0.96); */
            min-height: 0;
            height: clamp(500px,100%,600px);
            height: 100%;transition: var(--transition);
display: flex;flex-direction: column;justify-content: space-between;}
.card-container[active="1"]{
    /* padding: 0; */
}
.card-container[active="1"] .accom-card{
    border-color:var(--clr-dark-yellow);
    /* transform: scale(1); */
    /* min-height: 100%; */
    /* transition-delay: var(--slide-speed-delay); */
    /* filter: drop-shadow(2px 2px 2px rgb(0,0,0,0.2)); */
}

.accom-card h4, .dishes h4{
    font-size: var(--fs-500);
    position:relative;
    /* margin-bottom: 10px; */
    text-align: center;
    line-height: 1.2;
    font-family: var(--ff-main);
}
.accom-card h4::after, .dishes h4::after{content:'';width: 90px;position: absolute;height: 2px;background-color: var(--clr-dark-yellow);bottom: -10px;left: 50%;transform: translateX(-50%);}
#room #mini-slide-show img:first-of-type{
    z-index: 10;
animation: mini-slide 0.5s;animation-fill-mode: forwards;}
@keyframes mini-slide{
    0%{opacity:0;transform:translate(-10px,0);}
    100%{opacity:1;transform:translate(0px,0);}
}
#room.open #mini-slide-show img{
    width: 200%;
    height: 100%;
    animation-name: slide-image;
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-play-state: running;
    animation-name: slide-image;
}

@keyframes slide-image{
    0%{object-position: left;}
    100%{object-position: right;}
}

#room #mini-slide-show img{
    width: 100%;
    position: absolute;
    height: 100%;
    object-fit: cover;
    object-position: left;
    transition: var(--transition);
    left: 0px;
    cursor:pointer;
}
#mini-slide-show{
    /* height: 100%; */
    min-height: 400px;
    gap: 0;
    position: relative;
    overflow: hidden;
    /* max-height: 170px; */
    border-radius: var(--border-radius);
    transition: var(--transition);
    background-image: url(../images/load.gif);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;
    }
#room-page #room .single-extra-card #mini-slide-show{}
#room-page #room #mini-slide-show{
    /* height: 100%; */
    min-height:55vh;
    gap: 0;
    position: relative;
    overflow: hidden;
    /* max-height: 170px; */
    border-radius: var(--border-radius);
    transition: var(--transition);
    }
#room-page #room .info{padding-top:20px;}
#mini-slide-show .slider-nav > *{background-color: var(--clr-main-trans);border-radius: var(--border-radius);transform: none;color: #fff;}
#mini-slide-show .slider-nav{
    bottom: 45%;
    width: 100%;
    justify-content: space-between;
    color: white;
    left: 0;
    z-index: 9999;
    /* position: fixed; */
/* mix-blend-mode: exclusion; */}
.slider-nav{
    position: absolute;
    display: flex;
    gap: 30px;
    font-size: var(--fs-500);
    z-index: 1;
    color: var(--clr-dark-yellow);
    bottom: -7%;
    left: 20%;
    cursor: pointer;
    align-items: center;
    z-index: 2;
/* pointer-events: none; */}
.slider-left .slider-nav{
    bottom: 0;
    left: unset;
    right: 40%;
}
.slider-nav .left, .slider-nav .right{
    padding: 5px 10px;
    line-height: 1;
    user-select: none;
}
.dark .slider-nav{
    color: var(--clr-b-yellow);
}
.dark .slider-nav .count{
    color: white;
}
.slider-nav .count{
    color: #000;
    font-family: var(--ff-secondary);
    font-size: var(--fs-400);
}
ul.benefits{
    margin: 0;
    /* padding: 0; */
}
#grid{display: grid;grid-template-columns: repeat(auto-fit, minmax(350px,1fr));gap: var(--gap);grid-auto-rows: 70vh;}
#grid .accom-card{width: 100%;transform: translate(0px, 0px);}

.card-container{
    /* height: 100%; */
    width: 100%;
    animation-delay: 5000ms;
    padding: var(--slide-pad);
    transition: all 0.5s;
/* max-height: 980px; */}
.accom-card #info, .dishes #info{
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2vh;
    /* height: 100%; */
    /* min-height: 45vh; */
}
.card-container .accom-card button{
    width: 100%;
}
.card-container #info>*{
    width: 100%;
}
.card-container #info>a{
   text-align: center;
}
#room .ammenities{
    column-gap: 15px;
    row-gap:10px;
    display: flex;
    padding:10px 0;
    flex-wrap: wrap;
/*     padding: 10px 10px 0 10px; */
}
.room-ammenitie div{
    font-size: small;
}
.room-ammenitie{
    gap: 5%;
    font-family: var(--ff-p);
    align-items: center;
    --icon-w:29px;
}
#single-amenity{position:relative;}
.amenity-description{pointer-events:none;opacity:0;transition:all 0.2s;position:absolute;top:0;z-index:20;background-color:#a6a378;width:max-content;border-radius:5px;color:#fff;padding:0 10px;transform: translate(-25%, 0px);}
.room-ammenitie:hover .amenity-description{top:-25px;opacity:1;}
.room-ammenitie img{
    width: auto;
    height: var(--icon-w);
    pointer-events:none;
}
#more-details{
    font-size: var(--fs-400);
}
[id*="slider"]{
    position: relative;
    /* height: calc( var(--slider-height) * 1); */
    height: clamp(550px,var(--slider-height),800px);
min-height: 500px;}
.slider-left .slider-container{
    /* flex-direction: row-reverse; */
}
.slider-container{
    height: inherit;
    z-index: 2;
    transition: transform var(--slide-speed) cubic-bezier(0.74, 0.01, 0.58, 1);
    justify-content: space-evenly;
    gap: 0;
}
.slider{
    position: absolute;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
}
.slider-left .slider{
    right: 0;
}
.slider-right{
    left: 0;
}
.slider-center .slider{
    left: 50%;
    transform: translateX(-50%);
}
#overflowing-img-container{
    position: relative;
    width: 125px;
}
#overflowing-img-container img{
    /* position: fixed; */
    /* width: 50%; */
    transform: scale(1);
    z-index: 71;
    bottom: 0;
}

.bg-image{
    background-size: auto;
}
/* .bg1{
    background-image: url(/wp-content/themes/las_terrazas/dist/images/blue_ombre.webp);
}
.bg2{
    background-image: url(/wp-content/themes/las_terrazas/dist/images/palm.webp);
    background-repeat: no-repeat;
    background-position-y: calc( var(--bg-y-offset) * -0.1 );
} */
.dark{
    background-color: #464e61eb!important;
}
.dark h2, .dark h4{
    color: white;
}
.dark h2, .dark h4{
    color: white;
}
.dark h3{
    color: var(--clr-b-yellow);
}
.dark p{
    color: white;
    font-size:var(--fs-300);
}

.dark a{
    color: #c0c984;
}

.food{
    position: relative;
    height: 100%;
    width: 45vw;
}
.dishes{
    position: relative;
    height: 100%;
    width: 45vw;
}
.dishes #info{
    position: absolute;
    z-index: 1;
    width: 15vw;
    max-width: 20vw;
    min-width: 200px;
    background-color: white;
    /* left: -70px; */
    padding: 15px;
    max-height: 90%;
    height: auto;
    top: 50%;
    transform: translate(0% ,-20%);
    border-radius: var(--border-radius);
    gap: 15px;
    /* border: solid 1px #f6f6f6; */
    filter: drop-shadow(2px 4px 6px hsl(0deg 0% 0% / 10%));
    transition: all calc(var(--slide-speed) * 2);
    opacity: 0;
}
.dishes #info h4{
    /* font-size: var(--fs-450); */
}
.dishes #info p{
    color: black;
    /* font-size: var(--fs-100); */
}
.food .img-container{
    height: 100%;
    width: 100%;
    position: relative;
    /* transform: translateX(70px); */
}
.dishes .img-container{
    height: 100%;
    width: 100%;
    position: relative;
    transform: translateX(70px);
    overflow: hidden;
}
.dishes .img-container img{
    position: absolute;
    top: 0;
    width: 110%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.2) translate(30px, 0);
    transition: all calc(var(--slide-speed) * 1.75);
}
.card-container[active="1"] .dishes #info {
    transform: translate(0% ,-50%);
    opacity: 1;
}
.card-container[active="1"] .dishes img {
    transform: scale(1) translate(0px, 0);
}

.experience .filter{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #00000036;
    z-index: 1;
}
.experience{
    position: relative;
    height: 100%;
    width: 25vw;
    min-width: 330px;
}
.experience #info{
    position: absolute;
    z-index: 2;
    width: 100%;
    padding: 30px;
    /* height: 100%; */
    max-height: 60%;
    /* top: 50%; */
    color: white;
    bottom: 0;
}
.experience #info h4{
    font-size: var(--fs-600);
    line-height: 1;
}
.experience #info p{
    color: white;
    margin-bottom: 10%;
}
.experience .img-container{
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.experience .img-container img{
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    /* transition: var(--transition); */
    transition-duration: var(--slide-speed);
    transition-timing-function: ease-in-out;
    transform: scale(1.2) translateX(-20px);
}
.card-container[active="1"] .experience {
    /* border-color: var(--clr-dark-yellow); */
    /* transform: scale(1); */
    /* transition-delay: var(--slide-speed-delay); */
    /* filter: drop-shadow(2px 2px 2px rgb(0,0,0,0.2)); */
    /* opacity: 0; */
    /* z-index: 2; */
}
.card-container[active="1"] .experience .img-container img{
    transform: scale(1.2) translateX(20px);
}

/* TABS */
.tabs-container{
    display: flex;
    /* gap: 10px; */
    border-bottom: solid 1px #cacaca;
    justify-content: center;
}
#tab:hover{
  background-color: #efefef;
}
#tab{
    font-family: var(--ff-secondary);
    font-size: var(--fs-300);
    padding: 5px 15px;
    position: relative;
    border-top: solid 2px #ffffff;
    cursor: pointer;
    background-color: #fafafa;
    transition: background-color 0.2s;
}
#tab[data-active="0"]{}
#tab[data-active="1"]{
    border-top: solid 2px var(--clr-main-dark);
    border-left: solid 1px #cacaca;
    border-right: solid 1px #cacaca;
    background-color: white;
}
#tab[data-active="1"]::after{
    content:" ";
    position: absolute;
    width: 100%;
    left: 0;
    bottom: -5px;
    height: 6px;
    background-color: white;
    z-index: 1;
}

#tab-container[data-active="0"]{
    display: none;
}
#tab-container[data-active="1"]{}
#book-now[data-open="0"]{/* display:none; */max-height: 0px;height: 0;min-height: 0;border: none;}
#book-now{
    position: fixed;
    width: 100%;
    background-color: white;
    height: 12vh;
    max-height: 
70px;min-height: 70px;/* max-height: 100%; */
    overflow: hidden;
    transition: all 0.5s;
    border-bottom: solid 1px var(--clr-b-yellow);
}
#book-now #booking-widget{
    margin-top: 0;
    width: 100%;
    padding: 10px 0px;
    border: none;
}
#book-now #booking-widget form{width: 100%;justify-content: space-between;}

nav #book-now .container{
    height: 100%;
    padding: 0 var(--container-padding-mobile);
}
#book-now form input{
    color: #000;
    font-size: var(--fs-400);
}
#book-now form label{
    color: #000;
}
#book-now .exit{
    right: 2%;
    top: 50%;
    transform: translateY(-50%);
}
#pop-up-bar.right .pop-up-container{
    right: -100%;
    padding: 3rem;
    animation: pop-up-container 0.7s ease-in-out forwards;
}
@keyframes pop-up-container{
    0%{right:-100%;}
    100%{right:0%;}
}
#pop-up-bar{
    position: fixed;
    top: 0;
    z-index: 30;
    width: 100%;
    /* background-color: #00000059; */
    height: 100vh;
    animation: pop-up-bg 1s forwards;
}
@keyframes pop-up-bg{
    0%{background-color: #00000000}
    100%{background-color: #ffffff8f}
}
#pop-up-bar .exit{
    right: 3rem;
    top: 3rem;
}
.pop-up-container>*{
}
.pop-up-container{
    background-color: white;
    width: 45vw;
    position: absolute;
    height: 100vh;
    /* overflow-y: scroll; */
border-left: solid 1px var(--clr-dark-yellow);}
.pop-up-container .body{overflow-y: scroll;height: 75vh;padding: 0 1rem 0 0;}

.pop-up-container .body::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    margin-right: 5px;
}

.pop-up-container .body::-webkit-scrollbar-thumb {
    background: var(--clr-main-dark);
    /* border: solid 1px #fff; */
    border-radius: 60px;
}
.pop-up-container .body::-webkit-scrollbar-track {
    background: #e9e9e9;
    /* border: solid 1px #fff; */
    /* margin: 10px; */
    border-radius: 60px;
}

/* HORIZONTAL GALLERY */
.page-cover .body::-webkit-scrollbar {
    width: 5px;
    height: 10px;
    margin-right: 5px;
}

.page-cover .body::-webkit-scrollbar-thumb {
    background: var(--clr-main-dark);
    /* border: solid 1px #fff; */
    border-radius: 60px;
}
.page-cover .body::-webkit-scrollbar-track {
    background: #e9e9e9;
    /* border: solid 1px #fff; */
    /* margin: 10px; */
    border-radius: 60px;
}

.col-body .container{
    padding: 0px calc( var(--container-padding) * 0.4);
}
.col-body{
/*     background-color: #fafafa; */
    /* padding-left:5%; */
}
.container-left{
    padding-left: var(--container-padding);
}
.guest-portal .col-body .container{
    padding: 0px calc( var(--container-padding) * 1.1);
}
.post-content{}
.post-content h3{margin-top: 7vh;}
.post-content img{margin-top: 5vh;width: 100%;max-height: 50vh;object-fit: cover;}
.post-content p{margin-bottom: 20px;}
.post-content ol{}
.post-content ol li{font-family: var(--ff-p);}
.img-col img.cover{
    position: fixed;
    left: 0;
    z-index: -1;
}
.container-right{}
.sticky-col{padding-right: 3rem;}
.transform-fix-top{
    transform: translateY(-10px);
}
.bg-white{
    background-color: #ffffff;
    /* background-image:url(../images/symbol_white.svg); */
    background-size:100vh;
    background-position:18vw 15vh;
    background-attachment: fixed;
    /*     background-repeat: no-repeat; */
}
.bg3 {
    background-image: url(/images/blue_ombre2.webp);
    background-size: 50vw;
    background-position-y: calc(var(--bg-y-offset) * 0.35);
    background-attachment: fixed;
}
.white-text{color: white!important;}
.sub-title-options{
    display: flex;
    list-style: none;
    padding: 0;
    gap: 1rem;
}
.dark .sub-title-options a{
    color: var(--clr-b-yellow);
}
.sub-title-options a{
    color: var(--clr-dark-yellow);
    font-size: var(--fs-300);
}

.image-container{
    position: relative;
    overflow: hidden;
}
.image-container img{
    height: 100%;
    width: auto;
    min-width: 100%;
    position: absolute;
    object-fit: cover;
    transform: scale(1.2) translateY(var(--offset-y));
}
.h-30{height:30vh;width: auto;/* object-fit: cover; */}
.h-40{height:40vh;width: auto;object-fit: cover;}
.h-50{height:50vh;width: auto;object-fit: cover;}
.h-60{height:60vh;width: auto;object-fit: cover;}
.h-70{height:70vh;width: auto;object-fit: cover;}
img.fill{object-fit: cover;}

hr{
    background-color: var(--clr-dark-yellow);
    height: 1px;
    border: none;
    margin: 15px 0;
}
.sub-title-options.menu{justify-content: center;gap: 1rem;}
.sub-title-options.menu li::before{content:''}

.ly-03 h1{
    font-size: var(--fs-750);
    line-height: 1;
    margin-bottom: 1rem;
}
.ly-03 h2{
    font-size: var(--fs-700);
}

.ly-03 .room-ammenities{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.ly-03 .room-ammenitie{
    width: auto;
}
.ly-03 .room-ammenities.general{font-family: var(--ff-secondary);font-size: var(--fs-400);margin-bottom: 1rem;}
.ly-03 .room-ammenities.general >*{
    gap: 5px;
    align-items: center;
}
.ly-03 .room-ammenities.general img{width: 50px;}
.ly-03 .room-ammenitie img {
    width: auto;
    height: 30px;
}
.ly-03 .room-ammenitie div {
    font-size: var(--fs-200);
}
.ly-03 #tab{font-size: var(--fs-400);}
.ly-03 h4{font-size: var(--fs-500);font-family: var(--ff-main);margin-bottom: 1rem;}


#room-booking #booking-widget{
    background-color: #fff;
    padding: 2rem;
    margin-top: 0;
    border-radius: var(--border-radius);
    border: double var(--clr-dark-yellow) 3px;
    filter: drop-shadow(2px 4px 6px hsl(0deg 0% 0% / 10%));
}
#room-booking #booking-widget form{
    gap: 1rem;
    align-items: baseline;
    width: 100%;
    flex-direction: column;
}
#room-booking #booking-widget label{
    font-family: var(--ff-p);
    font-size: var(--fs-200);
    color: var(--clr-dark-yellow);
}
#room-booking #booking-widget .spec::after{content: none;}
footer .row div::after{content: "";width: 1px;background-color: var(--clr-dark-yellow);height: 100%;position: absolute;right: 0%;top: 50%;transform: translateY(-50%);}
#room-booking #booking-widget .spec:last-child::after{}
footer .row div:last-of-type::after{
    display: none;
}
#room-booking #booking-widget .spec:first-of-type::after{
    display: none;
}
#room-booking #booking-widget .spec{
    display: flex;
    flex-direction: column;
    /* border-right: solid; */
    position: relative;
    /* max-width: 22ch; */
    width: 100%;
}
#room-booking #booking-widget input{
    color: #000;
}
#room-booking #booking-widget input[type="number"]{
    width: 75%;
}
#booking-widget h4{
    margin-bottom: 1rem;
    font-family: var(--ff-main);
}
.ly-03 .sticky{
    /* top: 0; */
}
.ly-03 .sticky-col{
    padding: 0;
/* display: none; */}
.ly-03 .extra-info{
    column-count: 2;
    margin: 0;
}
.ly-03 .extra-info>*{
    padding: 5px 0;
}

#popImage{height: 90vh;width: auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);/* border: solid 10px #debc73; */animation: pop;animation-duration: 1s;}
.even-split .half{
    width: 100%;
    padding: 4%;
}


.nextIMG{
    filter: brightness(4.5);
    transform: rotate(90deg);
}
.prevIMG{
    filter: brightness(5.5);
    transform: rotate(-90deg);
}
.project:nth-last-child(2) img, .two-vertical img{
    object-position: 50%!important;
}
.email-sent-pop{
    position: fixed;
    z-index: 5;
    top: 30px;
    right: 110px;
    background-color: #debc73;
    /* border: solid 5px; */
    display: flex;
    justify-content: space-between;
    gap: 40px;
    padding: 20px;
    animation-name: TB;
    animation-duration: 0.5s;
}

.search-params > div{
    
}

.search-params > div:nth-of-type(1){
    width:70%;
}

.search-params > div:nth-of-type(2){
    width:30%;
    display:flex;
    justify-content:end;
}

.holder{
    position:
    relative;
    height: 100%;
    z-index:10;
}
.calendar{
    position:absolute;
    display:none!important;
    width:100%;
    z-index:200000000000000000000;
}

.calendar.active{display:block!important;}
.search-params{}
#booking-widget label {
/*     font-family: var(--ff-p); */
    margin-bottom: 5px;
    font-size:var(--fs-200);
}
.date-spec, .date-spec > *{cursor:pointer;}
.date-spec{
    transition:all 0.5s;
/*     padding:10px; */
    border-radius:5px;
    display:flex;
    flex-direction:column;
}

button.rdrDayHovered .min-rate{
    /* color:#fff!important; */
}

button .rdrStartEdge ~ .min-rate{
    color:#fff!important;
}
.min-rate{
    height: 100%;
    width: 100%;
    position: absolute;
    top: -12px;
    left: 0%;
    z-index: 1;
    color: #23a8fd;
    font-size: 13px;
}

.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber .min-rate, .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber .min-rate, .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber .min-rate, .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber .min-rate {
    color: rgba(255, 255, 255, 0.85);
}

.rdrDayNumber {
    bottom: -10px!important;
}

.rdrDay {
    height: 4em!important;
}

.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{
  background: currentColor;
  position: absolute;
  top: 0px!important;
  left: 0!important;
  right: 0!important;
  bottom: 0px!important;
  /* border-radius: 0; */
  border-top-left-radius: 0em!important;
  border-bottom-left-radius: 0em!important;
  border-top-right-radius: 0em!important;
  border-bottom-right-radius: 0em!important;
}

.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{
    border-top-left-radius: 0!important;
    border-bottom-left-radius: 0!important;
    border-left-width: 1px;
    left: 0px;
  }

.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{
   border-top-right-radius: 0!important;
   border-bottom-right-radius: 0!important;
   border-right-width: 1px;
   right: 0px;
 }

.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{
  background: rgba(255, 255, 255, 0.09);
  position: absolute;
  top: 3px;
  left: 0px;
  right: 0px;
  bottom: 3px;
  pointer-events: none;
  border: 0px solid currentColor;
  z-index: 1;
}

.rdrDayStartPreview{
  border-top-width: 1px;
  border-left-width: 1px;
  border-bottom-width: 1px;
  border-top-left-radius: 0!important;
  border-bottom-left-radius: 0!important;
  left: 0px;
}

.rdrDayInPreview{
  border-top-width: 1px;
  border-bottom-width: 1px;
}

.rdrDayEndPreview{
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-top-right-radius: 0!important;
  border-bottom-right-radius: 0!important;
  right: 2px;
  right: 0px;
}

.date-spec span{font-size:14px;}
.date-picker{cursor:pointer;transition:all 0.3s ease;}
.date-picker:hover{
/*     background-color:#e1e1e13d; */
    border-color:var(--clr-dark-yellow)!important;
}
.rdrDateDisplayWrapper{display:none;}
#room-page #extras-grid #rooms-container{width: 100%;}
#rooms-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 0px;
/*     min-height:50vh; */
}
#head{
    /* position:
    sticky; */
    top:0;
    /* background-color: #fafafa; */
    z-index: 1;
    /* border-bottom: solid 2px var(--clr-dark-yellow); */
}
.query-container{
        border-bottom: solid 3px var(--clr-dark-yellow);
}
#home #room{
    /* height: max-content; */
    /*     min-height: 500px; */
    background-color: #fff;
    padding: 20px;
    border: solid 1px;
    border-color: #cacaca;
    background-color: white;
    filter: drop-shadow(0px 10px 5px rgb(0 0 0 / 11%));
    transition: var(--transition);
    display:flex;
    justify-content:space-evenly;
    gap:var(--gap);
    border: solid 2px var(--clr-dark-yellow);
}
#home #room>*{
    flex:100%;
}

#hero-section{
    height: 40vh;
    background-color: aqua;
}

#home #room:hover{
    border-color: var(--clr-dark-yellow);
}
/* .room-anim{
    animation-duration: 5s;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: room;
} */
@keyframes room{
    0%{opacity:0;}
    100%{opacity:1;}
}
.feats{padding:10px 0;gap:0!important;}
.feats p{padding:0 15px;border-right:solid 1px #d3d6a0;}
.feats p:after{}
.feats p:last-of-type{border-right:none;}
.feats p:first-of-type{padding-left:0;}
#room.open{
    border-color:var(--clr-dark-yellow);
}
#room > * {
    transition: var(--transition);
}
h4.subtitle{
    font-family: 'experiment';
    color:var(--clr-dark-yellow);
    font-size:var(--fs-500);
    
}
/* #room:last-of-type{margin-bottom:5vh;} */
#room img.feat{
    border-radius: var(--border-radius);
    /* aspect-ratio: auto; */
}
#rates{
    overflow-y:
    hidden;
    max-height:0;
    transition: var(--transition);
    transition: all 1s ease;
}
.open #rates{
    max-height: 100vh;
    /* transition: all 0.5s; */
}
#rate{}
#rate{
    width:100%;
    border: solid 1px #cacaca;
    padding:15px;
    margin-bottom:10px;
    transition: all 0.5s;
    position:relative;
}
.rate-sale{
    /* border:solid 3px #a8b176!important; */
}

.ribbon-top-right {
  top: -3px;
  right: -3px;
}
.ribbon-top-right::before,
.ribbon-top-right::after {
  border-top-color: transparent;
  border-right-color: transparent;
}
.ribbon-top-right::before {
  top: 0;
  left: 0;
}
.ribbon-top-right::after {
  bottom: 0;
  right: 0;
}
.ribbon-top-right span {
  left: -22px;
  top: 30px;
  transform: rotate(45deg);
}

.wdp-ribbon{
    color:#fff;
	display: inline-block;
    padding: 2px 15px;
	position: absolute;
    right: 0px;
    top: 20px;
    line-height: 24px;
	height:24px;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
	border-radius: 0;
    text-shadow: none;
    font-weight: normal;
    background-color: #a8b176 !important;
}

.wdp-ribbon-two:before, .wdp-ribbon-two:before {
    display: inline-block;
    content: "";
    position: absolute;
    left: -14px;
    top: 0;
    border: 9px solid transparent;
    border-width: 14px 8px;
    border-right-color: #a8b176;
}
.wdp-ribbon-two:before {
    border-color: #a8b176;
    border-left-color: transparent!important;
    left: -9px;
}
.wdp-ribbon-four{
	right: 10px;
    top: 10px;
    line-height: 60px;
    height: 60px;
}
.wdp-ribbon-five{
	background: #a8b176;
	right: 10px;
    top: 10px;
	padding: 0px;
	height: 60px;
	width: 60px;
	text-align: center;
	vertical-align: middle;
	line-height: 60px;
	border-radius:50%;
}
.wdp-ribbon-six{
	background: none !important;
    position: relative;
    box-sizing: border-box;
    position: absolute;
    width: 65px;
    height: 65px;
	top:0px;
	right:0px;
	padding:0px;
	overflow: hidden;
}
.wdp-ribbon-inner-wrap{
    -ms-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
}
.wdp-ribbon-border{
    width: 0;
    height: 0;
    border-right: 65px solid #ff0000;
    border-bottom: 65px solid transparent;
    z-index: 12;
    position:relative;
    top:-20px;
    color:#fff;
}
.wdp-ribbon-text {
    font-size: 13px;
    font-weight: bold;
    line-height: 13px;
    position: absolute;
    z-index: 14;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 15px;
    left: -5px;
    width: 91px;
    text-align: center;
    /* font-family: var(--ff-secondary); */
}
#rate.active{
    background-color: #ffffff;
    border-color: var(--clr-dark-yellow);
    border-width: 2px;
}
#rate:last-of-type{/* border:solid 1px; */}
#rate-value{}
#rate-value #value, #summary #value{
    font-size:var(--fs-450);
    font-family:var(--ff-secondary);
}
#rate-value small{line-height:1px;}
/* #room .info, #rate-details{padding-top:20px;} */
#rate-details{flex:0;width:0;}
#room.details #rate-details{flex:100%;width:initial;transition: var(--transition);}
#mini-slide-show button{--min:50px;;z-index:10;background-color:var(--clr-main-trans);color:#fff;border:none;position:absolute;min-width:var(--min);min-height:var(--min);top:calc(50% - (var(--min)/2));}
#mini-slide-show{flex:100%;width:initial;}
#mini-slide-show button{}
#mini-slide-show button:last-of-type{right:0;}
#room.details #mini-slide-show{transition: var(--transition);flex:0;width:0;}
#modal{position:fixed;top:0;left:100vw;z-index:2;background-color:#92a0c8b5;width:100vw;height:100vh;}
#modal.open{left:0}
#modal .modal-container{}
.single-extra #mini-slide-show{max-height: 70vh;}
#mini-slide-show img {
    width: 100%;
    position: absolute;
    height: 100%;
    object-fit: cover;
    object-position: left;
    transition: var(--transition);
    left: 0px;
    cursor: pointer;
}

#room-page{margin-bottom:20px;}
#room-page .container{}
#room-page .hero-container{}

#pop-up-col{position: fixed;top:0;right: -60%;z-index:1;background-color:#ffffff;width: inherit;height: 100vh;padding:2vw;transition: var(--transition);}
#pop-up-col.active{
    right: 0;
}
#pop-up-col .close{text-align:right;right: 2%;}
.dark .close{color:#fff;}
#pop-up-col .close span{cursor:pointer;padding:10px;}
#rate-description .section{border-bottom:solid 1px #cacaca;padding:20px 0;}
.dark #rate-description .section{border-color:#bcbb85;}
#rate-description .section:last-of-type{border:none;}
#rate-description .section:first-of-type{padding-top:0;}
/* #rate-description{display:flex;flex-direction:column;gap:30px;} */
#summary{
    min-height:55vh;
        padding: 25px;
    border: solid 1px;
    border-color: #cacaca;
    background-color: white;
    filter: drop-shadow(0px 10px 5px rgb(0 0 0 / 11%));
    transition: var(--transition);
    height:max-content;
}
#summary.summary-extras{min-height:max-content!important;}

#summary h4{color:initial;}
#summary p{color:initial;}
#room-page #summary p{color:#fff;}
#room-page{/* position:relative; */}
#room-page #extras-grid{
    flex-direction: column;
}

#room-page #extras-grid #mini-slide-show {
    min-height: unset;
    width: 70%;
    flex: none;
}
.single-extra-card{}
#room-page #extras-grid .single-extra-card {
    /* height: max-content; */
    /* min-height: 500px; */
    background-color: #fff;
    padding: 20px;
    border: solid 1px;
    border-color: #cacaca;
    background-color: white;
    filter: drop-shadow(0px 10px 5px rgb(0 0 0 / 11%));
    transition: var(--transition);
    display: flex;
    justify-content: start;
    gap: var(--gap);
    border: solid 2px var(--clr-dark-yellow);
}
.ribbon {
  width: 150px;
  height: 150px;
  overflow: hidden;
  position: absolute;
  top: 0px;
  right: 0px;
}

.ribbon span {
  position: absolute;
  display: block;
  width: 180px;
  padding: 5px 0;
  background: #38a169; /* green */
  color: #fff;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  transform: rotate(45deg);
  top: 25px;
  right: -45px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#room-page #summary{position: sticky;top: 5vh;align-self: auto;}
#summary button{width:100%;}
#summary.summary-extras #sum>*:only-child{border-bottom:none;}
.dark button a{color:initial;}
.pop-container h4{margin-bottom:10px;}
.summary-extras{}
#sum{}
.order-summary{
    /* border: solid 1px #cacaca; */
    /* padding: 15px; */
    margin-bottom: 20px;
}
#sum>*{padding:8px 0;border-bottom:solid 1px #cacaca;}
#sum>*:last-child{border-bottom:none;}
.summary-extras #sum>*:last-of-type{border-bottom:none;}
.summary-extras #sum>*:first-of-type{border-bottom:solid 1px #cacaca;}
#sum .amount, #total .amount{text-align:right;}
#total .amount{font-size:var(--fs-450);font-family:var(--ff-secondary);}
#total{font-size:var(--fs-450)!important;font-family: var(--ff-secondary);}
.link{text-decoration:underline;margin:5px 0;width:max-content;cursor:pointer;font-family:var(--ff-p);}
.flex-col{display:flex;flex-direction:column;gap:var(--this-gap,30px);}
input,select,textarea{padding:10px;width:100%;margin-bottom:var(--gap);font-family:var(--ff-p);position: relative;font-size:var(--fs-300);}
form{--gap:10px;}
form h4{margin-bottom:0px;}
input[required],select[required]{
    padding-left:19px;
    background-image: var(--required);
    background-repeat: no-repeat;
    background-position-x: calc(10px);
    background-position-y: calc(16px);
    background-size:5px;
    border:solid 1px #7f7c7c;
}
    .star .st0{fill:#dcdcdc;transition:all 0.2s;}
    .star:hover .st0{fill:#cacaca;translate:0px -3px;}
    .star[data-selected="1"] .st0{fill:#dfdf91;translate:0px -3px;transition-delay:var(--star-delay);}
    #rating-container{display:flex;gap:10px;}
    .star{flex:1;max-width:50px;cursor: pointer;}
    .star > * {pointer-events:none;}
.invalid{border:solid 2px #ff5050!important;}
#expiry.invalid{border:solid 2px #ff5050!important;position:relative;padding:40px 10px 10px 10px;}
#expiry.invalid:before{content:"Please, make sure your credit card is not expired";margin-bottom:50px;position:absolute;top:0px;background-color:red;width:100%;left:0;padding-left:15px;color:#fff;}

#room-page #summary{
    background-color:var(--clr-main-dark);
    color:#fff;
    border-radius:var(--border-radius);
}
#room-page #summary h4{
    background-color:var(--clr-main-dark);
    color:#fff;
    border-radius:var(--border-radius);
}
#summary h4{
    font-size:var(--fs-500);
    margin-bottom:10px;
}
.modify-summary{
/*     color: #fff; */
    background-color: rgb(255 253 234)!important;
    border:solid 2px rgb(229 220 199) !important;
}
.modify-summary button{
    width: clamp(10px,100%,500px)!important;
}
#room-page .modify-summary .flex{gap:10px!important;flex-wrap:wrap;}
#room-page .modify-summary .flex > *:first-of-type{flex:100%;}
#room-page .modify-summary .flex > *{flex:40%;}
.modify-summary .flex{gap:2vw!important;}
.box {
    padding: 20px;
    border: solid 1px #cacaca;
    background-color: #ffffff73;
    border-radius: var(--border-radius);
}
.flex-always{flex-wrap:nowrap;gap:10px!important;}
.modify-summary .flex{

}
#full{backdrop-filter: blur(2px);background-color: rgb(145 156 177 / 85%);;width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 200;}
#full-modal{width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 200;backdrop-filter: blur(2px);background-color: rgb(145 156 177 / 85%);animation-duration: 0.5s;animation-timing-function: ease;animation-delay: 0s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;animation-play-state: running;animation-name: full-modal-container;}
#full #close{line-height:normal;width: 24px; height: 23px; background-color: rgb(222, 188, 115); position: absolute; top: 2%; right: 7%; color: rgb(255, 255, 255); text-align: center; font-weight: bolder; cursor: pointer; z-index: 1;}
#full-container{display: flex; align-items: center; justify-content: center; height: 100%;}
.img-container{width:80vw;}
#full-container img{width:clamp(500px,100vh,1000px);width:100%;max-width: unset;height:90vh;object-fit:cover;}
#modal-container{display: flex;align-items: center;justify-content: center;height: 100%;animation-duration: 0.5s;animation-timing-function: ease;animation-delay: 0s;animation-iteration-count: 1;animation-direction: normal;animation-fill-mode: forwards;animation-play-state: running;animation-name: modal-container;}
@keyframes modal-container{0%{opacity:0;transform:translateY(20px);} 100%{opacity:1;transform:translateY(0px);}}
@keyframes full-modal-container{0%{opacity:0;} 100%{opacity:1;}}
.card{width:45px;height:28px;filter:grayscale(1);opacity:0.3;transition:var(--transition);}
.activeCard{filter:grayscale(0);opacity:1;transform:translateY(-5px);}
.modal{position:relative;background-color:#fff;max-width:1000px;min-width:400px;width:70vw;padding:30px;border-radius:var(--border-radius);min-height:30vh;max-height:90vh;overflow-y:scroll;}
.modal #close{width: 24px;height: 23px;background-color: rgb(222, 188, 115);position: absolute;top: 0px;right: 0px;color: rgb(255, 255, 255);text-align: center;font-weight: bolder;cursor: pointer;z-index: 1;/* border-radius: 50px; */}
.product-popup.modal{padding: 70px;max-width: 1200px;}
.product-popup ul{margin:0 0 0 0;}
.filters{gap:5px!important;}
#thumbnails{height:5vh;bottom:0;display:flex;gap:5px;bottom:1vh;justify-content:center;}
#thumbnails img{height:100%;width:auto;transition:all 0.2s;cursor:pointer;}
#thumbnails .img-selected{border:solid 3px rgb(222, 188, 115);}
.filters button{
/*     border-radius: 50px; */
    padding:10px 15px;
    border-color: #ababab82;}
.filters button:hover{border-color: #49494982;}
.filters button.selected:hover{border-color: #ffffff80;}
#full button{position:absolute;top: 40%;left:5%;color:#fff;width:50px;height:auto;border:none;font-size:40px;}
#full button:last-of-type{right:5%;left:unset;}
button{transition:all 0.2s;position:relative;}
button.sec{font-size:var(--fs-300);color: white;}
button.selected{color:#fff;background-color: #8490af;border-color:#ffffff80;transform:translateY(-3px)}
section .spec, .modify-summary .spec{border-bottom:solid 1px #e9e9e9;padding:15px 0;}
section .spec:last-child{border-bottom:none;}
section .spec > *{/* flex:100%; */}
section h4{}
/* #room-page form button.btn-book{width:100%;} */
button.btn-book{
    border-color:
    var(--clr-main-dark);
    overflow:
    hidden;
    transition:
    all 0s;
    border-color: #a8b176;
    border-radius:
    var(--border-radius);
    font-family: var(--ff-secondary);
    z-index:1;
}
button.btn-book a{font-family: var(--ff-secondary);}
button[type="submit"].btn-book{
    padding:20px;
    color:black;
}
button.btn-book::after{
    content:"";
    display: block;
    width:100%;
    background-color:var(--clr-dark-yellow);
    position:absolute;
    top:100%;
    left:0;
    height:100%;
    z-index:-1;
    transition:all 0.15s;
    
}

button.btn-book:hover{
    color:#fff;
    border-color: #a8b176;
}

button.btn-book:hover::after{
    top:0%;
}

/* common buttons */
.btn-cancel{--color:red!important;}

button.btn-action{
    --color:var(--clr-main-dark);
    border-color:var(--color);
    overflow:hidden;
    transition:all 0s;
    border-color: #919395;
    border-radius:
    var(--border-radius);
    font-family: var(--ff-secondary);
    z-index:1;
    padding: 10px 15px;
}

button.btn-action::after{
    content:
    "";
    display: block;
    width:100%;
    background-color: var(--color);
    position:
    absolute;
    top:100%;
    left:0;
    height:100%;
    z-index:-1;
    transition:
    all 0.15s;
}

button.btn-action:hover{
    color:#fff;
    border-color: #a6abb8;
}

button.btn-action:hover::after{
    top:0%;
}

button.btn-reg{
    border-color:
    var(--clr-main-dark);
    overflow:
    hidden;
    transition:
    all 0s;
    border-color: #919395;
    border-radius:
    var(--border-radius);
    font-family: var(--ff-secondary);
    z-index:1;
    padding: 10px 15px;
}

button.btn-reg::after{
    content:
    "";
    display: block;
    width:100%;
    background-color: var(--clr-main-dark);
    position:
    absolute;
    top:100%;
    left:0;
    height:100%;
    z-index:-1;
    transition:
    all 0.15s;
}

button.btn-reg:hover{
    color:#fff;
    border-color: #a6abb8;
}

button.btn-reg:hover::after{
    top:0%;
}

button.btn-reg::after{
    content:"";
    display: block;
    width:100%;
    background-color:#9e9ea3;
    position:absolute;
    top:100%;
    left:0;
    height:100%;
    z-index:-1;
    transition:all 0.15s;
    
}

.msg-modal{
    width:30vw;
    overflow:initial;
    height:max-content;
    min-height:max-content;
}

.modal-options p{
    font-size:var(--fs-300);
}



/* SPECIAL QUERIES */
@media only screen and (min-width: 700px) and (max-width: 1000px) {
    .res-details section .flex-resp-wrap{gap:0px!important;flex-wrap:wrap;}
    .layout-60-40 > div:first-child{width:50%!important;}
    .layout-60-40 > div:last-child{width:50%!important;}
    #room-page form .flex{flex-wrap:wrap;}
    nav{flex-wrap:wrap;}
}

@media only screen and (min-width: 700px) and (max-width: 1500px) {
    nav{flex-wrap:wrap;gap:0!important;}
    #root nav{gap:0!important;}
    #root nav ul{
        margin-top:10px;
    }
}