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

/*-------------------------------------------Redirect Button---------------------------------------------*/
.redirect-btn {
    top: 86%;
    z-index: 10;
}

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

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

    50% {
        transform: scale(0.94);
    }

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

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

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

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

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

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

@keyframes diagonal2 {
    0% {
        transform: translate(0, 0) rotate(10deg);
    }

    25% {
        transform: translate(-10px, 10px) rotate(10deg); 
    }

    50% {
        transform: translate(0, 0) rotate(10deg); 
    }

    75% {
        transform: translate(-10px, 10px) rotate(10deg); 
    }

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

@keyframes diagonal3 {
    0% {
        transform: translate(0, 0) rotate(120deg); 
    }

    25% {
        transform: translate(-10px, 10px) rotate(120deg); 
    }

    50% {
        transform: translate(0, 0) rotate(120deg); 
    }

    75% {
        transform: translate(-10px, 10px) rotate(120deg); 
    }

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



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