body {
    font-family: 'Inter', sans-serif;
    background: #000000;
    color: #ffffff;
    min-height: 100vh;
}

.bg-dark-gradient {
    background: linear-gradient(135deg, #000000 0%, #1a1a2e 25%, #16213e 50%, #0f3460 75%, #533483 100%);
    background-attachment: fixed;
}

.glass-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3);
}

.gradient-border {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    padding: 1px;
    border-radius: 12px;
}

.gradient-border>div {
    background: rgba(0, 0, 0, 0.8);
    border-radius: 11px;
}

.floating-animation {
    animation: floating 6s ease-in-out infinite;
}

.floating-delayed {
    animation: floating 6s ease-in-out infinite;
    animation-delay: 2s;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-20px);
    }
}

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

.slide-in-up {
    animation: slideInUp 0.8s ease-out;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

.fade-in {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.brain-pattern {
    background-image:
        radial-gradient(circle at 25% 25%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(72, 209, 204, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
}

.custom-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff !important;
    transition: all 0.3s ease;
}

.custom-input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.custom-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(138, 43, 226, 0.6);
    box-shadow: 0 0 20px rgba(138, 43, 226, 0.3);
    color: #ffffff !important;
}

.custom-input option {
    color: #000000 !important;
    background: #ffffff !important;
}

.btn-primary {
    background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
    transition: all 0.3s ease;
    color: #ffffff !important;
}

.btn-primary:hover {
    background: linear-gradient(45deg, #764ba2 0%, #667eea 100%);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(118, 75, 162, 0.4);
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, #667eea, #764ba2);
    animation: particle-float 8s infinite ease-in-out;
}

@keyframes particle-float {

    0%,
    100% {
        transform: translateY(0) translateX(0) rotate(0deg);
        opacity: 0.7;
    }

    33% {
        transform: translateY(-100px) translateX(50px) rotate(120deg);
        opacity: 0.3;
    }

    66% {
        transform: translateY(-50px) translateX(-50px) rotate(240deg);
        opacity: 0.5;
    }
}

/* Navigation styles */
.nav-link {
    color: rgb(10, 10, 10) !important;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #ffffff !important;
}

/* Text colors for better visibility */
.text-primary {
    color: #ffffff !important;
}

.text-secondary {
    color: rgba(255, 255, 255, 0.8) !important;
}

.text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Card backgrounds */
.card-dark {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.1);
}