.top_header{
	width: 100%;
	height: 40px;
	background: #d50000;
}
.top{
	width: 100%;
	height: 100%;
	display: flex;
}
.top_header_tel{
	width: 25%;
	height: 100%;
	display: flex;
	align-items: center;
	color: #fff;
}

.top_header_email{
	width: 25%;
	height: 100%;
	display: flex;
	align-items: center;
	color: #fff;
}
.top_header_social{
	width: 50%;
	height: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	color: #fff;
}
.top_header_social i{
	margin: 3px;
	cursor: pointer;
}
/*DESTAQUE*/

.text_into{
	width: auto;
	height: 120px;
	background: ;
}
.destaque_content{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: flex-end;
}
.destaque_content_content{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-between;
}
.destaque_content_item{
	width: 32%;
	height: auto;
	background: #d50000;
	padding: 10px;
	position: relative;
	overflow: hidden;
	border: 0; /* sem bordas reais adicionais na borda */
	transition: transform 0.25s ease; /* zoom suave */
	display: inline-block;
	/* Mantém o contexto de transform para o hover */
	transform-origin: center;
}
.destaque_content_item:hover{
	cursor: pointer;
}
/* cantos decorativos apenas visuais, mantendo a área do box 150x150 */
.destaque_content_item.decor-cantos::before,
.destaque_content_item.decor-cantos::after {
	content: "";
	position: absolute;
	width: 10px;
	height: 10px;
	background: #fff; /* cor base vermelha será aplicada no hover */
	transition: background 0.25s ease; /* cor suave ao mudar */
}

/* Canto superior direito (decorativo) */
.destaque_content_item.decor-cantos::before {
	top: 0;
	right: 0;
	/* triângulo no canto superior direito */
	clip-path: polygon(100% 0, 0 0, 100% 100%);
}

/* Canto inferior esquerdo (decorativo) */
.destaque_content_item.decor-cantos::after {
	bottom: 0;
	left: 0;
	/* triângulo no canto inferior esquerdo */
	clip-path: polygon(0 100%, 0 0, 100% 100%);
}

/* Efeito hover: cor vermelha nos cantos e aumento de escala */
.destaque_content_item.decor-cantos:hover {
	transform: scale(1.08); /* aumenta 8% */
}

.destaque_content_item.decor-cantos:hover::before,
.destaque_content_item.decor-cantos:hover::after {
	background: #0d47a1; /* vermelho desejado no hover */
	width: 30px;
	height: 30px;
	transition: 1.2s all;
}

.destaque_content_content i{
	font-size: 40px;
	color: #fff;
}
.destaque_content_content h3{
	font-size: 25px;
	color: #fff;
}
/*CARROSSEL*/
/* Estilos do carrossel (independente) */



/* Todas as imagens empilhadas uma sobre a outra, mas apenas uma visível */
#hero.slider-show img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;              /* oculta todas inicialmente */
	transition: opacity 1s ease-in-out;
	/* Evita que ocupem espaço na renderização, mantendo uma única foto visível por vez */
}

/* A primeira imagem fica visível no início */
#hero.slider-show img:first-child {
	opacity: 1;
	z-index: 2;
	animation: fade 40s linear infinite; /* 4 imagens * 10s cada = 40s total */
}

/* Define a ordem de fade para cada imagem, repetido com delays usando animação separada */
#hero.slider-show img:nth-child(1) { animation: fade 40s linear infinite; animation-delay: 0s; }
#hero.slider-show img:nth-child(2) { animation: fade 40s linear infinite; animation-delay: 10s; }
#hero.slider-show img:nth-child(3) { animation: fade 40s linear infinite; animation-delay: 20s; }
#hero.slider-show img:nth-child(4) { animation: fade 40s linear infinite; animation-delay: 30s; }

/* Função de fades entre as imagens */
@keyframes fade {
	0%   { opacity: 0; }
	5%   { opacity: 1; }
	25%  { opacity: 1; }
	30%  { opacity: 0; }
	100% { opacity: 0; }
}

/*SOLUÇÕES EM TECNOLOGIA*/
#clients h2{
	text-align: center;
}
#clients p{
	text-align: justify;
}

/*PROJECTO MAIS RECENTE*/
.recent_project_content p{
	text-align: justify;
}
.recent_project_content_link{
	width: 100%;
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.recent_project_content_link a{
	background: #d50000;
	color: #fff;
	padding: 10px 50px;
	text-align: center;
	text-decoration: none;
}
.recent_project_content_link a:hover{
	background: #f44336;
	color: #fff;
}


@media (max-width: 575px){
	.top_header{
		display: none;
		height: 60px;
	}
	.top{
		display: flex;
		flex-wrap: wrap;
	}
	.top_header_tel{
		width: 50%;
		height: 50%;
	}

	.top_header_email{
		width: 50%;
		height: 50%;
	}
	.top_header_social{
		width: 100%;
		height: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.text_into{
		height: 80px;
}

	.destaque_content_content{
		display: flex;
		flex-wrap: wrap;
		padding-top: 30px;
	}
	.destaque_content_item {
		width: 85%;
		margin-bottom: 10px;
		display: flex;
		align-items: center;
	}
	.destaque_content_item i{
		margin-right: 10px;
	}
}