/* Custom scrollbar for a more modern look */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #1f2937; /* bg-gray-800 */
}

::-webkit-scrollbar-thumb {
    background: #4f46e5; /* bg-indigo-600 */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #4338ca; /* bg-indigo-700 */
}

/* For Firefox */
html {
    scrollbar-width: thin;
    scrollbar-color: #4f46e5 #1f2937;
}

/* Add a subtle transition to all color changes */
* {
    transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
}

/* Ensure body takes full height */
html, body {
    height: 100%;
    font-family: 'Inter', sans-serif;
}

body {
    display: flex;
    flex-direction: column;
    /* New Gradient Background */
    background: linear-gradient(45deg, #111827, #3730A3, #4f46e5, #3730A3, #111827); /* Dark gray to dark indigo to indigo */
    background-size: 400% 400%; /* Larger size for animation */
    animation: gradient-animation 10s ease infinite; /* 60s rotation */
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

main {
    flex-grow: 1;
}

/* Remove previous complex transformations and positioning for testimonials */
.testimonial-card {
    transition: transform 0.5s ease-in-out;
}

/* Style for the flash messages to match Tailwind colors */
.text-green-700 { color: #047857; }
.bg-green-100 { background-color: #d1fae5; }
.dark .bg-green-200 { background-color: #a7f3d0; }
.dark .text-green-800 { color: #065f46; }

.text-red-700 { color: #b91c1c; }
.bg-red-100 { background-color: #fee2e2; }
.dark .bg-red-200 { background-color: #fecaca; }
.dark .text-red-800 { color: #991b1b; }

.text-yellow-700 { color: #b45309; }
.bg-yellow-100 { background-color: #fef3c7; }
.dark .bg-yellow-200 { background-color: #fde68a; }
.dark .text-yellow-800 { color: #92400e; }

.text-blue-700 { color: #1d4ed8; }
.bg-blue-100 { background-color: #dbeafe; }
.dark .bg-blue-200 { background-color: #bfdbfe; }
.dark .text-blue-800 { color: #1e40af; }