@media screen and (max-width: 768px ) {
   .hero > img{
        content: url(/images/fundo2.png);
        width: 100%;
        height: 110vh;
        object-fit: cover;
        object-position: calc(50% + 10px) bottom;
   } 
   .hero .info{
        top: 20%;
        left: 50%;
        transform: translate(-50%, -50%);
        margin-top: 10px;
   }
   .hero .info >img{
        width: 350px;
        height: 165px;
   }
   .hero p{
        font-size: 20px;
        margin-bottom: 30px;
   }
   .btn1{
        background-color: var(--laranja);
        border: 2px solid var(--branco);
   }

   /*Sobre*/

    .sobre{
        display: flex;
        flex-direction: column;
        padding: 20px 10px;
    }
    .sobre .txt{
        margin-left: 10px;
        margin-right: 10px;
    }
    .sobre .txt h2{
        font-size: 30px;
        margin-bottom: 50px;
        text-align: center;
        line-height: 50px;
    }
    .sobre .txt p{
        font-size: 12px;
    }
    .sobre .img{
        margin-left: 0px;
    }

    /*Produtos*/
    .produtos{
        padding: 20px 10px;
    }
    .produtos h2{
        font-size: 30px;
        line-height: 50px;
        margin-bottom: 30px;
        font-weight: Bold;
    }
    .grid-produtos {
        gap: 10px;
    }
    .produto{
        padding: 5px;
        width: 180px;
    }
    .produto .img{
        height: 150px;
    }
    .produto h3{
        font-size: 14px;
        margin: 0px 0;
    }
    .produto h4{
        font-size: 12px;
        margin-bottom: 10px;
    }
    .produto p{
        font-size: 9px;
        margin-bottom: 10px;
    }
    .produto .estrela{
        font-size: 15px;
    }
    .produto a{
        padding: 5px 20px;
        font-size: 10px;
    }
    .produto .btn2:hover{
        padding: 5px 24px;
        font-size: 12px;
    }
    .produto .img button{
        font-size: 12px;
        padding: 0px 5px;
    }

    /*Contato*/
    .contato{
        padding: 20px 10px;
        text-align: center;
    }
    .contato h2{
        font-size: 40px;
        text-align: center;
        line-height: 50px;
    }
    .contato .btn3{
        display: flex;
        justify-content: center;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 380px ) {
    .hero .info >img{
        width: 310px;
    }
    .hero p{
        font-size: 18px;
        margin-bottom: 20px;    
    }
    .button{
        padding: 10px 40px;
    }

    /*Produtos*/
    .grid-produtos {
        gap: 8px;
    }
    .produto{
        padding: 5px;
        width: 160px;
    }
    .produto .img{
        height: 140px;
    }
    .produto p{
        font-size: 9px;
        margin-bottom: 5px;
    }

    /*Sobre*/
    .sobre .txt h2{
        font-size: 25px;
        margin-bottom: 30px;
        line-height: 40px;
    }
}