body {
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
    width: 100%;
}
main {
    width: 80vw;
    margin: 2% auto;
}

a {
    color: #fff;
    text-decoration: none;
}

a:checked {
    color: #fff;
}

#banner {
    display: flex;
    align-items: center;
    position: relative;

}

#banner_img {
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: smooth;
    z-index: -1;
}

.banner_img {
    width: 80vw;
    z-index: -1;
}

#banner>img {
    max-width: 80vw;

}


.bi-chevron-left {
    border-radius: 0 50% 50% 0;
    margin-right: -16px;
}

.bi-chevron-right {
    border-radius: 50% 0 0 50%;
    
    margin-left: -16px;
}
.bi img{
    width: 15px;
}
.seta {
    
    z-index: 10;
    background-color: #b1a6a6;
    filter: invert(1);
    height: 25px;
    align-items: center;
    display: flex;

}

.seta:hover {
    filter: brightness(1.2);
    cursor: pointer;

}

.seta_products {
    margin-top: 70px;
    zoom: normal;
}


.containerProducts {
    display: flex;
    margin-top: 3;
}

#products_img {
    display: flex;
    overflow-x: hidden;
    overflow-y: hidden;
    scroll-behavior: smooth;
}

.containerNovos {
    width: 170px;
    height: fit-content;
    margin-bottom: 5%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
}
.novosProdutos{
    margin: 0 3%;

}
.containerProc{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    zoom: .7;
    margin: 2% 0;
}
.containerNovos:hover{
    cursor: pointer;
}

.containerProc .containerNovos:not(:first-child){
    margin-top: 0;
}
.containerNovos>img {
    width: 150px; 
    height: 60%;
    opacity: .9;
}
.containerNovos>img:hover{
    opacity: 1;
}
.avaliacao {
    display: flex;
    width: 170px;

}

.avaliacao>img {
    width: 73px;
}

.avaliacao>span {
    font-size: .8rem;
}

.descricao {
    margin-top: 5%;
    justify-content: center;
    display: flex;
    font-size: .9rem;
    align-items: center;

}

figcaption {
    display: flex;
    flex-direction: column;

}

.precoAntigo {
    margin: 2% 0;
    text-decoration: line-through;
}

.precoAtual {
    font-size: 1.2rem;
}

#container {
    display: flex;


}

.capa_products {
    width: 170px;
    height: 270px;
    margin-bottom: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.capa_products>img {
    height: 233px;
}

.destaque {
    position: relative;
    z-index: 10;
    bottom: 130px;
    height: 120px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.destaque a {
    font-weight: 100;
    font-size: .6rem;
}

#marcas {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

#marcaZip{display: flex;justify-content: center;margin-top: 1;}
#marcaZip img{max-width: 50%;/* margin-bottom: 5%; */}
#marcas li {
    list-style: none;
}

#marcas img {
    width: 80px;
}

.details {
    display: flex;
    flex-wrap: wrap;
}

.details_div {
display: flex;
flex-wrap: wrap;
text-align: center;
margin: 2%;
padding-left: 3%;
justify-content: space-evenly;
}

.details_div picture {
    zoom: .9;
    margin: 0 1%;
    width: 150px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 2%;
}
.details_div figure {
    zoom: .9;
    margin: 0 1%;
    width: 150px;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 2%;
}

.details_img {
    width: 150px;
}

.details_p {
    margin: 5% 0;
    font-weight: 500;
    font-size: small;
}

data {
    color: #b1a6a6;
    font-size: .8rem;
}

#citacao {
    background-color: #F5F7FF;
    padding: 5% 10%;
    height: fit-content;
}

#citacao p {

width: 271px;
justify-content: end;
}
#citacao_p{
    display: flex;
    justify-content: center;
    height: 300px;
}
.citacao_div{
   
    width: 100%;
    height: 5;
    transition: all 2s ease-in-out;
}

.citacao_div:not(:first-child){
    display: none;
}
#btnComentar:hover{
    cursor: pointer;
}


blockquote {
    display: flex;
    align-items: start;
    margin-top: 5%;
    justify-content: center;
}

blockquote span {
    margin-right: 2%;
    margin-top: -35px;
    font-size: 5rem;
}

#citacao button {
    background-color: transparent;
    border-radius: 20px;
    width: 30%;
    height: fit-content;
    color: #0156ff;
    border: #0156ff solid 2px;
}

#citacao button a {
    color: #0156ff;
    font-weight: bold;
}

#footer_citacao {
    display: flex;
    margin: 3% 0;
    justify-content: space-between;
    
}

#footer_citacao ul {
    display: flex;
    justify-content: space-around;
}

#footer_citacao li {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background-color: #978d8d;
    list-style-type: none;
    margin: 1%;
}

#footer_citacao li:hover {
    border: 1px solid blue;
}

#footer_citacao li:nth-child(1) {
    background-color: blue;
}

.name_citacao {
    display: flex;
    height: fit-content;
}

#container_beneficios {
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding-bottom: 5%;
}

#container_beneficios div {
    width: 20%;
}
button[name=products]{
    display: none;

}

@media screen and (max-width: 890px) {
.containerProc{
    justify-content: center;
    gap: 30px;
}
.details_div figure:not(:nth-child(1)):not(:nth-child(2)):not(:nth-child(3)){
    display: none;
}

@media screen and (max-width: 720px) {
    
    main{
        width: 98vw;
    }
    .seta_products{
        zoom: 2;
        z-index: 100;
        position: relative;
    }
     #products_img{
        margin: 0 10%;
        gap: 5%;
    }
    button[name=products]{
        display: block;
    }
    .btnVerMais{
        display: flex;
        align-items: center;
        justify-content: end;
        order: 10;
        height: fit-content;
    }
    .containerProc picture:first-child{
        zoom: 5;
    }
    .containerProc picture:not(:nth-child(1)):not(:nth-child(3)) {
        display: none;
    }
    .containerProc{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 15% 0;
        padding: 5px ;
    }
   
    
    
    .capa_products {
        margin: 0;
        height: 130px;
    }
    .capa_products>img {
        height: 125px;
        width: 228%;
        opacity: .9;
    }
    .destaque {
        justify-content: space-around;
        bottom: 100px;
    }
    #marcas{
        border: #978d8d double 3px;
        box-shadow: #978d8d 1px 1px 1px 4px;
    }
    #details{ 
        justify-content: center;
    }
    #details h2{
        margin: 10% 0;
    }
    .details_div{
        justify-content: center;
    }
    .details_div picture:not(:first-child){
        display: none;
    }
    .details_div picture{
        width: 100%;
        height: fit-content;
        align-items: center;
        justify-content: start;
    }
    .details_p{
        width: 100%;
    }
    .details_div figure:not(:nth-child(1)):not(:nth-child(3)){
        display: none;
    }
    #citacao button{
        font-size: .5rem;
    }

    #container_beneficios{
        flex-direction: column;
        align-items: center;
    }

    #container_beneficios div{
        width: 100%;
    }
}
}

@media screen and (max-width: 400px) {
    #citacao p{
        margin-top: 15%;
       zoom: .8;
    }
}

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

#novosProdutos{
    display: flex;
    flex-direction: column;
    align-items: center;
}
#novosProdutos h2{
    width: 100%;
    text-align: start;
}
}