.nav-bar {
    position: fixed;
    bottom: 0px;
    width: 100%;
    height: 60px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #cdcbcb;
    z-index: 1000; 
}

.nav-item {
    text-align: center;
    color: #888;
    font-size: 12px;
    transition: transform 0.15s ease-in-out;
}

    .nav-item:active {
        transform: scale(0.5);
        background-color: rgba(0, 0, 0, 0.05); /* light tap background */
    border-radius: 50px;
    width: 60px
}

    .nav-item i {
        font-size: 20px;
        color: #888; /* This can be overridden below */
    }

    .nav-item.selected {
        color: #e40032;
    }

        .nav-item.selected i {
            color: #e40032 !important; /* Force override */
        }

        .nav-item.selected p {
            color: #e40032;
        }


@media only screen and (min-width: 568px) {
    .hide-screen {
        display: none;
    }
    .hid-menu {
        display: block;
    }
}

/* Show on small screens (e.g., mobile devices) */
@media only screen and (max-width: 567px) {
    .hide-screen {
        display: block;
    }
    .hid-menu{
        display:none;
    }
}