File: resources/css/app.css

@import 'tailwindcss';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';
@source '../**/*.blade.php';
@source '../**/*.js';

@theme {
    --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
        'Segoe UI Symbol', 'Noto Color Emoji';
}


.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.card-flip {
    perspective: 1000px;
}

.card-flip-inner {
    transition: transform 0.6s;
    transform-style: preserve-3d;
    position: relative;
    width: 100%;
    height: 100%;
}

.card-flip:hover .card-flip-inner {
    transform: rotateY(180deg);
}

.card-flip .card-front, .card-flip .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.card-flip .card-back {
    transform: rotateY(180deg);
}

.gradient-bg {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
}

.card-glow {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
}

.pulse-glow {
    animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 20px rgba(239, 68, 68, 0.3);
    }
    50% {
        box-shadow: 0 0 30px rgba(239, 68, 68, 0.5);
    }
}

/* Ensure responsive font sizes */
@media (max-width: 640px) {
    h1 {
        font-size: 2.5rem;
    }
    h2 {
        font-size: 1.875rem;
    }
    p {
        font-size: 1rem;
    }
}