/* Custom styles can go here. Tailwind is largely self-sufficient. */
@import "tailwindcss";
/* Example for the badges and buttons if not fully satisfied with inline Tailwind */

.badge {
    @apply bg-blue-100 dark:bg-blue-700 text-blue-800 dark:text-blue-100 text-sm font-medium px-3 py-1 rounded-full shadow-md;
}

.tech-badge {
    @apply bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 text-xs font-semibold px-2.5 py-0.5 rounded-full;
}

.btn-primary {
    @apply inline-block bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300;
}

.btn-secondary {
    @apply inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white font-bold py-3 px-6 rounded-full shadow-lg transform hover:scale-105 transition-all duration-300 dark:border-blue-400 dark:text-blue-400 dark:hover:bg-blue-400 dark:hover:text-gray-900;
}

/* Animations for fade-in and fade-up (optional, can be in JS or here) */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animations for Hero Section elements */
@keyframes fadeInFromTop {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-fade-in-up {
    animation: fadeInFromTop 0.8s ease-out forwards;
}
.animate-fade-in-up.delay-100 { animation-delay: 0.1s; }
.animate-fade-in-up.delay-200 { animation-delay: 0.2s; }
.animate-fade-in-up.delay-300 { animation-delay: 0.3s; }