:root{
	--font-color: #3f465e;
	--bg-dark: #202124;
	--bg-sub-dark: #292A2D;
	--green-light: #09b8501a;
	--font-green: #09B850;
	--font-sub-green: #079340;
	--font-white: #fff;
	--font-sub-white: #c5c6cc;
	
	--border-light: 1px solid #dce0e5;
	
}
@font-face {
	font-family: Inter;
	src: url('../fonts/Inter/static/InterTight-Regular.ttf');
 }
 /*----------------------------------------------------
 	Scroll Reaveal
--------------------------------------------------------- */

.efeito-top, .efeito-bottom .efeito-left, .efeito-right{
	visibility: hidden;
}


/*-------------------------------------------------------------
 		ESTILOS PADRÕES DO SITE
----------------------------------------------------------------*/
body{
	font-family: Inter;
	background-color: #d8d8d84d !important;
	overflow-x: hidden;
	color: var(--bg-dark);
}
.bold{
	font-weight: 700;
}
.btn-padrao-green{
	background-color: var(--font-green);
	color: var(--font-white) !important;
}
.btn-padrao-green:hover{
	background-color: var(--font-sub-green);
}
.btn-padrao-claro{
	background-color: #fff;
	color: var(--font-color);
}
.btn-padrao-claro:hover{
	background-color: #d3d4d5;

}
.btn-sub-dark{
	background-color: var(--bg-sub-dark);
	color: var(--font-white);
}
.btn-sub-dark:hover{
	background-color: var(--font-color);
	color: var(--font-white);
}
.btn-dark{
	background-color: var(--bg-dark);
	color: var(--font-white);
}
.btn-dark:hover{
	color: var(--font-white);
}

.link{
	color: var(--font-white);
	text-decoration: none;
}
.link:hover{
	color: var(--font-green);
	transition: .3s linear;
}
.text-green{
	color: var(--font-green);
}
.sub-link{
	color: var(--font-sub-white);
	text-decoration: none;
}
.sub-link:hover{
	color: var(--font-green);
	transition: .3s;
}
.targeta-dark{
	background-color: var(--bg-sub-dark);
	color: #fff;
	width: 100%;
	padding: 7px 30px;
	border-radius: 5px;
}
.targeta{
	
	width: 100%;
	padding: 7px 30px;
	border-radius: 5px;
}
.bg-ligth-green{
	background-color: var(--green-light);
	color: var(--font-green);

}
.bg-ligth-green:hover{
	background-color: var(--font-green);
	color: var(--font-white) !important;
	transition: .3s;
	
}

.z-index-1{
	z-index: 1000 !important;
	
}
.z-index-2{
	z-index: 2000 !important;
	
}
.z-index-3{
	z-index: 3000 !important;
	
}
.bg-dark{
	background-color: var(--bg-dark);
	color: var(--font-white);
}
/*-------------------------------------------------------------
 		MENU DE NAVEGAÇÃO
----------------------------------------------------------------*/
nav{
	padding: 20px 0 !important;
	z-index: 2080;
	position: absolute;
	top: 0;
	margin: 0;
}
.menu-fixo{
	background-color: var(--bg-dark);
	position: fixed;
	margin-top: 0;
	width: 100%;
	padding-top: 0;
	visibility: visible;
	-webkit-box-shadow: 0px 5px 54px -21px rgba(61,61,61,1);
	-moz-box-shadow: 0px 5px 54px -21px rgba(61,61,61,1);
	box-shadow: 0px 5px 54px -21px rgba(61,61,61,1);
}
.logo img{
	width: 130px;
}
.nav-link{
	color: var(--font-white);
	font-weight: 600;
}
.nav-link:hover{
	color: var(--font-green);
	transition: linear .3s;
}
.nav-link:focus{
	color: var(--font-green);
}
.nav-link.active{
	color: #fff;
	background-color: var(--font-green) !important;
	padding: 10px 20px;
    border-radius: 20px;
}

/*-------------------------------------------------------------
 		BANNER INICIAL
----------------------------------------------------------------*/
.head{
	height: 700px;
	width: 100%;
	top: 0;
	position: relative;
	background-image: url('../imagens/fundo2.png');
	background-position: center ;
}


.texto{
   color: var(--font-color);
}
.texto h5{
	color: var(--font-green);
}


.digitador{
	display: inline-block;
	margin-bottom: -10px;
	overflow: hidden;
	width: 6.9ch;
	white-space: nowrap;
	box-shadow: 1rem 0 0 #fff;
	animation: mark .5s step-end infinite alternate,
				write 3s steps(8, end) alternate;
	animation-delay: 3s;
}

.flutuar{
	animation: flutuar 2s ease-in-out infinite;
}

@keyframes mark {
	50%{
		box-shadow: 1rem 0 0 transparent;
	}
}
@keyframes write {
	0%{
		width: 0;
	}
	20%{
		width: 6.9ch;
	}
	70%{
		width: 6.9ch;
	}
	85%{
		width: 6.9ch;
	}
	100%{
		width: 6.9ch;
	}
}
@keyframes flutuar{
	0%,100%{
		transform:translatey(0)
	}
	50%{
		transform:translatey(-30px)
	}
}



/*------------------------------------------------------------------------------
Conteúdo
---------------------------------------------------------------------------*/

/*
					Sessão Serviços
*/
#servicos{
	padding: 150px 0;
	background-color: var(--bg-dark);
	color: #fff;
	
}

.box{
	background-color: var(--bg-sub-dark);
	color: #fff;
	padding: 40px 30px;
	border-radius: 5px;
	margin: 20px 0;
	
}
.box .icon{
	background-color: #fff;
	font-size: 1.5rem;
	color: var(--font-green);
	border-radius: 5px;
	padding: 20px;
	margin-top: -75px;
	position: absolute;
}
.box h1{
	font-size: 1.5rem;
}
.box p{
	color: var(--font-sub-white);
}
/*
					Sessão Historia
*/
#historia{
	padding: 150px 0;
	color: var(--bg-sub-dark);
}

.img-historia{
	width: 100%;
	border-radius: 5px;
}
.box-quad{
	
	color: #fff;
	padding: 10px 10px;
	border-radius: 5px;
	
}
.box-quad i{
	font-size: 1.5rem;
	color: var(--font-green);
	
	
}
.box-quad p{
	color: var(--font-color);
	font-size: .8rem;
}
.texto-2{
	padding: 60px 0;
}
.offcanvas-body a{
	color: var(--bg-dark);
	text-decoration: none;
	font-weight: 500;
}
.offcanvas-body a:hover{
	color: var(--font-green);
}
@media only screen and (max-device-width: 900px) {
	
}

/*
				Depoimentos
*/
#depoimentos{
	padding: 150px 0;
	color: var(--bg-sub-dark);
}

.box-depoimento{
	padding: 25px 15px;
	color: var(--font-color);
	border-radius: 5px;	
	margin: 0 5px !important;
	width: 100%;
}

.box-depoimento .quote{
	position: relative;
	top: -5px;
	color: var(--font-green);
}
.stars{
	color: #f7c32e;
}

.box-depoimento .cliente img{
	width: 50px;
	height: 50px;
	object-fit: cover;
	border-radius: 5px;
}
.box-depoimento .cliente .nome{
	padding: 0 10px ;
}
.box-depoimento .cliente .nome p{
	padding: 0;
	margin: 0;
	margin-bottom: -10px;

	font-weight: 600;
}
.box-depoimento .cliente .nome span{
	font-size: .8rem;
	margin-top: -20px;
	padding: 0;
}

.image img{
	width: 90%;
	height: 700px;
	object-fit: cover;
}

/*
		endereço
*/
#endereco{
	padding: 150px 0;
	background-color: var(--bg-dark);
	color: var(--font-white);
}
 iframe{
	width: 100%;
	height: 500px;
}
.box-endereco{
	padding: 40px 0;
	border-radius: 5px;
}
.box-endereco h4{
	font-weight: 600;
	color: var(--bg-sub-dark);
}
.box-endereco h5{
	
	color: var(--bg-sub-dark);
}
.box-endereco p{
	color: var(--font-color);
}
/*----------------------------------------------------------------------------------
Sessão do rodapé
--------------------------------------------------------------------------------------*/
.footer{
	background-color: var(--bg-dark);
	color: var(--font-white);
	padding: 50px 0;
	position: absolute;
	bottom: 0;
	border-top: 1px solid var(--font-color);

}
.footer .logo-rodape{
	width: 150px;
}
.footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6{
	color: var(--font-white);
}
.footer p{
	color: var(--font-sub-white);
}

.fill-mode {
    fill: #fff !important;
}

.newslatter input{
	background-color: var(--bg-sub-dark);
	border: 2px solid var(--bg-sub-dark);
	color: #fff;
}
.newslatter .input-group-text{
	background-color: var(--bg-sub-dark);
	border: 2px solid var(--bg-sub-dark);
}
.newslatter .input-group-text button{
	background-color: var(--bg-dark);
	border: none;
	color: #fff;
	padding: 5px 10px;
	border-radius: 5px;
}
.newslatter .input-group-text button:hover{
	color: var(--font-green);
	background-color: var(--font-color);
	transition: .3s;
}
.newslatter input:focus{
	background-color: var(--bg-sub-dark);
	border: 2px solid var(--bg-sub-dark);
	outline: 0 !important;
	border: 0 none;
	box-shadow: 0 0 0 0;
}

.newslatter label{
	background-color: transparent;
}

.social{
	margin: 5px;
	padding: 5px 8px;
	background-color: var(--bg-sub-dark);
	color: #fff;
	border-radius: 3px;
}
.social:hover{
	color: var(--font-green);
	background-color: var(--font-color);
	transition: .3s;
}

/*-------------------------------------------------------
Pagina 2 Drones
----------------------------------------------------------*/
.infos{
	
	background-color: var(--bg-dark);
	color: var(--font-white);
}

.infos div.container{
	padding: 40px;
}

.topo{
	height: 650px;
	width: 100%;
	background-color: var(--bg-dark);
}
.drone{
	background-color: var(--bg-dark) !important;
}

.produto{
	
	margin-top: 230px;
	z-index: 2000;
}
.produto img{
	width: 90%;
	margin: auto;
}
.produto h1{
	
	color: var(--font-white);
}
.background-video{
	width: 100%;
	height: 650px;
	position: absolute;
	top: 0;
	object-fit: cover;
	z-index: 0;

}
.filtro-background{
	background-color: var(--bg-dark);
	opacity: .8;
	position: absolute;
	top: 0;
	width: 100%;
	height: 650px;
}
.patern{
	position: absolute;
	top: 0;
	margin: auto;
	z-index: 2000;
}

#tres{
	padding: 130px 0;
	width: 100%;
	height: 700px;
	position: relative;
}

.video-background {
	width: 100%;
	height: 700px;
	position: absolute;
	top: 0;
	
}
.video-background video{
	width: 100%;
	height: 700px;
	object-fit: cover;
}
.video-background .filter{
	width: 100%;
	height: 700px;
	background-color: var(--bg-dark);
	position: absolute;
	top: 0;
	opacity: .6;
}
.video-background .conteudo{
	position: absolute;
	top: 0;
	color: var(--font-white);
	padding: 150px 0;
}
.video-background .conteudo span{
	color: var(--font-green);

}

.detalhes-tecnicos{
	padding: 130px 0;
}
.img-tecnica img{
	width: 100%;
}
.icon-lg {
    width: 3.5rem;
    height: 3.5rem;
    line-height: 3.5rem;
    text-align: center;
    font-size: 1.2rem;
}
.icon-lg i{
	color: #202124;
}

.video{
	width: 100%;
	height: 450px;
	object-fit: cover;
}
.side-conteudo{
	width: 100%;
	height: 450px;
	margin: 0;
	padding: 45px 30px;
}
.side-conteudo small{
	margin: 0;
	padding: 0;
}
.side-conteudo h2{
	margin: 0;
}

#formulario{
	background-color: var(--bg-dark);
	padding: 150px 0;
	color: var(--font-white);
	position: relative;
}

.dark-form input, .dark-form textarea{
	background-color: var(--bg-sub-dark);
	border: none;
	color: var(--font-white) !important;
	padding: 15px;
}
.dark-form input:focus, .dark-form textarea:focus{
	background-color: var(--bg-sub-dark);
	border: none;
	box-shadow: 0 0 0;
	outline: 0;
	color: var(--font-white);
}
.dark-form .input-group-prepend{
	background-color: var(--bg-sub-dark);
	border-radius: 5px 0 5px 5px;
}
.dark-form .input-group-prepend span{
	background-color: var(--bg-sub-dark);
	border: none;
	color: var(--font-white);
	
}

.dark-form ::-webkit-input-placeholder {
	color: var(--font-white);
 }
 
 .dark-form  :-moz-placeholder { /* Firefox 18- */
	color: var(--font-white) 
 }
 
 .dark-form  ::-moz-placeholder {  /* Firefox 19+ */
	color: var(--font-white)
 }
 
 .dark-form  :-ms-input-placeholder {  
	color: var(--font-white)
 }

 .figuras {
	fill: var(--font-white);
	width: 500px;
	position: absolute;
	top: 0;
 }

 /*
 Academy
 */
 #top{
	
 }
.academy-head nav a{
	color: var(--font-color);
}

#top{
	padding: 50px;
}

.text{
	font-size: 1.2rem;
	color: var(--font-color);
}


.icon-circle{
	background-color: #fff;
	border-radius: 50%;
	border: 1px solid var(--font-sub-white);
	padding: 15px;
	margin-bottom: 20px;
}

#dois img{
	width: 500px;
	position: absolute;
	bottom: 0;
}

#dois p{
	color: var(--font-color);
}

/*
	Cursos
*/

#cursos{
	background-color: var(--bg-dark);
	color: var(--font-white);
	padding: 100px 0;
	margin-top: 30px;
}
#cursos .menu{
	background-color: var(--bg-sub-dark);
	width: 100%;
	padding: 20px;
	border-radius: 25px;
}
#cursos .menu a{
	color: #fff;
	text-decoration: none;
	font-weight: 500;
	margin: 30px;
	
}

 .ativo{
	background-color: var(--font-green) !important;
	color: var(--font-white) !important;
	padding: 10px 20px;
	border-radius: 20px;
}

.space-icon{
	margin-right: 10px;
	font-size: 1.1rem;
}

.imagem img{
	width: 400px;
	height: 500px;
	object-fit: cover;
	margin: auto;
	
}

#matricula{
	background-color: #09b8501a;
	padding: 150px 0;
}

#matricula input, #matricula select{
	background-color: #0ccb5a26;
	border: none;
	color: var(--font-green);
	width: 100%;
	padding: 10px 15px;
	margin: 10px 0;
	border-radius: 5px;
}
#matricula input::placeholder{
	color: var(--bg-dark);
}

.text-2{
	font-size: 1.1rem;
}
/*-----------------------------
                Serviços
------------------------------------------------*/

.cont{
	padding:  130px 0;
	color: var(--font-white);
}

.section{
	padding: 140px 0;
	background-color: var(--bg-dark);
}
.box-2{
	padding: 30px 20px;
	margin: 10px;
	background-color: var(--bg-sub-dark);
	color: var(--font-white);
	border-radius: 5px;
	height: 300px;
	position: relative;
}
.box-2:hover{
	box-shadow: 0px 10px 30px rgba(29, 58, 83, .15);
	transition: .4s;
	cursor: pointer;
}
.box-2 span{
	background-color: var(--green-light);
	padding: 20px;
	border-radius: 5px;
	
	
}
.box-2 span i{
	font-size: 1.7rem;
	color: var(--font-green);
	margin-bottom: 20px !important;
}

.box-2 h4{
	margin-top: 10px;
	font-weight: 600;
}
.box-2 p{
	color: var(--font-sub-white);
	font-size: 1.1rem;
}

#formulario-light{
	padding: 150px 0;
	color: var(--font-color);
	position: relative;
}
.light-form input, .light-form textarea{
	background-color: transparent;
	border: var(--border-light);
	color: var(--font-color) !important;
	padding: 15px;
}
.light-form input{
	border-left: none;
}

.light-form input::placeholder, .light-form textarea::placeholder{
	color: var(--font-color);
}

.light-form input:focus, .light-form textarea:focus{
	border: var(--border-light);

	box-shadow: 0 0 0;
	outline: 0;
	color: var(--bg-dark);
}
.light-form input:focus{
	border-left: none;
}
.light-form .input-group-prepend{
	background-color: var(--font-white) !important;
	border-radius: 5px 0 5px 5px;
	border: var(--border-light);
	border-right: none;
}
.light-form .input-group-prepend span{
	background-color: var(--font-white);
	border: none;
	color: var(--font-color);
	
}

.light-form ::-webkit-input-placeholder {
	color: var(--font-white);
 }
 
 .light-form  :-moz-placeholder { /* Firefox 18- */
	color: var(--font-white) 
 }
 
 .light-form ::-moz-placeholder {  /* Firefox 19+ */
	color: var(--font-white)
 }
 
 .light-form  :-ms-input-placeholder {  
	color: var(--font-white)
 }

 /*---------------------------------------------------*/

 #contato{
	padding: 70px 0;
 }

 .box-contato{
	background-color: #fff;
	box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.1) !important;
	padding: 50px 30px;
	border-radius: 5px;
 }

 .icon-contato i{
	background-color: var(--green-light);
	color: var(--font-green);
	padding: 15px;
	border-radius: 50%;
 }

 .barra{
	box-shadow: 0px 0px 40px rgba(29, 58, 83, 0.1) !important;
	padding: 20px 30px;
	border-radius: 5px;
	border: var(--border-light);
	background-color: #fff;
 }

 .barra p{
	margin: 0;
	padding: 0;
 }
 .barra a{
	margin: 0;
	padding: 0;
	text-decoration: none;
	color: var(--bg-dark);
 }
 .barra a:hover{
	color: var(--font-green);
	transition: .3s;
 }
 .social-contato i{
	border: var(--border-light);
	padding: 10px;
	border-radius: 50%;
	margin: 10px 3px;
	color: var(--font-color);
 }

 .facebook i{
	color: #fff;
	background-color: #3b5998;
 }
 .instagram i{
	color: #fff;
	background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
 }
 .x i{
	color: #fff;
	background-color: var(--bg-dark);
 }
 .youtube i{
	color: #fff;
	background-color: #FF0000;
 }
 .whatsapp i{
	background-color: var(--font-green);
	color: var(--font-white);
 }
 

 .dropdown-menu{
	width: 300px;
	
 }

 .dropdown-menu img{
	width: 100%;
 }

 .dropdown-menu a{
	color: var(--font-color);
	font-weight: 500;
	padding-top: 10px;
 }

 .dropbox{
	display: none;
	width: 300px;
	border: var(--border-light);
	border-radius: 5px;
	position: absolute;
	background-color: #fff;
 }
 .dropbox h2{
	padding: 0;
	margin: 0;
 }
 .dropbox ul{
	list-style: none;
	margin: 0;
	
	
 }
 .dropbox ul li a{
	color: var(--bg-dark);
	text-decoration: none;
	padding: 5px 0;
 }
 .dropbox ul li a:hover{
	color: var(--font-green);
	transition: .3s;
 }

 .dropbox button{
	color: var(--bg-dark);
	text-decoration: none;
 }
.card{
	border: none;
}
 .maps iframe{
	margin-top: 50px;
	width: 600px;
 }

 .show{
	display: block;
 }

 .card-header{
	border: none;
 }

 .modal-content{
	width: 700px;
 }
 .modal-body{
	padding: 40px;
	
 }