* {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box; /*evita que os elementos aumente de tamanho inesperadamente facilitando o controle da responsividade*/
    list-style: none;
}

/*estilizando o header*/
.cabecalho {
    background-color: #830900; /*cor de fundo*/
    color: white; /*cor da letra*/
    padding: 1.5rem; /*poderia ser 24px*/
    

    /*alinhamento dos itens*/
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-direction: row;

    /*header fixo*/
    position: sticky; /*posição do header para sobrepor os outros elementos*/
    left: 0;
    top: 0;
    z-index: 999; /*eixo z - profundidade do elemento*/
    
}

/*logo do header*/
.div-logo img {
    width: 15%; /*usando a % para diminuir seu tamanho*/
    cursor: pointer;
}

.div-button a button {
    width: 5rem; /*poderia ser 80 px*/
    padding: 0.5rem; /*poderia ser 8 px*/
    background-color: #ad3118; /*cor do botao*/
    color: white; /*cor da letra*/
    border: none; /*tirando a borda*/
    font-weight: 700; /*espessura da letra*/
    border-radius: 10px; /*arredonda a borda do botao*/
    cursor: pointer;
}

.section-01 {
    padding: 5rem; /*preenchimento interno da section*/
    background-image: url(imagens/pexels-burgers-1839090.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem; /*poderia ser 32px*/
    flex-wrap: wrap; /*isso significa que as div poderao quebrar de linha, caso necessario*/
}

.div01 {
    background-color: #ad311898; /*cor de fundo*/
    color: white; /*cor da letra*/
    text-align: center; /*centralizando o texto*/
    font-weight: 700; /*grossura da fonte*/
    font-size: 2rem; /*tamanha da letra dentro da caixa*/
    padding: 1rem; /*preechimento da caixa*/
    width: 25%; /*largura de caixa em %*/
    height: 20rem; /*altura da caixa com o REM*/
    min-width: 299px; /*largura minima da caixa para smartphone*/
}

.div02 {
    padding: 1rem; /*preechimento da caixa*/
    width: 25%; /*largura de caixa em %*/
    height: 20rem; /*altura da caixa com o REM*/
    min-width: 299px; /*largura minima da caixa para smartphone*/
    background-image: url(imagens/lanche1.jpg); /*inserindo a img*/
    background-position: center; /*centralizando a img*/
    background-repeat: no-repeat; /*para a img não repetir*/
    background-size: cover; /*cobrir toda a cx*/
    
   display: flex; /*deixando lado a lado*/
   align-items: end; /*Deixando no final*/
   justify-content: center; /*centralizando horizontalmente*/
   gap: 15px;
}

/*aqui estamos estilizando as listas*/
.ul-div01 li a {
    text-decoration: none; /*removendo sublinhado*/
    background-color: #830900b0; /*cor de fundo*/
    color: white;  /*cor da letra*/
    padding: 4px; /*preenchimento interno*/
    font-size: 1.3rem; /*tamanho da letra*/
    border-radius: 10px; /*arredonda a borda do botao*/
}

.ul-div01 li {
    margin: 10px 20px; /*alterando os 4 lados externos dos elementos, primeiro valor (sup e inf) e segundo valor (lado dir e lado esq)*/
}

.div02 i {
    color: white;
    font-size: 1.5rem;
    margin-right: 6.5rem;
}

/*aqui estamos estilizando a tarja em destaque entre as section*/
.img-div {
    padding: 2%; /*preenchimento interno*/
    background-image: url(imagens/pngtree-red-pattern-wine-red-texture-image_892413.jpg); /*caminho da imagem*/
    background-position: center; /*posição da img*/
    background-size: cover; /*preenchimento total na caixa*/
}

/*estilizando a segunda section*/
.section-02, .section-04 {
    display: flex; /*deixando lado a lado*/
    justify-content: center; /*alinhamento horizontal*/
    align-items: center; /*alinhamento vertical*/
    gap: 1.5rem; /*brecha entre as caixaas*/
    padding: 5rem; /*preenchimento interno*/
    background-color: #ad3118; /*cor de fundo*/
    flex-wrap: wrap; /*caso necessario voce podera quebrar*/
}

/*estelização das 3 div section 2*/
.caixa {
    width: 25%; /*largura da caixa*/
    height: 22rem; /*altura da caixa*/
    background-color: #831008; /*cor de fundo*/
    min-width: 299px; /*largura minima da div*/
    font-size: 1rem; /*tamanho da letra*/
    color: white; /*cor da letra*/
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.349); /*sombra externa das caixas*/
    cursor: pointer; /*muda o cursor do mouse para maozinha*/
    text-align: center;
}

.caixa img {
    width: 100%;
    height: 50%;
}

.caixa:hover {
    box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.801); /*sombra externa das caixas*/
    transition: 0.8s; /*velocidade do movimento*/
}

.section-03 {
    display: flex; /*deixando lado a lado*/
    justify-content: center; /*alinhamento horizontal*/
    align-items: center; /*alinhamento vertical*/
    gap: 1.5rem; /*brecha entre as caixaas*/
    padding: 5rem; /*preenchimento interno*/
    background-color: #ad3118; /*cor de fundo*/
    flex-wrap: wrap; /*caso necessario voce podera quebrar*/
}

/*chamando as classes primárias para estelização*/
.div03, .div04 {
    height: 15rem; /*altura da caixa*/
    padding: 1rem; /*preechimento interno*/
    text-align: center;
}

/*estelização dos texto da primeira caixa*/
.content-text {
    text-align: start; /*alinhando os texto ao inicio*/
    margin: 1rem; /*espaçamento em torno da caixa*/
    font-weight: 700; /*peso da fonte*/
}

/*acessando os icons para estilização*/
.icon-div3 i {
    font-size: 2rem; /*tamanho do icon*/
    margin-top: 1rem; /*espaçamento superior dos icon*/
}

/*inicio formatação section 03*/
.button-div04 a button {
    padding: 0.5rem; /*preenchimento interno button*/
    background-color: #ad3118; /*cor de fundo*/
    color: white; /*cor da letra*/
    font-weight: 600; /*peso da fonte*/
    margin: 1rem 0; /*espaçamento sup/inf 1rem, e 0 nas laterais*/
    border: none; /*removendo a borda*/
    border-radius: 10px; /*redondando a borda*/
    cursor: pointer; 
}

.text-div04 p {
    font-size: 1.5rem; /*tamanho da fonte*/
    text-align: center; /*centralizando o texto*/
    font-weight: 600; /*peso da fonte*/
}

.text-div04 i {
    font-size: 2em;
    margin-top: 2rem;
}

.bacon {
    background-image: url(imagens/lanchebacon.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bacon:hover {
    width: 28%; /*largura da caixa*/
    height: 24rem; /*altura da caixa*/
}

.batata {
    background-image: url(imagens/batata.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.batata:hover {
    width: 28%; /*largura da caixa*/
    height: 24rem; /*altura da caixa*/
}

.combo {
    background-image: url(imagens/combo.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.combo:hover {
    width: 28%; /*largura da caixa*/
    height: 24rem; /*altura da caixa*/
}

/*inicio estilização rodape*/
.rodape {
    background-color: #830900; /*cor de fundo*/
    padding: 2rem; /*32px*/
    text-align: center; /*alinhando os texto ao centro*/
    font-size: 1.1rem; /*tamanho da fonte*/
}

.content {
    display: flex; /*flexbox / lado a lado*/
    align-items: center; /*alinhando vertical*/
    justify-content: center; /*alinhando horizontal*/
    gap: 3rem; /*espaçamento dos elementos*/
    flex-wrap: wrap; /*quebra as caixas*/
    margin-bottom: 1.5rem;
}

/*espaçame da div que guarda os icon*/
.social-media {
    padding: 1.5rem;
}

/*estilizando os icon*/
.social-media i {
    color: white; /*cor dos icon*/
    font-size: 2em; /*32px | tamanho dos icon*/
    margin: 0.5em; /*espaçamente em volta dos icon (4 lados)*/
}

.social-media i:hover {
    color: gray;
    transition: 0.4s;
}

/*linha divisoria entre as div principais*/
.line {
    width: 60%; /*largura da linha*/
    margin: 0.5rem auto; /*espaçamento em torno da linha sup e inf (0.5rem) com as latereais automaticas (navegador)*/
}

.div-list ul li a {
    color: white;
    text-decoration: none;
}

.div-list ul li a:hover {
    color: gray;
    transition: 0.4s;
}

.div-list ul li {
    margin-bottom: 8px;
}

/*Especificação das listas em colunas para MObile*/
@media (max-width: 600px) {
    .content {
        flex-direction: column;
    }

    .whatsap img { /*alterando tamanho do icon whatsa*/
        width: 2rem;
    }
}

.whatsap img { /*alterando tamanho do icon whatsa*/
    width: 3rem;
}

.whatsap img:hover {
    width: 4rem;
    transition: 0,3s;
}

 /*div q guarda o icon whats*/
.whatsap {
    position: fixed; /*fica fixo na posição*/
    right: 25px; /*posiciona a direita (25px)*/
    bottom: 20px; /*posiciona a 25px do bottom*/
}

.bebidas p {
    padding: 1rem;
}