/* Desktop and Mobile View */
.first-wrapper {
    display: flex !important;
}

.second-wrapper {
    flex: 1;
    padding-left: 30px;
    padding-top: 2.625rem;
    width: 80%;
}

.custom-nav-menu {
    list-style-type: none;
    display: flex;
    background-color: white;
    position: sticky !important;
    top: 74px !important;
    height: 100vh !important;
    padding-right: 15px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-top: 2.625rem;
}

.custom-nav-menu ul {
    padding: 0;
    list-style: none;
}

.custom-nav-menu a li {
    border-top: 2px solid #FFFFFF;
    line-height: 1.5rem !important;
}

.custom-nav-menu a:hover li, .custom-nav-menu a li.active {
    border-top: 2px solid #00a3c2;
}

.custom-nav-menu a li .custom-link {
    color: #103273;
    font-size: 18px !important;
    white-space: none;
}

.custom-nav-menu a:hover li .custom-link, .custom-nav-menu a li.active .custom-link {
    color: #00a3c2;
}

.floating-scrollspy-menu {
    display: none ;
}

#closeButton {
    display: none;
}

.scrollspy-container {
    width: 20%;
}

/* Mobile View */
@media (max-width: 768px) {
    .scrollspy-container {
        position: fixed;
        left: 0;
        top: 0;
        width: 0;
        transition: 0.5s;
        z-index: 3;
    }

    .overlay {
        opacity: 0; /* Fully transparent */
        visibility: hidden; /* Hides the element, but space is preserved */
        transition: opacity 0.5s ease;
        z-index: 1;
        background-color: black;
        position: fixed;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
    }

    .custom-nav-menu {
        /*height: 100%;*/
        /*width: 0;*/
        /*position: fixed;*/
        /*z-index: 1;*/
        /*top: 0;*/
        /*left: 0;*/
        /*background-color: #111;*/
        /*overflow-x: hidden;*/
        /*transition: 0.5s;*/
        /*padding-top: 60px;*/

        font-size: 12px;
        padding-top: 84px!important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 11;
        background-color: #103273;
        padding-right: 0;
    }

    .custom-nav-menu a li .custom-link {
        font-size: 12px !important;
        color: #fff;
        padding: 0 20px 0 20px;
        transition: 0.3s;
        display: block;
        text-decoration: none;
        /*white-space: nowrap;*/
    }

    .custom-nav-menu a li {
        border-top: 0 !important;
        width: 165px;
    }

    .first-wrapper {
        display: block !important;
    }

    .second-wrapper {
        margin-top: 20px;
        width: 100% !important;
        padding-top: initial;
    }

    .floating-scrollspy-menu {
        display: block;
        z-index: 2;
        position: fixed;
        top: 50%;
        left: 10px;
        background-color: #103273;
        border-radius: 50%;
        color: #fff;
        height: 40px;
        width: 40px;
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3); /* Soft shadow */
        border: none;
    }
}

.start_of_content {
    overflow-x: visible;
}

::-webkit-scrollbar {
    width: 4px;
    background-color: #f0f0f0;
}

::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

::-webkit-scrollbar-track {
    background-color: #e0e0e0;
    border-radius: 10px;
}