* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}

/* CSS Variables */
:root {
    --bg-dark-color: #1d1d1d;
}

/* Utility classes */
.fixed {
    position: fixed;
}

.text-white {
    color: white;
}

.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.top-0 {
    top: 0;
}

.w-full {
    width: 100%;
}

.bg-dark {
    background-color: var(--bg-dark-color);
}

.list-none {
    list-style: none;
}

html,
body {
    margin: 0;
    padding: 0;
    color: white;
}

body {
    /* background-image: url("../img/gradient.svg"); */
    background-image: radial-gradient(circle farthest-corner at 0.9% 98%, rgba(2, 175, 184, 1) 0%, rgba(2, 32, 45, 1) 92.1%);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.rubik-storm-regular {
    font-family: "Rubik Storm", system-ui;
    font-weight: 400;
    font-style: normal;
}

.transition {
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}



.headerUpper {
    .nav ul {
        height: 48px;
        display: flex;
        flex-direction: row;

        li {
            display: inline-block;
            width: 25%;

            a {
                line-height: 48px;
                color: white;
                font-weight: 700;
                letter-spacing: 2.2px;
                font-size: 11px;
                width: 100%;
                position: relative;
                display: block;

                &:hover {
                    color: #01ecff;

                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        transform: translateY(3px);
                        background: #01ecff;
                        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                        width: 100%;
                        height: 3px;
                    }
                }
            }
        }
    }
}
.shiftrae-logo {
    display: block;
    position: absolute;
    top: 22px;
    left: 25px;
    width: 48px;
    height: 35px;
}

.headerLower {
    position: relative;
    width: 100%;
    height: 76px;

    .nav ul {
        /* display: flex; */
        /* flex-direction: row; */
        display: block;
        width: 100%;

        li {
            display: inline-block;
            margin: 0 10px;

            a {
                line-height: 48px;
                color: white;
                font-weight: 700;
                letter-spacing: 2.2px;
                font-size: 11px;
                width: 100%;
                position: relative;
                display: block;

                &:hover {
                    color: #01ecff;

                    &::before {
                        content: "";
                        display: block;
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        transform: translateY(3px);
                        background: #01ecff;
                        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
                        width: 100%;
                        height: 3px;
                    }
                }
            }
        }
    }
}