/* Reset CSS */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
}

/** Reset das tags do HTML 5 **/
header, nav, section, article, aside, footer {display: block;}

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

::-webkit-scrollbar-track {
  background: #1D1D1D;
}

::-webkit-scrollbar-thumb {
  background: #ff4500;
  border-radius: 60px;
}

.box {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.50s ease-out, transform 0.50s ease-out;
}

.box.show {
    opacity: 1;
    transform: translateY(0);
}

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

body, html {
	font-family: "Poppins", serif;
	height: 100%;
	scroll-behavior: smooth;
	background: #101010;
}

body a {
	transition: 0.1s ease-in-out all;
	-webkit-transition: 0.1s ease-in-out all;
	-o-transition: 0.1s ease-in-out all;
}

body a:hover {
	transition: 0.1s ease-in-out all;
	-webkit-transition: 0.1s ease-in-out all;
	-o-transition: 0.1s ease-in-out all;
}

/******* HEADER *******/

header {
	width: 100%;
	position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: transform 0.3s ease;
	z-index: 2000;
	display: flex;
	transition: top 0.3s ease;
	margin-top: 24px;
}

/* LOGO */

.logo {
	font-size: 22px;
	font-weight: 500;
	color: #ff4500;
	text-decoration: none;
}

.logo:hover {
	color: #881A08;
}

/* NAV */

nav ul {
	font-size: 16px;
	font-weight: 300;
}

nav ul li {
	display: inline;
	list-style: none;
}

nav ul li a {
	text-decoration: none;
	margin: 0 10px;
	color: #ff4500;
}

nav ul li a:hover {
	color: #881A08;
}

/* HERO */

.hero {
	width: 100%;
	display: table;
	padding: 160px 0 100px 0;
}

.hero h1 {
	font-family: "Lora", serif;
	font-size: 110px;
	line-height: 110%;
	font-weight: 300;
	color: #ff4500;
	letter-spacing: -4px;
	margin-bottom: 40px;
}

.hero p {
	font-size: 28px;
	line-height: 150%;
	font-weight: 400;
	color: #ff4500;
}

.red-box {
	width: fit-content;
	height: 50px;
	display: flex;
  align-items: center;
	background: #101010;
	border: 1px solid #ff4500;
	padding: 10px 20px;
}

/******* VANTAGENS *******/

.vantagens {
	width: 100%;
	display: table;
	padding: 100px 0;
}

.vantagens small {
	font-size: 18px;
	font-weight: 300;
	color: #ff4500;
	text-transform: uppercase;
}

.vantagens h2 {
	font-family: "Lora", serif;
	font-size: 54px;
	line-height: 120%;
	font-weight: 300;
	color: #ff4500;
}

.vantagens article {
	height: 330px;
	padding: 30px;
	margin-bottom: 26px;
	border: 1px solid #881A08;
}

.vantagens article i {
	font-size: 28px;
	color: #ff4500;
}

.vantagens h3 {
	font-family: "Lora", serif;
	font-size: 26px;
	font-weight: 500;
	color: #ff4500;
}

.vantagens p {
	font-size: 18px;
	line-height: 140%;
	font-weight: 300;
	color: #ff4500;
}

/******* CASES *******/

.cases {
	width: 100%;
	display: table;
	padding: 100px 0;
}

.cases small {
	font-size: 18px;
	font-weight: 300;
	color: #ff4500;
	text-transform: uppercase;
}

.cases h2 {
	font-family: "Lora", serif;
	font-size: 54px;
	line-height: 120%;
	font-weight: 300;
	color: #ff4500;
}

.cases article {
	margin-bottom: 80px;
}

.cases .image-hover img {
	width: 100%;
	height: auto;
	transition: 0.1s ease-in-out all;
}

.cases .image-hover:hover {
  opacity: 0.5;
	transition: 0.1s ease-in-out all;
	border: 2px solid #ff4500;
}

.cases h3 {
	font-family: "Lora", serif;
	font-size: 32px;
	font-weight: 500;
	color: #ff4500;
	margin: 10px 0 5px 0;
}

.cases p {
	font-size: 16px;
	line-height: 130%;
	font-weight: 300;
	color: #ff4500;
}

.cases span {
	font-size: 14px;
	font-weight: 300;
	padding: 4px 12px;
	border: 1px solid #ff4500;
	color: #ff4500;
	border-radius: 120px;
	margin: 14px 4px 0 0;
	display: inline-block;
}

/******* DEPOIMENTOS *******/

.depoimentos {
	width: 100%;
	display: table;
	padding: 100px 0;
}

.depoimentos small {
	font-size: 18px;
	font-weight: 300;
	color: #ff4500;
	text-transform: uppercase;
}

.depoimentos h2 {
	font-family: "Lora", serif;
	font-size: 54px;
	line-height: 120%;
	font-weight: 300;
	color: #ff4500;
}

.depoimentos h3 {
	font-family: "Lora", serif;
	font-size: 26px;
	font-weight: 500;
	color: #ff4500;
}

.depoimentos p {
	font-size: 18px;
	font-style: italic;
	line-height: 160%;
	font-weight: 300;
	color: #ff4500;
}

.depoimentos h4 {
	font-size: 18px;
	font-weight: 600;
	color: #ff4500;
	letter-spacing: -1px;
	margin: 20px 0 0 0;
}

.depoimentos span {
	font-size: 18px;
	font-weight: 300;
	color: #ff4500;
}

/******* PLANOS *******/

.planos {
	width: 100%;
	display: table;
	padding: 100px 0;
}

.planos small {
	font-size: 18px;
	font-weight: 300;
	color: #ff4500;
	text-transform: uppercase;
}

.planos h2 {
	font-family: "Lora", serif;
	font-size: 54px;
	line-height: 120%;
	font-weight: 300;
	color: #ff4500;
}

.planos article {
	padding: 30px;
	border: 1px solid #881A08;
	transition: transform 0.1s;
}

.planos article:hover {
	animation: shake 0.5s ease-in-out;
}

.planos span {
	font-size: 24px;
	font-weight: 400;
	color: #ff4500;
	margin-bottom: 20px;
}

.planos h4 {
	font-size: 46px;
	font-weight: 500;
	color: #ff4500;
	letter-spacing: -2px;
}

.planos p {
	font-size: 18px;
	line-height: 140%;
	font-weight: 300;
	color: #ff4500;
	margin: 20px 0;
}

.planos hr {
	border: 2px solid #ff4500;
}

.planos ul {
	font-size: 18px;
	line-height: 200%;
	font-weight: 300;
	color: #ff4500;
	list-style: none;
}

/******* FAQ *******/

.faq {
	width: 100%;
	display: table;
	padding: 100px 0;
}

.faq small {
	font-size: 18px;
	font-weight: 300;
	color: #ff4500;
	text-transform: uppercase;
}

.faq h2 {
	font-family: "Lora", serif;
	font-size: 54px;
	line-height: 120%;
	font-weight: 300;
	color: #ff4500;
}

.faq article {
	height: 250px;
	padding: 30px;
	border: 1px solid #881A08;
	margin-bottom: 30px;
}

.faq h4 {
	font-size: 26px;
	font-weight: 500;
	color: #ff4500;
	letter-spacing: -1px;
}

.faq p {
	font-size: 18px;
	line-height: 140%;
	font-weight: 300;
	color: #ff4500;
}

/******* CONTRATE *******/

.contrate {
	width: 100%;
	display: table;
	padding: 60px 0;
	text-align: center;
}

.contrate h2 {
	font-family: "Lora", serif;
	font-size: 54px;
	line-height: 120%;
	font-weight: 300;
	color: #ff4500;
}

.contrate a {
	font-size: 50px;
	font-weight: 500;
	text-decoration: none;
	text-transform: uppercase;
	padding: 24px 40px;
	color: #ff4500;
	border: 2px solid #ff4500;
	display: block;
	margin-top: 60px;
	border-radius: 12px;
	transition: transform 0.1s;
}

.contrate a:hover {
	background: #ff4500;
	color: #101010;
	animation: shake 0.5s ease-in-out;
}

/******* FOOTER *******/

footer {
	width: 100%;
	display: table;
	clear: both;
	padding: 100px 0 60px 0;
	text-align: center;
}

footer h5 {
	font-size: 18px;
	font-weight: 300;
	color: #ff4500;
	margin-bottom: 4px;
}

footer p {
	font-size: 18px;
	line-height: 140%;
	font-weight: 200;
	color: #ff4500;
}

/******* CTA *******/

.cta {
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	position: fixed;
	bottom: 30px;
	right: 30px;
	background: #ff4500;
	color: #101010;
	padding: 12px 20px;
	text-decoration: none;
	z-index: 1000;
	border: 1px solid #ff4500;
	border-radius: 7px;
	transition: transform 0.1s;
}

.cta:hover {
	color: #ff4500;
	background: #101010;
	border: 1px solid #ff4500;
	animation: shake 0.5s ease-in-out;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
  }
  75% {
    transform: translateX(-5px);
  }
  100% {
    transform: translateX(0);
  }
}
















/** MEDIA QUERIES **/

@media (max-width: 768px) {

/******* HEADER *******/

header {
	margin-top: 14px;
}

/* LOGO */

.logo {
	font-size: 20px;
}

.logo:hover {
	color: #ff4500;
}

/* NAV */

nav {
	display: none !important;
}

/* HERO */

.hero {
	padding: 120px 0 60px 0;
}

.hero h1 {
	font-size: 54px;
	line-height: 120%;
	letter-spacing: -2px;
	margin-bottom: 30px;
}

.hero p {
	font-size: 22px;
	line-height: 150%;
}

/******* VANTAGENS *******/

.vantagens {
	padding: 60px 0;
}

.vantagens h2 {
	font-size: 36px;
	line-height: 120%;
}

.vantagens article {
	height: auto;
	padding: 20px;
	margin-bottom: 20px;
}

.vantagens p {
	font-size: 20px;
	line-height: 150%;
}

/******* CASES *******/

.cases {
	padding: 60px 0;
}

.cases h2 {
	font-size: 36px;
	line-height: 120%;
}

.cases article {
	margin-bottom: 40px;
}

/******* DEPOIMENTOS *******/

.depoimentos {
	padding: 60px 0;
}

.depoimentos h2 {
	font-size: 36px;
	line-height: 120%;
}

.depoimentos p {
	font-size: 20px;
	line-height: 140%;
}

.depoimentos h4 {
	font-size: 20px;
	margin: 10px 0 0 0;
}

.depoimentos span {
	font-size: 20px;
	display: table;
	margin-bottom: 40px;
}

/******* PLANOS *******/

.planos {
	padding: 60px 0;
}

.planos h2 {
	font-size: 36px;
	line-height: 120%;
}

.planos article {
	padding: 20px;
	margin-bottom: 20px;
}

/******* FAQ *******/

.faq {
	padding: 60px 0;
}

.faq h2 {
	font-size: 36px;
	line-height: 120%;
}

.faq article {
	height: auto;
	padding: 20px;
	margin-bottom: 20px;
}

.faq h4 {
	font-size: 24px;
}

/******* CONTRATE *******/

.contrate {
	padding: 0;
	text-align: center;
}

.contrate h2 {
	font-size: 32px;
}

.contrate a {
	width: 100%;
	font-size: 24px;
	display: table;
	margin-top: 20px;
}

/******* FOOTER *******/

footer {
	padding: 80px 0 100px 0;
}

/******* CTA *******/

.cta {
	width: auto;
	position: fixed;
	bottom: 10px;
	left: 10px;
	right: 10px;
	text-align: center;
	padding: 10px;
	font-size: 14px;
}



}