
.animation-container {
            display: flex;
            flex-direction: column;
            align-items: center; /* Center items horizontally */
            gap: 20px; /* Space between elements */
            margin-top: 50px; /* Add some space from the top */
        }

        .animated-div {
            /*width: 200px;
            height: 100px;*/
            /*background-color: #3498db;*/
            /*color: white;
            display: flex;*/
            /*justify-content: center;*/
            /*align-items: center;*/
            opacity: 0; /* Start hidden */
            transform: translateY(50px); /* Start from below */
            /*animation: slideIn 0.5s forwards; */ /* Animation */
	    transition: opacity 0.5s ease, transform 0.5s ease;

        }

	.animated-div.visible {
		opacity: 1; /* Fade in */
		transform: translateY(0); /* Move to original position */
	}


        .box:nth-child(1) {
            animation-delay: 0.2s; /* Delay for the first element */
        }

        .box:nth-child(2) {
            animation-delay: 0.4s; /* Delay for the second element */
        }

        .box:nth-child(3) {
            animation-delay: 0.6s; /* Delay for the third element */
        }

        @keyframes slideIn {
            to {
                opacity: 1; /* Fade in */
                transform: translateY(0); /* Move to original position */
            }
        }


