@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
* {
  font-family: "Roboto", sans-serif;
}

html {
  scroll-behavior: smooth;
}

/* LINKS */
a,
a:active,
a:hover {
  color: unset !important;
}

a:hover {
  text-decoration: none !important;
}

.medium {
  font-weight: 500;
}
.black {
  font-weight: 900;
}
h1 {
  font-size: clamp(22px, 3vw, 36px);
}
h2{
  font-size:clamp(20px, 3vw, 28px);
}
h5 {
  font-size: clamp(16px, 3vw, 20px);
}
h6 {
  font-size: clamp(15px, 3vw, 19px);
}
p {
  font-size: clamp(14px, 3vw, 18px);
}
.header {
  background-color: #000;
}
.header img {
  width: 10%;
}

.tarja {
  background-color: #61ce70;
}
.amarelo {
  color: #f9b133;
}
.preto {
  color: black;
}
.cinza {
  color: #555;
}
.vermelho {
  color: red;
}
.botoes {
  background: #61ce70 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 0px #46b555;
  border-radius: 5px;
  color: white;
  text-shadow: 0px 3px 6px #00000033;
  font-size: clamp(20px, 3vw, 25px);
  font-weight: bold;
  padding: 10px 39px 10px 33px;
}
.botoes:hover {
  color: white;
  background: #46b555 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 0px #61ce70;
}
.preco {
  font-size: 36px;
}
.selos {
  width: 55%;
}
.beneficios{
  background-color: #FFE9AF;
}
mark{
  background-color: #F9B133;
  color:white;
  padding: 0.2em 0.7em;
}
.entrega{
  background-color: #000;
}
.entrega img{
  width: 65%;
}
.amostras{
  width: 50%;
}
.footer{
  background-color: #333;
    color: #fff;
}
.footer p{
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
}
.site-seguro{
  width: 63%;
}
.whatsapp{
  width: 55%;
}
.dourado{
  color: #B9A171;
}
@media (max-width: 767px) {
  .header img {
    width: 32%;
  }
  .botoes {
    width: 100%;
    padding: 10px 34px 10px 33px;
  }
  .selos {
    width: 88%;
  }
  .entrega img{
    width: 85%;
  }
}