.bottom-nav{

    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 8px 0;
    background-color: var(--primary);

    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;

    .nav-item{
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        text-decoration: none;

        color: var(--color-grey-light);
        transform: scale(1);
        transition: color 0.3s ease-out, transform 0.2s ease-out;

        font-weight: var(--font-weight-regular);

        .nav-icon{
            font-size: 24px;
            line-height: 1; 
        }

        .nav-label{
            margin-top: 2px;
            text-decoration: none;
        }

        &:hover, &:focus {
            color: var(--secondary); 
         /*   transform: scale(1.05); */
        }

        &.is-active{
            color: var(--secondary);
        }
    }
}