html, body {
    height: 100%; /* Garante que o HTML e o body ocupem toda a altura da página */
    margin: 0;
    display: flex;
    flex-direction: column; /* Coloca o conteúdo em coluna */
}

body {
    display: flex;
    flex-direction: column;
	margin: 0;
    font-family: 'Roboto', sans-serif;
    background-color: #f4f4f4; /* Cor de fundo geral */
}

main {
    flex: 1; /* Faz com que o main ocupe o espaço restante */
	padding: 40px 20px;
    background-color: #ffffff; /* Cor de fundo do main */
}

.content {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 1200px; /* Ajuste conforme necessário */
    margin: 0 auto;
    text-align: center;
}


header {
    background-color: #1074BA; /* Novo azul */
    padding: 20px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: center; /* Centraliza o conteúdo do header */
    align-items: center;
}

.logo img {
    height: 80px; /* Tamanho aumentado para o logotipo */
}

/* Estilos para o ícone do menu */
.menu-icon {
    display: none;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 40px;
}

/* Estilos gerais do nav */
nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex: 1; /* Ocupa o espaço restante */
    position: relative;
    overflow: visible; /* Permite que o conteúdo do menu seja exibido fora do nav */
}

/* Estilos para a lista de navegação */
nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px; /* Espaçamento entre itens */
}

/* Estilos para os itens da lista */
nav ul li {
    margin: 0;
    position: relative;
}

/* Estilos para os links da navegação */
nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 16px;
    font-family: 'Montserrat', sans-serif;
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Estilos para o pseudo-elemento após os links */
nav ul li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 3px;
    background-color: #FFD700; /* Cor de destaque ao passar o mouse */
    transition: width 0.3s ease;
}

/* Estilos para o hover nos links */
nav ul li a:hover {
    color: #FFD700; /* Cor de destaque ao passar o mouse */
    transform: translateY(-2px); /* Animação de elevação */
}

nav ul li a:hover::after {
    width: 100%;
}

/* Estilos para o link ativo */
nav ul li a.active {
    background-color: #FFD700; /* Fundo amarelo para o item ativo */
    color: #1074BA; /* Cor do texto do item ativo */
    border-radius: 4px; /* Arredondar os cantos do fundo */
    padding: 5px 10px; /* Espaçamento interno do fundo */
}

/* Estilos para o menu responsivo */
@media (max-width: 768px) {
    nav ul {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 60px;
        right: 0;
        left: 0;
        background-color: #1074BA; /* Cor de fundo azul */
        width: 100%;
        max-height: 80vh; /* Ajuste conforme necessário para se ajustar à tela */
        overflow-y: auto; /* Permite rolagem se o conteúdo exceder a altura */
        border: 1px solid #0056b3;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-20px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    nav ul.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    nav ul li {
        margin: 15px 0;
        text-align: left; /* Alinha os itens à esquerda */
    }

    nav ul a {
        color: #fff; /* Cor do texto no menu */
    }

    .menu-icon {
        display: block;
    }
}




h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    animation: fadeIn 1s ease-out;
}

p {
    line-height: 1.6;
    margin-bottom: 20px;
}

footer {
    background-color: #1074BA; /* Novo azul */
    padding: 20px 0; /* Padding padrão para desktop */
    color: white;
    text-align: center;
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura e altura */
}

.footer-text {
    margin: 0; /* Remove o espaçamento entre parágrafos */
    padding: 0; /* Remove o padding, se houver */
    font-size: 16px; /* Tamanho padrão da fonte */
}

.footer-text a {
    text-decoration: none;
    color: #FFD700; /* Cor de destaque no rodapé */
}

.footer-text a:hover {
    text-decoration: underline;
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    footer {
        padding: 15px 0; /* Padding reduzido para dispositivos móveis */
    }
    .footer-text {
        font-size: 14px; /* Tamanho reduzido da fonte para dispositivos móveis */
    }
}


/* Estilos específicos para a seção Home */
#home {
    padding: 0px 20px;
    background-color: #ffffff; /* Cor de fundo da seção Sobre */
}

#home .content {
    text-align: center; /* Alinha o texto à esquerda */
    margin: 0 auto; /* Centraliza a seção na página */
    max-width: 1200px; /* Ajuste conforme necessário */
}

#home h1, #home h2, #home h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1074BA; /* Cor dos títulos */
}




/* Estilos específicos para a seção Sobre */
#about {
    padding: 0px 20px;
    background-color: #ffffff; /* Cor de fundo da seção Sobre */
}

#about .content {
    text-align: left; /* Alinha o texto à esquerda */
    line-height: 1.6;
    hyphens: auto; /* Hifenização automática */
    margin: 0 auto; /* Centraliza a seção na página */
    max-width: 1200px; /* Ajuste conforme necessário */
}

#about h2, #about h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1074BA; /* Cor dos títulos */
}

#about ul {
    padding-left: 0px; /* Adiciona espaçamento à esquerda das listas */
}

/* Estilos para o contêiner dos cards */
.info-cards {
    display: flex;
    flex-wrap: wrap; /* Permite que os cards se movam para a linha seguinte se necessário */
    gap: 20px; /* Espaçamento entre os cards */
    justify-content: center; /* Centraliza os cards horizontalmente */
    margin-top: 20px;
	margin-left: 0px;
	margin-right: 0px;
}

/* Estilos para os cards individuais */
.info-card {
	text-align: left; /* Alinha o texto centralizado */
    background-color: #ffffff; /* Cor de fundo dos cards */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    padding: 20px;
    max-width: 385px; /* Largura máxima dos cards */
    flex: 1 1 calc(33.333% - 20px); /* Faz com que os cards ocupem um terço da linha e se ajustem ao tamanho */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
    transition: transform 0.3s, box-shadow 0.3s; /* Adiciona animação ao hover */
}

/* Estilo ao passar o mouse sobre o card */
.info-card:hover {
    transform: translateY(-10px); /* Move o card para cima */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Aumenta a sombra para destaque */
}

/* Estilos adicionais para os títulos e textos dos cards */
.info-card h3 {
    margin-top: 0;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #1074BA; /* Cor dos títulos */
}

.info-card p, .info-card ul {
    margin: 0;
    line-height: 1.6; /* Ajusta a altura da linha se necessário */
}

.info-card ul {
    padding-left: 5px; /* Remove o padding padrão */
    list-style: 1; /* Remove marcadores */
    margin: 0;
}

.info-card ul li {
    margin-bottom: 0px; /* Espaçamento entre itens da lista */
	margin-left: 15px;
}

/* Estilos para mobile */
@media (max-width: 768px) {
    .info-cards {
        flex-direction: column;
        align-items: center; /* Centraliza os cards verticalmente */
    }
    
    .info-card {
        width: 100%; /* Faz com que os cards ocupem toda a largura disponível */
        margin-bottom: 20px; /* Espaçamento entre os cards */
    }

    .info-card:last-child {
        margin-bottom: 0; /* Remove o espaçamento do último card */
    }
}

/* Estilização dos cards de serviço */
.services-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espaçamento entre os cards */
    justify-content: center; /* Centraliza os cards no container */
	
}

.service-item {
    background-color: #ffffff; /* Cor de fundo dos cards */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    padding: 20px;
    text-align: center;
    width: calc(33.333% - 20px); /* Três cards por linha com espaçamento */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item h3{
    margin-top: 0;
	color: #1074BA; /* Cor dos títulos */
}

h2{
	color: #1074BA; /* Cor dos títulos */
}

.service-item p {
    margin-bottom: 0;
}

.service-item:hover {
    transform: translateY(-5px); /* Animação de elevação ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aumenta a sombra ao passar o mouse */
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    .services-container {
        flex-direction: row;
        justify-content: space-between; /* Espaça os itens igualmente em linha */
    }

    .service-item {
        flex: 0 0 calc(50% - 10px); /* Faz com que cada item ocupe 50% da largura disponível, menos o espaçamento */
        margin-bottom: 20px; /* Espaçamento entre as linhas */
    }

    .service-item:nth-child(2n) {
        margin-right: 0; /* Remove a margem direita para itens pares */
    }
    
    .service-item:nth-child(2n+1) {
        margin-left: 0; /* Remove a margem esquerda para itens ímpares */
    }
}

/* Estilização dos cards de cliente */
.clients-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espaçamento entre os cards */
    justify-content: center; /* Centraliza os cards no container */
}

.client-item {
    background-color: #ffffff; /* Cor de fundo dos cards */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    padding: 20px;
    text-align: center;
    width: calc(50% - 20px); /* Dois cards por linha com espaçamento */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-logo {
    max-width: 100%; /* Faz com que a imagem não ultrapasse a largura do card */
    height: 100px; /* Define uma altura fixa para todas as imagens */
    object-fit: contain; /* Mantém a proporção da imagem dentro do card */
    margin-bottom: 10px; /* Espaçamento abaixo da imagem */
}

.client-item h3 {
    margin-top: 0;
}

.client-item p {
    margin-bottom: 0;
}

.client-item:hover {
    transform: translateY(-5px); /* Animação de elevação ao passar o mouse */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Aumenta a sombra ao passar o mouse */
}

/* Estilos para dispositivos móveis */
@media (max-width: 768px) {
    .clients-container {
        flex-direction: row;
        justify-content: space-between; /* Espaça os itens igualmente em linha */
    }

    .client-item {
        flex: 1 0 100%; /* Faz com que cada item ocupe 100% da largura disponível */
        margin-bottom: 20px; /* Espaçamento entre as linhas */
    }
}

/* Estilo específico para a página de contato */
#contact .content {
    padding: 20px;
    display: flex;
    gap: 20px;
    justify-content: center; /* Centraliza os cards horizontalmente */
    align-items: stretch; /* Faz com que os cards tenham a mesma altura */
    flex-wrap: wrap; /* Permite que os cards se movam para a linha seguinte, se necessário */
	
}

/* Card de informações de contato */
.contact-card {
    background-color: #ffffff; /* Cor de fundo dos cards */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    padding: 20px;
    max-width: 6000px; /* Largura máxima do card */
    flex: 1; /* Ocupa o espaço restante */
    text-align: left; /* Alinha o texto à esquerda */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha o conteúdo ao topo */
}

/* Card de formulário de contato */
.contact-form-card {
    background-color: #ffffff; /* Cor de fundo dos cards */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    padding: 20px;
    max-width: 600px; /* Largura máxima do card */
    flex: 1; /* Ocupa o espaço restante */
    text-align: left; /* Alinha o texto à esquerda */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha o conteúdo ao topo */
}

/* Estilo para o título dentro dos cards */
.contact-card h2,
.contact-form-card h2 {
    margin-top: 0;
    margin-bottom: 20px;
    font-family: 'Montserrat', sans-serif;
    color: #1074BA; /* Cor dos títulos */
}

/* Estilo do formulário de contato */
.contact-form-card form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.contact-form-card form label {
    font-weight: bold;
}

.contact-form-card form input,
.contact-form-card form textarea {
    width: calc(100% - 0px); /* Ajusta a largura para deixar espaço para a margem interna */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 0; /* Remove qualquer margem direita padrão */
    box-sizing: border-box; /* Inclui padding e border no cálculo da largura */
}

/* Adiciona margem direita aos inputs e textarea */
.contact-form-card form input,
.contact-form-card form textarea {
    margin-right: 0px; /* Ajuste conforme necessário */
}

.contact-form-card form textarea {
    resize: vertical;
    min-height: 150px;
}

.contact-form-card form button {
    background-color: #1074BA;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.contact-form-card form button:hover {
    background-color: #0e5a9c;
}

/* Estilo para as informações de contato dentro do card */
.contact-card p {
    margin: 0; /* Remove o espaçamento das linhas */
    line-height: 1.6; /* Ajuste a altura da linha se necessário */
}

.contact-card a {
    color: #1074BA; /* Cor dos links */
    text-decoration: none;
}

.contact-card a:hover {
    text-decoration: underline;
}

/* Estilo para o logotipo adicional no card de informações */
.contact-card .additional-logo {
    margin-top: 20px; /* Espaço acima do logotipo adicional */
    text-align: left; /* Alinha o logotipo à esquerda */
    display: flex;
    justify-content: center; /* Centraliza horizontalmente o conteúdo do logotipo */
}

.contact-card .additional-logo img {
    max-width: 300px; /* Largura máxima da imagem */
    max-height: 300px; /* Altura máxima da imagem */
    width: auto; /* Mantém a proporção */
    height: auto; /* Mantém a proporção */
}




/* Animações */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}