@charset "utf-8";
/* CSS Document */


/* Make the navigation menu sticky */
body {
  font-family: Arial, sans-serif;
  background-color: #1c1c1c; /* Black background */
  color: white;
  margin: 0;
  padding: 0;
}

.hero img {
  width: 100%;
  height: auto;
}
/* Navigation Menu */

/* ------------------------------- Navbar -------------------------------- */
.navbar {
    display: flex;
    justify-content: flex-start;
    background-color: #333;
    padding: 8px 0; /* Reduce top and bottom padding */
    height: auto; /* Let it size naturally */
}

.navbar a {
    color: white;
    text-decoration: none;
    padding: 8px 15px;
    line-height: 1.2; /* Reduce spacing inside links */	
    font-size: 18px;
}

.navbar a:hover {
    background-color: #555;
    border-radius: 5px;
}

/* -------------------------- SLIDESHOW CONTAINER ------------------------ */
  /* Slideshow Container */
#slideshow {
    position: relative;
    max-width: 100%;
    margin: auto;
    text-align: center;
  }

/* Slideshow Images */
.mySlides {
  width: 100%;
  max-width: 500px; /* Prevent giant images */
  height: auto;
  display: none;
}

/* Ensure First Image is Visible */
.mySlides:first-child {
  display: block;
}

/* Navigation Arrows */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 10px;
  color: white;
  font-size: 24px;
  font-weight: bold;
  background-color: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 5px;
  transition: 0.3s;
  z-index: 1000;
}

/* Left Arrow */
.prev {
  left: 10px;
}

/* Right Arrow */
.next {
  right: 10px;
}

/* Hover Effect */
.prev:hover, .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
  .prev, .next {
    font-size: 18px;
    padding: 8px;
  }
}



/* ------------------------ STARBURST ----------------------------------*/
#starburst {
  position: fixed; /* Keep it in place */
  top: 55px; /* Adjust this to align inside the banner */
  right: 15px; /* Adjust horizontal placement if needed */
  width: 80px; /* Keep consistent size */
  height: auto;
  z-index: 9999 !important; /* Ensure it's always on top */  
  transition: transform 0.1s linear; /* Smooth rotation */
  animation: glowPulse 1.5s infinite alternate; /* Add pulse effect */
}

@keyframes rotateStar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0px 0px 8px gold); }
  50% { filter: drop-shadow(0px 0px 14px gold); } 
}

/* Shrink the starburst on smaller screens */
@media (max-width: 768px) {  
  #starburst {
    width: 65px;
    height: auto;
    will-change: transform; /* Optimize for smoother performance */
    z-index: 9999 !important; /* Ensure it stays on top even on mobile */	
  }

  #starburst-container {
    top: 165px; /* Adjust position slightly if needed */
    right: 15px;
  }  
}



/* ---------------------------- DYNAMIC GRID --------------------------- */



/* Dynamic grid layout fix */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  justify-content: center;
  margin: 40px auto;
  max-width: 90%;
  padding: 20px;
}

/* Dynamic grid item styling */
.grid-item {
  background-color: var(--grid-box-bg);
  border: 2px solid var(--grid-box-border);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--grid-box-text);
}

.grid-item img {
  max-width: 100%;
  height: auto;
  cursor: pointer;
  border-radius: 8px;
}

.grid-item .caption {
  margin-top: 10px;
  font-size: 16px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
	
.black-scheme {
  background-color: #1c1c1c;
  color: white;
}

.black-scheme .nav-container {
  background-color: #333333;
}

.black-scheme .w3-bar {
  background-color: #1c1c1c;
}

/* ------------------------ COLOR BARS ---------------------------- */
.color-bar {
  height: 10px;
}

.purple-bar {
  background-color: #800080;
}

.deep-purple-bar {
  background-color: #4B0082;
}

.gold-bar {
  background-color: #f1c40f; 
}	


/* ------------------------------- PHOTO MODAL --------------------------- */
#photoModal {
    display: none;  /* Ensures modal is hidden initially */
    position: fixed;
    z-index: 10000; 
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden; 
}

/* Disable background scrolling when modal is open */
body.modal-open {
    overflow: hidden;
}




/* Center and scale modal image */
#photoModal img {
  max-width: 90%;
  max-height: 90%;
  border: 5px solid white; /* Optional: adds a white border around the image */
  box-shadow: 0 4px 8px rgba(255, 255, 255, 0.5);
}

/* Close button */
#photoModal span {
  position: absolute;
  top: 20px;
  right: 35px;
  color: white;
  font-size: 40px;  /* Bigger for visibility */
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

/* Close button hover effect */
#photoModal span:hover {
  color: #bbb;
}

#modalContent {
  max-width: 90%;
  max-height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#modalImage, #modalVideo {
  width: 100%; /* Ensures video uses full modal width */
  max-width: 90vw; /* Prevents excessive width */
  height: auto; /* Allows natural scaling */
  max-height: 80vh; /* Matches image height */
  object-fit: contain;
  display: block;
  margin: auto;
}


.modal-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 36px;
  color: white;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 50%;
  user-select: none;
}

.modal-arrow.left {
  left: 10px;
}

.modal-arrow.right {
  right: 10px;
}

.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 36px;
  color: white;
  cursor: pointer;
}

video {
	width: auto;
	height: auto;
	max-height: 80vh;
	border-radius: 5px;
	object-fit: contain;
}

/* ---------------------------------------- CAROUSEL ---------------------- */

/* Ensure the carousel displays properly */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  height: 300px;
  max-width: 90%;
  margin: 50px auto;
  border: 2px solid var(--grid-box-border); /* Keep the new border color */
  border-radius: 10px;
  background-color: var(--grid-box-bg); /* Keep consistent background */
  color: var(--grid-box-text);
}

/* Carousel images */
.carousel .wrap img {
  flex: 0 0 auto;
  width: auto;
  height: 100%;
  max-height: 90%; /* Adjust height within carousel */
  max-width: 90%; /* Prevent square images from being too small */
  object-fit: cover; /* Keeps square images filling the space */
  display: block;
  margin: auto 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid var(--grid-box-border);
}



/* Restore hover functionality */
.carousel .wrap {
  display: flex;
  align-items: center; /* Ensures images align properly */
  justify-content: center; /* Keeps spacing even */
  height: 100%;
}


/* Navigation Arrows */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  font-size: 24px;
  padding: 10px;
  cursor: pointer;
  z-index: 10;
  border-radius: 50%;
  transition: background 0.3s;
}

.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

/* Hover effects */
.arrow:hover {
  background: rgba(0, 0, 0, 0.8);
}

/* Ensure hover scrolling effect */
.carousel:hover .wrap {
  transition: transform 0.3s ease-out;
}
	
/* To change the border color around the carousel and */
/* dynamic grid, alter the --grid-box-border property below */
:root {
  --grid-box-bg: #333333; /* Dark gray background */
  --grid-box-border: #f1c40f; /* Gold border color */
  --grid-box-text: white; /* Text color */
}