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

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

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

.spinwheel-page .home-button {
  position: absolute;
  width: 138px;
  height: 134px;
  top: 798px;
  left: 292px;
  object-fit: cover;
}

.spinwheel-page .overlap {
  position: absolute;
  width: 260px;
  height: 186px;
  top: 595px;
  left: 85px;
}

.spinwheel-page .spin-now-button {
  position: absolute;
  width: 215px;
  height: 99px;
  top: 0;
  left: 21px;
  object-fit: cover;
}

.spinwheel-page .hand {
  position: absolute;
  width: 63px;
  height: 48px;
  top: 57px;
  left: 197px;
  object-fit: cover;
}

.spinwheel-page .hear-bar {
  position: absolute;
  width: 254px;
  height: 112px;
  top: 74px;
  left: 0;
  object-fit: cover;
}

.spinwheel-page .amount-bar {
  position: absolute;
  width: 173px;
  height: 58px;
  top: 15px;
  left: 116px;
  object-fit: cover;
}

.spinwheel-page .div {
  position: absolute;
  width: 410px;
  height: 420px;
  top: 146px;
  left: 10px;
  object-fit: 
}

.spinwheel-page .spinwheel {
  position: absolute;
  width: 91px;
  height: 93px;
  top: 0;
  left: 159px;
  object-fit: cover;
}

.spinwheel-page .img {
  position: absolute;
  width: 410px;
  height: 410px;
  top: 10px;
  left: 0;
  object-fit: cover;
}

.spinwheel-page .spinwheel-2 {
  position: absolute;
  width: 12%;
  height: auto;
  top: 18px;
  left: 180px;
  object-fit: cover;
}

.spinwheel-page .spinwheel-3 {
  position: absolute;
  width: 74px;
  height: 74px;
  top: 177px;
  left: 167px;
  object-fit: cover;
}

.amount-bar .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
    /* Add this for rotation animation of spinwheel-02 */
.spinwheel-page .rotate-spinwheel-02 {
    animation: rotate02 5s linear infinite; /* Adjust the duration as needed */
}
      
      .bar-with-text {
      position: relative;
    }

    .bar-text {
  position: absolute;
  margin-top: 45px; /* Adjust the vertical position */
  left: 50%; /* Adjust the horizontal position */
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
      
      .hear-bar {
      position: absolute;
      width: 254px;
      height: 112px;
      top: 74px;
      left: 0;
      object-fit: cover;
    }
    
    .bar-with-text2 {
      position: relative;
    }
      
    .bar-text2 {
      position: absolute;
      margin-top: 130px; /* Adjust the vertical position */
      left: 50%; /* Adjust the horizontal position */
      transform: translate(-50%, -50%);
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
      
      .decelerate {
          transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
      }

@media only screen and (min-width: 1px) and (max-width: 400px) {
    
  .spinwheel-page {
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

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

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

.spinwheel-page .home-button {
  position: absolute;
  width: 30%;
  height: auto;
  top: 800px;
  left: 252px;
  object-fit: cover;
}

.spinwheel-page .overlap {
  position: absolute;
  width: 260px;
  height: 186px;
  top: 595px;
  left: 85px;
}

.spinwheel-page .spin-now-button {
  position: absolute;
  width: 60%;
  height: auto;
  top: -10px;
  left: 21px;
  object-fit: cover;
}

.spinwheel-page .hand {
  position: absolute;
  width: 63px;
  height: 48px;
  top: 57px;
  left: 197px;
  object-fit: cover;
}

.spinwheel-page .hear-bar {
  position: absolute;
  width: 254px;
  height: 112px;
  top: 74px;
  left: -30px;
  object-fit: cover;
}

.spinwheel-page .amount-bar {
  position: absolute;
  width: 173px;
  height: 58px;
  top: 15px;
  left: 96px;
  object-fit: cover;
}

.spinwheel-page .div {
  position: absolute;
  width: 100%;
  height: auto;
  top: 146px;
  left: 10px;
  object-fit: 
}

.spinwheel-page .spinwheel {
  position: absolute;
  width: 21%;
  height: auto;
  top: 0;
  left: 138px;
  object-fit: cover;
}

.spinwheel-page .img {
  position: absolute;
  width: 100%;
  height: auto;
  top: 10px;
  left: -10px;
  object-fit: cover;
}

.spinwheel-page .spinwheel-2 {
  position: absolute;
  width: 10%;
  height: auto;
  top: 18px;
  left: 158px;
  object-fit: cover;
}

.spinwheel-page .spinwheel-3 {
  position: absolute;
  width: 15%;
  height: auto;
  top: 170px;
  left: 148px;
  object-fit: cover;
}

.amount-bar .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
    /* Add this for rotation animation of spinwheel-02 */
.spinwheel-page .rotate-spinwheel-02 {
    animation: rotate02 5s linear infinite; /* Adjust the duration as needed */
}
      
      .bar-with-text {
      position: relative;
    }

    .bar-text {
  position: absolute;
  margin-top: 45px; /* Adjust the vertical position */
  left: 50%; /* Adjust the horizontal position */
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
      
      .hear-bar {
      position: absolute;
      width: 254px;
      height: 112px;
      top: 74px;
      left: 0;
      object-fit: cover;
    }
    
    .bar-with-text2 {
      position: relative;
    }
      
    .bar-text2 {
      position: absolute;
      margin-top: 130px; /* Adjust the vertical position */
      left: 40%; /* Adjust the horizontal position */
      transform: translate(-50%, -50%);
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
    }
      
      .decelerate {
          transition-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67);
      }
}

.popup {
  display: none;
  position: absolute;
  top: 45%;
  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 .frame {
  position: absolute;
  width: 403px;
  height: 678px;
  top: 50px;
  left: 14px;
}

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

.popup .vector {
  position: absolute;
  width: 336px;
  height: 393px;
  top: 256px;
  left: 33px;
  mix-blend-mode: screen;
}

.popup .img {
  width: 253px;
  height: 253px;
  top: 43px;
  left: 76px;
  position: absolute;
  mix-blend-mode: screen;
}

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

.popup .image {
  position: absolute;
  width: 403px;
  height: 678px;
  top: 0;
  left: 0;
  object-fit: cover;
}

.popup .text-wrapper {
  position: absolute;
  width: 73px;
  top: 502px;
  left: 198px;
  text-shadow: 0px 4px 4px #0078b740;
  -webkit-text-stroke: 2px #0078b7;
  font-family: "Montserrat", Helvetica;
  font-weight: 700;
  color: #ffffff;
  font-size: 28px;
  letter-spacing: 0;
  line-height: normal;
}

.popup .contact-us-button {
  position: absolute;
  width: 172px;
  height: 74px;
  top: 600px;
  left: 129px;
  object-fit: cover;
}
.popup .rectangle {
  position: absolute;
  width: 100%;
  height: 700px;
  top: 0;
  left: 0;
}

.popup .exit-button {
  position: absolute;
  width: 37px;
  height: 38px;
  top: 20px;
  left: 374px;
  object-fit: cover;
}
      
      .text-overlay {
  position: absolute;
  top: 69.5%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 34px;
  font-weight: bold;
  color: white;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
}


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