/* __V3D_TEMPLATE__ - template-based file; delete this line to prevent this file from being updated */

body {
  font-family: 'Proxima Nova', sans-serif;
  margin: 0;
  overflow: hidden;
}

/* removes tap blinking on iOS devices */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.v3d-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../font/Proxima Nova Black.otf') format('opentype');
  /* Add other font variants as needed */
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../font/Proxima Nova Bold.otf') format('opentype');
  /* Add other font variants as needed */
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../font/Proxima Nova Extrabold.otf') format('opentype');
  /* Add other font variants as needed */
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../font/Proxima Nova Bold Thin.otf') format('opentype');
  /* Add other font variants as needed */
}

@font-face {
  font-family: 'Proxima Nova';
  src: url('../font/Proxima Nova Bold-regular.otf') format('opentype');
  /* Add other font variants as needed */
}

body {
  font-family: 'Proxima Nova', sans-serif;
}

/* removes tap blinking on iOS devices */
* {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#my_iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  border: 0;
}

#preloader-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#mesh-visibility {
  visibility: hidden;
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
}

#mesh-visibility img {
  /* Desktop */
  width: 100px;
  height: 100px;
}

@media screen and (max-width: 600px) {
  #mesh-visibility img {
    /* Mobile */
    width: 50px;
    height: 50px;
  }
  #reset-camera img {
    /* Desktop */
    width: 25px;
    height: 25px;
  }
}

#top-logo {
  visibility: hidden;
  position: fixed;
  top: 40px;
  left: 20px;
  z-index: 9999;
}

#top-logo img {
  width: 370px;
  height: 45px;
}

@media screen and (max-width: 600px) {
  #top-logo {
    top: 10px; /* Adjust the top position for mobile */
    left: 10px; /* Adjust the left position for mobile */
  }

  #top-logo img {
    width: 185px;
    height: 23px;
  }
}

#box {
  position: fixed;
  bottom: 0;
  right: 0;
  width: calc(30% + 20px);
  height: 100vh;
  opacity: 0;
  background-color: rgba(56, 70, 83, 0.85);
  transition: opacity 0.5s;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  align-items: flex-start;
  padding-bottom: 10px; /* Add padding to the bottom of the box */
  overflow-y: visible;
  overflow: auto; /* Activate overflow */
  outline: 2px solid rgba(56, 70, 83, 1);
}

#box svg {
  position: fixed;
  bottom: 30px;
  right: calc(30% + 20.5px);
  transform: none;
  overflow: visible;
  z-index: -1; /* Set a negative z-index to send the SVG behind the box */
}

#box .box-content {
  position: absolute;
  top: 12%;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  width: 100%; /* Adjust the width value to your desired size */
  padding-top: 50px; /* Increase the padding to move the content down */
  overflow-y: auto; /* Enable vertical scrolling when content exceeds height */
  overflow-x: hidden; /* Disable horizontal scrolling */
}

#box .box-content h2#custom-headline {
  font-size: 60px;
  color: white;
  font-family: 'Proxima Nova Bold', sans-serif;
  width: 80%; /* Allow the headline to occupy the full width of the container */
  padding-bottom: 0; /* Remove the padding to align headline to the top */
  padding-top: 0; /* Remove the padding to align headline to the top */
  text-overflow: fade;
  word-break: normal;
  word-wrap: break-word;
  word-break: break-word;
  overflow: hidden;
  overflow-wrap: break-word;
  text-overflow: ellipsis;
}

@media screen and (max-width: 600px) {
  #box .box-content h2#custom-headline {
    white-space: normal;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Optional: Enable smooth scrolling on iOS */
  }

  #box .box-content::-webkit-scrollbar {
    width: 10px; /* Set the width of the scrollbar */
  }

  #box .box-content::-webkit-scrollbar-thumb {
    background-color: #2790CD; /* Set the color of the scrollbar thumb */
    border-radius: 10px; /* Set rounded edges for the thumb */
  }

  #box .box-content::-webkit-scrollbar-track {
    background-color: #5A5F64; /* Set the color of the scrollbar track */
  }
}

#box .box-content hr {
  width: 80%;
  margin: 10px 0;
  border: none; /* Remove the default border */
  height: 4px; /* Set the height of the line */
  background-color: white; /* Set the color of the line */
  margin: 40px 0; /* Increase the margin to add padding above and below the line */
}

#box .box-content p#custom-description {
  font-size: 18px;
  color: white;
  margin-bottom: 20px;
  width: 80%; /* Allow the headline to occupy the full width of the container */
}

#box .box-content .image-container {
  margin-bottom: 20px;
  width: 100%; /* Set the width to 50% of its original size */
  height: auto; /* Maintain the image's aspect ratio */
  display: block; /* Ensure the image is displayed as a block element */
  margin: 0 auto; /* Center the image horizontally */
  padding: 60px; /* Add 50px padding to all sides of the image */
  transform: translateX(5px);
}

#box .box-content .image-container img {
  max-width: 80%;
  height: auto;
}

#box .box-content .button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  width: 70%;
}

#box .box-content .button-container button {
  padding: 20px 20px;
  font-size: 30px;
  background-color: #2790CD;
  color: white;
  border: none;
  cursor: default;
  margin-bottom: 20px;
  width: 100%; /* Set the width to occupy the full container */
  border-radius: 10px; /* Add rounded edges */
  font-family: 'Proxima Nova Bold', sans-serif; /* Set the font family to 'Proxima Nova Bold' */
  font-weight: bold; /* Set the font weight to bold */
}

#box .box-content .button-container button#custom-button2 {
  padding: 20px 20px;
  font-size: 30px;
  background-color: transparent; /* Set the background color to transparent */
  color: white;
  border: 2px solid white; /* Add a white border */
  cursor: default;
  margin-bottom: 10px;
  width: 100%; /* Set the width to occupy the full container */
  border-radius: 10px; /* Add rounded edges */
  font-family: 'Proxima Nova Bold', sans-serif; /* Set the font family to 'Proxima Nova Bold' */
  font-weight: bold; /* Set the font weight to bold */
  background-color: transparent; /* Set the initial background color to transparent */
  transition: background-color 0.3s; /* Add a transition effect to the background-color property */
}

#box .box-content .button-container button#custom-button2:hover {
  background-color: rgba(255, 255, 255, 0.3); /* Set the background color to white at 30% opacity when hovered */
}

#box .box-content::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

#box .box-content::-webkit-scrollbar-thumb {
  background-color: #2790CD; /* Set the color of the scrollbar thumb */
  border-radius: 10px; /* Set rounded edges for the thumb */
}

#box .box-content::-webkit-scrollbar-track {
  background-color: #5A5F64; /* Set the color of the scrollbar track */
}

@media screen and (max-width: 900px) {
  #box {
    width: 100%;
    height: 30vh;
    top: auto;
    bottom: 0;
  }

  #box .box-content {
    padding-top: 100; /* Remove the padding to align content to the top */
  }

  #box svg {
    position: fixed;
    bottom: calc(30% - 36px);
    left: 80px;
    transform: rotate(90deg); /* Rotate the SVG by 90 degrees */
  }
}

#box .box-close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 35px;
  height: 35px;
  opacity: 0.3;
  transition: transform 0.3s ease;
}

#box .box-close-button img {
  width: 100%;
  height: 100%;
  cursor: default;
}

/* Track */
#box::-webkit-scrollbar {
  width: 10px; /* Set the width of the scroll bar */
}

/* Thumb */
#box::-webkit-scrollbar-thumb {
  background-color: #2790CD; /* Set the color of the thumb */
  border-radius: 10px; /* Set fully rounded edges */
}

/* Track on hover */
#box::-webkit-scrollbar-track {
  background-color: #5A5F64; /* Set the background color of the track */
}

/* Thumb on hover */
#box::-webkit-scrollbar-thumb:hover {
  background-color: #2790CD; /* Set the color of the thumb on hover */
}