@layer components {
            .nav-link {
                @apply text-gray-300 hover:text-white hover:bg-accent px-4 py-2 rounded-lg transition-all duration-300 ease-in-out font-medium;
            }
            .btn-primary {
                @apply bg-accent hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1;
            }
            .btn-secondary {
                @apply bg-highlight hover:bg-orange-600 text-white font-bold py-3 px-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1;
            }
            .section-padding {
                @apply py-16 md:py-24 px-4 md:px-8;
            }
            .card-hover {
                @apply bg-white shadow-xl rounded-xl p-6 hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2 border border-gray-200;
            }
            .flink {
                @apply inline-flex items-center justify-center px-6 py-3 bg-gray-100 hover:bg-accent hover:text-white text-gray-800 rounded-lg font-medium transition-all duration-300 shadow hover:shadow-md mx-2 my-2;
            }
            .input-field {
                @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-accent focus:border-transparent outline-none transition;
            }
            .footer-link {
                @apply text-gray-400 hover:text-white transition-colors duration-200;
            }
            .article-content p {
                @apply mb-6 text-gray-700 leading-relaxed text-lg;
            }
            .article-content h3 {
                @apply text-2xl font-bold text-primary mt-10 mb-4 pb-2 border-b border-gray-300;
            }
        }