@charset "UTF-8";


/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
    display: none; 
}

html {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}


/*Estilo tela Tablet*/
@media screen and (min-width: 768px) and (max-width:991px) {

    body {
        min-width: 768px;
        max-width: 100%;
    }

    header {
        min-height: 100px;

    }

    header picture img { 
        max-width: 120px;
    }

    #menuToggle {
        display: none;
    }


    header nav {
        display: flex;
        height: 100%;
        max-width: 80%;
        padding: 0px;
        z-index: 1000;  
    
    }

    header div#menu { 
        display: flex;
        position: relative;
        max-width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        padding: 0px;
        visibility: visible;
        transition: none;
        flex-grow: 1;
        flex-basis: content;  
    }

    header div#menu a {
        display: inline-block;
        border: none;
        padding: 10px;
        margin: auto;
        text-align: right;
        font-size: 1rem;
    }

    .container div#coluna-texto h2 {
        font-size: 2em;
        margin: 30px;
    }

    main div#marcas  {

        display: flex;
        max-width: 100%;
        padding: 30px;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        
    }

    #marcas .colunasmarcas{
        position: relative;
        height: 400px;
        max-height: 100%;
    }


    #marcasvendidas h3, #entrega h3, #pagamento h3, #contato h3{
        font-size: 2em;
    }

    main div#marcas h4 {
        font-size: 1.1rem;

    }

    main div#marcas p {
        display: flex;
        max-width: 150px;
        padding: 30px;
        justify-content: center;
    }

    section#pagamento {
        background-color: white;
    }

    section div#meiosdepagamento {
        margin: 50px;
        padding: 30px;
    }

    main section#entrega {
        padding: 5px;
        border: 5px solid var(--cor1);
        
    }  
    
    main section#entrega .entregaAguaEssencial {
        padding: 30px;        
    } 

    section#contato #entreEmContato #p-email {
        font-size: 1rem;
    }

}
/*-------------------------------Estilo tela Desktop--------------------------*/

@media screen and (min-width: 992px) {

    body {
        min-width: 992px;
        max-width: 100%;
    }

    header {
        min-height: 150px;
        justify-content: space-around;

    }

    header picture img { 
        max-width: 150px;
        
    }

    #menuToggle {
        display: none;
    }

    header nav {

        display: flex;
        width: 100%;
        height: 100%;
        max-width: 80%;
        padding: 2px;
        z-index: 1000;
        
    }
    
    header div#menu { 

        display: flex;
        position: relative;
        max-width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        right: 0;
        padding: 0px;
        visibility: visible;
        transition: none;
        text-align: end;
        justify-content: flex-end;
        
    }

    header div#menu a {
        display: inline-block;
        border: none;
        margin: 20px;
 
    }
        
    .container {
        display: flex;  
        padding: 0px;             
        background-color: #114ba2ed;
        flex-direction: column;
        columns: 2;
        
    }

    .container div.conteudo-container {
        display: flex;
        padding: 150px;
        justify-content: space-evenly;
    }
    .container::after{
        content:'';
        background-color: #114ba2ed;
        background: url(../imagens/gota-de-agua.webp);
        width:100%;
        height:100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: none;
        filter: brightness(100%);
    }

    main .container #coluna-texto {
        display: flex;
        color: white;
        flex-direction: column;
        width: 600px;
        max-width: 100%;
        justify-content: center;
    
    }

    main .container #coluna-texto h1 {
        display: block;
        text-align: left;
        font-weight: 600;
    }
    main .container #coluna-texto h2 {
        display: block;
        padding: 20px 10px 10px 0px;
        max-width: 100%;
        font-size: 1.3rem;
        font-weight: 400;
        font-style: italic;
        text-align: left;
    
    }

    main .container #coluna-texto h3 {
        display: none;
    }

    .container #coluna-texto .botaoContato {
        margin: 0;
    }
    

    main .container #coluna-imagem{
        display: flex;
        flex-direction: column;
        width: 600px;
        max-width: 100%;
        text-align: center;
        
    }

    main .container #coluna-imagem img {
        width: 300px;
        max-width: 400px;
    }



    #marcasvendidas h3, #entrega h3, #pagamento h3, #contato h3{
        font-size: 2.4rem;
    }

    main section#marcasvendidas {
        padding-top: 60px;
    }

    main div#marcas  {
        display: flex;
        flex-direction: row;
        padding: 10px;
        margin: 50px;
        justify-content: center;
        align-items: initial;
    }

    #marcas .colunasmarcas {

        padding: 20px;
        flex-direction: column;
        
    }

    main div#marcas p {
        display: flex;
        max-width: 150px;
        justify-content: center;

    }

    #marcas img {
        width: 150px;
        max-width: 100%;
    }

    main section#entrega {
        padding: 5px;
        border: 5px solid var(--cor1);       
    } 

    section#entrega .entregaAguaEssencial{
        padding: 60px;
    } 

    section div#meiosdepagamento {
        margin: 50px;
        padding: 30px;
    }


    main section#contato {
        flex-direction: row;
        margin: 50px;
        padding: 100px 50px;
        justify-content: space-evenly;
    }

    section#contato #entreEmContato {
        padding: 30px;
    }

    section#contato #entreEmContato h3 {
        padding: 0px;
        text-align: left;
    }

    section#contato #entreEmContato p {
        text-align: left;
    }

    section#contato #entreEmContato #p-email {
        font-size: 1rem;
    }

    section#contato aside {
        width: 40%;
        margin: 0px;
        padding: 30px;
    }

}