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


/*-------------------------------------------Redirect Button---------------------------------------------*/
.redirect-btn1 {
    top: 30%;
}

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

.redirect-btn2 {
    top: 86%;
}

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


.el1 {
    top: 11%;
    right: 35%;

}

.el1 img {
    width: 13%;
    animation: floatCircle1 0.9s infinite linear;
}

.el2 {
    top: 25%;
    right: 39%;
}

.el2 img {
    width: 16%;
    animation: floatCircle2 0.9s infinite linear;
}

.el3 {
    top: 26%;
    left: 38%;
}

.el3 img {
    width: 12%;
    animation: floatCircle3 0.9s infinite linear;
}

.el4 {
    top: 10%;
    left: 40%;
}

.el4 img {
    width: 20%;
    animation: floatCircle4 0.9s infinite linear;
}


.gif {
    top: 63%;
}

.gif img {
    width: 85%;
    border: 5px solid white;
    border-radius: 20px;
}

.position1 {
  top:43%;
  display: flex;
  gap: 11vw;               
  justify-content: center;
  align-items: center;    
  position: absolute;
  width: 100%;
}

.position1 p {
  color: white;
  font-size: 10vw;
  margin: 0;
}

.position1 .gold{
    color: gold;
}


/*-------------------------------------------Keyframe Animation---------------------------------------------*/
@keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
    }

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



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


@keyframes floatCircle1 {
    0% {
        transform: rotate(-30deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(-30deg) translate(0px, 5px);
    }

    50% {
        transform: rotate(-30deg) translate(2.5px, 7.5px);
    }

    75% {
        transform: rotate(-30deg) translate(2.5px, 5px);
    }

    100% {
        transform: rotate(-30deg) translate(0px, 0px);
    }
}

@keyframes floatCircle2 {
    0% {
        transform: rotate(250deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(250deg) translate(0px, 5px);
    }

    50% {
        transform: rotate(250deg) translate(2.5px, 7.5px);
    }

    75% {
        transform: rotate(250deg) translate(2.5px, 5px);
    }

    100% {
        transform: rotate(250deg) translate(0px, 0px);
    }
}

@keyframes floatCircle3 {
    0% {
        transform: rotate(-30deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(-30deg) translate(0px, 5px);
    }

    50% {
        transform: rotate(-30deg) translate(2.5px, 7.5px);
    }

    75% {
        transform: rotate(-30deg) translate(2.5px, 5px);
    }

    100% {
        transform: rotate(-30deg) translate(0px, 0px);
    }
}

@keyframes floatCircle4 {
    0% {
        transform: rotate(20deg) translate(0px, 0px);
    }

    25% {
        transform: rotate(20deg) translate(0px, 5px);
    }

    50% {
        transform: rotate(20deg) translate(2.5px, 7.5px);
    }

    75% {
        transform: rotate(20deg) translate(2.5px, 5px);
    }

    100% {
        transform: rotate(20deg) translate(0px, 0px);
    }
}

/*-------------------------------------------Multi Device Screen Size---------------------------------------------*/

/* Large devices (desktops, 992px and up) */

@media (min-width: 992px) {

    #bg {

        height: 100vh;

    }



    .position1 {

        top: 43%;

        gap: 1.55vw;

    }



    .position1 p {

        color: white;

        font-size: 1.8vw;

        margin: 0;

    }



}