.mobileNav {
    display: block;
}
.nav-top{
    display: none;
}
.nav_text {
    display: none;
}

.nav-bottom {
 position: fixed;
 left: 0;
 right: 0;
 bottom: 0;
 width: 100%;

 background-color: #111;
 z-index: 9999;
}

.nav-bottom-lista {
    display: flex;
    height: 64px;
    justify-content: space-around;
    align-items: center;
}

.nav-bottom-itens:nth-child(1){
    order: 3;
}
.nav-bottom-itens:nth-child(2){
    order: 1;
}
.nav-bottom-itens:nth-child(3){
    order: 2;
}
.nav-bottom-itens:nth-child(4){
    order: 5;
}
.nav-bottom-itens:nth-child(5){
    order: 4;
}

.navAtivo .nav-bottom-link span:nth-child(1)::before{
    content: " ";
    position: absolute;
    width: 28px;
    height: 18px;
    border-radius: 25px;
    padding: 5px 10px;
    background: rgb(0, 119, 255);
    z-index: -1;
    margin-left: -9.5px;
    /* display: none; */
}
.navAtivo .nav-bottom-link span:nth-child(2){
   color:  rgb(0, 119, 255);;
}


.nav-bottom-link{
    display: flex;

    
    padding: 0.5rem .5rem;
    margin: 0.3rem 0;
    border-radius: 25px;
    
    flex-direction: column;
    gap: 3px;

    /* border: 1px solid #fff; */

    align-items: center;
    column-gap: 0.2rem;
    cursor: pointer;
}
.nav-bottom-link:hover{
    border-color: rgb(167, 0, 0);
    color: red;
}
.nav-bottom-link-ativar{
    color: red;
    background-color: #fdfdfde7;
    border-color: red;
}


@media (min-width: 300px) {
    .nav_text {
        display: block;
        font-size: 10px;
    }
    .nav-bottom-link .material-symbols-outlined{
        font-size: 18px;
    }
    .nav-bottom-lista{
        font-size: 9px;
    }
}
@media (min-width: 300px) and (max-width: 340px){
    .navAtivo .nav-bottom-link span:nth-child(1)::before{
        width: 16.5px;
        height: 10px;
        padding: 5px 10px;
        margin-left: -9px;
    }
} 
@media (min-width: 340px) {
    .nav_text {
        font-size: 12px;
    }
    .nav-bottom-link .material-symbols-outlined{
        font-size: 28px;
    }
    .nav-bottom-lista{
        font-size: 11px;
    }
}
@media (min-width: 450px) {
    .nav_text {
        font-size: 16px;
    }
    .nav-bottom-link .material-symbols-outlined{
        font-size: 28px;
    }
    .nav-bottom-lista{
        font-size: 14px;
    }
    .nav-bottom{
        right: -363px;
    }
}
@media (min-width: 600px) {
    .nav_text {
        font-size: 16px;
    }
    .nav-bottom-link .material-symbols-outlined{
        font-size: 28px;
    }
    .nav-bottom-lista{
        font-size: 18px;
    }
    .nav-bottom{
        right: -435px;
    }
}
@media (min-width: 700px) {
    .navAtivo .nav-bottom-link span:nth-child(1)::before{
       display: none;
     }
     .navAtivo .nav-bottom-link span:nth-child(2){
        color:  rgb(224, 224, 224);;
     }
     .nav-bottom-lista {
        display: block;
        height: auto;
    }
    .nav-bottom-link{
        display: flex;
        flex-direction: row;
        border: 1px solid #fff;
    }


    .nav-top {
        display: block;
    }
     
    .nav-bottom{
     width: 250px;
     z-index: 99;
 
     background: var(--bg-categoria);
     backdrop-filter: blur(10px);
     position: fixed;

     padding: 1rem;
     margin: 15px;
     /* top: 3.5vw; */
     right: -320px;
     
     bottom: -256px;
     border-top-left-radius: 25px;
     border-bottom-left-radius: 25px;
     border-bottom-right-radius: 25px;
     transition: none;
    }
    
    .mobileNav {
        display: none;
    }
    .nav-bottom-link {
        min-width: 150px;
    }
   .nav-bottom-ativo{
    position: fixed;
    left: 70%;
    /* right: -90px; */
    top : 3.7vw;
    bottom: auto;
   }
   .nav-bottom-lista{
    display: block;
    margin: 0;
   }
    .nav-bottom_btn{
        display: none;
        margin: 0;
    }
    .nav-top{
        cursor: pointer;
    }
    .nav-top:hover{
        color: red;
    }
}

@media (min-width:800px) {
    .nav-top{
        position: relative;
        display: flex;
       }
}