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

* {
	margin: 0;
	padding: 0;
	list-style: none;
	text-decoration: none;
	box-sizing: border-box;
	color: #212529;
	font-family: "Open Sans", sans-serif
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

header {
	background: #000;
	padding: 24px 12px
}

header .logo {
	font-family: "Lato", sans-serif;
	font-size: 1.875rem;
	text-transform: uppercase;
	color: #fff;
	letter-spacing: -0.0625rem;
	font-weight: 900
}

header .container {
	display: flex;
	justify-content: space-between;
	align-items: center
}

header .container nav {
	display: flex;
	align-items: center;
	gap: 14px
}

header .container nav a {
	display: block;
	padding: 14px 12px;
	font-size: 1.1875rem;
	color: #fff;
	transition: all .7s
}

header .container nav a.order {
	background: #d3d316;
	padding: 8px 12px;
	border-radius: 4px;
	font-weight: bold;
	box-shadow: 0 2px #5b5a02;
	color: #000
}

header .container nav a:hover {
	filter: brightness(60%)
}

@media(max-width: 900px) {
	header .container nav {
		display: none;
		height: 0;
		overflow: hidden
	}

	header .container nav.active {
		display: flex;
		flex-direction: column;
		position: absolute;
		height: auto;
		top: 0;
		left: 0;
		width: 100%;
		background: #000;
		padding: 30px 0
	}
}

header .btn_mobile {
	height: 40px;
	width: 40px;
	cursor: pointer;
	background: none;
	border: none;
	display: none;
	transition: all .7s
}

header .btn_mobile.active {
	position: absolute;
	right: 5%
}

header .btn_mobile.active span {
	border-bottom: none
}

header .btn_mobile.active span::after {
	transform: rotate(45deg);
	top: -14px
}

header .btn_mobile.active span::before {
	transform: rotate(-45deg)
}

@media(max-width: 900px) {
	header .btn_mobile {
		display: block
	}
}

header .btn_mobile span {
	border-bottom: 3px solid #fff;
	display: block;
	transition: all .7s
}

header .btn_mobile span::before,
header .btn_mobile span::after {
	content: "";
	display: block;
	width: 100%;
	transition: all .7s;
	height: 3px;
	position: relative;
	background: #fff;
	margin-bottom: 12px
}

h1 {
	font-size: 2.5rem;
	margin-bottom: 24px
}

@media(max-width: 900px) {
	h1 {
		font-size: 1.875rem
	}
}

html {
	scroll-behavior: smooth
}

.title {
	font-size: 2rem;
	margin-bottom: 20px;
	line-height: 1.2
}

@media(max-width: 900px) {
	.title {
		font-size: 1.75rem
	}
}

p {
	font-size: 1.125rem;
	line-height: 1.5
}

main {
	background: radial-gradient(circle at 30% 50%, #efa845, #c18731 20%, #654519 57%, #513811 65%);
}

main .container {
	display: grid;
	grid-template-columns: 1fr 700px;
	align-items: center;
	padding: 87px 0 56px;
	gap: 48px
}

@media(max-width: 1200px) {
	main .container {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media(max-width: 900px) {
	main .container {
		grid-template-columns: repeat(1, 1fr);
		padding: 30px 0
	}
}

main .container>img {
	max-width: 350px;
	margin: 0 auto
}

main .container h2 {
	font-size: 1.375rem;
	font-weight: 500;
	margin-bottom: 48px
}

@media(max-width: 900px) {
	main .container h2 {
		font-size: 1.125rem
	}
}

main .container * {
	color: #fff
}

#about {
	padding: 48px 0;
	display: grid;
	grid-template-columns: 250px 1fr;
	align-items: center;
	gap: 77px
}

@media(max-width: 900px) {
	#about {
		grid-template-columns: repeat(1, 1fr);
		gap: 40px
	}

	#about img {
		max-width: 250px;
		margin: 0 auto
	}
}

#about p {
	margin-bottom: 16px
}

#about span {
	font-weight: bold;
	font-size: 1.25rem;
	color: #cb4357;
	margin-bottom: 14px;
	display: block
}

#about span strong {
	color: #cb4357
}

.faixa {
	background: radial-gradient(circle at 30% 50%, #efa845, #c18731 20%, #654519 57%, #513811 65%);
	padding: 48px 0
}

.faixa .container {
	display: grid;
	grid-template-columns: 3fr 1fr;
	gap: 24px;
	align-items: center;
	background: #fff;
	border-radius: 8px;
	padding: 40px
}

@media(max-width: 900px) {
	.faixa .container {
		grid-template-columns: repeat(1, 1fr)
	}
}

.faixa span,
.faixa h2 {
	text-align: center;
	display: block
}

.faixa span {
	font-size: 1.5rem;
	font-weight: bold
}

.faixa h2 {
	font-size: 4.375rem;
	font-weight: 900;
	margin-bottom: 48px;
	font-family: "Lato", sans-serif;
	text-transform: uppercase
}

@media(max-width: 900px) {
	.faixa h2 {
		font-size: 2.5rem
	}
}

.faixa img {
	margin: 0 auto;
	height: 250px
}

#ingredients {
	padding: 48px 0
}

#ingredients h2,
#ingredients h3,
#ingredients p {
	text-align: center
}

#ingredients p {
	font-size: 1.5rem;
	margin: 0 auto 48px;
	max-width: 60ch
}

#ingredients>ul {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 60px 30px
}

#ingredients>ul li {
	width: 100%;
	max-width: 350px
}

#ingredients>ul li img {
	margin: 0 auto;
	width: 200px;
	height: 200px;
	border-radius: 20px;
	-o-object-fit: cover;
	object-fit: cover;
	margin-bottom: 24px
}

#ingredients>ul li h3 {
	background: #7b7b7b;
	text-align: center;
	padding: 8px;
	font-size: 1.5rem;
	color: #fff;
	border-radius: 10px;
	margin-bottom: 16px;
	border: 3px solid black;
}

#ingredients>ul li li {
	line-height: 1.7;
	font-size: 1.25rem;
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 8px
}

#ingredients>ul li li::before {
	content: "";
	display: block;
	width: 30px;
	height: 30px;
	background: url(../img/checkmark2.html) no-repeat;
	background-size: contain;
	background-position: center
}

.banner {
	background: radial-gradient(circle at 30% 50%, #efa845, #c18731 20%, #654519 57%, #513811 65%);
	padding: 48px 0
}

.banner .container {
	background: #fff;
	border-radius: 10px;
	max-width: 1110px;
	padding: 36px
}

.banner h2 {
	font-size: 4.375rem;
	font-weight: 900;
	margin-bottom: 48px;
	font-family: "Lato", sans-serif;
	text-transform: uppercase;
	text-align: center
}

@media(max-width: 900px) {
	.banner h2 {
		font-size: 2.5rem
	}
}

.banner ul {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px
}

@media(max-width: 900px) {
	.banner ul {
		grid-template-columns: repeat(1, 1fr)
	}
}

.banner ul li {
	line-height: 1.7;
	font-size: 1.5rem;
	display: grid;
	grid-template-columns: 50px 1fr;
	gap: 8px
}

.banner ul li::before {
	content: "";
	display: block;
	width: 50px;
	height: 50px;
	background: url(../img/checkmark2.html) no-repeat;
	background-size: contain;
	background-position: center
}

.kits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px
}

@media(max-width: 900px) {
	.kits {
		padding: 40px 0
	}
}

@media(max-width: 900px) {
	.kits {
		grid-template-columns: repeat(1, 1fr)
	}
}

.kits .kit {
	box-shadow: rgba(46, 44, 165, .25) 4px 4px 15px 0px;
	background: #fff;
	text-align: center;
	overflow: hidden;
	transition: all .7s
}

.kits .kit:hover {
	transform: scale(1.06)
}

.kits .kit.best {
	border: 3px solid #854d51
}

@media(max-width: 900px) {
	.kits .kit.best {
		grid-row: 1
	}
}

@media(max-width: 900px) {
	.kits .kit.med {
		grid-row: 2
	}
}

.kits .kit .header {
	background: radial-gradient(circle at 30% 50%, #efa845, #c18731 20%, #654519 57%, #513811 65%);
	padding: 8px 12px;
	margin-bottom: 35px
}

.kits .kit .header * {
	color: #fff
}

.kits .kit .header h2 {
	font-size: 1.875rem
}

.kits .kit .content {
	padding: 0 20px 20px;
	display: flex;
	flex-direction: column;
	align-items: center
}

.kits .kit .content .prod {
	height: 200px;
	-o-object-fit: contain;
	object-fit: contain;
	margin-bottom: 30px
}

.kits .kit .content .preco {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: 8px
}

.kits .kit .content .preco strong {
	font-weight: 900;
	font-size: 5.625rem;
	line-height: 1
}

.kits .kit .content .preco span {
	text-align: left;
	margin-bottom: 12px;
	line-height: 1;
	font-weight: 500
}

.kits .kit .content ul {
	border-top: 1px solid rgba(46, 44, 165, .25);
	width: 100%;
	margin: 20px 0
}

.kits .kit .content ul li {
	padding: 12px 0;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	gap: 12px;
	border-bottom: 1px solid rgba(46, 44, 165, .25)
}

.kits .kit .content ul li.primeiro {
	color: #621313
}

.kits .kit .content ul li::before {
	content: "";
	width: 24px;
	height: 24px;
	display: block;
	background: url(../img/check.svg) no-repeat;
	background-size: contain;
	background-position: center
}

.kits .kit .content .btn {
	margin-bottom: 20px;
	transition: all .6s
}

.kits .kit .content .btn:hover {
	transform: scale(1.03);
	filter: brightness(90%)
}

.kits .kit .content .tot {
	margin-top: 20px;
	display: grid
}

.kits .kit .content .tot span {
	font-weight: 500;
	font-size: 1.5rem
}

.kits .kit .content .tot span s {
	text-decoration: line-through;
	text-decoration-color: #621313;
	margin-right: 12px
}

.kits .kit .content .tot span strong {
	color: #621313
}

.order-now {
	padding-bottom: 45px
}

.order-now .intro {
	text-align: center;
	background: #272727;
	padding: 24px 0;
	position: relative;
	margin-bottom: 70px
}

.order-now .intro:after {
	content: "";
	position: absolute;
	bottom: -30px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 30px solid rgba(0, 0, 0, 0);
	border-right: 30px solid rgba(0, 0, 0, 0);
	border-top: 30px solid #272727
}

.order-now .intro .title {
	color: #fff;
	margin-bottom: 0;
	max-width: 30ch
}

.order-now .reviews {
	display: grid;
	place-content: center;
	text-align: center;
	gap: 5px;
	margin-top: 52px
}

.order-now .reviews h2,
.order-now .reviews p {
	font-size: 1.5rem
}

.order-now .reviews img {
	max-width: 200px;
	margin: 0 auto
}

.frete {
	padding: 48px 0;
	background: #272727
}

.frete .container {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 40px;
	place-items: center;
	text-align: center
}

@media(max-width: 900px) {
	.frete .container {
		grid-template-columns: repeat(1, 1fr)
	}

	.frete .container img {
		max-width: 200px
	}
}

.frete .container p {
	color: #fff;
	font-size: 1.5625rem
}

@media(max-width: 900px) {
	.frete .container p {
		font-size: 1.125rem
	}
}

.frete .container h2 {
	font-size: 2.5rem;
	color: #fff;
	max-width: 35ch;
	margin-bottom: 10px
}

@media(max-width: 900px) {
	.frete .container h2 {
		font-size: 1.875rem
	}
}

.frete .container h2 strong,
.frete .container h2 u {
	color: #ff0
}

.frete .container h2 u {
	text-decoration: underline
}

.comments {
	padding: 48px 0;
	max-width: 945px
}

.comments .title {
	margin: 0 auto 56px;
	text-align: center;
	font-size: 2.5rem
}

@media(max-width: 900px) {
	.comments .title {
		font-size: 1.875rem
	}
}

.comments .content {
	display: grid;
	gap: 12px
}

.comments .stars {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.0625rem
}

.comments .stars img {
	width: 120px
}

@media(max-width: 900px) {
	.comments .stars {
		flex-wrap: wrap
	}
}

.comments p {
	font-size: 1.25rem;
	line-height: 1.7
}

@media(max-width: 900px) {
	.comments p {
		font-size: 1.125rem
	}
}

.comments span {
	font-size: 1.25rem
}

@media(max-width: 900px) {
	.comments span {
		font-size: 1rem
	}
}

.comments .comment {
	margin-bottom: 58px;
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: 26px;
	padding: 20px;
    border-radius: 20px;
    margin-bottom: 10px;
    background: #efefef;
}

@media(max-width: 900px) {
	.comments .comment {
		grid-template-columns: 40px 1fr;
		gap: 12px
	}
}

.comments .comment h3 {
	font-size: 2rem
}

@media(max-width: 900px) {
	.comments .comment h3 {
		font-size: 1.5rem
	}
}

.comments .comment>img {
	width: 90px;
	height: 90px;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: center;
	object-position: center;
	border-radius: 10px;
}

@media(max-width: 900px) {
	.comments .comment>img {
		width: 40px;
		height: 40px
	}
}

.f2 .container {
	grid-template-columns: 1fr 3fr
}

@media(max-width: 900px) {
	.f2 .container {
		grid-template-columns: 1fr
	}
}

.f2 .container h2 {
	text-align: left;
	font-size: 2.5rem;
	font-family: "Open Sans", sans-serif;
	margin-bottom: 10px;
	font-weight: bold;
	line-height: 1.3
}

@media(max-width: 900px) {
	.f2 .container h2 {
		font-size: 1.875rem
	}
}

.f2 .container p {
	font-size: 1.5rem
}

@media(max-width: 900px) {
	.f2 .container p {
		font-size: 1.125rem
	}
}

.selos {
	background: #272727;
	padding: 45px
}

.selos img {
	max-width: 700px;
	margin: 0 auto
}

@media(max-width: 900px) {
	.selos img {
		max-width: none;
		width: 100%
	}
}

.faq {
	background: #f9f9f9;
	padding: 100px 0
}

@media(max-width: 900px) {
	.faq {
		padding: 40px 15px
	}
}

.faq .title {
	text-align: center;
	font-size: 2.75rem;
	margin-bottom: 57px
}

@media(max-width: 900px) {
	.faq .title {
		font-size: 1.875rem
	}
}

.faq .accordion .accordion-item .accordion-header {
	color: #000;
	font-size: 1.875rem;
	line-height: 1.5;
	font-weight: 700;
	border-radius: 11px;
	border: 1px solid #fff;
	padding: 16px 20px;
	cursor: pointer;
	background: #efefef;
	display: grid;
	grid-template-columns: 1fr 18px;
	gap: 12px
}

@media(max-width: 900px) {
	.faq .accordion .accordion-item .accordion-header {
		font-size: 1.125rem
	}
}

.faq .accordion .accordion-item .accordion-header::after {
	content: "";
	width: 18px;
	height: 18px;
	background: url(../img/teenyicons_down-outline.svg);
	transition: transform .3s ease
}

.faq .accordion .accordion-item .accordion-header.active::after {
	transform: rotate(180deg)
}

.faq .accordion .accordion-item .accordion-body {
	border: 1px solid #ccc;
	border-top: none;
	border-bottom: none;
	max-height: 0;
	overflow: hidden;
	transition: max-height .3s ease
}

.faq .accordion .accordion-item .accordion-body p {
	color: #666;
	font-size: 1.125rem;
	line-height: 1.6;
	padding: 16px 20px
}

@media(max-width: 900px) {
	.faq .accordion .accordion-item .accordion-body p {
		font-size: 1rem
	}
}

.references {
	padding: 45px 0;
	background: #f5f5f5
}

.references h2 {
	font-size: 1.75rem;
	text-align: center;
	margin-bottom: 60px;
	font-weight: 500
}

@media(max-width: 900px) {
	.references h2 {
		font-size: 1.125rem
	}
}

.references img {
	max-width: 800px;
	margin: 0 auto 60px
}

@media(max-width: 900px) {
	.references img {
		max-width: none;
		width: 100%
	}
}

.references ul {
	-moz-column-count: 2;
	column-count: 2;
	gap: 48px
}

@media(max-width: 900px) {
	.references ul {
		-moz-column-count: 1;
		column-count: 1
	}
}

.references ul li {
	font-size: 0.875rem;
	margin-bottom: 14px;
	margin-left: 20px;
	list-style: decimal
}

footer {
	background: #111;
	padding: 16px 0;
	margin-top: 6px
}

@media(min-width: 900px) {
	footer {
		padding: 48px 0
	}
}

footer .copy,
footer p {
	text-align: center;
	display: block;
	color: #666;
	font-size: 0.875rem
}

footer p {
	margin-bottom: 20px
}

footer nav {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 50px;
	flex-wrap: wrap
}

footer nav a {
	font-size: 1.1875rem;
	color: #f8f9fa;
	padding: 8px 12px;
	text-transform: uppercase
}