/*Gerais*/
body{
	font-family: 'Roboto', sans-serif;
}

/*Efeito de rolagem suave*/
html{
    scroll-behavior: smooth;
}

.row{
	margin: 0;
}

.container{
	padding: 70px 0;
}

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

/*Barra de naveração=====================================================*/
.navbar{
	background-color: #201d2c;
	height: 10vh;
}

#nav-container {
	padding-top: 0;
	padding-bottom: 0;
}

#logo{
	width: 75px;
}

.navbar-brand{
	padding: 0;
	color: #fff;
}

.navbar-brand:hover{
	color: #FFF;
}

#navbar-links  a{
	color: #FFF;
}

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

/*Slider=============================================================*/

.container-fluid{
	padding: 0;
}

#mainSlider .carousel-inner, #mainSlider .carousel-item{
	height: 90vh;
}
#mainSlider p{
	background-color: #201d2c;
	margin-top: 110px;
}
#mainSlider img {
	max-width:2200px;
    max-height:800px;
    width: auto;
    height: auto;
}

#mainSlider .carousel-caption{
	top: 30%;
}

#mainSlider .carousel-caption h2{
	font-size: 70px;
	margin-bottom: 30px;
	font-weight: bold; 	
	-webkit-text-stroke: 1px black;
}

#mainSlider .carousel-caption p{
	font-size: 22px;
	font-weight: 300;
	margin-bottom: 100px;
	color: #FFF;
}
#mainSlider .col-md-4{
	margin-top: 100px;
	background-color: #3ec1d5;
}

#mainSlider .modelo img{
	width: 150px;
	height: 150px;
}

.main-btn {
	background-color: #65DAF9;
	color: #FFF;
	text-transform: uppercase;
	width: 50px;
	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: #65DAF9;
}

.carousel-indicators .active{
	background-color: #65DAF9;
}

/*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: 0;
 }
 
 #about-list li{
	 line-height: 30px;
 }
 
 #about-list i{
	 color:  #65DAF9;
	 margin-right: 15px;
 }
 
 
 /* Serviços da Empresa - Diferenciais*/

 #services-area{
	margin-bottom: -50px;
 }
 
 .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: #444;
 }
 
 .service-box h4{
	 font-size: 24px;
	 margin-bottom:  20px;
 }
 
 .service-box:hover > i, .service-box:hover > h4{
	 color: #65DAF9;
 }
 
/* Portfolio */

#portfolio-area{
	margin-top: 0px;
}

#portfolio-area h3{
	margin: 15px;
}

.project-box{
	margin-bottom: 0px;
}

.project-box h4{
	text-align: center;
}

.project-box img{
	width: 100%;
	height: 200px;
}

 /* Dados */
 
 .circle-box div{
	 padding:0 40px;
 }
 
 .progressbar-text{
	 font-weight: bold;
	 font-size: 32px;
 }
 
 #data-area p{
	 color: #FFF;
	 text-align: center;
	 font-size: 26px;
	 margin-top: 20px;
 }
 
 /* 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: 22px;
		 }
	 
		  #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;
		  }
 }
 /*============================================================================================*/
 @media(max-width: 425px){
     
         button {
     display: none;
     }
     
	  /*Slider*/
	  nav a{
	      font-size: 15px;
	      color:red;
	  }

    .navbar{
    	height: 15vh;
    }	  
	  #mainSlider{
		  margin-top: 83px;
		  
	  }

	  #mainSlider .carousel-caption{
		  top: 5%;
	  }
	  #mainSlider .crousel-caption h2{
	     font-size: 5px;
	     margin-bottom:4px;
	 }
	 #mainSlider .carousel-caption p,h2{
	     display: none;
	 }
	 .carousel-caption .main-btn{
	     font-size:14px;
	 }
	 /*about*/
	 .main-title{
	     font-size:30px;
	 }
	 #about-area img{
	     margin-top:0px;
	     margin-bottom:30px;
	 }
	 
	 /*data*/
	 .circle-box{
	     width:50%;
	 }
	 
	 /*news*/
	 #news-area .main-title{
	     font-size:24px;
	 }
	 #news-area p{
	     font-size:16px;
	 }
	 
	 #email-input{
	     width: 80%;
	 }
	 /*CTR*/
	 #call-area p, #call-area #call-btn{
	     font-size:1px;
	     letter-spacing:0;
	 }

	 #catalogo p{
		font-size:16px;
	}

	#clientes-area .col-md-3{
		text-align: center;
		width:50%;
	}

 }  
 
 /* news latter */
 
 #news-area{
	 text-align: center;
	 background-color: #f9f9f9;
 }
 
 #news-area p{
	 font-size: 18px;
	 margin-bottom: 40px;
 }
 
 #email-input{
	 border-radius: 0px;
	 border-top-left-radius: 20px;
	 border-bottom-left-radius: 20px;
	 border: 1px solid #65daf9;
	 display: inline;
	 box-sizing: border-box;

 }
 
 #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 to action */
 
 #call-area{
	 background-color: #65daf9;
	 text-transform: uppercase;
 }
 #call-area .row {
	display: block;
	text-align: center;
  }
 
 #call-area .container{
	 padding: 40px 100px;
 }
  
 #call-area p{
	 color: #fff;
	 font-weight: bold;
	 font-size: 20px;
	 width: auto;
	 letter-spacing: 2px;
	 margin-bottom: 0px;
	 display: inline;
	 height: 60px;
	 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 #3ec1d5
 }
 
 .contact-box img{
	 color: #444;
	 
	
	 width: 45px;
	 height: 45px;
	 line-height: 75px;
	 
	 margin-bottom: 20px;
 }
 
 
 .contact-box p{
	 font-size: 16px;
 }
 
 .contact-title{
	 font-weight: bold;
	 color: #3ec1d5;
 }
 
 #msg-box p{
	 font-size: 22px;
 }
 
 #contact-form input[type="text"], #contact-form input[type="email"], #contact-form textarea{
	 margin-bottom: 15px;
	 border-radius: 0;
 }
 
 #contact-form .main-btn{
	 width: 120px;
	 height: 50px;
 }
 
 #contact-form .main-btn:hover{
	color: blue;
 }

 /*area de clientes**************************************************************/

 #clientes-area{
	padding-bottom: 50px;
	border: 1px solid #65daf9;
 }

 #clientes-area img{
	width: 100px;
	height: 100px;
	margin-left: 75px;
	padding: 10px;
	
 }

 #clientes-area p{
	font: 0.8em;
	text-align: center;
	text-transform: uppercase;
 }
 /*-----------------------------------------------------------------------------*/
 /* Copy */

 #copy-area{
	 background-color: #f1f1f1;
	 margin-bottom: 5px;
 }
 
 #copy-area .container{
	 padding: 10px 0;
	 text-align: center;
 }
 
 #copy-area .container p{
	 margin-bottom: 0;
 }
 
 #copy-area .container a{
	 font-weight: bold;
	 color: #444;
 }
 
 #copy-area .container a:hover{
	 text-decoration: none;
	 color: #3ec1d5;
 }
 
 #copy-area img{
	width: 25px;
	height: 25px;
	margin-left: 10px;
}


 /*Serviços - Catalogo************************************************/
 
 #catalogo{
	
	background-color: #F9F9F9;
	margin-top:50px;

}

#catalogo img{
	max-width:100%;
    max-height:100px;
}

#catalogo p{
	text-align: center;
	margin-top:10px;
}

#catalogo .col-md-1{
	
	margin: auto;
	text-align: center;
}

/*Reponsividade Header************************************************/

@media (max-width: 991.98px) {
    .navbar-nav {
        background-color: rgba(0, 0, 0, 0.9);
    }
}