.progress-container {
  width: 36rem;
  height: 1.5px;
  position: fixed;
  z-index: 99999;
  background: rgba(255, 255, 255, 0.44);
  bottom: 5rem;
  left: 50%;
  transform: translate(-50%);
}

.progress-bar {
  height: 1.5px;
  background: gold;
  width: 0%;
}

.gallery-buttons {
  position: fixed;
  z-index: 99999;
  bottom: 2rem;
  width: 100vw;
  min-width: 100%;
  display: flex;
  justify-content: center;
  transition: opacity 0.5s;
  gap: 1rem;
  background: none;
  

}




.gallery-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0rem;
  font-family: reg;
  border-radius: 20rem;
  border: none;
  height: 1.6rem;
  width: 1.7rem;
  background-color: rgb(20, 20, 20);
  transition: 0.3s;
  width: 1.8rem; /* default width of the button */
  transition:  0.3s; /* transition applies to the width */
}



.gallery-button.active {
  width: 8rem;
  animation: wide 0.4s forwards;
  animation: width 0.3s; /* transition applies to the width */


}
.gallery-button.active span {
  display: flex;
  font-size: 0.9rem;
  opacity: 0;
}

.activespan {
 opacity: 1 !important;
}
.activetxt {
  animation: galbut 0.5s 0.2s forwards ;
}

.gallery-button img {
  width: 0.9rem;
  height: auto;
  opacity: 0.7;
}

.gallery-button.active img {
  opacity: 1;
}


@keyframes galbut {
  0% {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  100% {
    transform: translateY(0rem);
    opacity: 1 ;

  }
}



@keyframes wide {
  0% {
    width: 1.8rem;
  }
  100% {
    width: 8rem;
  }
}

.gallery-button span {
  display: none;
  color: rgb(216, 216, 216);
}



.gallery-button:hover {
  transform: scale(1.05);
}

.gallery-button:hover   img {
  opacity: 1;
}


@keyframes next {
  0% {
    filter: blur(0);
  }
  100% {
    filter: blur(0.7rem);
    transform: translateX(-40vw);
  }
}

@keyframes nextfirst {
  0% {
    filter: blur(0);
  }
  100% {
    filter: blur(0.7rem);
    transform: translateX(-10vw);
  }
}
@keyframes prevfirst {
  0% {
    filter: blur(0);
  }
  100% {
    filter: blur(0.7rem);
    transform: translateX(-80vw);
  }
}


@keyframes prev {
  0% {
    filter: blur(0);
  }
  100% {
    filter: blur(0.7rem);
    transform: translateX(40vw);
  }
}



.wipeleft {
  animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-left both;
  opacity: 1 !important;
  display: block !important;
}


.wiperight {
  animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-right both;
  opacity: 1 !important;
  display: block !important;
}


@keyframes wipe-in-left {
  from {
    clip-path: inset(0 0 0 100%);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}



@keyframes wipe-in-right {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}


.nextgal {
  animation: 1s next forwards;
}

.nextfirst {
  animation: 1s nextfirst forwards;
}

.prevfirst {
  animation: 1s prevfirst forwards;
}

.prevgal {
  animation: 1s prev forwards;
}


#gal1 {
  background-color: rgb(6, 6, 6);  
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  left: 0rem;
  top: 0rem;
  opacity: 0;
  display: none;
}

#gal2 {
  background-color: rgb(6, 6, 6);  
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  left: 0rem;
  top: 0rem;
  opacity: 0;
  display: none;
}

#gal3 {
  background-color: rgb(6, 6, 6);  
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 99;
  left: 0rem;
  top: 0rem;
  opacity: 0;
  display: none;
}

iframe {
  height: 100vh;
  width: 100vw;
  position: fixed;
  background-color: black;
}


.player {
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 9999999999999;
  pointer-events: none;
  left: 0;
  top: 0;
  opacity: 0;
  background-color: black;
}


.playvideo {
  pointer-events:all !important; 
  animation: fadeintest 0.8s ease forwards;
  display: block;
  opacity: 1;
}

iframe {
  border: none;
}

.closevideo {
  pointer-events: none;
  animation: fadeout 0.4s ease forwards;
}



@keyframes fadeout {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}
@keyframes fadeintest {
  0% {
    opacity: 0;
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}


@keyframes wipe-in-top {
  from {
    clip-path: inset( 100% 0 0 0); opacity: 1;
  }
  to {
    clip-path: inset(0 0 0 0); opacity: 1;
  }
}

@keyframes wipe-out-top {
  from {
    clip-path: inset(0 0 0 0); opacity: 1;

  }
  to {
    clip-path: inset( 100%  0 0 0); opacity: 1;

  }
}



.player {
  position: fixed;
  z-index: 9999999999999;
  left: 0;
  top: 0;
  background-color: transparent;
}

.playercontent {
  color: gold;
  width: 100%;
  background-image: linear-gradient(to bottom, rgb(11, 11, 11), rgba(0, 0, 0, 0));
  position: fixed;
  height: 20vh;
  top: 0rem;
  font-family: mid;
  padding-left: 2rem;
  padding-top: 2rem;
  z-index: 9999999999999999999;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  transition: opacity 0.5s ease-out;
}


.playertitle {
  font-family: demi;
  color: gold;
  font-size: 1.4rem;
  opacity: 0;
  text-transform: uppercase;
}

.playersubtitle {
  font-size: 0.8rem;
  color: white;
  text-transform: capitalize;
  font-family: light;
  margin-left: 0.1rem;

  opacity: 0;
}

.x {
  position: fixed;
  right: 1.8rem;
  top: 2rem;
  width: 2rem;
  height: 2rem;
  filter: invert(1);
  z-index: 99999999999999;
  cursor: pointer;
 
}


.blur {
  animation: blurbg 0.5s forwards;
}

.blurout {
  animation: bluroutbg 0.5s forwards;
}

@keyframes blurbg {
  0% {
    filter: blur(0);
    transform: translateX(-50vw) translateY(0vw);

  }
  100% {
    filter: blur(2rem);
    transform:  translateX(-50vw)  translateY(-20vw);
  }
  
}


@keyframes bluroutbg {

  0% {
    filter: blur(2rem);
    transform:  translateX(-50vw)  translateY(-20vw);
  }
  100% {
    filter: blur(0);
    transform: translateX(-50vw) translateY(0vw);

  }
  
}
.textin  {
  animation: textin 0.6s  0.6s forwards;

}

.textout  {
  animation: textout 0.2s  0.6s forwards;

}

@keyframes textin {
  0% {
    opacity: 0;
    transform: translate(-8%);
  }
  100% {
    opacity: 1;
    transform: translate(0%);
  }
}



@keyframes textout {
  0% {
    opacity: 1;
    transform: translateX(0%);
  }
  100% {
    opacity: 0;
    transform: translateX(-10%);
  }
}







.tadivdiv { width: 100vw; height: 100vh; position: fixed; z-index: 99999999999; background-color: black; clip-path: polygon(50% , 50%, 100%, 50%); opacity: 0; pointer-events: none;} 
.tadiv {width: 100vw; height: 75vh; position: fixed;  overflow: hidden; filter: hue-rotate(60deg);}
.tadiv img {width: 100vw; height: auto;}

.wipeup {
  animation: 1s cubic-bezier(.25, 1, .30, 1) wipe-in-up both;
  opacity: 1;

}

@keyframes wipe-in-up {
  from {
    clip-path: inset(100% 0 0 0);
    transform: translateY(10rem);
  }
  to {
    clip-path: inset(0 0 0 0);
    transform: translateY(-0rem);

  }
}



.blurup {
  animation: blurup 1s ease forwards;
  opacity: 1;
}

@keyframes blurup {
  0% {
    transform: translateY(0rem);
    filter: blur(0rem);
  }
  100% {
    transform: translateY(-20rem);
    filter: blur(1rem);
  }
}


.nav-button {
  padding: 0rem;
}