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

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

/* Comment all if using Zoomout keyframe */
/* .add-animation {
    animation: frmslideLeft 0.3s ease;
    animation: frmslideRight 0.8s ease;
} */

/* Comment all if using Zoomout keyframe */
/* .exit-animation { */
    /* animation: toslideRight 0.3s ease; 
    animation: toslideLeft 0.8s ease;
 }*/

/*-------------------------------------------Redirect Button---------------------------------------------*/
.redirect-btn {
    top: 32%;
}
.redirect-btn img {
    width: 60%;
    animation: pulse 0.9s  infinite linear;
}

.element1 {
    top: 39%;
    right: 39%;
}
.element1 img {
    width: 13%;
    animation: move1 2.5s  infinite linear;
}

.element2 {
    top: 82%;
    left: 44%;
}
.element2 img {
    width: 18%;
    animation: move2 2.5s  infinite linear;
}

.element3 {
    top: 65%;
    left: 46%;
}
.element3 img {
    width: 9%;
    animation: move3 2.5s  infinite linear;
}

.element4 {
    top: 84%;
    right: 38%;
}
.element4 img {
    width: 12%;
    animation: move1 2.5s  infinite linear;
}

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

    50% {
        transform: scale(1.1);
    }

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

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

    50% {
        transform: scale(1.1);
    }

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

@keyframes move1 {
     0% {
        transform: translate(0,0);
    }

    20% {
        transform: translate(-5px,5px);
    }

    40% {
        transform: translate(5px,5px);
    }

    60% {
        transform: translate(10px,10px);
    }

    80% {
        transform: translate(5px,10px);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes move2 {
     0% {
        transform: translate(0,0);
    }

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

    40% {
        transform: translate(-5px,10px);
    }

    60% {
        transform: translate(-10px,-10px);
    }

    80% {
        transform: translate(-5px,-5px);
    }

    100% {
        transform: translate(0,0);
    }
}

@keyframes move3 {
    0% {
        transform: translate(0,0);
    }

    20% {
        transform: translate(5px,5px);
    }

    40% {
        transform: translate(5px,-5px);
    }

    60% {
        transform: translate(-5px,-5px);
    }

    80% {
        transform: translate(-5px,5px);
    }

    100% {
        transform: translate(0,0);
    }
}

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

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(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 frmslideLeft {
    0% {
        transform: translateX(-50%);
        opacity: 0;
    }

    50% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toslideRight {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(50%);
        opacity: 0;
    }
}

@keyframes frmslideRight {
    0% {
        transform: translateX(10%);
        opacity: 0;
    }

    50% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes toslideLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }

    50% {
        transform: translateX(-10%);
        opacity: 0;
    }
}

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