@layer components {
    .card {
        @apply bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow;
    }
    
    .btn {
        @apply px-4 py-2 rounded-md text-white bg-blue-500 hover:bg-blue-600 transition-colors;
    }
    
    .section-title {
        @apply text-3xl font-bold mb-12 text-center;
    }
}

/* Custom animations */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}