/* Custom CSS that works with Tailwind CSS */

/* CSS Custom Properties */
:root {
    --custom-primary: #3b82f6;
    --custom-secondary: #10b981;
    --custom-accent: #f59e0b;
}

/* Custom utility classes */
.custom-gradient {
    background: linear-gradient(135deg, var(--custom-primary), var(--custom-secondary));
}

.custom-shadow {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.custom-button-primary {
    @apply bg-teal-600 hover: bg-teal-700 text-white px-8 py-4 rounded-lg text-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-lg;
}

.custom-button-secondary {
    @apply bg-white hover: bg-gray-50 text-teal-600 border-2 border-teal-600 px-8 py-4 rounded-lg text-lg font-medium transition-all duration-200 transform hover:scale-105 shadow-lg;
}

/* Custom component styles */
.custom-button {
    @apply px-4 py-2 rounded-lg font-medium transition-all duration-200;
    background-color: var(--custom-primary);
    color: white;
}

.custom-button:hover {
    @apply transform scale-105;
    background-color: var(--custom-secondary);
}

/* Responsive custom styles */
@media (max-width: 768px) {
    .custom-responsive {
        @apply text-sm;
    }
}

/* Animation keyframes */
@keyframes custom-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-animation {
    animation: custom-fade-in 0.5s ease-out;
}