@media (max-width: 801px) {
    .mobile-bottom-bar {
        display: flex;
        position: fixed;
        height: 8vh;
        width: 100vw;
        bottom: 0;
        left: 0;
        background-color: #3e3e3e;
        z-index: 1000;
        border-top: 1px solid rgba(255, 255, 255, 0.11);
        box-shadow: 3px 1px 21px 11px rgba(0, 0, 0, 0.3);
    }

    .bottom-bar-item {
        display: flex;
        height: 100%;
        width: 25%;
        background-color: rgba(255, 192, 203, 0);
        flex-direction: column;
        align-items: center;
        position: relative;
        padding: 2%;
    }

    .bottom-bar-item.active {
        background: rgba(3, 3, 3, 0.329);
    }

    .overlay {
        position: absolute;
        top: 0px; /* Adjust the positioning to place the overlay above the container */
        left: 0;
        border-radius: 0px 0px 5px 5px;
        width: 100%;
        height: 5px; /* Adjust the height of the overlay */
        background-color: var(--golden-solid); /* Set the background color to green */
        z-index: 1;
    }

    .bottom-bar-icon {
        display: flex;
        width: 100%;
        color: white;
        height: 70%;
        padding: 5%;
        align-items: flex-end;
        justify-content: center;
        font-weight: 500 !important;
        font-size: medium;
        -webkit-text-stroke: 0.1px;
    }

    .bottom-bar-text {
        font-weight: normal;
        font-size: 10px;
        color: white;
        opacity: 0.5;
    }

    .bottom-bar-text.text-active {
        font-weight: bolder;
    }

    .bottom-bar-item:hover {
        background: var(--bottom-bar-active-gradient-light);
    }
}