/*-- CSS Reset --*/
*{
	margin: 0;
	padding: 0;	
	box-sizing: border-box;	
}
/*-----------------------------------------*/
body{
	background: url(img/img-sections.png);
	height: 100vh;
	font-family: 'Orbitron', sans-serif; 
}
/*-----------------------------------------*/
h1{
	font-size: 50px;
	color: #000;	
}
h2{
	font-size: 40px;
	color: #000;	
}
h3{
	font-size: 35px;
	color: #000;
}
h4{
	font-size: 25px;
	color: #000;
}
p{
	font-size: 15px;
	color: #000;	
}
.cor-azul{
	color: #006595;
}
.cor-laranja{
	color: #ff9900;
}
a{
	text-decoration: none;
	font-size: 16px;
	color: #000;
}
a:hover{	
	color: #006595;	
	transition-duration: 0.5s;
}
/*-----------------------------------------*/
.border-top{
	padding-top: 5px;
	border-top: 1px solid #ccc;
}
/*-----------------------------------------*/
.todos-titulo{	
	text-align: center;	
}
/*-----------------------------------------*/
.border-bottom{
	padding-bottom: 2%;
	border-bottom: 1px solid #ccc;
}
/*-----------------------------------------*/
.interface{
	margin: 0 auto;
	max-width: 1200px;
	/*background-color: #ccc; /*-- Cor de fundo interface --*/
	/*border-bottom: 1px solid #ccc;*/
}
/*-----------------------------------------*/
header{
	padding: 40px 4%; /*-- Espaçamento --*/
}
header > .interface{
    display: flex;
    align-items: center;/*-- centraliza as divs --*/
    justify-content: space-between;/*-- Afasta as divs --*/
}
header nav.menu-dektop ul{	
	display: flex;
	gap: 4%;
	list-style: none;
}
/*-----------------------------------------*/
header nav.menu-dektop li a{	
	font-weight: 400;
	position: relative;
}
header nav.menu-dektop ul li{
	display: inline-block;
	padding: 0 40px;
}
header nav.menu-dektop li a::after{	
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 1px; 
    background: #006595;   
}
header nav.menu-dektop li a:hover::after{    	
	transition: 0.5s ease;
    width: 30%; 
}
/*-----------------------------------------*/
.logo{
	width: 100px;
	height: auto;
}
.logo img{
	width: 80px;
	height: auto;
	padding: 2%;
}
.cor-btn{		
	color: #000;
}
.cor-btn i{
	color: #006595;
	font-weight: 700;
}
/*-----------------------------------------*/
header .btn-contato a{
	font-size: 15px;	
	padding: 5px 5px;	
	border: 1px solid #000;
	border-radius: 5px;	
}
/*-----------------------------------------*/
/*--------- Classe para interface ---------*/
.flex{
	display: flex;	
}
/*-----------------------------------------*/
/*--------- Estilo do menu Mobile ---------*/
.btn-abrir-menu{
    padding: 4px;
    border: 1px solid #333;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    font-weight: 500;
    color: #000;  
    display: none;  
}
.btn-abrir-menu:hover{
	color: #006595;
	transition: 0.5s;
	border: 1px solid #000;
}

/*-----------------------------------------*/
.menu-mobile{	
	width: 0%;
	height: 100vh;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	overflow: hidden;
	transition: 0.5s;	
}
/*-----------------------------------------*/
.menu-mobile.abrir-menu{
    width: 100%;    
}
.menu-mobile.abrir-menu ~ .overley-menu{
	display: block;   
}
/*-----------------------------------------*/
.menu-mobile .btn-fechar{
	padding: 20px 4%;
	cursor: pointer;
}
.menu-mobile .btn-fechar:hover{
   color: #006595;
   cursor: pointer;	
}
.menu-mobile nav ul{	
	text-align: center;
	list-style: none;
}	
.menu-mobile nav ul li{
	border-bottom: 1px solid #666;
	margin: 10px 4%;
	padding: 20px 4%;
	display: block;
}
/*-----------------------------------------*/
/*-------- Overley - fundo menu mobile ----*/
.overley-menu{
	background-image: url(img/img-sections.png);	
	opacity: 0.99;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 8888;
	display: none;
}

/*-----------------------------------------*/
/*-------------- Main do topo -------------*/
section.topo-site{
	padding: 10px 4%;
}
section.topo-site .flex{
   align-items: center;/*-- Alinha ao meio --*/
   justify-content: center; /*-- Alinha na horizotal --*/
   gap: 5px;
}
.topo-site .txt-topo-site h1{
	line-height: 45px;
}
.fale-conosto{
	width: 135px;
	margin-top: 5%;	
	text-align: center;
	font-size: 15px;	
	padding: 5px 5px;	
	border: 1px solid #000;
	border-radius: 5px;
}
/*-----------------------------------------*/
.topo-site .img-topo-site img{
	position: relative;
	animation: flutuar 0.5s ease-in-out infinite alternate; 
}
.img-topo-site img{
	width: 395px;
	height: auto;
	position: relative;	
}


/*-----------------------------------------*/
/*------------ Especialidades -------------*/
section.especialidades{
    padding: 40px 4%;    	     	  	   
}
section.especialidades .flex{
	gap: 40px;
}
section.especialidades .especialidades-box{
   	width: 100%;       
    text-align: left;
    margin-top: 2%;
    /*border: 1px solid #ccc;*/
    border-radius: 5px;
    padding: 4%;
    transition: 0.5s;
}
section.especialidades .especialidades-box:hover{
	transform: scale(1.04);
	box-shadow: 0 0 1px #ffffff98;	
}
section.especialidades .especialidades-box i{
	color: #333;
	font-size: 80px;
	padding: 2%;
}
section.especialidades .especialidades-box p{
	padding: 10px 0px;
}

/*-----------------------------------------*/
/*------------- Meu Portifólio ------------*/
section.portifolio{
	padding: 40px 4%;	
}
section.portifolio .flex{
	justify-content: space-around; /*-- Espaço nas divs --*/
}
.portifolio-box{
	width: 350px;
	height: 350px;
	margin-top: 2%;
	padding: 1%;
	background-color: #fff;
	background-size: cover;/*-- Corta a imagem --*/
    background-position: 100% 0%;/*-- Eixo X e Eixo Y --*/
    transition: 5s;
    cursor: pointer;
    border-radius: 5px;
    position: relative;
    border: 1px solid #333;
}
.portifolio-box:hover{
	background-position: 100% 100%;
}
/*------------ Overlay portifolio --------*/
.overley{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/*background-color: #ffffff99;*/
	border-radius: 5px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #000;	
	font-size: 25px;
	font-weight: 600;
	opacity: 0;
	transition: 0.5s;
}
.overley:hover{
	opacity: 1;	
}

/*-----------------------------------------*/
/*------------ Sobre nos e form -----------*/
section.sobre-form{
	padding: 40px 4%;	
}
section.sobre-form .flex{
	align-items: center;/*-- Alinha o texto no centro --*/
	gap: 60px; /*-- Afasta o texto --*/
}
.img-sobre{
	max-width: 350px;
	margin-top: 1%;
}
.img-sobre img{
	width: 100%;
	border-radius: 5px;
}
.sobre-form .txt-sobre-form h3{
	line-height: 40px;/*-- Espaço entre texto --*/
	margin-bottom: 20px;	
}
.sobre-form .txt-sobre-form h3 span{
	color: #006595;
	display: block;/*-- colocar o dexto abaixo --*/
}
.sobre-form .txt-sobre-form p{
	margin: 20px 0;
	text-align: justify;/*-- Alinha o texto nas laterais--*/
}
.sobre-form .txt-sobre-form .btn-social{	
	padding: 1%;	
}
.btn-social a i{
	background-color: #006595;
	color: #fff;
	font-size: 15px;
	padding: 5px 5px;
	margin: 4px 2px; 
	border-radius: 10%;
}
.btn-social a i:hover{
    color: #f3f3f3;    
    transition: 0.5s;
}
/*-----------------------------------------*/
/*------------ sobre-form editor ----------*/
.editor{
   width: 70%;  
   margin-top: 4%;
}
/*-----------------------------------------*/
.texto-form{
	margin: 10% 0;
	padding: 4% 0;
}
.texto-form i{	
	color: #006595;
	font-size: 20px;
}
form{
	max-width: 95%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 10px;
}
form input, form textarea{
	background-color: #00000015;
	color: #000;
	border: 0;
	outline: 0;
	padding: 1% 1%;
	border-radius: 5px;
	font-size: 15px;
	font-family: 'Orbitron', sans-serif; 
}
form textarea{
	resize: none;
	max-height: 50px;
}
form .btn-enviar{
	text-align: center;
}
form .btn-enviar input{
	width: 135px;	
	color: #000;
	cursor: pointer;
	background-color: transparent;
	border: 1px solid #000;
}
form .btn-enviar input:hover{
	color: #006595;
	transition: 0.5s;
}


/*------------------------------------------------*
/*------------------ Footer -------------------*/
footer{	
	padding: 40px 4%;
}
footer .flex{
	justify-content: space-between;
}
footer .line-footer{
	padding: 4% 0;
}
footer .line-footer p{
	text-align: center;

}
footer .line-footer1 p{
	text-align: center;
}

/*---------------------------------------------------*/
/*----------- Aqui o Mobile da pagina ---------------*/
@media screen and (max-width: 1020px){

	/*-----------------------------------*/
    /*--------------- Flex --------------*/
	.flex{
		flex-direction: column;
	}
	.topo-site .flex{
		flex-direction: column-reverse;
	}

    /*-----------------------------------*/
    /*-------------- Cabeçalho ----------*/    
	.menu-dektop{
		display: none;
	}
    /*-----------------------------------*/
	.btn-contato{
		display: none;
	}
	.btn-abrir-menu{
		display: block;	
	} 
	/*-----------------------------------*/
    /*------------- Topo site ----------*/    
	.topo-site{
		h1{
	        font-size: 45px;
	        color: #000;
	    }
	    h2, h3{
	        font-size: 28px;
	        color: #000;
	    }		
	}
	.todos-titulo h2{
		font-size: 35px;
		text-align: left;
	}
    /*-----------------------------------*/
	.fale-conosto{
		display: none;
	}  
	/*-----------------------------------*/
	.editor{
		width: 100%;	
	}
	/*-----------------------------------*/
	.img-none{
		display: none;
	}  
	
	/*-----------------------------------*/
    /*---------- Especialidades ---------*/
    section.especialidades .especialidades-box{    	
    	margin: 5px 0;   	
    }
    section.especialidades .especialidades-box:hover{
    	transform: scale(1.0);        
    }
   
    /*-----------------------------------*/
    /*--------------- Form --------------*/
	.sobre-form .flex{
		/*-- colocar texto abaixo do form--*/	
		flex-direction: column-reverse;
	}
	/*-----------------------------------*/
	.txt-sobre-form{
		width: 100%;		
	}
	.sobre-form .endereco{
		width: 100%;		
		padding: 2px 13%;
	}
	.sobre-form .txt-sobre-form p{
	margin: 20px 0;
	text-align: left;/*-- Alinha o texto nas laterais--*/
    }
    /*-----------------------------------*/
    /*------------ Portifolio -----------*/
    .portifolio .flex{
    	align-items: center;    	
    }
	/*-----------------------------------*/
    /*-------------- Rodape -------------*/
    footer{
    	text-align: center;
    }
	footer .copy-footer{
		width: 100%;
		padding: 5% 1%;	
	}
	footer .btn-social{
		width: 100%;
		padding: 5% 1%;
		align-items: center;
		justify-content: center;		
	}
    

}