.landing-page {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.landing-page .overlap-group-wrapper {
  background-color: #ffffff;
  border: 1px none;
  width: 430px;
  height: 932px;
}

.landing-page .overlap-group {
  position: relative;
  height: 932px;
  background-image: url(./img/background-01.png);
  background-size: cover;
  background-position: 50% 50%;
}

.landing-page .question-button {
  position: absolute;
  width: 138px;
  height: 134px;
  top: 798px;
  left: 272px;
  object-fit: cover;
}

.landing-page .play-button {
      /* Adjust the positioning and dimensions to avoid overlap */
      position: absolute;
        width: 60%; /* Set the width to 100% to fit the container */
        height: auto; /* Let the height adjust proportionally */
        top: 550px;
        left: 90px;
        object-fit: cover;
    }

.landing-page .spin-the-wheel-title {
        /* Adjust the positioning and size of the image */
        position: absolute;
        width: 100%; /* Set the width to 100% to fit the container */
        height: auto; /* Let the height adjust proportionally */
        top: 150px;
        left: 1px;
        object-fit: cover;
      }

.landing-page .fish {
  position: absolute;
  width: 173px;
  height: 170px;
  top: 643px;
  left: 257px;
  object-fit: cover;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: fish1Move;
}

.landing-page .fish-3 {
  position: absolute;
  width: 86px;
  height: 81px;
  top: 516px;
  left: 25px;
  object-fit: cover;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: fish2Move;
}

.landing-page .fish-2 {
  position: absolute;
  width: 126px;
  height: 83px;
  top: 69px;
  left: 301px;
  object-fit: cover;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: fish3Move;
}   
          @keyframes fish1Move {
    0%, 100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(30px, 10px); /* Adjust the values to keep the fish within bounds */
    }
  }

  @keyframes fish2Move {
    0%, 100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(-40px, -20px); /* Adjust the values to keep the fish within bounds */
    }
  }

  @keyframes fish3Move {
    0%, 100% {
      transform: translate(0, 0);
    }
    50% {
      transform: translate(-60px, 15px); /* Adjust the values to keep the fish within bounds */
    }
  }
          
.popup{
  display: none;
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 430px;
  height: 932px;
}

.popup .overlap-wrapper {
  width: 430px;
  height: 932px;
}

.popup .overlap {
  position: relative;
  height: 932px;
  background-size: cover;
  background-position: 50% 50%;
}

.popup .rectangle {
  position: absolute;
  width: 430px;
  height: 932px;
  top: 0;
  left: 0;
}

.popup .exit-button {
  position: absolute;
  width: 37px;
  height: 38px;
  top: 20px;
  left: 374px;
  object-fit: cover;
}

.popup .frame-bottom {
  position: absolute;
  width: 417px;
  height: 237px;
  top: 382px;
  left: 7px;
}

.popup .overlap-group {
  position: relative;
  height: 237px;
}

.popup .group {
  position: absolute;
  width: 417px;
  height: 227px;
  top: 0;
  left: 0;
}

.popup .img {
  position: absolute;
  width: 379px;
  height: 171px;
  top: 48px;
  left: 24px;
}

.popup .group-2 {
  position: absolute;
  width: 106px;
  height: 147px;
  top: 90px;
  left: 310px;
}

.popup .image {
  position: absolute;
  width: 321px;
  height: 108px;
  top: 70px;
  left: 48px;
  object-fit: cover;
}

.popup .frame-top {
  position: absolute;
  width: 324px;
  height: 328px;
  top: 137px;
  left: 54px;
}

.popup .div {
  position: relative;
  width: 309px;
  height: 299px;
  top: 29px;
  left: 11px;
}

.popup .vector {
  position: absolute;
  width: 248px;
  height: 248px;
  top: 13px;
  left: 26px;
  mix-blend-mode: screen;
}

.popup .vector-2 {
  position: absolute;
  width: 251px;
  height: 251px;
  top: 0;
  left: 30px;
  mix-blend-mode: screen;
}

.popup .frame-top-2 {
  position: absolute;
  width: 309px;
  height: 280px;
  top: 20px;
  left: 0;
  object-fit: cover;
}

.popup .contact-us-button {
  position: absolute;
  width: 172px;
  height: 74px;
  top: 582px;
  left: 129px;
  object-fit: cover;
}