body {
    font-family: Arial, sans-serif;
    text-align: center;
    background-color: #f5f5f5;
}

header {
    background-color: #004080;
    color: white;
    padding: 20px;
}

.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

/* static/styles.css */

.hero-gradient {
    background: linear-gradient(135deg, rgba(173, 216, 230, 0.1), rgba(221, 160, 221, 0.1));
}

.animate-pulse-slow {
    animation: pulse-slow 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-slow {
    0%, 100% {
        opacity: 0.7;
    }
    50% {
        opacity: 0.4;
    }
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.text-gradient {
    background: linear-gradient(90deg, #2563eb, #8b5cf6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}