* {
    box-sizing: content-box;
    font-family: 'Aldrich', sans-serif;
}


::-webkit-scrollbar {
    z-index: 3;
    position: absolute;
    width: 5px;
}

::-webkit-scrollbar-track {
    background: black;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

.header-main-container {
    position: absolute;
    top: 0;
}

:root {
    justify-content: center;
    text-align: center;
}


body {
    margin: 0;
    background-color: black;
}



ul > li {
    list-style: none;
    text-align: center;
}


.page-nav {
    z-index: 2;
    position: fixed;
    background-color: black;
    color: white;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    font-size: 18px;
}

    .page-nav > a > #logo {
        display: block;
        position: relative;
        padding-right: 40px;
        left: 60px;
        top: 8px;
        float: left;
        width: 70px;
    }

    .page-nav > .sign > a > #person-icon {
        display: block;
        position: absolute;
        margin-top: -45px;
        margin-left: 1470px;
        width: 25px;
    }



    .page-nav > ul {
        display: grid;
        gap: 20px;
        grid-template-columns: 90px 90px 110px 90px;
        margin-top: 25px;
    }

        .page-nav > ul > li > a {
            text-decoration: none;
        }

            .page-nav > ul > li > a:hover {
                transition: color 0.5s ease;
                color: rgb(216, 11, 11);
            }

            .page-nav > ul > li > a:after {
                content: '';
                display: block;
                position: relative;
                width: 100%;
                top: -10px;
                height: 1px;
                background-color: rgb(216, 11, 11);
            }

            .page-nav > ul > li > a::after {
                transform: scale(0,1);
                transition: transform 0.3s ease;
            }

            .page-nav > ul > li > a:hover::after {
                transform: scale(1,1);
            }

    .page-nav ul li .submenu {
        z-index: -99;
        width: 200px;
        position: absolute;
        background: rgba(0, 0, 0, 90%);
        list-style: none;
        top: 100%;
        opacity: 0;
        transition: opacity 0.5s, z-index 0s 0.5s; /* Transition only opacity, delay z-index */
    }

a {
    text-decoration: none;
}

.page-nav ul li:hover .submenu {
    opacity: 1;
    z-index: 99; /* Change the z-index immediately on hover */
    transition: opacity 0.8s, z-index 0s; /* Transition both opacity and z-index */
}

.submenu > li:first-child {
    padding-top: 20px;
}

.submenu > li {
    font-size: 14px;
    text-align: left;
    padding-bottom: 10px;
}

    .submenu > li > a {
        margin-left: -20px;
    }

        .submenu > li > a:hover {
            transition: color 0.5s ease;
            color: rgb(216, 11, 11);
        }

.nav-menu ul {
    padding: 20px;
    transform-origin: 100% 0;
    width: auto;
    height: auto;
    color: black;
    background: white;
    transition: transform .3s;
    transform: scaleY(0);
    z-index: 51;
}

.nav-menu ul li{
    color: black;
}

.nav-menu:hover ul {
    transform: scaleY(1);
}

html {
    overflow-x: hidden;
}

.navbar-nav {
    display: flex;
    justify-content: space-around;
    gap: 13px;
}