html, body {
  position: relative;
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
  background-color: #B19CD9;
  z-index: 0;
} 

/* -------------------------DROP DOWN NAVIGATION CSS FOR SHORT WIDTH SCREENS & MOBILE ---------------------------------------------------*/
  #vertnavbar {
	z-index: 99;
	position: fixed;
	top: 5%; 
	right: -80%;
	text-align: left;
	width:120px;
    padding: 10px;
    background-color: rgba(255,255,255,0.9);
    color: #000000;
	transition: right 1s;
  }
  
  #vertnavbar a {
    float: center;
    display: block;
    text-align: center;
    padding: 8px 10px;
    color: #000;
	text-decoration: none;
    background-color: rgba(255,255,255,0.0);
	transition: background-color 0.75s ease;
  }
  
  #vertnavbar td:hover {
  background-color: rgba(247, 247, 207,0.9);
	transition: background-color 0.75s ease;
  }
    
  #dropmenu {
	position: fixed;
    display: block;
	top: 0px; 
	right: -20%;
	text-align: center;
	width:15%;
    padding: 25px;
    color: #000000;
	transition: right 1s ease;
 }
  
  #dropmenu a {
    display:  block; 
    margin: 0 10px;
  }
  
  #dropmenu i {
    font-size: 30px; 
	color:black;
	transition: font-size 0.2s;
  }
  
  #dropmenu i:hover {
    font-size:35px; 
	transition: font-size 0.2s;
  }
  
/* -------------------------END DROP DOWN NAVIGATION CSS FOR SHORT WIDTH SCREENS & MOBILE ---------------------------------------------------*/  


.nav-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 30px; font-weight: 600; 
  color: white;
  z-index: 200;
  cursor: pointer;
  padding: 0 15px;
  user-select: none;
}

.left-arrow {
  left: 10px;
}

.right-arrow {
  right: 10px;
}




.lazy-video-thumb {
  opacity: 0;
  transition: opacity 0.5s ease;
  cursor: pointer;
}
.lazy-video-thumb.loaded {
  opacity: 1;
}



/* ✅ Always apply these styles */
#video-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 10px;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-y: auto;           /* Enable vertical scrolling */
  overflow-x: hidden;
  
   /* height: 70vh;              Match gallery height */
  margin-top: 25vh;           /* Push down like gallery-wrapper */
}

.video-wrapper {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  z-index: 2;
}

.video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
}




#video-wrapper img.lazy-video-thumb {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 6px;
}


/* --------------------------------------------------------------------TSC----------------------------------------- */
#tab-selector-container {
  position: fixed;
  top: -5px;
  left: 0;
  width: 100%;
  margin-top:60px;
  background-color: rgba(177, 156, 217, 0.85); /* Slightly transparent */
  z-index: 3;
  padding: 10px 0px;
  font-size: 3vh;
}

tab-selector-container.hover: {
  background-color: rgba(177, 156, 217, 1); /* full opacity */
}

#tab-selector {
  display: flex;
  justify-content: center;
  gap: 20px;
  }


.tab {
  cursor: pointer;
  padding: 6px 12px;
  color: #ccc;
  border-bottom: 2px solid transparent;
  transition: 0.3s;
}
.tab:hover {
  background-color: #f7f7cf;
  color: black;
  opacity:1;
  cursor: pointer;
}

.tab.active {
  color: rgba(0, 0, 0, 0.85);
  background-color: rgba(247, 247, 207, 0.85);
  border-bottom: 2px solid white;
}

.tab.active:hover {
  color: rgba(0, 0, 0, 1);
  background-color: rgba(247, 247, 207, 1);
  border-bottom: 2px solid white;
}


.lazy-image {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.lazy-image.loaded {
  opacity: 1;
}
.image-wrapper {
  margin-bottom: 24px;
  text-align: center;
}
.caption {
  margin-top: 8px;
  font-size: 15px;
  color: #444;
  text-align: center; /* ✅ This centers the text */
}

.fullscreen-viewer {
  position: fixed;
  /* top: 0; left: 0;
  width: 100vw;
  height: 100vh; */
  
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column; /* ✅ Stack image + caption vertically */
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.fullscreen-viewer img {
  max-width: 90%;
  max-height: 80%; /* leave room for caption */
  object-fit: contain;
}


.fullscreen-img-container {
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fullscreen-video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 8px;
}

.fullscreen-viewer.video-mode {
  flex-direction: row; /* prevent vertical stacking for video */
  padding: 0;
}

.fullscreen-video {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}

.video-thumb {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: opacity 0.5s ease;
}




#gallery-wrapper {
  /* height: 70vh; From 25% to 95% = 70% height */
  position: relative;
  margin-top: 20vh;
  z-index: 2;
}



/* THIS CODE WAS ADDED TO FADE BEHIND THE NAVIGATION --------------------------------------*/
.top-fade-overlay {  
  position: fixed;
  top: 50;
  left: 0;
  width: 100%;
  height: 50px; /* Adjust height as needed */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85), rgba(247, 247, 207, 0));
  pointer-events: none;
  z-index: 5; /* Adjust if needed to place under the tab bar */
}
/*---------------------------END FADE CODE --------------------------------------*/



.image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(23%, 1fr));
  gap: 16px;
  padding: 20px;
  justify-items: center;
  padding: 16px;
  overflow-y:auto;
  
}



.image-wrapper {
  width: 100%;
  height: auto;
  max-width: 100%;
  text-align: center;
}


.image-wrapper picture,
.image-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

.image-wrapper img {
  object-fit: contain;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

.image-wrapper img:hover {cursor: pointer}





.fullscreen-caption {
  width: 100%;
  padding: 12px;
  text-align: center;
  color: white;
  font-size: 22px;
  /* background: rgba(0, 0, 0, 0.75); */
  box-sizing: border-box;
}


.image-container {
  position: relative;
  width: 100%;
}

.image-container img {
  width: 100%;
  display: block;
}

.image-container .caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 14px;
  padding: 8px 12px;
  text-align: center;
  opacity: 0.9;
}

.caption.portrait-caption {
  display: none;
}

.nav-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30%;
  z-index: 2;
  cursor: pointer;
}
.left-zone {
  left: 0;
}
.right-zone {
  right: 0;
}

/* ---------- BACKGROUND LOGO PLACEMENT AND FADE-IN--------------------------------------------- */

@keyframes logofadein {
	0% {opacity: 0;}
	30% {opacity: 0;}
	70% {opacity: 0.5;}
	80% {opacity: 0.5;}
	100% {opacity: 0.15;}
}

.logoback-container {
	z-index: 1;
	position: fixed;
	text-align: center;
	top: 100px;
	width: 80%;
	left: 10%;
	height: 80%;
	transition: top 2s ease, left 2s ease, height 2s ease;
}

.back {
	height: 90%;
	width: auto;
	opacity: 0.15;
	z-index: -4;
	left: 25%;
	transition: height 2s ease, width 2s ease, left 2s ease, top 2s ease;
	animation: logofadein 6s linear;
}



/* ----------------- PORTRAIT mode: full-height single image viewer------------------------------------------------------------- */

@media (orientation: portrait) {

  #gallery-wrapper {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
	margin-top: 1vh;
	z-index: 2; 

  }

  .image-grid {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    width: 100%;
    height: 100%;
  }

  .image-wrapper {
    flex: 0 0 100%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: 100vh;
    box-sizing: border-box;
    padding: 16px;

  }

  .image-wrapper img {
    max-width: 100%;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  
.fullscreen-caption {
    margin-top: 16px;
    color: white;
    font-size: 16px;
    text-align: center;
    /* background: rgba(0, 0, 0, 0.6); */
    padding: 10px;
    width: 100%;
    box-sizing: border-box;
  }  
  
 .caption.portrait-caption {
    display: block !important;
    position: relative;
    z-index: 500;
    margin-top: 12px;
    font-size: 18px;
    text-align: center;
    color: black;
    background: rgba(177, 156, 217, 0.7);
    padding: 8px 12px;
    width: 90%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }
  
  #video-wrapper {
    grid-template-columns: 1fr;
  }
  


/* ----------------NAVIGATION PORTRAIT -------------------------------------------- */
    #vertnavbar {
	  position: fixed;
	  display: block;
	  right: -80%;
	  width: 120px;
	  transition: right 1s;
	}
  
    #vertnavbar a {
      font-size: 18px;
    }
	
	#dropmenu {
	  z-index: 100;
	  right: 0; 
	  transition: right 1s;
	}
	
    #dropmenu {
      display: block;
	  z-index: 2000;
	  right: 0; 
	  transition: right 1s;
    }
	
	#navbar {
	left: 100%;
	width: 100%;
	transition: left 1s;
    }



/*-------------------------------LOGO--------------------- */
  .logoback-container {
     top: 125px;
	 transition: top 2s ease;
  }

   .back {
	height: auto;
	width: 98%;
	z-index: 1;
	left: 0;
	top: 10%;
	transition: height 2s ease, width 2s ease, left 2s ease, top 2s ease;
   }
 
 }