::-webkit-scrollbar {
    width: 0.9234828496042217vh;
    border-radius: 1.3192612137203166vh;
    cursor: pointer !important;
    display:none;
}

::-webkit-scrollbar-thumb {
    background: #BDC3C7;
    border-radius: 1.3192612137203166vh;
    cursor: pointer !important;
    display:none;
}

:root {
    --first: white;
    --second: #2A704E; /* Define the second color for mobile menu background */
    --third: black;
}

#open-nav, #close-nav {
    position: absolute;
    font-size: 30px;
    cursor: pointer;
    z-index: 1000000;
    color: var(--first);
    padding-left: 10px;
    padding-right: 10px;
    background-color: var(--second);
    border-radius:5px;
}

#open-nav {
    top: 15px;
    right: 20px;
    display: none; 
}

#close-nav {
    top: 15px;
    right: 20px;
    display: none;
}

#top-nav {
    padding: 0; /* Reset padding */
    margin: 0; /* Reset margin */
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 99999999;
    border-style: none;
    display: flex;
    align-items: center;
    background-color: transparent; /* Initially transparent */
    transition: background-color 0.3s; /* Smooth transition for background color change */
}

    /* State when scrolled */
    #top-nav.scrolled {
        background-color: var(--second); /* Background color when scrolled */
        box-shadow: rgba(0,0,0,.1) 5px 5px 5px 5px;
    }

    #top-nav #nav-list {
        display: flex; /* Default to flex layout on larger screens */
        align-items: center;
        margin: 0; /* Ensure no margin is affecting layout */
        padding-top: 7px;
        padding-bottom: 7px;
        padding-left: 15px;
    }

        #top-nav #nav-list ul {
            list-style: none;
            color: var(--first);
            display: flex;
            text-align: center;
            float: right;
            font-size: 14px;
            font-weight: bold;
            width: 100%;
            padding: 0; /* Reset padding */
            margin: 0; /* Reset margin */
        }

            #top-nav #nav-list ul li {
                margin: 0; /* Ensure no additional margin is applied */
            }

                #top-nav #nav-list ul li a {
                    text-decoration: none;
                    color: var(--first);
                    display: block;
                    padding: 5px 25px;
                    cursor: pointer;
                    transition: background-color 0.3s;
                }

                    #top-nav #nav-list ul li a:hover {
                        color: var(--first);
                        background-color: rgba(0, 0, 0, 0.3);
                        cursor: pointer
                    }

@media screen and (max-width: 992px) {


    #top-nav #nav-list {
        padding-top: 50px;
        padding-left: 0px;
        display: none; /* Default to hidden on mobile */
        position: fixed;
        width: 100%;
        z-index: 9999999;
        height: 100%;
        background-color: var(--first);
        top: 0;
        left: 0;
        flex-direction: column;
    }

        #top-nav #nav-list.active {
            display: flex; /* Show when active */
        }

        #top-nav #nav-list ul {
            padding: 10px 0; /* Adjust padding as needed */
            display: block;
            text-align: center;
            margin: 0; /* Reset margin */
        }

            #top-nav #nav-list ul li {
                padding: 15px;
                margin: 0; /* Reset margin */
            }

                #top-nav #nav-list ul li a {
                    color: var(--second);
                }

    #open-nav {
        display: block;
    }

    #close-nav {
        display: block;
    }
}