/* Header Styles */
#main-header {
    background-color: #ffffff;
    color: #000000;
}
#main-header nav ul li a {
    color: #000000;
}
#main-header nav ul li a:hover {
    color: #666666;
}
#main-header .header-icons a,
#main-header #mobile-menu-btn {
    color: #000000;
    border-color: #000000;
}

/* Scrolled state */
#main-header.scrolled {
    background-color: #ffffff !important;
    color: #000000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    padding-top: 15px;
}
#main-header.scrolled .header-icons a,
#main-header.scrolled #mobile-menu-btn {
    color: #000000;
    border-color: #000000;
}
#main-header.scrolled .header-icons a:hover,
#main-header.scrolled #mobile-menu-btn:hover {
    color: #666666;
}

@media (max-width: 767px) {
    #mobile-menu {
        display: flex;
        flex-direction: column;
        width: 280px;
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }
    #mobile-menu .mobile-menu-scroll {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: rgba(76, 61, 61, 0.35) transparent;
    }
    #mobile-menu .mobile-menu-scroll > li {
        width: 100%;
        flex: 0 0 auto;
    }
    #mobile-menu .mobile-menu-scroll::-webkit-scrollbar {
        width: 4px;
    }
    #mobile-menu .mobile-menu-scroll::-webkit-scrollbar-thumb {
        background: rgba(76, 61, 61, 0.35);
        border-radius: 999px;
    }
}

@media (min-width: 768px) {
    #main-header.scrolled nav ul li a {
        color: #000000;
    }
    #main-header.scrolled nav ul li a:hover {
        color: #666666;
    }
}