/* Background Animation */
.my-animation-bg {
    position: relative;
    overflow: hidden;
    width: 100%;
  /*height: 60vh;*/
    /*z-index: -1;*/ /* Keep it in the background */
}

/* Base style for all shapes */
.shape {
    position: absolute;
    opacity: 0.6;
    animation: floatShape 10s ease-in-out infinite alternate;
	 
}

/* Square */
.shape.square {
    border: 4px solid white;
    background: transparent;
	 
}

/* Circle */
.shape.circle {
    border: 2px solid #E30613;
    background: transparent;
    border-radius: 50%;
	
}

/* Triangle */
.shape.triangle {
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 30px solid #245AA6;
	
}

/* Floating animation */
@keyframes floatShape {
    0% {
        transform: translateY(0px) translateX(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) translateX(10px) rotate(180deg);
    }
    100% {
        transform: translateY(20px) translateX(-10px) rotate(360deg);
    }
}

/* Randomized delays to avoid synchronized motion */
.shape:nth-child(odd) {
    animation-duration: 12s;
    animation-delay: -3s;
}

.shape:nth-child(even) {
    animation-duration: 9s;
    animation-delay: -2s;
}