@font-face {
  font-family: "AbsaraSans";
  src: url("/assets/fonts/AbsaraSans-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "AbsaraSans";
  src: url("/assets/fonts/AbsaraSans-BoldItalic.ttf") format("truetype");
  font-weight: Bold;
  font-style: normal;
}
#loadingScreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(80, 79, 79); /* Same as the canvas, so the fade is seamless */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: opacity 0.6s ease;
}

/* Fade out, then drop out of the way once the fade has finished */
#loadingScreen.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}

#loadingInner {
  width: 420px;
  max-width: 70vw;
  text-align: center;
}

#loadingBarTrack {
  width: 100%;
  height: 5px;
  margin-top: 25px;
  background-color: rgba(255, 255, 255, 0.2);
}

#loadingBarFill {
  width: 0%;
  height: 100%;
  background-color: lightgray;
  transition: width 0.2s ease-out;
}

#loadingCount {
  margin-top: 10px;
  font-size: 0.85rem;
  opacity: 0.7;
}

#animationCanvas {
  position: absolute; /* Position the canvas absolutely */
  display: block;
  overflow: hidden; /* Prevents overflow of images beyond the container */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  background-color: rgb(80, 79, 79);
}

#set-up-row {
  padding-top: 50px;
}

/* Make the navbar transparent and float above the canvas */
.navbar-transparent {
  background-color: transparent !important; /* Transparent background */
  position: absolute; /* Float above other elements */
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  z-index: 10; /* Ensure it appears above the canvas */
}

/* Ensure the canvas extends to the top of the screen */
body, html {
  margin: 0;
  padding: 0;
  height: 100%; /* Full height for the body and html */
  overflow: hidden; /* Prevent scrolling if needed */
  font-family: "AbsaraSans", sans-serif;
}

/* Style for carousel indicators */
.carousel-indicators {
  display: flex;
  justify-content: center;
  gap: 10px; /* Add spacing between thumbnails */
  margin-top: 15px;
  padding: 0 5%; /* Add padding to the left and right of the row */
}

.carousel-indicators button {
  border: none !important;
  padding: 0;
  cursor: pointer;
  position: relative;
  height: 100% !important;
  width: 60px !important;
  flex: 1; /* Allow buttons to grow proportionally */
  max-width: 15%; /* Optional: Limit the maximum width of each thumbnail */
}

.carousel-indicators button:hover {
  opacity: 0.7; /* Change opacity on hover */
}

.carousel-image {
  max-height: 600px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.video-holder {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#scrollProgressBar {
  position: fixed;
  bottom: 20px; /* Move it higher up from the bottom */
  left: 5%; /* Start 5% away from the left edge */
  width: 90%; /* End 5% away from the right edge */
  height: 5px; /* Height of the progress bar */
  background-color: lightgray; /* Light gray color for the progress bar */
  z-index: 1000; /* Ensure it floats above other elements */
  pointer-events: none; /* Allow floating objects to go below it */
  transition: width 0.1s ease-out; /* Smooth transition for width changes */
}

#scrollPrompt {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 35px;
  color: #fff;
  padding: 6px 18px;
  font-size: 1rem;
  z-index: 1001;
  pointer-events: none;
  transition: opacity 0.2s;
  opacity: 1;
}

.modal-content {
  background-color: rgba(80, 79, 79, 0.8);
}

.modal-header {
  border-bottom: 1px solid rgb(56, 56, 56);
  color: #fff;
}

.modal-footer {
  border-top: 1px solid rgb(56, 56, 56);
  color: #fff;
}

.modal-dialog {
  max-width: 1000px;
}

.modal-content-text-container {
  border: none;
  padding-top: 10px;
  color: #fff !important;
}

/*# sourceMappingURL=styles.css.map */