/* Folhas de estilos*/
@import 'main.css';

.banner{
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-size: cover;
	background-position: center;
}

.banner .container, .banner .row{
	height: 100%;
}

.no-webp .banner{
	background-image: url('../img/banner.jpg');
}

.webp .banner{
	background-image: url('../img/banner.webp');
}

.banner h1{
	font-weight: 400;
	font-size: 3em;
	color: #fff;
	margin: 0;
	line-height: 60px;
	margin-bottom: 15px;
	font-style: italic;
	text-align: center;
}

.banner h1 i{
	font-weight: 700;
	font-style: italic;
}

.banner h1 b{
	font-weight: 700;
	font-style: italic;
	color: #0CCE0C;
	font-size: 1.5em;
}

.banner p{
	color: #fff;
	font-style: italic;
	font-size: 1.125em;
	text-align: center;
	margin-bottom: 50px;
}

.banner p b{
	font-weight: 700;
}

/*About=============================*/
.about{
	padding: 120px 15px;
}

.about img{
	width: 100%;
}

.text-about{
	font-size: 1.125em;
	color: #848484;
}

/*Numbers=============================*/
.numbers{
	padding: 120px 15px;
	background-color: #2A14E0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.no-webp .numbers{
	background-image: url('../img/numbers-fundo.png');
}

.webp .numbers{
	background-image: url('../img/numbers-fundo.webp');
}

.numbers .title-2{
	text-align: center;
	margin-bottom: 50px;
}

.numbers .title-2 span{
	margin: auto;
}

.icon-numbers{
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.icon-numbers .svg{
	width: 100%;
	height: 50px;
	margin-bottom: 30px;

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

.icon-numbers .svg svg{
	height: 50px;
	margin:0 auto;
}

.icon-numbers h5{
	font-size: 4.5em;
	color: #0CCE0C;
	font-weight: 700;
	text-align: center;
	margin-bottom: 25px;
	line-height: 20px;
	display: inline-flex;
}

.icon-numbers p{
	font-size: 1.125em;
	color: #fff;
	font-weight: 500;
	text-align: center;
	font-style: italic;
	text-transform: uppercase;
}

/*Como Funciona?===================*/
.how-works{
	padding: 120px 15px;
}

.how-works .title-1{
	text-align: center;
	margin-bottom: 30px;
}

.how-works .title-1 span{
	margin: auto;
}

.how-works p{
	font-size: 1.25em;
	color: #848484;
	font-style: italic;
	margin-bottom: 30px;
	text-align: center;
}

.how-works img{
	width: 100%;
}

.text-how-works h5{
	color: #0CCE0C;
	font-weight: 700;
	font-size: 1.5em;
	margin-bottom: 20px;
}

.text-how-works .icon-text{
	display: flex;
	margin-bottom: 20px;
}

.text-how-works .icon-text h6{
	font-size: 3.25em;
	color: #2A14E0;
	font-weight: 700;
	margin-right: 20px;
}

.text-how-works .icon-text p{
	font-size: 1.125em;
	color: #707070;
	line-height: 20px;
	text-align: left;
	margin-bottom: 0;
}

.text-how-works .icon-text p b{
	color: #2A14E0;
	font-weight: 700;
}

.how-works .button-banner{
	background: #2A14E0;
	color: #fff;
}

.how-works .button-banner:hover{
	color: #fff;
	background: #0CCE0C;
}

/*WhtasApp=========================*/
.whats-app{
	padding: 120px 15px;
}

.no-webp .whats-app{
	background-image: url('../img/whats-app-fundo.png');
}

.webp .whats-app{
	background-image: url('../img/whats-app-fundo.webp');
}

.whats-app h2{
	margin-bottom: 50px;
	font-weight: 400;
	text-align: center;
	font-size: 4.5em;
	color: #fff;
}

.whats-app h2 b{
	font-weight: 700;
	font-style: italic;
}

.whats-app .button-banner{
	color: #0CCE0C;
}

.whats-app .button-banner:hover{
	color: #fff;
	background: #2A14E0;
}

/*Dúvidas Frequentes===================*/
.question{
	padding: 120px 15px;
}

.question .title-1{
	text-align: center;
	margin-bottom: 30px;
}

.question .title-1 span{
	margin: auto;
}

.question .button-banner{
	background: #2A14E0;
	color: #fff;
}

.question .button-banner:hover{
	color: #fff;
	background: #0CCE0C;
}

.question .accordion-item{
	border-color: #2A14E0;
}

.question .accordion-item:first-of-type, .accordion-item:first-of-type .accordion-collapse{
	border-top-left-radius: 20px;
	border-top-right-radius: 20px;
}

.question .accordion-item:last-of-type, .accordion-item:last-of-type .accordion-collapse{
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
}

.question .accordion-item:first-of-type .accordion-button{
	border-top-left-radius: calc(20px - 1px);
	border-top-right-radius: calc(20px - 1px);
}

.question .accordion-item:last-of-type .accordion-button{
	border-bottom-left-radius: calc(20px - 1px);
	border-bottom-right-radius: calc(20px - 1px);
}

.question .accordion-button{
	color: #2A14E0;
}

.question .accordion-button:not(.collapsed){
	color: #fff;
	background: #2A14E0;
}

.question .accordion-button::after{
	background-image: url(../img/arrow-blue.svg);
}

.question .accordion-button:not(.collapsed)::after{
	background-image: url(../img/arrow-white.svg);
}

.question .accordion-body{
	color: #848484;
}

/*Contato*/
.contact{
	background: #2A14E0;
}

.info-contact{
	padding: 50px 15px;
}

.info-contact .title-1 span{
	margin-bottom: 15px;
}

.info-contact .title-1 p{
	color: #fff;
	font-weight: 400;
	font-style: italic;
	margin-bottom: 0;
}

.info-contact .title-1 p i{
	font-weight: 700;
	color: #0CCE0C;
	font-size: 1.125em;
}

/*Redes Sociais*/
.info-contact .redes{
	margin-bottom: 30px;
}

.info-contact .redes a{
	float: left;
}

.info-contact .redes .icon-rede{
	background: #fff;
}

.info-contact .redes .icon-rede:hover{
	background: #0CCE0C;
}

.icon-rede:hover path{
	fill: #2A14E0 !important;
}

.info-contact .redes a:first-child .icon-rede{
	margin-right: 5px;
}

.info-contact .local{
	margin-bottom: 25px;
}

.info-contact .local a{
	color: #fff;

	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

.info-contact .local a:hover{
	color: #0CCE0C;
}

/*Formulário*/
.info-contact .form input, .info-contact .form textarea{
	width: 100%;
	height: 40px;
	border: 1px solid #fff;
	border-radius: 20px;
	background: transparent;
	padding: 11px 15px;
	color: #fff;
	font-size: 1em;
	font-weight: 400;
	margin: 5px 0;

	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

.info-contact .form textarea{
	height: 120px;

	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

.info-contact .form input::placeholder, .info-contact .form textarea::placeholder{
	color: #fff;
	font-size: 1em;
	font-weight: 400;

	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

.info-contact .form input:focus, .info-contact .form textarea:focus{
	outline: none;
	background: #fff;
	color: #2A14E0;
}

.info-contact .form input:focus::placeholder, .info-contact .form textarea:focus::placeholder{
	color: #2A14E0;
}

.info-contact .form button{
	border-radius: 20px;
	width: 150px;
	height: 40px;
	background: #fff;
	color: #2A14E0;
	border:0;
	font-weight: 700;

	transition: all 0.3s ease-in-out;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	-o-transition: all 0.3s ease-in-out;
}

.info-contact .form button:hover{
	background: #0CCE0C;
}

.contact #map{
	height: 100%;
}

/*Responsive=======================*/

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

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

@media screen and (max-width: 991px){
	.about{
		text-align: center;
	}

	.about .title-1, .contact .title-1{
		text-align: center;
		margin-bottom: 30px;
	}

	.about .title-1 span, .contact .title-1 span{
		margin: auto;
	}

	.numbers{
		padding: 80px 15px;
		background-size: auto 120%;
	}

	.icon-numbers h5{
		font-size: 3em;
	}

	.text-how-works h5{
		text-align: center;
	}

	.contact .title-1 span{
		margin-bottom: 15px;
	}

	.contact .redes{
		display: -webkit-flex;
		display: flex;
		-webkit-align-items: center;
		align-items: center;
		-webkit-justify-content: center;
		justify-content: center;
	}

	.contact .local{
		text-align: center;
	}

	.contact .form button{
		margin:0 auto;
	}

	.whats-app{
		padding: 80px 15px;
	}

	.whats-app h2{
		font-size: 3em;
	}
}

@media screen and (max-width: 767px){
	.banner h1{
		font-size: 2.5em;
		line-height: 50px;
	}

	.banner h1 b{
		font-size: 1.4em;
	}

	.banner p{
		margin-bottom: 30px;
		line-height: 18px;
	}

	.button-banner{
		width: 300px;
	}
}