:root {
    --primary-orange: #FFA500;
    --secondary-blue: #3B82F6;
    --tertiary-green: #22C55E;
    --alternate-dark-gray: #374151;
    --background-white: #FFFFFF;
    --background-light-gray: #F5F5F5;
    --text-primary: #212121;
    --text-secondary: #757575;
}

body {
    font-family: 'Lexend', sans-serif;
}

.wave-animation {
    background: linear-gradient(-45deg, var(--background-light-gray), var(--background-white), #f0f8ff, var(--background-light-gray));
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}

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

.fade-in {
    animation: fadeInAnimation ease 2s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
    0 4px 6px -2px rgba(0, 0, 0, 0.05);
}