@font-face {
  font-family: "Futura-Bold";
  src: url("../fonts/FuturaPTBold.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Futura-ExtraBold";
  src: url("../fonts/FuturaPTExtraBold.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Futura-Light";
  src: url("../fonts/FuturaPTLight.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Futura-Medium";
  src: url("../fonts/FuturaPTMedium.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Futura-Regular";
  src: url("../fonts/FuturaPTBook.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Futura-SemiBold";
  src: url("../fonts/FuturaPTDemi.otf") format("opentype");
  font-weight: normal;
}

.boxshadow{
  box-shadow: 0 0px 12px 5px #DCDCDC;
}


#loader {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #ffffff80;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}
.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #ddd;
  border-top: 5px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
/* Hide loader after page loads */
.loader-hidden {
  opacity: 0;
  pointer-events: none;
}

/* animation */

.hidden-animation {
  opacity: 0;
}

.show.slide-up {
  opacity: 1;
  /* transform: translateY(0); */
  animation: rebel-fade-in 0.8s ease-in-out;
}
.show.slide-down {
  opacity: 1;
  /*transform: translateY(0);
  */animation: rebel-fade-out 0.8s ease-in-out;
  -webkit-animation: rebel-fade-out 0.8s ease-in-out;
}
.show.zoomout{
  opacity: 1;
  
  animation: rebel-zoom-out 0.8s ease-in-out;
}
.show.slide-left{
  opacity: 1;
  animation: rebel-left 0.8s ease-in-out;
}
.show.slide-right-top{
  opacity: 1;
  animation: rebel-right 0.8s ease-in-out;
}

@keyframes rebel-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20%);
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
}
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rebel-fade-out {
  0% {
    opacity: 0;
    transform: translateY(-30%);
    -webkit-transform: translateY(-30%);
    -moz-transform: translateY(-30%);
    -ms-transform: translateY(-30%);
    -o-transform: translateY(-30%);
}
  100% {
    opacity: 1;
    transform: translateY(0); 
  }
}
@keyframes rebel-zoom-out {
  0% {
    opacity: 0.5;
    scale: 0.5;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
@keyframes rebel-left {
  0% {
    opacity: 0.5;
    transform: translate(-50px, -40px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}
@keyframes rebel-right {
  0% {
    opacity: 0.5;
    transform: translate(50px, -40px);
  }
  100% {
    opacity: 1;
    transform: translate(0px, 0px);
  }
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.show.fade-in {
  opacity: 1;
  animation: fadeIn 1s ease-in-out;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.show.slide-in-left {
  opacity: 1;
  animation: slideInLeft 0.5s ease-out;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}

.show.bounce {
  opacity: 1;
  animation: bounce 0.5s ease-in-out;
  -webkit-animation: bounce 0.5s ease-in-out;
}

@keyframes zoomIn {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.show.zoom-in {
  opacity: 1;
  animation: zoomIn 0.6s ease-in-out;
}

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

.show.rotate {
  opacity: 1;
  animation: rotate 2s linear;
  -webkit-animation: rotate 2s linear;
}


@keyframes wiggle {
  0%, 100% {
    transform: rotate(0);
  }
  25% {
    transform: rotate(-5deg);
  }
  75% {
    transform: rotate(5deg);
  }
}

.show.wiggle {
  opacity: 1;
  animation: wiggle 0.5s ease-in-out;
  -webkit-animation: wiggle 0.5s ease-in-out;
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 10px #fceb0557;
  }
  50% {
    box-shadow: 0 0 20px #fceb0557;
  }
}

.show.pulse-glow {
  opacity: 1;
  animation: pulseGlow 1.5s infinite alternate;
}

@keyframes swing {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(15deg);
  }
  50% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(5deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

.show.swing {
  opacity: 1;
  animation: swing 1s ease-in-out;
  -webkit-animation: swing 1s ease-in-out;
}

@keyframes flipIn {
  from {
    transform: perspective(400px) rotateY(-90deg);
    opacity: 0;
  }
  to {
    transform: perspective(400px) rotateY(0);
    opacity: 1;
  }
}

.show.flip-in {
  opacity: 1;
  animation: flipIn 0.8s ease-out;
}

.show.floating-bubble {
  opacity: 1;
  animation: floatBubble 2s ease-in-out;
  -webkit-animation: floatBubble 2s ease-in-out;
}

@keyframes floatBubble {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes stretchSquash {
  0%, 100% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.2, 0.8);
  }
}

.show.stretch-squash {
  opacity: 1;
  animation: stretchSquash 0.6s ease-in-out;
  -webkit-animation: stretchSquash 0.6s ease-in-out;
}

@keyframes lightningFlash {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
}

.show.lightning-flash {
  opacity: 1;
  animation: lightningFlash 0.1s alternate;
  -webkit-animation: lightningFlash 0.1s alternate;
}

@keyframes twirlExpand {
  0% {
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(180deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

.show.twirl-expand {
  opacity: 1;
  animation: twirlExpand 1s ease-out;
}

@keyframes ripple {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

.show.ripple {
  opacity: 1;
  animation: ripple 1.5s linear;
  -webkit-animation: ripple 1.5s linear;
}


@keyframes swipeGlow {
  0% {
    background-position: -200%;
  }
  100% {
    background-position: 200%;
  }
}

.show.swipe-glow {
  opacity: 1;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%);
  background-size: 200% 100%;
  animation: swipeGlow 2s linear ;
  -webkit-animation: swipeGlow 2s linear ;
}

@keyframes popcorn {
  0% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-20px);
  }
  50% {
    transform: translateY(0);
  }
  70% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.show.popcorn {
  opacity: 1;
  animation: popcorn 0.8s ease-in-out;
  -webkit-animation: popcorn 0.8s ease-in-out;
}

@keyframes spiral {
  from {
    transform: rotate(0deg) scale(0);
    opacity: 0;
  }
  to {
    transform: rotate(360deg) scale(1);
    opacity: 1;
  }
}

.show.spiral {
  opacity: 1;
  animation: spiral 1.5s ease-out;
}

@keyframes wavyText {
  0%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-5px);
  }
  50% {
    transform: translateY(5px);
  }
  75% {
    transform: translateY(-3px);
  }
}

.show.wavy-text span {
  opacity: 1;
  display: inline-block;
  animation: wavyText 0.5s ease-in-out ;
  -webkit-animation: wavyText 0.5s ease-in-out ;
}

.show.wavy-text span:nth-child(1) { animation-delay: 0s; }
.show.wavy-text span:nth-child(2) { animation-delay: 0.1s; }
.show.wavy-text span:nth-child(3) { animation-delay: 0.2s; }
.show.wavy-text span:nth-child(4) { animation-delay: 0.3s; }
.show.wavy-text span:nth-child(5) { animation-delay: 0.4s; }

@keyframes rollIn {
  from {
    transform: translateX(-100%) rotate(-360deg);
    opacity: 0;
  }
  to {
    transform: translateX(0) rotate(0deg);
    opacity: 1;
  }
}

.show.roll-in {
  opacity: 1;
  animation: rollIn 1s ease-out;
  -webkit-animation: rollIn 1s ease-out;
}

@keyframes flipZoom {
  0% {
    transform: rotateY(0deg) scale(1);
  }
  50% {
    transform: rotateY(180deg) scale(1.2);
  }
  100% {
    transform: rotateY(360deg) scale(1);
  }
}

.show.flip-zoom {
  opacity: 1;
  animation: flipZoom 1.2s ease-in-out ;
  -webkit-animation: flipZoom 1.2s ease-in-out ;
}

@keyframes neonFlicker {
  0%, 100% {
    opacity: 1;
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff, 0 0 20px #0ff;
  }
  50% {
    opacity: 0.5;
    text-shadow: 0 0 2px #0ff, 0 0 5px #0ff, 0 0 10px #0ff;
  }
}

.show.neon {
  opacity: 1;
  animation: neonFlicker 0.15s alternate;
  color: #0ff;
  font-weight: bold;
  -webkit-animation: neonFlicker 0.15s alternate;
}

@keyframes jellyBounce {
  0%, 100% {
    transform: scale(1, 1);
  }
  25% {
    transform: scale(1.1, 0.9);
  }
  50% {
    transform: scale(0.9, 1.1);
  }
  75% {
    transform: scale(1.05, 0.95);
  }
}

.show.jelly {
  opacity: 1;
  animation: jellyBounce 1s ease-in-out;
  -webkit-animation: jellyBounce 1s ease-in-out;
}

.scroll-animate {
  width: 300px;
  margin: 50px auto;
  padding: 20px;
  background: white;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  font-size: 20px;
  opacity: 0; /* Initially hidden */
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

/* Different Animations */
@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(50px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

@keyframes slideInRight {
  from {
      opacity: 0;
      transform: translateX(50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}

@keyframes bounceIn {
  0% {
      opacity: 0;
      transform: scale(0.8);
  }
  50% {
      opacity: 1;
      transform: scale(1.1);
  }
  100% {
      transform: scale(1);
  }
}

/* Apply animation only once */
.scroll-animate.active {
  animation: fadeInUp 0.8s ease-out forwards;
}

.scroll-animate.delay.active {
  animation: slideInRight 0.8s ease-out forwards;
}

.scroll-animate.delay2.active {
  animation: bounceIn 0.8s ease-out forwards;
}