:root {
    --brand-primary: #020c1b;
    --brand-secondary: #0a192f;
    --brand-accent-1: #0077b6;
    --brand-accent-2: #00b4d8;
    --brand-light: #e6f1ff;
    --gradient-primary: linear-gradient(135deg, var(--brand-accent-1) 0%, var(--brand-secondary) 100%);
    --gradient-accent: linear-gradient(135deg, var(--brand-accent-2) 0%, var(--brand-accent-1) 100%);
    --gradient-text: linear-gradient(to right, #fff, var(--brand-accent-2));
    --bs-primary: #0077b6;
    --bs-secondary: #0a192f;
    --bs-dark: #020c1b;
    --bs-light: #e6f1ff;
    --bs-info: #00b4d8;
    --bs-body-font-family: "Geist", sans-serif;
    --heading-font-family: "Montserrat", sans-serif;
    --bs-body-bg: var(--brand-primary);
    --bs-body-color: var(--brand-light)
}

body {
    font-family: var(--bs-body-font-family);
    background-color: var(--bs-body-bg);
    color: var(--bs-body-color);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: var(--heading-font-family)
}

.text-gradient {
    background: var(--gradient-text);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text
}

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

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0
}

.delay-100 {
    animation-delay: 0.1s
}

.delay-200 {
    animation-delay: 0.2s
}

.delay-300 {
    animation-delay: 0.3s
}

.delay-400 {
    animation-delay: 0.4s
}

.delay-500 {
    animation-delay: 0.5s
}

::-webkit-scrollbar {
    width: 8px
}

::-webkit-scrollbar-track {
    background: var(--brand-primary)
}

::-webkit-scrollbar-thumb {
    background: var(--brand-accent-1);
    border-radius: 4px
}

::-webkit-scrollbar-thumb:hover {
    background: var(--brand-accent-2)
}