/* Reset Básico */
* {
    margin: 0; /* Remove a margem padrão de todos os elementos */
    padding: 0; /* Remove o preenchimento (padding) padrão de todos os elementos */
    box-sizing: border-box; /* Inclui o padding e a borda no cálculo da largura e altura */
}

body {
    font-family: Arial, sans-serif; /* Define a fonte principal como Arial, com sans-serif como fonte de fallback */
    line-height: 1.6; /* Define a altura da linha (espaçamento entre as linhas do texto) para 1.6 */
    color: #333; /* Define a cor do texto como um cinza escuro */
    background-color: #f9f9f9; /* Define a cor de fundo como um cinza claro */
}

.container {
    width: 90%; /* Define a largura da container para 90% da tela */
    max-width: 1100px; /* Define a largura máxima da container como 1100px */
    margin: 0 auto; /* Centraliza a container horizontalmente */
    padding: 0 15px; /* Adiciona 15px de padding à esquerda e direita da container */
}

/* Header & Nav */
header {
    background-color: #2c3e50; /* Define o fundo do header como um azul escuro */
    color: #ecf0f1; /* Define a cor do texto dentro do header como cinza claro */
    padding: 1rem 0; /* Adiciona padding de 1rem em cima e embaixo */
    position: sticky; /* Faz o header ficar fixo no topo da página quando rolar */
    top: 0; /* Define a posição do header no topo */
    z-index: 1000; /* Define a prioridade de sobreposição para garantir que o header fique acima de outros elementos */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Adiciona uma sombra sutil ao redor do header */
}

header .container {
    display: flex; /* Usa Flexbox para organizar os itens no header */
    justify-content: space-between; /* Espaça igualmente os itens entre a esquerda e direita */
    align-items: center; /* Alinha os itens verticalmente no centro */
}

.logo-link {
    display: flex; /* Organiza o logo e o texto lado a lado */
    align-items: center; /* Alinha verticalmente o logo e o texto */
    text-decoration: none; /* Remove qualquer sublinhado do link */
    color: #ecf0f1; /* Define a cor do texto como cinza claro */
}

#logo {
    height: 50px; /* Define a altura do logo como 50px */
    margin-right: 10px; /* Adiciona um espaço de 10px à direita do logo */
}

header h1 {
    font-size: 1.8rem; /* Define o tamanho da fonte do título como 1.8rem */
    margin: 0; /* Remove a margem do título */
}

#main-nav ul {
    list-style: none; /* Remove os marcadores das listas de navegação */
    display: flex; /* Usa Flexbox para organizar os itens de navegação horizontalmente */
}

#main-nav ul li {
    margin-left: 20px; /* Adiciona um espaço de 20px à esquerda de cada item de navegação */
}

#main-nav ul li a {
    color: #ecf0f1; /* Define a cor dos links como cinza claro */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-weight: bold; /* Define a fonte dos links como negrito */
    padding: 5px 10px; /* Adiciona 5px de padding em cima e embaixo, e 10px à esquerda e à direita */
    border-radius: 4px; /* Arredonda os cantos do link */
    transition: background-color 0.3s ease; /* Faz a transição suave de cor de fundo ao passar o mouse */
}

#main-nav ul li a:hover,
#main-nav ul li a.active { /* Adiciona a classe 'active' via JS para a página atual */
    background-color: #3498db; /* Muda a cor de fundo para azul claro ao passar o mouse ou quando ativo */
}

#menu-toggle {
    display: none; /* Esconde o botão de menu em telas maiores */
    background: none; /* Remove o fundo do botão */
    border: none; /* Remove a borda do botão */
    color: #ecf0f1; /* Define a cor do botão como cinza claro */
    font-size: 2rem; /* Define o tamanho da fonte do botão como 2rem */
    cursor: pointer; /* Muda o cursor para uma mão ao passar o mouse sobre o botão */
}

/* Main Content */
main {
    padding-bottom: 40px; /* Adiciona 40px de padding na parte inferior para espaço para o footer */
}

.section-padding {
    padding-top: 40px; /* Adiciona 40px de padding no topo */
    padding-bottom: 60px; /* Adiciona 60px de padding na parte inferior */
}

.page-title h2 {
    text-align: center; /* Centraliza o título */
    margin-bottom: 10px; /* Adiciona 10px de margem embaixo do título */
    font-size: 2.2rem; /* Define o tamanho da fonte do título como 2.2rem */
    color: #2c3e50; /* Define a cor do título como azul escuro */
}

.page-title p {
    text-align: center; /* Centraliza o parágrafo */
    font-size: 1.1rem; /* Define o tamanho da fonte como 1.1rem */
    color: #555; /* Define a cor do texto como cinza */
    margin-bottom: 30px; /* Adiciona 30px de margem abaixo do parágrafo */
}

.service-grid {
    display: grid; /* Usa o Grid Layout para organizar os serviços */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Cria colunas dinâmicas com largura mínima de 300px */
    gap: 20px; /* Adiciona um espaçamento de 20px entre as colunas */
    margin-top: -100px; /* Aplica um valor negativo para sobrepor o conteúdo superior */
}

/* Hero Section (index.html) */
#hero {
    background: url('../images/hero-bg.png') no-repeat center center/cover; /* Adiciona uma imagem de fundo que cobre todo o espaço */
    background-color: #34495e; /* Cor de fundo de fallback caso a imagem não seja carregada */
    color: #fff; /* Define a cor do texto como branco */
    padding: 50px 0; /* Adiciona 80px de padding em cima e embaixo */
    text-align: center; /* Centraliza o texto */
}

#hero h2 {
    font-size: 2.5rem; /* Define o tamanho da fonte do título como 2.5rem */
    margin-bottom: 20px; /* Adiciona 20px de margem embaixo do título */
}

#hero p {
    font-size: 1.2rem; /* Define o tamanho da fonte do parágrafo como 1.2rem */
    margin-bottom: 30px; /* Adiciona 30px de margem abaixo do parágrafo */
    max-width: 700px; /* Limita a largura máxima do parágrafo */
    margin-left: auto; /* Centraliza o parágrafo na tela */
    margin-right: auto; /* Centraliza o parágrafo na tela */
}

.cta-buttons .btn {
    margin: 0 10px; /* Adiciona 10px de margem à esquerda e direita dos botões */
}

/* Buttons */
.btn {
    display: inline-block; /* Exibe o botão como um bloco em linha */
    padding: 12px 25px; /* Adiciona padding interno ao botão */
    text-decoration: none; /* Remove o sublinhado do botão */
    border-radius: 5px; /* Arredonda os cantos do botão */
    font-weight: bold; /* Define o texto do botão como negrito */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Faz transições suaves para o background e o movimento do botão */
    cursor: pointer; /* Muda o cursor para uma mão ao passar o mouse */
    border: none; /* Remove a borda do botão */
}

.btn-primary {
    background-color: #3498db; /* Define o fundo do botão como azul */
    color: #fff; /* Define a cor do texto como branco */
}

.btn-primary:hover {
    background-color: #2980b9; /* Muda o fundo para um azul mais escuro ao passar o mouse */
    transform: translateY(-2px); /* Move o botão para cima 2px ao passar o mouse */
}

.btn-secondary {
    background-color: #ecf0f1; /* Define o fundo do botão como cinza claro */
    color: #2c3e50; /* Define a cor do texto como azul escuro */
    border: 1px solid #bdc3c7; /* Define a borda do botão como cinza */
}

.btn-secondary:hover {
    background-color: #bdc3c7; /* Muda o fundo para um cinza mais escuro ao passar o mouse */
    transform: translateY(-2px); /* Move o botão para cima 2px ao passar o mouse */
}

/* Highlights Section (index.html) */
#highlights h3, #brief-about h3 {
    text-align: center; /* Centraliza o título */
    margin-bottom: 30px; /* Adiciona 30px de margem abaixo do título */
    font-size: 1.8rem; /* Define o tamanho da fonte do título como 1.8rem */
    color: #2c3e50; /* Define a cor do título como azul escuro */
}

.highlights-grid {
    display: grid; /* Usa Grid Layout para organizar os itens */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Cria colunas dinâmicas com largura mínima de 250px */
    gap: 30px; /* Adiciona um espaçamento de 30px entre as colunas */
    text-align: center; /* Centraliza o texto dentro das colunas */
}

.highlight-item .icon {
    width: 60px; /* Define a largura do ícone como 60px */
    height: 60px; /* Define a altura do ícone como 60px */
    margin-bottom: 15px; /* Adiciona 15px de margem abaixo do ícone */
    fill: #3498db; /* Define a cor do ícone como azul */
}

.highlight-item h4 {
    font-size: 1.3rem; /* Define o tamanho da fonte do título como 1.3rem */
    color: #3498db; /* Define a cor do título como azul */
    margin-bottom: 10px; /* Adiciona 10px de margem abaixo do título */
}

/* Course/Service Cards */
.course-grid, .service-grid {
    display: grid; /* Usa Grid Layout para organizar os cursos e serviços */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Cria colunas dinâmicas com largura mínima de 300px */
    gap: 20px; /* Adiciona um espaçamento de 20px entre as colunas */
}

.course-card, .service-card {
    background-color: #fff; /* Define o fundo dos cartões como branco */
    padding: 20px; /* Adiciona 20px de padding interno nos cartões */
    border-radius: 8px; /* Arredonda os cantos dos cartões */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); /* Adiciona uma sombra suave ao redor dos cartões */
    display: flex; /* Usa Flexbox dentro dos cartões */
    flex-direction: column; /* Organiza os itens verticalmente dentro dos cartões */
}

.course-card h3, .service-card h3 {
    color: #2c3e50; /* Define a cor do título dentro dos cartões como azul escuro */
    margin-bottom: 10px; /* Adiciona 10px de margem abaixo do título */
}

.course-card ul, .service-card ul {
    list-style-position: inside; /* Define os marcadores de lista dentro dos cartões */
    padding-left: 0; /* Remove o padding à esquerda das listas */
    margin-bottom: 15px; /* Adiciona 15px de margem abaixo das listas */
    flex-grow: 1; /* Faz com que o conteúdo dentro do cartão cresça para alinhar o botão */
}

.course-card li, .service-card li {
    margin-bottom: 5px; /* Adiciona 5px de margem abaixo de cada item de lista */
    font-size: 0.95rem; /* Define o tamanho da fonte dos itens de lista como 0.95rem */
}

.course-card .btn, .service-card .btn {
    margin-top: auto; /* Alinha o botão na parte inferior do cartão */
    align-self: flex-start; /* Alinha o botão à esquerda dentro do cartão */
}

/* Metodologia */
.method-item {
    background-color: #fff; /* Define o fundo da metodologia como branco */
    padding: 15px; /* Adiciona 15px de padding interno */
    border-radius: 8px; /* Arredonda os cantos */
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); /* Adiciona uma sombra suave ao redor */
    margin-bottom: 10px; /* Adiciona 10px de margem embaixo */
}

.method-item h3 {
    color: #2c3e50; /* Define a cor do título como azul escuro */
    margin-bottom: 20px; /* Adiciona 20px de margem embaixo do título */
}

.method-item h4 {
    color: #3498db; /* Define a cor do subtítulo como azul */
    margin-top: 5px; /* Adiciona 5px de margem no topo */
    margin-bottom: 5px; /* Adiciona 5px de margem embaixo */
}

/* Contato */
.contact-icon{
    max-width: 25px; /* Define a largura máxima do ícone de contato */
    max-height: 25px; /* Define a altura máxima do ícone de contato */
}

.contact-content {
    display: flex; /* Usa Flexbox para organizar os itens */
    flex-wrap: wrap; /* Faz com que os itens se movam para a linha seguinte quando necessário */
    gap: 30px; /* Adiciona um espaçamento de 30px entre os itens */
}

.contact-form-container {
    flex: 2; /* O formulário ocupa duas vezes mais espaço que o conteúdo ao lado */
    min-width: 300px; /* Define a largura mínima do formulário como 300px */
}

.contact-info {
    flex: 1; /* O conteúdo de contato ocupa o restante do espaço */
    min-width: 280px; /* Define a largura mínima do conteúdo de contato como 280px */
    background-color: #eaf3fb; /* Define o fundo do conteúdo de contato como um azul claro */
    padding: 20px; /* Adiciona 20px de padding dentro */
    border-radius: 8px; /* Arredonda os cantos */
}

.contact-info h3, .contact-form-container h3 {
    color: #2c3e50; /* Define a cor do título como azul escuro */
    margin-bottom: 15px; /* Adiciona 15px de margem abaixo do título */
}

.contact-info p {
    margin-bottom: 10px; /* Adiciona 10px de margem abaixo do parágrafo */
}

.contact-info a {
    color: #3498db; /* Define a cor do link como azul */
    text-decoration: none; /* Remove o sublinhado do link */
}

.contact-info a:hover {
    text-decoration: underline; /* Adiciona o sublinhado ao passar o mouse sobre o link */
}

.form-group {
    margin-bottom: 15px; /* Adiciona 15px de margem embaixo de cada grupo de formulário */
}

.form-group label {
    display: block; /* Exibe o rótulo como bloco */
    margin-bottom: 5px; /* Adiciona 5px de margem embaixo do rótulo */
    font-weight: bold; /* Deixa o texto do rótulo em negrito */
}


/* Footer */
footer {
    background-color: #1c2833; /* Define o fundo do footer como azul escuro */
    color: #bdc3c7; /* Define a cor do texto no footer como cinza claro */
    text-align: center; /* Centraliza o texto do footer */
    padding: 20px 0; /* Adiciona 20px de padding no topo e embaixo */
    position: fixed; /* Torna o footer fixo na parte inferior da página */
    bottom: 0; /* Define a posição do footer para o fundo da página */
    left: 0; /* Alinha o footer à esquerda */
    width: 100%; /* Faz o footer ocupar toda a largura da tela */
    z-index: 999; /* Define a prioridade do footer sobre outros elementos */
}

/* Responsive (Mobile Menu) */
@media (max-width: 768px) {
    header .container {
        flex-direction: column; /* Alinha os itens do header verticalmente */
        align-items: flex-start; /* Alinha os itens à esquerda */
    }

    .logo-link {
        margin-bottom: 10px; /* Adiciona espaço entre logo e menu toggle */
    }

    #main-nav {
        width: 100%; /* Faz o menu ocupar toda a largura */
        position: relative; /* Permite posicionar o botão de toggle */
    }

    #menu-toggle {
        display: block; /* Exibe o botão de menu */
        position: absolute; /* Posiciona o botão de forma absoluta */
        top: -45px; /* Define a posição vertical do botão */
        right: 15px; /* Alinha o botão à direita */
    }

    #main-nav ul {
        display: none; /* Esconde o menu de navegação */
        width: 100%; /* Faz com que o menu ocupe toda a largura */
        flex-direction: column; /* Organiza os itens do menu verticalmente */
        margin-top: 10px; /* Adiciona margem em cima */
    }

    #main-nav ul.show {
        display: flex; /* Exibe o menu quando a classe 'show' for adicionada via JS */
    }

    #main-nav ul li {
        width: 100%; /* Faz com que cada item ocupe 100% da largura */
        text-align: center; /* Centraliza o texto */
        margin: 10px 0; /* Adiciona espaço entre os itens */
    }

    .cta-buttons {
        flex-direction: column; /* Organiza os botões na vertical */
    }
}