/* Optional styling for fullscreen mode */
        :fullscreen::backdrop {
            background-color: rgba(0, 0, 0, 0.9);
            /* Dim the background */
        }

        canvas {
            display: block;
            width: 100%;
            height: 100%;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: crisp-edges;
        }

        body {
            overflow: hidden;
            margin: 0px;
        }

        .arrow-button {
            position: absolute;
            bottom: 60px;
            right: 0;
            transform: translateX(-50%);
            cursor: pointer;
            width: 35px;
            padding: 5px;
            filter: invert(1);
            background-color: #ffffffa3;
            border-radius: 30px;
        }

        .visible {
            display: none !important;
        }

        .arrow-button:hover {
            background-color: #fff;
            border-radius: 30px;
        }

        .image2 {
            position: absolute;
            bottom: 0;
            background: black;
            width: 100%;

        }

        #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            cursor: grab;
            transition: all 0.3s ease;
            position: relative;

        }

        canvas {
            transition: all 0.5s;
            width: 100% !important;

            transition: all 0.3s ease;
        }

        .grabbing {
            cursor: grabbing !important;
            transition: all 0.3s ease;
        }


#sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 120px;
  height: 100%;
  background-color: #1a1a1a;
  overflow-y: auto;
  padding: 10px 5px;
  transition: all 0.3s ease-in-out;
  z-index: 999;
}

#sidebar.hidden {
  transform: translateX(-100%);
}

/* Toggle (hamburger) button */
.menu-toggle {
  position: fixed;
  top: 20px;
  left: 15px;
  font-size: 24px;
  color: #fff;
  background: #333;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  z-index: 1000;
}

/* Thumbnail container */
.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Individual thumb + label */
.thumb-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
  text-align: center;
}

.thumb-item img {
  width: 80px;
  height: auto;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.3s;
}

.thumb-item img:hover,
.thumb-item img.active {
  border-color: #FFD700;
  transform: scale(1.05);
}

.thumb-item span {
  color: #fff;
  font-size: 12px;
  margin-top: 5px;
  max-width: 80px;
  word-wrap: break-word;
}
/* Main content wrapper */
#main-content, #toggleButton {
  margin-left: 120px;
  transition: margin-left 0.3s ease-in-out;
}

/* When sidebar is hidden, shift main content left */
#main-content.shifted, #toggleButton.shifted {
  margin-left: 0;
}

/* Already provided */
#sidebar {
  transition: transform 0.3s ease-in-out;
}

#sidebar.hidden {
  transform: translateX(-120px);
}



        #evrbbthlsctr {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            padding: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            transition: all 0.3s ease;
        }

        @media screen and (min-width: 320px) and (max-width: 767px) {

            #pauseButton,
            #fullscreenButton {
                width: 65px;
                font-size: 12px;
                padding: 5px;
            }

            #fullscreenButton {
                right: 75px;
            }

            #pauseButton {
                right: 10px;
            }

            /*#container{
                height: 50vh;
            }*/

        }

        #pauseButton:hover,
        #fullscreenButton:hover {
            background-color: #f0f0f0;
            color: #000;
        }

        #fullscreenButton {
            right: 140px;
        }

        #pauseButton {
            right: 50px;
        }

        #pauseButton,
        #fullscreenButton {
            position: absolute;
            top: 10px;
            z-index: 10;
            padding: 10px 20px;
            background-color: #fff;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 12px;
            width: 87px;
            display: flex;
            justify-content: center;
        }

          /* Styles for CSS2DObject labels */
        .hotspot-label {
            background-color: rgba(0, 0, 0, 0.7);
            color: rgb(255, 0, 0);
            padding: 8px 15px;
            border-radius: 8px;
            font-size: 50px;
            white-space: nowrap;
            pointer-events: none; /* Crucial: allows raycasting to hit the 3D object behind */
            opacity: 0; /* Hidden by default */
            transition: opacity 0.2s ease-in-out;
            transform: translateY(-40px); /* Position above the icon */
        }

        .hotspot-icon {
            color: #007bff; /* Default icon color */
            font-size: 500px; /* Icon size */
            pointer-events: none; /* Allow clicks to pass through to the 3D object */
        }

        /* CSS2DObject container for the label */
        .hotspot-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            /* This div itself is not clickable, the THREE.Mesh is. */
            /* We use pointer-events: none on children to ensure raycasting works. */
        }