/* Add custom animations using keyframes */
    @keyframes fadeIn {
        0% {
            opacity: 0;
            transform: translateY(10px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes scaleUp {
        0% {
            transform: scale(1);
        }
        100% {
            transform: scale(1.05);
        }
    }

    /* Apply animations to the elements */
    .animate-fadeIn {
        animation: fadeIn 1s ease-out forwards;
    }

    .animate-scaleUp {
        animation: scaleUp 0.5s ease-in-out forwards;
    }

    /* Add delay to elements that need it */
    .delay-200 {
        animation-delay: 0.2s;
    }

    .delay-400 {
        animation-delay: 0.4s;
    }