body {
    background-color: #020204;
    color: #e5e7eb;
}

.glass {
    background: rgba(0, 0, 0, 0.534);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-card {
    /*background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(255, 255, 255, 0.01) 100%);*/
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.text-gradient {
    background: linear-gradient(to right, #fff, #9ca3af);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Deep blue gradient background */
.bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(0, 85, 255, 0.15) 0%, rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: -1;
}

/* Grid Background */
.bg-grid {
    background-size: 40px 40px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
}

.mask-gradient-bottom {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
}

.mask-gradient-top {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* Nav Indicator */
.nav-indicator {
    position: absolute;
    left: 0;
    bottom: -4px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 9999px;
    transition: all 0.3s ease-out;
    opacity: 0;
    pointer-events: none;
}