@charset "utf-8";
body{
	margin: 0;
	background-color: #CCC;
	color: #006;
}

#geral {
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	width: 1000px;
	background-color: #FFF;
	margin: 0 auto;
}

#header {	
	height: 240px;
	background-image: url(cabecalho.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center; 
	background-color: #FFF;
}

#logo {
	float: left;
	height:100px;
	width: 380px;
	margin: 20px 0px 0px 40px;
}

#menu {
	float: left;
	height: 100px;
	width: 400px;	
	margin: 60px 0px 0px 100px;
}

#bt_home {
	float: left;
	height: 80px;
	width: 90px;	
}

#bt_empresa {
	float: left;
	height: 80px;
	width: 90px;	
	margin: 0px 10px 0px 10px
}

#bt_servico {
	float: left;
	height: 80px;
	width: 90px;	
	margin: 0px 10px 0px 0px
}

#bt_contato {
	float: left;
	height: 80px;
	width: 90px;	
}

#info {
	float: left;
	font-size: 24px;
	margin: 5px 0px 0px 110px;
}

#body {
	margin: 0px;
	height: 740px;
}

#banner #banner_img {
	width: 900px;
	height: 300px;
	margin: 30px 0px 0px 50px;
	background-color:#CCC;
	box-shadow: 0px 0px 15px #666666;
}

#banner a {
	border: solid 1px #333;
	background-color: #FF0;
	padding: 2px;
	text-decoration: none;
	color: #003;
}

#banner a:hover {
	border: solid 1px #333;
	text-decoration: underline;
	background-color: #003;
	color: #FFF;
}

#banner a.hover {
	background-color: #003;
	color: #FFF;
}
	
#banner #botoes {
	width: 900px;
	text-align: right;
	padding-top: 2px;
}

#body_left {
	float: left;
	width: 310px;
	height: 350px;
	margin: 30px 0px 0px 30px;
	border: #999;
	border-right-style:solid;
	border-right-width:thin;
}

#body_left a {
	text-decoration: none;
	color: #006;
}
#body_left a:link {
	text-decoration: none;
}

#body_center {
	float: left;
	width: 310px;
	height: 350px;
	margin: 30px 10px 0px 10px;
}

#body_right {
	float: left;
	width: 310px;
	height: 350px;
	margin: 30px 0px 0px 0px;
	border: #999;
	border-left-style:solid;
	border-left-width:thin;
}

#body_empresa {	
	height: 1100px;
}

#info_empresa {
	float: left;
	margin: 20px 100px 0px 100px;
	text-align: justify;
}

#img_empresa {
	float: left;
	width: 311px;
	height: auto;
	margin: 0px 20px 0px 0px;
	font-size: 10px;
}

#body_servicos {
	height: 680px;
}

#info_servicos {
	float: left;
	margin: 20px 100px 0px 100px;
	text-align: justify;
}

#img_servicos1 {
	float: right;
	width: auto;
	height: auto;
	margin: 0px 0px 0px 20px;
}

#img_servicos2 {
	float: left;
	width: auto;
	height: auto;
	margin: 0px 20px 0px 0px;
}

#body_contato {
	height: 520px;
}

#form_contato {
	float: left;
	margin: 20px 0px 0px 100px;
}

#info_contato {
	float: left;
	margin: 40px 0px 0px 50px;
}

#page_title {
	float: left;
	height: auto;
	width: 1000px;
	background-color: #006  ;
	color: #FFF;
	box-shadow: 0px 0px 10px #006;
	font-size: 24px;
	text-indent: 100px;
	margin: 30px 0px 30px 0px;
	padding: 5px 0px 5px 0px;
}

#footer {
	clear: both;
	float: none;
	height: auto;
	min-height: 50px;
	width: 1000px;
	background-image: url(rodape.png);
	background-position: center;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 10px;
	text-align: center;
	margin-top: 30px;
	padding-top: 15px;
	box-sizing: border-box;
}

#footer a {
	text-decoration: none;
	color: #FFFFFF;
}

#footer a:link {
	text-decoration: underline;
}
CSS
/* --- ESTILO DOS NOVOS CARDS DE SERVIÇOS --- */

#lista_servicos {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Espaço entre cada serviço */
    padding: 20px;
    box-sizing: border-box;
}

.servico-item {
    display: flex;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); /* Sombra leve para destacar */
    overflow: hidden;
    border: 1px solid #e0e0e0;
    padding: 15px;
}

/* Inverte a ordem das fotos nos serviços pares para dar um ritmo visual bonito (zigue-zague) */
.servico-item:nth-child(even) {
    flex-direction: row-reverse;
}

.servico-midia {
    flex: 1;
    max-width: 350px; /* Tamanho fixo ideal para a foto ou vídeo */
    min-width: 280px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000; /* Fundo preto para o vídeo não distorcer */
}

.servico-midia img, 
.servico-midia video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.servico-texto {
    flex: 2;
    padding: 0 25px;
    text-align: left;
}

.servico-texto h3 {
    font-size: 20px;
    color: #0b1a30; /* Azul escuro do seu padrão */
    margin: 0 0 5px 0;
}

.sub-equipamentos {
    display: block;
    font-size: 13px;
    color: #666; /* Subtítulo em cinza */
    margin-bottom: 15px;
    font-style: italic;
}

.servico-texto p {
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin: 0;
}

/* Ajuste para celular e telas menores */
@media (max-width: 768px) {
    .servico-item, 
    .servico-item:nth-child(even) {
        flex-direction: column;
    }
    .servico-midia {
        max-width: 100%;
        margin-bottom: 15px;
    }
    .servico-texto {
        padding: 0;
    }
}
#body_servicos {
    height: auto !important;
    min-height: 400px !important;
    clear: both !important;
    float: none !important;
    display: block !important;
    overflow: hidden !important; /* Ajuda a conter os elementos flutuantes */
}

/* Garante que o container geral do site também não tenha altura travada */
#geral {
    height: auto !important;
    overflow: hidden !important;
}

/* Reforço absoluto para o rodapé */
#footer {
    clear: both !important;
    float: none !important;
    margin-top: 40px !important;
    position: relative !important;
}