@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.fade-in {
    animation: fadeIn 1s ease-in-out;
}
/* ********************************************************* */
@keyframes cubeRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}
.cube {
    display: inline-block;
    animation: cubeRotate 5s infinite linear;
}
/* ************************************************************************ */
@keyframes glowingBorder {
    0% {
        box-shadow: 0 0 5px red;
    }
    50% {
        box-shadow: 0 0 20px red;
    }
    100% {
        box-shadow: 0 0 5px red;
    }
}
.glow {
    animation: glowingBorder 2s infinite alternate;
    border: 2px solid red;
    padding: 10px;
}
/* *******************SQUARE MOVES************************************************************* */
 
/* Move Up Keyframes */
@keyframes moveUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-90vh); /* Navbar tak le jaye */
        opacity: 0;
    }
}
/* Moving Boxes Container */
.moving-boxes {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
}

/* Individual Boxes */
@keyframes moveUpRotate {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}

/* Randomized Boxes */
.animated-box{
    width: 60px;
    height: 60px;
    position: absolute;
    bottom: 0;
    border: 5px solid red; 
    animation: moveUpRotate 5s linear infinite;
    opacity: 0;
}
 /* *********************************************************** */