/* Ensure smooth transitions */
.header-nav-item, .user-profile-menu-item {
    transition: all 0.2s ease-in-out;
}

    .user-profile-menu-item:hover {
        transform: translateX(4px);
    }

/* Styles for the mobile menu */
.mobile-menu-open {
    display: flex !important;
}

.triangle-icon {
    transition: transform 0.3s ease-in-out;
}

    .triangle-icon.rotate {
        transform: rotate(90deg);
    }

/* Styles for mobile dropdowns using max-height for smooth transition */
.mobile-dropdown-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

    .mobile-dropdown-menu.open {
        max-height: 350px; /* A sufficient value to accommodate all items */
    }