/*-------------------------------------------Background Image---------------------------------------------*/
#bg {
  width: 100%;
  height: auto;
}

/*-------------------------------------------Redirect Button---------------------------------------------*/
.redirect-btn {
  top: 42%;
}

.redirect-btn img {
  width: 50%;
  animation: pulse 0.9s infinite linear;
}

.redirect-btn1 {
  top: 27%;
}

.redirect-btn1 img {
  width: 60%;
  animation: float-up-down 0.9s ease-in-out infinite;
}

.gif img {
  position: absolute;
  bottom: 0%;
}

.gif1 img {
  position: absolute;
  top: 0%;
}

.icon1 {
  position: absolute;
  right: 4%;
  top: 25%;
  width: 20%;
  animation: floaty 3s ease-in-out infinite;
}

.icon2 {
  position: absolute;
  right: 0%;
  bottom: 0%;
  width: 20%;
  animation: floaty-alt 3s ease-in-out infinite;
}

.icon3 {
  position: absolute;
  top: 45%;
  right: 6%;
  width: 14%;
  animation: floaty-orbit 4s ease-in-out infinite;
}

.icon4 {
  position: absolute;
  bottom: 2%;
  right: 40%;
  width: 17%;
  animation: floaty-random 7s ease-in-out infinite;
}

.icon5 {
  position: absolute;
  top: 30%;
  right: 0%;
  width: 30%;
  animation: floaty-random 7s ease-in-out infinite;
}

.icon6 {
  position: absolute;
  top: 48%;
  left: 3%;
  width: 15%;
  animation: floaty-spiral 5s ease-in-out infinite;
}

.icon7 {
    position: absolute;
    top: 0%;
    left: 10%;
    width: 10%;
    animation: floaty-chaos 5s ease-in-out infinite;
  }

  /* Comment if using Slide keyframe */
  .add-animation-zoom {
      animation: zoomBounce 0.3s ease;
      animation: zoomOut 0.3s ease;
  }

  .add-animation-zoom2 {
    animation: nudge 3s linear;
  }

  .title {
    animation: pulse3 2s infinite linear;
  }

  .title2 {
    animation: nudge2 1.4s infinite linear;
  }

  .e1 {
    animation: pulse2 2s infinite linear;
  }

  .e2 {
    animation: pulse2 2s infinite linear;
    animation-delay: 0.5s;
  }

  .e3 {
    animation: pulse2 2s infinite linear;
    animation-delay: 1s;
  }

  .e4 {
    animation: pulse2 2s infinite linear;
    animation-delay: 1.5s;
  }


/*-------------------------------------------Keyframe Animation---------------------------------------------*/
@keyframes nudge {
  /* 0% {
      transform: translate(0);
      opacity: 1;
  } */

  0% {
    transform: scale(0.9);
    opacity: 0.5;
  }

  3% {
      transform: scale(1.2);
      opacity: 0.8;
  }

  8% {
      transform: scale(1);
      opacity: 1;
  }

  20% {
    transform: translate(0);
    opacity: 1;
}

  25% {
      transform: translate(10px);
      opacity: 1;
  }

  28% {
      transform: translate(0);
      opacity: 1;
  }

  31% {
      transform: translate(10px);
      opacity: 1;
  }

  34% {
    transform: translate(0);
    opacity: 1;
  }

  37% {
    transform: translate(10px);
    opacity: 1;
  }

  40% {
    transform: translate(0);
    opacity: 1;
  }

  100% {
      transform: translate(0);
      opacity: 1;
  }
}

@keyframes nudge2 {
  0% {
      transform: translate(0);
      opacity: 1;
  }

  8% {
      transform: translate(-10px);
      opacity: 1;
  }

  16% {
      transform: translate(0);
      opacity: 1;
  }

  20% {
    transform: translate(-10px);
    opacity: 1;
}

  25% {
    transform: translate(0);
    opacity: 1;
  }

  100% {
    transform: translate(0);
    opacity: 1;
  }
}

@keyframes zoomOut {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    35% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    65% {
        transform: scale(1.2);
        opacity: 0.8;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomBounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    35% {
        transform: scale(0.7);
        opacity: 0.5;
    }

    55% {
        transform: scale(1.1);
        opacity: 0.7;
    }

    65% {
        transform: scale(0.8);
        opacity: 0.8;
    }

    85% {
        transform: scale(1.2);
        opacity: 0.9;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}


@keyframes pulse {
  0% {
    transform: scale(0.9);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(0.9);
  }
}

@keyframes pulse2 {
  0% {
    transform: scale(1);
  }

  10% {
    transform: scale(1.2);
  }

  20% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes pulse3 {
  0% {
    transform: scale(1);
  }

  5% {
    transform: scale(1.3);
  }

  10% {
    transform: scale(1);
  }

  13% {
    transform: scale(1.2);
  }

  16% {
    transform: scale(1);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes floaty-chaos {
    0% {
      transform: translate(0px, 0px);
    }
    10% {
      transform: translate(-20px, 10px);
    }
    25% {
      transform: translate(15px, -25px);
    }
    40% {
      transform: translate(-10px, 20px);
    }
    55% {
      transform: translate(25px, 5px);
    }
    70% {
      transform: translate(-30px, -15px);
    }
    85% {
      transform: translate(10px, 25px);
    }
    100% {
      transform: translate(0px, 0px);
    }
  }



@keyframes float-up-down {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes floaty-spiral {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(20px, -10px);
  }
  25% {
    transform: translate(40px, 20px);
  }
  40% {
    transform: translate(20px, 40px);
  }
  55% {
    transform: translate(-10px, 30px);
  }
  70% {
    transform: translate(-15px, 10px);
  }
  85% {
    transform: translate(-20px, -20px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes floaty-random {
  0% {
    transform: translate(0, 0);
  }
  15% {
    transform: translate(20px, -25px);
  }
  30% {
    transform: translate(-30px, 20px);
  }
  45% {
    transform: translate(25px, 30px);
  }
  60% {
    transform: translate(-20px, -15px);
  }
  75% {
    transform: translate(15px, -30px);
  }
  90% {
    transform: translate(-25px, 25px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes floaty-orbit {
  0% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(8px, -8px);
  }
  40% {
    transform: translate(12px, 6px);
  }
  60% {
    transform: translate(-8px, 10px);
  }
  80% {
    transform: translate(-12px, -6px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes floaty {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(10px, -15px);
  }
  50% {
    transform: translate(0, 15px);
  }
  75% {
    transform: translate(-15px, -15px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes floaty-alt {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(-12px, -10px);
  }
  50% {
    transform: translate(15px, 8px);
  }
  75% {
    transform: translate(-8px, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/*-------------------------------------------Multi Device Screen Size---------------------------------------------*/
/* Large devices (desktops, 992px and up) */
/* @media (min-width: 992px) {
    #bg {
        height: 100vh;
    }
} */