/* Custom Modal Styles */
.custom-alert {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Transparent background */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it is above other content */
}

.alert-content {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 300px;
  width: 80%;
}

.alert-content span {
  font-size: 16px;
  margin-bottom: 50px;
}

#closeAlertButton {
  background: linear-gradient(135deg, #FFD700, #0b461b);
  color: rgb(0, 0, 0);
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 20px;
}

#closeAlertButton:hover {
  background: linear-gradient(135deg, #0b461b, #FFD700);
}

body {
  min-height: 179vh; /* Ensure the body has a minimum height that includes space for the footer */
  display: flex;
  flex-direction: column;
}

/* Ensure the header and navigation have relative positioning */
header {
  position: relative;
  z-index: 100; /* Increase the z-index to make sure the header is on top */
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

nav li {
  display: inline-block;
  position: relative; /* Required for dropdown positioning */
}

nav a {
  text-decoration: none;
  padding: 10px;
  display: block;
}

/* Dropdown content initially hidden */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #333; /* Dark background for contrast */
  min-width: 160px;
  z-index: 1002; /* Make sure the dropdown is above the .VT div */
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
}

/* Show the dropdown when hovering over the parent */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Optional: Styling for the dropdown items */
.dropdown-content a {
  padding: 12px 16px;
  color: white;
  text-align: left;
  z-index: 1002; /* Make sure the dropdown is above the .VT div */
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.green-border {
  border: 4px solid #0b461b;  /* Gold border */
  box-shadow: 0 0 10px #0b461b; /* Optional: adds a glow effect */
}

/* Add this to your existing CSS file (style.css) */
.gold-border {
  border: 4px solid gold;  /* Gold border */
  box-shadow: 0 0 10px gold; /* Optional: adds a glow effect */
}

.icons i:hover {
  transform: scale(1.2); /* Slight hover effect on the icons */
}

/* Style for the input box */
.search-box {
display: none; /* Initially hidden */
position: absolute;
top: 5.6%;
left: 65%;
transform: translateY(-50%);
padding: 10px;
font-size: 13px;
color: #3f3f3f;
border: 1px solid #3f3f3f;
border-radius: 4px;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
z-index: 9999;
}

    /* Style for the button */
    .search-button {
      display: none; /* Initially hidden */
      position: absolute;
      top: 5.6%;
      right: 213.5px; /* Position the button inside the input field */
      transform: translateY(-50%);
      padding: 10px 15px;
      font-size: 8px;
      border: none;
      border-radius: 4px;
      background-color: #0b461b;
      color: white;
      cursor: pointer;
    }

    /* Button Hover Effect */
    .search-button:hover {
      background-color: #FFD700;
    }

    /* Clear Icon Styling */
    .clear-icon {
      position: absolute;
      top: 5.6%;
      right: 290px;
      transform: translateY(-50%);
      font-size: 13px;
      color: #FFD700;
      cursor: pointer;
      visibility: hidden; /* Initially hidden */
      z-index: 9999;
    }

    /* Show clear icon when text is in the input */
    .search-box:not(:placeholder-shown) + .clear-icon {
      visibility: visible;
    }

/* Make sure the VT container is not interfering with the dropdown */
.VT {
  display: flex;
  flex-grow: 1;
  flex-direction: column; /* Stack elements vertically */
  justify-content: flex-start; /* Align the items to the top */
  align-items: center; /* Center the content horizontally */
  width: 100%; /* Make it take up the full width of the container */
  height: 61vh; /* Make it take up 80% of the viewport height (adjust as needed) */
  margin: 0; /* Remove any margins */
  padding: 0; /* Remove padding to make the image take up the full space */
  background-color: #fff; /* Light background for the container */
  border-radius: 0; /* Optional: Remove rounded corners if you want the container to fill the screen completely */
  box-shadow: none; /* Remove shadow to prevent distraction */
  position: relative; /* Ensure proper positioning of elements */
  z-index: 1; /* Keep the z-index lower than the header and dropdowns */
}

/* Ensure the 360-degree image fills the entire .VT div */
#panorama {
  width: 100%; /* Make the panorama image fill the full width */
  height: 100%; /* Make the panorama image fill the full height of the VT div */
  object-fit: cover; /* Ensure the image covers the container */
  border-radius: 0; /* Optional: Remove rounded corners */
  position: absolute; /* Ensure it covers the entire container */
  top: 0;
  left: 0;
  z-index: 1; /* Keep the panorama image in the background */
  transition: opacity 1.5s ease;
  background-color: #000;
}

#panorama.blur {
    filter: blur(2px); /* Adjust blur strength as needed */
    opacity: 0.3; /* Slightly fade while blurring */
}

/* Fullscreen loader overlay */
.pnlm-container::before {
  content: "";
  position: fixed; /* cover whole viewport */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ffffff; /* full background */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Add the spinner itself */
.pnlm-container::after {
  content: "";
  width: 60px;
  height: 60px;
  border: 6px solid rgba(255, 255, 255, 0.2);
  border-top: 6px solid #000000;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Completely hide Pannellum's default loading UI */
.pnlm-load-box {
    display: none !important;
}

.image-gallery {
  position: absolute;  /* Position it relative to the parent container */
  bottom: 0;  /* Place it at the bottom of the panorama image */
  left: 50%;  /* Align the left edge of the gallery at the center of the parent container */
  transform: translateX(-50%);  /* Shift it left by half of its width to truly center it */
  display: flex;  /* Use flexbox to align the items within the gallery */
  justify-content: center;  /* Center the gallery images horizontally */
  align-items: center;  /* Vertically center the images within the gallery */
  width: 60%;  /* Set the width of the gallery to 60% of the parent container */
  height: 150px;  /* Fixed height for the gallery */
  background-color: rgba(0, 0, 0, 0.5);  /* Optional: Add a background for better visibility */
  z-index: 2;  /* Ensure it appears above the panorama image */
}

/* Container for images in the gallery */
.images-container {
  display: flex;
  justify-content: flex-start; /* Align the images to the left side */
  flex-wrap: nowrap; /* Prevent wrapping of images */
  overflow-x: auto; /* Enable horizontal scrolling */
  gap: 7px; /* Add space between images */
  width: 88%; /* Full width of the gallery container */
  padding: 0 10px; /* Horizontal padding for better spacing */
  scrollbar-width: none; /* Hide scrollbar in Firefox */
}

.images-container::-webkit-scrollbar {
  display: none; /* Hide scrollbar in Webkit browsers (Chrome, Safari) */
}

.images-container .image-wrapper {
  position: relative; /* Required for positioning text on top of the image */
}

/* Hover effect on image */
.images-container img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.images-container img:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  filter: brightness(0.9); /* Slight darkening effect on hover */
}

/* Active (clicked) effect */
.images-container img:active {
  transform: scale(0.95); /* Slight shrink when clicked */
  filter: brightness(1.1); /* Slightly brighter when clicked */
}


/* Text styling */
.image-text {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset to truly center the text */
  color: #032b0e; /* White text for contrast */
  font-size: 14px; /* Adjust text size */
  font-weight: bolder;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional: Add text shadow for better visibility */
  opacity: 1; /* Start with invisible text */
  transition: opacity 0.3s ease; /* Smooth transition for text visibility */
  cursor: pointer; /* Make the text look clickable */
}

.image-text-cainta {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Offset to truly center the text */
  color: #FFD700; /* White text for contrast */
  font-size: 14px; /* Adjust text size */
  font-weight: bolder;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Optional: Add text shadow for better visibility */
  opacity: 1; /* Start with invisible text */
  transition: opacity 0.3s ease; /* Smooth transition for text visibility */
  cursor: pointer; /* Make the text look clickable */
}

/* Image styling */
.images-container img {
  width: 100px; /* Reduce size of the images to make them smaller */
  height: 100px; /* Reduce size of the images */
  margin: 5px; /* Space between images */
  border-radius: 8px; /* Optional: Rounded corners for the images */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add shadow to the images for better effect */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth scaling and shadow change on hover */
}

.images-container img:hover {
  transform: scale(1.05); /* Slightly enlarge images on hover */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Enhance shadow on hover for more depth */
}

/* Gallery button styles */
.gallery-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 30px;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3; /* Ensure buttons are on top */
  user-select: none;
  transition: background-color 0.3s ease;
}

.gallery-btn:hover {
  background-color: rgba(0, 0, 0, 0.8); /* Darker background on hover */
}

.left-btn {
  left: 10px;
}

.right-btn {
  right: 10px;
}

/* Ensure smooth scroll for smaller screens */
@media (max-width: 768px) {
  .VT {
    width: 100%; /* Make the virtual tour take up the full width of the viewport */
    height: 100vh; /* Full height on smaller screens */
    flex-direction: column; /* Stack the viewer and gallery vertically on small screens */
  }

  #panorama {
    height: 60vh; /* Reduce panorama height for smaller screens */
  }

  .images-container img {
    width: 100px; /* Adjust the size of your images */
    height: 100px; /* Adjust the size of your images */
    cursor: pointer;
  }

  .gallery-btn {
    font-size: 25px; /* Slightly smaller button size for smaller screens */
    padding: 8px;
  }
}

/* Footer Styling */
footer {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
  font-size: 14px;
  position: relative;
}

footer a {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}

footer a:hover {
  text-decoration: underline;
}

.custom-text-3rd-1{
  background-image: url('/assets/images/navigation/3rd-1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-3rd-2 {
  background-image: url('/assets/images/navigation/3rd-2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 180px; /* Adjust based on your image size */
  height: 180px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-3rd-3 {
  background-image: url('/assets/images/navigation/3rd-3.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 180px; /* Adjust based on your image size */
  height: 180px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-4th-1{
  background-image: url('/assets/images/navigation/4th-1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-4th-4{
  background-image: url('/assets/images/navigation/4th-4.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-4th-5{
  background-image: url('/assets/images/navigation/4th-5.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-5th-1{
  background-image: url('/assets/images/navigation/5th-1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-6th-1{
  background-image: url('/assets/images/navigation/6th-1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-6th-2{
  background-image: url('/assets/images/navigation/6th-2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-6th-3{
  background-image: url('/assets/images/navigation/6th-3.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-audiovisual{
  background-image: url('audioroom.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-labcom{
  background-image: url('labcom.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 45%; /* Adjust based on your image size */
  height: 45%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-me1{
  background-image: url('/assets/images/campus/me1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 25%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-me2{
  background-image: url('/assets/images/campus/me2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-hotkit {
  background-image: url('hotkit.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 28%; /* Adjust based on your image size */
  height: 28%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-coldkit {
  background-image: url('coldkit.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 28%; /* Adjust based on your image size */
  height: 28%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-gym {
  background-image: url('gym.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 28%; /* Adjust based on your image size */
  height: 28%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-bar-resto {
  background-image: url('bar-resto.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 28%; /* Adjust based on your image size */
  height: 28%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-tedhall {
  background-image: url('tedhall.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 28%; /* Adjust based on your image size */
  height: 28%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-tamsen-can {
  background-image: url('/assets/images/campus/tamsen.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 28%; /* Adjust based on your image size */
  height: 28%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-tamsen {
  background-image: url('/assets/images/campus/tamsen.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 23%; /* Adjust based on your image size */
  height: 23%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-shsphy {
  background-image: url('shsphy.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 30%; /* Adjust based on your image size */
  height: 30%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-shstle-1 {
  background-image: url('shstle.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-shstle {
  background-image: url('shstle.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-canteen {
  background-image: url('canteen.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}


.custom-text-c-play {
  background-image: url('play.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-dance {
  background-image: url('dance.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-shsen {
  background-image: url('/assets/images/campus/shsen.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-shslobby {
  background-image: url('shslobby.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 25%; /* Adjust based on your image size */
  height: 25%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-quad {
  background-image: url('quadrangle.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 23%; /* Adjust based on your image size */
  height: 23%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-mainen {
  background-image: url('/assets/images/campus/gl1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 25%; /* Adjust based on your image size */
  height: 25%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-mainlo-1 {
  background-image: url('/assets/images/campus/mainlo.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-mainlo {
  background-image: url('/assets/images/campus/mainlo.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 18%; /* Adjust based on your image size */
  height: 18%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-book {
  background-image: url('/assets/images/campus/bookstore.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-clinic-1 {
  background-image: url('/assets/images/campus/clinic.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 13%; /* Adjust based on your image size */
  height: 13%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-clinic {
  background-image: url('/assets/images/campus/clinic.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 8%; /* Adjust based on your image size */
  height: 8%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-library {
  background-image: url('/assets/images/campus/library.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 8%; /* Adjust based on your image size */
  height: 8%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-tamshall {
  background-image: url('tamshall.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 18%; /* Adjust based on your image size */
  height: 18%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-shshallway {
  background-image: url('/assets/images/campus/hallway.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 18%; /* Adjust based on your image size */
  height: 18%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-shslibrary {
  background-image: url('shslibrary.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-hallway-class {
  background-image: url('/assets/images/campus/hallway.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 18%; /* Adjust based on your image size */
  height: 18%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-hallway {
  background-image: url('/assets/images/campus/hallway.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 10%; /* Adjust based on your image size */
  height: 10%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-gl1{
  background-image: url('/assets/images/campus/gl1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-gl2{
  background-image: url('/assets/images/campus/gl2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-gl3{
  background-image: url('gl3.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-gl4{
  background-image: url('gl4.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-gl5{
  background-image: url('gl5.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-l1{
  background-image: url('l1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-q1{
  background-image: url('q1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-q2{
  background-image: url('q2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-cl1{
  background-image: url('cl1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-br1{
  background-image: url('cl1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-phy1{
  background-image: url('phy1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-che1{
  background-image: url('che1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-mp1{
  background-image: url('mp1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-g1{
  background-image: url('g1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-h1{
  background-image: url('gl3.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 10%; /* Adjust based on your image size */
  height: 10%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-h2{
  background-image: url('h1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-h3{
  background-image: url('h2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-h4{
  background-image: url('/assets/images/campus/gl2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 25%; /* Adjust based on your image size */
  height: 25%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-2nd-1{
  background-image: url('2nd-1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 12%; /* Adjust based on your image size */
  height: 12%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-2nd-2{
  background-image: url('/assets/images/campus/me1.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 14%; /* Adjust based on your image size */
  height: 14%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-2nd-3{
  background-image: url('fireexit.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 14%; /* Adjust based on your image size */
  height: 14%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-2nd-4{
  background-image: url('comlab.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-2nd-5{
  background-image: url('2nd-com.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-tle{
  background-image: url('tle.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-exit {
  background-image: url('exit.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px; /* Adjust based on your image size */
  height: 70px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-exit-custom {
  background-image: url('exit.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px; /* Adjust based on your image size */
  height: 100px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-exit-5th {
  background-image: url('exit.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 45px; /* Adjust based on your image size */
  height: 45px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-4th-3 {
  background-image: url('/assets/images/navigation/6th-2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 180px; /* Adjust based on your image size */
  height: 180px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-4th-6{
  background-image: url('4th-6.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20%; /* Adjust based on your image size */
  height: 20%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-5th-2 {
  background-image: url('5th-2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 180px; /* Adjust based on your image size */
  height: 180px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-5th-3 {
  background-image: url('5th-3.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 180px; /* Adjust based on your image size */
  height: 180px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-4th-2 {
  background-image: url('4th-2.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 180px; /* Adjust based on your image size */
  height: 180px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-quad-can {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 65px; /* Adjust based on your image size */
  height: 65px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-quad {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-up-clinic-gym {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px; /* Adjust based on your image size */
  height: 60px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-up-clinic {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 80px; /* Adjust based on your image size */
  height: 80px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-up-cainta {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px; /* Adjust based on your image size */
  height: 100px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-up {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px; /* Adjust based on your image size */
  height: 100px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-elev-can {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 70px; /* Adjust based on your image size */
  height: 70px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-elev {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-alumni {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-text-c-alumnihall {
  background-image: url('/assets/images/campus/alumnihall.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 15%; /* Adjust based on your image size */
  height: 15%; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-elev {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-up-elev {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-down-elev-5th {
  background-image: url('arrow_down.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 55px; /* Adjust based on your image size */
  height: 55px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-up-custom {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px; /* Adjust based on your image size */
  height: 30px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-up-custom2nd {
  background-image: url('/assets/images/controls/arrow_up.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 40px; /* Adjust based on your image size */
  height: 40px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-c-quad {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-tle {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 40px; /* Adjust based on your image size */
  height: 40px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-tle-1 {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 35px; /* Adjust based on your image size */
  height: 35px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 80px; /* Adjust based on your image size */
  height: 80px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-custom {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px; /* Adjust based on your image size */
  height: 25px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-shslobby {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-down {
  background-image: url('arrow_down.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px; /* Adjust based on your image size */
  height: 100px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-down-elev {
  background-image: url('arrow_down.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 42px; /* Adjust based on your image size */
  height: 42px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-down-elev-1 {
  background-image: url('arrow_down.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 35px; /* Adjust based on your image size */
  height: 35px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-c-tams {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 40px; /* Adjust based on your image size */
  height: 40px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px; /* Adjust based on your image size */
  height: 100px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-4th {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 35px; /* Adjust based on your image size */
  height: 35px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-4th-1 {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 25px; /* Adjust based on your image size */
  height: 25px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-custom-1 {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-custom {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 45px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-guidance {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px; /* Adjust based on your image size */
  height: 70px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-left-c-library {
  background-image: url('/assets/images/controls/arrow_left.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px; /* Adjust based on your image size */
  height: 20px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-c-shslibrary {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 30px; /* Adjust based on your image size */
  height: 30px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}


.custom-arrow-right {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 100px; /* Adjust based on your image size */
  height: 100px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-hall {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 20px; /* Adjust based on your image size */
  height: 20px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-c-library {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 60px; /* Adjust based on your image size */
  height: 70px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-library {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 40px; /* Adjust based on your image size */
  height: 40px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-arrow-right-custom {
  background-image: url('/assets/images/controls/arrow_right.png'); /* Path to your arrow image */
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px; /* Adjust based on your image size */
  height: 50px; /* Adjust based on your image size */
  cursor: pointer; /* Make it clear it's clickable */
}

.custom-document {
  background-image: url('document.png');
  background-size: contain;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  cursor: pointer;
}

/* Style for the hover text container */
#hover-text {
  position: absolute;
  background-color: rgba(0, 0, 0, 0.7);  /* Semi-transparent background */
  color: white;  /* White text color */
  padding: 10px 15px;  /* Padding around the text */
  font-size: 16px;  /* Font size */
  font-weight: bold;  /* Bold font */
  border-radius: 5px;  /* Rounded corners */
  display: none;  /* Initially hide the text */
  z-index: 9999;  /* Make sure the text is above other content */
  text-align: center;
}

/* Style when the text is shown */
#hover-text.show {
  display: block;  /* Show the text */
}

  /* Popup container styles */
  .popup-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Dark background */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
  }

  /* Popup content container */
  .popup-content {
    background-color: #ffffffcd;
    padding: 30px;
    max-width: 600px;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    font-family: 'Arial', sans-serif;
  }

  /* Title for Vision and Mission */
  .popup-content h2 {
    font-size: 24px;
    color: #0b461b;
    margin-bottom: 15px;
    text-transform: uppercase;
    font-weight: bold;
  }

  /* Paragraph text styles */
  .popup-content p {
    font-size: 18px;
    color: #0b461b;
    line-height: 1.6;
    margin-bottom: 25px;
    text-align: justify;
  }

/* Style for the mute/unmute button */
#muteButton {
  position: fixed;
  top: 80px; /* Adjust this value for the vertical position */
  left: 20px;
  background-color: #0b461b;
  color: white;
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  border-radius: 5px;
  z-index: 9999; /* Ensure the button is always on top */
  font-family: 'Arial', sans-serif;
}

#muteButton:hover {
  background-color: #FFD700;
}