:root {

	/* COLORS */

	--color-blue: #0762D9;
	--color-blue-bg: #004caf;
	--color-blue-drop: #0762D910;

	--color-yellow: #FDC21E;
	--color-yellow-drop: #FDC21E20;

	--color-text: #212529;

}

body {

	font-family: Poppins;
	overflow-x: hidden;
	background: url('../img/background.svg');

}

a {
	text-decoration: none !important;
	text-decoration-color: currentColor !important;
}

/* DIV TITLE */

div.title {

	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 15px;

	margin-bottom: 25px;

}

div.title h3 {

	font-size: 20pt;
	font-weight: 600;
	letter-spacing: -.4px;

	margin-bottom: 0px;

}

div.title p {

	margin-bottom: 0px;
	font-weight: 300;
	text-align: center;
	color: #343a40ac;

}

div.title hr {

	width: 30px;
	margin: 0px;

	border-color: var(--color-yellow);
	border-width: 4px;
	opacity: 1;

}

/* DIV IMAGE */

div.image {
	width: 100%;
}

div.image img {
	width: 100%;
}

/* CONTENT TEXT */

div.content p {

	font-size: 12pt;
	font-weight: 300;
	line-height: 165%;


}

/* BUTTONS */

button.regular {

	line-height: 100%;
	font-size: 11pt;
	font-weight: 400;
	padding: 15px 30px;
	border-radius: 25px;

	background: transparent;
	border: 1px solid var(--color-blue);
	color: var(--color-blue);

	display: flex;
	justify-content: center;
	align-items: center;

	gap: 15px;
	white-space: nowrap;

	transition: all 300ms ease;

}

button.regular svg {
	height: 22px;
}

button.regular:hover {

	background: var(--color-blue);
	color: #ffffff;

}

button.fill {

	line-height: 100%;
	font-size: 11pt;
	font-weight: 500;
	padding: 15px 30px;
	border-radius: 25px;

	background: var(--color-blue);
	border: 1px solid var(--color-blue);
	color: #ffffff;

	display: flex;
	justify-content: center;
	align-items: center;

	gap: 15px;
	white-space: nowrap;

	transition: all 300ms ease;

}

button.fill svg {
	height: 22px;
}

button.fill:hover {

	background: var(--color-blue-bg);
	border-color: var(--color-blue-bg);
	color: #ffffff;

}

button.fill-black {

	line-height: 100%;
	font-size: 11pt;
	font-weight: 500;
	padding: 15px 30px;
	border-radius: 25px;

	background: var(--color-blue-bg);
	border: 1px solid var(--color-blue-bg);
	color: #ffffff;

	display: flex;
	justify-content: center;
	align-items: center;

	gap: 15px;
	white-space: nowrap;

	transition: all 300ms ease;

}

button.fill-black svg {
	height: 22px;
}

button.fill-black:hover {

	background: var(--color-blue-bg);
	border-color: var(--color-blue-bg);
	color: #ffffff;

}

/* TOPBAR */

#topbar .topbar__content .topbar__brand img {
	height: 120px;
}

#topbar .topbar__content {

	display: flex;
	justify-content: space-between;
	align-items: center;

	padding: 25px 0px;

}

#topbar .topbar__content .topbar__menu {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 35px;
}

#topbar .topbar__content .topbar__menu p {

	font-size: 10pt;
	font-weight: 400;
	color: #343a40;

	margin-bottom: 0px;
	cursor: pointer;

	transition: all 300ms ease;

}

#topbar .topbar__content .topbar__menu p:hover {
	color: #000000;
}

#topbar .topbar__content .topbar__buttons {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
}

/* RIGHT TEXT */

.right__text {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 15px;
}

.right__text h1 {
	font-size: 45pt;
	font-weight: 800;
	line-height: 100%;
	letter-spacing: -.4px;
	color: var(--color-text);
}

.right__text h1 b {
	font-weight: 800;
	color: var(--color-yellow);
}

.right__text p {
	font-size: 19pt;
	font-weight: 300;
	line-height: 130%;
	color: var(--color-text);
}

.right__text .right__buttons {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 15px;
}

.right__badge {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 15px;

	padding: 5px 20px 5px 5px;
	background: #ffffff;
	box-shadow: 0px 0px 100px 10px #00000010;
	border-radius: 100px;

	margin-bottom: 20px;
}

.right__badge p {
	font-size: 11pt;
	margin-bottom: 0px;
}

.right__badge .badge__icon {

	display: flex;
	justify-content: center;
	align-items: center;

	width: 35px;
	height: 35px;

	background: var(--color-yellow-drop);
	border-radius: 50px;

}

.right__badge svg {
	width: 12px;
	fill: var(--color-yellow);
}

/* SECTION DIVIDER */

#divider {

	background: var(--color-blue);

	padding: 20px 0px;

}

#divider .divider__social {

	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;

}

#divider .divider__social .social__item {

	width: 30px;
	height: 30px;

	display: flex;
	justify-content: center;
	align-items: center;

	border-radius: 35px;

	background: #ffffff;

}

#divider .divider__social .social__item svg {
	width: 15px;
	fill: var(--color-blue);
}

#divider .social__text p {
	margin-bottom: 0px;
	font-size: 9pt;
	margin-left: 5px;
	color: #ffffff;
	font-weight: 200;
	line-height: 100%;
}

/* QUEM SOMOS */

#quem-somos {

	padding: 75px 0px;

}

/* HOW ITEM */

.how__item {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	gap: 25px;

	margin-bottom: 30px;
}

.how__item:last-child {
	margin-bottom: 0px;
}

.how__item .how__step {
	height: 50px;
	min-height: 50px;
	width: 50px;
	min-width: 50px;

	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50px;

	color: var(--color-yellow);
	background: var(--color-yellow-drop);
}

.how__item svg {
	height: 19px;
	fill: currentColor;
}

.how__item .how__content {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	flex-direction: column;
	gap: 10px;
}

.how__item .how__content p.title {
	font-size: 14pt;
	font-weight: 500;
	margin-bottom: 0px;
	color: #080807;
}

.how__item .how__content p.content {
	font-size: 12pt;
	font-weight: 300;
	margin-bottom: 0px;
	color: #343A40;
}

/* COMO FUNCIONA */

#como-funciona {

	padding: 75px 0px;

}

/* POR QUE ESCOLHER O MINERA */

#por-que {

	padding: 75px 0px;

}

#por-que .why__row {
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	align-items: stretch;
	gap: 15px;
}

#por-que .why__row .why__item {
	padding: 25px;
	border-radius: 55px;
	background: #ffffff;
	border: 1px solid #0762D910;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 25px;
}

#por-que .why__row .why__item .why__icon {
	width: 60px;
	min-width: 60px;
	height: 60px;
	min-height: 60px;
	color: var(--color-blue);
	background: var(--color-blue-drop);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 25px;
}

#por-que .why__row .why__item .why__icon svg {
	width: 20px;
	fill: currentColor;
}

#por-que .why__row .why__item p.title {
	font-size: 12pt;
	font-weight: 500;
	margin-bottom: 8px;
	line-height: 100%;
}

#por-que .why__row .why__item p.content {
	font-size: 11pt;
	font-weight: 300;
	margin-bottom: 0px;
	line-height: 140%;
}

#por-que .why__buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 35px;
}


/* CTA */

#cta {
	padding: 100px 0px;
	background: #ffffff;
}

/* CTA FORM */

#cta .input__row {
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	padding: 0px 0px;
}

.input__box {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	align-items: stretch;
	flex-direction: column;
	gap: 5px;
}

.input__box label {
	font-size: 9pt;
	font-weight: 400;
	line-height: 100%;
}

.input__box label b {
	font-weight: 400;
	color: var(--color-yellow);
}

.input__box .input__item {
	border: 1px solid #08080710;
	border-radius: 25px;
	overflow: hidden;
}

.input__box input {
	width: 100%;
	background: transparent;
	border: none;
	padding: 12px 20px;	
	border-radius: 25px;
	font-size: 10pt;
	font-weight: 300;
}

label.checkbox {
	font-size: 9pt;
	font-weight: 300;
	margin: 20px 0px 25px 0px;
	color: #343a40;
}

label.checkbox input {
	width: 14px;
	height: 14px;
	margin-right: 5px;
	margin-top: 1px;
	border-radius: 5px !important;
}

label.checkbox input:focus {
	box-shadow: none !important;
	border-color: transparent !important;
}

label.checkbox input:checked {
    background-color: var(--color-yellow);
    border-color: var(--color-yellow);
}

#cta .buttons {
	width: 100%;
	padding: 0px;
}

#cta .buttons button {
	width: 100%;
	transition: all 300ms ease;
	height: 47px;
}

#cta .buttons button svg {
	width: 15px;
	fill: white !important;
}


/* PERGUNTAS FREQUENTES */

#perguntas-frequentes {
	padding: 75px 0px;
}

#perguntas-frequentes .accordion {
	border-radius: 45px;
	overflow: hidden;
	box-shadow: 0px 0px 250px #08080710;
}

#perguntas-frequentes .accordion .accordion-button {
	padding: 20px 35px;
	font-size: 12pt;
	font-weight: 300;
	border-color: #343a4010;
}

#perguntas-frequentes .accordion .accordion-body {
	font-size: 11pt;
	font-weight: 300;
	background: #fafafa;
	padding: 20px 35px;
	color: #343a40;
}

#perguntas-frequentes .accordion .accordion-button:focus {
	box-shadow: none !important;
}

#perguntas-frequentes .accordion .accordion-item {
	border-color: #343a4008;
}

#perguntas-frequentes .accordion .accordion-item:first-child .accordion-button {
	padding-top: 25px;
}

#perguntas-frequentes .accordion .accordion-item:last-child .accordion-button {
	padding-bottom: 25px;
}

#perguntas-frequentes .accordion .accordion-button:not(.collapsed) {
	color: #000000 !important;
	background: #ffffff !important;
	box-shadow: none !important;
}

#perguntas-frequentes .accordion .accordion-button::after {
	width: 15px !important;
	height: 15px !important;
	background-size: 15px !important;
	opacity: .1 !important;
}

#perguntas-frequentes .accordion .accordion-button:not(.collapsed)::after {
	width: 15px !important;
	height: 15px !important;
	background-size: 15px !important;
	opacity: .5 !important;
}

/* LAST CTA */

#last-cta {
	padding: 75px 0px;
}

.cta__content {
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	gap: 10px;

	padding: 100px 0px;
	background: var(--color-blue);
	border-radius: 175px;
}

.cta__content h1 {
	font-size: 25pt;
	font-weight: 700;
	color: #ffffff;
	width: 50%;
}

.cta__content p {
	font-size: 13pt;
	font-weight: 300;
	color: #ffffff99;
}

.cta__content button {
	text-transform: uppercase;
}


/* FOOTER */

#footer {
	background: #f7f7f7 !important;
}

#footer p {
	font-size: 8pt;
	font-weight: 300;
	color: #343a40ac;
	padding: 15px 0px;
	text-align: center;
	width: 100%;
	margin-bottom: 0px;
	line-height: 100%;
}


/* SPIN SVG */

.spin__svg {
	animation: girar 2s linear infinite;
}

@keyframes girar {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}


/* FOOTER BUTTONS */

#footer__buttons {
	position: fixed;
	bottom: 50px;
	right: 20px;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	flex-direction: column;
}

#footer__whatsapp {
	width: 65px;
	height: 65px;
	background: #4fce5d;
	display: flex;
	justify-content: center;
	align-items: center;
	border: none;
	border-radius: 50px;
	color: #ffffff;
	transition: all 500ms ease;
}

#footer__whatsapp svg {
	width: 30px;
	fill: currentColor;
}

#footer__whatsapp:hover {
	transform: translateY(-10px);
}


/* RESPONSIVIDADE */

@media screen and (max-width: 768px) {

	.col-0 {
		display: none !important;
	}

	.hero__image img {
		width: 100%;
	}

	.topbar__menu {
		display: none !important;
	}

	.topbar__buttons a:last-child {
		display: none !important;
	}

	#inicio .right__badge p {
		font-size: 10pt;
	}

	#inicio h1 {
		text-align: center;
		font-size: 35pt;
	}

	#inicio p {
		font-size: 14pt;
		text-align: center;
	}

	#inicio .right__buttons {
		flex-direction: column !important;
		width: 100%;
	}

	#inicio .hero__image {
		margin-top: 55px;
	}

	.cta__content {
		padding: 50px 25px;
		border-radius: 0px;
		gap: 0px;
	}

	.cta__content h1 {
		width: 100%;
		font-size: 18pt;
		font-weight: 600;
	}

	section {
		padding: 50px 0px !important;
	}

	section#divider {
		padding: 20px 0px !important;
	}

	#quem-somos .image {
		margin-top: 35px;
		padding: 0px !important;
	}

	#last-cta {
		padding: 0px !important;
	}

	#footer {
		padding: 0px !important;
	}

	#inicio {
		padding: 0px !important;
	}

	.right__text {
		align-items: center !important;
	}

}