@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/*==== Loader ====*/
#loader{
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 99;
    overflow: visible;
    background: #f1e6e0 url('../img/preloader.gif') no-repeat center center;
}

/*==== Definições Gerais ====*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
	background: var(--color-blacken);
}
:root{
     /*==== Cores ====*/
     --color-light: #ffffff;
     --color-lighten: #ced4dd;
     --color-lighten2: #a1abc4;
     --color-red: #db051ab4;
	 --color-blacken: #21242d;
     
    /*==== Fonte e Typografia ====*/
    --font-titulo: 'Poppins', sans-serif;
    --font-texto: 'Ibm-plex-Sans', sans-serif;
    --font-button:'Montserrat', swap;
    --grande-font-size: 2.5rem;
    --h1-font-size: 1.5rem;
    --h2-font-size: 1.25rem;
    --h3-font-size: 1.125rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem; 
}

/*==== Fonte e Typografia Responsivo ====*/
@media screen and (min-width: 768px){
    :root{
    --biggest-font-size: 4.5rem;
    --h1-font-size: 2.25rem;
    --h2-font-size: 1.5rem;
    --h3-font-size: 1.25rem;
    --normal-font-size: 1.1rem;
    --small-font-size: .875rem;
    --smaller-font-size: .813rem;
    }
}

/*==== Menu ====*/
a{
	text-decoration: none;
	color: var(--color-lighten2);
}
html::selection{
	background: var(--color-red);
}
header{
	width: 100%;
	height: 100%;
	background-size: cover;
	position: relative;
    overflow: hidden;
}

.container{
	max-width: 120rem;
	width: 90%;
	margin: 0 auto;
}

.menu-toggle{
	position: fixed;
	top: 2.5rem;
	right: 2.5rem;
	color: var(--color-lighten);
	font-size: var(--grande-font-size);
	cursor: pointer;
	z-index: 100;
	display: none;
}

nav{
	padding-top: 1.3rem;
	padding-bottom: 1.3rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-transform: uppercase;
	font-size: var(--h2-font-size);
	font-family: var(--font-titulo);
}
.brand{
	transform: translateX(-100rem);
	animation: slideIn .5s forwards;
	height: 11%;
	width: 15%;
}
.brand img{
	height: 100%;
	width: 100%;
}
.brand:hover{
    cursor: pointer;
}

.brand span{
	color: var(--color-red);
}

nav ul{
	display: flex;
}

nav ul li{
	list-style: none;
	transform: translateX(100rem);
	animation: slideIn .3s forwards;
}

nav ul li:nth-child(1){
	animation-delay: 0s;
}

nav ul li:nth-child(2){
	animation-delay: .4s;
}

nav ul li:nth-child(3){
	animation-delay: .8s;
}

nav ul li:nth-child(4){
	animation-delay: 1.3s;
}

nav ul li a{
	padding: 1rem 0;
	margin: 0 3rem;
	position: relative;
	letter-spacing: 2px;
}

nav ul li a:last-child{
	margin-right: 0;
}

nav ul li a::before,
nav ul li a::after{
	content: '';
	position: absolute;
	width: 100%;
	height: 2px;
	background-color: var(--color-red);
	left: 0;
	transform: scaleX(0);
	transition: all .5s;
}

nav ul li a::before{
	top: 0;
	transform-origin: left;
}

nav ul li a::after{
	bottom: 0;
	transform-origin: right;
}

.overlay{
	background-color: rgba(0,0,0,.95);
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	transition: opacity 650ms;
	transform: scale(0);
	opacity: 0;
    display: none;
}

nav ul li a:hover::before,
nav ul li a:hover::after{
	transform: scaleX(1);
}

@keyframes slideIn {
	from{

	}
	to{
		transform: translateX(0);
	}
}

/*==== Menu Responsive====*/
@media screen and (max-width: 905px){

	.container{
		width: 100%;	
	}
	.menu-toggle{
		display: block;
	}
	header{
		z-index: 99;
		height: 0;
		position: fixed;
	}

	nav{
		padding-top: 0;
		display: none;
		flex-direction: column;
		justify-content: space-evenly;
		align-items: center;
		height: 100vh;
		z-index: 99;
		text-align: center;
		position: fixed;
		width: 100%;
	}

	nav ul{
		flex-direction: column;
	}

	nav ul li{
		margin-top: 3rem;
	}

	nav ul li a{
		margin: 0;
		font-size: var(--h1-font-size);
	}

	.brand{
		height: 125px;
		width: 150px;
	}
  
  .overlay.menu-open,
  nav.menu-open{
	  display: flex;
	  transform: scale(1);
	  opacity: 1;
	  align-items: center;
  }
}

/*==== Slider Sessão Introdução====*/
.slider{
	width: 100%;
	height: 85vh;
	background-position-y: center;
	background-position-x: center;
	background-size: cover;
	background-position: center center;
	background: url(../img/slider1.jpg);
	animation: slide ease-in 30s infinite;
}
@keyframes slide{
    35%{
	background: url(../img/slider2.jpg) no-repeat;
	background-size: cover;
	}
	70%{
		background: url(../img/slider5.jpg)no-repeat;
		background-size: cover;
	}
	100%{
		background: url(../img/slider1.jpg)no-repeat;
		background-size: cover;
	}
}

/*==== Slider Sessão Conteúdo====*/
.conteudo-slider{
    align-items: center;
	text-align: center;
	width: 100%;
	align-items: center;
	justify-content: center;
	margin-right: auto;
	margin-left: auto;
	position:absolute;
    top: 55%;
}
.conteudo-slider h1, h3{
	margin-left: auto;
	margin-right: auto;
}
.conteudo-slider h1{
	font-family: var(--font-titulo);
	font-size: var(--h1-font-size);
	margin-bottom: 1.5rem;
	color: var(--color-lighten);
	animation: introducao 1s 0.5s forwards;
}
.conteudo-slider h3{
	font-family: var(--font-texto);
	font-size: var(--h3-font-size);
	margin-bottom: 2rem;
	color: var(--color-lighten);
	animation: introducao 1s 0.7s forwards;
}
.botao-intro{
	animation: introducao 1s 1s forwards;
	text-align: center;
	width: 30%;
}
@keyframes introducao{
    0%{
     transform: translateY(10rem) rotateY(-30deg);
    }
    100%{
        transform: translateY(0) rotateY(0);
        opacity: 1;
    }
}
/*==== Conteudo responsive ====*/
@media screen and (max-width: 390px){
	.conteudo-slider{
		top: 40%;
		transform: translateY(-50%);
	}
	.conteudo-slider h1, h3{
		width: 70%;
	}
}

@media screen and (max-width: 905px){
	.conteudo-slider{
		text-shadow: none;
		transform: translateY(-50%);
	}
	.conteudo-slider h3{
	    line-height: 2.3rem;
	}
}

/*==== Botão ====*/
.btn{
	cursor: pointer;
	display: block;
	color: var(--color-blacken);
	font-size: var(--normal-font-size);
	font-family: var(--font-button);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--color-red);
	padding: 10px 10px;
	background: transparent;
	text-transform: uppercase;
	overflow: hidden;
	transition: 1s all ease;
	margin-left: auto;
	border-radius: 0.4rem;
	margin-right: auto;
	background: var(--color-red);
	transition: .5s ease-in;
  }
.btn:hover{
    background: transparent;
	transition: .4s ease-in;
	color: var(--color-blacken);
  }

  .btn2{
	cursor: pointer;
	display: block;
	color: var(--color-blacken);
	font-size: var(--normal-font-size);
	font-family: var(--font-button);
	font-weight: 600;
	text-decoration: none;
	border: 1px solid var(--color-red);
	padding: 10px 10px;
	background: transparent;
	text-transform: uppercase;
	overflow: hidden;
	transition: 1s all ease;
	margin-left: auto;
	border-radius: 0.4rem;
	margin-right: auto;
	background: var(--color-red);
	transition: .5s ease-in;
  }
.btn2:hover{
    background: transparent;
	transition: .4s ease-in;
	color: var(--color-light);
  }

  /*==== Botão Responsivo====*/
  @media screen and (max-width: 905px){
	.middle-btn{
		width: 50%;
	  }
  }

   /*==== Titulos de Sessões====*/
.titulo-sessao{
    display: flex;
    align-items: center;
    justify-content: center;
}
.titulo-sessao h1{
    font-family: var(--font-titulo);
    font-size: var(--h1-font-size);
    color: var(--color-lighten);
    border-bottom: solid 3px  var(--color-lighten2);
	padding-top: 1rem;
    margin-bottom: 1.4rem;
}

/*==== Sessão Sobre nos ====*/
.SobreNos{
	height: 100%;
	margin-bottom: 2rem;
	background: var(--color-blacken);
}
.conteudo-sobre p{
	color: var(--color-lighten);
	width: 75%;
	margin-left: auto;
	margin-right: auto;
	font-size: var(--h3-font-size);
	font-family: var(--font-texto);
	text-align: justify;	
	line-height: 2rem;
}
@media screen and (max-width: 905px){
	.conteudo-sobre p{
		width: 85%;
	  }
  }

/*==== Sessão Serviços ====*/
.servicos-titulo{
	background: var(--color-light);
}
.titulo-servico{
    display: flex;
    align-items: center;
    justify-content: center;
}
.titulo-servico h1{
    font-family: var(--font-titulo);
    font-size: var(--h1-font-size);
    color: var(--color-blacken);
    border-bottom: solid 3px  var(--color-lighten2);
	padding-top: 1rem;
    margin-bottom: 1.4rem;
}
.Sessao-servico{
    display: flex;
    justify-content: center;
    align-items: center;
	min-height: 52vh;
	background: var(--color-light);
   /*==== background: linear-gradient(#21242d, #21242d 50%, #ffffff 50%, #ffffff 100%); ====*/ 
}
.container-servico{
    width: 1100px;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
	margin-top: 1rem;
}
.container-servico .box-servico{
	margin-top: .5rem;
    position: relative;
    width: 480px;
    background: var(--color-light);
    padding: 50px 25px 40px;
    border-radius: .8rem;
    cursor: pointer;
    box-shadow: 0 10px 20px rgb(15 15 15 / 76%);
    transition: .4s ease-in;
}
.box-servico:hover{
	box-shadow: 0 10px 30px rgb(15, 15, 15);
	transition: .4s ease-in;
	background: var(--color-light);
}
.box-servico h3{
	font-family: var(--font-titulo);
	font-size: var(--h3-font-size);
	margin-bottom: 1rem;
	width: 100%;
	color: var(--color-blacken);
}
.box-servico p{
	font-family: var(--font-texto);
	line-height: 1.4rem;
	font-size: var(--normal-font-size);
	color: var(--color-blacken);
	text-align: justify;
}
.botao-servico{
	width: 30%;
	text-align: center;
	color: var(--color-blacken);	
}
.botao-contato{
	background: var(--color-light);
	padding-bottom: 2rem;
	padding-top: 2rem;
}

/*==== Sessão Serviços Responsive ====*/
@media screen and (max-width: 905px){
	.container-servico{
		width: 80%;
	}
	.box-servico{
		margin-left: auto;
		margin-right: auto;
		justify-content: center;
	}
	.box-servico:nth-child(1){
       margin-bottom: 1rem;
	}
	.box-servico:nth-child(2){
       margin-bottom: 1rem;
	}
	.botao-servico{
		width: 55%;
	}
}

/*==== Dicas ====*/
.todas-dicas{
	margin-top: 1rem;
}
.titulo-dicas{
    display: flex;
    align-items: center;
    justify-content: center;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}
.titulo-dicas h1{
    font-family: var(--font-titulo);
    font-size: var(--h1-font-size);
    color: var(--color-light);
    border-bottom: solid 3px  var(--color-lighten2);
	padding-top: 1rem;
    margin-bottom: 1.4rem;
}

.dicas{
    display: grid;
    grid-template-columns: 35rem 35rem;
    grid-gap: 3rem;
    row-gap: 3rem;
    align-items: center;
    justify-content: center;
    padding-bottom: 3rem;
}
.dica-header{
    display: flex;
    align-items: center;
	color: var(--color-light);
}
.dica-header i{
    font-size: 2rem;
}
.dica-header h3{
    font-family: var(--font-texto);
    font-size: var(--h2-font-size);
    padding-left: 1rem;
}
.dicas-text{
    font-family: var(--font-texto);
    font-size: var(--h3-font-size);
    margin-top: .8rem;
	text-align: justify;
	color: var(--color-light);
}
.dica-header:hover{
    color:var(--color-light);
    transition: 3.5s;
}
.dicas-text h1, h3{
	width: 90%;
}
@media screen and (max-width: 1100px){
	.dicas{
		display: inherit;
		width: 90%;
		margin-left: auto;
		justify-content: center;
		margin-right: auto;
		align-items: center;
	}
	.dica-header{
		display: center;
	}
	.dicas-box{
		margin-top: 2rem;
	}
}

/*==== Porque nos contratar? ====*/
.titulo-seguro{
    display: flex;
    align-items: center;
    justify-content: center;
}
.titulo-seguro h1{
    font-family: var(--font-titulo);
    font-size: var(--grande-font-size);
	color: var(--color-light);
    border-bottom: solid 3px  #efefef;
	padding-top: 1rem;
    margin-bottom: 1.4rem;
}
.Seguranca{
	height: 90vh;
	background: var(--color-blacken);
}
.Seguranca p{
	width: 80%;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: var(--font-texto);
	color: var(--color-light);
	font-size: var(--h3-font-size);
	font-weight: 450;
	line-height: 2rem;
}
.parallax-imagem{
    width: 100%;
    height: 90vh;
    background: url(../img/ParallaxElevador.jpg) no-repeat;
    background-size: cover;
    background-position: center;
    transition: 2s ease-in;
    position: relative;
}
.conteudo-imagem{
    text-align: center;
    font-size: var(--h2-font-size);
    width: 100%;
    margin-left: auto;
    margin-right: auto;
	position: relative;
    top: 50%;
    transform: translateY(-50%);
}
@media screen and (max-width: 905px){
	
}

/*==== Depoimentos ====*/
.Sessao-Depoimentos{
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--color-light);
	overflow: hidden;
}
.swiper-container{
	width: 100%;
	padding-top: 50px;
	padding-bottom: 50px;
}
.swiper-slide{
	background-position: center;
	background-size: cover;
	width: 320px;
	background: var(--color-light);
}
.depoimentos{
	position: relative;
	width: 100%;
	padding: 25px;
	color: #999;
}
.depoimentos .aspas{
	position: absolute;
	top: 20px;
	right: 30px;
	opacity: 0.2;
}
.depoimentos .detalhes-depoimento{
	display: flex;
	align-items: center;
	margin-top: 20px;
}
.depoimentos .detalhes-depoimento .imgBx{
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	margin-right: 10px;
}
.depoimentos .detalhes-depoimento .imgBx img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.depoimentos .detalhes-depoimento h3{
    font-size: var(--h3-font-size);
	font-weight: 400;
	letter-spacing: 1px;
	color: var(--color-lighten);
	line-height: 1.1rem;
}
.depoimentos .detalhes-depoimento h3 span{
    font-size: var(--normal-font-size);
	color: var(--color-lighten2);
}


/*==== Contato Sessão ====*/
#contato{
	background-color: var(--color-light);
}
.contato-sessao{
	background-color: var(--color-light);
	padding-bottom: 1.4rem;
}
::placeholder{
   color: var(--color-blacken);
   font-family: var(--font-texto);
   font-size: var(--normal-font-size);
}
.input-group input, textarea{
    justify-content: center;
    display: flex;
    margin-bottom: 3.2rem;
    width: 55%;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
    border: 1px solid var(--color-lighten2);
    padding: 20px;
    border-radius: .6rem;
	display: block;
}
.input-group textarea{
    margin-bottom: 1.5rem;
}
.input-group label{
  font-size: var(--normal-font-size);
  color: #4b4b4b;
  font-family: var(--font-texto);
  color: var(--color-blacken);
  justify-content: center;
  display: flex;
  width: 52%;
  margin-bottom: 0.5rem;
}
.container-contato button{
    justify-content: center;
    display: flex;
    margin-left: auto;
    margin-right: auto;
	margin-bottom: 2rem;
	width: 35%;
}
/*==== Contato Sessão Responsivo ====*/
@media screen and (max-width: 905px){
	.input-group input, textarea{
		width: 74%;
	  }
}

/*==== Rodapé ====*/
.Rodape{
	min-height: 20vh;
	align-items: center;
	justify-content: flex-end;
	display: flex;
	flex-direction: column;
	background: var(--color-blacken);
}
footer{
	position: relative;
	width: 100%;
	height: auto;
	padding: 50px 100px;
	background: var(--color-blacken);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}
footer .container-rodape{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
}
footer .container-rodape .sec{ 
	margin-right: 30px;
}
footer .container-rodape .sec.aboutus{
	width: 40%;
}
footer .container-rodape  h2{
	position: relative;
	color: var(--color-light);
	font-weight: 500;
	margin-bottom: 15px;
	font-family: var(--font-titulo);
}
footer h2:before{
	content: '';
	position: absolute;
	bottom: -5px;
	left: 0;
	width: 50px;
	height: 2px;
	background: var(--color-red);
}
footer  p{
	color: var(--color-lighten);
	font-size: var(--h3-font-size);
}
.sci{
	margin-top: 20px;
	display: flex;
}
.sci li{
	list-style: none;
}
.sci li a{
	display: inline-block;
	width: 40px;
	height: 40px;
	background: #404450;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 10px;
	border-radius: 4px;
	animation: 1s ease-in;
}
.sci li a:hover{
    background: var(--color-red);
	animation: 1s ease-in;
}
.sci li a .far{
    color: var(--color-light);
	font-size: 20px;
}
.quickLinks{
	position: relative;
	width: 15%;
}
.quickLinks ul li{
	list-style: none;
}
.quickLinks ul li a{
	color: var(--color-lighten2);
	text-decoration: none;
	margin-bottom: 10px;
	display: inline-block;
	font-size: var(--normal-font-size);
}
.quickLinks ul li a:hover{
	color: var(--color-light);
}
@media screen and (max-width: 991px){
    footer{
		padding: 40px;
	}
	footer .container-rodape{
		flex-direction: column;
	}
	footer .container-rodape .sec{
		margin-right: 0;
		margin-bottom: 40px;
	}
	footer .container-rodape .sec.aboutus, .quickLinks{
		width: 100%;
	}
	footer .sec.quickLinks h2{
		margin-top: 1.5rem;
	}
}

/*==== Scroll Personalizado ====*/
::-webkit-scrollbar{
	width: 10px;
}
::-webkit-scrollbar-thumb{
	background: linear-gradient(transparent, var(--color-red));
	border-radius: 5px;
	transition: .6s ease-in;
}
::-webkit-scrollbar-thumb:hover{
	background: linear-gradient(transparent, var(--color-lighten2));
	transition: .6s ease-in;
}



/*==== Botão Topo ====*/
#link-topo {
    position: fixed;
    right: 3rem;
    bottom: 3rem;
    width: 3rem;
    height: 3rem;	
	background: #141E30; 
    background: -webkit-linear-gradient(to right, #243B55, #141E30); 
    background: linear-gradient(to right, #243B55, #141E30); 
	display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    border-radius: .3rem;
    box-shadow: 0. 0.1rem 0.6rem #000000;
	transition: 0.7s ease-in;
	z-index: 20;
}

#link-topo:hover {
	background: var(--color-blacken);
	background: -webkit-linear-gradient(to right, #2C5364, #203A43, var(--color-blacken));
	background: linear-gradient(to right, #2C5364, #203A43, var(--color-blacken)); 
	transition: 1s ease-in;
}

/*==== Botão Topo Responsive ====*/
@media screen and (max-width: 905px){
	#link-topo {
		right: 1rem;
		bottom: 3rem;
		width: 2.8rem;
		height: 2.8rem;	
	}
}