@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=Caveat&display=swap");



.handwriting {

  font-family: "Caveat", cursive;

  font-weight: 400;

}



body.no-scroll{

  overflow: hidden;

}



html {

  font-family: "Instrument Sans", sans-serif;

  font-optical-sizing: auto;

  font-size: 14px;

  background: white;

}



body.hide-talk .widget-visible {

  display: none !important;

  opacity: 0 !important;

}



.widget-visible {

  display: block !important;

  opacity: 1 !important;

  transition: all 0.3s ease-in-out;

}



.corn{

  backdrop-filter: blur(7px);

  -webkit-backdrop-filter: blur(7px);

}



.corn:before {

    pointer-events: none;

    content: "";

    position: absolute;

    border-radius: inherit;

    background: linear-gradient(rgb(0 0 0 / 10%) 0%, rgb(178 178 178) 41.5%, rgb(0 0 0 / 10%) 100%) border-box;

    border: 1px solid #0000;

    grid-area: 1 / 1;

    width: calc(100% + 2px);

    height: 100%;

    margin: 0 -2px;

    -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);

    mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);

    -webkit-mask-position: 0 0, 0 0;

    mask-position: 0 0, 0 0;

    -webkit-mask-size: auto, auto;

    mask-size: auto, auto;

    -webkit-mask-repeat: repeat, repeat;

    mask-repeat: repeat, repeat;

    -webkit-mask-clip: padding-box, border-box;

    mask-clip: padding-box, border-box;

    -webkit-mask-origin: padding-box, border-box;

    mask-origin: padding-box, border-box;

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    -webkit-mask-source-type: auto,auto;

    mask-mode: match-source, match-source;

}



.grid-cols-24 {

  grid-template-columns: repeat(23, minmax(0, 1fr));

}



.col-span-13 {

  grid-column: span 13 / span 13;

}



.col-span-14 {

  grid-column: span 14 / span 14;

}



.col-span-15 {

  grid-column: span 15 / span 15;

}



.col-span-16 {

  grid-column: span 16 / span 16;

}



.col-span-17 {

  grid-column: span 17 / span 17;

}



.col-span-18 {

  grid-column: span 18 / span 18;

}



.col-span-19 {

  grid-column: span 19 / span 19;

}



.col-span-20 {

  grid-column: span 20 / span 20;

}



.col-span-21 {

  grid-column: span 21 / span 21;

}



.col-span-22 {

  grid-column: span 22 / span 22;

}



.col-span-23 {

  grid-column: span 23 / span 23;

}



.col-span-24 {

  grid-column: span 24 / span 24;

}



.col-start-13 {

  grid-column-start: 13;

}

.col-start-14 {

  grid-column-start: 14;

}

.col-start-15 {

  grid-column-start: 15;

}

.col-start-16 {

  grid-column-start: 16;

}

.col-start-17 {

  grid-column-start: 17;

}

.col-start-18 {

  grid-column-start: 18;

}

.col-start-19 {

  grid-column-start: 19;

}

.col-start-20 {

  grid-column-start: 20;

}

.col-start-21 {

  grid-column-start: 21;

}

.col-start-22 {

  grid-column-start: 22;

}

.col-start-23 {

  grid-column-start: 23;

}

.col-start-24 {

  grid-column-start: 24;

}

.col-end-13 {

  grid-column-end: 13;

}

.col-end-14 {

  grid-column-end: 14;

}

.col-end-15 {

  grid-column-end: 15;

}

.col-end-16 {

  grid-column-end: 16;

}

.col-end-17 {

  grid-column-end: 17;

}

.col-end-18 {

  grid-column-end: 18;

}

.col-end-19 {

  grid-column-end: 19;

}

.col-end-20 {

  grid-column-end: 20;

}

.col-end-21 {

  grid-column-end: 21;

}

.col-end-22 {

  grid-column-end: 22;

}

.col-end-23 {

  grid-column-end: 23;

}

.col-end-24 {

  grid-column-end: 24;

}

.row-start-13 {

  grid-row-start: 13;

}

.row-start-14 {

  grid-row-start: 14;

}

.row-start-15 {

  grid-row-start: 15;

}

.row-start-16 {

  grid-row-start: 16;

}

.row-start-17 {

  grid-row-start: 17;

}

.row-start-18 {

  grid-row-start: 18;

}

.row-start-19 {

  grid-row-start: 19;

}

.row-start-20 {

  grid-row-start: 20;

}

.row-start-21 {

  grid-row-start: 21;

}

.row-start-22 {

  grid-row-start: 22;

}

.row-start-23 {

  grid-row-start: 23;

}

.row-start-24 {

  grid-row-start: 24;

}



.mobile-image {

  display: none;

}



@media (min-width: 768px) {

  html {

    font-size: 16px;

  }

}



.splide__slide{

    width: 60% !important;

    margin-right: 20px;

}

.splide__pagination{

    display:none;

}

.splide__arrows{

    top: -40px;

    position: absolute;

    left: 0;

    right: 0;

    display: flex;

    gap: 10px;

    padding-right: 5rem;

    justify-content: flex-end;

}

.splide__pagination {

    bottom: -40px!important;

    left: 0;

    padding: 0 1em;

    position: absolute;

    right: 0;

    z-index: 1;

}



.splide__pagination__page {

    background: #c0c0c0!important;

    border: 0;

    border-radius: 4px!important;

    display: inline-block;

    height: 4px!important;

    margin: 3px;

    opacity: .7;

    padding: 0;

    position: relative;

    transition: transform .2s linear;

    width: 20px!important;

}



.splide__pagination__page.is-active {

    background: #000000!important;

    transform: scale(1)!important;

    z-index: 1;

}



.footer-accordion-content {

    border-top: none;

    display: none;

}



.active .footer-accordion-header .vert {

    opacity: 0;

    transition: all 0.2s ease-in-out;

}



.mobile-accordion-content {

    border-top: none;

    display: none;

}



.active .mobile-accordion-header .vert {

    opacity: 0;

    transition: all 0.2s ease-in-out;

}



.footer-accordion-content ul li {

    padding-top: 5px;

    padding-bottom: 5px;

    color: #b6b6b6;

}



.mobile-accordion-content ul li {

    padding-top: 5px;

    padding-bottom: 5px;

    color: rgb(92, 92, 92);

    font-weight: 500;

    font-size: 16px;

}



.hgj li {

    padding-top: 5px;

    padding-bottom: 5px;

    color: rgb(0, 0, 0);

    font-weight: 500;

    font-size: 16px;

}



.h-font{

  font-family: Europa-Grotesk;

  letter-spacing: 0.5px;

}



.gradient-blur {

  position: fixed;

  z-index: 1000;

  inset: auto 0 0 0;

  height: 150px;

  pointer-events: none;

}

.gradient-blur > div,

.gradient-blur::before,

.gradient-blur::after {

  position: absolute;

  inset: 0;

}

.gradient-blur::before {

  content: "";

  z-index: 1;

  backdrop-filter: blur(0.5px);

  mask: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 0%,

    rgba(0, 0, 0, 1) 12.5%,

    rgba(0, 0, 0, 1) 25%,

    rgba(0, 0, 0, 0) 37.5%

  );

}

.gradient-blur > div:nth-of-type(1) {

  z-index: 2;

  backdrop-filter: blur(1px);

  mask: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 12.5%,

    rgba(0, 0, 0, 1) 25%,

    rgba(0, 0, 0, 1) 37.5%,

    rgba(0, 0, 0, 0) 50%

  );

}

.gradient-blur > div:nth-of-type(2) {

  z-index: 3;

  backdrop-filter: blur(2px);

  mask: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 25%,

    rgba(0, 0, 0, 1) 37.5%,

    rgba(0, 0, 0, 1) 50%,

    rgba(0, 0, 0, 0) 62.5%

  );

}

.gradient-blur > div:nth-of-type(3) {

  z-index: 4;

  backdrop-filter: blur(4px);

  mask: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 37.5%,

    rgba(0, 0, 0, 1) 50%,

    rgba(0, 0, 0, 1) 62.5%,

    rgba(0, 0, 0, 0) 75%

  );

}

.gradient-blur > div:nth-of-type(4) {

  z-index: 5;

  backdrop-filter: blur(8px);

  mask: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 50%,

    rgba(0, 0, 0, 1) 62.5%,

    rgba(0, 0, 0, 1) 75%,

    rgba(0, 0, 0, 0) 87.5%

  );

}

.gradient-blur > div:nth-of-type(5) {

  z-index: 6;

  backdrop-filter: blur(16px);

  mask: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 62.5%,

    rgba(0, 0, 0, 1) 75%,

    rgba(0, 0, 0, 1) 87.5%,

    rgba(0, 0, 0, 0) 100%

  );

}

.gradient-blur > div:nth-of-type(6) {

  z-index: 7;

  backdrop-filter: blur(32px);

  mask: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 75%,

    rgba(0, 0, 0, 1) 87.5%,

    rgba(0, 0, 0, 1) 100%

  );

}

.gradient-blur::after {

  content: "";

  z-index: 8;

  backdrop-filter: blur(64px);

  mask: linear-gradient(

    to bottom,

    rgba(0, 0, 0, 0) 87.5%,

    rgba(0, 0, 0, 1) 100%

  );

}



.gradient-blur > div, .gradient-blur::after, .gradient-blur::before{

  opacity: 0;

  transition: all 0.4s ease-in-out;

}



.gradient-blur.active > div, .gradient-blur.active::after, .gradient-blur.active::before{

  opacity: 1;

}



.gradient-blur.no-show-blur > div, .gradient-blur.no-show-blur::after, .gradient-blur.no-show-blur::before{

  opacity: 0!important;

}



@font-face {

  font-family: Ogg roman;

  src: url(../fonts/Ogg-Roman.otf) format("opentype");

  font-weight: 300;

  font-style: normal;

  font-display: swap;

}



@font-face {

  font-display: swap;

  font-family: SuisseIntl;

  font-style: normal;

  font-weight: 300;

  src:

    url(../fonts/SuisseIntl-Light.woff2) format("woff2"),

    url(../fonts/SuisseIntl-Light.woff) format("woff");

}



.heading-old {

  font-family: SuisseIntl;

  font-style: normal;

  font-weight: 300;

  src:

    url(../fonts/SuisseIntl-Light.woff2) format("woff2"),

    url(../fonts/SuisseIntl-Light.woff) format("woff");

}



@font-face {

  font-family: "Europa-Grotesk";

  src:

    local("Europa-Grotesk"),

    url(../fonts/Europa-Grotesk-No2-Medium-B7a8PlH0.woff2) format("woff2"),

    url(../fonts/Europa-Grotesk-No2-Medium-DmlPdpyd.woff) format("woff");

}





.heading {

  font-family: "Europa-Grotesk";

  font-weight: 400;

  font-style: normal;

  font-display: swap;

  font-size: 3.5rem;

  line-height: 65px;

  letter-spacing: 0px;

}



.heading-2 {

  font-family: "Europa-Grotesk";

  font-weight: 400;

  font-style: normal;

  font-display: swap;

  font-size: 2.5rem;

  line-height: 47px;

  letter-spacing: 0px;

}



.heading-3 {

  font-family: "Europa-Grotesk";

  font-weight: 400;

  font-style: normal;

  font-display: swap;

  font-size: 1.8rem;

  line-height: 47px;

  letter-spacing: 0chpx;

}



.btn:focus,

.btn:active:focus,

.btn-link.nav-link:focus,

.form-control:focus,

.form-check-input:focus {

  box-shadow:

    0 0 0 0.1rem white,

    0 0 0 0.25rem #258cfb;

}



.my-shadow {

  box-shadow:

    25px 25px 50px #c7cacf,

    -25px -25px 50px #ffffff;

}



.phone-shadow{

    box-shadow:

    25px 25px 50px #c7cacf,

    -25px -25px 50px #ffffff;

      border-radius: 50px;

    scale: 0.95 0.99;

    z-index: 0;

}



.poweroffimg{

  opacity: 0;

  transition: all 0.5s ease-in-out;

}



.on .poweroffimg{

  opacity: 1;

}



range-slider {

  --track-size: 0.4rem;

  --thumb-size: 1.4rem;

}



range-slider:not([orientation="vertical"]) {

  inline-size: 100%;

}



range-slider [data-thumb]:has(.value-bubble) {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  transition: transform 200ms ease;

  will-change: transform;

}



range-slider [data-thumb] .value-bubble {

  --width: 30px;

  --height: 60px;



  box-sizing: border-box;

  position: absolute;

  padding-block-start: 0.8em;

  margin-block-end: 0.5em;

  width: var(--width);

  height: var(--height);

  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="62" fill="none"><path fill="currentColor" d="M27.3 27.3C25 29.6 17 35.8 17 43v3c0 3 2.5 5 3.2 5.8a6 6 0 1 1-8.5 0C12.6 51 15 49 15 46v-3c0-7.2-8-13.4-10.3-15.7A16 16 0 0 1 16 0a16 16 0 0 1 11.3 27.3z"/><circle cx="16" cy="56" r="1" fill="%235D509E"/></svg>');

  background-repeat: no-repeat;

  background-position: center;

  background-size: var(--width) var(--height);

  color: white;

  text-align: center;

  font-size: 0.7em;

  font-weight: 400;

  text-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.4);

  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));

  transition: opacity 200ms ease;

  user-select: none;

  pointer-events: none; 

}



range-slider:active [data-thumb] {

  transform: scale(1.5);

}





#power .overlay {

    background: linear-gradient(149deg, rgb(0 0 0 / 73%), rgb(0 0 0 / 16%), transparent, transparent);

    height: 100%;

    width: 100%;

    top: 0px;

    position: absolute;

    opacity: 1;

    z-index: 0;

}



#power-button svg{

  transition: all 0.5s ease-in-out;

  fill: rgb(225 46 46);

}



.on #power-button svg{

  fill:rgb(9, 9, 9);

}



html {

  position: relative;

  min-height: 100%;

}



#cta {

  display: none;

}



#cta.show {

  display: flex;

}



/* body {

  font-family: SuisseIntl;

    font-style: normal;

    font-weight: 300;

    src: url(../fonts/SuisseIntl-Light.woff2) format("woff2"), url(../fonts/SuisseIntl-Light.woff) format("woff");

  font-size: 18px;

} */



 html {

  overscroll-behavior: none;

}



body {

  font-family: "Instrument Sans", sans-serif;

  font-optical-sizing: auto;

  font-size: 14px;

  background: white;

}



.preloader__shades {

  display: flex;

}



.preloader__fade-bg {

  background-color: #000;

  height: 100vh;

  inset: 0;

  opacity: 0;

  pointer-events: none;

  width: 100%;

  z-index: 1000;

}



.preloader__logo {

  position: relative;

  width: 100vw;

  height: 100vh;

  display: flex;

  z-index: 10;

  justify-content: center;

}



.preloader__logo .logo {

  width: 370px;

  height: auto;

}



.preloader__logo .logoj {

  width: 370px;

  height: auto;

  opacity: 0;

  transition-property: all;

  transition-duration: 0.3s;

  transition-timing-function: ease-in-out;

  transition-delay: 0.7s;

  -webkit-transition-delay: 0.7s;

}



.preloader {

  position: fixed;

  width: 100%;

  height: 100%;

  z-index: 2000;

  visibility: hidden;

}

.preloader_bg {

  position: fixed;

  width: 100%;

  height: 100%;

  z-index: 2000;

  background: #000;

}



.preloader.start {

  visibility: visible;

}



.start .preloader__shades .preloader__shade {

  transition-duration: 0s !important;

  -webkit-transition-duration: 0s !important;

  height: 100vh;

  visibility: visible;

}



.start .preloader__logo .logoj {

  transition-duration: 0s !important;

  -webkit-transition-duration: 0s !important;

  opacity: 1;

}



.preloader.active {

  visibility: visible;

}

.preloader__shade {

  transform: scaleX(1);

  height: 0;

}



.preloader__fade-bg,

.preloader__shades {

  bottom: 0;

  left: 0;

  position: fixed;

  right: 0;

  top: 0;

}



.preloader__shades .preloader__shade {

  width: 6.66667vw;

  background-color: black;

  transition-property: all;

  transition-duration: 0.6s;

  transition-timing-function: ease-in-out;

  visibility: hidden;

}



.active .preloader__shade {

  height: 100vh;

  transform: scaleX(1);

  visibility: visible;

}



.active .preloader__logo .logoj {

  opacity: 1;

}



.preloader__shade:nth-child(1) {

  transition-delay: 0s;

  -webkit-transition-delay: 0s;

}



.preloader__shade:nth-child(2) {

  transition-delay: 100ms;

  -webkit-transition-delay: 100ms;

}

.preloader__shade:nth-child(3) {

  transition-delay: 200ms;

  -webkit-transition-delay: 200ms;

}

.active .preloader__shade:nth-child(4) {

  transition-delay: 300ms;

  -webkit-transition-delay: 300ms;

}

.active .preloader__shade:nth-child(5) {

  transition-delay: 350ms;

  -webkit-transition-delay: 350ms;

}

.active .preloader__shade:nth-child(6) {

  transition-delay: 400ms;

  -webkit-transition-delay: 400ms;

}

.active .preloader__shade:nth-child(7) {

  transition-delay: 450ms;

  -webkit-transition-delay: 450ms;

}

.active .preloader__shade:nth-child(8) {

  transition-delay: 500ms;

  -webkit-transition-delay: 500ms;

}

.active .preloader__shade:nth-child(9) {

  transition-delay: 550ms;

  -webkit-transition-delay: 550ms;

}

.active .preloader__shade:nth-child(10) {

  transition-delay: 600ms;

  -webkit-transition-delay: 600ms;

}

.active .preloader__shade:nth-child(11) {

  transition-delay: 650ms;

  -webkit-transition-delay: 650ms;

}

.active .preloader__shade:nth-child(12) {

  transition-delay: 700ms;

  -webkit-transition-delay: 700ms;

}

.active .preloader__shade:nth-child(13) {

  transition-delay: 750ms;

  -webkit-transition-delay: 750ms;

}

.active .preloader__shade:nth-child(14) {

  transition-delay: 800ms;

  -webkit-transition-delay: 800ms;

}

.active .preloader__shade:nth-child(15) {

  transition-delay: 850ms;

  -webkit-transition-delay: 850ms;

}

.active .preloader__shade:nth-child(16) {

  transition-delay: 900ms;

  -webkit-transition-delay: 900ms;

}



a {

  color: unset;

}



.hwp {

  height: calc(100vh - 50px);

}



.header {

  padding-left: 28px;

  padding-top: 28px;

}



.overlay {

  background: linear-gradient(

    149deg,

    rgb(0 0 0 / 73%),

    transparent,

    transparent,

    transparent

  );

  height: 100%;

  width: 100%;

  top: 0px;

  position: absolute;

  opacity: 1;

  z-index: 0;

}



.menu {

  clip-path: inset(0 0 100% 0 round 5px);

  transition: all 0.6s cubic-bezier(0.53, 0, 0, 1);

  width: 50vw;

  visibility: hidden;

  padding: 12px;

  padding-left: 8px;

  padding-right: 8px;

  transform: scaleX(0.5);

  overflow: scroll;

}



.submenu ul li a span {

  position: relative;

}



.submenu ul li a span::before {

    content: "";

    position: absolute;

    width: 0px;

    height: 2px;

    background-color: rgb(0 0 0);

    bottom: 0;

    left: 0;

    transition: all 0.3s ease-in-out

}



.submenu ul li a:hover span::before {

  width: 100%;

}



.is-active .menu {

  visibility: initial !important;

  clip-path: inset(0 0 0 0 round 5px);

  transform: scaleX(1);

}



.mpan svg{

  height: 13px;

}



.menu-inset {

  clip-path: inset(100% 100% 100% 100% round 15px);

  transition: all 0.5s cubic-bezier(0.63, 0.55, 0.49, 1.01);

  

}



#cb-val, #gen-val, #press-val{

  display: none;

}



.mouse {

width: 38px;

    height: 60px;

    border: 2px solid #ffffff;

    border-radius: 60px;

    position: relative;

    opacity: 0.8;

	&::before {

		content: "";

		width: 10px;

		height: 10px;

		position: absolute;

		top: 10px;

		left: 50%;

		transform: translateX(-50%);

		background-color: #ffffff;

		border-radius: 50%;

		opacity: 1;

		animation: wheel 2s infinite;

		-webkit-animation: wheel 2s infinite;

	}

}



@keyframes wheel {

	to {

		opacity: 0;

		top: 60px;

	}

}



@-webkit-keyframes wheel {

	to {

		opacity: 0;

		top: 60px;

	}

}



.spinner{

  animation: spin 15s linear infinite;

}



@keyframes spin {

  to {

    transform: rotate(360deg);

  }

}





.blob-outer-container {

    position: absolute;

    height: 100%;

    width: 100%;

    z-index: 0;

    inset: 0;

    margin: auto;

    filter: blur(100px);

}



.blob-inner-container {

    border-radius: 99999px;

    position: absolute;

    inset: 0;

    margin: auto;

    width: 100vw;

    height: 100vh;

    min-width: 1000px;

    overflow: hidden;

}



.blob {

    position: absolute;

    opacity: 0.4;

    width: 100vw;

    height: 100vh;

    inset: 0;

    margin: auto;

    background: conic-gradient(from 0deg, #08f, #f60, #bbffa1, #4c00ff, #ab2666, #09f);

    animation: spinBlob 10s linear infinite;

}



.play-wiasm .overlay {

    background: linear-gradient(149deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 24%));

    height: 100%;

    width: 100%;

    top: 0px;

    position: absolute;

    opacity: 1;

    z-index: 0;

}



.pulse {

  animation: pulse-animation 2s infinite;

}



@keyframes pulse-animation {

  0% {

    box-shadow: 0 0 0 0px rgba(255, 255, 255, 0.2);

  }

  100% {

    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);

  }

}



@keyframes spinBlob {

    0% {

        transform: rotate(0deg) scale(2);

    }



    100% {

        transform: rotate(1turn) scale(2);

    }

}



#cb-success, #gen-success, #press-success{

  display: none;

}



.c-circ .circle {

  stroke-dasharray: 76;

  stroke-dashoffset: 76;

  animation: draw 1s forwards;

}



.c-circ .tick {

  stroke-dasharray: 18;

  stroke-dashoffset: 18;

  animation: draw 1s forwards 1s;

}



@keyframes draw {

  to {

    stroke-dashoffset: 0;

  }

}





.is-active .menu-inset {

  clip-path: inset(0 0 0 0 round 5px);

  transition-delay: 0.2s;

}

.wrap-2{

    position:fixed;

    z-index:-30;

    top:0;

    left:0;

    overflow:hidden;

    height:100vh;

    width:100vw;

    margin:auto;

  

}





#connect .musub{

  opacity:0;

  transition: all 0.2s ease-in-out;

  visibility: hidden;

}



#connect.active .musub{

  opacity:1;

  visibility: visible;

}



#connect.active .but{

  background: black;

  color: white;

}



#connect a{

  cursor: pointer;

  transition: all 0.1s ease-in-out;

}



.booking{

    max-height: calc(100vh - 115px);

    position: relative;

    overflow: scroll;

}



.form-modal{

    visibility: hidden;

    clip-path: inset(0 0 100% 0 round 5px);

    transition: all 0.7s cubic-bezier(0.53, 0, 0, 1);

}

.form-modal.is-active{

    visibility: initial !important;

    clip-path: inset(0 0 0 0 round 5px);

}



#booking-modal, #cb-modal{

   display: none;

}

#booking-modal.is-active, #cb-modal.is-active, #gen-modal.is-active, #press-modal.is-active{

    display: block;

}



.splide__arrows{

left: 5rem!important;

    width: calc(100vw - 10rem - 25px)!important;

        padding-right: 0!important;

            top: -80px!important;

}



.splide__arrow--prev {

        left: 0 !important;

}



.splide__arrow--next {

     left: 0!important;

}



.splide__arrow{

  position:relative!important;

  width: 4em!important;

  height: 4em!important;

  transform: none!important;

  background: #000000!important;

  color: white!important;

      opacity: 1!important;

}



.splide__slide{

  transform:scale(.9);

  transition: all 0.2s ease-in-out;

}



.splide__slide.is-active{

  transform:scale(1);

}



#blur-pan{

    -webkit-backdrop-filter: blur(8px);

    backdrop-filter: blur(8px);

    background-color: color-mix(in oklab, #232020 10%, transparent);

    content: "";

    inset: calc(0.25rem * 0);

    position: fixed;

    transition: opacity 0.6s ease-in-out;

    z-index: -1;

    opacity: 0;

    visibility: hidden;

}



#blur-pan.active{

    visibility: visible;

    opacity: 1;

    transition: opacity 0.6s ease-in-out;

}







#connect a:hover{

  background: rgb(74 222 128);

}



.submenu ul{

  position: absolute;

  opacity: 0;

  transform: translateY(50px);

  transition: all 0.2s ease-in;

  visibility: hidden;

}



#main-menu li{

  transition: all 0.2s ease-in;

}



#main-menu li.active{

  color: black;

  background-color: rgb(74 222 128);

}



.submenu ul.active{

  opacity: 1;

  transform: translateY(0);

  transition: all 0.3s ease-in-out;

  visibility: visible;

}



#menu .overlay {

    background: linear-gradient(14deg, rgb(0 0 0), rgb(0 0 0 / 46%), transparent, transparent);

}



.men-shad{

  box-shadow: -2px 1px 20px 0px rgb(0 0 0 / 59%);

}



.scroll-progress-line {



  transform-origin: left;

  z-index: 9999;

  

  /* Link the animation to the scroll position */

  animation: grow-line linear;

  animation-timeline: scroll();

}



@keyframes grow-line {

  from { transform: scaleX(0); }

  to { transform: scaleX(1); }

}



.is-active .box{

  height: 2px!important;

      transform: scale(0.8);

}



.is-active .top {

  transform: rotate(-45deg);

}



.is-active .bot{

  transform: rotate(45deg);

}





.menu-modal:not(.is-active):before {

  opacity: 0;

}



.menu-modal:not(.is-active) {

  visibility: hidden !important;

}



#booking{

  visibility: hidden;

}



#booking.is-active{

  visibility: visible;

}







.menu-label {

  transition: transform 0.5s cubic-bezier(0.53, 0, 0, 1);

}



.menu-text .menu-label:first-child {

  transition-delay: 0.1s;

}



.is-active .menu-text .menu-label {

  transform: translateY(-100%);

}



.is-active .menu-text .menu-label:first-child {

  transition-delay: 0s;

}



.is-active .menu-text .menu-label:nth-child(2) {

  transition-delay: 0.1s;

}



.light-pan {

  transition: all 0.2s ease-in-out;

  box-shadow: 0px 1px 5px -2px #000000;

  z-index: 1;

  position: relative;

}



.light-switch .active .text {

  color: white;

  text-shadow:

    1px 1px 5px #ffffff,

    1px 1px 5px #404040;

}



.light-switch .active .light span {

  background: #dfdfdf;

  box-shadow:

    1px 1px 5px #fff,

    1px 1px 5px #404040;

}



.light-switch .light span {

  background: linear-gradient(45deg, #141414, #000000);

}



.light-switch .light-pan:hover {

  transition: all 0.2s ease-in-out;

  box-shadow: 0px 0px 0px 0px #000000;

  color: #bebebe;

}



.bg-pan img {

  opacity: 0;

  transition: all 0.4s ease-in-out;

}



.bg-pan img.active {

  opacity: 1;

}



.aos {

}



.sup-100 {

  opacity: 0;

  transform: translateY(100px);

  transition:

    transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),

    opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1);

}



.clip-right {

  clip-path: inset(0 0 0 100%);

  transition: clip-path 0.6s cubic-bezier(0.53, 0, 0, 1);

}



.clip-left {

  will-change: transform, clip-path;

  clip-path: inset(0 100% 0 0);

  transition: clip-path 1s cubic-bezier(0.53, 0, 0, 1);

}



.animated .clip-left,

.clip-right.animated {

  clip-path: inset(0 0 0 0);

}



.op3 {

  opacity: 0;

  transition: opacity 0.3s ease-in-out;

  transition-delay: 0.3s;

}



.op3.animated {

  opacity: 1;

}



.sup-100.animated {

  transform: translateY(0);

  opacity: 1;

}



.pole {

  transition: all 0.6s ease-in-out;

  transition-delay: 0.3s;

}



.hide-opacity {

  opacity: 0;

  transition: all 0.3s ease-in-out 0.8s;

}



.scaled {

  transition: all 0.5s ease-in;

  transform: scale(1.2);

}



.scaled.animated {

  transform: scale(1);

}



.acc li .expand {

  max-height: 0px;

  overflow: hidden;

  transition: height 0.3s ease-in-out;

}



.acc li.active .expand {

  max-height: initial;

}



.active .accordion-header .vert {

  opacity: 0;

  transition: all 0.2s ease-in-out;

}



.accordion-content .link-pan a {

}



.accordion-header i,

.icopan {

  color: #333;

  font-size: 16px;

  transition: all 0.1s ease-in;

}



.accordion-cfl .icopan.active {

  transform: rotate(90deg);

}



.accordion-header:hover {

}



/* This is essential: it hides the content initially */

.accordion-content {

  border-top: none;

  display: none;

}



.c-slider {

  display: flex;

  gap: 10px;

  overflow-x: auto;

  padding-bottom: 10px;

}



.c-slider .slide {

  max-width: calc(20% - 10px) !important;

  transition: all 200ms cubic-bezier(0.55, 0.085, 0.68, 0.53);

  transition-property: initial !important;

  cursor: pointer;

  position: relative;

}

.c-slider .slide.active {

  max-width: 40% !important;

}



.c-slider-overlay {

  background: linear-gradient(

    1deg,

    rgb(0 0 0 / 73%),

    #3f3f3f33,

    transparent,

    transparent

  );

  height: 100%;

  width: 100%;

  top: 0px;

  position: absolute;

  opacity: 1;

  z-index: 1;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  padding-bottom: 60px;

  transition: all 200ms ease-out;

}



.active .pill {

  opacity: 0;

}



.c-slider .txt {

  opacity: 0;

}



.c-slider .active .txt {

  transition-delay: 300ms;

  opacity: 1;

}



.item-icon {

  height: 40px;

}



.item-icon svg {

  height: 40px;

}



.c-slider img {

  height: calc(100% + 100px);

}



#video-modal {

  visibility: hidden;

}



#video-modal .ovla {

  opacity: 0;

  transition: all 0.2s ease-in;

}



#video-modal.is-active .ovla,

#video-modal.is-active .panel {

  opacity: 1;

}

#video-modal .panel {

  opacity: 0;

  transition-delay: 0.2s;

  transition: all 0.3s ease-in;

}



#video-modal.is-active {

  visibility: initial !important;

}



#se-video {

  transition: clip-path 1.5s cubic-bezier(0.53, 0, 0, 1);

  clip-path: inset(20% round 1rem);

}



.is-active #se-video {

  clip-path: inset(0% round 1rem);

}



#lighting-p,

#lighting-b {

  opacity: 0;

}



.fright {

  transition: all 2.5s ease-in;

  clip-path: inset(0 100% 0 0);

}



.animated .fright {

  clip-path: inset(0 0 0 0);

}



.gradient-background {

  background:

    radial-gradient(

      100% 100% at var(--4-x-position) var(--4-y-position),

      #000000 0%,

      transparent

    ),

    radial-gradient(

      100% 100% at var(--5-x-position) var(--5-y-position),

      #130d16 0%,

      transparent

    ),

    #1b253b;

  animation-name: main;

  animation-iteration-count: infinite;

  animation-duration: 8s;

  transition-timing-function: ease-in-out;

}

@property --4-x-position {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 20%;

}

@property --4-y-position {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 80%;

}

@property --5-x-position {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 80%;

}

@property --5-y-position {

  syntax: "<percentage>";

  inherits: false;

  initial-value: 20%;

}

:root {

  --4-x-position: 20%;

  --4-y-position: 80%;

  --5-x-position: 80%;

  --5-y-position: 20%;

}

@keyframes main {

  25% {

    --4-x-position: 15%;

    --4-y-position: 15%;

    --5-x-position: 85%;

    --5-y-position: 80%;

  }

  50% {

    --4-x-position: 80%;

    --4-y-position: 15%;

    --5-x-position: 15%;

    --5-y-position: 85%;

  }

}



@media (max-width: 768px) {

  .preloader__shades .preloader__shade {

    width: 25vw;

  }



  .heading {

    font-size: 2.1rem !important;

    line-height: 32px !important;

    letter-spacing: 0.5px !important;

  }



  .heading-2 {

    font-size: 1.6rem !important;

    line-height: 27px !important;

    letter-spacing: 0.5px !important;

  }



  .preloader__shades .preloader__shade {

    width: 25vw;

  }

  .c-slider .slide {

    max-width: calc(90% - 10px) !important;

    scroll-snap-align: start;

    flex-shrink: 0;

    width: 90%;

  }

  .c-slider {

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    gap: 1rem !important;

    overflow-x: auto !important;

  }

  .c-slider .slide.active {

    max-width: 90% !important;

  }

  .c-slider-overlay {

    opacity: 0;

  }

}



.splide__pagination {

    display: none!important;

}





@media (max-width: 768px) {





  .menu {

    transform: scale(1);

  }



  .desktop-image {

    display: none!important;

  }

  .mobile-hide {

        display: none !important;

  }

  .splide__pagination {

  }

  .mobile-image {

    display: block;

  }

  .col-start-13 {

    grid-column-start: 1;

  }



  .preloader__logo .logo {

    width: 300px!important;

  }



  .preloader__logo .logoj{

    width: 300px!important;

  }





  .splide__arrow {

    position: relative !important;

    width: 3em !important;

    height: 3em !important;

    transform: none !important;

    background: #000000 !important;

    color: white !important;

    opacity: 1 !important;

}



.AppCrossText-icon{

    width: 10px;

}



  .heading-3 {

    font-family: Europa-Grotesk;

    font-weight: 400;

    font-style: normal;

    font-display: swap;

    font-size: 1.4rem !important;

    line-height: 30px !important;

    letter-spacing: -0.2px !important;

  }

  .splide__arrows {

    width: calc(100vw - 1.6rem) !important;

  }



  .splide__slide {

    width: 93% !important;

    margin-right: 0px;

}

}