<style>
:root {
    --bottom-nav-icon-color: #a3a3a3; /* Icon normal color */
    --bottom-nav-icon-active-color: #181818; /* Icon active color */
    --bottom-nav-icon-active-fill: #c5c5c5; /* Icon active fill color */
    --bottom-nav-active-bg: #efefef; /* Active menu background color */
}

.bottom-nav-uid-1 .elementor-icon-list-item .elementor-icon-list-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    display: inline-flex;
    vertical-align: middle;
    margin-left: 0;
    transform: translateX(-10px);
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.bottom-nav-uid-1 .elementor-icon-list-item.active .elementor-icon-list-text {
    max-width: 150px;
    opacity: 1;
    margin-top: 7px;
    transform: translateX(0);
}

.bottom-nav-uid-1 .elementor-icon-list-item .elementor-icon-list-icon {
    transition: all 0.3s ease;
}

.bottom-nav-uid-1 .elementor-icon-list-item .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(60%);
    white-space: pre;
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    transition-delay: 0ms;
}

.bottom-nav-uid-1 .elementor-icon-list-item.active .char {
    opacity: 1;
    transform: translateY(0);
}

.bottom-nav-uid-1 .elementor-icon-list-item:first-child {
    transition: margin-left 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.bottom-nav-uid-1 .elementor-icon-list-item:first-child:not(.active) {
    margin-left: 10px !important;
}

.bottom-nav-uid-1 .elementor-icon-list-item:first-child.active {
    margin-left: 5px !important;
}

.bottom-nav-uid-1 span.elementor-icon-list-icon svg {
    color: var(--bottom-nav-icon-color);
    stroke: var(--bottom-nav-icon-color);
}

.bottom-nav-uid-1 li.elementor-icon-list-item.elementor-inline-item.active span.elementor-icon-list-icon svg {
    color: var(--bottom-nav-icon-active-color);
    stroke: var(--bottom-nav-icon-active-color);
    fill: var(--bottom-nav-icon-active-fill);
}

.bottom-nav-uid-1 li.elementor-icon-list-item.elementor-inline-item.active {
    background: var(--bottom-nav-active-bg);
    width: max-content;
    max-width: 125px;
    height: 50px;
    padding: 10px;
    border-radius: 50px;
    outline: none;
}

.bottom-nav-uid-1 li.elementor-icon-list-item.elementor-inline-item.active a {
    outline: none;
}

.bottom-nav-uid-1 .elementor-icon-list-items.elementor-inline-items {
    justify-content: space-between;
    width: 320px;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    function initNavText() {
        const navMenus = document.querySelectorAll('.bottom-nav-uid-1 .elementor-icon-list-items');
        const segmenter = (typeof Intl !== 'undefined' && Intl.Segmenter)
            ? new Intl.Segmenter('bn', { granularity: 'grapheme' })
            : null;
        navMenus.forEach(menu => {
            const navItems = menu.querySelectorAll('.elementor-icon-list-item');
            navItems.forEach(item => {
                const textEl = item.querySelector('.elementor-icon-list-text');
                if (!textEl) return;
                if (textEl.querySelector('.char')) return;
                const label = textEl.textContent.trim();
                textEl.innerHTML = '';
                const chars = segmenter
                    ? Array.from(segmenter.segment(label), s => s.segment)
                    : [...label];
                chars.forEach((ch, i) => {
                    const span = document.createElement('span');
                    span.className = 'char';
                    span.textContent = ch;
                    span.style.transitionDelay = (i * 28) + 'ms';
                    textEl.appendChild(span);
                });
            });
            const hasActive = Array.from(navItems).some(item => item.classList.contains('active'));
            if (!hasActive && navItems.length > 0) {
                navItems[0].classList.add('active');
            }
        });
    }

    initNavText();

    document.body.addEventListener('click', function(e) {
        const clickedItem = e.target.closest('.bottom-nav-uid-1 .elementor-icon-list-item');
        if (clickedItem) {
            const parentNav = clickedItem.closest('.elementor-icon-list-items');
            if (parentNav) {
                const allItems = parentNav.querySelectorAll('.elementor-icon-list-item');
                allItems.forEach(nav => nav.classList.remove('active'));
                clickedItem.classList.add('active');
            }
        }
    });

    if (typeof jQuery !== 'undefined') {
        jQuery(document).on('elementor/popup/show', function() {
            setTimeout(initNavText, 100);
        });
    }
});
</script>