
/* Desktop (col-lg) 992px+ */
@media (min-width: 992px) {

}

/* Desktop e Tablets (col-md) 768px a 991px */
@media (min-width: 768px) and (max-width: 991px) {

    .text-banner h1 {
        font-size: 38px;
    }

    .card-banner {
        width: 340px;
        height: 340px;
    }

    .img-banner img {
        width: 380px;
    }
}

/* Tablets (col-sm) 576px a 767px */
@media (min-width: 576px) and (max-width: 767px) {

}

/* Tablets e Celulares (col) 0px a 767px */
@media (max-width: 767px) {

    html, body {
        width: 100% !important;
        overflow-x: clip !important;
    }

    .no-mobile {
        display: none!important;
    }

    /* ---- NAVBAR ---- */
    .navbar-toggler-icon {
        padding-top: 5px;
    }

    .navbar-collapse {
        background-color: var(--color-secondary);
        padding: 20px;
        text-align: center;
        border-radius: 40px;
    }

    .navbar-collapse .btn-white {
        margin-top: 20px;
    }

    .navbar-collapse .btn-icon {
        padding-right: 20px;
    }

    .navbar-collapse .btn-icon span.icon {
        display: none;
    }

    /* ---- IMAGEM HAMBÚRGUER MOBILE (recriada) ---- */
    .banner-img-mobile {
        position: relative;
        width: 260px;
        height: 260px;
        margin: 0 auto 20px auto;
    }

    .banner-bg-mobile {
        position: absolute;
        width: 220px;
        height: 220px;
        background-color: #f4c949;
        border-radius: 70px;
        top: 20px;
        right: 0;
        left: 50%;
        transform: translateX(-50%);
    }

    .burger-mobile {
        position: absolute;
        width: 280px;
        top: 0px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 2;
    }

    /* ---- BANNER ---- */
    .banner {
        padding-top: 30px !important;
        padding-bottom: 40px !important;
        text-align: center !important;
    }

    .col-one {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .text-banner {
        text-align: center !important;
        align-items: center !important;
        margin-bottom: 10px !important;
    }

    .text-banner h1 {
        font-size: 32px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .text-banner p {
        font-size: 16px !important;
        text-align: center !important;
        max-width: 100% !important;
        margin: 10px auto !important;
    }

    /* Botões Ver Cardápio + Delivery */
    .text-banner .wow.fadeIn > a,
    .text-banner .d-flex > a,
    .text-banner > div > a {
        display: block !important;
        width: 100% !important;
        max-width: 300px !important;
        text-align: center !important;
        margin: 8px auto !important;
    }

    .text-banner .wow {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .btn-yellow,
    .btn-white {
        padding: 13px 20px;
        font-size: 17px;
    }

    .btn-icon-left {
        padding-left: 63px !important;
    }

    .btn-icon-left span.icon-left {
        width: 43px;
        height: 43px;
        margin-left: -56px;
    }

    /* Botões sociais centralizados */
    .btn-social {
        display: inline-flex !important;
        justify-content: center;
        align-items: center;
        margin: 6px 4px !important;
    }

    /* ---- TÍTULOS ---- */
    .hint-title {
        font-size: 14px;
    }

    .title {
        font-size: 28px;
    }

    /* ---- SEÇÕES ---- */
    .servicos {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .cardapio {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    /* ---- MENU CATEGORIAS — wrapper não pode cortar o scroll ---- */
    .col-12.p-0 {
        overflow: visible !important;
    }

    /* ---- MENU CATEGORIAS — scroll horizontal pill ---- */
    .container-menu {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        padding: 6px 4px 14px 4px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .container-menu::-webkit-scrollbar {
        display: none !important;
    }

    .container-menu .btn {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin: 0 !important;
        font-size: 13px !important;
        padding: 8px 14px !important;
    }

    /* ---- CARD ITEM CARDÁPIO ---- */
    .img-produto {
        position: absolute;
        left: 15px;
    }

    .card-item {
        height: 110px;
        padding-left: 110px;
        justify-content: center;
        align-items: start;
    }

    .card-item .img-produto img {
        width: 80px;
    }

    .title-produto {
        margin-top: 0px!important;
        height: 30px!important;
        width: 100%;
        text-align: left!important;
    }

    .price-produto {
        margin-bottom: 0px!important;
        margin-top: 0px!important;
        font-size: 22px!important;
    }

    .card-item .add-carrinho {
        margin-top: 5px;
    }

    #itensCardapio .mb-5 {
        margin-bottom: 15px!important;
    }

    /* ---- DEPOIMENTOS ---- */
    .depoimentos {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .card-depoimentos {
        display: none;
    }

    .depoimento {
        margin-top: 20px;
    }

    .container-dados-depoimento {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .imagem-depoimento {
        margin: 0 auto 10px auto;
    }

    .nome-depoimento {
        font-size: 18px;
    }

    .texto-depoimento {
        font-size: 14px;
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ---- RESERVA ---- */
    .reserva {
        padding-top: 40px;
        padding-bottom: 50px;
    }

    .card-secondary {
        padding: 28px 20px !important;
        border-radius: 30px !important;
    }

    .card-reserva {
        display: none;
    }

    .reserva .img-banner img {
        width: 100% !important;
        position: relative !important;
        top: auto !important;
        right: auto !important;
        display: block !important;
        margin: 0 auto 20px auto !important;
    }

    /* ---- FOOTER ---- */
    .container-logo-footer {
        justify-content: center;
    }

    .container-texto-footer p {
        text-align: center;
    }

    .container-redes-footer {
        margin-top: 30px;
        margin-bottom: 40px;
        justify-content: center;
    }

    /* ---- MODAL CARRINHO ---- */
    .modal-full {
        padding: 20px 16px !important;
    }

    .modal-full .item-carrinho {
        padding-left: 0;
        padding-right: 0;
    }

    .modal-full .img-produto {
        position: relative;
        left: 0;
    }

    .modal-full .img-produto img {
        width: 50px;
    }

    .modal-full .dados-produto {
        padding-left: 12px;
        padding-right: 8px;
        display: grid;
    }

    .modal-full .title-produto,
    .modal-full .price-produto {
        font-size: 15px !important;
    }

    .modal-full .add-numero-itens {
        padding: 2px 10px;
    }

    .modal-full .form-control {
        font-size: 15px;
        padding: 12px 18px;
    }

    /* ---- BOTÃO CARRINHO FLUTUANTE ---- */
    .botao-carrinho {
        right: 16px;
        bottom: 20px;
    }

    /* ---- VER MAIS ---- */
    #btnVerMais {
        width: 90% !important;
        max-width: 300px !important;
        font-size: 15px !important;
    }
}

/* Telas muito pequenas (< 360px) */
@media (max-width: 360px) {

    .text-banner h1 {
        font-size: 28px !important;
    }

    .container-menu .btn {
        font-size: 13px !important;
        padding: 7px 11px !important;
    }

    .card-item {
        padding-left: 95px;
    }

    .card-item .img-produto img {
        width: 70px;
    }
}
