* {
    margin: 0;
    padding: 0;
}


.container {
    max-width: 1380px;
    height: 300vh;
    padding-top: 3rem;
    position: relative;
    margin: auto;
    font-family: Arial, Helvetica, sans-serif;
}

.cabecalho {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    font-size: 19px;
}

.cabecalho img {
    display: flex;
    align-items: center;
    width: 6rem;
}

.menu {
    display: flex;
    justify-content: space-between;
    width: 50%;
    list-style: none;
    color: #646464;
    margin-right: 10%;
    cursor: pointer;
}

.banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    align-items: center;
    height: 10rem;
    padding-top: 5rem;
    font-size: 19px;
}

.banner p {
    color: #8b8a8b;
}

.cria-conta {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    width: 15%;
    color: red;
    cursor: pointer;
}

.cria-conta p {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: red;
    width: 7rem;
    height: 3rem;
    border-radius: 7px;
    color: white;
}

.pesquisa {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 5vh;
    padding-top: 2rem;
}

.pesquisa input {
    display: flex;
    justify-content: center;
    border-radius: 7px;
    width: 35rem;
    margin-right: 10%;
    padding: 0px 0px 0px 50px;
    border: solid white;
    outline: none;
    font-size: 16px;
}

.pesquisa ul {
    list-style: none;
    background-color: red;
    width: 9rem;
    height: 3.3rem;
    border-radius: 4px;
    margin-right: 5rem;
    cursor: pointer;
}

.pesquisa ul li {
    display: flex;
    align-items: center;
    margin-top: 1rem;
    justify-content: center;
    color: white;
    font-size: 19px;
}

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

.opcoes {
    display: flex;
    justify-content: center;
    width: 100%;
    padding-top: 4rem;
}

.hamburguer {
    display: flex;
    flex-direction: column;
    background-color: red;
    width: 26rem;
    height: 15rem;
    border-radius: 17px;
    margin-right: 1%;
    ;
    cursor: pointer;
}

.hamburguer:hover {
    transition-duration: 0.3s;
    transform: scale(1.02, 1.02);
}

.hamburguer h1 {
    margin-left: 1.5rem;
    margin-top: 2.5rem;
    font-size: 35px;
    color: white;
}

.hamburguer img {
    display: flex;
    width: 15.2rem;
    margin-top: -0.7rem;
    margin-left: 11rem;
}

.hamburguer p {
    background-color: #cc1825;
    width: 10rem;
    height: 2.8rem;
    margin-top: -5.7rem;
    margin-left: 1.2rem;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
}

.carrinho {
    display: flex;
    flex-direction: column;
    background-color: #b6d048;
    width: 26rem;
    height: 15rem;
    border-radius: 17px;
    margin-left: 1%;
    cursor: pointer;
}

.carrinho img {
    display: flex;
    width: 15.2rem;
    margin-top: -1.5rem;
    margin-left: 11rem;
}

.carrinho h1 {
    margin-left: 1.5rem;
    margin-top: 2.5rem;
    font-size: 35px;
    color: white;
}

.carrinho p {
    background-color: #9eb53e;
    width: 10rem;
    height: 2.8rem;
    margin-top: -5.7rem;
    margin-left: 1.2rem;
    border-radius: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 18px;
}

.carrinho:hover {
    transition-duration: 0.3s;
    transform: scale(1.02, 1.02);
}

.categorias {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 10vh;
    margin-top: 3rem;
    justify-content: center;
    column-gap: 5rem;
    align-items: flex-end;
}

.categorias ul {
    border-radius: 10px;
    width: 12rem;
    height: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    cursor: pointer;
}

.bebidas {
    margin-top: -2.4rem;
}

.remedios {
    margin-top: -1.89rem;
}

.pet {
    margin-top: -1.3rem;
}

.categorias ul:hover {
    transition-duration: 0.3s;
    transform: scale(1.02, 1.02);
}

.fundo1 {
    background-color: #f6d553;
}

.fundo2 {
    background-color: #f9879c;
}

.fundo3 {
    background-color: #8c60c5;
}

.categorias li {
    font-size: 18px;
    margin-top: 0.5rem;
    list-style: none;
}

.classificados h1 {
    padding-top: 9rem;
    font-size: 28px;
}

.box {
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 10rem;
    width: 100%;
    height: 5vh;
    column-gap: 1.5rem;
}

.box ul:hover {
    border: 0.1px solid rgb(202, 202, 202);
    cursor: pointer;
}

.box ul {
    background-color: #ffffff;
    border-radius: 10px;
    width: 17rem;
    height: 9rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    border: 0.1px solid rgb(230, 229, 229);
    margin-top: -7rem;
}

.box img {
    border-radius: 50%;
    width: 3.8rem;
    margin-left: 1.5rem;
}

.box h1 {
    font-size: 15.5px;
    margin-top: -10.5rem;
    margin-left: 0.8rem;
    width: 100%;
}

.box p {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
    margin-left: -100%;
    color: #8b8a8b;
}

.promocoes {
    padding-top: 3rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
    column-gap: 1rem;
    width: 100%;
    cursor: pointer;
}

.promocoes img {
    width: 27rem;
}

.top-merket h1 {
    margin-top: -5rem;
    font-size: 28px;
}

.top-merket {
    display: flex;
    padding-top: 15rem;
    column-gap: 1rem;
    margin-left: 0rem;
    cursor: pointer;
}

.top-merket ul {
    background-color: #ffffff;
    border-radius: 10px;
    width: 17rem;
    height: 9rem;
    display: flex;
    align-items: center;
    border: 0.1px solid rgb(230, 229, 229);
}

.top-merket img {
    border-radius: 50%;
    width: 3.8rem;
    margin-left: 1.5rem;
}

.top-merket p {
    margin-left: 1rem;
}

.top-merket ul:hover {
    border: 0.1px solid rgb(202, 202, 202);
}

.saiba-mais {
    display: flex;
    padding-top: 10rem;
    justify-content: center;
    column-gap: 10rem;
}

.saiba-mais div {
    display: flex;
    margin-right: 7rem;
}

.saiba-mais img {
    width: 14rem;
}

.saiba-mais h1 {
    display: flex;
    margin-top: -5rem;
    margin-left: 2rem;
    width: 10em;
    font-size: 35px;
}

.saiba-mais p {
    display: flex;
    margin-top: 5rem;
    margin-left: -22rem;
    width: 16rem;
    font-size: 19px;
}

.saiba-mais li {
    list-style: none;
    width: 8rem;
    height: 3.5rem;
    margin-top: 10rem;
    margin-left: -16rem;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

.saiba-mais2 {
    display: flex;
    justify-content: center;
    padding-top: 10rem;
}

.saiba-mais2 div {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.saiba-mais2 li {
    list-style: none;
    width: 8rem;
    height: 3.5rem;
    background-color: red;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    border-radius: 8px;
    cursor: pointer;
}

.saiba-mais2 img {
    width: 55rem;
    margin-left: 20rem;
    margin-top: -18rem;
}

.promo {
    display: flex;
    justify-content: center;
    padding-top: 5rem;
}

.promo img {
    width: 90rem;
}

hr {
    margin-top: 7rem;
}

.rodape {
    display: flex;
    align-items: center;
    color: #8b8a8b;
    font-size: 14px;
    padding-top: 1rem;
}

.rodape ul img {
    width: 4rem;
    height: 4rem;
}

.rodape ul {
    display: flex;
    flex-direction: row;
    margin-left: 1rem;
}

.rodape ul p {
    margin-left: 2rem;
}

.dicas {
    list-style: none;
    font-size: 18px;
    display: flex;
    column-gap: 4rem;
    cursor: pointer;
    width: 80rem;
}

.cria-conta a {
    text-decoration: none;
    color: red;
}

.popup {
    background-color: white;
    width: 22rem;
    height: 8rem;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    box-shadow: 1px 1px 10px rgb(194, 192, 192);
    column-gap: 3rem;
    margin-top: 2rem;
    margin-left: 61.5rem;
    position: absolute;
}

.popup div {
    margin-top: 1rem;
}

.popup img {
    width: 4.5rem;
}

.popup h1 {
    font-size: 18px;
    color: #353535;
}

.popup p {
    color: #808080;
    margin-top: 0.5rem;
}

.popup li {
    list-style: none;
    margin-top: 0.5rem;
    color: red;
    font-size: 17px;
}

.feche button {
    font-size: 20px;
    color: red;
    margin-top: -0.5rem;
    border: none;
    cursor: pointer;
}

.texto a {
    text-decoration: none;
    color: red;
}

@media screen and (max-width: 930px) {
    body {
        width: 100%;
    }

    .menu {
        display: none;
    }

    .logo {
        width: 20rem;
    }

    .cria-conta {
        width: 13rem;
    }

    .conteudo {
        display: flex;
        justify-content: center;
    }

    .hamburguer {
        height: 13.5rem;
    }

    .hamburguer img {
        width: 13.1rem;
    }

    .carrinho {
        height: 13.5rem;
    }

    .carrinho img {
        width: 13.1rem;
    }

    .box {
        width: 100%;
        height: 3vh;
        column-gap: 0.5rem;
        display: flex;
        justify-content: center;
    }

    .box ul {
        width: 10rem;
        height: 5rem;
    }

    .box img {
        width: 2rem;
        margin-left: 0.7rem;
    }

    .box p {
        margin-top: 2rem;
    }

    .out h1 {
        width: 5rem;
    }

    .out p {
        margin-left: -5rem;
        margin-top: 2rem;
    }

    .promocoes img {
        width: 16rem;
    }

    .top-merket {
        display: flex;
        justify-content: center;
        column-gap: 0.5rem;
    }

    .top-merket ul {
        width: 10rem;
        height: 5rem;
        display: flex;
    }

    .top-merket img {
        width: 2rem;
        margin-left: 0.7rem;
    }

    .top-merket p {
        margin-left: 0.3rem;
    }

    .saiba-mais {
        display: flex;
        flex-direction: column;
        padding-left: 5rem;
        row-gap: 12rem;
    }

    .saiba-mais2 img {
        width: 33rem;
    }

    .promo {
        background-image: url(/imgs/promos/promo-mobile.jpg);
        height: 28vh;
        margin-top: 5rem;
    }

    .promo img {
        display: none;
    }

    .rodape {
        display: flex;
        flex-direction: column;
        height: 25vh;
    }

    .rodape img {
        margin-right: 5rem;
    }

    .dicas {
        margin-top: 3rem;
        margin-right: -1rem;
        width: 100%;
    }

    .popup {
        margin-left: 0;
        width: 100%;
        position: relative;
        display: flex;
        justify-content: flex-start;
        column-gap: 0.5rem;
    }

    .popup div {
        margin-left: 3rem;
    }

    .feche button {
        margin-left: 27rem;
    }
}

@media screen and (max-width: 540px) {

    body {
        margin: 0;
    }

    .container {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }

    .cabecalho {
        width: 100%;
    }

    .cabecalho img {
        width: 5rem;
        margin-left: 1.5rem;
    }

    .cria-conta li {
        display: none;
    }

    .cria-conta p {
        margin-right: 1.5rem;
        height: 2.5rem;
    }

    .popup {
        width: 100%;
    }

    .cupom img {
        width: 4rem;
        margin-left: -2.5rem;
        margin-top: -0.5rem;
    }

    .texto h1,
    p,
    li {
        width: 10rem;
        margin-left: -2rem;
        margin-top: 0rem;
    }

    .feche button {
        margin-left: 2rem;
    }

    .banner {
        display: flex;
        justify-content: center;
        font-size: 11px;
        margin: 0rem;
    }

    .banner p {
        font-size: 13px;
        width: 13rem;
        display: flex;
        justify-content: center;
        margin-left: 0rem;
    }

    .pesquisa {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 10rem;
        width: 100%;
    }

    .pesquisa input {
        width: 20rem;
        display: flex;
        justify-content: center;
    }

    .pesquisa ul {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 3rem;
        width: 22.2rem;
        margin-top: 2rem;
        margin-left: 0.4rem;
    }

    .pesquisa ul li {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0;
    }

    .hamburguer {
        width: 10rem;
        height: 11rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 1rem;
    }

    .opcoes {
        margin-top: 3rem;
    }

    .carrinho {
        width: 10rem;
        height: 11rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        row-gap: 1.5rem;
    }

    .hamburguer img {
        width: 7rem;
        margin-left: 0rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .hamburguer h1 {
        margin-top: 1rem;
        font-size: 20px;
        display: flex;
        justify-content: center;
        margin-left: 0rem;
    }

    .hamburguer p {
        margin-top: -1rem;
        margin-left: 0rem;
        ;
        width: 8rem;
        font-size: 14px;
    }

    .carrinho img {
        width: 7rem;
        margin-left: 0rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .carrinho h1 {
        margin-top: 1rem;
        font-size: 20px;
        display: flex;
        justify-content: center;
        margin-left: 0rem;
    }

    .carrinho p {
        margin-top: -1.5rem;
        margin-left: 0rem;
        ;
        width: 8rem;
        font-size: 14px;
    }

    .categorias {
        width: 100%;
        column-gap: 1rem;
        align-items: center;
    }

    .categorias img {
        width: 4rem;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .categorias ul {
        width: 6rem;
        height: 2rem;
    }

    .fundo1 img {
        margin-top: -0.75rem;
    }

    .fundo1 li {
        display: flex;
        justify-content: center;
        margin-left: 0;
        font-size: 15px;
    }

    .fundo2 img {
        margin-top: -1.45rem;
    }

    .fundo2 li {
        display: flex;
        justify-content: center;
        margin-left: 0;
        font-size: 15px;
    }

    .fundo3 img {
        margin-top: -0.3rem;
    }

    .fundo3 li {
        display: flex;
        justify-content: center;
        margin-left: 0;
        font-size: 15px;
    }

    .classificados h1 {
        font-size: 20px;
        margin-left: 1rem;
    }

    .classificados {
        display: none;
    }


    .promocoes {
        display: flex;
        width: 100%;
        flex-direction: column;

    }

    .promocoes img {
        display: flex;
        justify-content: center;
        margin-left: 3.5rem;
    }

    .top-merket {
        display: flex;
        flex-direction: column;
        row-gap: 1rem;
        justify-content: center;
    }

    .top-merket h1 {
        font-size: 20px;
        margin-left: 1rem;
    }

    .saiba-mais {
        width: 18.5rem;
        display: flex;
        flex-direction: column;
        row-gap: 5rem;
    }

    .saiba-mais div {
        display: flex;
        flex-direction: row;
    }

    .saiba-mais img {
        width: 10rem;
        margin-left: -4rem;
    }

    .saiba-mais h1 {
        font-size: 18px;
        margin-top: 0;
        margin-left: 0.5rem;
    }

    .saiba-mais p {
        font-size: 13px;
        margin-left: -11rem
    }

    .saiba-mais li {
        height: 2.3rem;
        width: 6rem;
        font-size: 14px;
        margin-left: -23rem;
    }

    .saiba-mais2 {
        display: flex;
        flex-direction: column;
        width: 100%;
        justify-content: center;
        align-items: center;
    }

    .saiba-mais2 h1 {
        font-size: 18px;
        display: flex;
        margin-left: 7rem;
    }

    .saiba-mais2 p {
        margin: 0;
        justify-content: center;
        align-items: center;
        margin-left: 7rem;
    }

    .saiba-mais2 li {
        margin: 0;
        justify-content: center;
        margin-left: 6.8rem;
    }

    .saiba-mais2 img {
        width: 23.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0rem;
    }

    .promo {
        display: none;
    }

    .rodape ul {
        display: flex;
        flex-direction: column;
    }

    .rodape img {
        margin-right: 17rem;
    }

    .rodape p {
        padding-left: 5rem;
        width: 15rem;
        margin-top: -4rem;
    }

    .rodape li {
        display: flex;
        justify-content: center;
        margin-left: 2rem;
        width: 15rem;
    }
}


@media screen and (max-width: 280px) {

    .banner h1 {
        font-size: 18px;
    }

    .banner p {
        font-size: 13px;
        display: flex;
        justify-content: center;
        margin: 0;
    }

    .pesquisa input {
        width: 14rem;
        margin-left: -1.5rem;
    }

    .pesquisa ul {
        width: 15rem;
        display: flex;
        justify-content: center;
        margin-left: 1rem;
    }

    .pesquisa li {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

    .saiba-mais img {
        width: 6rem;
    }

    .saiba-mais p {
        font-size: 12px;
    }

    .saiba-mais2 img {
        width: 18rem;
    }

    .rodape ul img {
        margin-left: 2.5rem;
        width: 2.5rem;
        height: 2.5rem;
    }

    .rodape ul p {
        width: 11.5rem;
    }

    .categorias {
        column-gap: 0.2rem;
        border-radius: 2px;
    }
}

@media screen and (max-width: 840px) {

    body {
        margin: 0;
    }

    .container {
        display: flex;
        flex-direction: column;
        overflow-x: hidden;
    }

    .popup p, a {
        width: 10rem;
        margin-left: 0;
    }

    .texto li {
        margin-left: 0rem;
    }

    .feche button {
        margin-left: 22rem;
    }

    .classificados h1 {
        display: flex;
        margin-left: 0.25rem;
    }

    .promocoes img {
        width: 15.5rem;
    }

    .saiba-mais2 img {
        width: 28.5rem;
    }

    .saiba-mais2 h1, p, li {
        margin-left: 2.5rem;
    } 

    .pesquisa li {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
    }

}