@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
:root{
	--blue: #0085ff;
}
/* Estilizando o formulário em geral */
#videoid{width:50%;}
.wpcf7-form {
  max-width: 500px;
  margin: 0 auto;
}
/* Estilos para o botão */
.wpcf7-form-control.has-spinner.wpcf7-submit {
  display: inline-block;
  background-color: #21398B; /* Cor de fundo */
  color: #ffffff; /* Cor do texto */
  border: none; /* Sem borda */
  padding: 10px 20px; /* Espaçamento interno */
  border-radius: 5px; /* Borda arredondada */
  font-size: 16px; /* Tamanho da fonte */
  cursor: pointer; /* Cursor de apontar */
  position: relative; /* Necessário para o spinner */
  overflow: hidden; /* Oculta o spinner */
	width:100%; margin-top:2%;
}

/* Estilos para o spinner */
.wpcf7-form-control.has-spinner.wpcf7-submit:before {
  content: "\f110"; /* Código do ícone do spinner (fontawesome) */
  font-family: FontAwesome; /* Fonte do ícone */
  position: absolute; /* Posicionamento absoluto */
  top: 50%; /* Centraliza verticalmente */
  left: 50%; /* Centraliza horizontalmente */
  transform: translate(-50%, -50%); /* Centraliza completamente */
  font-size: 20px; /* Tamanho do ícone do spinner */
  color: #ffffff; /* Cor do ícone */
  opacity: 0; /* Inicialmente invisível */
  transition: opacity 0.3s ease-in-out; /* Transição suave para aparecer */
}

/* Estilos para mostrar o spinner ao enviar o formulário */
.wpcf7-submit.wpcf7-submitting .wpcf7-form-control.has-spinner.wpcf7-submit:before {
  opacity: 1; /* Torna o spinner visível */
}

/* Estilos para mostrar o texto do botão após o envio do formulário */
.wpcf7-submit.wpcf7-submitting .wpcf7-form-control.has-spinner.wpcf7-submit {
  background-color: #4CAF50; /* Cor de fundo do botão enquanto envia */
  color: transparent; /* Texto transparente enquanto envia */
  pointer-events: none; /* Desativa interações durante o envio */
}


/* Estilizando os campos de entrada de texto */
.wpcf7-form-control-wrap input[type="text"],
.wpcf7-form-control-wrap input[type="email"],
.wpcf7-form-control-wrap input[type="tel"],
.wpcf7-form-control-wrap textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Estilizando os campos de entrada de texto quando estão em foco */
.wpcf7-form-control-wrap input[type="text"]:focus,
.wpcf7-form-control-wrap input[type="email"]:focus,
.wpcf7-form-control-wrap input[type="tel"]:focus,
.wpcf7-form-control-wrap textarea:focus {
  border-color: #ff0000;
  box-shadow: 0 0 5px #21398B;
}

/* Estilizando o botão de envio */
.wpcf7-form-control-wrap input[type="submit"] {
  background-color: #ff0000;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.wpcf7-form-control-wrap input[type="submit"]:hover {
  background-color: #21398B;
}

/* Estilizando as mensagens de sucesso e erro */
.wpcf7-response-output {
  margin-top: 10px;
  padding: 10px;
  border-radius: 4px;
}

.wpcf7-mail-sent-ok {
  background-color: #d4edda;
  color: #155724;
}

.wpcf7-validation-errors {
  background-color: #f8d7da;
  color: #721c24;
}

@keyframes go-back {
  from {
    transform: translateX(100px);
  }
  to {
    transform: translateX(0);
  }
}
#bgred {background:red; max-height:75px; width:80%;}
*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
	outline: none;
	border: none;
	text-decoration: none;
	transition: .2s linear;
}
h3{text-transform:uppercase; line-height:1.0;}
span{text-transform:uppercase; line-height:1.0;}
html{
	font-size: 62.5%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
	overflow-x: hidden;
}

header{
	position: fixed;	
	top: 0;
	left: 0;
	right: 0;
	-webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
		-moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
		box-shadow:         9px 7px 5px rgba(50, 50, 50, 0.77);
	background-image: linear-gradient(#fff, #F2F2F2);
	padding: 1rem 9%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: 1000;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
}
header .logo img{
	width: 20rem;
	
}
header .logo img:hover{
	width: 20rem;
	transform: scale(1.3);
}

header .logo span{
	color: #21398B;
}
header .navbar a{
	font-size: 1.5rem;
	padding: 0 1.5rem;
	color: #666;
}
header .navbar a:hover{
	color: #1A3C8E;
	
}
header .icons a{
	font-size: 2rem;
	color: #666;
	margin-left: 1rem;
}
header .icons a:hover{
	color: #1A3C8E;
}
header #toggler{
	display: none;
}
header .fa-bars{
	font-size: 3rem;
	color: #333;
	border-radius: .5rem;
	padding: .5rem 1.5rem;
	border: .1rem solid rgba(0, 0, 0, .3);
	cursor: pointer;
	display: none;
}

section{
	padding: 5rem 10%;
}

.inicio{
	padding: 0;
	
}
.inicio .slide{
	
	min-height: 60rem;
	display: flex;
	align-items: center;
	position: relative;
	background-size: cover !important;
	background-position: center !important;
}
.inicio .slide .content{
	max-width: 50rem;
	position: relative;
	
}
.inicio .slide::before{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	background: linear-gradient(90deg, #21398B, transparent);
	margin-bottom:5%;
}
.inicio .slide .content h3{
	font-size: 6rem;
	color: #fff;
	text-transform: uppercase;
}
.inicio .slide .content p{
	font-size: 1.5rem;
	color: #ccc;
	padding: 1rem 0;
	line-height: 1.5;
}
.btn{
	display: inline-block;
	margin-top: 1rem;
	border-radius: 5rem;
	background: rgba(255 255 255 / 8%);
	color: #fff;
	padding: 1rem 8rem;
	border: 1px solid #fff;
	cursor: pointer;
	font-size: 1.7rem;
}
.btn:hover{
	border: 1px solid #21398B;
	background: #21398B;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}


.heading{
	margin-top:30%;
	text-align: center;
	font-size: 4rem;
	color: #333;
	padding: 1rem;
	margin: 2rem 0;
}
.heading span{
		color: #21398B;
}

.sobre .row{
margin-top:30%;
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 2rem 0;
	padding-bottom: 3rem;
}
.sobre .row .content{
	flex: 1 1 40rem;
	width:70%;
	float:left;
}
.sobre .row .content h3{
	font-size: 3rem;
	color: #333;
	width:70%;
}
.sobre .row .content p{
	font-size: 1.8rem;
	text-align:justify;
	color: #424251;
	padding-top: 1rem;
	width:100%;
	line-height: 1.5;
}
#video{float:right; margin-top-:-50%; background:#000; width:50%;}
.segmentos .box-container{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem;
	align-items: flex-start;
}
.segmentos .box-container .box{
	text-align: center;
}
.segmentos .box-container .box img{
	height: 7rem;
	margin-bottom: 1rem;
}
.segmentos .box-container .box h3{
	font-size: 2rem;
	color: #333;
	margin: 1rem 0;
}
.segmentos .box-container .box p{
	line-height: 1.5;
	font-size: 1.5rem;
	color: #999;
}

.produtos .row{
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	padding: 2rem 0;
	padding-bottom: 3rem;
}
.produtos .row .infocom{
	flex: 1 1 40rem;
	position: relative;
}
.produtos .row .infocom img{
	width: 100%;
	border: 1.5rem solid #fff;
	border-radius: 1rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
	height: 100%;
	object-fit: cover;
}
.produtos .row .infocom h3{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	background: #fff;
	color: none;
	width: 100%;
	padding: 1rem 2rem;
	text-align: center;
	font-weight: 700;
	mix-blend-mode: unset;
}
.produtos .row .InfoAutoCar{
	flex: 1 1 40rem;
	position: relative;
}
.produtos .row .InfoAutoCar img{
	width: 100%;
	border: 1.5rem solid #fff;
	border-radius: 1rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
	height: 100%;
	object-fit: cover;
}
.produtos .row .InfoAutoCar h3{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	font-size: 3rem;
	background: #fff;
	color: none;
	width: 100%;
	padding: 1rem 2rem;
	text-align: center;
	font-weight: 700;
	mix-blend-mode: unset;
}
.produtos .row .content{
	flex: 1 1 40rem;
}
.produtos .row .content h3{
	font-size: 3rem;
	color: #333;
}
.produtos .row .content p{
	font-size: 1.5rem;
	color: #999;
	padding-top: 1rem;
	line-height: 1.5;
}
.btn-produtos{
	display: inline-block;
	margin-top: 1rem;
	border-radius: 5rem;
	background: #21398B;
	color: #fff;
	padding: 1rem 8rem;
	border: 1px solid #fff;
	cursor: pointer;
	font-size: 1.7rem;
}
.btn-produtos:hover{
	border: 1px solid #21398B;
	background: rgba(255 255 255 / 8%);
	color: #21398B;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}

.contato .row{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2rem;
}
.contato .row .imagemctt{
	flex: 1 1 50rem;
}
.contato .row .imagemctt img{
	width: 100%;
}
.contato .row form{
	flex: 1 1 30rem;
	border: 1.5rem solid #fff;
	border-radius: 1rem;
	box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
	padding: 2rem;
	text-align: center;
}
.contato .row form h3{
	font-size: 1.5rem;
	margin-bottom: 1rem;
	color: #333;
}
.contato .row form .box{
	width: 100%;
	padding: 1.4rem;
	font-size: 1.8rem;
	color: #333;
	border: 0.1rem solid #999;
	margin: 1rem 0;
	border-radius: 0.3rem;
}

img{
    max-width:100%;
}
.inner-wrapper {
    margin-top:-5%;
  width: 100%;
  height: 460px;
  position: absolute;
  top: 0;
  left: 0;
  margin-bottom: 0px;
  overflow: hidden;
}

.inner-wrapper {

  width: 100%;
  height: 470px;
  /* position: absolute; */
  top: 0;
  left: 0;
  margin-bottom: 0px;
  overflow: hidden;
  
}

#slider-wrapper {
max-height: 60em;
    margin: 1em auto;
    position: relative;
	

}

#s1 {
	
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -36px;
  border-radius: 20px;
  opacity: 0.3;
  cursor: pointer;
  z-index: 999;
}

#s2 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: -12px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s3 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 12px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s4 {
  padding: 6px;
  background: #000000;
  position: absolute;
  left: 50%;
  bottom: 25px;
  margin-left: 36px;
  border-radius: 20px;
  cursor: pointer;
  z-index: 999;
}

#s1:hover,
#s2:hover,
#s3:hover,
#s4:hover {
  opacity: .50;
}



.control {
  display: none;
}

#Slide1:checked ~ .overflow-wrapper {
  margin-left: 0%;
}

#Slide2:checked ~ .overflow-wrapper {
  margin-left: -100%;
}

#Slide3:checked ~ .overflow-wrapper {
  margin-left: -200%;
}

#Slide4:checked ~ .overflow-wrapper {
  margin-left: -300%;
}

#Slide1:checked + #s1 {
  opacity: 1;
}

#Slide2:checked + #s2 {
  opacity: 1;
}

#Slide3:checked + #s3 {
  opacity: 1;
}

#Slide4:checked + #s4 {
  opacity: 1;
}

.overflow-wrapper {
  width: 400%;
  height: 99%;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: hidden;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
transition-duration: .5s;
    transition-timing-function: ease-in;
    transition-delay: 0.3s;
}

.slide img {
  width: 25%;
  float: left;
position: relative;
}



button {
    padding: 5px;
    font-size: 1.5em;
}
#fotos{
    margin-top:30px;
    width:650px;
    overflow-x: hidden;
    height:135px;
    border:1px solid #CCC;
    white-space: nowrap;
}

#fotos ul li{

    margin-right:4px;
    cursor: pointer;
    width:100px;
    height:100px;
    background:#CCC;
    border:1px solid #555;
    display: inline-block;
}


#box-atuacao{width:42%; min-height:232px; max-height:232px; border-radius:10px; box-shadow: 10px 10px 5px #aaaaaa; border: 1px solid #CCC; padding:15px; margin-left:2%; margin-top:2%; display:inline-table;}




@media (max-width: 991px){
	#video{float:right; margin-top-:-50%; background:#000; width:100%;}
	#videoid{width:100%;}
	#bgred {background:red; max-height:75px; width:98%;}
	#box-atuacao img {margin-bottom:5%;}

	html{
		font-size: 55%
	}
	header{
		padding: 2rem;
	}
	section{
		padding: 2rem;
	}
	.inicio{
		background-position: left;
	}
}
@media (max-width: 768px){
	html .fa-bars{
		display: block;
	}
	header .navbar{
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #eee;
		border-top: .1rem solid rgba(0, 0, 0, .1);
		clip-path: polygon(0 0, 100% 0, 0 0);
	}
	header #toggler:checked ~ .navbar{
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
	}
	header .navbar a{
		margin: 1.5rem;
		padding: 1.5rem;
		background: #fff;
		border: .1rem solid rgba(0, 0, 0, .1);
		display: block;
	}
	
	
	border-bottom:3px #F00;
	.home .content h3{
		font-size: 5rem;
	}
	.home .content span{
		font-size: 2.5rem;
	}
}
.footer{
	background:#21398B;
	border-top: 6px solid var(--azul);
	margin-top: 5rem;
	border-top:10px solid #D7370E;
}
.footer .box-container{
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
}
.footer .box-container .box{
	padding: 1rem 0;
	flex: 1 1 20rem;
}
.footer .box-container .box-info{
	padding: 1rem 0;
	flex: 8 1 25rem;
}
.footer .box-container .box-info img{
	width: 15rem;
}
.footer .box-container .box-info p{
	font-size: 1.5rem;
	padding: .7rem 0;
	color: #fff;
}
.footer .box-container .box-info p.telefone{
	font-size: 1.5rem;
	color: #fff;
	margin: -1.5rem 0;
	position: absolute;
}
.footer .box-container .box-info p.telefone::before{
	content: '';
	position: relative;
	display: block;
	color: #fff;
    width: 11.5rem;
    top: 2.5rem;
}
.footer .box-container .box h3{
	text-transform: capitalize;
	font-size: 2.5rem;
	padding: .7rem 0;
	color: #fff;
}

.footer .box-container .box h3::before{
	content: '';
	position: relative;
	display: block;
	color: #fff;
    width: 3rem;
    top: 3.5rem;
}
.footer .box-container .box p{
	font-size: 1.5rem;
	padding: .7rem 0;
	color: #fff;
}
.footer .box-container .box a{
	display: block;
	font-size: 1.8rem;
	padding: .3rem 0;
	color: #fff;
	text-transform: capitalize;
}
.footer .box-container .box a:hover{
	color: #DA390F;
	font-weight: 700;
}
.footer .box-container .box .btn-atendimento{
	display: inline-block;
	margin-top: 1rem;
	border-radius: .5rem;
	background: var(--azul);
	color: #fff;
	padding: 1rem 2rem;
	border: 1px solid #fff;
	cursor: pointer;
	font-size: 1.5rem;
}
.footer .box-container .box .btn-atendimento:hover{
	border: 1px solid var(--azul);
	background:#DA390F;
	color: #fff;
	box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
}
.footer .creditos{
	text-align: center;
	padding: 2rem 1rem;
	margin-top: 2rem;
	font-size: 1.5rem;
	color: #fff;
	border-top: 1px solid var(--cinza-claro);
}
.footer .creditos span{
	color: #fff;
}
.swiper-button-prev{
	color: #fff;
}
.swiper-button-next{
	color: #fff;
}
#bg-sld{margin-top:2%;}
@media (max-width: 450px){
	#video img{width:100%;}
	#bg-sld{margin-top:20%;}
	html{
		font-size: 50%
	}
	.heading{
		font-size: 3rem;
	}
}