@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
  color: #435874;
  font-family: "Plus Jakarta Sans", sans-serif;
}

html,
body {
  overflow-x: hidden;
  width: 100%;
}

.title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 600;
  font-size: 40px;
  color: #5b0811;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .title {
    font-size: 30px;
  }
}
.title b,
.title span {
  color: #8a0f1b;
  font-weight: 600;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: #8a0f1b;
  border-radius: 5px;
  border: 2px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #5b0811;
}

::-webkit-scrollbar-corner {
  background: #fff;
}

img {
  display: block;
  max-width: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center;
     object-position: center;
}

p {
  font-size: 20px;
  line-height: 1.4;
}
@media (max-width: 900px) {
  p {
    font-size: 16px;
  }
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background: linear-gradient(180deg, #35f60f 0%, #1fa604 100%);
  color: #fff;
  font-weight: 600;
  border-radius: 50px;
  font-size: 24px;
  padding: 18px 16px;
  transition: all 0.3s ease;
  border-bottom: 6px solid #116800;
  text-align: center;
  text-transform: uppercase;
  width: 100%;
  max-width: 420px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  animation: pulse infinite alternate 0.8s;
}
.btn:hover {
  filter: brightness(90%);
  animation: pulse infinite alternate 0.5s;
}
.btn::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(../../assets/img/cart.svg) no-repeat center;
  transition: transform 0.3s ease;
}

.container {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
}

.pd {
  padding: 40px 0;
}
@media (min-width: 900px) {
  .pd {
    padding: 80px 0;
  }
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  flex-direction: column;
}

.aval {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.15);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 1.828px;
  color: #fff;
  margin-bottom: 16px;
  font-family: Montserrat, sans-serif;
  padding: 5px 28px;
  justify-content: start;
  align-items: center;
  align-self: flex-start;
  width: -moz-fit-content;
  width: fit-content;
}
@media (max-width: 900px) {
  .aval {
    font-size: 14px;
  }
}
@media (max-width: 900px) {
  .aval {
    padding: 4px 8px;
  }
  .aval img {
    max-width: 100px;
  }
}

header {
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
}
@media (max-width: 900px) {
  header {
    padding: 10px 0;
  }
}
header .container {
  display: flex;
  align-items: center;
  justify-content: space-between !important;
  padding: 5px;
}
header * {
  color: #435874;
}
@media (max-width: 900px) {
  header .logo {
    max-width: 160px;
    align-self: center;
    margin: 0 auto;
  }
}
header .contact-info {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 30px;
  border: 1px solid #5b0811;
  border-radius: 50px;
  margin-top: 5px;
  font-weight: 700;
  background-color: #fff;
  color: #5b0811;
  text-align: center;
}
@media (max-width: 900px) {
  header .contact-info {
    padding: 10px;
  }
}
header .contact-info:hover {
  transition: 0.3s ease-in-out;
  transform: scale(1.05);
}
header nav {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0;
  gap: 42px;
  box-sizing: border-box;
}
header nav img {
  display: inline-block;
}
header nav ul {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: 64px;
}
header nav ul li a {
  color: #5b0811;
  font-size: 18px;
}
header nav ul li a:hover {
  filter: brightness(75%);
}
@media (max-width: 900px) {
  header nav {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 80%;
    max-width: 320px;
    height: 100dvh;
    background: #8a0f1b;
    flex-direction: column;
    align-items: ce;
    justify-content: flex-start;
    padding: 100px 32px 40px;
    gap: 24px;
    transition: transform 0.3s ease;
    z-index: 100;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
    transform: translateX(100%);
  }
  header nav.open {
    display: flex;
    transform: translateX(0);
  }
  header nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-left: 0;
  }
  header nav ul li a {
    font-size: 18px;
    color: #fff;
  }
  header nav .contact-info {
    margin-top: 16px;
    color: #fff;
    border-color: #fff;
  }
}

main {
  background: url(../../assets/img/hero.png) no-repeat center;
  background-size: cover;
  overflow-x: hidden;
  padding-top: 148px;
  width: 100%;
}
@media (max-width: 900px) {
  main {
    padding-top: 60px;
    background-position: url(../img/hero-mobile.png) no-repeat;
    background-size: cover;
  }
}
main .container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: flex-end;
}
@media (max-width: 900px) {
  main .container {
    grid-template-columns: repeat(1, 1fr);
  }
}
main .content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 85px;
}
@media (max-width: 900px) {
  main .content {
    padding-bottom: 0;
  }
}
main .content h1 {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 700;
  line-height: 130%;
  color: #fff;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  main .content h1 {
    font-size: 36px;
  }
}
main .content h1 span {
  background: linear-gradient(270deg, #ffd37b 0%, #a4823d 27.4%, #ffd580 65.87%, #a4823d 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}
@media (max-width: 900px) {
  main .content h1 span {
    background-color: #ee9551;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
main .content p,
main .content p * {
  color: #fff;
  font-size: 18px;
}
main .content p {
  margin-bottom: 24px;
}
main .content p b {
  color: #d5a85c;
}
main .content .box-minibadge {
  display: flex;
  gap: 22px;
}
main .content .box-minibadge .mini-badge-text {
  margin-top: 25px;
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #d5a85c;
}
main .area-img {
  display: flex;
  justify-content: end;
  position: relative;
  top: -70px;
  margin-bottom: -70px;
}
@media (max-width: 900px) {
  main .area-img {
    top: 0;
    margin-bottom: 0;
  }
}
main .area-img .leafe-left {
  position: absolute;
  top: 130px;
  z-index: 0;
  left: -50px;
  animation: floatLeafe 4s ease-in-out infinite;
}
@media (max-width: 900px) {
  main .area-img .leafe-left {
    left: 10px;
    top: 30px;
  }
}
main .area-img .leave-left {
  position: absolute;
  bottom: 70px;
  z-index: 0;
  left: 30px;
  animation: floatLeave 4s ease-in-out infinite;
}
@media (max-width: 900px) {
  main .area-img .leave-left {
    left: 60px;
    bottom: 10px;
    max-width: 30%;
  }
}
main .area-img .product {
  position: relative;
  z-index: 10;
  width: 120%;
  max-width: none;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  main .area-img .product {
    animation: none;
  }
}
@media (max-width: 900px) {
  main .area-img .product {
    width: 100%;
  }
}
main .area-img .leave {
  position: absolute;
  bottom: 180px;
  z-index: 11;
  right: 20px;
  animation: floatLeave 4s ease-in-out infinite;
}
@media (max-width: 900px) {
  main .area-img .leave {
    right: 0;
    bottom: 0;
  }
}
main .area-img .leafe {
  position: absolute;
  top: 90px;
  z-index: 0;
  right: 90px;
  animation: floatLeafe 4s ease-in-out infinite;
}
@media (max-width: 900px) {
  main .area-img .leafe {
    right: 30px;
    top: 40px;
    max-width: 30%;
  }
}
main .area-img .gum {
  position: absolute;
  bottom: 40px;
  z-index: 11;
  right: 150px;
  animation: gumShine 4s ease-in-out infinite;
}
@media (max-width: 900px) {
  main .area-img .gum {
    right: 60px;
    bottom: 0;
    max-width: 25%;
    animation: none;
  }
}
main .area-img .shape {
  position: absolute;
  left: 90px;
  animation: floatShape 4s ease-in-out infinite;
}
@media (max-width: 900px) {
  main .area-img .shape {
    left: 0;
    bottom: 0;
  }
}
main .area-img .mini-benefits {
  position: absolute;
  z-index: 12;
  top: 70%;
  right: -150px;
  transform: translateY(-50%);
  width: 268px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 20px;
  border-radius: 10px;
  border-top: 10px solid #d5a85c;
  background: rgba(0, 0, 0, 0.26);
  backdrop-filter: blur(10px);
}
@media (max-width: 900px) {
  main .area-img .mini-benefits {
    display: none;
  }
}
main .area-img .mini-benefits li {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  line-height: 1.3;
}
main .area-img .mini-benefits li img {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  main .area-img .mini-benefits {
    position: static;
    transform: none;
    width: 100%;
    max-width: 360px;
    margin: 24px auto 0;
  }
}
main .area-img .mini-benefits :hover {
  filter: brightness(110%);
}

@keyframes floatLeave {
  0%, 100% {
    transform: translateX(0);
    filter: blur(0px);
  }
  50% {
    transform: translateX(-15px);
    filter: blur(1.5px);
  }
}
@keyframes floatLeafe {
  0%, 100% {
    transform: translateY(0);
    filter: blur(0px);
  }
  50% {
    transform: rotate(8deg);
    filter: blur(2.5px);
  }
}
@keyframes floatLeaveAbout {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
    filter: blur(3px);
  }
  50% {
    transform: translateY(-15px) rotate(5deg);
    filter: blur(2px);
  }
}
@keyframes pulse {
  to {
    transform: scale(1.03);
  }
}
@keyframes gumShine {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}
.faixa {
  border-top: 1px solid rgba(251, 248, 243, 0.5);
  background: #4d0d14;
  padding: 20px 64px;
}
.faixa .container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 900px) {
  .faixa .container {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
.faixa .container li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
}
@media (max-width: 900px) {
  .faixa .container li {
    flex-direction: column;
    text-align: center;
    font-size: 14px;
    padding: 0;
    border: none;
    color: #fff;
  }
}
.faixa .container li:nth-child(1) {
  border: none;
}
.faixa .container li:nth-child(4) {
  padding-left: 36px;
}
@media (max-width: 900px) {
  .faixa .container li:nth-child(4) {
    padding: 0;
  }
}
.faixa .container li:nth-child(2), .faixa .container li:nth-child(3) {
  padding: 0 36px;
}
@media (max-width: 900px) {
  .faixa .container li:nth-child(2), .faixa .container li:nth-child(3) {
    padding: 0;
  }
}

.area-kits {
  padding-bottom: 150px;
}
@media (max-width: 900px) {
  .area-kits {
    padding-bottom: 60px;
  }
}
.area-kits hr.divider {
  display: none;
}
.area-kits .container {
  width: 95%;
}
.area-kits .container .sub {
  margin-bottom: 24px;
}
.area-kits .container h2 {
  font-size: 40px;
  color: #5b0811;
  margin-bottom: 5px;
}
.area-kits .container h2 b {
  color: #7c4f4f;
}
@media (max-width: 900px) {
  .area-kits .container h2 {
    font-size: 30px;
    line-height: 1.2;
  }
}
.area-kits .container p {
  text-align: center;
  color: #5b0811;
}
.area-kits .container p {
  font-size: 20px;
}
.area-kits .container ul {
  margin-bottom: 32px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  align-items: flex-end;
  width: 100%;
}
.area-kits .container ul.a2 {
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .area-kits .container ul {
    grid-template-columns: repeat(1, 1fr);
    margin-bottom: 24px;
  }
}
.area-kits .container ul a {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 20px;
  position: relative;
  text-align: center;
  transition: all 0.6s;
  overflow: hidden;
  border-radius: 20px;
  border-bottom: 10px solid var(--Brand-primary-defoult, #5b0811) !important;
  background: #fffaf5 !important;
}
.area-kits .container ul a:hover {
  transform: scale(1.01);
}
@media (max-width: 900px) {
  .area-kits .container ul a {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
  }
}
.area-kits .container ul a .valores {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding-bottom: 30px;
}
.area-kits .container ul a .valores.mb {
  display: none;
}
@media (max-width: 900px) {
  .area-kits .container ul a .valores.mb {
    display: flex;
  }
}
.area-kits .container ul a .valores.dk {
  display: flex;
  margin-top: 10px;
}
.area-kits .container ul a .valores * {
  font-size: 24px;
}
@media (max-width: 900px) {
  .area-kits .container ul a .valores * {
    font-size: 16px;
  }
}
.area-kits .container ul a .valores s {
  text-decoration: line-through;
  text-decoration-color: red;
  font-weight: normal;
  color: #7c4f4f !important;
}
.area-kits .container ul a .valores span {
  color: #7c4f4f !important;
  font-weight: bold;
}
.area-kits .container ul a .valores b {
  color: #5b0811;
}
.area-kits .container ul a .valores small {
  font-size: 13px;
  font-weight: bold;
}
.area-kits .container ul a .header {
  font-size: 24px;
  width: 100%;
  border-radius: 20px 20px 0 0;
  color: #fff;
  text-transform: uppercase;
  padding: 16px;
  line-height: 1;
  background: #5b0811;
  font-weight: 600;
  letter-spacing: 1px;
}
@media (max-width: 900px) {
  .area-kits .container ul a .header {
    grid-column: -1/1;
    font-size: 18px;
  }
}
.area-kits .container ul a .main {
  padding: 12px 12px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
@media (max-width: 900px) {
  .area-kits .container ul a .main {
    padding: 16px 0px;
    padding-left: 10px;
  }
}
.area-kits .container ul a .main strong {
  font-size: 40px;
  font-weight: 700;
  display: block;
  color: #5b0811;
}
@media (max-width: 900px) {
  .area-kits .container ul a .main strong {
    font-size: 24px;
  }
}
@media (max-width: 370px) {
  .area-kits .container ul a .main strong {
    font-size: 20px;
  }
}
.area-kits .container ul a .main .days {
  display: block;
  font-weight: 500;
  font-size: 20px;
  margin-bottom: 12px;
  color: #7c4f4f;
}
@media (max-width: 900px) {
  .area-kits .container ul a .main .days {
    font-size: 16px;
    margin-bottom: 16px;
  }
}
@media (max-width: 370px) {
  .area-kits .container ul a .main .days {
    font-size: 14px;
  }
}
.area-kits .container ul a .main .area-img {
  position: relative;
  overflow: hidden;
  max-width: 300px;
}
@media (max-width: 900px) {
  .area-kits .container ul a .main .area-img {
    overflow: visible;
  }
}
.area-kits .container ul a .main .area-img::before {
  display: none;
}
.area-kits .container ul a .main .area-img .frete {
  max-width: 120px;
  position: absolute;
  top: -10%;
  left: 10%;
  z-index: 5;
}
@media (max-width: 900px) {
  .area-kits .container ul a .main .area-img .frete {
    max-width: 75px;
  }
}
.area-kits .container ul a .main .area-img .save {
  position: absolute;
  z-index: 10;
  top: 10px;
  right: 5%;
  background: #f43030;
  padding: 6px 16px;
}
.area-kits .container ul a .main .area-img .save small {
  font-size: 10px;
  color: #fff;
}
.area-kits .container ul a .main .area-img .save {
  width: 76px;
  height: 76px;
}
@media (max-width: 900px) {
  .area-kits .container ul a .main .area-img .save {
    bottom: 0;
    top: -15px;
    right: 0;
    transform: scale(0.7);
  }
}
.area-kits .container ul a .main .area-img .save {
  display: flex;
  justify-content: center;
  align-items: center;
  clip-path: path("M17.7195 67.0419C15.2814 67.0599 12.936 66.1086 11.1993 64.3974C9.46259 62.6861 8.47679 60.3551 8.45877 57.917L8.4279 53.7385C8.40858 51.3112 7.43004 48.99 5.70579 47.2815L2.7592 44.3781C1.89378 43.5302 1.20452 42.5195 0.731039 41.4043C0.257558 40.289 0.00920217 39.0912 0.000250915 37.8796C-0.00870034 36.6681 0.22193 35.4667 0.678881 34.3446C1.13583 33.2225 1.81009 32.2017 2.66288 31.3411L5.56625 28.3945C7.26507 26.6607 8.2092 24.3253 8.19266 21.898L8.16179 17.7195C8.14377 15.2814 9.09502 12.936 10.8063 11.1993C12.5175 9.46258 14.8486 8.47678 17.2867 8.45877L21.4652 8.42791C23.8925 8.40859 26.2136 7.43004 27.9222 5.70579L30.8255 2.75921C31.6735 1.89379 32.6841 1.20452 33.7994 0.731046C34.9146 0.257561 36.1125 0.00920216 37.324 0.000250912C38.5356 -0.00870034 39.737 0.221932 40.8591 0.678887C41.9812 1.13583 43.0019 1.81009 43.8626 2.66288L46.8092 5.56625C48.543 7.26507 50.8783 8.2092 53.3057 8.19265L57.4842 8.16179C59.9223 8.14378 62.2676 9.09502 64.0044 10.8063C65.7411 12.5175 66.7269 14.8486 66.7449 17.2866L66.7758 21.4652C66.7951 23.8925 67.7736 26.2136 69.4979 27.9222L72.4445 30.8255C73.3099 31.6735 73.9991 32.6841 74.4726 33.7994C74.9461 34.9146 75.1945 36.1125 75.2034 37.324C75.2124 38.5356 74.9817 39.737 74.5248 40.8591C74.0678 41.9812 73.3936 43.0019 72.5408 43.8626L69.6374 46.8091C67.9386 48.543 66.9945 50.8783 67.011 53.3056L67.0419 57.4842C67.0599 59.9222 66.1086 62.2676 64.3974 64.0043C62.6862 65.7411 60.3551 66.7269 57.917 66.7449L53.7385 66.7757C51.3112 66.7951 48.99 67.7736 47.2815 69.4979L44.3781 72.4444C43.5302 73.3099 42.5195 73.9991 41.4043 74.4726C40.289 74.9461 39.0912 75.1944 37.8796 75.2034C36.6681 75.2123 35.4667 74.9817 34.3446 74.5248C33.2225 74.0678 32.2017 73.3936 31.3411 72.5408L28.3945 69.6374C26.6607 67.9386 24.3253 66.9944 21.898 67.011L17.7195 67.0419Z");
}
.area-kits .container ul a .main .area-img .save b {
  color: #fff;
  font-size: 15px;
  text-transform: uppercase;
  line-height: 1;
}
@media (max-width: 900px) {
  .area-kits .container ul a .main .area-img .save {
    right: 0;
  }
}
.area-kits .container ul a .main .area-img img {
  display: block;
  width: 100%;
  height: 210px;
  position: relative;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
  z-index: 2;
}
@media (max-width: 900px) {
  .area-kits .container ul a .main .area-img img {
    height: auto;
  }
}
.area-kits .container ul a small {
  color: currentColor;
}
.area-kits .container ul a .price {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 1;
  font-weight: 400;
  font-size: 24px;
  margin-bottom: 18px;
  color: #5b0811;
}
@media (max-width: 900px) {
  .area-kits .container ul a .price {
    font-size: 14px;
  }
}
.area-kits .container ul a .price small {
  font-size: 18px;
  padding-top: 10px;
  color: #5b0811;
  font-weight: 700;
}
.area-kits .container ul a .price span {
  color: #7c4f4f;
}
.area-kits .container ul a .price strong {
  color: #5b0811;
  font-size: 64px;
  line-height: 1;
  font-weight: 600;
  margin-bottom: -6px;
  display: flex;
}
.area-kits .container ul a .price strong small {
  font-size: 18px;
  padding-top: 10px;
  color: #5b0811;
  font-weight: 700;
}
@media (max-width: 900px) {
  .area-kits .container ul a .price strong {
    font-size: 40px;
  }
}
@media (max-width: 370px) {
  .area-kits .container ul a .price strong {
    font-size: 30px;
  }
}
.area-kits .container ul a > ul {
  grid-template-columns: repeat(1, 1fr);
  gap: 10px;
  text-align: left;
  width: 100%;
  margin-bottom: 20px;
}
.area-kits .container ul a > ul li {
  display: grid;
  grid-template-columns: 20px 1fr;
  font-size: 16px;
  align-items: center;
  gap: 8px;
  line-height: 1;
  font-weight: 500;
  border-radius: 5px;
  background: rgba(255, 226, 197, 0.4);
}
@media (max-width: 900px) {
  .area-kits .container ul a > ul li {
    font-size: 11px;
    display: flex;
    gap: 8px;
    margin-left: 0;
    margin: 0px;
  }
}
@media (max-width: 370px) {
  .area-kits .container ul a > ul li {
    font-size: 11px;
  }
}
.area-kits .container ul a .footer {
  padding: 0 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.area-kits .container ul a .footer .valores span {
  color: #5b0811 !important;
}
.area-kits .container ul a .footer .valores span s {
  color: #5b0811;
}
.area-kits .container ul a .footer .valores span b {
  color: #5b0811;
}
.area-kits .container ul a .footer ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 24px !important;
  gap: 12px;
}
.area-kits .container ul a .footer ul li {
  border-radius: 5px;
  background: rgba(255, 226, 197, 0.4);
  padding: 10px !important;
  display: flex;
  padding: 10px 10px 10px 20px !important;
  align-items: center;
  gap: 10px;
  align-self: stretch;
  line-height: 1.4;
  align-items: center;
  border-radius: 5px;
  font-size: 18px;
  color: #7c4f4f;
}
@media (max-width: 900px) {
  .area-kits .container ul a .footer ul li {
    font-size: 10px;
    margin-bottom: 4px;
    padding: 5px 5px 5px 5px !important;
    line-height: 1.2;
  }
}
@media (max-width: 900px) {
  .area-kits .container ul a .footer {
    padding: 16px 10px 20px 0;
    margin-left: 0;
    text-align: left;
  }
}
.area-kits .container ul a .footer .buy-cta {
  margin-bottom: 18px;
}
.area-kits .container ul .best-option {
  z-index: 2;
  display: flex;
  flex-direction: column;
}
.area-kits .container ul .best-option::before {
  content: "";
  height: 40px;
  flex-shrink: 0;
}
@media (max-width: 900px) {
  .area-kits .container ul .best-option::before {
    display: none;
  }
}
.area-kits .container ul .best-option strong {
  color: #5b0811 !important;
}
.area-kits .container ul .best-option .days {
  color: #5b0811 !important;
}
.area-kits .container ul .best-option .price {
  color: #5b0811;
}
.area-kits .container ul .best-option .valores span {
  color: #5b0811 !important;
}
.area-kits .container ul .best-option s {
  color: #5b0811 !important;
}
.area-kits .container ul .best-option .cta-wrap {
  position: relative;
  display: block;
}
.area-kits .container ul .best-option .cta-wrap .buy-cta {
  display: block;
  width: 100%;
  margin-bottom: 25px;
  transform-origin: center;
  animation: ctaPulse 2.4s ease-in-out infinite;
}
.area-kits .container ul .best-option .cta-wrap .cta-cursor {
  position: absolute;
  right: 18%;
  bottom: -6px;
  width: 46px;
  height: auto;
  pointer-events: none;
  transform-origin: top left;
  animation: ctaTap 2.4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 70%, 100% {
    transform: scale(1);
  }
  78% {
    transform: scale(0.95);
  }
  86% {
    transform: scale(1.02);
  }
}
@keyframes ctaTap {
  0% {
    transform: translate(40px, 30px) scale(1);
    opacity: 0;
  }
  18% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  70% {
    transform: translate(0, 0) scale(1);
  }
  78% {
    transform: translate(0, 0) scale(0.82);
  }
  86% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}
.area-kits .container ul .best-option a {
  background: #fff7e0 !important;
  flex: 1;
  padding-bottom: 20px;
  border-radius: 20px;
  border-bottom: 10px solid #ffd37b !important;
}
.area-kits .container ul .best-option a .header {
  color: #5b0811;
  border-radius: 20.833px 20.833px 0 0;
  background: linear-gradient(270deg, #ffd37b 0%, #a4823d 27.4%, #ffd580 65.87%, #a4823d 100%);
}
.area-kits .container ul .best-option a .price strong {
  font-size: 80px;
  color: #5b0811;
}
@media (max-width: 900px) {
  .area-kits .container ul .best-option a .price strong {
    font-size: 40px;
  }
}
.area-kits .container ul .best-option a .main .area-img .save {
  right: 5%;
}
.area-kits .container ul .best-option a ul {
  gap: 12px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.area-kits .container ul .best-option a ul li {
  font-weight: 500;
  color: #5b0811;
  background: rgba(255, 226, 197, 0.4);
  padding: 10px 10px 10px 20px;
  gap: 10px;
  align-self: stretch;
  line-height: 1.4;
  align-items: center;
  border-radius: 5px;
}
@media (max-width: 900px) {
  .area-kits .container ul .best-option a ul li {
    font-size: 12px;
    padding: 5px;
  }
  .area-kits .container ul .best-option a ul li img {
    width: 20px;
  }
}
.area-kits .container ul .best-option a .divider {
  border-color: #5b0811;
}
.area-kits .container ul .k3 a {
  border-radius: 20px;
  border-bottom: 3px solid #0b3c5d;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
.area-kits .container ul .k3 ul {
  gap: 12px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1px;
}
.area-kits .container ul .k3 ul li {
  font-weight: 500;
  padding: 10px 12px;
  color: #5b0811;
  border-radius: 50px;
}
@media (max-width: 900px) {
  .area-kits .container ul .k3 ul li {
    font-size: 11px;
  }
  .area-kits .container ul .k3 ul li img {
    width: 24px;
  }
}
.area-kits .container ul .k1 a {
  border-radius: 20px;
  border-bottom: 3px solid #0b3c5d;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6);
}
.area-kits .container ul .k1 ul {
  gap: 12px;
  margin-bottom: 20px;
}
.area-kits .container ul .k1 ul li {
  font-weight: 500;
  padding: 10px 12px;
  color: #5b0811;
  border-radius: 50px;
}
@media (max-width: 900px) {
  .area-kits .container ul .k1 ul li {
    font-size: 12px;
  }
  .area-kits .container ul .k1 ul li img {
    width: 24px !important;
  }
}
@media (max-width: 900px) {
  .area-kits .container ul .k1 .area-img {
    padding-top: 10px !important;
  }
}
@media (max-width: 900px) {
  .area-kits .container ul .best-option {
    grid-row: 1;
  }
  .area-kits .container ul .k3 {
    grid-row: 2;
  }
}

.guarantee {
  background-color: #5b0811;
  position: relative;
  padding: 80px 32px;
}
@media (max-width: 900px) {
  .guarantee {
    padding: 0px;
  }
}
.guarantee__card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 64px;
  padding: 80px;
  margin-top: -160px;
  border: 1px solid rgba(213, 213, 213, 0.4);
  border-radius: 30px;
  flex-direction: row-reverse;
  background: linear-gradient(103deg, #5b0811 0%, #a82d39 49.99%, #5b0811 103.58%);
  width: 100%;
  max-width: 1210px;
  margin-left: auto;
  margin-right: auto;
}
.guarantee__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 476px;
  max-width: 100%;
  flex-shrink: 0;
}
.guarantee__rating {
  display: flex;
  align-items: center;
  gap: 16px;
}
.guarantee__stars {
  display: flex;
  align-items: center;
}
.guarantee__stars img {
  width: 125px;
  height: 23px;
  display: block;
  -o-object-fit: contain;
     object-fit: contain;
}
.guarantee__tag {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 5.18px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}
.guarantee__heading {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.guarantee__title {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(32px, 2vw, 48px);
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
  margin: 0 auto;
  text-transform: uppercase;
}
@media (max-width: 900px) {
  .guarantee__title {
    font-size: 28px !important;
  }
}
.guarantee__description {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: normal;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
@media (max-width: 900px) {
  .guarantee__description {
    font-size: 16px !important;
  }
}
.guarantee__button {
  width: 100%;
  max-width: 320px;
}
.guarantee__seal {
  flex-shrink: 0;
  width: 430px;
  max-width: 100%;
}
.guarantee__seal img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1024px) {
  .guarantee {
    padding: 60px;
  }
  .guarantee__card {
    flex-direction: column;
    padding: 40px 20px;
    gap: 12px;
    text-align: center;
    margin-top: -100px;
  }
  .guarantee__content {
    width: 100%;
    align-items: center;
    display: contents;
  }
  .guarantee__rating {
    order: 1;
    justify-content: center;
  }
  .guarantee__seal {
    order: 2;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }
  .guarantee__heading {
    order: 3;
    text-align: center;
    width: 100%;
  }
  .guarantee__button {
    order: 4;
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    align-self: center;
  }
  .guarantee__title {
    font-size: 36px;
  }
}
@media (max-width: 900px) {
  .guarantee__button {
    font-size: 18px;
    padding: 14px 16px;
    gap: 10px;
    border-bottom-width: 4px;
  }
  .guarantee__button::before {
    width: 20px;
    height: 20px;
  }
}

.about {
  background-color: #fff;
  padding-bottom: 180px;
  padding-top: 80px;
}
@media (max-width: 900px) {
  .about {
    padding-bottom: 90px;
  }
}
.about .container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}
@media (max-width: 900px) {
  .about .container {
    gap: 32px;
    flex-direction: column;
    align-items: center;
  }
}
.about .container .area-img {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  max-width: 580px;
}
.about .container .area-img .product {
  position: relative;
  z-index: 5;
  width: 100%;
}
.about .container .content {
  max-width: 560px;
}
.about .container .content .title {
  color: #5b0811;
  font-size: 40px;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .about .container .content .title {
    font-size: 26px;
  }
}
.about .container .content .title b {
  color: #8a0f1b;
}
.about .container .content p,
.about .container .content p * {
  color: #6c4246;
  font-size: 18px;
  margin-bottom: 16px;
}
.about .container .content .highlight {
  font-weight: 700;
  color: #6c4246;
  font-size: 18px;
  margin: 24px 0;
}
.about .container .content .features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid rgba(138, 15, 27, 0.15);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 32px;
}
@media (max-width: 480px) {
  .about .container .content .features {
    grid-template-columns: 1fr;
  }
}
.about .container .content .features li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 16px;
  font-size: 16px;
  color: #6c4246;
  background: #fff;
  border-bottom: 1px solid #bfbfbf;
  line-height: 1.4;
  min-width: 0;
  white-space: nowrap;
}
@media (max-width: 1300px) {
  .about .container .content .features li {
    font-size: 14px;
  }
}
.about .container .content .features li:nth-child(odd) {
  border-right: 1px solid #bfbfbf;
}
.about .container .content .features li:nth-last-child(-n+2) {
  border-bottom: none;
}
.about .container .content .features li img {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}
@media (max-width: 480px) {
  .about .container .content .features li:nth-child(odd) {
    border-right: none;
  }
  .about .container .content .features li:nth-last-child(-n+2) {
    border-bottom: 1px solid rgba(138, 15, 27, 0.12);
  }
  .about .container .content .features li:last-child {
    border-bottom: none;
  }
}
.about .container .content .btn {
  margin-top: 0;
  max-width: 340px;
}
@media (max-width: 900px) {
  .about .container .content .btn {
    max-width: 100%;
  }
}

.getting-started {
  position: relative;
  background: url("../img/started-bg.png") no-repeat;
  background-size: cover;
}
.getting-started .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  padding: 80px;
  border-radius: 10px;
  border-top: 24px solid #d5a85c;
  background: #8a0f1b;
  z-index: 10;
  margin-top: -130px;
  margin-bottom: -130px;
}
@media (max-width: 900px) {
  .getting-started .container {
    padding: 40px 24px;
    margin-top: -80px;
    margin-bottom: -80px;
  }
}
.getting-started .head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 40px;
  width: 100%;
  margin-bottom: 56px;
  text-align: left;
}
@media (max-width: 900px) {
  .getting-started .head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 40px;
  }
}
.getting-started .head .title {
  color: #fff;
  font-size: 40px;
}
@media (max-width: 900px) {
  .getting-started .head .title {
    font-size: 28px;
  }
}
.getting-started .head p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
}
.getting-started .head p b {
  color: #d5a85c;
  font-weight: 700;
}
@media (max-width: 900px) {
  .getting-started .head p {
    font-size: 16px;
  }
}
.getting-started .steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  width: 100%;
  margin-bottom: 48px;
  position: relative;
}
.getting-started .steps::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 16.66%;
  right: 16.66%;
  height: 2px;
  background: rgba(213, 168, 92, 0.45);
  z-index: 0;
}
@media (max-width: 900px) {
  .getting-started .steps::before {
    display: none;
  }
}
.getting-started .steps::after {
  content: "";
  position: absolute;
  top: 28px;
  left: 16.66%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #d5a85c, #ffc813);
  z-index: 0;
}
@media (max-width: 900px) {
  .getting-started .steps::after {
    display: none;
  }
}
.getting-started .steps.animate::after {
  animation: stepLineFill 1.8s ease-in-out forwards;
}
.getting-started .steps.animate .step-badge::after {
  animation: stepBadgeFill 0.9s ease-in-out forwards;
}
.getting-started .steps.animate li:nth-child(1) .step-badge::after {
  animation-delay: 0.15s;
}
.getting-started .steps.animate li:nth-child(2) .step-badge::after {
  animation-delay: 0.75s;
}
.getting-started .steps.animate li:nth-child(3) .step-badge::after {
  animation-delay: 1.35s;
}
@media (max-width: 900px) {
  .getting-started .steps.animate li:not(:last-child)::after {
    animation: stepConnFill 0.7s ease-in-out forwards;
  }
  .getting-started .steps.animate li:nth-child(1)::after {
    animation-delay: 0.5s;
  }
  .getting-started .steps.animate li:nth-child(2)::after {
    animation-delay: 1.1s;
  }
}
@media (max-width: 900px) {
  .getting-started .steps {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}
.getting-started .steps li {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) {
  .getting-started .steps li {
    flex-direction: row;
    align-items: flex-start;
    gap: 16px;
  }
  .getting-started .steps li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 17.5px;
    top: 35px;
    transform: translateX(-50%);
    width: 2px;
    height: calc(100% - 3px);
    background: rgba(213, 168, 92, 0.45);
    z-index: 0;
  }
  .getting-started .steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 17.5px;
    top: 35px;
    transform: translateX(-50%) scaleY(0);
    transform-origin: top;
    width: 2px;
    height: calc(100% - 3px);
    background: linear-gradient(180deg, #d5a85c, #ffc813);
    z-index: 0;
  }
}
.getting-started .steps .step-badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
@media (max-width: 900px) {
  .getting-started .steps .step-badge {
    width: 35px;
    height: 35px;
    margin-bottom: 0;
  }
}
.getting-started .steps .step-badge {
  background: rgba(213, 168, 92, 0.18);
  box-shadow: 0 0 0 3px rgb(255, 255, 255), inset 0 0 0 2px rgba(213, 168, 92, 0.55);
}
.getting-started .steps .step-badge::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: linear-gradient(180deg, #d5a85c 0%, #ffc813 100%);
}
.getting-started .steps .step-badge img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  z-index: 2;
}
.getting-started .steps .card {
  background: #fdf4ec;
  border-radius: 14px;
  padding: 40px;
  text-align: left;
  width: 100%;
  height: 100%;
  border: 1px solid rgba(213, 168, 92, 0.25);
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: center;
}
@media (max-width: 900px) {
  .getting-started .steps .card {
    padding: 16px;
  }
}
.getting-started .steps .card img {
  max-width: 64px;
  margin-bottom: 24px;
}
.getting-started .steps .card h3 {
  color: #6c4246;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.getting-started .steps .card p {
  color: #6c4246;
  font-size: 16px;
  line-height: 1.5;
}
.getting-started .badges {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 32px;
  margin-top: 28px;
}
.getting-started .badges .badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #d5a85c;
  font-size: 13px;
  font-weight: 500;
}
.getting-started .badges .badge img {
  width: 20px;
  height: 20px;
}

@keyframes stepBadgeFill {
  from {
    height: 0%;
  }
  to {
    height: 100%;
  }
}
@keyframes stepLineFill {
  from {
    width: 0;
  }
  to {
    width: 66.68%;
  }
}
@keyframes stepConnFill {
  from {
    transform: translateX(-50%) scaleY(0);
  }
  to {
    transform: translateX(-50%) scaleY(1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .getting-started .steps .step-badge::after {
    height: 100%;
    animation: none;
  }
  .getting-started .steps::after {
    width: 66.68%;
    animation: none;
  }
  .getting-started .steps li:not(:last-child)::after {
    transform: translateX(-50%) scaleY(1);
    animation: none;
  }
}
.ingredients {
  background-color: #fff;
  padding-top: 160px;
}
@media (max-width: 900px) {
  .ingredients {
    padding-top: 80px;
  }
}
.ingredients .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ingredients .title {
  font-size: 40px;
  margin-bottom: 16px;
  color: #5b0811;
}
.ingredients .title b {
  color: #8a0f1b;
}
@media (max-width: 900px) {
  .ingredients .title {
    font-size: 28px;
  }
}
.ingredients .sub {
  max-width: 760px;
  color: #435874;
  font-size: 16px;
  margin-bottom: 48px;
}
@media (max-width: 900px) {
  .ingredients .sub {
    margin-bottom: 32px;
  }
}
.ingredients .list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  margin-bottom: 48px;
}
.ingredients .list li {
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(138, 15, 27, 0.1);
  background: linear-gradient(90deg, #fff9fa 0%, #fff8f1 100%);
  box-shadow: 0 6px 24px rgba(91, 8, 17, 0.05);
}
.ingredients .list li:nth-child(even) {
  flex-direction: row-reverse;
  background: linear-gradient(270deg, #fff9fa 0%, #fff8f1 100%);
}
@media (max-width: 768px) {
  .ingredients .list li {
    flex-direction: column !important;
  }
}
.ingredients .list .img {
  flex: 0 0 42%;
  max-width: 42%;
}
@media (max-width: 768px) {
  .ingredients .list .img {
    flex: none;
    max-width: 100%;
    width: 100%;
  }
}
.ingredients .list .img img {
  width: 100%;
  height: 100%;
  min-height: 240px;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}
@media (max-width: 768px) {
  .ingredients .list .img img {
    min-height: 200px;
    max-height: 240px;
  }
}
.ingredients .list .content {
  flex: 1;
  padding: 40px;
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 900px) {
  .ingredients .list .content {
    padding: 28px 24px;
  }
}
.ingredients .list .content h3 {
  color: #8a0f1b;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 14px;
}
@media (max-width: 900px) {
  .ingredients .list .content h3 {
    font-size: 20px;
  }
}
.ingredients .list .content p {
  color: #6c4246;
  font-size: 16px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.ingredients .list .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ingredients .list .tags li {
  display: block;
  border: none;
  border-radius: 50px;
  box-shadow: none;
  background: rgba(138, 15, 27, 0.08);
  color: #6c4246;
  font-size: 14px;
  font-weight: 500;
  padding: 8px 16px;
}

.shipping {
  position: relative;
  background: #5b0811;
  padding: 20px;
}
@media (max-width: 900px) {
  .shipping {
    padding: 20px 0px;
  }
}
.shipping * {
  color: #fff;
}
.shipping * b {
  color: #ffcfab;
}
.shipping .container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  gap: 24px 48px;
}
@media (max-width: 900px) {
  .shipping .container {
    flex-wrap: wrap;
    text-align: center;
  }
}
.shipping .container .title {
  margin-bottom: 16px;
  font-size: 40px;
}
@media (max-width: 900px) {
  .shipping .container .title {
    font-size: 32px;
  }
}
.shipping .container span {
  font-size: 18px;
}
@media (max-width: 900px) {
  .shipping .container span {
    font-size: 14px;
  }
}

.compare {
  background: url("../img/compare.png");
  background-repeat: no-repeat;
  background-size: cover;
}
.compare .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.compare .title {
  text-align: center;
  margin-bottom: 48px;
  color: #5b0811;
  font-size: 40px;
  font-weight: 700;
  font-family: "Plus Jakarta Sans";
}
@media (max-width: 900px) {
  .compare .title {
    margin-bottom: 32px;
  }
}
.compare .box {
  position: relative;
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  align-items: center;
  gap: 24px;
  padding: 32px;
  border-radius: 24px;
  background: #fdf6ee;
  border: 1px solid rgba(138, 15, 27, 0.12);
}
@media (max-width: 900px) {
  .compare .box {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 20px;
  }
}
.compare .col ul {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.compare .col li {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 15px;
  line-height: 1.4;
  padding: 10px 0;
}
.compare .col li img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.compare .col h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .compare .col h3 {
    font-size: 20px;
  }
}
.compare .without {
  padding: 0 16px;
}
@media (max-width: 900px) {
  .compare .without {
    padding: 0;
  }
}
.compare .without h3 {
  color: #422103;
  font-size: 24px;
}
.compare .without li {
  color: #422103;
  font-size: 16px;
}
.compare .with {
  padding: 40px;
  border-radius: 16px;
  background: #8a0f1b;
}
@media (max-width: 900px) {
  .compare .with {
    margin: 0;
    padding: 28px 24px;
  }
}
.compare .with h3 {
  color: #fff;
}
.compare .with li {
  color: rgba(255, 255, 255, 0.92);
}
.compare .with .btn {
  margin-top: 20px;
  font-size: 20px;
}

.testimonials {
  position: relative;
  overflow: visible;
  padding: 80px 0;
  background: url("../img/testemonials-bg.png") no-repeat;
}
@media (max-width: 900px) {
  .testimonials {
    padding: 48px 0;
  }
}
.testimonials .container {
  position: relative;
  display: flex;
  align-items: center;
  gap: 120px;
}
@media (max-width: 1024px) {
  .testimonials .container {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }
}
.testimonials .intro {
  flex: 0 0 320px;
  max-width: 320px;
}
@media (max-width: 1024px) {
  .testimonials .intro {
    flex: none;
    max-width: 100%;
    text-align: center;
  }
}
.testimonials .intro .title {
  color: #fff;
  font-size: 40px;
  line-height: 1.15;
  margin-bottom: 20px;
}
@media (max-width: 900px) {
  .testimonials .intro .title {
    font-size: 30px;
  }
}
.testimonials .intro p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  margin-bottom: 32px;
}
.testimonials .intro .btn {
  max-width: 320px;
}
@media (max-width: 1024px) {
  .testimonials .intro .btn {
    margin: 0 auto;
  }
}
.testimonials .swiper {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  margin: -120px calc(50% - 50vw) -120px 0;
}
@media (max-width: 1024px) {
  .testimonials .swiper {
    width: 100%;
    margin: 0;
  }
}
.testimonials .swiper .swiper-slide {
  height: auto;
  display: flex;
}
.testimonials .swiper-button-prev,
.testimonials .swiper-button-next {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: all 0.3s ease;
}
.testimonials .swiper-button-prev::after,
.testimonials .swiper-button-next::after {
  font-size: 15px;
  font-weight: 700;
  color: #8a0f1b;
}
.testimonials .swiper-button-prev:hover,
.testimonials .swiper-button-next:hover {
  background: #8a0f1b;
}
.testimonials .swiper-button-prev:hover::after,
.testimonials .swiper-button-next:hover::after {
  color: #fff;
}
.testimonials .swiper-button-prev {
  left: 418px;
  right: auto;
}
.testimonials .swiper-button-next {
  right: -20px;
  left: auto;
}
@media (max-width: 1024px) {
  .testimonials .swiper-button-prev,
  .testimonials .swiper-button-next {
    display: none;
  }
}
.testimonials .card {
  background: #fbf1e8;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #C7C7C7;
}
.testimonials .card .photo {
  width: 100%;
  flex-shrink: 0;
}
.testimonials .card .photo img {
  display: block;
  width: 100%;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}
.testimonials .card .body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
@media (max-width: 900px) {
  .testimonials .card .body {
    padding: 20px;
  }
}
.testimonials .card .review {
  color: #6c4246;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 20px;
  flex: 1;
}
.testimonials .card .meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.testimonials .card .meta .name {
  color: #5b0811;
  font-size: 18px;
  font-weight: 700;
}
.testimonials .card .meta .loc {
  color: #435874;
  font-size: 13px;
  text-align: right;
}
.testimonials .card .bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.testimonials .card .bottom .stars {
  max-width: 110px;
}
.testimonials .card .bottom .verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1fa604;
  flex-shrink: 0;
}
.testimonials .card .bottom .verified img {
  width: 16px;
  height: 16px;
}

.faq {
  background-color: #fff6ef;
  background-size: cover;
  background-position: top;
  background-attachment: fixed;
}
.faq .container {
  max-width: 934px !important;
}
.faq .container > span {
  color: #8a0f1b;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 12px;
}
.faq .title {
  text-align: center;
  margin: 0 auto 48px;
  color: #5b0811;
}
.faq .title span {
  color: #5b0811 !important;
}
.faq .days_gua {
  color: #8a0f1b;
}
.faq .accordion {
  display: grid;
  gap: 16px;
  margin-bottom: 48px;
}
.faq .item {
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;
}
.faq .item:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.faq .item .header {
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(47, 27, 82, 0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  padding: 16px;
  transition: all 0.3s ease;
}
.faq .item .header:hover {
  transform: translateY(-10px);
}
@media (max-width: 900px) {
  .faq .item .header {
    padding: 16px;
  }
}
.faq .item .header p {
  font-weight: 500;
  color: #5b0811;
  font-size: 24px;
  margin-bottom: 0;
  text-align: left;
}
@media (max-width: 900px) {
  .faq .item .header p {
    font-size: 18px;
  }
}
.faq .item .header::after {
  content: "+";
  transition: all 0.4s ease;
  font-size: 28px;
  font-weight: 400;
  color: #5b0811;
}
.faq .item .body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
  padding: 0 12px;
  background: #fff;
}
.faq .item .body p,
.faq .item .body li,
.faq .item .body p b {
  text-align: left;
  font-size: 16px;
  margin-bottom: 16px;
  color: #5b0811;
}
@media (max-width: 900px) {
  .faq .item .body p,
  .faq .item .body li,
  .faq .item .body p b {
    font-size: 16px;
  }
}
.faq .item .body a {
  text-decoration: underline;
}
.faq .item .body li {
  list-style: "✔";
  margin-left: 20px;
}
.faq .item .body img {
  margin: 20px auto;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.faq .item.active .header {
  background-color: #5b0811;
}
.faq .item.active .header p {
  color: #fff;
}
.faq .item.active .header::after {
  content: "-";
  color: #fff;
}
.faq .item.active .header {
  border-radius: 8px 8px 0 0;
}
.faq .item.active .body {
  padding-top: 20px;
  padding-bottom: 20px;
  max-height: 600px;
  overflow: auto;
}
.faq .btn {
  margin-bottom: 35px;
}

footer {
  background-color: #5b0811;
  padding-top: 22px;
}
footer * {
  color: #fff;
}
footer .logo {
  color: #fff;
  font-size: 55.109px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  footer .logo {
    font-size: 30px;
  }
}
footer .logo span {
  color: #d15a33;
}
footer nav {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
}
@media (max-width: 900px) {
  footer nav {
    flex-wrap: wrap;
  }
}
footer nav a {
  padding: 12px;
  font-size: 20px;
}
@media (max-width: 900px) {
  footer nav a {
    font-size: 16px;
  }
}
footer nav a:hover {
  text-decoration: underline;
}
footer .disclaimer {
  max-width: 1007px;
  border-radius: 20px;
  border-top: 1px solid #fff;
  margin: 0 auto 24px;
  padding: 24px 32px;
  text-align: center;
}
@media (max-width: 900px) {
  footer .disclaimer {
    padding: 24px 12px;
  }
}
footer .disclaimer p {
  font-size: 16px;
}
footer .copyright {
  background: var(--linear-white, linear-gradient(90deg, rgba(255, 255, 255, 0) 15.7%, rgba(255, 255, 255, 0.2) 41.83%, rgba(255, 255, 255, 0) 81.4%));
  display: grid;
  place-items: center;
  padding: 32px 5%;
}
footer .copyright p {
  font-size: 18px;
  font-weight: 300;
  text-align: center;
}
@media (max-width: 900px) {
  footer .copyright p {
    font-size: 14px;
  }
}

@keyframes ingredient-ring-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.ingredients .card .img {
  position: relative;
  width: 90px;
  height: 90px;
  margin: 0 auto 24px;
}
.ingredients .card .img::before {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: conic-gradient(rgba(233, 51, 38, 0.3) 0deg, rgba(233, 51, 38, 0.12) 100deg, transparent 200deg, transparent 360deg);
  animation: ingredient-ring-spin 2.8s linear infinite;
}
.ingredients .card .img img {
  margin: 0;
  position: relative;
  z-index: 1;
}/*# sourceMappingURL=style.css.map */