    <style>
        /* Custom CSS for elements that can't be easily done with Tailwind */
        .hero-text {
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .carousel-item {
            transition: opacity 1s ease-in-out;
        }
        
        .carousel-item:not(.active) {
            opacity: 0;
            display: none;
        }
        
        .donation-btn {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
    </style>