/* MOBILES */
@media (max-width: 575.98px) { 

    /* GENERAL */
    .container-mensagens {
        position: fixed;
        left: 5px;
        top: 10px;
        z-index: 9999;
        transition: all 0.5s;
        width: auto;
    }

    /* NAV */
    .nav-mobile {
        padding: 10px 0;
        background-color: var(--color-background);
    }

    .nav-mobile .logo .logotipo {
        max-width: 180px;
        max-height: 120px;
        height: auto;
    }

    .nav-mobile h6 {
        margin-top: 10px;
        margin-bottom: 0;
        color: #6d6d6d;
        font-size: 0.9rem;
        text-align: right;
    }

    .nav-mobile span {
        margin: 0;
        color: #888888;
        font-size: 0.8rem;
        text-align: right;
    }

    .nav-mobile a i {
        font-size: 2.2rem;

    }

    /* OFFCANVAS */
    .offcanvas{
        background-color: #f3f3f3;
        width: auto;
    }

    /* SEARCH */
    .menu-items .search-box:hover > .menu-items .form-select {
        width: 0;
    } 
    .search-box:hover > .search-text {
        width: 200px;
        padding-left: 20px;
    }

    .searching {
        width: 200px;
        padding-left: 20px;
    }

    /* MENU */
    .menu .ancora {
        padding-top: 65px;
    }

    .menu .categories {
        width: 100%;
    }

    .menu-cards .card .description {
        padding-right: 10px;
    }

    .menu-cards .card h3 {
        font-size: 1rem;
        line-height: 1rem;
        font-weight: bold;
    }

    .menu-cards .card h5 {
        min-height: 0;
        font-size: 0.7rem;
        line-height: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .menu-cards .card h4 {
        font-size: 0.9rem;
        line-height: 0.9rem;
        margin-bottom: 20px;
        font-weight: 600;
    }

    .menu-cards .card .image img {
        max-width: 80px;
    }

    /* MODAL ADD */
    #modalAdd .img-add {
        width: 100%;
        margin-bottom: 20px;
    }

    #modalAdd h5 {
        font-size: 0.9rem;
        font-weight: bold;
    }

    #modalAdd .modal-description {
        font-size: 0.75rem;
        font-weight: 400;
        min-height: 40px;
    }

    #modalAdd .btn-standard {
        max-width: 180px;
        font-size: 1rem;
    }

    #modalAdd .add-numero-itens {
        padding: 5px 5px;
        font-size: 1.2rem;
    }

    #modalAdd .add-carrinho {
        height: 35px;
    }

    #modalAdd .btn-menos, #modalAdd .btn-mais {
        padding: 5px 5px;
    }


    /* MODAL CARD */
    #modalCard .modal-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 20px;
        background-color: #fff;
        z-index: 99999;
    }
    
    #modalCard .modal-body {
        padding-bottom: 165px;
    }

    .items-card {
        display: flex;
        flex-direction: column;
        align-items: self-start;
        margin-top: 10px;
    }

    .items-card .item-card {
        display: flex;
        justify-content: start;
        align-items: self-start;
    }

    .items-card .container-numbers {
        margin-left: 60%;
        margin-top: -25px;
    }

    .items-card .item-card .image-item-card {
        max-width: 60px !important;
        height: auto;
        margin: 10px 10px 20px 0;
      }

    .items-card .item-card .text-item-card h3 {
        font-size: 0.9rem;
        font-weight: bold;
        margin: 0;
        margin-bottom: 5px;
    }

    .items-card .item-card .text-item-card p {
        font-size: 0.7rem;
        line-height: 0.7rem;
        font-weight: 300;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }
    
    .items-card .item-card .text-item-card .obs-product-card {
        margin-top: 7px;
        font-size: 0.8rem;
        line-height: 0.9rem;
        color: var(--color-primary);
    }

    .items-card .item-card .text-item-card h2 {
        font-size: 1rem;
        font-weight: bold;
        margin-top: 5px;
    }

    .items-card .add-carrinho {
        display: flex;
        height: 35px;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--color-primary);
        border-radius: 7px;
        width: 80px;
        margin-bottom: 10px;
    }
    
    .items-card .btn-menos {
        color: var(--color-primary);
        padding: 5px 5px;
        font-size: 0.9rem;
        font-weight: bold;
        cursor: pointer;
    }
    
    .items-card .btn-mais {
        color: var(--color-primary);
        padding: 5px 5px;
        font-size: 0.9rem;
        font-weight: bold;
        cursor: pointer;
    }
    
    .items-card .add-numero-itens {
        color: var(--color-primary);
        padding: 5px 5px;
        font-size:  0.9rem;
    }

    .items-card a {
        margin-bottom: 10px;
    }

    .text-address h4 {
        font-size: 0.9rem;
        font-weight: bold;
        margin: 0;
    }
    
    .text-address h6 {
        font-size: 0.8rem;
        font-weight: 400;
        margin: 0;
    }

    .icon-address {
        padding: 8px 12px;
        width: fit-content;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 8px;
    }
    
    .icon-address i {
        font-size: 1.2rem;
    }

    .items-card-end h3 {
        font-size: 1rem;
    }

    .items-card-end h2 {
        font-size: 1.1rem;
    }

    .menu .ancora {
        padding-top:40px;
    }

    /* FOOTER COMPANY */
    .footer-company .footer-container {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .footer-company .copy {
        text-align: center;
        margin-bottom: 20px;
        font-size: 1rem;
        font-weight: 400;
    }

}

/* TABLETS MAIORES */
@media (min-width: 576px) and (max-width: 991.98px) { 

    /* MODAL CARD */
    .items-card {
        display: flex;
        flex-direction: column;
        align-items: self-start;
        margin-top: 10px;
    }

    .items-card .item-card {
        display: flex;
        justify-content: start;
        align-items: self-start;
    }

    .items-card .container-numbers {
        margin-left: 60%;
        margin-top: -25px;
    }

    .items-card .item-card .image-item-card {
        max-width: 60px !important;
        height: auto;
        margin: 10px 10px 20px 0;
      }

    .items-card .item-card .text-item-card h3 {
        font-size: 0.9rem;
        font-weight: bold;
        margin: 0;
        margin-bottom: 5px;
    }

    .items-card .item-card .text-item-card p {
        font-size: 0.7rem;
        line-height: 0.7rem;
        font-weight: 300;
        margin: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
    }
    
    .items-card .item-card .text-item-card .obs-product-card {
        margin-top: 7px;
        font-size: 0.8rem;
        line-height: 0.9rem;
        color: var(--color-primary);
    }

    .items-card .item-card .text-item-card h2 {
        font-size: 1rem;
        font-weight: bold;
        margin-top: 5px;
    }

    .items-card .add-carrinho {
        display: flex;
        height: 35px;
        justify-content: center;
        align-items: center;
        border: 1px solid var(--color-primary);
        border-radius: 7px;
        width: 80px;
        margin-bottom: 10px;
    }
    
    .items-card .btn-menos {
        color: var(--color-primary);
        padding: 5px 5px;
        font-size: 0.9rem;
        font-weight: bold;
        cursor: pointer;
    }
    
    .items-card .btn-mais {
        color: var(--color-primary);
        padding: 5px 5px;
        font-size: 0.9rem;
        font-weight: bold;
        cursor: pointer;
    }
    
    .items-card .add-numero-itens {
        color: var(--color-primary);
        padding: 5px 5px;
        font-size:  0.9rem;
    }

    .items-card a {
        margin-bottom: 10px;
    }

    .text-address h4 {
        font-size: 0.9rem;
        font-weight: bold;
        margin: 0;
    }
    
    .text-address h6 {
        font-size: 0.8rem;
        font-weight: 400;
        margin: 0;
    }

    .icon-address {
        padding: 8px 12px;
        width: fit-content;
        background-color: var(--color-primary);
        color: var(--color-light);
        border-radius: 8px;
    }
    
    .icon-address i {
        font-size: 1.2rem;
    }

    .items-card-end h3 {
        font-size: 1rem;
    }

    .items-card-end h2 {
        font-size: 1.1rem;
    }

    .menu .ancora {
        padding-top:40px;
    }

}