/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 700px) {

:root {
    --clr-main: #007cba;
    --clr-main-trans: #4e576ed9;
    /* --clr-main-dark: #1e1e1e; */
    --clr-main-dark: #4e576e;
    --clr-pink-accent: #f7ab9c;
    --clr-b-yellow: #dedeb1;
    --clr-dark-yellow: #bdbd7b;
    --clr-beige: #f7f4ed;
    --fs-900: 9.375rem;
    --fs-800: 6.25rem;
    --fs-750: 4.7rem;
    --fs-700: 3.5rem;
    --fs-650: 3rem;
    --fs-600: 2.5rem;
    --fs-550: 2.0rem;
    --fs-500: 1.75rem;
    --fs-450: 1.3rem;
    --fs-400: 1.125rem;
    --fs-300: 1rem;
    --fs-250: 0.9rem;
    --fs-200: 0.875rem;
    --fs-p: 0.9rem;
    --fs-100: 0.8rem;
    --ff-main:
    'main', serif;
    --transition: all 0.5s ease-in-out;
    --ff-secondary:
    'sec', sans-serif;
    --ff-exp:
    'experiment', sans-serif;
    /* --ff-p: 'Quattrocento Sans', sans-serif; */
    --ff-p:
    'third', sans-serif;
    --col:
    calc((100%/12) - calc(var(--col-padding)/2));
    --col-padding: 15px;
    --gap: 1rem;
    --border-radius: 3px;
    --container-padding: 3%;
    --container-padding-mobile: 8%;
    --button-pad: 8px 20px;
    --bg-y-offset: 0px;
    --required:
    url(../images/required.png);
}

/* RESETS */

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

body{
    background-color:#fafafa;
}

/* #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;
}

/* 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; */
}
.menu-trigger{
    --w:32px;
    position:absolute;
    top:calc(50% - calc(var(--w) / 2) );
    right:20px;
    width:var(--w);
    height:var(--w);
    z-index:20;
}

#rate h4{margin-bottom:0;}
#rate-description h4{margin-bottom:0;font-size:var(--fs-400);}
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;
}
.res-details{padding:0 15px;}
.res-details .flex{flex-direction:column;}
.res-details section .flex-resp-wrap{gap:10px!important;}
div {
    font-family: var(--ff-p);
}
.main-hero-container {
    display:none;
}
.main-hero-container img{
    object-fit:cover;
    width: 100%;
    position: absolute;
    top: -40%;
}
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;
    padding: 4%; */
    height: auto;
    width: 160px;
    }
.hero-container{min-width:40vw;position:relative;width: 40vw;}
.hero-shot{
    object-fit:cover;
    height:100vh;
    position:sticky;
    top:0;
}

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

/* forms */
input,button,textarea,select{font-family: inherit;}
#root nav ul{opacity:0;position: fixed;right:200vw;}
#root nav.open ul{display:flex!important;}
#root nav.open ul {
    opacity:1;
    transition:opacity 0.1s;
    right:0;
    justify-content:center;
    flex-direction:column!important;
    padding:0;
    top: 0;
    width:100%;
    background-color: #4a5470f7;
    z-index:20;
    gap: 0!important;
    margin: 0!important;
    height: 100%;
}

#root nav.open ul .symbol{
    position:absolute;
    bottom:5%;
    left:10%;
}
nav.open ul li{list-style: none!important;/* height: 5px; */width: 80%;border-bottom: solid 1px var(--clr-dark-yellow);padding: 10px 0;}
@keyframes navLi{
    0%{opacity:0;transform:translateX(20px);}
    100%{opacity:1;transform:translateX(0px);}
}
nav.open ul li:last-of-type{border-bottom:none;}
nav.open ul li::before{content: none!important;width: 0!important;padding: 0;}

nav{
    justify-content:center!important;
    position:relative;
}

/* 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;
}



.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);}
section:last-of-type{border-bottom:none;}
footer{
    /*     margin-top:10vh; */
    min-height: 10vh;
    --pad:5vh;
    /* padding:var(--pad) var(--container-padding)!important; */
    padding: 0px calc( var(--container-padding) * 1.5);
    }
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:100%;}
.layout-60-40 > div:last-child{width:100%;}


/* 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;
    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;
}
.feats{padding:10px 0;flex-wrap:wrap;gap:0px!important;}
.feats>*{font-size:15px;flex:40%;}
.feats{padding:10px 0;gap:0!important;}
.feats p{padding:0;border-right:none;}
.feats p:after{}
.feats p:last-of-type{border-right:none;}
.feats p:first-of-type{padding-left:0;}
[type="checkbox"]{max-width:20px!important;margin:0;}
textarea{width:100%;min-height:100px;margin-bottom:0px!important;}
.flex-y-center{align-items:center;}

.flex-break{flex-direction:column;}
.no-gap{gap:0!important;}
.flex-even >*{
    flex-basis: 100%;
    min-width:unset;
}
.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 );
}

.flex-walls{justify-content: space-between;}
.modify-buttons{flex-direction:column;text-align:center;}
.modify-summary .flex {
    flex-wrap:wrap;
}
.modify-summary .flex > *{
    flex:40%;
}
.modify-summary .flex > *:first-of-type{
    flex:100%;
}
.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; */color: #fff;font-size: var(--fs-400);text-decoration:none}
nav ul a{;opacity:0;}
nav.open ul a{
    
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-delay: var(--delay);
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: navLi;
    transition: all 0.5s;
    display: block;
}
#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; */
/*     margin:auto; */
    
}
.container-full{
    padding: 0px var(--container-padding);
}

.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;
}

#filters{flex-direction:column;width:100%;align-items:start;}
#filters button{width:100%;}
#filters-container{flex-direction:column;width:100%;}
#show-filters{width:100%;}
    
.collapsable{max-height:0;overflow:hidden;transition:all 0.5s;padding:0;opacity:0;}
.collapsable.open{max-height:100vh; padding:10px;border:solid 1px #cacaca;opacity:1;}
.collapse-trigger{border-bottom:solid 1px #cacaca; padding:10px;width:100%;}
.collapse-trigger.open{}

.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;
}
#home h1{text-align:center;}
h1{font-family: var(--ff-main);font-weight: 100;font-size: var(--fs-450);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; */
}
.modal h3{}
.modal .flex{flex-direction:column-reverse;}
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);
}

/* 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; */
}
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{

}
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,#booking-widget > div{width:100%;}
#booking-widget{
    border: solid 1px #d3c392;
    flex-direction:column;
    padding: 10px;
}
.search-params > div:nth-of-type(2) {
    width: 100%;
/*     display: block; */
    justify-content: center;
}
#booking-widget .date-picker{
    flex:100%!important;
}
    
#booking-widget .spec{
    flex:45%;
}

#booking-widget >.flex{
    flex-wrap:wrap;
    gap:10px!important;
    
}
    
#booking-widget .btn-main{
    width:100%;
    margin-top:10px;
    
}

#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 .date-picker .flex{gap:0!important;padding-right:10px;}
#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: 0 0;
/*     min-width: 100px; */
/*     max-width: 18%; */
}
#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: 25px;
    font-weight: 100;
    line-height: 1;
    /* border: solid 1px; */
    padding: 0px 9px;
    border-radius: 5px;
    cursor: pointer;
    /* color: white; */
    transition: all 0.2s;
    user-select: none;
    border: solid 1px #a1a1a142;
    width: fit-content;
    margin-right: 5px;
}
.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 );
} */

/* ----------------------- */
/*  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: 760px;
    position: absolute;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: var(--transition);
    left: 0px;
}
#room #mini-slide-show{
    /* height: 100%; */
    min-height: 350px;
    gap: 0;
    position: relative;
    overflow: hidden;
    /* max-height: 170px; */
    border-radius: var(--border-radius);
    transition: var(--transition);
    }
#room-page #room #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);
    }
#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: 2%;
    row-gap:5px;
    display: flex;
    flex-wrap: wrap;
/*     padding: 10px 10px 0 10px; */
}
.room-ammenitie div{
    font-size: small;
}
.room-ammenitie:hover .amenity-description {
    top: -25px;
    opacity: 0;
}
.room-ammenitie{
    gap: 5%;
    font-family: var(--ff-p);
    align-items: center;
/*     width: 32%; */
    flex-direction:column;
    gap:5px!important;
    text-align:center;
    justify-content:center;
}

#room-page .room-ammenitie{
    gap: 5%;
    font-family: var(--ff-p);
    align-items: center;
/*     width: 32%; */
    flex-direction:row;
    gap:5px!important;
    text-align:center;
    justify-content:start;
}
    
.room-ammenitie img{
    width: auto;
    height: 30px;
}
#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) * 1.5);
}
.col-body{
/*     background-color: #fafafa; */
    /* padding-left:5%; */
    flex-direction:column;
/*     margin:auto; */
}
.container-left{
    padding-left: var(--container-padding);
}
.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: white!important;}
.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:first-of-type{
    flex: 1;
}

.holder{
    position:
    relative;
    height: 100%;
}
.calendar{
    position:fixed;
    display:none!important;
    width:90%;
    z-index:2;
    top:20%;
    left:5%;
}

.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;
}

.head-spec{
    transition:all 0.5s;
    padding:10px!important;
/*     border-radius:5px; */
}

.date-spec:hover{
    background-color:#e1e1e13d;
}
.rdrDateDisplayWrapper{display:none;}
#rooms-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0 0px;
}
#head{
    /* position:
    sticky; */
    top:0;
    z-index: 1;
}
#home #room{
    /* height: max-content; */
    /* min-height: 200px; */
    background-color: #fff;
    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);
    flex-direction:column;
}

#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;}
}

#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);
    line-height:30px;
}
/* #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;
}
#rate div{flex-direction:column;justify-content:start;align-items:start;width:100%;}
#rate.active{
    background-color: #ffffff;
    border-color: var(--clr-dark-yellow);
    border-width: 2px;
    width:100%;
}
#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{flex:100%;width:initial;}
#mini-slide-show button{
/*     --min:50px;;z-index:10;background-color:var(--clr-main-trans);color:#fff;border:none;position:absolute;min-height:var(--min);top:calc(50% - (var(--min)/2)); */
}
#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{}


#room-page > .flex{flex-direction:column-reverse;}
#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:10px 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{
        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);
    height:max-content;
}
#summary h4{color:initial;}
#summary p{color:initial;}
#room-page #summary p{color:#fff;font-size:14px;}
#room-page{/* position:relative; */}
#room-page #room{flex-direction:column;}
#room-page #summary{position: sticky;top: 5vh;align-self: auto;}
/*     #room-page #summary{position: fixed;bottom: -60%;top:unset;width:93%;left:3%;align-self: auto;} */
#summary button{width:100%;}
.dark button a{color:initial;}
.pop-container h4{margin-bottom:10px;}
#sum{}
#summary .flex{flex-direction:row;}
#sum>*{padding:2px 0;border-bottom:solid 1px #cacaca;}
#sum>*:last-of-type,#sum>*:first-of-type{border:none;}
#sum .amount, #total .amount{text-align:right;}
#total .amount{font-size:var(--fs-450);}
#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);font-size:15px;margin-top:10px;}
.flex-col{display:flex;flex-direction:column;gap:var(--this-gap,10px);}
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 .flex{flex-direction:column;gap:0!important;}
form .check{flex-direction: column;gap:10px!important;line-height:normal;}
.card-icons{flex-direction:row!important;}
form h4{margin-bottom:0px;font-size:var(--fs-400);}
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;
}
.invalid{border:solid 2px red!important;}

#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);
    font-size:20px;
}
#summary h4{
    font-size:var(--fs-500);
    margin-bottom:0;
}

.box {
    padding: 10px;
    border: solid 1px #cacaca;
    background-color: #ffffff73;
    border-radius: var(--border-radius);
}
#full{backdrop-filter: blur(2px);background-color: rgb(65 66 69 / 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%);}
#full #close{background-color: rgb(222, 188, 115); position: absolute; top: 2%; right: 5%; color: rgb(255, 255, 255); text-align: center; font-weight: bolder; cursor: pointer; z-index: 1;}
#full-container{overflow-y:scroll;display: flex; align-items: start; justify-content:center; height: 86vh;gap:0!important;width:100%;margin:7vh 0;}
#full-container img{width:clamp(500px,100vh,1000px);width: 100%;max-width: 100%;height:unset;object-fit:unset;}
    #thumbnails{bottom:0;display:flex;gap:5px;bottom:1vh;justify-content:start;flex-wrap:wrap;row-gap:0px;}
#thumbnails > * {flex:100%;}
    #thumbnails img{height:auto;width:100%;transition:all 0.2s;cursor:pointer;}
#thumbnails .img-selected{border:solid 3px rgb(222, 188, 115);}
.img-container {
    width: 95vw;
    
}
    #modal-container{display: flex; align-items: center; justify-content: center; height: 100%;}
.card{width:45px;height:28px;filter:grayscale(1);opacity:0.3;transition:var(--transition);margin-right:10px;}
.activeCard{filter:grayscale(0);opacity:1;transform:translateY(-5px);}
.modal{position:relative;background-color:#fff;min-width: 300px;width: 95vw;padding:15px 15px 15px;border-radius:var(--border-radius);min-height:30vh;max-height:88vh;overflow-y:scroll;}

.modal #close{width: 24px;height: 23px;background-color: rgb(222, 188, 115);position: fixed;top: 10px;right: 15px;color: rgb(255, 255, 255);text-align: center;font-weight: bolder;cursor: pointer;z-index: 1;/* border-radius: 50px; */}
.filters{gap:5px!important;}
.filters button{
/*     border-radius: 50px; */
    border-color: #ababab82;}
.filters button:hover{border-color: #49494982;}
.filters button.selected:hover{border-color: #ffffff80;}
#full button{position:absolute;top: 80%;left:calc(50% - 55px);color:#fff;display:none;}
#full button:last-of-type{right:calc(50% - 55px);left:unset;}
button{transition:all 0.2s;position:relative;}
button.sec{font-size:var(--fs-300);}
button.selected{color:#fff;background-color: #8490af;border-color:#ffffff80;transform:translateY(0px)}
section .spec, .modify-summary .spec{border-bottom:solid 1px #e9e9e9;padding:10px 0;gap:0!important;}
section .spec:last-child{border-bottom:none;}
section .spec > *{/* flex:100%; */}
section h4{}
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;
}
#room-page form button.btn-book{width:100%;}
    
button.btn-book a{font-family: var(--ff-secondary);}
button[type="submit"].btn-book{
    padding:20px;
    margin-bottom:20px;
}
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;
    
}
#rate button.btn-book{width:100%!important;}
button.btn-book:hover{
    color:#fff;
    border-color: #a8b176;
}

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