/* Gerais */

body{

	font-family: 'Roboto', sans-serif;
}

.row{

	margin:0;
}

.container{
	padding: 70px 0;
}

p,li{
	color: #444;
	font-size: 14px;
}

/* Barra de navegação */

header, .navbar{
	background-color:#ff9400;
	border-bottom: 5px solid #b7640b;
	padding-bottom: 5px;
}
.btn-topo{
	color: #fff;
	text-decoration: none;
}

#nav-container{
	padding-top: 5px;
	

}

#logo{
	width: 288px;
	margin-left: 10px;
	margin-bottom: 10px;

}

.navbar-brand{
	color: #FFF;
	padding: 0;
}
.navbar-brand:hover{
	color: #FFF;
}
#navbar-links a{
	color:#000000;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 14px;
}

.navbar-expand-lg .navbar-nav .nav-link{
	padding: 1rem .8rem;
}

/* Slider */

.container-fluid{
	padding: 0;
}

#mainSlider .carousel-inner, #mainSlider .carousel-item{
	height: auto;
}
#mainSlider .carousel-caption{
	top:30%;
}
#mainSlider .carousel-caption h2{
	font-size: 50px;
	margin-bottom: 30px;
}
#mainSlider .carousel-caption p{
	font-size: 22px;
	font-weight: 300;
	color: #FFF;
	margin-bottom: 50px;
}
.main-btn{
	background-color: #00b300;
	color: #fff;
	text-transform: uppercase;
	width: 200px;
	height: 60px;
	padding: 10px 20px; 
	border-radius: 30px;
	border:3px solid transparent;
	transition: .5s
}
.main-btn:hover{
text-decoration: none;
color: #fff;
background-color: transparent;
border-color:#00b300;
}
.link-icon i {
	font-size: 24px;
}
.carousel-indicators{
	padding: 0 20px;
}

/* Sobre a empresa */

#about-area{
	background-color: #F9F9F9;
}
.main-title{
	color: #444;
	margin: 0 0 65px 0;
	font-size: 40px;
	text-align: center;
}
.main-title::after{
	content: "";
	border-top: 2px solid #333;
	width: 15%;
	position: absolute;
	top: 60px;
	left: 42.5%; 

}
.about-title{
	font-size:17px;
	color: #444;
	text-transform: uppercase;
	font-weight: bold;
}
#about-list{
	list-style: none;
	padding-left: 0px;
}
#about-list li{
	line-height: 30px;
	}

#about-list li i{
	color:#65DAF9;
	margin-right: 15px;
}

/* produtos */

.service-box{
	text-align: center;
	margin-bottom: 50px;
}
.service-box i, .service-box h4{
	transition: .5s;
}
.service-box i{

	font-size: 36px;
	margin-bottom: 20px;
	color: #ff9400;
}
.service-box h4{
font-size: 24px;
margin-bottom: 20px;
	}
.service-box:hover >i, .service-box:hover >h4{
	color:#65DAF9;
} 


/* dados */

#data-area p{
	color:#fff;
	text-align: center;
	font-size: 26px;
	margin-top: 20px;
}
.circle-box div{
	padding: 0 40px;
	border-color: #000
}
.progressbar-text{
	font-weight: bold;
	font-size: 32px;
}

/* time */

.card-body{
	text-align: center;
}

/* trabalhe */

#apply-area{
	height: 500px;
}

#apply-area .container-fluid, #apply-area .row{
	height: 100%;
}

#apply-area .apply-box{
	text-align: center;
}

#company-img{
	background-image: url('../img/produtos-lokar.png');
	background-repeat: no-repeat; /* Evita a repetição da imagem */
    background-position: center -100px; 
	background-size: cover;
	height: 100%; 
}
#pattern-img h4, #pattern-img p{
	color: #fff;

}
#pattern-img h4{
	margin-top: 8%;
	margin-bottom: 20px;
	text-transform: uppercase;
}
#pattern-img p{
	margin-bottom: 20px;
}
#apply-btn{
	display: block;
	height: auto;
	width: 180px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 30px;
	background-color: transparent;
	border-color:#fff 
}
#apply-btn:hover{
	border-color:#65DAF9;
	background-color: #d5daf9; 
}


/* pport */

.project-box{
	margin-bottom: 30px;
}
#filter-btn-box{
	margin-bottom: 50px;
	text-align: center;
}
#portfolio-area .filter-btn{
	color: #444;
	border: 1px solid #444;
	background-color: transparent;
	text-transform: none;
	margin: 0 15px;
	min-width: 100px;
	width: auto;
	height: 40px;
	line-height: 40px;
	padding: 0 20px;
}
.project-box p{
	text-align: center;
	font-size:16px;
	font-weight: bold;
	margin-top:10px;
	 

}

#portfolio-area .filter-btn.active, #portfolio-area .filter-btn:hover{
	color: #fff;
	background: #65DAF9;
	border-color: #65DAF9
}

/* news */
#news-area{
	text-align: center;
	background-color: #f9f9f9: 
}
#news-area p{
	font-size: 18px;
	margin-bottom: 40px;

}
#email-input{
	border-radius: 0;
	border-top-left-radius: 20px;
	border-bottom-left-radius: 20px;
	border: 1px solid #65DAF9;
	display: inline;
	box-sizing:border-box; 
	width: 40%;
	height: 40px;
}
#news-btn{
	border-top-right-radius: 20px;
	border-bottom-right-radius: 20px;
	border: 1px solid #65daf9;
	background-color:  #65daf9;
	text-transform: uppercase;
	color: #fff;
	height: 40px;
	padding: 0 30px;
	margin-left: -130px;
	position: absolute;
	transition: .5s; 
}

#news-btn:hover{
	background-color: #fff;
	color: #65DAf9;
}

#call-area{
	background-color: #00b300;
	text-transform: uppercase;
}
#call-area .container{
	padding: 40px 100px;

}

#call-area .row{
	display: block;
	text-align: center;
}
#call-area p{
	color: #fff;
	font-weight: bold;
	font-size: 14px;
	width: auto;
	letter-spacing: 2px;
	margin-bottom: 0;
	display: inline;
	height: auto;
	line-height: 60px;
}

#call-area #call-btn{
	background-color: #fff;
	color: #65DAf9;
	font-weight: bold;
	font-size: 20px;
	margin-left: 30px;
	width: auto;
	letter-spacing: 2px;

}


/* footer */

#contact-area{
	text-align: center;
}


.contact-box{
	padding-bottom: 50px;
	margin-bottom: 50px;
	border-bottom: 1px solid #ff9400;
}

.contact-box i{
	color: #ff9400;
	border: solid 1px #ff9400;
	border-radius: 50%;
	width: 55px;
	height: 55px;
	line-height: 55px;
	font-size: 24px;
	margin-bottom: 20px;
}

.contact-box p{
	font-size: 16px;
}
.contact-title {
	font-weight: bold;
	color: #ff9400;
}

#msg-box p{
	font-size: 22px;
}
 
#contact-form input[type="text"], #contact-form input[type="email"], #contact-form input[type="textarea"]{
	margin-bottom: 15px;
	border-radius: 0px;
}

#contact-form .main-btn{
	width: 120px;
	height: 50px;
}
#contact-form .main-btn:hover{
	color: #d5daf9;
}

#copy-area{
	background-color: #f1f1f1;
	

}
#copy-area .container{
	margin-bottom: 0;
	padding: 10px 0;
	text-align: center;

}
#copy-area .container a{
	font-weight: bold;
	color: #444;
}
#copy-area .container a:hover{
	text-decoration: none;
	color: #3ec1d5;
	}

	/* responsive */

	@media(max-width: 768px ) {

		/* geral */

		.container{
			padding: 20px 0;
		}
		/* slider */

		#mainSlider .carousel-inner, #mainSlider .carousel-item{
			height: auto;
		}

		#mainSlider .carousel-caption h2{
			font-size: 28px;
		}

		#mainSlider .carousel-caption p{
			font-size: 18px;
			margin-bottom: 40px;
		}
		.carousel-caption{
			left: 10%;
			right: 10%;
		}
		/* about */

		#about-area img{
			margin-top:100px; 
		}

		/* data */
		.circle-box div{
			padding: 0 10px;
		}
		#data-area p{
			font-size: 16px;
		}

		/* card */
		.card-title{
			font-size: 14px;
		}
		.card-text{
			font-size: 12px;
		}

		/* apply-area */

		#apply-area .apply-box{
		 padding: 50px 15px;
		}

		/* news */

		#news-area p{
			width: 80%;
			margin-left: auto;
			margin-right: auto;
		}
	}

		@media(max-width: 425px ) {

			/* slide */
			.link-icon-topo{
				display: none;
			}
			#logo{
			width: 200px;
			margin-left: 10px;
			margin-bottom: 10px;

}

			#mainSlider{
				margin-top: 60px;
				
			}
			 
			#mainSlider .carousel-caption{
				top: 4%;
			}
			#mainSlider .carousel-caption h2{
				font-size:16px;
				margin-bottom: 15px;
				padding-top: 10px;
			}
			#mainSlider .carousel-caption p{
				display: none;
			}
			.carousel-caption .main-btn{
				font-size: 14px;
			}

			/*about*/

			.main-title{
				font-size: 20px;
				margin-bottom: 15px;
			}
			#about-area img{
				margin-top:0;
				margin-bottom: 30px;
			}

			.circle-box {
				width: 50%;
			}


			 #team-area .col-md-3{
			 	width: 50%;
			 	margin-bottom: 30px;
			 }

			 #apply-area{
			 	height: auto;
			 }
			 #company-img{
			 	display: none;
			 }


			 #portfolio-area .filter-btn{
			 	margin-bottom: 20px;
			 }

			 .project-box{
			 	width: 50%;
			 }

			 #news-area .main-title{
			 	font-size: 24px;
			 }

			 #news-area p{
			 	font-size: 16px;
			 }

			 #call-area p, #call-area #call-btn{
			 	font-size: 14px;
			 	letter-spacing: 0;
			 	margin: 0;
			 	width:50%;
			 }
			 #call-area #call-btn a{
			 	color: #00b300;
			 }
		}