/* Estilos Gerais */
body {
    font-family: Arial, Helvetica, sans-serif;
    text-align: justify;
}

p {
    text-align: justify;
    margin: 0 10%;
    text-indent: 3rem;
}

/* Estilos da Seção de Serviços Principal */
section#servicos {
    margin: 1rem auto 3rem auto;
    max-width: 1200px;
    padding: 1rem;
    text-align: center; /* Garante que o texto dentro do article fique centralizado inicialmente */
    position: relative;
    display: flex; /* Voltando a usar flex para centralizar o bloco de texto */
    justify-content: center; /* Centraliza o bloco de texto horizontalmente */
    align-items: center; /* Alinha verticalmente ao centro (se necessário) */
    flex-direction: column; /* Garante que o texto ocupe a largura disponível do centro */
}

/* Estilos para o Bloco de Texto dos Serviços Principal */
section#servicos .texto-servicos {
    width: 50%; /* Define a largura do bloco de texto para aproximadamente um terço */
    text-align: justify; /* Centraliza o texto dentro do bloco */
    margin: 0 auto; /* Centraliza o bloco de texto horizontalmente dentro da section */
    padding-left: 10em;
}

section#servicos .texto-servicos h1 {
    text-align: center;
    font-size: 2em;
    margin-bottom: 0.5em;
}

section#servicos .texto-servicos h3 {
    font-size: 1.5em;
    color: #555;
    margin-bottom: 1em;
    text-indent: 1em;
}

/* Estilos da Div da Imagem de Escritório */
#escritorio.escritorio {
    width: 600px;
    height: auto;
    position: absolute; /* Mantendo absolute para posicionamento independente */
    top: 5%;
    left: 5%; /* Mantendo o posicionamento à esquerda */
    z-index: -1; /* Garante que o texto fique sobre a imagem, se necessário */
}

/* Estilos da Imagem de Escritório */
.img-escritorio {
    width: 600px;
    border-radius: 10px;
    max-width: 300px;
    height: auto;
    display: block;
}

/* Estilos Responsivos */
@media (max-width: 768px) {
    body {
        font-size: 0.9em; /* Reduz a fonte base do body */
    }

    p {
        margin: 0 5%; /* Reduz as margens dos parágrafos */
        text-indent: 2rem; /* Reduz a indentação dos parágrafos */
    }

    header#cabecalho {
        padding: 0.5rem; /* Reduz o padding do cabeçalho */
    }

    #titmenu h1 {
        font-size: 1.8em; /* Reduz o tamanho do título principal */
    }

    #icone {
        width: 80px; /* Reduz o tamanho do ícone */
        height: auto;
    }

    nav#menu ul.menu-list a li {
        font-size: 0.9em; /* Reduz a fonte dos itens do menu */
        padding: 0.5em 1em; /* Reduz o padding dos itens do menu */
    }

    section#servicos {
        margin: 0.5rem auto 2rem auto; /* Reduz as margens da seção de serviços */
        padding: 0.5rem; /* Reduz o padding da seção de serviços */
    }

    section#servicos .texto-servicos {
        width: 95%; /* Aumenta um pouco a largura do texto para preencher mais */
        padding-left: 0; /* Remove o padding esquerdo */
        margin: 0 auto 1rem auto; /* Reduz a margem inferior */
    }

    section#servicos .texto-servicos h1 {
        font-size: 1.8em; /* Reduz o tamanho do título da seção */
        margin-bottom: 0.3em;
    }

    section#servicos .texto-servicos h3 {
        font-size: 1.2em; /* Reduz o tamanho do subtítulo da seção */
        margin-bottom: 0.8em;
        text-indent: 0.5em; /* Reduz a indentação do subtítulo */
    }

    #escritorio.escritorio {
        position: static; /* Alteração principal: muda para static */
        width: auto; /* Permite que a largura se ajuste ao contêiner */
        height: auto; /* Permite que a altura se ajuste ao conteúdo */
        margin: 10px auto 0 auto; /* Adiciona margem e centraliza */
        top: auto;
        left: auto;
        z-index: auto;
    }

    .img-escritorio {
        width: 100%; /* Faz a imagem ocupar a largura do contêiner */
        max-width: 100%; /* Garante que não ultrapasse a largura do contêiner */
        height: auto;
        display: block;
        border-radius: 10px;
        margin-bottom: 20px; /* Adiciona espaço abaixo da imagem */
    }

    aside#lema {
        border-radius: 10px;
        margin: 0.5rem auto 2rem auto; /* Reduz as margens do lema */
        padding: 0.5rem; /* Reduz o padding do lema */
        font-size: 0.9em; /* Reduz a fonte do lema */
    }

    .imagem-fixa {
        bottom: 10px; /* Reduz a distância da parte inferior */
        right: 100px; /* Reduz a distância da parte direita */
        width: 10px; /* Reduz o tamanho do ícone do WhatsApp */
        height: auto;
    }

    footer#rodape {
        padding: 0.5rem; /* Reduz o padding do rodapé */
        font-size: 0.8em; /* Reduz a fonte do rodapé */
    }

    footer#rodape p {
        margin: 0 2%; /* Reduz as margens dos parágrafos do rodapé */
        text-indent: 0; /* Remove a indentação do rodapé */
    }
}

/* Estilos para a Nova Seção de Serviços (servicos-alt) */
section#servicos-alt {
    margin: 1rem auto 3rem auto; /* Margens automáticas para centralizar */
    max-width: 1200px; /* Limita a largura máxima */
    padding: 20px; /* Adicionado padding para espaçamento interno */
    text-align: center; /* Centraliza o conteúdo da seção */
    background-image: url('../img/fundoservdetalhado.jpg'); /* Substitua pelo caminho da sua imagem */
    background-size: cover; /* Para cobrir todo o fundo da div */
    background-repeat: no-repeat; /* Para evitar repetição da imagem */
}

/* Estilos para o Container das Colunas de Serviços */
.services-columns-alt {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* Estilos para cada Coluna de Serviço (diretamente dentro de .services-columns-alt) */
.services-columns-alt > * {
    flex-basis: calc(33.33% - 20px); /* Largura de um terço com espaçamento */
    margin-bottom: 20px;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.8); /* Branco com 80% de opacidade */
    padding: 15px; /* Adicionado padding interno */
    border-radius: 5px; /* Borda arredondada para o fundo branco */
    box-sizing: border-box; /* Garante que padding e border não aumentem a largura */
    text-decoration: none; /* Remove sublinhado dos links */
    color: inherit; /* Herda a cor do texto */
    display: flex;
    flex-direction: column;
}

.services-columns-alt > * h3 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: #555; /* Cor do título da coluna (ajuste conforme necessário) */
}

.services-columns-alt > * ul {
    list-style: none;
    padding: 0;
}

.services-columns-alt > * li {
    margin-bottom: 5px;
    font-size: 0.9em; /* Tamanho da fonte dos itens da lista */
    color: #666; /* Cor dos itens da lista (ajuste conforme necessário) */
}

/* Estilos para o Título da Tabela de Serviços (table-container-alt) */
#table-container-alt {
    width: 100%; /* Ocupar a largura total para centralizar o título */
    margin-top: 3rem auto 1rem auto; /* Centralizar e adicionar margem */
}

section#servicos-alt #table-container-alt h3 {
    font-size: 1.5em; /* Tamanho do título */
    font-weight: bold; /* Deixa o título em negrito */
    color: #333; /* Cor do título (ajuste conforme necessário) */
    margin-bottom: 1rem; /* Espaçamento abaixo do título */
    background-color: rgba(255, 255, 255, 0.8); /* Fundo branco com transparência para o título */
    padding: 10px; /* Adicionado padding ao fundo do título */
    border-radius: 5px; /* Opcional: borda arredondada para o fundo do título */
    display: inline-block; /* Para que o fundo branco se ajuste ao tamanho do texto */
}

/* Estilos Responsivos para a Nova Seção de Serviços */
@media (max-width: 768px) {
    section#servicos-alt {
        padding: 10px;
    }

    .services-columns-alt {
        flex-direction: column; /* Empilha os itens verticalmente */
        align-items: center; /* Centraliza os itens horizontalmente */
    }

    .services-columns-alt > * {
        flex-basis: auto; /* Remove a largura fixa */
        width: 90%; /* Ocupa 90% da largura da tela */
        margin-bottom: 20px;
    }

    section#servicos-alt #table-container-alt h3 {
        font-size: 1.3em;
    }

    .services-columns-alt > * h3 {
        font-size: 1.1em;
    }

    .services-columns-alt > * li {
        font-size: 0.85em;
    }
}