body,
html {
  overflow: hidden;
}
.d-lg-flex {
  overflow: hidden;
}
#bg {
  position: relative;
  width: 100%;
  height: 100vh;
}

/* -----------------------------------------goalkeeper ---------------------------------*/
.goalkeeper,
.goalkeeper2 {
  position: relative;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}
.goalkeeper img,
.goalkeeper2 img {
  width: 45vw;
  max-width: 400px;
}
.goalkeeper2 {
  display: none;
}
/*----------------------------------- arrow --------------------------------------*/
.arrow {
  pointer-events: none;
  top: 58%;
  left: 50%;
  transform: translateX(-50%);
}
.arrow img {
  width: 12.5vw;
  max-width: 400px;
}
/* ------------------------------------ball ------------------------------------*/
.ball {
  pointer-events: none;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
}
.ball img {
  width: 25vw;
  max-width: 400px;
}
.revert {
  transform: none;
}
/* -----------------------------------------guy ----------------------------------*/
.guy,
.guy2 {
  pointer-events: none;
  top: 55%;
  left: 36%;
  transform: translateX(-50%);
}
.guy img,
.guy2 img {
  width: 70vw;
  max-width: 600px;
}
.fly-out {
  transition: transform 1s ease-out;
}

.guy2 {
  display: none;
}
/* ----------------------------------------- left-----------------------------------------*/
.left {
  pointer-events: none;
  top: 82%;
  left: 16%;
  transform: translateX(-50%);
  animation: swingPulse 2s infinite ease-in-out;
}
.left img {
  width: 30vw;
  max-width: 400px;
}

@keyframes swingPulse {
  0%,
  100% {
    transform: translateX(-50%) rotate(0deg) scale(1);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-50%) rotate(-3deg) scale(1.1);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(-50%) rotate(3deg) scale(1.2);
  }
  50% {
    transform: translateX(-50%) rotate(360deg) scale(1.15);
  }
}
/* ----------------------------------------- right-----------------------------------------*/
.right {
  pointer-events: none;
  top: 82%;
  left: 84%;
  transform: translateX(-50%);
  animation: swingPulse 2s infinite ease-in-out;
}
.right img {
  width: 30vw;
  max-width: 400px;
}

/* -------------------------------Responsive styles for mobile------------------------- */
@media (max-width: 1025px) {
  .goalkeeper,
  .goalkeeper2 {
    top: 43.5%;
  }
  .goalkeeper img,
  .goalkeeper2 img {
    width: 38vw;
  }
  .arrow {
    top: 58.5%;
  }
  .arrow img {
    width: 11.5vw;
  }
  .ball {
    top: 70%;
  }
  .ball img {
    width: 20vw;
  }
  .guy,
  .guy2 {
    top: 55%;
    left: 38%;
  }
  .guy img,
  .guy2 img {
    width: 55vw;
  }
  .left,
  .right {
    top: 80%;
  }
  .left img,
  .right img {
    width: 20vw;
  }
}
@media (max-width: 913px) {
  .goalkeeper,
  .goalkeeper2 {
    top: 44.5%;
  }
  .goalkeeper img,
  .goalkeeper2 img {
    width: 38vw;
  }
  .arrow {
    top: 58.5%;
  }
  .arrow img {
    width: 11.5vw;
  }
  .ball {
    top: 70%;
  }
  .ball img {
    width: 20vw;
  }
  .guy,
  .guy2 {
    top: 55%;
    left: 38%;
  }
  .guy img,
  .guy2 img {
    width: 55vw;
  }
  .left,
  .right {
    top: 80%;
  }
  .left img,
  .right img {
    width: 22.5vw;
  }
}
@media (max-width: 769px) {
  .goalkeeper,
  .goalkeeper2 {
    top: 43.5%;
  }
  .goalkeeper img,
  .goalkeeper2 img {
    width: 38vw;
  }
  .arrow {
    top: 58.5%;
  }
  .arrow img {
    width: 11.5vw;
  }
  .ball {
    top: 70%;
  }
  .ball img {
    width: 20vw;
  }
  .guy,
  .guy2 {
    top: 55%;
  }
  .guy img,
  .guy2 img {
    width: 52.5vw;
  }
  .left,
  .right {
    top: 80%;
  }
  .left img,
  .right img {
    width: 22.5vw;
  }
}
@media (max-width: 431px) {
  .goalkeeper,
  .goalkeeper2 {
    top: 45%;
  }
  .goalkeeper img,
  .goalkeeper2 img {
    width: 52vw;
  }
  .arrow {
    top: 58.5%;
  }
  .arrow img {
    width: 12.5vw;
  }
  .ball {
    top: 70%;
  }
  .ball img {
    width: 30vw;
  }
  .guy,
  .guy2 {
    top: 55%;
  }
  .guy img,
  .guy2 img {
    width: 80vw;
  }
  .left,
  .right {
    top: 84%;
  }
  .left img,
  .right img {
    width: 27.5vw;
  }
}
@media (max-width: 376px) {
  .goalkeeper,
  .goalkeeper2 {
    top: 45%;
  }
  .goalkeeper img,
  .goalkeeper2 img {
    width: 45vw;
  }
  .arrow {
    top: 58%;
  }
  .arrow img {
    width: 12.5vw;
  }
  .ball {
    top: 70%;
  }
  .ball img {
    width: 25vw;
  }
  .guy,
  .guy2 {
    top: 55%;
  }
  .guy img,
  .guy2 img {
    width: 70vw;
  }
  .left,
  .right {
    top: 82%;
  }
  .left img,
  .right img {
    width: 25vw;
  }
}
@media (max-width: 361px) {
  .goalkeeper,
  .goalkeeper2 {
    top: 44.5%;
  }
  .goalkeeper img,
  .goalkeeper2 img {
    width: 52vw;
  }
  .arrow {
    top: 58.5%;
  }
  .arrow img {
    width: 12.5vw;
  }
  .ball {
    top: 70%;
  }
  .ball img {
    width: 30vw;
  }
  .guy,
  .guy2 {
    top: 55%;
  }
  .guy img,
  .guy2 img {
    width: 80vw;
  }
  .left,
  .right {
    top: 84%;
  }
  .left img,
  .right img {
    width: 27.5vw;
  }
}
@media (max-width: 345px) {
  .goalkeeper,
  .goalkeeper2 {
    top: 45.5%;
  }
  .goalkeeper img,
  .goalkeeper2 img {
    width: 60vw;
  }
  .arrow {
    top: 58.5%;
  }
  .arrow img {
    width: 14vw;
  }
  .ball {
    top: 70%;
  }
  .ball img {
    width: 30vw;
  }
  .guy,
  .guy2 {
    top: 58%;
  }
  .guy img,
  .guy2 img {
    width: 90vw;
  }
  .left,
  .right {
    top: 85%;
  }
  .left img,
  .right img {
    width: 27.5vw;
  }
}