/* --- 1. Base Navbar & Logo --- */
    .custom-navbar {
        background-color: #ffffff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
        transition: padding 0.3s ease;
    }
    .nav-logo {
        width: 80px;
        transition: width 0.3s ease;
        object-fit: contain;
    }
    .nav-scroll .nav-logo {
        width: 50px; /* Shrinks when scrolling if you have a scroll JS function */
    }

    /* --- 2. Mobile Hamburger Toggle --- */
    .custom-toggler {
        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.1);
        padding: 0.5rem 0.75rem;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04);
        transition: all 0.2s ease;
    }
    .custom-toggler:hover, 
    .custom-toggler:focus {
        background-color: var(--theme-color, #0d6efd);
        outline: none;
    }
    .custom-toggler:hover .navbar-toggler-icon,
    .custom-toggler:focus .navbar-toggler-icon {
        filter: invert(1); /* Turns icon white */
    }

    /* --- 3. Main Navigation Links --- */
    .custom-nav-link {
        color: var(--theme-color) !important;
        font-weight: 500;
        border-radius: 0.5rem;
        transition: all 0.25s ease;
    }
    .custom-nav-link:hover, 
    .active-nav-item {
        background-color: var(--theme-color) !important;
        color: #ffffff !important;
    }
    .custom-nav-link:hover .iconify,
    .custom-nav-link:hover svg,
    .active-nav-item .iconify {
        stroke: #ffffff;
        fill: #ffffff;
        color: #ffffff;
    }

    /* --- 4. Dropdown General & Items --- */
    .dropdown-toggle::after {
        display: none !important; /* Hide Bootstrap default caret */
    }
    .dropdown-toggle-icon {
        transition: transform 0.3s ease;
    }
    
    .custom-dropdown-menu {
        border: none;
        background-color: #ffffff !important;
    }
    .custom-dropdown-item {
        color: #333333;
        font-weight: 500;
        border-radius: 0.5rem;
        transition: all 0.2s ease;
    }
    .custom-dropdown-item:hover {
        background-color: var(--theme-color, #0d6efd);
        color: #ffffff;
        transform: translateX(4px);
    }

    /* --- 5. Desktop Specific Logic (Hover to Open) --- */
    @media (min-width: 992px) {
        .custom-dropdown-menu {
            display: block;
            opacity: 0;
            visibility: hidden;
            transform: translateY(10px);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            margin-top: 0;
        }
        .dropdown:hover > .custom-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .dropdown:hover > .custom-nav-link .dropdown-toggle-icon {
            transform: rotate(180deg);
        }
    }

    /* --- 6. Mobile Specific Logic (Tap to Open via Bootstrap) --- */
    @media (max-width: 991.98px) {

        .navbar-collapse {
        padding: 2rem 1rem !important; /* Adjust top/bottom and left/right padding as needed */
    }
        .navbar-nav {
            padding: 1rem 0;
        }
        .nav-item {
            margin-bottom: 0.5rem;
        }
        .custom-dropdown-menu {
            background-color: transparent !important;
            border: none !important;
            box-shadow: none !important;
            padding-left: 1.5rem !important;
            margin-top: 0;
        }
        /* Rotate chevron when Bootstrap 'show' class is applied on mobile */
        .dropdown-toggle.show .dropdown-toggle-icon {
            transform: rotate(180deg);
        }
    }

    /* --- 4. Dropdown General & Items --- */
    .dropdown-toggle::after {
        display: none !important; /* Hide Bootstrap default caret */
    }
    .dropdown-toggle-icon {
        transition: transform 0.3s ease;
    }
    
    .custom-dropdown-menu {
        border: none;
        background-color: #ffffff !important;
        padding: 0.5rem; /* Clean padding for the container */
        border-radius: 0.75rem;
        min-width: 200px;
    }

    .custom-dropdown-item {
        color: #333333;
        font-weight: 500;
        border-radius: 0.5rem;
        transition: background-color 0.2s ease, color 0.2s ease;
        display: block;
        width: 100%; /* Forces the item to take full width */
        box-sizing: border-box;
    }

    .custom-dropdown-item:hover {
        background-color: var(--theme-color, #0d6efd);
        color: #ffffff;
        transform: none !important; /* Removed the right-shifting bug */
    }