@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;400;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');
* { 
    margin: 0;
    padding: 0;
    font-family: 'Oswald' , 'arial';
}

header {
    display: flex;
    justify-content: center;
    height: 120px;
    background-image: url("../imagens/fundo_header.png");    
}

html, body {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;  /* Impede a rolagem horizontal */
}

.container {
    width: 1500px;
    display: flex;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
}

.menu {
    display: flex;
    align-items: center;
    
    
}

nav ul {
    display: flex;
    align-items: center;
}

nav ul,
nav li{
    list-style: none;
    margin: 0px;
    padding: 0px;
}

nav a {
    display: block;
    padding: 20px;
    text-decoration: none;
    text-transform: uppercase;
    color: #3d2514;
    font-weight: bold;

}

#banner {
    display: flex;
    justify-content: center;
    background-image: url('../imagens/banner.png');
    background-position: center;
    background-size: cover;
    height: 700px;
    padding-bottom: 30px;
}

.column {
    flex-direction: column;
}

.row {
    flex-direction: row;
}
.banner_escritas {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner_escritas p {
    font-size: 20px;
    color: #3d2514;
    font-weight: bold;
    border: 2px dashed #3d2514;
    max-width: 400px;
    padding: 10px;
    text-align: center;
}
.banner_escritas h1 {
    font-size: 110px;
    color: #3d2514;
    text-shadow: white 3px 3px 3px ;
    text-transform: uppercase;
    font-family: 'Alfa Slab One', cursive;
}
.banner_escritas h2 {
    font-size: 70px;
    margin-top: -40px;
    color: #3d2514;
    text-shadow: white 3px 3px 3px ;
    text-transform: uppercase;
    font-family: 'Alfa Slab One', cursive;
}

.banner_promo {
    display: flex;
    justify-content: flex-end;
    height: 100px;
    width: auto;
}

.circulo_promo {
    display: flex;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    background-color: #bf2222;
    border: dashed 2px white;
    height: 100px;
    width: 100px;
    color: white;
    text-transform: uppercase;
    font-size: 20px;
    font-family: 'Alfa Slab One', cursive;
}

#comidas {
    display: flex;
    justify-content: center;
    height: 500px;
    width: auto;
    
}
.comidas_options {
    display: flex;
    justify-content: center;
    flex: 1;
}

.comidas_geral {
    display: flex;
    flex: 1;
    justify-content: space-around;
}

.option1 ,
.option2 {
    flex: 1;
    margin-top: 10px;
    margin-left:20px;
    
}
.option1 {
    margin: 20px 0px 20px 20px;
    background-image: url('../imagens/burguer1.jpg-1.png');
    background-position: center;
    background-size: cover;
    border-radius: 15px ;

}

.option2 {
    display: flex;
    flex-direction: column;
    
}

.option3 ,
.option4 {
    flex: 1;
    justify-content: space-between;
    margin-top: 10px;
    margin-bottom: 20px;
    border-radius: 20px ;
}

.option3 {
    background-image: url('../imagens/burguer2.png');
    background-position: center;
    background-size: cover;
    
}

.option4 {
    background-image: url('../imagens/burguer3.png');
    background-position: center;
    background-size: cover;
}

.option_descricao {
    margin-bottom: -55px;
    color: white;
    padding: 20px;
    width: 200px;
    line-height: 40px
    
}

.option4_titulo,
.option1_titulo {
    width: 400px;
}

.option_descricao h1 {
    font-size: 40px;
}

#geral {
    display: flex;
    justify-content: center;
}

#geral section {
    flex: 1;
}

#geral aside {
    flex: 1;
}

.article {
    flex: 1;
    margin-right: 20px;
}

.sabores_gerais {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.btn_sabores button {
    margin-top: 40px;
    background-color: #ffc045;
    color: #3d2514;
    font-size: 22px;
    font-weight: bold;
    padding: 5px 20px ;
    border: none;
    cursor: pointer;
}

.titulo_sabores {
    margin-top: 20px;
    margin-bottom: 18px;
    font-size: 60px;
    color: #3d2514;
    text-transform: uppercase;
    font-family: 'Alfa Slab One', cursive;
}
 
.descricao_sabores {
    color: #3d2514;
    font-size: 16px;
    text-align: center;
 }

 .hamburgers {
     display: flex;
     height: 600px;
     margin: 30px;
 }

.burguer1, 
.burguer2, 
.burguer3 {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    position: relative; /* Para usar efeitos de sombra ou sobreposições */
}

.burguer1 img, 
.burguer2 img, 
.burguer3 img {
    width: 390px;
    height: auto;
    border-radius: 15px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra suave */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transição suave */
}

/* Efeito de hover nas imagens */
.burguer1 img:hover,
.burguer2 img:hover,
.burguer3 img:hover {
    transform: scale(1.05); /* Leve aumento ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Sombra mais forte ao passar o mouse */
}

/* Adicionando um fundo sutil atrás da imagem */
.burguer1,
.burguer2,
.burguer3 {
    background-color: rgba(255, 255, 255, 0.8); /* Fundo leve atrás da imagem */
    padding: 10px; /* Adiciona espaço ao redor da imagem */
    border-radius: 15px; /* Bordas arredondadas ao redor da imagem e fundo */
}


 .burguer1 h1{
     color: #3d2514;
     font-size: 30px;
     text-transform: uppercase;
     margin-bottom: 10px;
 }

 .burguer1 p {
     color: #3d2514;
     font-weight: 400;
     margin-bottom: 30px;
     text-align: center;

 }

 .burguer1 button {
    background-color: #bf2222;
    color: white;
    width: 180px;
    height: 40px;
    cursor: pointer;
    border: none;
    text-transform: uppercase;
    font-family: 'Alfa Slab One', cursive;
    letter-spacing: 1px;
    border-radius: 5px; /* Bordas arredondadas */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra suave */
    transition: background-color 0.3s, transform 0.3s; /* Transição suave */
    margin-bottom: 60px;
}

/* Efeito de hover */
.burguer1 button:hover {
    background-color: #a01d1d; /* Cor mais escura ao passar o mouse */
    transform: translateY(-2px); /* Efeito de elevação */
}

/* Efeito de foco */
.burguer1 button:focus {
    outline: none; /* Remover o contorno padrão do botão */
    box-shadow: 0 0 10px rgba(191, 34, 34, 0.6); /* Sombra mais forte ao focar */
}

/* Adicionando o espaço de 5px abaixo na versão mobile */
@media (max-width: 768px) {
    .burguer1 button {
        margin-bottom: 20px; /* Espaço de 5px abaixo */
    }
}


 #geral section {
     flex: 1;
 }

 .divulgacao {
    display: flex;
    justify-content: space-between;
    
    background-color: #ffffff;
    -webkit-box-shadow: 8px 8px 30px 0px #aca9a9;
    -moz-box-shadow:    8px 8px 30px 0px #aca9a9;
    box-shadow:         8px 8px 30px 0px #aca9a9;
 }

 .titulo_divulgacao {
     flex-direction: column;
     padding: 40px;
     margin-top: 80px;
     align-items: flex-end;
     max-width: 500px;
     padding-left: 80px;
 }

 .titulo_divulgacao h4{
    color: #3d2514;
    font-weight: 400;
    text-transform: uppercase;
    font-size: 22px;
 }

 .titulo_divulgacao h1 {
     font-size: 40px;
     color: #3d2514;
     text-transform: uppercase;
     font-family: 'Alfa Slab One', cursive;
 }

 .titulo_divulgacao p {
     color: #3d2514;
     font-weight: 400;
     font-size: 18px;
     margin-top: 30px;
 }

 .divulgacao_img {
     padding: 40px;
 }


  /* UNIDADES */
  #unidades {
    padding: 60px 0;
    background-color: #f8f8f8;
}

/* Container específico para a seção UNIDADES */
.container-unidades {
    width: 90%;
    max-width: 1200px; /* Limita a largura do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo */
}

/* Estilos para o título da seção */
.titulo-unidades {
    text-align: center;
    margin-bottom: 50px;
}

.titulo-unidades h4 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.titulo-unidades h1 {
    font-size: 48px;
    font-weight: bold;
    color: #111;
    margin-bottom: 20px;
}

.titulo-unidades p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Estilos para as imagens das unidades */
.unidades-imagens {
    display: flex;
    justify-content: center; /* Centraliza as imagens no desktop */
    gap: 20px;
    margin-top: 40px;
    flex-wrap: wrap; /* Permite que as imagens se ajustem se necessário */
}

.imagem-unidade {
    flex: 1;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 500px; /* Limita o tamanho máximo das imagens */
    margin: 0 10px; /* Adiciona um pouco de margem entre as imagens */
}

.imagem-unidade img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.imagem-unidade:hover img {
    transform: scale(1.05);
    opacity: 0.8;
}

/* Estilos para o texto da unidade */
.texto-unidade {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.5); /* Fundo semitransparente */
    color: white;
    padding: 5px 10px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 5px;
    z-index: 2;
}

/* Estilos para o texto que aparece ao passar o mouse */
.texto-hover {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: rgba(0, 0, 0, 0.7); /* Fundo semitransparente */
    color: white;
    padding: 5px 10px;
    font-size: 16px;
    display: none;
    border-radius: 5px;
    z-index: 1;
    transition: opacity 0.3s ease;
}

/* Exibe o texto adicional ao passar o mouse sobre a imagem */
.imagem-unidade:hover .texto-hover {
    display: block;
    opacity: 1;
}

/* Estilos de responsividade */
@media (max-width: 768px) {
    .unidades-imagens {
        flex-direction: column;
        align-items: center;
    }

    .imagem-unidade {
        width: 100%;
        margin-bottom: 20px;
    }
}





/* FEEDBACKS */
#feedbacks {
    padding: 60px 0;
    background-color: #f8f8f8;
}

/* Container específico para a seção de feedbacks */
.container-feedbacks {
    width: 90%;
    max-width: 1200px; /* Limita a largura do conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo */
}

/* Estilos para o título da seção */
.titulo-feedbacks {
    text-align: center;
    margin-bottom: 50px;
}

.titulo-feedbacks h4 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.titulo-feedbacks h1 {
    font-size: 48px;
    font-weight: bold;
    color: #111;
    margin-bottom: 20px;
}

.titulo-feedbacks p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Estilos para o carrossel de feedbacks */
.feedbacks-carousel {
    display: flex;
    gap: 30px;
    overflow: hidden;
    margin-top: 40px;
    position: relative;
    width: 100%;
    scroll-behavior: smooth; /* Para suavizar o comportamento de rolagem */
}

.feedback-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 300px;
    min-width: 250px; /* Ajustando para evitar que o conteúdo seja cortado */
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    padding: 20px;
    text-align: center;
    flex-shrink: 0; /* Impede que os itens encolham */
    transition: transform 0.3s ease; /* Para uma transição suave ao passar o mouse */
}

.feedback-item img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
}

.feedback-item h3 {
    font-size: 22px;
    color: #333;
    margin-bottom: 10px;
}

.feedback-subject {
    font-size: 16px;
    color: #666;
    font-style: italic;
}

/* Estilos de responsividade para versões menores */
@media (max-width: 768px) {
    .feedbacks-carousel {
        flex-direction: row; /* Ajustando para que os cards fiquem na linha */
        justify-content: center;
    }

    .feedback-item {
        width: 80%; /* Reduzindo o tamanho dos cards */
        margin-bottom: 20px;
        min-width: 200px; /* Garantindo que o conteúdo não fique cortado */
    }
}


/*  GALERIA */
#galeria {
    padding: 60px 0;
    background-color: #f8f8f8;
}

/* Container específico para a seção de galeria */
.container-galeria {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilos para o título da seção */
.titulo-galeria {
    text-align: center;
    margin-bottom: 50px;
}

.titulo-galeria h4 {
    font-size: 24px;
    color: #333;
    margin-bottom: 10px;
}

.titulo-galeria h1 {
    font-size: 48px;
    font-weight: bold;
    color: #111;
    margin-bottom: 20px;
}

.titulo-galeria p {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
}

/* Estilos para a grid de imagens */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colunas para a versão desktop */
    gap: 20px;
    margin-top: 40px;
}

/* Estilos para cada foto na galeria */
.foto-item {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.foto-item img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
}

/* Animação de zoom nas imagens ao passar o mouse */
.foto-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

.foto-item:hover img {
    transform: scale(1.1);
}

/* Estilos de responsividade */
@media (max-width: 768px) {
    .galeria-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas na versão mobile */
    }

    .foto-item {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .galeria-grid {
        grid-template-columns: 1fr; /* 1 coluna na versão mobile extra pequena */
    }
}



/* Estilização específica para centralização da .container do formulário */
#form .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 900px; /* Limita a largura máxima */
    padding: 20px;
    margin: 0 auto; /* Garante que o container esteja centralizado */
}

/* Estilização dos títulos */
.titulos_form {
    text-align: center; /* Centraliza o conteúdo dos títulos */
    margin-bottom: 20px;
}





/* Estilização do título Fale Conosco */
.titulo_sabores {
    margin-top: 10px;
}

/* Estilização do conteúdo da seção de contato */
.contato-conteudo {
    text-align: center; /* Centraliza o conteúdo do parágrafo */
    margin-top: 20px;
    margin-bottom: 30px;
}

.info-contato p {
    font-size: 18px;
    color: #555;
    font-weight: bold;
    max-width: 800px;
    margin: 0 auto;
}

/* Estilização das opções de contato */
.opcoes-contato {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap; /* Permite que os botões quebrem linha se necessário */
}

.contato-item {
    margin-top: 15px;
}

.btn-contato {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    border-radius: 5px;
    font-size: 18px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn-contato i {
    margin-right: 10px;
}

/* Estilização das cores dos botões de contato */
.email {
    background-color: #ffc045;
    border: 2px solid #e6a500;
}

.whatsapp {
    background-color: #ffc045; /* Cor do WhatsApp */
    border: 2px solid #e6a500; /* Cor do WhatsApp */
}

.instagram {
    background-color: #ffc045; /* Cor do Instagram */
    border: 2px solid #e6a500; /* Cor do Instagram */
}

/* Estilos comuns para os botões */
.btn-contato {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    color: white;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 25px; /* Bordas arredondadas */
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease; /* Transição suave para todos os efeitos */
    text-decoration: none; /* Remove o sublinhado do link */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Efeitos ao passar o mouse nos botões */
.btn-contato:hover {
    opacity: 0.8; /* Leve diminuição de opacidade */
    transform: scale(1.05); /* Leve aumento do tamanho */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Aumenta a sombra */
}

/* Efeitos de foco (quando o botão recebe o foco, por exemplo, com o teclado) */
.btn-contato:focus {
    outline: none; /* Remove o contorno padrão */
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.3); /* Destaque mais forte */
}

/* Efeito de hover para cada tipo de botão com cor personalizada */
.email:hover {
    background-color: #e6a500; /* Cor mais intensa ao passar o mouse */
    border-color: #ffc045; /* Ajuste a cor da borda */
}

.whatsapp:hover {
    background-color: #e6a500; /* Cor mais intensa para WhatsApp */
    border-color: #ffc045; /* Ajuste a cor da borda */
}

.instagram:hover {
    background-color: #e6a500; /* Cor mais intensa para Instagram */
    border-color: #ffc045; /* Ajuste a cor da borda */
}

/* Responsividade - para telas menores */
@media (max-width: 768px) {
    /* Centraliza a .container para telas pequenas */
    #form .container {
        width: 100%; /* Garante que o container ocupe 100% da largura */
        padding: 5px;
        margin: 0; /* Remove qualquer margem extra */
    }

    /* Títulos centralizados */
    .titulos_form {
        text-align: center;
        width: 100%; /* Garante que o título ocupe toda a largura disponível */
    }

    .titulo_sabores {
        font-size: 28px; /* Ajuste do tamanho da fonte para telas menores */
    }





    /* Centraliza os itens de contato */
    .contato-item {
        text-align: center;
    }




}




 .wrap {
     flex-wrap: wrap;
 }

 .label-input input {
     width: 300px;
     height: 50px;
     text-transform: uppercase;
     margin: 10px;
     border-radius: 3px;
     border: 1px solid #bebebe;

 }

 .label-input ::placeholder {
     padding: 20px;
 }

 .label-input .btn_reservar {
    background-color: #bf2222;
    border: none;
    text-transform: uppercase;
    font-family: 'Alfa Slab One', cursive;
    color: #ffffff;
    letter-spacing: 1px;
    cursor: pointer;
 }


/* Ajustando o layout do footer */
#footer_geral {
    display: flex;
    justify-content: center;
    width: 100%;
    background-color: #bf2222;  /* Fundo amarelo */
    padding: 30px 0;  /* Adicionando padding para espaçamento interno */
}



.footer_menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 100%;  /* Garante que o footer ocupe 100% da largura disponível */
}

.menu_geral {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;  /* Permite que os itens se ajustem no mobile */
    margin-bottom: 30px;
}

.fm_titulo {
    flex: 1;
    max-width: 500px;  /* Controla o tamanho do título e texto */
    padding: 20px;
    color: #ffffff;
}

.fm_titulo h1 {
    font-size: 30px;
    text-transform: uppercase;
    margin-bottom: 20px;
    font-family: 'Alfa Slab One', cursive;
}

.fm_titulo p {
    font-size: 16px;
    line-height: 1.5;
    color: #ffffff;
}

.fm_contato {
    flex: 1;
    max-width: 400px;  /* Controla o tamanho da seção de contato */
    padding: 20px;
    color: #ffffff;
}

.icones {
    display: flex;
    align-items: center; /* Alinha verticalmente os itens */
    margin-bottom: 15px;
    flex-direction: row; /* Alinha o ícone e o texto na horizontal */
    justify-content: flex-end; /* Alinha tudo à direita */
    width: 100%; /* Garante que o container ocupe toda a largura disponível */
}

.icones a {
    text-decoration: none; /* Remove o sublinhado do link */
    color: inherit; /* Herda a cor do texto */
    display: flex;
    align-items: center; /* Alinha ícone e texto verticalmente */
    transition: transform 0.3s ease, color 0.3s ease;
}

.icon {
    font-size: 30px; /* Tamanho do ícone */
    margin-right: 10px; /* Espaço entre o ícone e o texto */
    color: #333; /* Cor do ícone */
}

.icones p {
    font-size: 16px;
    font-weight: bold;
    color: #333; /* Cor do texto */
}

/* Efeito de hover */
.icones a:hover {
    transform: translateY(-5px); /* Efeito de elevação */
    color: #ffffff; /* Cor do link ao passar o mouse */
}

.icones a:hover .icon {
    color: #ffffff; /* Altera a cor do ícone ao passar o mouse */
}

.fm_contato p {
    font-size: 16px;
    line-height: 1.5;
}

.copy {
    font-size: 14px;
    color: #ffffff;
    text-align: center;
    margin-top: 20px;
}

.copy a {
    text-decoration: none;
    color: #3d2514;
    font-weight: bold;
}

/* Estilos Responsivos */

@media (max-width: 1199px) {
    .menu_geral {
        flex-direction: column;
        align-items: center;
    }
    .fm_titulo,
    .fm_contato {
        max-width: 100%;  /* Ajusta as larguras para 100% no mobile */
        text-align: center;
    }
}

@media (max-width: 759px) {
    .menu_geral {
        flex-direction: column;
        align-items: center;
    }
    .fm_titulo h1 {
        font-size: 24px;
    }
    .fm_titulo p {
        font-size: 14px;
    }
    .copy {
        font-size: 12px;
    }
    .icones {
        flex-direction: column;
        align-items: center;
    }
    .icon {
        margin-bottom: 10px;
    }
}


 .menu_geral {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 30px;
    flex: 2;
 }

 .menuMobile {
    display: none;
    width: 40px;
    height: 40px;
    color: #bf2222;
}

.mm_line {
    height: 4px;
    background-color: #3d2514;
}

 @media (max-width:1200px) {
     .container {
         margin: 10px;
     }
     .body {
         max-width: 1150px;
     }

     .banner_escritas,
     .banner_promo {
         margin: 20px;
     }

     .option2 {
         margin: 30px;
     }

     .descricao_sabores {
         max-width: 1150px;
         text-align: center;
     }

     .divulgacao {
         max-width: 1150px;
         margin: 0px 5px 0px 0px;
     }

 }

 @media (min-width: 960px) and (max-width:1199px){    
    .container {
        margin: 10px;
        justify-content: center;
        max-width: 960px;
    }

    .divulgacao {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .descricao_sabores {
        margin: 20px;
    }
 }

 @media (min-width: 760px) and (max-width: 959px) {
    
    body{
        max-width: 959px;
        text-align: center;
    }

    .banner_escritas {
        align-items: center;
    }
    .container {
        max-width: 959px;
        display: flex;
    }

    .titulo_sabores {
        font-size: 30px;
    }
    .divulgacao {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .descricao_sabores {
        font-size: 20px;
        text-align: center;
        padding: 20px;

    }
 }

 @media (max-width: 759px) {
    
    .banner_escritas h1 {
        font-size: 60px;
        margin-bottom: 20px;

    }
    .banner_escritas h2 {
        font-size: 50px;
    }
    .container {
        display: flex;
        flex-direction: column;
    }

    .comidas_geral {
        flex-direction: column;
    }
    .titulo_sabores {
        font-size: 30px;
    }
    .divulgacao {
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
    }

    .fomulario {
        flex-direction: column;
    }

    .descricao_sabores {
        font-size: 20px;
        text-align: center;

    }

    header .container {
        flex-direction: row;
    }

    header {
        height: auto;
    }

    nav ul {
        flex-direction: column;
        display: none;
        position: absolute;
        left: 0;
        width: 100%;
        background-color: #ffc045;
        
    }

    .menuMobile {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
    }


    #comidas {
        height: 700px;
    }
    .hamburgers {
        flex-direction: column;
        flex: 1;
        height: auto;
    }

    .option1,
    .option2 {
        width: 100%;
        margin-left: 0px;
    }

    .option2 {
        margin-top: -5px;
        height: 500px;
    }
    .option3,
    .option4 {
        height: 500px;
    }
    
    .option_descricao h1 {
        font-size: 22px
    }

    .formulario {
        justify-content: center;
    }

    .menu_geral {
        flex-direction: column;
    }

    .fm_titulo h1{
        font-size: 30px;
    }

    .icones{
        flex-direction: row;
        justify-content: flex-start;
        
    }
 }