style.css

:root{
  --green: #56B280;
  --black: #272727;
  --white: #ffffff;
  --dark-1: rgba(94, 110, 137, 1);
}
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&family=Roboto:wght@400;500&display=swap');
*{
  transition: all .3s ease-in;
  scroll-behavior: smooth;
}
p,a,span, label{
  font: 500 16px/28px "Roboto", Helvetica, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6, blockquote, figcaption {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-weight: 500;
}
.container{
  max-width: 1111px;
  margin: 0 auto;
}
.btn{
  cursor: pointer;
  color: var(--white);
  background-color: var(--green);
  border-radius: 4px;
  font-size: 21px;
  line-height: 1.17em;
  padding: 8px 0;
}
.mobile_only{
  display: none;
}
.clear{
  clear: both;
}

/* HEADER SECTION */
header{
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 10;
  background: var(--white);
  border-bottom: .5px solid rgba(86, 178, 128, 0.2);
}
.topbar .material-icons-outlined{
  font-size: 25px;
}
.topbar {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar h1{
  line-height: 0;
}
.menu-hamburger{
  display: none;
  width: 32px;
  height: 17px;
}
.menu-hamburger span{
  display: block;
  width: 100%;
  height: 3px;
  background-color: var(--black);
}
nav ul{
  display: flex;
  justify-content: center;
  align-items: center;
}
nav li{
  width: 130px;
  margin: 0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
nav li:first-child a::before{
  content: "⌄";
  position: absolute;
  left: 500px;
  top: 20px;
  font-size: 20px;
}
nav li a{
  display: block;
  width: 100%;
  text-align: center;
  position: relative;
}
nav li:first-child a::before{
  content: "⌄";
  position: absolute;
  left: 110px;
  top: -8px;
  font-size: 20px;
}

/* MAIN SECTION */
/* Top Banner */

.top_banner{
  height: 780px;
  background: url(../img/bg-image.jpg) no-repeat center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}
.top_banner .box{
  width: 730px;
  height: 349px;
  margin-top: 84px;
  background-color: rgba(247, 248, 250, 0.8);
  backdrop-filter: blur(24px); /* Não é aceito no firefox */
  border-radius: 2px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.top_banner .box h1{
  font-size: 40px;
  line-height: 1.44em;
}
.top_banner .box h2{
  display: block;
  max-width: 537px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.42em;
}
.top_banner button{
  width: 310px;
  margin-top: 53px;
}

/* PRODUCTS */
.main_product_title{
  font-size: 40px;
  line-height: 1.44em;
  letter-spacing: -.9px;
  text-align: center;
  margin-top: 90px;
}
.sub_product_title{
  font-size: 18px;
  line-height: 1.53em;
  letter-spacing: 1.1px;
  color: var(--dark-1);
  text-align: center;
  margin-bottom: 50px;
}
.prateleira{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.prateleira button{
  width: 173px;
  margin: 54px auto;
}
.produto{
  width: 255px;
  margin-bottom: 30px;
  background-color: #F7F8FA;
  border-radius: 4px;
  box-shadow: 0 4px 24px 0 rgba(123, 123, 123, 0.15);
}
.produto:hover{
  transform:translate(0, -20px) ;
}
.produto .img_produto{
  width: 100%;
  height: 154px;
}
.produto .img_produto1{
  background: url(../img/prod1.png);
}
.produto .img_produto2{
  background: url(../img/prod3.png);
}
.produto .img_produto3{
  background: url(../img/prod5.png);
}
.produto .img_produto4{
  background: url(../img/prod7.png);
}
.produto .img_produto5{
  background: url(../img/prod2.png);
}
.produto .img_produto6{
  background: url(../img/prod4.png);
}
.produto .img_produto7{
  background: url(../img/prod6.png);
}
.produto .img_produto8{
  background: url(../img/prod8.png);
}
.produto h3{
  font-size: 16px;
  line-height: 1.44em;
  letter-spacing: -.9px;
}
.produto p{
  text-align: right;
  font-size: 20px;
  line-height: 1.44em;
  letter-spacing: -.9px;
  color: var(--green);
}
.produto div{
  padding: 10px 26px 16px;
  background-color: var(--white);
}
.products-mobile{
  display: none;
} 

/* LEARN MORE */
.learn-more{
  background-color: rgba(247, 248, 250, 1);
  padding: 130px 0;
}
.learn-more .container div{
  width: 50%;
}
.learn-more ul{
  margin-top: 40px;
}
.learn-more h2{
  display: block;
  width: 350px;
  font-size: 40px;
  line-height: 1.44em;
  letter-spacing: -.9px;
}
.learn-more h4{
  font-size: 16px;
  line-height: 1.44em;
  color: var(--green);
}
.learn-more ul li{
  list-style-image: url(../img/Group.png);
  list-style-position: inside;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.8em;
  margin-bottom: 10px;
}
.learn-more ul li span{
  font-weight: 500;
}
.learn-more .container{
  position: relative;
}
.learn-more figure{
  position: absolute;
  right: 0;
  top: 0;
}
.learn-more button{
  width: 194px;
  margin-top: 68px;
}

/* TESTIMONIALS */
.testimonials{
  overflow: hidden;
  background-color: rgba(86, 178, 128, 0.1);
}
.people-stars-row{
  width: 1111px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 89px;
}
.people-stars-row .people-stars{
  background-color: var(--white);
  width: 350px;
  box-shadow: 0px 4px 24px rgba(139, 167, 178, 0.16);
  border-radius: 6px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 33px;
}
.people-stars blockquote{
  display: block;
  font-size: 22px;
  line-height: 28.8px;
  font-weight: 500;
  max-width: 304px;
  margin-top: 22px;
}
.people-stars cite{
  font-size: 18px;
  line-height: 20.7px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  margin-top: 6px;
  margin-bottom: 29px;
  color: rgba(124, 128, 135, 1);
}

/* POPULAR */
.popular .prateleira{
  margin-bottom: 40px;
}

/* FOOTER */
footer{
  background-color: var(--black);
  padding-top: 60px;
  position: relative;
  background-image: url(../img/codeblue32.png);
}
footer article.container{
  border-top: 1px solid var(--white);
  padding-top: 15px;
  display: flex;
}
footer figure{
  width: 50%;
}
footer .code{
  margin-top: 30px;
  width: 30%;
  opacity: .1;
  filter: grayscale(1);
}
footer figcaption{
  font-size: 16px;
  line-height: 22.8px;
  letter-spacing: -.5px;
  font-weight: 400;
  color: var(--white);
  display: block;
  width: 250px;
}
.menu-footer{
  margin-top: 43px;
  padding-bottom: 192px;
  width: 50%;
  display: flex;
  justify-content: space-around;
}
.menu-footer ul{
  width: 33%;
}
.menu-footer ul li{
  margin-bottom: 25px;
}
.menu-footer ul li:first-child{
  color: var(--green);
  font-family: "Poppins", Helvetica, Arial, sans-serif;
}
.menu-footer a{
  color: var(--white);
  font-family: "Poppins", Helvetica, Arial, sans-serif;
}
.bottonbar{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 77px;
  background-color: var(--white);
}
.bottonbar .container{
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.bottonbar .container h4{
  font-weight: 400;
}
.bottonbar .container h4:last-child{
  text-align: right;
}
.bottonbar .container h4 a:hover{
  color:var(--green);
}

/* PAGINA PRODUTO */
main.product{
  padding-bottom: 114px;
}
main.product article.container{
  display: flex;
  margin-top: 130px;
}
main.product figure, .add-to-cart{
  width: 48.75%;
}
main.product figure{
  margin-right: 2.5%;
}

main.product figure img{
  width: 100%;
}
main.product figure img:hover{
  filter: saturate(200%) contrast(110%);;
}
.add-to-cart h2, .add-to-cart h3, h2.mobile_only{
  font-size: 26px;
  line-height: 57.6px;
  letter-spacing: -.9px;
}
.add-to-cart h3{
  color: var(--green);  
}
.add-to-cart h4{
  font: 400 18px/25.6px "Roboto", Helvetica, Arial, sans-serif;
  letter-spacing: -.9px;
  text-align: center;
}
.add-to-cart input{
  width: 16px;
  height: 16px;
  margin-right: 20px;
}
main.product figcaption, main.product figure h3, main.product p.mobile_only, main.product h3.mobile_only{
  font-size: 20px;
  line-height: 25.6px;
  letter-spacing: -.9px;
  text-align: center;
  margin-top: 22px;
}
main.product figure h3{
  color: var(--green);
}
.left-column{
  width: 190px;
  float: left;
}
.left-column .quantity{
  width: 75px;
}
.counter{
  display: flex;
  justify-content: space-evenly;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.6px;
  letter-spacing: -.9px;
  height: 30px;
  border: 1px solid var(--green);
}
.counter p:first-child, .counter p:last-child{
  color: var(--green);
  cursor: pointer;
}
p.alert-negative, p.alert-out{
  display:none;
  font-size: 12px;
  color: #d00;
  line-height: 14px;
  margin-top: 5px;
}
main.product .right-column{
  width: 350px;
  float: left;
}
main.product .right-column div{
  margin-top: 15px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 4px;
  padding: 20px 10px 20px 20px ;
  border: 1px solid rgb(161, 161, 161, 0);
}
main.product .right-column div.active{
  border: 1px solid rgb(161, 161, 161);
}
main.product .right-column div p, main.product .right-column div p a{
  font: 400 14px/15.6px "Helvetica", Arial, sans-serif;
  color: #818181;
  margin-top: 10px;
}
main.product .right-column div p a{
  color: var(--green);
}
main.product .right-column label{
  font-weight: 400;
  line-height: 15.6px;
  letter-spacing: -.9px;
  width: 60%;
}
main.product .right-column select{
  width: 25%;
  float: right;
  border: 1px solid var(--black);
}
.add-to-cart > a{
  display: block;
  width: 350px;
  margin-top: 67px;
  margin-left: 190px;
  font-size: 20px;
  line-height: 23px;
  text-align: center;
}
.add-to-cart a span{
  font-size: 20px;
  line-height: 23px;
}
.add-to-cart .product-description{
  padding: 20px;
  border: 1px solid #e6e6e6;
  border-radius: 7px;
  margin-top: 40px;

}
.add-to-cart .product-description p{
  font-weight: 400;
  color: #818181;
}
.add-to-cart .product-description span{
  color: #1D252C;
}
/*POPUP*/
.popup{
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: #272727c2;
  justify-content: center;
  align-items: center;
  animation: popup .5s ease;
}
@keyframes popup {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.popup span{
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}
.popup article{
  position: relative;
  width: 70%;
  display: flex;
  justify-content: space-around;
  background-color: var(--white);
}
.popup span{
  position: absolute;
  top: 10px;
  right: 10px;
  color: var(--green);
}
.popup figure{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 100px 0;
}



/* PAGE DETAILS*/
main.p-details{
  position: relative;
  height: 100%;
}
main.p-details::before{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 50vw;
  height: 100%;
  background-color: rgba(242, 242, 242, 1);
}
main.p-details .container{
  display: flex;
}
.personal-info, .summary-product{
  width: 50%;
}
.personal-info{
  padding-right: 125px;
  padding-bottom: 110px;
}
.personal-info > div{
  margin: 20px 0;
}
.steps{
  width: 60%;
  display: flex;
  justify-content: space-between;
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 25.6px;
  letter-spacing: -.9px;
  color: rgba(97, 97, 97, 1);
  margin-bottom: 40px;
}
.steps li:first-child{
  color: var(--green);
}
.steps li.active{
color: var(--black);
}
main.p-details .contact div{
  display: flex;
  justify-content: space-between;
}
main.p-details .contact div h2, .shipping-address h2{
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -.9px;
}
main.p-details .contact div p, main.p-details .contact div a{
  font-size: 14px;
  line-height: 26px;
}
main.p-details .contact div a{
  color: var(--green);
}
main.p-details .contact input[type=checkbox], main.p-details input[type=checkbox]  {
  width: 16px;
  height: 16px;
  display: inline;
  margin-right: 7px;
}
main.p-details form label{
  font-size: 14px;
  line-height: 16px;
  font-family: Helvetica, Arial, sans-serif;
  vertical-align: text-top;
}
.shipping-address ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.shipping-address h2{
  margin-top: 40px;
  width: 100%;
}
main.p-details form input, main.p-details form select{
  border: .5px solid rgba(137, 137, 137, 1);
  padding: 7px 17px;
  font-size: 14px;
  line-height: 25.6px;
  margin-top: 12px;
}
.shipping-address .input-full{
  width: 100%;
}
.shipping-address .input-medium{
  width: 49%;
}
.shipping-address .input-small{
  width: 32%;
}
select#province, select#country{
  padding-top: 15px;
}
.shipping-address .box-province{
  position: relative;
  width: 32%;
}
.shipping-address .box-country{
  position: relative ;
  width: 100%;
} 
.shipping-address .box-province span{
  position: absolute;
  top: 15px;
  left: 22px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 11.5px;
  color: #818181;
}
.shipping-address .box-country span{
  position: absolute;
  top: 15px;
  left: 22px;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 10px;
  line-height: 11.5px;
  color: #818181;
}
.footer-details{
  display: flex;
  margin-top: 60px;
}
.footer-details p, .footer-details input[type=submit]{
  width: 50%;
}
.footer-details p{
  display: flex;
  align-items: center;
}
.footer-details p a{
  color: var(--green);
  text-decoration: underline;
  font-weight: 400;
  font-size: 18px;
  line-height: 25.6px;
  letter-spacing: -.9px;
}
main.p-details .summary-product{
  width: 410px;
  padding-top: 66px;
  margin-left: 65px;
  z-index: 1;
}
.summary-product .row-1{
  display: flex;
  margin-bottom: 50px;
}
.summary-product .row-1 img{
  background-color: rgba(247, 248, 250, 1);
  margin-right: 60px;
  
}
.summary-product .row-1 figure{
  position: relative;
}
.summary-product .row-1 figure::after{
  content: "1";
  top: -8px;
  right: 56px;
  width: 22px;
  height: 22px;
  font: 500 16px "Roboto", Helvetica, Arial, sans-serif;
  border-radius: 50%;
  background-color: var(--green);
  color: var(--white);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}
.summary-product .row-1 h2{
  font-size: 16px;
  line-height: 57.6px;
  letter-spacing: -.9px;
}
.summary-product .row-1 h3{
  font-size: 21px;
  line-height: 30px;
  letter-spacing: -.9px;
  color: var(--green);
}
.summary-product form{
  padding: 28px 0;
  border-top: 1px solid rgba(86, 178, 128, 0.2);
  border-bottom: 1px solid rgba(86, 178, 128, 0.2);
  display: flex;
  justify-content: space-between;
}
.summary-product form div{
  width: 65%;
}
.summary-product form input[type=text]{
  border: .5px solid #898989;
  background-color: var(--white);
}
.summary-product form input[type=submit]{
  width: 32%;
  max-height: 41.2px;
  background: #A8A8A8;
  border-radius: 4px;
  font: 400 17px/21px "Roboto", Helvetica, Arial, sans-serif;
  color: var(--white);
}
.summary-product .row-3 section:first-of-type{
  display: flex;
  flex-wrap: wrap;
  padding: 15px 0 33px;
  border-bottom: 1px solid rgba(86, 178, 128, 0.2);
}
.summary-product .row-3 p{
  width: 50%;
  font-size: 14px;
  line-height: 25.6px;
  letter-spacing: -.9px;
  color: rgba(97, 97, 97, 1);
}
.summary-product .row-3 p:nth-of-type(2){
  color: var(--black);
  margin-bottom: 12px;
}
.summary-product .row-3 p:nth-of-type(even){
  text-align: right;
}
.summary-product .row-3 section:last-of-type{
  display: flex;
  padding-top: 15px;
}
.summary-product .row-3 h2{
  width: 50%;
  text-align: right;
  font-size: 24px;
  line-height: 25.6px;
  letter-spacing: -.9px;
}
.animation-details-products{
  position: relative;
  animation-name: animation-details-products;
  animation-duration: 1.5s;
}
@keyframes animation-details-products {
  0%   {top: -100px; opacity: 0;}
  100% {top: 0px; opacity: 1;}
}
main.p-details .box-details-mobile{
  display: none;
}
/* Form validation */
main.p-details form label.error{
  font-family: "Roboto", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 24px;
  letter-spacing: -.9px;
  color: #900;
  display: block;
  position: relative;
  width: 100%;
  animation: alert-form 2s ease .2s infinite;
}
@keyframes alert-form {
  0%{left: 0;}
  50%{left: 2px;}
  100%{left: 0;}
}

/* CART */
main.cart .top{
  margin-top: 77px;
  padding: 60px 0;
}
main.cart .top h2{
  font-size: 26px;
  line-height: 57.6px;
  letter-spacing: -.9px;
  text-align: center;
}
main.cart .top a{
  display: block;
  width: 100%;
  color: var(--green);
  font-size: 18px;
  line-height: 25.6px;
  letter-spacing: -.9px;
  text-decoration: underline;
  text-align: center;
}
.cart-display .row-1, .cart-display .row-2, .cart-display .row-3{
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  padding: 20px 0;
  align-items: center;
}
.cart-display .row-1 h2{
  width: 50%;
  font-family: "Roboto", Helvetica,  Arial, sans-serif;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: -.9px;
}
.cart-display .row-1 h3, .row-2 p, .row-2 div{
  width: 16.6%;
  font-size: 16px;
  line-height: 25.6px;
  letter-spacing: -.9px;
}
.cart-display .row-1 h3:last-child, .row-2 > p:last-child{
  text-align: right;
}
.row-2 figure{
  display: flex;
  flex-wrap: wrap;
  width: 50%;
}
.row-2 figure img{
  background-color: #F7F8FA;
  margin-right: 20px;
}
.row-2 figure h2{
  font-size: 26px;
  line-height: 57.6px;
  letter-spacing: -.9px;
}
.row-2 figure span{
  text-decoration: underline;
  color: var(--green);
}
.row-2 .counter{
  width: 75px;
}
.row-2 .alert-negative, .row-2 .alert-out{
  width: 100%;
}
.row-3{
  justify-content: right;
}
.row-3 section > p{
  color: rgba(158, 158, 158, 1);
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: -0.9px;
  margin-top: 10px;
}
.row-3 div{
  display: flex;
  justify-content: right;
}
.row-3 div p{
  margin-left: 50px;
  font-size: 20px;
  line-height: 26px;
}
.row-3 a{
  width: 183px;
  text-align: center;
  margin-left: 70px;
  font-size: 20px;
  line-height: 24px;
}

/*****************/
/* MEDIA QUERIES */
/*****************/

@media screen and (max-width: 680px){
  .mobile_only{
    display: block;
  }
  /* HEADER SECTION */
  .container{
    margin: 0 15px;
  }
  .topbar {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .topbar h1{
    order: 2;
  }
  nav{
    order: 1;
    position: relative;
    z-index: 3;
  }
  .menu-hamburger{
    display: flex;
    flex-wrap: wrap;
  }
  .menu-hamburger span:nth-child(1).active{
    transform: rotate(45deg) translate(2px,4px);
  }
  .menu-hamburger span:nth-child(2).active{
    opacity: 0;
  }
  .menu-hamburger span:nth-child(3).active{
    transform: rotate(-45deg) translate(4px,-5px)
  }
  nav ul{
    flex-flow: column;
    align-items: flex-start;
    position: absolute;
    bottom: -30px;
    left: -15px;
    opacity: 0;
    width: 100vw;
    background-color: var(--white);