@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

:root {
    --preto: #201e1e;
    --azul:#003b6b;
    --azul2:#005486;
    --azul3:#749AB9;
	--verde:#aecb5c;	
	--cinza:#7b7b7b;
	
}
body {
	font-family: 'Outfit', sans-serif;
	 font-weight:300; 
	 color:var(--cinza); 
	 font-size:18px; 
	 overflow-x: hidden;
 }

 .sombra{
	-webkit-box-shadow: 0px 0px 50px -4px rgba(204,198,204,1);
	-moz-box-shadow: 0px 0px 50px -4px rgba(204,198,204,1);
	box-shadow: 0px 0px 50px -4px rgba(204,198,204,1);
 }

 .container{
	 max-width: 1160px;
	 
 }
ul, li {
	list-style: none; 
	 padding:0; 
	 margin:0; 
 }
a:hover { 
	text-decoration: none; 
 }
header{
	z-index: 9999; 
	 position: relative; 
	 height: 150px;
 }
h1{
	font-size: 0; 
	 width: 208px; 
	 height: 63px; 
	 margin-top: 55px;
}

.redesSociaisTopo{
	display: flex;
	flex-direction: row;
	justify-content: end;
	margin-top: 15px;
}
.redesSociaisTopo a{
	margin: 0 5px;
	color: var(--verde);
}
.redesSociaisTopo a:last-child{
	margin-right: 0;
}
#btWhatsappTopo{
	font-size: 14px;
	font-weight: 500;	
	border: 1px solid var(--verde);
	border-radius: 15px;
	padding: 0 15px;
	height: 30px;
	line-height: 30px;
}

#btWhatsappTopo i{
	font-size: 18px;
	
}

#menu{
	display: flex;
	flex-direction: row;
	justify-content: end;
	margin-top: 40px;
}
#menu a{
	font-size: 15px; 
	font-weight: 500;
	color: var(--azul);
	margin-right: 40px; 
}

#menu a::before {display: block;content: attr(title);font-weight: bold;height: 0;overflow: hidden;visibility: hidden;}

#menu a hr{
	width: 37px;
	height: 6px;
	background-color: var(--verde);
	border-radius: 3px;
	border: none;
	display: none;
}
#menu a:last-child
{
	margin-right: 0;
}
#menu a:hover, #menu a.hover{
	font-weight: bold; 
	color: var(--verde);
}

#menu a:hover hr, #menu a.hover hr
{
	display: block;
}


#banner{
	width: 100%; 
	height: 463px; 	

}

#carouselBanner .carousel-inner .carousel-item{
	background-position: center;
	background-size: cover;
	height: 463px;
	width: 100%;
}

#carouselBanner .carousel-inner .carousel-item h2{
font-size: 40px;
font-weight: 500;
color: #fff;
width: 390px;
margin: 80px 0 20px;
}

#carouselBanner .carousel-inner .carousel-item h3{
font-size: 25px;
font-weight: 300;
width: 305px;
margin-bottom: 30px;
color: #fff;
}

#carouselBanner .carousel-inner .carousel-item a{
	font-size: 17px;
	font-weight: 600;
	color: var(--verde);
	width: 240px;
	height: 60px;
	line-height: 55px;
	border: 2px solid var(--verde);
	border-radius: 30px;
	display: inline-block;
	text-align: center;

}
.carousel-control-next, .carousel-control-prev
{
	opacity: 1;
	color: var(--verde);
}
.carousel-control-next i, .carousel-control-prev i{
	font-size: 24px;
}
#carouselBanner .carousel-indicators li{
	width: 16px;
	height: 16px;
	border-radius: 100%;
	background-color: var(--azul);
}
#carouselBanner .carousel-indicators li.active{
	background-color: var(--verde);
}

h2.titulo{
	font-size: 56px;
	color: var(--verde);
	font-weight: 500;
	margin-bottom: 50px;
}

p{
	font-size: 18px;
	font-weight: 300;
	color: var(--cinza);
	line-height: 150%;
}

#sobre{
	margin-top: 70px;
}

#imgSobre1{
	width: 340px;	
	border-radius: 25px;
}

#imgSobre2{
	width: 260px;	
	border-radius: 25px;
	position: absolute;
	bottom: 50px;
    right: 85px;
}

#comoFunciona{
	margin-top: 70px;
	background-image: url(../imagens/comoFunciona.png);
	height: 620px;
	width: 100%;
	background-size: cover;
	padding-top: 140px;
}

#comoFunciona p{
	color: #fff;
}

#diferenciais{
	margin-top: 70px;
}

#listaDiferenciais{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

#listaDiferenciais div{
	background-color: var(--verde);
	width: 220px;
	height: 350px;
	margin-right: 50px;
	border-radius: 25px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

#listaDiferenciais div p{
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	margin-top: 20px;
}

#listaDiferenciais div p span{
	font-size: 13px;
}

#produtos{
	margin-top: 70px;
}

.pad{
	padding: 70px 100px 0 100px;
}

#produtos .tag {
	position: absolute;
	z-index: 3;
	left: 100px;
	background: white;
	color: var(--azul2);
	border-radius: 10px;
	font-size: 12px;
	padding: 0 14px;
	top: 45px;
}
#produtos h3{
	text-transform: uppercase;
	font-size: 25px;
	color: var(--verde);
	font-weight: 600;
	position: relative;
	z-index: 3;
	margin-bottom: 20px;
}

#produtos p{
	color: #fff;
	font-size: 18px;
	font-weight: 300;
	position: relative;
	z-index: 3;
}

#produtos .navegadores{
	position: relative;
	z-index: 3;
	margin: 40px 0;
}
#produtos .navegadores button{
	width: 58px;
	height: 58px;
	border: none;
	border-radius: 100%;
	background-color: var(--verde);
	color: #fff;
	margin-right: 10px;
}
.bgProduto{
	position: absolute;
	background: var(--azul2);
	height: 100%;
	width: 100vw;
	left: 0;
	top: 0;
	border-radius: 40px 0 0 40px;
	z-index: 2;
	
}

#carouselProdutos .carousel-inner{
	overflow: visible;
}
#contato{
	margin-top: 70px;
}

form input, form textarea{
	height: 50px;
	font-size: 20px;
	color: var(--verde);
	font-weight: 300;
	padding-left: 30px;
	width: 100%;
	border: none;
	margin-bottom: 10px;
	border-bottom: 3px solid var(--verde);
	border-bottom-left-radius: 25px;
}

form textarea{
	height: 120px;
	width: 100%;
}

form button{
	width: 200px;
	height: 50px;
	border-radius: 25px;
	text-align: center;
	line-height: 50px;
	color: #fff;
	background-color: var(--verde);
	font-size: 20px;
	font-weight: 300;
	border: none;
}

#msgErro, #msgSucesso{
	display: none;
}
footer{
	background: var(--azul);
	padding-top: 40px;
	margin-top: 120px;	
	color: var(--azul3);
	font-weight: 400;
	font-size: 16px;
}

footer a{
    color: var(--azul3);
	font-weight: 400;
	font-size: 16px;

}

footer a:hover
{
	color: var(--azul3);
}

footer i{
	color: var(--verde);
	font-size: 18px;
}

.redeSocial i{
	font-size: 24px;
	margin-left: 10px;
}

#menuRodape{
	display: flex;
	flex-direction: column;
}

#menuRodape a{
	margin-bottom: 5px;
}
.bg-transition{
	position: fixed; 
	 background: #fff; 
	 
	 z-index: 9; 
	 top: 0;
	 -webkit-box-shadow: 0px 10px 12px -7px rgba(125,121,125,1);
	-moz-box-shadow: 0px 10px 12px -7px rgba(125,121,125,1);
	box-shadow: 0px 10px 12px -7px rgba(125,121,125,1);
	height: 95px;
}

.bg-transition .redesSociaisTopo{
	display: none;
}

.bg-transition h1 {
    font-size: 0;
    width: 180px;
    height: 60px;
    margin-top: 15px;
}

.bg-transition #menu{
	margin-top: 35px;
}

header.bg-transition #bt-menu{
	top: 2vh;
	border: none;
}

.alert{ border-radius: 0;}
.alert-primary{background-color: var(--azul); color: var(--azul2);}
/*-lg*/
@media (max-width: 1199.98px) {

}

/*-md*/
@media (max-width: 991.98px) {

	#menu a{
	
		margin-right: 20px; 	
	}

	#carouselBanner .carousel-item div img{
		width: 100%;
	}

	#imgSobre1{
		width: 100%;	
		position: relative;		
	}
	
	#imgSobre2{
		display: none;
	}

	#comoFunciona{
		background-size: auto;
		background-position: center;
		background-repeat: no-repeat;
	}

}

/*-sm*/
@media (max-width: 767.98px)  {
	header #bt-menu {
		display: flex; 
		 flex-direction: column; 
		 justify-content: center; 
		 align-items: center; 
		 background: #FFFFFF; 
		 border: none; 
		 right: 7vw; 
		 top: 7vh; 
		 position: fixed; 
		 font-size: 22px; 
		 color: var(--azul); 
		 width: 40px; 
		 height: 40px; 
		 line-height: 40px; 
		 text-align: center; 
		 z-index: 991; 
		 border:1px solid var(--azul) }	
	#menu-titulo{
		color: #fff; 
		 font-size: 28px; 
	}
    #menu {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		 position: fixed; 
		 top: 0; 
		 left: 100vw; 
		 opacity: 0; 
		 background-color: var(--azul); 
		 height: 100vh; 
		 width: 100vw; 
		 transition: left .4s, opacity .4s; 
		 z-index:99; 
		 margin-top: 0;
		 		 
	 }
	#menu.active {
		left: 0; 
		opacity: 1; 
	 }

	 .bg-transition #menu
	 {
		 margin-top: 0;
	 }
	

	#menu a {
		font-size:20px; 
		margin: 0 0 20px; 
		color: #fff;
	 }
	 #menu a:hover, #menu a.hover {
		 color: #fff;
		 font-weight: bold;
	 }
	 h2.titulo{
		 font-size: 36px;
		 margin-bottom: 20px;
	 }
	 #listaDiferenciais div{
		 margin-right: 10px;
	 }

	 .pad {
		padding: 30px;
	}
	
}
/*-mobile*/
@media (max-width: 575.98px) {
	#btWhatsappTopo
	{
		display: none;
	}
	#banner
	{
		height: 350px;
	}
	#carouselBanner .carousel-inner .carousel-item{
		height: 350px;
	}
	#carouselBanner .carousel-inner .carousel-item h2
	{
		font-size: 28px;
		width: 200px;
		margin-top: 30px;
	}
	#carouselBanner .carousel-inner .carousel-item h3{
		width: 270px;
		font-size: 20px;
	}

	#carouselBanner .carousel-inner .carousel-item a {
		font-size: 16px;			
		width: 200px;
		height: 50px;
		line-height: 45px;		
	}
	.carousel-control-next, .carousel-control-prev{
		display: none;
	}

	#listaDiferenciais {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#listaDiferenciais div {
		
		width: 80%;
		height: auto;
		margin-bottom: 20px;
	}

	.bgProduto {
	
		width: 95vw;
		right: 0;
		left: unset;
	
	}
	.redeSocial i{
		
		margin: 10px;
	}
}