/* import the fonts */

/* Variable font Montserrat . Used mainly for titles and labels */
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/Montserrat-VariableFont_wght.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

/* Fixed font Manrope regular - used for body text  */
@font-face {
  font-family: "Manrope";
  src: url("assets/fonts/Manrope-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Fixed font Manrope regular bold - used for some labels too. Used for thumbnail title texts too */
@font-face {
  font-family: "Manrope-bold";
  src: url("assets/fonts/Manrope-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}


  /* Replace the fonts */

body { font-family: Montserrat, Helvetica, Arial, sans-serif; }
.secondary_font { font-family: "Manrope", sans-serif; font-weight: 400; }
.secondary_font_bold { font-family: "Manrope-bold", sans-serif; font-weight: 600; }



  /* Background canvas */

#container > div,
#container canvas {
  background: #191919 !important;
	color: #191919 !important;;
}





/* Define text styles */


.panorama_title {
  font-size: 26px;
  font-weight: 800;
}

.panorama_title_mobile {
  font-size: 20px;
  font-weight: 800;
}

.panorama_title_tablet {
  font-size: 24px;
  font-weight: 800;
}

.thumb_title {
  font-size: 13px;
  font-weight: 700;
}

.cat_title {
  font-size: 15px;
  font-weight: 800;
}

.cat_menu_title {
  font-size: 13px;
  font-weight: 600;
}

.website_text {
  font-size: 13px;
}

.website_text_mobile {
  font-size: 12px;
}

.tooltip_txt {
  font-size: 12px;
}

.label_100 {
  font-size: 10px;
}


.panorama_title_description {
  font-size: 18px;
}

.body_text {
  font-size: 14px;
}

.proj-not {
  left: 0 !important;
  width: 100% !important;
}

.lang_btns {
  font-size: 15px;
  font-weight: 300;
}

.card_title {
  font-size: 16px;
  font-weight: 800;
}




/* Design styling */

.inner_stroke_1px {
  box-shadow: inset 0 0 0 1px #fff;
    
}

.inner_stroke_2px {
  box-shadow: inset 0 0 0 2px #fff;
    
}

.visibility-shadow {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45))
    
}

.icon-shadow {
  filter:
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6))
    /*drop-shadow(0 0 4px rgba(0, 0, 0, 0.35));*/
}



.bg-blur-normal {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.bg-blur-startup {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.dot-scrollarea {
  padding-bottom: 38px !important;
  box-sizing: border-box !important;
}

#dot_tooltip_image img[src=""] { display: none; }


.bg-gradient-b {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.30) 35%,
    rgba(0, 0, 0, 0.00) 100%
  );
}

.bg-gradient-t {
  position: relative;
  overflow: hidden;

  /* Fallback gradient for older engines */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.53) 12%,
    rgba(0, 0, 0, 0.44) 24%,
    rgba(0, 0, 0, 0.34) 36%,
    rgba(0, 0, 0, 0.24) 50%,
    rgba(0, 0, 0, 0.16) 64%,
    rgba(0, 0, 0, 0.09) 76%,
    rgba(0, 0, 0, 0.05) 86%,
    rgba(0, 0, 0, 0.02) 92%,
    rgba(0, 0, 0, 0.00) 96%,
    rgba(0, 0, 0, 0.00) 100%
  );
  /* Perceptual interpolation (supported in modern browsers) */
  background: linear-gradient(
    to bottom in oklab,
    rgb(0 0 0 / 0.62) 0%,
    rgb(0 0 0 / 0.53) 12%,
    rgb(0 0 0 / 0.44) 24%,
    rgb(0 0 0 / 0.34) 36%,
    rgb(0 0 0 / 0.24) 50%,
    rgb(0 0 0 / 0.16) 64%,
    rgb(0 0 0 / 0.09) 76%,
    rgb(0 0 0 / 0.05) 86%,
    rgb(0 0 0 / 0.02) 92%,
    rgb(0 0 0 / 0) 96%,
    rgb(0 0 0 / 0) 100%
  );
}


/* Design styling end */








/* Start screen */

.start_txtbtns_cont {
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 20px !important;
  width: calc(100% - 160px) !important;
  height: calc(100% - 160px) !important;
}

@media (max-width: 1024px) {
  .start_txtbtns_cont {
    width: calc(100% - 20px) !important;
    height: calc(100% - 40px) !important;
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .start_txtbtns_cont {
    width: calc(100% - 20px) !important;
    height: calc(100% - 60px) !important;
  }
}

.start_texts_cont {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 0px !important;
}

.start_title_txt {
  position: static !important;
  transform: none !important;
  order: 1 !important;
  font-size: 30px;
  font-weight: 800;
}

.start_subtitle_txt {
  position: static !important;
  transform: none !important;
  order: 2 !important;
  font-size: 14px;
  font-weight: 800;
}


.start_btn_bg {
  position: static !important;
  left: auto !important;
  bottom: auto !important;
  translate: none !important;
  order: 3 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  height: auto !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}



.start_btn_txt {
  font-size: 16px;
  font-weight: 600;
  position: static !important;
  transform: none !important;
}

.start_main_bg {
  background:
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.4) 45%,
      rgba(0, 0, 0, 0.55) 72%,
      rgba(0, 0, 0, 0.7) 100%
    ) !important;
}


/* Start screen end */



.descr-text-layout {
  left: 50% !important;
  right: auto !important;
  width: calc(100vw - 60px) !important;
  max-width: 600px !important;
  transform: translateX(-50%) !important;
  box-sizing: border-box !important;
}

.labels {
  font-size: 12px;
}

/* Step 1: project notification CTA width hugs text */
.proj-not__cta {
  width: auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 48px) !important;
  height: 40px !important;

  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}

.proj-not__cta > .ggskin_textdiv {
  position: static !important;
  top: auto !important;
  transform: none !important;

  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  padding: 0 30px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* Step 3: stack content + CTA inside proj_not_bg */
.proj-not__card {
  position: relative !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 30px !important;
  padding: 50px 40px !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
}

.cont_blur_animate {
  background: rgba(0, 0, 0, 0.0784314) !important;
  margin: 0 !important;
  padding: 10px !important;
  border-radius: 34px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.cont_blur_animate.directlink-mobile-width {
  width: calc(100vw - 20px) !important;
  max-width: calc(100vw - 20px) !important;
}

.cont_blur_animate.directlink-mobile-width > .proj-not__card {
  width: 100% !important;
  max-width: 100% !important;
}

.cont_blur_animate > .proj-not__card {
  left: 0 !important;
  top: 0 !important;
}

.proj-not__card > .proj-not__content,
.proj-not__card > .proj-not__cta {
  position: static !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  transform: none !important;
}

.proj-not__card > .proj-not__content {
  order: 0 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  flex: 0 0 auto !important;
}

.proj-not__card > .proj-not__cta {
  order: 1 !important;
  align-self: center !important;
}

.proj-not__content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 18px !important;
}

.proj-not__content > .proj-not__title,
.proj-not__content > .proj-not__text {
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

.proj-not__content > .proj-not__title {
  order: 0 !important;
}

.proj-not__content > .proj-not__text {
  order: 1 !important;
}

.directlink__label {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  order: 1 !important;
  will-change: opacity !important;
}

.directlink__label > .ggskin_textdiv {
  color: rgba(255, 255, 255, 0.78) !important;
  text-align: center !important;
  white-space: normal !important;
  padding: 0 !important;
}

.directlink__url {
  position: static !important;
  width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  margin: 0 !important;
  order: 2 !important;
}

.directlink__url > .ggskin_textdiv {
  background: rgba(255, 255, 255, 0.92) !important;
  color: rgba(20, 20, 20, 1) !important;
  border-radius: 20px !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 14px !important;
  line-height: 34px !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  text-overflow: clip !important;
  user-select: text !important;
  -webkit-user-select: text !important;
  cursor: text !important;
  box-sizing: border-box !important;
  display: block !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.directlink__url > .ggskin_textdiv::-webkit-scrollbar {
  display: none !important;
}

/* Direct link modal only: center on viewport */
.proj-not:has(.directlink__label) {
  top: 0 !important;
  bottom: auto !important;
}

.proj-not:has(.directlink__label) > .cont_blur_animate {
  top: 50% !important;
  bottom: auto !important;
  transform: translate(-50%, -50%) !important;
}


.menu_items {
  font-size: 14px;
  line-height: 136%;
}

.lang_btn {
  font-weight: 500;
  font-size: 15px;
  line-height: 115%;
}







/* Description custom scrollbar (Pano2VR description_text) */
.descr-scrollarea {
  position: relative;
  overflow: hidden !important;
}

.descr-scrollarea > .descr-scrollarea-track-v {
  position: absolute;
  box-sizing: border-box;
  width: 3px;
  background: rgba(0, 0, 0, 0.15);
  z-index: 3;
  transition: opacity 0.2s ease;
}

.descr-scrollarea > .descr-scrollarea-track-v > .descr-scrollarea-bar-v {
  position: absolute;
  box-sizing: border-box;
  left: 0;
  width: 3px;
  top: 0;
  height: 30%;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 0;
  cursor: pointer;
}

.descr-scrollarea-track-v.descr-scrollarea-track-hidden {
  opacity: 0;
  pointer-events: none;
}

/* Hide native scrollbar only for this custom scroller host. */
.descr-scrollarea > .descr-scrollarea-scroller {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.descr-scrollarea > .descr-scrollarea-scroller::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Mobile left-side button stack used by buttons_bg and mobile button clones. */
.mobile-btn-stack {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  position: relative !important;
  gap: 4px !important;
  top: 50% !important;
  width: max-content !important;
  width: fit-content !important;
  height: max-content !important;
  height: fit-content !important;
  padding: 0 !important;
  border-radius: 40px !important;
  transform: translateY(-50%) !important;
  overflow: visible !important;
  isolation: isolate !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.mobile-btn-stack::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}

.mobile-btn-stack > * {
  z-index: 1;
}

/* Standard mobile buttons become flex items inside the stack. */
.mobile-btn-stack > .mobile-btn-item:not(.mobile-lang-item) {
  position: static !important;
  margin: 0 !important;
}

/* Mobile language container stays positioned for its absolute submenu. */
.mobile-lang-item {
  position: relative !important;
  overflow: visible !important;
}

/* Mobile language submenu can float outside the stack without clipping. */
.mobile-lang-menu {
  z-index: 30 !important;
  background-color: rgba(0, 0, 0, 0.1);
  isolation: isolate !important;
}