@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Roboto:wght@500;900&display=swap');

/* ===== Color System (edit only these 5) ===== */
:root{
  --carousel-accent: var(--c2, #EC8C85);
  --stories-gap: 10px;
  --stories-radius: 18px;
  --stories-shadow: 0 10px 30px rgba(0,0,0,.25);
  --stories-arrow-offset: -12px;

  --shadow-strong: 0 10px 60px rgba(0, 0, 0, .4);

  /* scaling/animation */
  --stories-scale-active: .85;   /* 30% smaller */
  --stories-scale-near:   .7;    /* 40% smaller (non active) */
  --stories-scale-inactive: var(--stories-scale-near, .6);
  --stories-anim: 280ms ease;

  --c1: #B29898; /* primary (was rgba(151,120,102,1)) */
  --c2: #EC8C85; /* accent / gold (was rgba(195,158,79,1)) */
  --c3: #817F70; /* neutral mid (was rgba(129,127,112,1)) */
  --c4: #37302D; /* neutral dark (was rgba(55,48,45,1)) */
  --c5: #FFFFFF; /* light (was rgba(255,255,255,1)) */

  /* === New Palette (from swatch image) === */
  --n1: #B29898; /* muted mauve */
  --n2: #EC8C85; /* coral pink */
  --n3: #F4E3B9; /* soft beige yellow */
  --n4: #F7EEE8; /* pale cream */
  --n5: #D8DFD3; /* sage grey-green */
}

/* CSS Document */

.mo{display:none !important;} /* mobile only */
.do{display:inline-block !important;} /* pc only */

.cb{ background-color:var(--c4);}
.cw{ background-color:var(--c5);}
.c1{ background-color:var(--c4);}
.c2{ background-color:var(--c2);}
.c3{ background-color:var(--c3);}
.c4{ background-color:var(--c1);}
.c5{ background-color:color-mix(in srgb, var(--c1) 20%, transparent);}

.fb{ fill:var(--c4);}
.fw{ fill:var(--c5);}
.f1{ fill:var(--c4);}
.f2{ fill:var(--c2);}
.f3{ fill:var(--c3);}
.f4{ fill:var(--c1);}

.tcb{ color:var(--c4);}
.tcw{ color:var(--c5);}
.tc1{ color:var(--c4);}
.tc2{ color:var(--c2);}
.tc3{ color:var(--c3);}
.tc4{ color:var(--c1);}
.tc5{ color:color-mix(in srgb, var(--c1) 50%, transparent);}

.p0   {padding:0px !important;}
.p15  {padding:15px;}
.p30  {padding:30px;}
.p60  {padding:60px;}
.p90  {padding:90px;}
.p120 {padding:120px;}

.pt0  {padding-top:0px !important;}
.pt15  {padding-top:15px;}
.pt30  {padding-top:30px;}
.pt45  {padding-top:30px;}
.pt60  {padding-top:60px;}
.pt90  {padding-top:90px;}
.pt120 {padding-top:120px;}

.pb0   {padding-bottom:0px !important}
.pb15  {padding-bottom:15px;}
.pb30  {padding-bottom:30px;}
.pb60  {padding-bottom:60px;}
.pb90  {padding-bottom:90px;}
.pb120 {padding-bottom:120px;}

.mb0  {margin-bottom:0px !important;}
.mb15  {margin-bottom:15px;}
.mb30  {margin-bottom:30px;}
.mb60  {margin-bottom:60px;}
.mb120 {margin-bottom:120px;}
.mb150 {margin-bottom:150px;}

.mt0  {margin-top:0px !important;}
.mt15  {margin-top:15px;}
.mt30  {margin-top:30px;}
.mt20  {margin-top:20px;}
.mt60  {margin-top:60px;}
.mt120 {margin-top:120px;}
.mt150 {margin-top:150px;}

.bdt{border-top:15px solid var(--c4);}
.bdr{border-right:15px solid var(--c4);}
.bdb{border-bottom:15px solid var(--c4);}
.bdl{border-left:15px solid var(--c4);}

.fr {float:right;}
.fl {float:left;}

.rfx {position:relative;left:-3px;}
.lfx {position:relative;right:5px;}

.ni {text-indent: 0px;}

.fw100{font-weight:100;}
.fw200{font-weight:200;}
.fw300{font-weight:300;}
.fw400{font-weight:400;}
.fw500{font-weight:500;}
.fw600{font-weight:600;}
.fw700{font-weight:700;}
.fw800{font-weight:800;}
.fw900{font-weight:900;}

.fs10 {font-size:10px;}
.fs11 {font-size:11px;}
.fs12 {font-size:12px;}
.fs13 {font-size:13px;}
.fs14 {font-size:14px;}
.fs15 {font-size:15px;}
.fs16 {font-size:16px;}

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

body{
    overflow-x:hidden;
    font-family: 'Comfortaa', cursive;
    background:var(--c5) !important;
}

body, nav, .col{
    margin:0px !important;
    padding:0 !important;
}

footer{
    font-size:12px;
}

footer a{
    letter-spacing: 0px;;
    color:var(--c5);
}

footer a:hover{
    color:var(--c5);
    text-decoration:none;
    letter-spacing: 1px;
}

footer icon{
    color:var(--c5);
    padding:0px 2px;
}

.nav-icon {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--c1);
    background-color: var(--c5);
    border-radius: 50%; /* */
    border: none !important;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 99;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
    width:50px;
    height:50px;
}

.top-icon {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-size: 1.7rem;
    line-height: 1;
    color: var(--c1);
    background-color: var(--c5);
    border-radius: 50%; /* */
    border: none !important;
    position: fixed;
    bottom: 15px;
    right: 15px;
    z-index: 99;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .2);
    width:50px;
    height:50px;
}

.menu-close {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    font-size: 1.9rem;
    line-height: 1;
    color: var(--c1) !important;
    /*background-color: var(--c5);*/
    /* border-radius: 50%; */
    border: none !important;
    position: fixed;
    bottom: 15px;
    left: 15px;
    z-index: 99;
}

.top-icon a, .menu-close a{
    color:var(--c1);
    text-decoration: none;
}

.lang-icon
{
    cursor: pointer;
    display: flex;
    width:50px;
    align-items: center;
    justify-content: center;
    padding: 14px 29px;
    background-color: var(--c5);
    position: fixed;
    top: 15px;
    right: 15px;
    z-index: 99;
    border-radius:50%;
}

#menu2 .nav
{
    display: none;
    text-align: center;
    font-size: 1.5rem;
    background-color: color-mix(in srgb, var(--c5) 95%, transparent);
    position: fixed;
    top: 0px;
    right: 0px;
    z-index: 90;
    width: 100vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#menu2 .nav li a
{
    padding-right:0px;
}

.navbar
{
    z-index:99;
    min-height:150px;
    font-family: 'Roboto Slab', sans-serif;
    position:fixed;
    width:100%;
    /*border-top:15px solid var(--c4);*/
    align-items: center;
    justify-content: center;
}

.rA
{
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;   
    margin: 20px 0px;
}

.nav-logo
{
    height:200px;
    margin-bottom:0px;
    position:fixed;
    transform:translateX(-50%);
   /*top:-1px;*/
   /* position:fixed;
   bottom:20px;
   left:20px; */
    z-index:99;
}

.topSection
{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: flex-start;
    /*margin-bottom:-200px;*/
}

nav{
    font-weight:bold;
    font-size:14px;
}

.nav li a{
    transition: all ease-in 0.3s;
    display: inline-block;
    padding:0px;
    color:var(--c1);
    font-weight:200;
}

.nav li a:hover{
    transition: all ease-out 0.3s;
    letter-spacing:2px;
    font-weight:500;
    /*color:var(--c2);*/
}

.nav-item
{
    margin:15px 0px;
}

.slide
{
    overflow: hidden;
    width: 90%;
    border-bottom-left-radius: var(--stories-radius);
    border-bottom-right-radius: var(--stories-radius);
    margin-top: 0px;

}

.carousel1
{
    border:0px solid var(--c5);
    /*width:fit-content !important;*/
}

.carousel2
{
    height:auto;
    width:90%;
    overflow:hidden;
    box-shadow: var(--stories-shadow);
}

.room{
    transition: all ease-in-out 0.4s;
    width: 230px;
    height: 230px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    
    box-shadow: 
        0px 0px 30px rgba(0,0,0,.3), 
        0px 0px 0px 200px inset color-mix(in srgb, var(--c5) 0%, transparent);
    color: var(--c5);
    /* border: 8px solid var(--c4); */
    border-radius: var(--stories-radius);
    margin: 0px 20px;
}

.room:hover{
    cursor:pointer;
    color: color-mix(in srgb, var(--c5) 0%, transparent);
    box-shadow: 
        0px 0px 30px rgba(0,0,0,.3),
        0px 0px 0px 200px inset color-mix(in srgb, var(--c1) 70%, transparent);
}

.room2 {
    transition: all ease-in-out 0.4s;
    width:350px;
    height:350px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0px 0px 30px rgba(0,0,0,.3), 
        0px 0px 0px 200px inset color-mix(in srgb, var(--c5) 0%, transparent);
    color: var(--c5);
    /* border: 8px solid var(--c4); */
    border-radius: var(--stories-radius);
    margin: 20px;
}

.room2:hover
{
    box-shadow: 
        0px 0px 30px rgba(0,0,0,.3),
        0px 0px 0px 200px inset color-mix(in srgb, var(--c1) 70%, transparent);
}

.roomInfo
{
    transition: all ease-in-out 0.4s;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--c5);
    background-color:var(--c1);
    /* border: 8px solid var(--c4); */
    border-radius: var(--stories-radius);
    margin-top:-100px;
    /*margin: 0px 20px;*/
    font-family:'Josefin Sans','Comfortaa';
    font-size:18px;
    margin-bottom:50px;
}

.r2H {
    display: flex
;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-evenly;
    align-items: center;
    margin: 300px 0px;
    /* padding-left: 50px; */
}

.r5
{
    width: 300px;
    height: 500px;
    /*box-shadow:none;
    /*padding-top:100%;*/
}

.rooms
{
    position:relative;
    left:0px;
    margin-top:15px;
}

.rmNum
{
    font-size:15vh;
    font-weight: 900;
    font-family: 'Josefin Sans',sans-serif;
}

.rn2
{
    font-size:3vh;
        position: relative;
    top: 40%;
}

a{
    transition: all ease-in-out 0.4s;
    letter-spacing: 1px;
    text-decoration: none;
}

section a:hover{
    transition: all ease-in-out 0.4s;
    letter-spacing: 2px;
    text-decoration: none;
}

section
{
    /*margin-top:150px;*/
}

.big
{
    padding-top:100px;
    height:100vh;
    width:100%;
    background-image: url(../img/big.jpg);
    background-size: cover;
    background-position:center;
}

h1{
    color: var(--c3);
    font-size:8vh;
    font-weight: bold;
    text-align: center;
    font-family: 'roboto Slab', serif;
}

h2{
    color: var(--c3);
    font-size:7vh;
    font-weight: 500;
    font-family: 'Noto Serif Display','Roboto Slab',serif;
}

h3{
    font-size:1.8rem;
    font-family: 'Roboto Slab', serif;
    font-weight: 200 !important;
}

h4
{
    color: var(--c3);
    font-weight: bold;
    font-family: 'Comfortaa', sans-serif;
    font-size: 1.3rem;
}

h5
{
    font-family: 'Josefin Sans','Comfortaa', sans-serif;
    font-size: 1.6rem;
    margin-top: 25px;
}

.hdr
{
    margin-top:0px;
    margin-bottom:80px;
}

h1 span{
    font-weight:100;
}

.h3-sl
{
    border-bottom:5px solid var(--c2);
    margin-bottom:10px !important;
    padding-bottom:10px !important;
    display:inline-block;
}

.h1-lt-proj{
    width:100vw;
    margin-right:-100vw;
}

.h1-sec
{
    height:120px;
    border-bottom:20px solid var(--c2);
    margin-bottom:50px;
}

.h3-lt-proj
{
    height:30px;
    border-bottom:10px solid color-mix(in srgb, var(--c2) 50%, transparent);
    margin-bottom:10px;
}

.type
{
    width:80vw;
    display:none;
}

.cal
{
    padding-top:100px;
    font-family: 'petit';
    font-size:42px;
    line-height: 52px;
}

.cal p{
    text-indent: 0px;
    text-align: center;
}

.sep{
    height:250px !important;
    margin-left:150px !important;
    margin-top:100px;
}

.rt
{
    transform: rotate(180deg);
    margin-left:-150px !important;
}

.trip
{
    min-height:50vh;
}

.pb150
{
    padding-bottom:150px;
}

.inv
{
    text-align: center !important;
    font-size:26px;
    line-height:50px;
}

.flex-center
{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    flex-wrap: wrap;
}

.nh
{
    height:auto !important;
    min-height:auto !important;
}

.h50
{
    min-height:50vh !important;
}

.serv-holder
{
    width: 300px;
    text-align: center;
    margin:30px 50px;
}

.hotel-info
{
    font-family:'Comfortaa', cursive;
    font-size:18px;
    margin:50px;
    width: 50vw;
    line-height: 2vw;
}

#map
{
    width:95% !important;
    min-height: 80vh;
    position:relative;
    left:50px;
    box-shadow: var(--stories-shadow);
}

.button
{
    font-family:'Comfortaa','Roboto Slab', sans-serif;
    padding:15px 20px;
    border-radius: var(--stories-radius);
    cursor:pointer;
    font-weight:500;
}

.b2{
    background:var(--c5);
    color: var(--c1);
    border:1px solid var(--c1);
    font-weight: 500;
    border-radius: 50px;
    margin: 0px 30px
}

.b2:hover{
    
    background:var(--c1) !important;
    color: var(--c5) !important;
    letter-spacing: 0px;
}

.bic
{
    margin-right:10px;
}

.vis .button{
    display:block;
    border:0px solid var(--c4);
    border-radius: var(--stories-radius);
    color:var(--c4);
}

.button:hover
{
    letter-spacing:1px;
    background:var(--c4);
    color:var(--c5);
    zoom: 1;
}

.location .button
{
    flex-grow: 1;
}

.h360
{
    padding: 200px;
    background-color: color-mix(in srgb, var(--c3) 25%, var(--c5));
    margin: 0px;
    padding-bottom:350px;
}

.h360r
{
    padding: 200px;
    background-color: var(--c1);
    margin: 0px;
}

.rot{
    /*transform: rotate(180deg);*/
    margin-top:-171px;
}

.rtd{
    transform: rotate(180deg);
}

.v360{
    border-radius: var(--stories-radius);
    border: 8px solid var(--c5);
    box-shadow: 0px 0px 4px 3px color-mix(in srgb, var(--c4) 5%, transparent);
}

.serv-holder div
{
    line-height: 1.5vw;
}

.sl-info
{
    color:var(--c3);
    font-size:12px;
}

.home
{
    background:var(--c5);
    position:relative;
}

.lt-proj-inf{
    font-size:12px;
}

p{
    text-indent: 40px;
    text-align: justify;
}

b{
    font-weight: 900;;
}

.services svg{
    fill: var(--c2);
    margin-bottom:30px;
}

.bull{
    /*color:var(--c2);*/
    padding:0px 10px;
}

.langs {
    background: var(--c4);
    padding: 20px 40px;
    border-radius: 20px 20px 0px 0px; /* multi-value kept */
    position: fixed;
    bottom: 0px;
    padding-bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    zoom: 0.5;
    margin-bottom: 0px;
    border-collapse: separate;
}

.lim {
    transition: all ease-in-out 0.2s;
    cursor: pointer;
    width: 30px;
    height: 30px;
}

.lgr
{
    display:none;
}

.lim:hover, .limc {
    transition: all ease-in-out 0.2s;
    box-shadow: inset 0px 0px 0px 0px var(--c2) !important;
}


.linf {
    font-size: 8px;
    color: color-mix(in srgb, var(--c3) 60%, var(--c5));
    letter-spacing: 1px;
    text-align: center;
}

.sep2
{
    width:50%;
    height:4px;
    display:inline-block;
}

.hi p{
    /*text-align:left !important;*/
    text-indent: 0px !important;
}

.facilityGroupIcon
{
    position:relative;
    top:-2px;
    left:-2px;
    margin-right:10px;
    display:none;
}

.vis{
    display:flex;
    flex-direction:column;
}

.vis .button
{
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 60px;
    font-weight: 500;
    border-radius:50px; /* >40px kept as-is */
}

.vis .button .fw200
{
    margin-left:20px;
}

.bigOverlay
{
    background:var(--c5);
    position:relative;
    z-index:99;
    padding-top:150px;
}

.br20
{
    border-radius: var(--stories-radius);
}

.imB
{
    position:relative;
    right:-20px;
}

.imL
{
    position:relative;
    left:-20px;

}

.dAm
{
    margin-bottom:15px;
}

.dAmb
{

}

@media (max-width: 1185px) {       
    .slide, .carousel-inner, .carousel-item {
        height:80vh;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    .carousel-item img{
        width:auto !important;
        height:100% !important;
    }

}

/* wrapper / scroller */
.stories{ position: relative; padding: 10px 0; }
.stories-viewport{
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.stories-viewport::-webkit-scrollbar{ display:none; }
.stories-track{
  display: flex; gap: var(--stories-gap);
  padding: 20px 10px; margin: 0; list-style: none;
}

/* cards per viewport */
.story{ flex: 0 0 45%; scroll-snap-align: center; }
@media (max-width:1200px){ .story{ flex-basis: 60%; } }
@media (max-width:768px){  .story{ flex-basis: 85%; } }

/* card */
.story-inner{
  position: relative; aspect-ratio: 9/16;
  background: #d7d7d7; border-radius: var(--stories-radius);
  box-shadow: var(--stories-shadow);
  overflow: hidden;
  transform: scale(var(--stories-scale-inactive));
  transform-origin: center center;
  transition: transform var(--stories-anim), box-shadow var(--stories-anim), opacity var(--stories-anim);
}
.story.active{ z-index: 2; }
.story.active .story-inner{
  transform: scale(var(--stories-scale-active));
  box-shadow: var(--shadow-strong);
}

/* video (HIDDEN until playing) */
.story-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 1;                           /* was 0 */
  will-change: transform, opacity; backface-visibility: hidden; transform: translateZ(0);
}
.story-inner.playing .story-video{ opacity: 1; }

/* your button style + safe additions (unchanged design) */
.play-btn{
  position: absolute;
  left: 50%;
  top: 90%;
  transform: translate(-50%, -50%);
  width: 75px;
  height: 75px;
  border-radius: 50%;
  border: 2px solid var(--c5);
  background: var(--c5);
  color: var(--c1);
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0px 25px rgba(0, 0, 0, .5);
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;

  appearance: none; -webkit-appearance: none;
  outline: none; -webkit-tap-highlight-color: transparent;
}
.play-btn::-moz-focus-inner{ border:0; padding:0; }
/* keep visible during playback so it can pause */
.story-inner.playing .play-btn{ opacity: 1; }

/* arrows (buttons contain <icon> children) */
.stories-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid var(--c1);
    background: var(--c1);
    color: var(--c5);
    font-size: 26px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}
.stories-arrow.prev{ left: var(--stories-arrow-offset); }
.stories-arrow.next{ right: var(--stories-arrow-offset); right:30px}
@media (max-width:992px){
  .stories-arrow{ width: 48px; height: 48px; font-size: 22px; border-width: 5px; }
  .stories-arrow.prev{ left: 5px; } .stories-arrow.next{ right: 5px; }
}

/* scrubber (HIDDEN until playing) */
.scrubber{
  position: absolute; left: 50%; bottom: 16px;
  transform: translateX(-50%);
  width: 76%; height: 24px; cursor: pointer;

  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
.story-inner.playing .scrubber{ opacity: 1; pointer-events: auto; }

.scrub-track{
  position: absolute; left: 0; right: 0; top: 50%;
  transform: translateY(-50%);
  height: 4px; border-radius: 999px;
  background: rgba(255,255,255,.55);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.scrub-fill{
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0%; border-radius: 999px;
  background: var(--carousel-accent);
}
.scrub-thumb{
  position: absolute; top: 50%;
  width: 14px; height: 14px; border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--c5);
  box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 0 0 3px var(--carousel-accent);
}

.row
{
    align-items: center;
}

a.hid-a {
    display: none;
}

/* Zoomed-in background that zooms OUT on hover/focus
   Works on any element with a background-image */
.bg-zoom-out {
  --zoom: 1.2;                           /* 20% zoom-in by default */
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto calc(100% * var(--zoom));  /* height = 120% */
  transition: transform 0.4s ease-in-out,
                box-shadow 0.8s ease-in-out,
                background-size 1500ms ease;
  will-change: background-size;
}

.flow-zoom
{
   
}

.flow-zoom:hover
{
    transition: transform 0.4s ease-in-out,
                box-shadow 0.8s ease-in-out,
                background-size 1500ms ease;
    transform: scale(1.2);
}

/* on hover/focus go back to 100% (zoom out effect) */
.bg-zoom-out:hover,
.bg-zoom-out:focus-within {
  background-size: auto 100%;
}

/* optional: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bg-zoom-out { transition: none; }
}

h2 span {
    margin: 15px 0px;
    display: inline-block;
}

/* Stick-to-cursor core */
.stick-to-cursor{
  /* modern path: independent translate so it won’t clobber your transform */
  translate: var(--tx, 0) var(--ty, 0);
  will-change: translate;
}

/* Fallback for older browsers without the 'translate' property */
@supports not (translate: 0){
  .stick-to-cursor{
    transform: translate3d(var(--tx,0), var(--ty,0), 0);
    will-change: transform;
  }
}

/* Optional: raise while stuck */
.stick-to-cursor.is-stuck{ z-index: 95; }

/* Floating utility — gentle random drift */
.floaty{
  /* per-element tweaks (optional) */
  --float-amp: 10;    /* movement radius in px */
  --float-rot: 1;     /* tilt in deg */
  --float-speed: 0.5;   /* base speed multiplier */
  will-change: translate, rotate, transform;
}

/* Fallback path (older browsers): we'll feed these vars from JS */
@supports not (translate: 0 0){
  .floaty{
    transform: var(--float-base, none)
               translate(var(--dx, 0), var(--dy, 0))
               rotate(var(--rot, 0));
    will-change: transform;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .floaty{ /* stop the effect entirely */
    translate: 0 0 !important;
    rotate: 0deg !important;
    transform: none !important;
  }
}

/* small helper used by the language logic */
.lang-hidden { display: none !important; }

/* Top-right language switcher */
.lang-switch{
  --size: 56px;               /* bubble size */
  --gap: 76px;                /* how far options fly out when OPEN */
  --tease: .20;               /* fraction of gap used on hover tease */
  --ring: 6px;                /* white ring thickness */
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 120;
  width: var(--size);
  height: var(--size);
}

.lang-switch .lang-bubble{
  position: absolute; inset: 0;
  width: var(--size); height: var(--size);
  border-radius: 50%;
  border: var(--ring) solid var(--c5);
  background: var(--c5);
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
  display: grid; place-items: center;
  cursor: pointer;
  transition:
    transform 320ms cubic-bezier(.2,.8,.2,1),
    opacity   240ms ease,
    box-shadow 240ms ease;
}
.lang-switch .lang-bubble img{
  width: 62%; height: 62%; object-fit: contain; pointer-events: none;
}

#langCurrent
{
    z-index: 130;
}

#langCurrent img
{
    width: 85%; height: 85%;
}

/* Options start stacked under the current bubble */
.lang-switch .option{
  opacity: 0; transform: translate(0,0) scale(.6);
  pointer-events: none;
}

/* ---------- “Tease” on hover (not open yet) ----------
   We nudge the three options slightly:
   1st option: left
   2nd option: down-left
   3rd option: straight down
   Because we’re at the TOP-RIGHT, moving left/down keeps them on-screen. */
.lang-switch:hover:not(.open) .option{
  opacity: .85;
}
.lang-switch:hover:not(.open) .option:nth-of-type(2){
  transform: translate(calc(-1 * var(--gap) * var(--tease)), 0) scale(.9);
}
.lang-switch:hover:not(.open) .option:nth-of-type(3){
  transform: translate(calc(-0.72 * var(--gap) * var(--tease)), calc(0.72 * var(--gap) * var(--tease))) scale(.9);
}
.lang-switch:hover:not(.open) .option:nth-of-type(4){
  transform: translate(0, calc(var(--gap) * var(--tease))) scale(.9);
}

/* ---------- Fully open on click ---------- */
.lang-switch.open .option{
  opacity: 1; pointer-events: auto; transform: scale(1);
}
.lang-switch.open .option:nth-of-type(2){
  transform: translate(calc(-1 * var(--gap)), 0) scale(1);
}
.lang-switch.open .option:nth-of-type(3){
  transform: translate(calc(-0.72 * var(--gap)), calc(0.72 * var(--gap))) scale(1);
}
.lang-switch.open .option:nth-of-type(4){
  transform: translate(0, var(--gap)) scale(1);
}

/* Small hover pop on any bubble */
.lang-switch .lang-bubble:hover{
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  transform: translateZ(0) scale(1.04);
}

/* Mobile sizes */
@media (max-width: 640px){
  .lang-switch{ --size: 50px; --gap: 68px; --ring: 5px; }
}

@media only screen and (max-width: 767px) and (orientation: portrait) {
  /* Mobile portrait styles */

  #carouselId{
    margin:0px auto;
  }

  .p120{
    padding:40px;
  }

  .br20{
    border-radius: 20px !important;
  }

  .room{
    margin-top:0px !important;
  }

  .r5{
    height:300px;
  }

  #map
  {
      left:0px;
  }

  #contact h2{
    font-size:2rem !important;
  }

  .end-btns{
    padding:0px;
  }

 footer .bull{
    display:block;
  }

}