@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
/* font-family: "Inter", sans-serif; */
*{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	text-decoration: none;
	outline: none;
	font-family: "Inter", sans-serif;
}

body{
	background: #f1f6fc31;
}

section, footer{
	padding: 54px 0;
}

h3{
	font-size: 50px;
	color: #263238;
}

p{
	color: #0000009c;
}

header{
	background-image: url('../img/background-home.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	width: 100%;
}

nav{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-top: 30px;
}

nav ul{
	display: flex;
	align-items: center;
}

nav ul a{
	color: white;
	margin: 0 25px;
	text-transform: uppercase;
	font-size: 14px;
	display: block;
}

nav ul a:not(.btn):after{
	content:"";
	background: #4f9cf9;
	height: 3px;
	width: 0%;
	margin: 0 auto;
	display: block;
	transition: 0.3s;
}

nav ul a:hover::after{
	width: 100%;
}

/* Menu mobile */
nav .menu-icon{
	cursor: pointer;
	font-size: 23px;
	color: white;
	display: none;
}

nav .close-icon{
	font-size: 30px;
	color: white;
	display: none;
}

.container{
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 5%;
}

.btn{
	background: #4f9cf9;
	color: white;
	padding: 15px 20px;
	border-radius: 10px;
	cursor: pointer;
	display: inline-block;
	transition: 0.1s;
}

.btn.animate-btn{
	animation: animate-outline 1s ease-out infinite;
}

.btn:hover{
	background: #3580db;
}

@keyframes animate-outline{
	from{
		outline: 0px solid #4f9bf98a;
	}
	to{
		outline: 15px solid #4f9bf900;
	}
}

.banner{
	display: flex;
	justify-content: center;
}

.banner .banner-text{
	margin: 150px;
	text-align: center;
	padding: 0 90px;
}

.banner .banner-text h1{
	font-size: 96px;
	color: white;
}

.banner .banner-text p{
	font-size: 21px;
	color: #ffffffb7;
	font-weight: 200; /*lighter;*/
	margin: 18px 0;
}

.faca-mais .container{
	display: flex;
	align-items: center;
}

.faca-mais .faca-mais-text{
	width: 50%;
	padding: 0 40px;
}

.faca-mais .faca-mais-text h3{
	font-size: 56px;
}

.faca-mais .faca-mais-text p{
	margin: 5px 0 10px 0;
}

.faca-mais .faca-mais-img{
	width: 50%;
}

.faca-mais .faca-mais-img img{
	width: 100%;
}

.depoimentos h3{
	text-align: center;
}

.depoimentos p{
	margin-bottom: 20px;
	text-align: center;
}

.cards{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.depoimentos .card-item{
	background: #d3e6fd;
	margin: 15px;
	border-radius: 14px;
	text-align: center;
	width: 350px;
	transition: 0.3s;
}

.depoimentos .card-item img{
	border-radius: 100%;
	width: 80px;
	display: block;
	margin: 10px auto;
	border: 2px solid #4f9cf9;
	transition: 0.2s;
}

.depoimentos .card-item .nome-user{
	font-weight: 600;
	font-size: 20px;
	margin-bottom: 15px;
	transition: 0.3s;
}

.depoimentos .card-item .depoimento-user{
	font-size: 15px;
	padding: 0 15px;
	transition: 0.3s;
}

.depoimentos .card-item .estrelas{
	margin: 15px 0;
	border-top: 1px solid #71767a23;
	transition: 0.3s;
}

.depoimentos .card-item .estrelas i{
	color: #ffcc32;
	margin-top: 13px;
	font-size: 17px;
}

.depoimentos .card-item:hover{
	background: #4f9cf9;
	margin-top: -5px;
}

.depoimentos .card-item:hover img{
	border: 2px solid #d3e6fd;
}

.depoimentos .card-item:hover .nome-user,
.depoimentos .card-item:hover .depoimento-user{
	color: white;
}

.depoimentos .card-item:hover .estrelas i{
	color: #d3e6fd;
}

.clientes h3, 
.clientes p{
	text-align: center;
}

.clientes .container div{
	display: flex;
	align-items: center;
	justify-content: space-around;
	flex-wrap: wrap;
}

.footer{
	background: #4f9cf9;
	background-image: url(../img/background-rfooter.jpg);
	text-align: center;
}

.footer i{
	color: #4f9cf9;
	font-size: 19px;
	background: white;
	width: 39px;
	padding: 10px;
	margin: 3px;
	border-radius: 10px;
	transition: 0.2s;
}

.footer i:hover{
	background: #d3e6fd;
	color: #3580db;
}

.footer p{
	margin-top: 20px;
	color: white;
}

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

.sobre .sobre-text{
	width: 50%;
	padding-right: 40px;
}

.sobre .sobre-text p{
	margin: 18px 0;
	color: #000000a6;
}

.sobre .sobre-img{
	width: 50%;
}

.sobre .sobre-img img{
	width: 100%;
	border-radius: 10px;
}

.sobre-footer{
	background-image: none;
}

/* Página projetos */
.projetos h3{
	text-align: center;
}

.projetos .container > p{
	text-align: center;
}

.projetos .rows-cards{
	display: flex;
	justify-content: center;
	margin-top: 20px;
	flex-wrap: wrap;
}

.projetos .row-card-item{
	background: #d3e6fd;
	width: 350px;
	padding: 20px;
	border-radius: 14px;
	margin: 20px;
	transition: 0.3s;
}

.projetos .row-card-item:hover{
	background: #4f9cf9;
}

.projetos .row-card-item img{
	background: #4f9cf9;
	border: 2px solid #184b78;
	border-radius: 14px;
	width: 70px;
	padding: 9px;
}

.projetos .row-card-item:hover p{
	color: white;
}

.projetos .row-card-item:hover img{
	border: 2px solid #d3e6fd;
	background: #184b78;
}

.projetos .row-card-item p.nome-servico{
	margin: 5px 0;
	transition: 0.3s;
}

.projetos .row-card-item p.descricao-servico{
	transition: 0.3s;
}

/* dados */
.dados{
	background: #d3e6fd;
}

.dados .container{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.dados .dados-item{
	text-align: center;
	margin: 15px;
	color: #000000be;
}

.dados .dados-item img{
	background: #184b78;
	padding: 10px;
	border-radius: 14px;
	border: 2px solid #4f9cf9;
	margin-bottom: 15px;
	width: 80px;
}

.dados .dados-item p{
	font-size: 18px;
	display: block;
}

.dados .dados-item p strong{
	font-size: 28px;
}

.dados .dados-item p.dado-item_bt{
	font-size: 16px;
}

/* Página Contato */
.contato-info{
	display: flex;
	justify-content: space-between;
	margin-top: 50px;
}

.contato-info .left-side{
	width: 50%;
	padding: 30px;
	background: #4f9cf9;
	border-radius: 14px;
	margin-right: 50px;
	height: fit-content;
}

.contato-info .left-side div{
	display: flex;
	align-items: center;
	margin-bottom: 11px;
	color: #d3e6fd;
}

.contato-info .left-side div i{
	font-size: 23.8px;
	margin-right: 17px;
}

.contato-info .left-side div .fa-whatsapp{
	font-size: 27px;
}

.contato-info .left-side p{
	font-size: 17px;
	color: white;
}

.contato-info .rigth-side{
	width: 50%;
}

.contato-info .rigth-side input{
	display: block;
	width: 100%;
	margin-bottom: 10px;
	height: 47px;
	padding: 15px;
	border-radius: 9.1px;
	transition: 0.3s;
	border: 1px solid #f1f1f1;
	color: #212121;
	font-weight: 200;
}

.contato-info .rigth-side input:focus,
.contato-info .rigth-side textarea:focus{
	border-color: #4f9cf9;
}

.contato-info .rigth-side textarea{
	border: 1px solid #f1f1f1;
	color: #212121;
	font-weight: 200;
	border-radius: 9.1px;
	padding: 15px;
	width: 100%;
	margin-bottom: 11px;
	transition: 0.3s;
	resize: none;
}

.contato-info .rigth-side button{
	border: none;
}

@media(max-width: 830px){
	.ul a{
		margin: 10px 0;
		font-size: 16px;
	}
	.ul{
		position: fixed;
		background: #184b78;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		clip-path: circle(0% at 100% 0);
		transition: 0.7s;
	}
	.ul.open{
		clip-path: circle(143% at 100% 0);
	}
	nav .menu-icon{
		display: block;
	}
	nav .close-icon{
		display: block;
		position: absolute;
		top: 36px;
		right: 37px;
		cursor: pointer;
	}
	/* Página home responsivo */
	.faca-mais .faca-mais-text{
		margin-top: 10px;
		padding: 0 10px;
		order: 1;
	}
	.faca-mais .container{
		flex-direction: column;
	}
	.faca-mais .faca-mais-text h3{
		font-size: 48px;
	}
	.faca-mais .faca-mais-text,
	.faca-mais .faca-mais-img{
		width: 100%;
	}
	/* banner responsivo */
	.banner .banner-text{
		padding: 0;
		margin: 80px;
	}
	.banner .banner-text h1{
		font-size: 78px;
	}
	.banner .banner-text p{
		font-size: 16px;
	}
	.depoimentos .card-item{
		width: 100%;
	}
	/* Página sobre responsivo */
	.sobre .container{
		flex-direction: column-reverse;
	}
	.sobre .sobre-img,
	.sobre .sobre-text{
		width: 100%;
	}
	.sobre .sobre-text{
		margin-top: 40px;
	}
	/* Página contato responsivo */
	.contato .contato-info{
		flex-direction: column-reverse;
	}
	.contato-info .rigth-side,
	.contato-info .left-side{
		width: 100%;
	}
	.contato-info .rigth-side{
		margin-bottom: 30px;
	}
}
@media(max-width: 500px){
	.banner .banner-text{
		margin: 80px auto;
	}
	.banner .banner-text h1{
		font-size: 52px;
	}
	.faca-mais .faca-mais-text h3{
		font-size: 40px;
	}
}