@charset "UTF-8";
/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

/* Header */
header {
  position: relative; 
  display: flex;
  justify-content: space-between;
  white-space: nowrap;
  border-bottom: solid 1px #B4AEAE;
  margin-top: 0;
  padding: 31px 39px 50px 31px;
  align-items: center;
  margin: 2%;
}

.menufunc {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5%;
}

.menu {
  display: flex;
  list-style: none;
  gap: 5%;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #4B5563;
}

.menu li a {
  color: #4B5563;
  text-decoration: none;
  display: flex;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
}

/* MAIN */
main {
  position: relative; 
}
main .hero__content {
  display: flex;
  margin-left: 5%;
}
main .img-principal {
  padding-top: 182px;
  width: 100%;
}

/* Botões */
.btn-header,
.btngreen,
.btnwhite {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  height: 62px;
  border-radius: 6px;
  cursor: pointer;
}

.btn-header {
  width: 189px;
  background-color: #21c05C;
  color: #fff;
  border: none;
  margin-left: 5%;
}

.btngreen {
  width: 189px;
  background-color: #21c05C;
  color: #fff;
  border: none;
  margin-right: 5%;
}

.btnwhite {
  width: 189px;
  height: 62px;
  background-color: #fff;
  color: #2563EB;
  border: 1px solid #2563EB;
}

h1 {
  margin-top: 10%;
  font-family: "Poppins", sans-serif;
  font-size: 3.7rem;
  font-weight: 700;
  line-height: 130%;
  color: #1F2937;
  gap: 10%;
}

h4 {
  font-family: "Inter", sans-serif;
  font-size: 1.3rem;
  font-weight: 400;
  color: #4B5563;
  width: 678px;
  height: 48px;
  margin: 40px 0px;
}

.imgrec {
  margin-bottom: 10%;
  margin-top: 0;
}

.comofunciona h2 {
  margin-left: 10%;
  font-size: 2.4rem;
  font-weight: 700;
  font-family: "Poppins", sans-serif;
  margin-bottom: 1%;
}
.comofunciona h3 {
  gap: 1rem;
  margin-left: 9%;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
}

/* Doadores e Adquirentes */
.caixas {
  margin-top: 9%;
  display: flex;
  gap: 1.5rem;
  margin-bottom: 11%;
  align-items: flex-start;
}

.doadores {
  width: 481px;
  height: 481px;
  border: 2px;
  border-radius: 8px;
  background-color: #F3F5F8;
  font-size: 1rem;
  color: #4B5563;
  font-weight: 400;
  margin-left: 8%;
}
.doadores .doadores-titulo {
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  color: #16A34A;
  display: flex;
  padding: 5%;
  align-items: center;
}
.doadores h2 {
  font-family: "Poppins", sans-serif;
  margin-left: 3%;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 5%;
  align-items: center;
  display: flex;
  white-space: nowrap;
}
.doadores h3 {
  font-weight: 700;
  font-style: bold;
  font-size: 1rem;
  color: #09090B;
  margin-left: 4%;
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.doadores p {
  margin-left: 11%;
  margin-bottom: 15%;
  font-family: "Poppins", sans-serif;
}

.adquirentes {
  width: 491px;
  height: 481px;
  border-radius: 8px;
  border: 2px;
  background-color: #F3F5F8;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  color: #4B5563;
}
.adquirentes .adquirentes-titulo {
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  color: #2563EB;
  display: flex;
  padding: 5%;
  align-items: center;
}
.adquirentes h2 {
  font-family: "Poppins", sans-serif;
  margin-left: 3%;
  font-size: 1rem;
  font-weight: 400;
  margin-bottom: 5%;
  align-items: center;
  display: flex;
  white-space: nowrap;
}
.adquirentes h3 {
  font-weight: 700;
  font-size: 1rem;
  color: #09090B;
  margin-left: 4%;
  font-family: "Poppins", sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.adquirentes p {
  margin-left: 11%;
  margin-bottom: 15%;
  font-family: "Poppins", sans-serif;
}

/* Parte 2 */
.parte2 {
  background-color: #F3F5F8;
  margin-left: 0;
  padding: 5%;
}

.produtos_disponiveis h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
  white-space: nowrap;
}
.produtos_disponiveis p {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.5rem;
  margin-left: 10%;
  color: #4B5563;
}

.cards {
  display: flex;
  gap: 5%;
  margin-top: 7%;
  justify-content: center;
}
.cards div {
  width: 30%;
  background-color: #FFF;
  border: 2px solid #21C05C;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cards div img {
  width: 100%;
  border-radius: 2%;
}
.cards div h4 {
  font-family: "Inter", sans-serif;
  font-size: 1.2rem;
  color: #09090B;
  text-align: center;
  margin: 0;
}
.cards div p {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: #4B5563;
  text-align: center;
  margin-left: 5%;
  margin-right: 5%;
}
.cards div .btn-queroadquirir {
  width: 150px;
  height: 37px;
  border-radius: 6px;
  border: 1px solid #21C05C;
  background-color: #16A34A;
  color: #FFF;
  margin-bottom: 5%;
  margin-top: 5%;
  cursor: pointer;
}

.comentarios h2 {
  margin-top: 5%;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
  margin-left: 3%;
  margin-bottom: 2%;
  font-size: 2.5rem;
}
.comentarios p {
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  font-weight: 400;
  margin-left: 35%;
}

.depoimentos {
  display: flex;
  background-color: #FFFFFF;
  margin-left: 3%;
  margin-top: 8%;
  gap: 5%;
}
.depoimentos p {
  width: 249px;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  margin: 19px 52px 10px;
}
.depoimentos .nome {
  display: flex;
  align-items: center;
  gap: 3%;
  margin-left: 4%;
  margin-top: 4%;
  margin-bottom: 1%; 
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
}
.depoimentos .nome .imgnome {
  width: 10%;
}
.depoimentos .imgestrela {
  margin-top: 28px;
  margin-left: 37px;
  width: 120px;
}
.depoimentos h5 {
  font-family: "Inter", sans-serif;
  font-size: 0.8rem;
  flex-direction: column;
}
.depoimentos .dpjs,
.depoimentos .dpms,
.depoimentos .dpac {
  width: 338px;
  height: 300px;
  border: 1px solid #9CA3AF;
  border-left: 4px solid #9CA3AF;
  border-radius: 8px;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
}

.diferenca {
  background-color: #F3F5F8;
}
.diferenca h2 {
  margin-top: 7%;
  font-family: "Poppins", sans-serif;
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 3%;
  white-space: nowrap;
  margin-left: 30%;
  padding-top: 8%;
}
.diferenca p {
  margin-left: 10%;
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  text-align: center;
}
.diferenca .btn-greenft {
  width: 189px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid #16A34A;
  background-color: #16A34A;
  color: #FFF;
  margin-left: 35%;
  margin-top: 5%;
  margin-bottom: 7%;
  margin-right: 5%;
  font-family: "Poppins", sans-serif;
  margin: 10 34 10 34;
  cursor: pointer;
}
.diferenca .btn-whiteft {
  width: 157px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid #16A34A;
  color: #16A34A;
  font-family: "Poppins", sans-serif;
  margin: 10 34 10 34;
  cursor: pointer;
}

.final {
  display: flex;
  background-color: #1F2937;
  width: auto;
  height: 345px;
  padding-top: 3%;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
}
.final .final > div {
  flex: 1;
  min-width: 200px;
}
.final .imagemrecfooter p {
  margin-top: 2%;
  margin-left: 2%;
}
.final p {
  width: 229px;
  height: 72px;
  margin-left: 2%;
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  color: #9CA3AF;
}
.final h2 {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0;
  margin-left: 0;
}
.final ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.final li {
  font-family: "Poppins", sans-serif;
  font-size: 1rem;
  color: #9CA3AF;
  cursor: pointer;
  gap: 7%;
}

footer {
  border-top: 1px solid #4B5563;
  background-color: #1F2937;
  padding: 3%;
  color: #9CA3AF;
  font-family: "Poppins", sans-serif;
  text-align: center;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

footer > * {
  flex: 0 1 auto;
  width: auto;
}

@media (max-width: 768px) {
  body {
    overflow-x: hidden;
    padding: 0 2%;
  }
  header {
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 2%;
    margin-left: 1%;
  }
  main {
    min-width: 300px;
    max-width: 1000px;
  }
  .menu {
    display: flex;
    align-items: center;
    gap: 3%;
  }
  main .hero__content {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    text-align: center;
  }
  .imgrec {
    display: flex;
    width: 100%;
  }
  .img-principal {
    width: 50%;
    padding-top: 2%;
  }
  h1 {
    font-size: 1.5rem;
    width: 100%;
    margin-top: 7%;
  }
  h4 {
    font-size: 1rem;
    width: 100%;
    margin-bottom: 10%;
  }
  .btn-greenft, .btn-header, .btn-whiteft, .btngreen, .btnwhite {
    flex-direction: row;
    gap: 2%;
    justify-content: center;
  }
  .btngreen, .btnwhite {
    margin: 0; 
  }
  .caixas {
    flex-direction: column;
    align-items: center;
    margin-left: 0;
    flex-direction: column;
  }
  .doadores,
  .adquirentes {
    width: 90%;
    height: auto;
    margin-left: 0;
  }
  .cards {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 30px;
    margin-top: 10%;
  }
  .cards div {
    width: 80%;
    max-width: 350px;
    margin: 0 auto;
  }
  .cards div img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
  .cards div p {
    margin: 10px 5%;
    font-size: 1rem;
  }
  .cards div h4 {
    font-size: 1.2rem;
    margin-top: 10px;
  }
  .cards div .btn-queroadquirir {
    width: 70%;
    max-width: 200px;
    margin-top: 15px;
    margin-bottom: 20px;
  }
  .depoimentos {
    flex-direction: column;
    align-items: center;
    height: auto;
  }
  .dpjs, .dpms, .dpac {
    width: 90%;
    height: auto;
  }
  .diferenca h2,
  .diferenca p {
    display: flex;
    font-size: 2rem;
    text-align: center;
    margin-left: 0;
  }
  .final {
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: auto;
  }
  footer {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 10px;
  }
  footer > * {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
  }
}/*# sourceMappingURL=style.css.map */