@font-face {
  font-family: "Dahlia";
  src: url("/fonts/Dahlia.woff") format("woff");
  /* font-weight: 400; */
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  box-sizing: border-box;
  background-color: black;
  height: 100vh;
  width: 100vw;
  font-family: Arial, Helvetica, Sans-serif;
}

#pano {
  pointer-events: all;
}

.no-scene {
  color: #000;
}

#apiLoading {
  backdrop-filter: blur(10px);
  background-color: rgba(1, 1, 1, 0.368);
  background-position: center;
  background-size: 90px;
  background-repeat: no-repeat;
  z-index: 1000;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.loader {
  border: 8px solid #c9c9c973;
  border-top: 8px solid #f09122;
  width: 162px;
  height: 162px;
  border-radius: 50%;
  animation: spin 0.5s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.scene-link {
  color: #007bff;
  cursor: pointer;
  text-decoration: underline 2px solid #007bff;
}

.scene-link:hover {
  opacity: 0.7;
}

#app {
  height: 100%;
  pointer-events: all;
  touch-action: auto;
  z-index: 1;
  position: absolute;
}

.logo {
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 2;
}

.video-container {
  /* display:none !important; */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.7);
}

.video-container.back {
  z-index: -8;
}

video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  backdrop-filter: blur(10px) !important;
}

.logo-size-ico {
  height: 180px;
  margin-top: 50px;
  /* border: 2px solid #e7d37257; */
  margin-left: 50px;
  /* box-shadow: 3px 4px 7px rgba(0, 0, 0, 0.2); */
  border-radius: 15px;
}

.skip-intro {
  position: fixed;
  text-align: end;

  font-size: 1rem;
  color: #ffffff;
  border: none;
  z-index: 2;
  padding: 10px 20px;
  right: 10px;
  top: 10px;
  background-color: #1893d6;
  border-radius: 30px;
  cursor: pointer;
}

.intro-section .show {
  /* visibility: visible; */
  /* animation: fadein 0.5s; */
  transition: opacity 0.5s ease-in-out;
}

.video-container.back {
  z-index: -8;
}

#content {
  z-index: 2;
}

#content.hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

#content.show {
  animation: slideDownContent 1s ease-in-out forwards;
}

.image-row.show {
  animation: slideDownImages 1.5s ease-in-out 0.5s forwards;
}

.Intro-Header-image {
  text-align: center;
  height: 100%;
  display: grid;
}

#Intro-Header {
  width: 100%;
  height: auto;
  font-weight: 400;
  font-size: 2.5rem;
  color: white;
  text-shadow: 2px 1px 9px rgb(0 0 0);
  text-align: center;
  padding-bottom: -67px;
  display: flex;
  box-sizing: border-box;
  justify-content: center;
  align-items: end;
}

.section-box {
  overflow: hidden;
  position: relative;
}

.section-box .bg-img {
  width: 100%;
  height: auto;
  transition: transform 0.4s ease-out;
  transform-origin: center;
}

.section-box:hover .bg-img {
  animation: zoomRightLeftZoomOut 7s ease-in-out infinite;
}

@keyframes zoomRightLeftZoomOut {
  0% {
    transform: scale(1) translateX(0);
    /* original */
  }

  20% {
    transform: scale(1.08) translateX(0);
    /* zoom in */
  }

  50% {
    transform: scale(1.08) translateX(15px);
    /* pan to right */
  }

  80% {
    transform: scale(1.08) translateX(-15px);
    /* pan to left */
  }

  100% {
    transform: scale(1) translateX(0);
    /* zoom back out */
  }
}

.sectionBox-container {
  display: flex;
  justify-content: center;
  align-items: center;
  justify-items: center;
  gap: 30px;
  height: 100%;
  width: 100%;
  max-width: 77%;
}

@keyframes slideDownContent {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.image-row {
  display: flex;
  justify-items: center;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 20px;
  opacity: 0;
  width: 100%;
  box-sizing: border-box;
}

.img-box {
  background: white;
  border-radius: 50%;
  height: 40px;
  width: 40px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  padding: 8px;
}

.section-box {
  position: relative;

  font-style: normal;

  height: fit-content;
  border-radius: 20px;
  cursor: pointer;
  box-sizing: border-box;
  overflow: hidden;
  background-color: #ffffff00;

  /* FAST bounce transition */
  transition:
    transform 0.18s cubic-bezier(0.3, 1.7, 0.6, 1),
    border 0.2s,
    box-shadow 0.2s;
}

/* Glare pseudo-element */
.section-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-20deg);
  transition: left 0.15s ease-out;
  pointer-events: none;
}

.section-box:hover::after {
  left: 120%;
  /* smooth glare sweep */
}

.section-box:hover {
  border: 3px solid white;
  transform: scale(1.06);
  /* fast bounce */
  box-shadow: #00000098 4px 9px 10px !important;
}

.section-box .section-header {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 10px;
  background-color: #ffffff;
  position: absolute;
  z-index: 8;
}

.section-header h1 {
  font-size: 1.7rem;
  font-weight: 600;
  margin: 0;
  padding: 10px 0px;
}

.section-box .bg-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-box .rightarrow {
  height: 15px;
  width: 15px;
  filter: invert(1);
}

#intro-id {
  height: 100%;
  background-color: #ffffff1f;
  position: fixed;
  width: 100%;
  transition: all 2s;
  display: grid;
  grid-template-rows: 25% 0.98fr;
}

@keyframes slideDownImages {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideDownContent {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#navigation-control-container {
  height: fit-content;
  width: fit-content;
  z-index: 5;
  top: 2px;
  left: 0px;
  position: absolute;
}

.hidden {
  display: none;
}

.hidden-moreinfo {
  display: none !important;
}

#contactBtn-wrapper:hover,
#discoverBtn-wrapper:hover {
  background-color: #ccc;
}

#menu-container {
  display: flex;
  justify-content: space-between;

  align-items: center;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 3;
  height: 4rem;
  transform: translateY(0);
  transition: transform 0.5s ease-out;
}

#contactBtn-wrapper {
  display: flex;
  border-radius: 40px 0px 0px 40px;
  width: 125px;
  gap: 10px;
  justify-content: space-around;
  margin-top: 10px;
  background-color: white;
  height: 2.5rem;
  cursor: pointer;
  position: relative;
  z-index: 7;
}

.bar.exiting {
  transform: translateY(500%);
}

#menu-container.hidden {
  transform: translateY(-100%);
  transition:
    opacity 0.5s,
    transform 0.5s;
}

#discoverBtn-wrapper {
  display: flex;
  justify-content: flex-start;
  border-radius: 0 40px 40px 0;
  width: 140px;
  background-color: white;
  gap: 10px;
  margin-top: 10px;
  height: 2.5rem;
  cursor: pointer;
}

#discover-btn {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  height: 100%;
  width: 5rem;
  font-size: 16px;

  justify-content: center;
  align-items: center;
  border: none;
  background-color: transparent;
  margin-left: 10px;
  cursor: pointer;
}

.icon-discover,
.icon-contact {
  transition: background-image 0.3s ease-in-out;
}

.icon-discover.close,
.icon-contact.close {
  background-image: url("https://waterkingdom.hotelyug.com/img/close.png");
}

.icon-discover {
  position: relative;
  box-sizing: border-box;
  left: 1rem;
  width: 1.2rem;
  height: 100%;
  transform: scaleY(1);
  transition: transform 0.5s;
  background-image: url("https://waterkingdom.hotelyug.com/img/menu.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.dropdown-toggle,
.dropdown-toggle-discover {
  display: none;
}

#map-location-content,
.frame2,
iframe {
  width: 100%;
  height: 100%;
}

#overr {
  /* background-color: aliceblue; */
  width: 52%;
  height: 100%;
}

#centerlizedBottomBar {
  display: flex;
  position: fixed;
  bottom: 3%;
  align-items: center;
  left: 52%;
  transform: translateX(-50%);
  justify-content: center;
  width: fit-content;
}

#ImageGalleryok {
  position: absolute;
  z-index: 11;
  right: 3px;
  top: 5px;
  width: 30px;
  height: 30px;
  cursor: pointer;
  background-color: #0000009f;
  text-shadow: 2px 1px 10px rgb(0 0 0 / 78%);
  border: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#bottomCatGroupDropdown {
}

#bottomSceneDropdown {
  padding: 2rem 0;
  position: absolute;
  /* display: grid; */
  gap: 10px;
  width: 20rem;
  color: white;
  height: auto;
  border-radius: 1.5rem;
  background-color: #063a0c;
  bottom: 101px;
  right: 40px;
}

#bottomBar {
  display: flex;
  align-items: center;
  border-radius: 50%;
  position: relative;
}

.atmnav-drop-group {
  cursor: pointer;
}

#bottomCatGroupBtn,
#bottomSceneBtn {
  width: 260px;
  font-size: 0.9rem;
  border-radius: 42px;
  border: 0;
  background-color: rgb(255, 255, 255);
  display: flex;
  align-items: center;
  line-height: 16px;
  justify-content: center;
}

.middle-footer-btn {
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 0;
  border-radius: 65px;
  background-color: white;
  padding: 0rem;
}

.BtnDiv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 240px;
}

#logo-click {
  height: 2.5rem;
  width: 2.5rem;
  display: flex;
  background-color: unset;
  justify-content: center;
  align-items: center;
  border-width: initial;
  border-style: none;
  border-color: initial;
  border-image: initial;
  border-radius: 8px;
  padding: 0px;
}

.logoClick-img {
  height: 20px;
  width: 20px;
}

/* 
#setting-buttons {
  position: relative;
  width: fit-content;
  height: fit-content;
  z-index: 2;
  bottom: 0;
  left: 20px;

  right: 20px;
  bottom: 0;
  display: block;
} */
.setting-buttons-panel {
  display: flex;
  position: fixed;
  bottom: 3%;
  justify-items: center;
  align-items: center;
  justify-content: space-between;
  width: fit-content;
  transform: translateY(0);
  transition: transform 0.05s ease-out;
  z-index: 4;
}

.setting-buttons-panel.single {
  justify-content: center;
}

.footer-nav {
  width: 100%;
  display: flex;
}

#contactFullDropdown {
  position: fixed;
  right: 0;
  top: 0;

  display: flex;
  z-index: 6;
  width: 100%;
  color: white !important;
  height: 100vh;
}

#contactFullDropdown {
  transform: translateX(100%);
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

@keyframes fadeBG {
  0% {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
  }

  100% {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.contact-form-popup {
  display: flex;
  height: 95%;
}

.contact-bg {
  padding: 5rem 1rem 1rem 1rem;
  height: 100%;
  width: 48%;
  display: flex;
  flex-direction: column;
}

.social a {
  position: relative;

  font-size: 1rem;
  line-height: 0.3rem;
  text-align: center;
  z-index: 1;
  opacity: 0.5;
  transition: opacity var(--transition-duration);
  margin: 0.5rem;
}

.social {
  display: flex;
}

.contact-content {
  height: fit-content;
  position: fixed;
  right: 0;
  top: 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
  z-index: 3;
}

#share-link-btn .icon-contact {
  padding: 0;
  background-image: url(https://waterkingdom.hotelyug.com/img/share.png);
  margin: 0;
}

#book-now-btn .icon-contact {
  padding: 0;
  background-image: url(https://waterkingdom.hotelyug.com/img/book.png);
  margin: 0;
  width: 25px;
  margin-left: 4px;
  margin-top: 1px;
}

#share-btn-text {
  width: 73px;
  margin-bottom: 3px;
}

#share-btn,
#contact-btn {
  display: inline-flex;
  position: relative;
  box-sizing: border-box;
  height: 100%;
  width: rem;
  font-size: 16px;

  justify-content: center;
  align-items: center;
  border: none;
  margin-right: 10px;
  background-color: transparent;
  cursor: pointer;
  transition: translateY(50%) 0.3sease-in-out;
}

#ok {
  font-size: 1rem;
  color: #0d2d0d;
  border: none;
  z-index: 2;
  padding: 10px 20px;
  background-color: white;
  border-radius: 30px;
  cursor: pointer;
}

.icon-contact {
  position: relative;
  box-sizing: border-box;
  width: 1.4rem;
  height: 100%;
  transform: scaleY(1);
  transition: transform 0.5s;
  background-image: url(https://waterkingdom.hotelyug.com/img/icon_phone.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 8px;
}

#langSelector {
  width: 87px;
  padding: 10px;
  position: relative;
  background-image: url(https://waterkingdom.hotelyug.com/img/language.png);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position: left;
  background-position-x: 9px;
  padding-left: 35px;
}

#bottomPrevBtn,
#bottomNextBtn {
  border-radius: 50%;
  border: 1px solid white;
  margin: 5px;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  background-color: #f1f1f1;
  transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

#bottomPrevBtn:hover,
#bottomNextBtn:hover {
  transform: scale(1.2);
}

/*******************************
   ATMABODH UNIQUE NAVIGATION CSS
   Prefix: atmnav-
********************************/

/* Reset inherited issues */
.atmnav * {
  box-sizing: border-box;
}

/********************************
   WRAPPER
*********************************/
.atmnav-wrapper {
  position: relative;
  z-index: 20;
  pointer-events: auto;
  font-family: system-ui, Arial, sans-serif;
  user-select: none;
}

/********************************
  LEFT MENU CONTAINER
*********************************/
#leftMenu.atmnav-left {
  height: 100%;
  overflow-y: overlay;
}

.atmnav-left-wrapper {
  gap: 60px;
  display: grid;
  padding: 0 22px;
}

/* scrollbar */
#leftMenu::-webkit-scrollbar {
  width: 8px;
}

#leftMenu::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

#leftMenu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
}

/********************************
  CATEGORY TITLE
*********************************/

/********************************
  ACCORDION GROUPS
*********************************/
.atmnav-group {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 6px;
  margin-bottom: 6px;
}

.atmnav-arrow.active img {
  animation: rotateToActive 0.3s forwards;
}

.atmnav-arrow img {
  position: relative;
  transform: rotate(90deg);
  z-index: 11;
  height: 20px;
  width: 20px;
  filter: invert(1);
  animation: revertRotation 0.3s forwards;
}

.atmnav-group-header {
  /* font-family: "Dahlia", sans-serif; */
  /* letter-spacing: 1px; */
  font-size: 1rem;
  color: #ffffff;
  /* line-height: 1.8rem; */
  /* margin-left: 16px; */
  margin-bottom: 5px;
  /* padding-left: 10px !important; */
  padding: 18px 28px;
  display: flex;
  background-color: #ffffff12;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.68, 0.55, 0.265, 1.55);
}

.atmnav-group-header:hover {
  transform: scale(1.02);
  background: rgba(255, 255, 255, 0.12);
}

.atmnav-arrow {
  opacity: 0.8;
  transition: transform 0.2s ease;
  pointer-events: none;
}

/********************************
  GROUP SUBSCENES
*********************************/
.atmnav-group-subitems {
  display: none;
  /* default collapsed */
}

.atmnav-subitem:hover {
  background-color: rgb(0 0 0) !important;
}

.atmnav-subitem {
  font-family: "Libre Franklin", sans-serif;
  cursor: pointer;
  /* background-color: #ffffff0d; */
  color: #1893d6;
  padding: 21px 0;
  padding-left: 45px;
  background-color: #00000018;
  margin-top: 3px;
}

.atmnav-subitem.active {
  border-right: 6px solid #1893d6;
  font-weight: 700;
  background-color: #0000008a;
}

/********************************
  BOTTOM BAR CONTAINER
*********************************/
#bottomBar.atmnav-bottom {
  display: flex;
  align-items: center;
  gap: 20px;
}

/********************************
  BUTTON STYLES
*********************************/
.atmnav-btn {
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 22px;
  border: none;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.25s ease;
}

.atmnav-btn:hover {
  background: rgba(255, 255, 255, 1);
}

/********************************
  DROPDOWNS
*********************************/
.atmnav-dropdown {
  border-radius: 1.5rem;
  background-color: #063a0c;
  padding: 2rem 0;
  position: absolute;
  gap: 10px;
  width: 23rem;
  color: white;
  bottom: 101px;

  max-height: 760px !important;
  overflow-y: auto !important;
  transform: translateY(20px);
  opacity: 0;
  transition:
    max-height 0.35s ease,
    transform 0.35s ease,
    opacity 0.35s ease;
}

.atmnav-drop-cat-title,
.atmnav-drop-group,
.atmnav-drop-item {
  opacity: 0;
  transform: translateY(160px);
  animation: fadeSlide 0.35s ease forwards;
}

@keyframes fadeSlide {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hidden state */
.atmnav-dropdown {
  border-radius: 1.5rem;
  background-color: #063a0c;
  padding: 2rem 0;
  position: absolute;
  gap: 10px;
  width: 23rem;
  color: white;
  bottom: 101px;
  overflow: hidden;

  /* closed state */
  max-height: 0;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;

  /* smooth close animations */
  transition:
    max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease-out,
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.atmnav-dropdown.open {
  /* open state */
  max-height: fit-content;
  /* larger than content */
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;

  /* smoother opening */
  transition:
    max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s ease-in,
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.atmnav-scene-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  position: absolute;
  top: -40px;
  width: 100%;
  justify-content: center;
}

.atmnav-scene-line {
  width: 28px;
  height: 4px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 4px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.atmnav-scene-line:hover {
  background: rgba(255, 255, 255, 0.45);
}

.atmnav-scene-line.active {
  background: #ffffff;
  box-shadow: 0 0 10px #ffffff;
}

/********************************
  LANGUAGE SELECT
*********************************/
.atmnav-lang-select {
  padding: 8px 22px;
  width: 140px;
  border-radius: 55px;
  height: 56px;
  border: none;
  cursor: pointer;
  background: rgb(255 255 255);
}

#discoverFullDropdown {
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

#discoverFullDropdown.show {
  animation-name: slideIn;
}

@keyframes slideOut {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0);
  }
}

.vtp-close {
  position: absolute;
  background-image: url(https://fj.hotelyug.com/content/icons/close.png);
  top: 3px;
  right: 3px;
  width: 40px;
  height: 40px;
  font-size: 36px;
  display: flex;
  color: #ffffff;
  cursor: pointer;
  border-radius: 50%;
  padding-bottom: 11px;
  transition: 0.2s ease;
  background-color: rgb(0 0 0 / 64%);
  z-index: 6;
  justify-content: center;
  align-items: center;
}

.vtp-close:hover {
  scale: 1.1;
}

.brandingbg,
.atmnav-dropdown {
  background-color: #354b95 !important;
}

.logbg {
  backdrop-filter: blur(5px);
  background-image: url(https://waterkingdom.hotelyug.com/img/login-bg.jpg);
  background-size: cover;
}

#loginPopup {
  background: #fff;
  width: 900px;
  height: 450px;

  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.logGrid {
  display: flex;
  height: 100%;
}

.Grid5 {
  width: 50%;
  position: relative;
  display: grid;
  padding: 25px;
}

.fonter13 {
  font-size: 13px;
}

.greyFontHead {
  color: #182f55;
}

#loginBtn {
  width: 100%;
  padding: 10px;
  background: #28a745;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 30px;
}

#loginBtn:hover {
  background: #04c731;
}

#loginBtn:disabled {
  background: #b9c8d5;
  cursor: not-allowed;
}

.skygradient {
  border-radius: 0 15px 15px 0;
  position: relative;
  background-image: linear-gradient(#f8fbff, #eaf5fd);
  border-left: 1px solid #dce7f5;
  width: 50%;
  position: relative;
}

.inputpadSign {
  margin-top: 9px;
  margin-bottom: 9px;
}

.inputCode {
  width: 100%;
  height: 41px;
  padding-left: 10px;
  background-color: rgb(252, 252, 252);
  font-size: 14px;
  border-radius: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(186, 186, 186);
  border-image: initial;
}

.atmnav-drop-group,
.atmnav-drop-item,
.atmnav-subitem {
  color: rgb(208 208 208 / 81%) !important;
  font-weight: normal;
}

.atmnav-drop-cat-title {
  display: flex;
  justify-content: left;
  justify-items: center;

  font-style: bold;
  padding: 0.8rem 2.6rem;
  font-size: 1.4rem;
  text-align: left;
  pointer-events: none;
  color: white;
}

.atmnav-category-title {
  font-size: 1.7rem;
  padding: 1rem 0;
  border-bottom: 1px solid #ffffff70;
  background-color: transparent;
  color: #fff;
}

.atmnav-drop-group,
.atmnav-drop-item {
  display: flex;
  justify-content: left;
  justify-items: center;

  padding: 0.8rem 2.6rem;
  font-size: 1rem;
  color: #1893d6;
  cursor: pointer;
}

.atmnav-drop-item:hover {
  background-color: rgba(7, 7, 7, 0.692);
  color: #fff;
}

.atmnav-drop-group:hover {
  background-color: rgba(7, 7, 7, 0.692);
  color: #fff;
}

#discoverFullDropdown {
  position: absolute;
  box-sizing: border-box;
  box-shadow: 8px 8px 10px rgb(0 0 0 / 20%);
  left: 0;
  top: 0;
  width: 600px;
  height: 100vh;
  padding: 4rem 0.5rem;
  overflow: hidden;
  margin-bottom: 20px;
  background-color: rgb(19 19 19 / 90%);
  backdrop-filter: blur(8px);
  z-index: -1;
}

#navigationContainer {
  height: 100%;
}

option {
  background-color: rgb(255, 255, 255);
  height: 50px;
  margin-top: 10px;
  width: 10px;
}

#intro-panel {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
}

/* TODO AT HARSHAD PLEASE DO LOOK INTO BELOW CSS  */
.bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: auto;
  height: 50px;
  border-radius: 3rem;
  background-color: rgba(255, 255, 255, 0.192);
  backdrop-filter: blur(8px);
  padding: 0px;
  font-size: 0;
  margin: 0 10px;
  transform-origin: left center;
  transition: transform 0.2s ease;
  transform: translateY(0);
  transition: transform 0.2s ease-out;
}

.bar2 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: auto;
  border-radius: 3rem;
  background-color: rgba(255, 255, 255, 0.192);
  backdrop-filter: blur(8px);
  padding: 0.6rem 0.4rem;
  font-size: 0;
  height: 50px;
  transform-origin: left center;
}

.bar.center-footer {
  width: 300px;
}

.moreinfo-wrapper {
  display: flex;
  align-items: center;
  height: 2.5rem;
  background-color: #f1f1f1;
  border-radius: 50px;
  z-index: 12;
  position: relative;
  cursor: pointer;
  right: 5%;
  /* margin: 0 10px; */
  transform: translateY(0);
  transition: transform 0.5s ease-out;
}

.moreinfo-wrapper.exiting {
  transform: translateY(500%);
}

.btn_wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin: 0;
}

.btn_wrapper.hidden {
  display: none;
}

.btn_wrapper button {
  width: 2.5rem;
  height: 2.5rem;
  gap: 10px;
  cursor: pointer;
}

.btn {
  border-radius: 50%;
}

.error-message {
  position: absolute;
  left: 0;
  bottom: -21px;
  font-size: 13px;
  width: 100%;
  text-align: center;
  color: #ff6c6c;
}

#video-btn,
#dollhouse,
#point-measurement-btn,
#measurement-btn,
#compass-btn,
#venue-partition-btn {
  width: 2.5rem;
  height: 2.5rem;
  background-color: white;
  border-radius: 50%;
  padding: 0;
  display: flex;
  margin-left: 5px;
  justify-content: center;
  align-items: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* bounce curve */
  transform-origin: center;
}

#compass-img,
#venue-partition-img {
  filter: invert(1);
}

#dollhouse-img,
#capacity-chart-img,
#measure-img,
#compass-img,
#venue-partition-img {
  width: 25px;
  height: 25px;
}

#copyBtn {
  background-image: url(https://fj.hotelyug.com/content/icons/copy.png);
}

#openBtn {
  background-image: url(https://fj.hotelyug.com/content/icons/open.png);
}

#video-btn,
#dollhouse,
#controller,
#submenu,
#nightview-btn,
#audioLangButton,
#setting-btn,
#zoomButton,
#auto-tour,
#gyro-btn,
#copyBtn,
#openBtn,
#galleryinfo,
#auto-rotation,
#layout-btn {
  background-color: #ffffff;
  top: 2.4rem;
  align-items: center;
  justify-items: center;
  border: none;
  margin-bottom: 0;
  border-radius: 50%;
  border: 0px solid white;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  flex-direction: column;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* bounce curve */
  transform-origin: center;
}

.share-status {
  align-items: center;
  border-radius: 20px;
  margin-top: 7px;
  display: flex;
  justify-content: center;
  /* position: absolute; */
  left: 16px;
  font-size: 14px;
  top: 57px;
  width: 100%;
  color: white;
}

#copyBtn,
#openBtn {
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 37px;
  background-position: center;
  background-size: 22px;
  background-repeat: no-repeat;
}

#capacity-chart {
  background-color: #e1e1e1;
  top: 2.4rem;
  align-items: center;
  justify-items: center;
  border: none;
  margin-bottom: 0;
  padding: 5px;
  border-radius: 50%;
  border: 0px solid white;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  flex-direction: column;
}

#floor-plan {
  background-color: #e1e1e1;
  top: 2.4rem;
  align-items: center;
  justify-items: center;
  border: none;
  margin-bottom: 0;
  padding: 5px;
  border-radius: 50%;
  border: 0px solid white;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  flex-direction: column;
}

#auto-rotation {
  background-color: #fff;
}

#capacity-chart {
  background-color: #fff;
}

#floor-plan {
  background-color: #fff;
}

#musicIcon {
  height: 2.5rem;
  width: 2.5rem;
}

#voiceoverIcon {
  height: 2.5rem;
  width: 2.5rem;
}

#popup.opening {
  opacity: 1;
}

#popup.hide {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.5s ease-in-out,
    visibility 1s ease-in-out;
}

#popup.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out;
}

.tooltipsound {
  position: fixed;
  bottom: 4rem;
  background-color: white;
  line-height: 1rem;
  left: 56px;
  width: 180px;
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 20px;
  align-items: center;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  justify-items: center;
  border: none;
  border-radius: 20px;
}

.tooltipsound::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 23%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid white;
}

.contact-popup {
  background: white;
  width: 550px;
  height: 350px;
}

.tool-audio::after {
  top: 100% !important;
}

.tooltipsound p {
  font-family: "Ariel", sans-serif;
  font-weight: bold;
}

.voice-span p {
  font-weight: 100 !important;
}

.bolder {
  font-weight: bold;
}

.audio-span p {
  font-weight: 100 !important;
}

.audio-tooltip {
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
}

.voice-span,
.audio-span {
  display: flex;
  font-size: 18px;
  font-style: italic;
  font-family: "FreightBigProMediumItalic";
}

#layout-btn,
#musicToggleBtn,
#gyro-btn,
#voiceoverToggleBtn,
#copyBtn,
#openBtn,
#zoomButton,
#auto-tour {
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* bounce curve */
  transform-origin: center;
}

.atm-toggle-btn:hover,
#auto-rotation:hover,
#measurement-btn:hover,
#point-measurement-btn:hover,
#compass-btn:hover,
#copyBtn:hover,
#openBtn:hover,
#capacity-chart:hover,
#venue-partition-btn:hover,
#floor-plan:hover,
#musicToggleBtn:hover,
#galleryinfo:hover,
#video-btn:hover,
#voiceoverToggleBtn:hover,
#zoomButton:hover,
#left-btn:hover,
#right-btn:hover,
#auto-tour:hover,
#gyro-btn:hover,
#dollhouse:hover,
#controller:hover,
#submenu:hover,
#nightview-btn:hover {
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.979);
  background-color: #fff;
}

.lang-wrapper {
  width: fit-content !important;
  height: fit-content !important;
}

.btn_wrapper #mainButton:hover,
.btn_wrapper #subtitleButton:hover {
  box-shadow: none;
}

.music-button.off,
.voiceover-button.off {
  background-color: #ffffff92;
}

.btn_wrapper .moreinfo-wrapper:hover {
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.979);
}

.btn_wrapper #moreinfo:hover {
  box-shadow: none;
}

.btn_wrapper #moreinfo:hover {
  box-shadow: none;
}

.img-box.black {
  background-color: #000000;
}

#zoomIcon img {
  padding: 2px;
  filter: invert(0.5);
}

.tooltip,
.tooltip1,
.tooltipMusic,
.tooltipNext,
.tooltipPrev {
  position: absolute;
  transform: translateX(-50%);
  transform-origin: 2rem 2rem;
  background-color: black;

  font-size: 1rem;
  padding: 0.5rem 1rem;
  border-radius: 2rem;
  color: white;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition:
    transform 0.5s,
    opacity 0.5s;
}

.tooltip::after,
.tooltip1::after,
.tooltipMusic::after,
.tooltipNext::after,
.tooltipPrev::after {
  content: "";
  position: absolute;
  left: 1.5rem;
  top: calc(100% - 0.3rem);
  transform: translate(-50%, -50%) rotate(45deg);
  transform-origin: center;
  width: 1rem;
  height: 1rem;
  background-color: black;
  z-index: -1;
}

.tooltip {
  left: 2rem;
  bottom: 3.5rem;
}

.tooltip1 {
  left: 7rem;
  bottom: 4.2rem;
}

.tooltipMusic {
  left: 3rem;
  bottom: 4.2rem;
}

.tooltipNext {
  bottom: 4rem;
}

.tooltipPrev {
  bottom: 4rem;
}

#voiceoverToggleBtn:hover .tooltip1,
.music-button:hover .tooltipMusic {
  visibility: visible;
  opacity: 1;
}

#gyro-btn:hover .tooltip,
#video-btn:hover .tooltip,
#galleryinfo:hover .tooltip,
#layout-btn:hover .tooltip,
#venue-partition-btn:hover .tooltip,
#compass-btn:hover .tooltip,
#measurement-btn:hover .tooltip,
#point-measurement-btn:hover .tooltip,
#zoomButton:hover .tooltip,
#auto-tour:hover .tooltip,
.lang-wrapper:hover .tooltip,
#auto-rotation:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

.closeBtn {
  position: absolute;
  z-index: 11;
  right: 7px;
  top: 8px;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-color: #0000009f;
  text-shadow: 2px 1px 10px rgb(0 0 0 / 78%);
  border: 0;
}

.darkbg {
  position: fixed;
  top: 0;
  touch-action: none;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(1, 1, 1, 0.368);
  backdrop-filter: blur(10px);
  border: 1px solid #ccc;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 11;
}

.form-container {
  padding: 0 20px;
}

#PopupContainer {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 8;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
}

#dollhouse:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

#submenu:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

#nightview-btn:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

#controller:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

#capacity-chart:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

#floor-plan:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

#voiceoverToggleBtn {
  width: 2.8rem;
  height: 2.6rem;
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0);
}

.voiceover-button {
  background-color: rgba(255, 255, 255, 1);
  top: 10px;
  border-radius: 0 2rem 2rem 0;
  margin-bottom: 0;
  border: none;
  border-left: 1px solid rgba(0, 0, 0, 0.5);
}

#musicToggleBtn {
  width: 2.8rem;
  height: 2.6rem;
}

.music-button {
  background-color: rgba(255, 255, 255, 1);
  top: 2.4rem;
  border-radius: 2rem 0 0 2rem;
  margin-bottom: 0;
  border: none;
}

#menu-container {
  display: flex;
  justify-content: space-between;

  align-items: center;
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 3;
  height: 4rem;
  transform: translateY(0);
  transition: transform 0.5s ease-out;
}

.bar.exiting {
  transform: translateY(500%);
}

/* Parent bar */
#bar {
  display: flex;
  align-items: center;
  transition: 0.3s ease;
}

/* Hidden state for all groups */
#bar.collapsed #sound,
#bar.collapsed #leftTool-btnWrap {
  max-width: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  transition: 0.3s ease;
}

/* Expanded (default) */
#bar.expanded #sound,
#bar.expanded #leftTool-btnWrap {
  opacity: 1;
  transition: 0.3s ease;
  gap: 1px;
}

/* ANIMATION for smooth collapse */
#sound,
#leftTool-btnWrap {
  transition: 0.3s ease;
}

/* Vertical mode */
#bar.vertical {
  display: flex;
  flex-direction: column-reverse !important;
  /* stack above */
  /* height: auto !important; */
  /* allow expansion upward */
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px;
  bottom: 3%;
  /* stays in same position */
}

/* Inside groups */
#bar.vertical #sound,
#bar.vertical #leftTool-btnWrap {
  display: flex;
  flex-direction: column-reverse;
  /* children go upward */
  gap: 10px;
}

/* Vertical mode for the sound group */
#bar.vertical #sound button {
  transform: rotate(90deg);
  /* rotate the pill background */
}

/* Keep icons and text upright */
#bar.vertical #sound button img,
#bar.vertical #sound button span {
  transform: rotate(-90deg);
  /* counter-rotate children */
}

#bar.vertical #sound {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#moreinfo {
  width: auto;
  display: flex;
  border: 0px solid white;
  margin: 0 2px;
  font-style: normal;
  font-size: 1rem;

  align-items: center;
  justify-content: center;
  z-index: 10;
  margin-left: 15px;
}

#moreInfo-popup {
  position: absolute;
  bottom: -8%;
  right: 1%;
  box-sizing: border-box;
  width: 400px;
  height: auto;
  justify-content: center;
  border-radius: 2.8rem;
  background-color: rgba(255, 255, 255, 65%);
  backdrop-filter: blur(8px);
  padding: 0;
  font-size: 0;
  overflow: hidden;
}

.moreinfo_title {
  border-radius: 20%;
  margin-left: 5px;

  font-style: italic;
  font-size: 1.2rem;
  line-height: 2.2rem;
}

#moreInfo-popup {
  transform: scale(0.8) translateY(15%);
}

#moreInfo-popup.show {
  visibility: visible;
  animation: popup-show 0.5s ease-out forwards;
}

#moreInfo-popup.exiting {
  animation: popup-hide 0.5s ease-in forwards;
  animation-fill-mode: forwards;
  pointer-events: none;
}

.contact-form-popup .address {
  display: flex;
  justify-content: center;
  align-items: center;
}

.address .social {
  white-space: nowrap;
  text-align: center;
  justify-content: center;
}

.social img {
  width: 40px;
}

form input,
textarea {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 100%;

  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2rem;
  padding: 1.1rem;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  resize: vertical;
}

form input,
textarea {
  background-color: rgba(0, 0, 0, 0.607);
  border-radius: 20px;
}

.input-wrapper::before {
  content: "*";
  color: red;
  font-size: 18px;
  font-weight: bold;
  margin-right: 5px;
}

.input-wrapper {
  position: relative;
}

#contact_form_submit {
  margin: 0 auto;

  font-size: 1rem;
  text-align: center;
  display: block;
  white-space: nowrap;
  color: black;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 3rem;
  border: none;
  padding: 1rem 3.2rem;
  transform: scale(1);
  transition:
    transform 0.5s,
    box-shadow 0.5s,
    background-color 0.5s;
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0);
  margin-top: 1rem;
}

.form_bg form {
  position: relative;
  display: block;
  width: 89%;
  align-items: center;
  gap: 19px;
  display: grid;
}

.form .form_bg {
  justify-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 100%;
  min-height: calc(100% - 14.5rem);
  padding: 5% 0;
  z-index: 0;
}

.contact-form-popup {
  background-color: #ffffff12;
}

.menu-option.selected,
.section-title.active {
  opacity: 1;
  font-weight: 700;
  border-bottom: 1px solid white;
  color: white;
  padding: 10px 0;
}

.address,
.form {
  flex: 1;
  border-left: 1px solid #ffffff2b;
}

.address p {
  position: relative;
  font-family: "Libre Franklin", sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  line-height: 1.3rem;
  text-align: center;
  color: #ffffffab;
  z-index: 1;
}

.address a {
  color: #ffffffab;
}

#poweredBy {
  /* position: absolute; */
  bottom: 20px;
  border: 0px;
  width: 100px;
  height: auto;
  margin-top: 5px;
  z-index: 12;
  background: #00000000;
}

.send-msg-title-line,
.contact-title-line {
  height: 1px;
  width: 96%;
  background-color: #fff;
  opacity: 0.5;
  margin-bottom: 2rem;
}

#contact-content h3 {
  font-weight: inherit;
  text-align: center;
}

#contact-content {
  height: 100%;
  width: 100%;
}

.moreinfo_title {
  border-radius: 20%;
  margin-left: 5px;

  font-style: italic;
  font-size: 1.2rem;
  line-height: 2.2rem;
}

.moreInfo-para {
  font-size: 1rem;
  color: black;
  overflow-y: auto;
  text-align: left;
}

.moreInfo-content {
  display: block;
  width: 90%;
  height: 80%;

  font-size: 1.6rem;
  color: black;
  overflow-y: auto;
  padding: 0.6rem 1.6rem 4rem 1.6rem;
}

.moreInfo-content h2 {
  font-weight: 500;

  font-size: 40px;
}

.more-info-panel {
  position: fixed;
  bottom: 3%;
  right: 0%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  transform: translateY(0);
  transition: transform 0.05s ease-out;
  z-index: 4;
  display: none;
}

.dropdowninner-toggle {
  display: none;
}

.menu-option,
.section-title {
  font-size: 1.8rem;
  height: auto;
  vertical-align: bottom;
  margin: 0;
  padding: 0;
  width: 100% !important;
  display: block;
  background-color: transparent;
  color: #fff;
  font-style: normal !important;
  cursor: pointer;
  opacity: 0.7;
  border: 0 solid transparent;
  border-bottom-width: 1px;
}

#contact-dropdown {
  display: flex;
  justify-content: left;
  position: static;
  background-color: #ffffff00;
  padding: 0;
}

.brandingbutton {
  /* background-color: #fab317 !important; */
  /* border: 1px solid #ffffffc2 !important; */
  /* color: #ffffff !important; */
  cursor: pointer !important;
}

/* TODO CSS COPIED END */
.immagers {
  padding: 2px;
  margin: 0;
  height: 22px;
  width: 22px;
  background: transparent;
  border: none;
}

#contactFullDropdown.show {
  animation:
    slideContactIn 0.5s ease forwards,
    fadeBG 0.8s ease forwards;
}

@keyframes fadeBG {
  0% {
    opacity: 0;
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(0px);
  }

  100% {
    opacity: 1;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
  }
}

.closebox,
.img-box {
  background-size: 17px;
  background-repeat: no-repeat;
  background-color: white;
  border-radius: 70px;
  background-position: center;
  width: 40px;
  height: 40px;
}

.share-actions {
  display: flex;
  gap: 5px;
}

.closebox {
  background-image: url(https://fj.hotelyug.com/content/icons/close.png);
  border: 2px solid #000000;
  filter: invert(1);
}

.img-box {
  background-image: url(https://fj.hotelyug.com/content/icons/arrowhead-up.png);
}

@keyframes slideContactIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.Bcenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

.Popup-title {
  display: block;
  font-size: 35px;
  font-weight: 600;
  width: 100%;
  text-align: center;
}

.capacity-table th,
.capacity-table td {
  border: 1px solid #ccc;
  padding: 10px;
  white-space: nowrap;
  text-align: center;
  font-size: 15px;
}

.capacity-chart {
  background-color: white;
  height: fit-content;
  padding: 17px;
  width: 100;
  border-radius: 40px;
  position: relative;
}

.tooltip {
  white-space: nowrap !important;
}

#mainGalleryImage {
  width: 100%;
  height: auto;
}

.image-scroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 10px;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  white-space: nowrap;
  width: fit-content;
}

/* Hide scrollbars (optional) */
.image-scroll::-webkit-scrollbar {
  display: none;
}

.thumb {
  height: 100px;
  width: auto;
  border: 2px solid #ffffff47;
  cursor: pointer;
  border-radius: 10px;
  scroll-snap-align: start;
  transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Scale on hover with bounce */
.thumb:hover {
  transform: scale(1.12);
  z-index: 10;
}

#thumbContainer .active {
  transform: scale(1.03);
  border: 2px solid #00b2ff;
  padding: 1px;
  z-index: 10;
}

td:first-child {
  font-weight: bold;
  color: #333;
}

th {
  background-color: #efefef;
}

@keyframes bounceScale {
  0% {
    transform: scale(1);
  }

  60% {
    transform: scale(1.15);
  }

  100% {
    transform: scale(1.1);
  }
}

.mainGalleryBg {
  width: 55%;
  background-color: rgb(255, 255, 255);
  backdrop-filter: blur(10px);
  overflow: hidden;
  padding: 6px;
  display: grid;
  position: relative;
}

#popupImageGalleryOverlay {
  position: fixed;
  inset: 0;
  background-color: rgba(1, 1, 1, 0.368);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
}

.atm-more-info-popup {
  position: fixed;
  bottom: 32px;
  right: 13px;
  width: fit-content;
  max-width: 480px;
  background: #ffffffde;
  border-radius: 36px;
  padding-bottom: 50px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.25);
  z-index: 4;
  display: block;
  opacity: 0;
  transform: scale(0.8);
  pointer-events: none;
  transition: opacity 0.3s ease-out;
}

.atm-more-info-popup.atm-open {
  opacity: 1;
  pointer-events: auto;
  animation: popupBounceOpen 0.25s ease-out forwards;
}

#subTitleArrow,
#mainTitleArrow {
  display: none;
}

.atm-more-info-popup.atm-close {
  opacity: 0;
  pointer-events: none;
  animation: popupBounceClose 0.35s ease-in forwards;
}

.moreInfo-title {
  padding: 20px 28px 10px 28px;
}

.moreInfo-para {
  padding: 10px 28px;
}

/* OPEN bounce animation */
@keyframes popupBounceOpen {
  0% {
    transform: scale(0.7);
  }

  60% {
    transform: scale(1.05);
  }

  80% {
    transform: scale(0.97);
  }

  100% {
    transform: scale(1);
  }
}

/* CLOSE bounce animation */
@keyframes popupBounceClose {
  0% {
    transform: scale(1);
  }

  30% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(0.7);
  }
}

.atm-toggle-btn {
  justify-content: space-between;
  position: fixed;
  bottom: 3.5%;
  right: 16px;
  border: 0;
  padding-left: 27px;
  gap: 10px;
  height: 2.5rem;
  padding-right: 4px;
  border-radius: 55px;
  background: #ffffffcf;
  display: flex;
  /* color: white; */
  cursor: pointer;
  z-index: 4;
  align-items: center;
}

.expanded #setting-btn {
  background-image: url(https://waterkingdom.hotelyug.com/img/close.png);
  filter: invert(1);
  background-size: 17px;
  background-repeat: no-repeat;
  background-color: white;
  border-radius: 70px;
  background-position: center;
  width: 40px;
  border: 1px solid #000000;
  height: 40px;
}

.collapsed #setting-btn {
  background-image: url(https://waterkingdom.hotelyug.com/img/settings.png);
  background-size: 22px;
  background-blend-mode: exclusion;
  background-repeat: no-repeat;
  background-color: white;
  border-radius: 70px;
  background-position: center;
  width: 40px;
  height: 40px;
}

#share-link-btn,
#book-now-btn {
  display: flex;
  border-radius: 40px;
  width: 115px;
  justify-content: space-around;
  color: rgb(0, 0, 0);
  border: 0;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  height: 2.5rem;
  cursor: pointer;
  z-index: 2;
  position: fixed;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  right: 140px;
  top: 10px;
}

#book-now-btn {
  background-color: #1893d6;
  right: 270px;
  color: white;
  justify-content: space-around;
  width: 149px;
}

#book-now-btn .icon-contact,
#share-link-btn .icon-contact {
  filter: invert(1);
}

#share-link-btn:hover,
#book-now-btn:hover {
  box-shadow: 0 0 1rem rgba(255, 255, 255, 0.979);

  transform: scale(1.05);
}

#share-link-btn *,
#book-now-btn * {
  cursor: pointer;
}

/* TODO AT HARSHAD BHAI PLZ REVEIW BELOW CLASSESS */
.share-popup {
  position: fixed;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  backdrop-filter: blur(10px);
  opacity: 1;
  background-color: rgba(0, 0, 0, 0.6);
  padding: 23px 20px;
  color: #fff;
  border-radius: 6px;
  z-index: 4;
}

#shareInput {
  background-color: rgba(0, 0, 0, 0.607);
  border-radius: 20px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.2rem;
  padding: 1.1rem;
  width: 386px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.share-container {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.share-container button {
  background: #333;
  color: #fff;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
}

.share-container button:hover {
  background: #444;
}

.hidden {
  display: none;
}

.copy-status {
  font-size: 12px;
  opacity: 0;
  transition: opacity 0.3s;
}

.copy-status.visible {
  opacity: 1;
}

#errorPopupDiv {
  background: #7b7b7b;
  width: 650px;
  height: 370px;
  color: white;
  width: 650px;
  height: 370px;

  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.pc {
  display: block;
}

.mobile {
  display: none;
}

.vtutorial-box {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.6s ease;
}

.vtutorial-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.6s ease;
}

/* AT HARSHAD BHAI PLZ REVEIW BELOW CLASSESS END HERE*/

@media only screen and (max-width: 800px) and (orientation: portrait) {
  .atmnav-group-header {
    padding: 18px;
  }

  .pc {
    display: none;
  }

  #floating-video {
    display: none !important;
  }

  .mobile {
    display: block;
  }

  #floating-video {
    display: none !important;
  }

  .logGrid {
    display: grid;
    height: 100%;
  }

  .tool-audio {
    display: none !important;
  }

  .address,
  .form {
    flex: 1;
    border-left: 0;
  }

  .lang-wrapper {
    transform: rotate(0deg) !important;
  }

  .skygradient {
    border-radius: 0 0 15px 15px;
    width: 100%;
    border-top: 1px solid #dce7f5;
    padding-top: 40px;
    padding-bottom: 70px;
    border-left: inherit;
  }

  .Grid5 .fonter18 {
    width: 320px;
    display: block;
  }

  .Grid5 {
    width: 100%;
    gap: 25px;
  }

  #loginPopup {
    width: 96%;
    height: auto;
  }

  #submenu_buttons_container {
    display: grid !important;
  }

  #errorPopupDiv {
    width: 96%;
    height: auto;
  }

  .share-popup {
    width: 99%;
    top: 16%;
  }

  #shareInput {
    width: auto;
  }

  #share-btn-text,
  #book-btn-text {
    display: none;
  }

  .share-actions {
    justify-content: space-between;
  }

  .tooltip {
    display: none !important;
    opacity: 0 !important;
  }

  #share-link-btn {
    height: 2.5rem;
    width: 2.5rem;
    right: 60px;
  }

  #errorPopupDiv {
    width: 96%;
    height: auto;
  }

  .contact-form-popup .address {
    padding-top: 90px;
  }

  #map-location-content {
    height: 700px;
  }

  #poweredBy {
    position: initial;
  }

  #voiceoverToggleBtn {
    width: 2.5rem;
    transform: rotate(90deg);
    border-radius: 2rem 2rem 0 0;
  }

  #musicToggleBtn {
    width: 2.5rem;
    transform: rotate(90deg);
    border-radius: 0 0 2rem 2rem;
  }

  #discoverFullDropdown {
    position: fixed;
    width: 100vw;
    left: 0;
    top: 0;
  }

  .image-set {
    display: flex;
    align-items: center;
    overflow-y: hidden;
    overflow-x: auto;
    height: 90%;
  }

  .atm-more-info-popup {
    max-width: 95%;
  }

  .capacity-chart {
    width: 99%;
    height: 99%;
  }

  .BtnDiv {
    display: none;
  }

  .setting-buttons-panel {
    transform: rotateZ(0deg);
    left: 0%;
  }

  #video-btn,
  #dollhouse,
  #controller,
  #submenu,
  #nightview-btn,
  #galleryinfo,
  #measurement-btn,
  #point-measurement-btn,
  #compass-btn,
  #capacity-chart,
  #venue-partition-btn,
  #venue-partition-btn {
    transform: rotateZ(90deg);
  }

  #langSelector {
    transform: rotateZ(90deg) !important;
  }

  #sound .music-button .voiceovericon,
  #sound .voiceover-button .voiceovericon {
    transform: rotate(90deg);
  }

  .GI {
    overflow-x: auto;
  }

  .mainGalleryBg {
    width: 100%;
    height: 100%;
    display: grid;
    display: grid;
    grid-template-rows: 1fr auto;
  }

  #mainGalleryImage {
    width: auto;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .contact-bg {
    width: 100%;
    height: 100vh;
    overflow-y: auto;
  }

  .contact-form-popup .address {
    display: flex;
    justify-content: center;
    align-items: center;
    border-left: none;
    border-bottom: 1px solid #ffffff2b;
    height: 456px;
  }

  #logo-click {
    width: 4rem;
    border-radius: 31px;
  }

  #intro-id {
    display: grid;
    grid-template-rows: auto 1fr;
  }

  #discoverBtn-wrapper,
  #contactBtn-wrapper {
    width: 4rem;
    height: 3.5rem;
  }

  #contact-btn,
  #audioLangButton,
  #discover-btn,
  #moreinfo {
    display: none;
  }

  .sectionBox-container {
    width: 92%;
    display: grid;
    flex-direction: column;
    height: fit-content;
    gap: 24px;
  }

  #bar {
    position: absolute;
    left: 5%;
    transform: rotate(-90deg);
    padding: 0;
  }

  .section-box {
    height: fit-content !important;
    width: 100% !important;
  }

  #contactFullDropdown {
    width: 100%;
  }

  #overr {
    display: none;
  }

  #langSelector {
    width: 0px;
  }

  .logo-size-ico {
    height: 71px;
    margin-top: 18px;
    margin-left: 9px;
  }

  #Intro-Header {
    font-size: 28px;
    width: 100%;
    padding: 20px;
  }

  .section-header h1 {
    font-size: 1.2rem;
  }

  .image-row {
    height: inherit;
    background-color: rgba(245, 245, 220, 0);
    padding: 10px;
  }

  .icon-discover,
  .icon-contact {
    width: 1rem;
  }

  .menu-option,
  .section-title {
    font-size: 15px;
  }

  .contact-form-popup {
    display: grid;
    overflow-y: auto;
    height: auto;
    padding-bottom: 4rem;
  }

  .atm-toggle-btn {
    color: transparent;
    background: transparent;
    padding: 0;
    font-size: 0;
  }

  .atm-more-info-popup.atm-open {
    bottom: 70px;
  }
}

@media screen and (max-height: 800px) {
  .atm-more-info-popup.atm-open {
    bottom: 70px;
  }

  .contact-form-popup .address {
    padding-top: 90px;
  }

  .logo-size-ico {
    height: 71px;
    margin-top: 18px;
    margin-left: 9px;
  }

  .atm-toggle-btn {
    color: transparent;
    background: transparent;
    padding: 0;
    font-size: 0;
  }

  /* .atm-toggle-btn:hover,
  #langSelector:hover,
  #auto-rotation:hover,
  #measurement-btn:hover,
  #compass-btn:hover,
  #capacity-chart:hover,
  #venue-partition-btn:hover,
  #floor-plan:hover,
  #musicToggleBtn:hover,
  #galleryinfo:hover,
  #voiceoverToggleBtn:hover,
  #zoomButton:hover,
  #left-btn:hover,
  #right-btn:hover,
  #auto-tour:hover {
    /* background: unset;
    box-shadow: unset; */
  /* transform: rotate(90deg); */
  /* } */

  .contact-form-popup {
    display: grid;
    height: auto;
    overflow-y: auto;
  }

  .contact-dropdown {
    overflow-y: auto;
    height: auto;
  }

  #map-location-content {
    height: 500px;
  }

  #Intro-Header {
    font-size: 28px !important;
  }

  .menu-option,
  .section-title {
    font-size: 15px;
  }

  .section-header h1 {
    font-size: 1.1rem;
    font-weight: 600;
    padding: 10px 0;
    display: flex;
    align-items: center;
    margin: 0;
  }

  #intro-id {
    display: grid;
    grid-template-rows: 32% 1fr;
  }

  .section-box {
    height: fit-content !important;
    width: 100% !important;
  }

  .sectionBox-container {
    height: fit-content;
    max-width: 99%;
  }

  #contactFullDropdown {
    width: 100%;
  }

  .image-row {
    height: inherit;
    width: 100%;
    padding: 10px;
  }
}

@media (max-width: 1320px) {
  .section-box {
    height: fit-content !important;
    width: 100% !important;
  }

  .tooltip1,
  .tooltip,
  .tooltipMusic {
    visibility: hidden !important;
  }

  #discoverBtn-wrapper,
  #contactBtn-wrapper {
    width: 3rem;
    height: 2.5rem;
  }

  #loginPopup {
    width: 96%;
    height: 96%;
  }

  #share-btn-text,
  #book-btn-text {
    display: none;
  }

  #share-link-btn {
    width: 2.5rem;
    height: 2.5rem;
    right: 60px;
  }

  #book-now-btn {
    width: 2.5rem;
    height: 2.5rem;
    right: 118px;
  }

  .mainGalleryBg {
    width: 100%;
    height: 100%;
  }

  #contact-btn,
  #audioLangButton,
  #discover-btn,
  #moreinfo {
    display: none;
  }

  .image-set {
    overflow: auto;
    height: 89%;
  }

  .capacity-chart {
    width: 99%;
    height: 99%;
  }

  .Popup-title {
    font-size: 20px;
  }

  .contact-bg {
    overflow-y: auto;
  }

  #intro-id {
    grid-template-rows: auto 1fr;
  }

  .image-row {
    padding: 5px;
  }

  #Intro-Header {
    font-size: 2rem;
  }

  .logo-size-ico {
    height: 50px;
    margin-top: 10px;
    /* border: 2px solid #e7d37257; */
    margin-left: 10px;
  }

  .sectionBox-container {
    height: fit-content;
    max-width: 99%;
  }
}

.moreInfo-title,
#bottomCatGroupBtn,
.atmnav-category-title,
.menu-option,
#Intro-Header,
.section-header,
#contact_form_submit,
#contact-form-content h4,
#bottomSceneBtn {
  font-family: "Arial", serif !important;
  font-weight: 600;
}

/* Auto Tour active state */
.autotour-active {
  opacity: 0;
  pointer-events: none;
  /* transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.3s ease; */
}

#autoTourCloseBtn {
  display: block;
  /* background-color: rgba(255, 0, 0, 0.136); */
  z-index: 11;
  position: fixed;
  width: 100%;
  height: 100%;
}

#musicToggleBtn {
  background-size: 37px;
  background-repeat: no-repeat;
  background-color: white;
  background-position: center;
  border: 0px solid #000000;
}

.musicOff {
  background-image: url(https://waterkingdom.hotelyug.com/img/icon_ambient_off.png) !important;
  background-size: 37px;
  background-repeat: no-repeat;
  background-color: white;
  background-position: center;
  border: 0px solid #000000;
}

#voiceoverToggleBtn {
  background-size: 37px;
  background-repeat: no-repeat;
  background-color: white;
  background-position: center;
  border: 0px solid #000000;
}

#popupOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  background-color: rgb(0, 0, 0);
  height: 100vh;
  backdrop-filter: blur(5px);
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
}

#apiLoading .logo-size-ico {
  position: absolute;
  width: 135px;
  height: auto;
  padding: 0;
  margin: 0;
}

@media (max-width: 1858px), (max-height: 768px) {
  #bar {
    transform: rotate(-90deg);
    bottom: -24px;
    left: 36px;
    /* background-color: #007bff; */
  }

  #musicToggleBtn {
    transform: rotate(90deg);
    border-radius: 0 0 50% 50%;
    border: 0;
    width: 42px;
  }

  .lang-wrapper {
    transform: rotate(90deg);
  }

  #langSelector {
    width: 1px;
  }

  .tooltip,
  .tooltip1 {
    /* display: none !important; */
  }

  #gyro-btn,
  #video-btn,
  #galleryinfo,
  #capacity-chart,
  #auto-rotation,
  #auto-tour,
  #controller,
  #submenu,
  #nightview-btn,
  #dollhouse,
  #venue-partition-btn {
    transform: rotate(90deg);
  }

  #voiceoverToggleBtn {
    transform: rotate(90deg);
    border-radius: 50% 50% 0 0;
    border: 0;
    width: 42px;
  }

  #capacity-chart span {
    left: 120px !important;
    bottom: 0px;
  }

  .lang-wrapper span,
  #dollhouse span,
  #submenu span,
  #nightview-btn span,
  #controller span,
  #galleryinfo span,
  #video-btn span,
  #capacity-chart span,
  #auto-rotation span,
  #voiceoverToggleBtn span,
  #musicToggleBtn span,
  #auto-tour span,
  #gyro-btn span,
  #venue-partition-btn span,
  #capacity-chart span {
    left: 55px !important;
    bottom: 0px !important;
    transform: none;
    transform-origin: 0%;
  }

  .tooltip::after,
  .tooltipMusic::after,
  .tooltip1::after {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: calc(100% - 1.1rem);
    transform: translate(-50%, -50%) rotate(132deg);
    transform-origin: center;
    width: 1rem;
    height: 1rem;
    background-color: black;
    z-index: -1;
  }

  .contact-bg {
    overflow-y: auto;
  }

  .atmnav-drop-group,
  .atmnav-drop-item,
  .atmnav-drop-cat-title {
    padding: 0.6rem 1.6rem;
  }

  .atmnav-dropdown {
    padding: 11px 4px !important;
    max-height: 560px !important;
    overflow-y: auto !important;
  }

  /* laptop-specific styles */
}

/* .tooltip,
.tooltipMusic,
.tooltip1 {
  transform: none;
  opacity: 1 !important;
  transform-origin: 0%;
} */
.voice-span,
.audio-span {
  display: flex;
  font-size: 15px;
  align-items: flex-end;
}

.voice-span img,
.audio-span img {
  width: 50px;
}

#audio_controls {
  margin: 20px;
}

.tool-audio {
  width: max-content !important;
}

.vtp-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(10, 10, 20, 0.85);
  backdrop-filter: blur(4px);
  justify-content: center;
  align-items: center;
}

.vtp-container {
  position: relative;
  width: 85%;
  max-width: 1000px;
  background: #000;
  padding: 12px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  animation: vtpFadeIn 0.3s ease;
}

.vtp-player {
  width: 100%;
  border-radius: 12px;
}

@keyframes vtpFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.kr-exit-dollhouse-btn {
  border-radius: 40px 0px 0px 40px;
  padding: 0 25px;
  width: auto;
  justify-content: space-around;
  color: rgb(0, 0, 0);
  border: 0;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  height: 2.5rem;
  cursor: pointer;
  z-index: 2;
  position: fixed;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  right: 0px;
  top: 13px;
}

.kr-end-video-btn {
  border-radius: 40px 0px 0px 40px;
  padding: 0 25px;
  width: auto;
  justify-content: space-around;
  color: rgb(0, 0, 0);
  border: 0;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  height: 2.5rem;
  cursor: pointer;
  z-index: 100;
  position: fixed;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  right: 0px;
  top: 73px;
}

#floating-video {
  position: fixed;
  bottom: 7%;
  right: 20px;
  width: 150px;
  height: 220px;
  cursor: grab;
  z-index: 20;
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(0px);
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0); */
  touch-action: none;
  background: transparent;
  /* display: none !important; */
}

#floating-video:active {
  cursor: grabbing;
}

/* 🔒 scoped ONLY to floating video */
#floating-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  /* no controls */
  background: transparent;
}

.vtutorial-hidden {
  display: none;
}

#vtutorial-box {
  position: fixed;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;

  background: rgba(0, 0, 0, 0.85);
  color: white;
  padding: 14px 18px;
  border-radius: 12px;

  min-width: 260px;
  max-width: 420px;

  text-align: center;
  font-size: 14px;

  backdrop-filter: blur(6px);

  animation: vtutorialSlideDown 0.3s ease;
}

#vtutorial-box img {
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  margin-bottom: 10px;
  border-radius: 8px;
}

@keyframes vtutorialSlideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

#submenu_buttons_container {
  display: flex;
  background-color: #ffffff75;
  padding: 7px;
  border-radius: 15px;
  align-items: anchor-center;
  gap: 20px;
}

#submenu_buttons_container button {
  width: 50px;
  height: 50px;
  transform: rotate(0deg);
}

.submenuContainer {
  top: 0px;
  left: 0px;
  position: fixed;
  width: 100%;
  height: 100%;
  justify-content: center;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  align-items: center;
}

#exit_submenu_buttons {
  border-radius: 40px 0px 0px 40px;
  padding: 0 25px;
  width: auto;
  justify-content: space-around;
  color: rgb(0, 0, 0);
  border: 0;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  height: 2.5rem;
  cursor: pointer;
  z-index: 2;
  position: fixed;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform-origin: center;
  right: 0px;
  top: 13px;
}

@media (max-height: 408px) {
  #floating-video {
    display: none !important;
  }

  #bottomCatGroupDropdown,
  #bottomSceneDropdown {
    overflow-y: auto !important;
    height: 250px;
  }

  #floating-video {
    display: none !important;
  }
}

.main-image-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

#mainGalleryImage {
  max-width: 100%;
  transition:
    filter 0.4s ease,
    opacity 0.4s ease;
}

.image-loading {
  filter: blur(12px);
  opacity: 0.6;
}

.image-loaded {
  filter: blur(0);
  opacity: 1;
}

.gallery-loader {
  position: absolute;
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 255, 255, 0.3);
  border-top: 4px solid rgb(255, 0, 0);
  border-radius: 50%;
  animation: gallerySpin 1s linear infinite;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  /* important */
}

@keyframes gallerySpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.close {
  background-image: var(--img-close);
}

.menu {
  background-image: var(--img-menu);
}

.audio-off {
  background-image: var(--img-audio-off) !important;
}

.ambient-on {
  background-image: var(--img-ambient-on);
}

.copy {
  background-image: var(--img-copy);
}

.music-button {
  background-image: url(https://waterkingdom.hotelyug.com/img/icon_ambient_on.png);
}

.musicOff {
  background-image: url(https://waterkingdom.hotelyug.com/img/icon_ambient_off.png);
}

.voiceover-button {
  background-image: url(https://waterkingdom.hotelyug.com/img/icon_audio_on.png);
}

.voiceOverOff {
  background-image: url(https://waterkingdom.hotelyug.com/img/icon_audio_off.png) !important;
}

#viewer {
  width: 100% !important;
  height: 100% !important;
  display: block;
  position: fixed !important;
  top: 0;
  left: 0;
  background: transparent !important;
  z-index: 80;
}

#viewer canvas {
  height: 100% !important;
  width: auto !important;
}

.moreInfo-title,
#bottomCatGroupBtn,
.atmnav-category-title,
.menu-option,
#Intro-Header,
.section-header,
#discover-btn,
.skip-intro,
#book-now-btn,
#share-link-btn,
#contact-btn,
#atmMoreInfoToggleBtn,
#contact_form_submit,
#contact-form-content h4,
#bottomSceneBtn {
  /* font-family: 'Dahlia', serif !important; */
  /* letter-spacing: 1px; */
  /* font-weight: 600; */
}

#viewer video {
  height: 100% !important;
  width: auto !important;
}

/* Instruction */
.section-box {
  position: relative;
}

.click-indicator {
  position: absolute;
  /* or fixed */
  top: 60%;
  left: 60%;
  /* adjust position */
  z-index: 1000;
  pointer-events: none;
  /* allows clicks through image */
}

.click-indicator img {
  width: 120px;
  /* adjust size */
  animation: bounceHint 3s infinite;
}

@keyframes bounceHint {
  0%,
  75%,
  100% {
    transform: translateY(0) scale(1);
  }

  /* Move down and compress (click) */
  80% {
    transform: translateY(8px) scale(0.9);
  }

  /* Release */
  85% {
    transform: translateY(0) scale(1);
  }

  /* Second click */
  90% {
    transform: translateY(8px) scale(0.9);
  }

  95% {
    transform: translateY(0) scale(1);
  }
}

.pano-hint {
  position: fixed;
  top: 0px;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2b2b2b7e;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  z-index: 5;
}

.finger {
  font-size: 42px;
  display: inline-block;
  animation: dragHint 2s ease-in-out infinite;
}

.pano-hint p {
  margin-top: 10px;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

@keyframes dragHint {
  0% {
    transform: translateX(-30px);
  }

  50% {
    transform: translateX(30px);
  }

  100% {
    transform: translateX(-30px);
  }
}
/* Instruction End Here */