@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Dhurjati&display=swap');

:root {
    font-size: 16px;
    --text-primary: #DCEBE5;
    --text-secondary: #14417c;
    --bg-primary: #ddc6c6;
    --bg-secondary: #000000d3;
}

body {
    margin: 0;
    background-color: #000000;
    padding: 0;
}

.header {
    position: relative;
    text-align: center;
    background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
    color: #fff;
}

.inner-header {
    height: 55vh;
    width: 100%;
    margin: 0;
    padding: 0;
}

.flex {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.waves-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 15vh;
    pointer-events: none;
    z-index: -1;
}

.waves {
    position: relative;
    width: 100%;
    height: 15vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px;
}

.parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite;
}

.parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
}

.parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
}

.parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
}

.parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
}

@keyframes move-forever {
    0% {
        transform: translate3d(-90px,0,0);
    }
    100% { 
        transform: translate3d(85px,0,0);
    }
}

.content {
    position: relative;
    height: 20vh;
    text-align: center;
    background-color: rgb(255, 249, 249);
}

.navbar {
    position: fixed;
    background: linear-gradient(rgb(51, 48, 48) 0%, rgb(0, 0, 0) 100%, rgb(65, 61, 61) 0%);
    border-radius: .5rem;
    margin: .2rem;
    margin-bottom: 20px;
    transition: 300ms ease;
    display: grid;
}

.navbar-nav {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    place-content: center;
    place-self: center;
    margin: auto;
}

.nav-item {
    width: 100%;
    margin: auto;
    padding: auto;
}

.nav-link {
    display: flex;
    align-items: center;
    height: 4rem;
    color: var(--text-primary);
    text-decoration: none;
    filter: grayscale(100%) opacity(.9);
    transition: var(--transition-speed);
    padding: .1rem;
    border: .1rem;
}

.link-text {
    display: none;
    margin-left: 1rem;
    text-align: center;
}

.nav-link img {
    width: 2rem;
    margin: 0 1.5rem;
}

.nav-link:hover {
    filter: grayscale(0%) opacity(1);
    transition: 300ms;
    background-color: #778DA9;
    border-radius: .5rem;
    padding: .1rem;
    border: .1rem;
}

@media only screen and (min-width: 0px) {
    .navbar {
        bottom: 0;
        width: 98.7%;
        height: 5rem;
        align-items: center;
    }

    .msc-nav {
        display: none;
    }

    .navbar-nav {
        flex-direction: row;
    }

    .nav-link {
        justify-items: center;
    }

    main {
        margin: 0;@import url('https://fonts.googleapis.com/css2?family=Boogaloo&family=Dhurjati&display=swap');

        :root {
            font-size: 16px;
            --text-primary: #DCEBE5;
            --text-secondary: #14417c;
            --bg-primary: #ddc6c6;
            --bg-secondary: #000000d3;
        }
        
        body {
            margin: 0;
            background-color: #000000;
            padding: 0;
        }
        
        .header {
            position: relative;
            text-align: center;
            background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
            color: #fff;
        }
        
        .inner-header {
            height: 65vh;
            width: 100%;
            margin: 0;
            padding: 0;
        }
        
        .flex {
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        
        .waves-container {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100px; /* Adjust height as needed */
            overflow: hidden; /* Hide overflow */
        }
        
        .content {
            position: relative;
            height: 20vh;
            text-align: center;
            background-color: rgb(255, 249, 249);
        }
        
        .navbar {
            position: fixed;
            background: linear-gradient(rgb(51, 48, 48) 0%, rgb(0, 0, 0) 100%, rgb(65, 61, 61) 0%);
            border-radius: .5rem;
            margin: .2rem;
            transition: 300ms ease;
            display: grid;
        }
        
        .navbar-nav {
            list-style: none;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            place-content: center;
            place-self: center;
            margin: auto;
        }
        
        .nav-item {
            width: 100%;
            margin: auto;
            padding: auto;
        }
        
        .nav-link {
            display: flex;
            align-items: center;
            height: 4rem;
            color: var(--text-primary);
            text-decoration: none;
            filter: grayscale(100%) opacity(.9);
            transition: var(--transition-speed);
            padding: .1rem;
            border: .1rem;
        }
        
        .link-text {
            display: none;
            margin-left: 1rem;
            text-align: center;
        }
        
        .nav-link img {
            width: 2rem;
            margin: 0 1.5rem;
        }
        
        .nav-link:hover {
            filter: grayscale(0%) opacity(1);
            transition: 300ms;
            background-color: #778DA9;
            border-radius: .5rem;
            padding: .1rem;
            border: .1rem;
        }
        
        @media only screen and (min-width: 0px) {
            .navbar {
                bottom: 0;
                width: 98.7%;
                height: 5rem;
                align-items: center;
            }
        
            .msc-nav {
                display: none;
            }
        
            .navbar-nav {
                flex-direction: row;
            }
        
            .nav-link {
                justify-items: center;
            }
        
            main {
                margin: 0;
            }
        
            .logo {
                display: none;
            }
        }
        
    }

    .logo {
        display: none;
    }
}
.container{
    width: 100%;
}