/*--------------------- SCROLL --------------------------*/

::-webkit-scrollbar {
    background-color: #1d1d1d;
    width: 5px;
    border-left: 5px;
    border-right: 5px;
}

::-webkit-scrollbar-thumb {
    background-color: #5b5b5b;
    border-radius: 5px;
}

.scroll-animation {
    opacity: 0;
    transition: opacity 1.5s;
}
  
.scroll-animation.show {
    opacity: 1;
}
  
  
#about .scroll-animation:last-child {
    margin-bottom: 100px; /* Ajuste o valor conforme necessário */
}


/*-------------------------------------------------------*/


 

/*--------------------- GERAL ---------------------------*/

@font-face {
    font-family: 'lemom-milk';
    src: url('./imagens/fonte/LEMONMILK-Regular.ttf') format('truetype');
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: aliceblue;
    font-family: 'lemom-milk';
}

body {
    background-image: url('./imagens/designe/background2.png');
    background-attachment: scroll;
    max-width: 576px;
}

/*-------------------------------------------------------*/




/*---------------------- HEADER -------------------------*/

.topo {
    padding: 1%;
    background-color: rgba(70, 70, 64, 0.703);
    display: flex;
}

.topo img {
    height: 15%;
    width: 35%;
    aspect-ratio: 3/2;
    object-fit: contain;
    display: flex;
    margin-left: 5%;
}

.linha {
    padding: 0.2%;
    height: 2%;
    background-color: aliceblue;
}

/*-------------------------------------------------------*/




/*----------------------- PRODUTO -----------------------*/

.categorias {
    color: aliceblue;
    font: bold;
    margin-top: 8%;
    font-weight: 600;
    font-size: small;
}

.categorias h2 {
    margin-left: 3%;
}

.p1 {
    background-color: #1b1b1bdd;
    border: 1px solid gray;
    border-radius: 1%;
    padding: 5%;

    margin-left: 2%;
    max-width: 95%;
}

.p1 img {
    aspect-ratio: 5/4;
    object-fit: contain;
}

.p2 {
    background-color: #1b1b1bdd;
    border: 1px solid gray;
    border-radius: 1%;
    padding: 5%;

    margin-left: 2%;
    max-width: 95%;
}

.p2 img {
    aspect-ratio: 5/4;
    object-fit: contain;
}

.combos {
    list-style-type: none;
}

.bebida {
    font-size: large;
    color: rgb(185, 183, 183);
}

.adicionais {
    font-size: 10px;
    color: rgba(185, 183, 183, 0.786);
}

.valor {
    font-size: large;
    color: green;
}

/*-------------------------------------------------------*/




/*---------------------- FOOTER -------------------------*/

footer {
    margin-top: 5%;
    background-color: #2b2b2b;
    padding: 30px 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.container {
    max-width: 960px;
    margin: 0 auto;
}

h3 {
    font-size: 25px;
    margin-bottom: 10px;
    text-align: center; 
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 15px;
}

ul li {
    margin-bottom: 10px;
    font-size: small;
    color: rgba(185, 183, 183, 0.786);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

ul li a:hover {
    text-decoration: underline;
}

hr {
    margin: 30px 0;
    border: 0;
    border-top: 1px solid #ccc;
}

.col-md-12 p {
    font-size: x-large;
    text-align: center;
    color: rgb(185, 183, 183);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; 
}

/*-------------------------------------------------------*/




/*---------------------- MOBILE -------------------------*/

/* Estilos para telas maiores que 768px */
@media screen and (min-width: 768px) {

    /* Adicione aqui suas regras CSS para telas maiores */
    .p1 {
        width: 25%;
        display: flex;
        margin-top: 5%;
    }

    .p1 img {
        height: 30%;
        width: 30%;
        margin-top: 1%;
    }

    .p2 {
        width: 25%;
        display: flex;
        margin-top: 5%;
    }

    .p2 img {
        height: 30%;
        width: 30%;
        margin-top: 3%;
    }
}

/* Estilos para telas menores que 768px */
@media screen and (max-width: 768px) {

    /* Adicione aqui suas regras CSS para telas menores */
    .p1 {
        width: 100%;
        display: flex;
        margin-top: 5%
    }

    .p1 img {
        height: 30%;
        width: 30%;
        margin-top: 1%;
    }

    .p2 {
        width: 100%;
        display: flex;
        margin-top: 5%;
    }

    .p2 img {
        height: 30%;
        width: 30%;
        margin-top: 3%;
    }
}

/* Estilos para telas menores que 576px */
@media screen and (max-width: 576px) {

    /* Adicione aqui suas regras CSS para telas ainda menores */
    h3 {
        font-size: 18px;
    }

    ul li {
        margin-bottom: 5px;
    }

    ul li a {
        font-size: 14px;
    }

    .col-md-12 p {
        font-size: 12px;
    }
}