/* Regras gerais */
* {
    margin: 0; /* Remove a margem padrão de todos os elementos */
    padding: 0; /* Remove o preenchimento padrão de todos os elementos */
    box-sizing: border-box; /* Inclui a borda e o preenchimento no tamanho total do elemento */
}

body {
    font-family: Arial, sans-serif; /* Define a fonte padrão do corpo como Arial ou uma fonte sans-serif alternativa */
    line-height: 1.6; /* Define o espaçamento entre linhas do texto */
}

/* Estilo do cabeçalho */
header {
    background-color: #333; /* Define a cor de fundo do cabeçalho */
    color: #fff; /* Define a cor do texto do cabeçalho */
    padding: 10px 20px; /* Adiciona preenchimento interno ao cabeçalho */
    position: fixed; /* Torna o cabeçalho fixo no topo da página */
    width: 100%; /* Define a largura do cabeçalho como 100% da largura da tela */
    top: 0; /* Alinha o cabeçalho ao topo da página */
    left: 0; /* Alinha o cabeçalho à esquerda da página */
    z-index: 1000; /* Define a ordem de empilhamento do cabeçalho para garantir que ele fique sobre outros elementos */
    height: 80px; /* Define a altura do cabeçalho */
    display: flex; /* Utiliza Flexbox para o layout do cabeçalho */
    align-items: center; /* Alinha verticalmente os itens ao centro */
    justify-content: space-between; /* Distribui os itens com espaço igual entre eles */
}

header .container {
    max-width: 1200px; /* Define a largura máxima do container */
    margin: 0 auto; /* Centraliza o container horizontalmente */
    display: flex; /* Utiliza Flexbox para o layout do container */
    align-items: center; /* Alinha verticalmente os itens ao centro */
    justify-content: space-between; /* Distribui os itens com espaço igual entre eles */
    width: 100%; /* Define a largura do container como 100% */
}

header .logo-container {
    position: relative; /* Define a posição relativa para a lógica de posicionamento absoluto dos logotipos */
    height: 60px; /* Define a altura da área do logotipo */
}

header .primary-logo {
    max-height: 60px; /* Define a altura máxima do logotipo principal */
    width: auto; /* Ajusta a largura automaticamente para manter a proporção */
}

header .secondary-logo {
    position: absolute; /* Posiciona o logotipo secundário de forma absoluta dentro da área do logotipo */
    top: 0; /* Alinha o logotipo secundário ao topo da área do logotipo */
    left: 0; /* Alinha o logotipo secundário à esquerda da área do logotipo */
    max-height: 60px; /* Define a altura máxima do logotipo secundário */
    width: auto; /* Ajusta a largura automaticamente para manter a proporção */
    opacity: 0; /* Inicialmente torna o logotipo secundário invisível */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Adiciona uma transição suave para a opacidade e transformação */
    transform: scale(1); /* Define a escala inicial do logotipo secundário */
}

.logo-container:hover .secondary-logo {
    opacity: 1; /* Torna o logotipo secundário visível ao passar o mouse */
    transform: scale(1.1); /* Aumenta a escala do logotipo secundário ao passar o mouse */
}

.logo-container:hover .primary-logo {
    opacity: 0; /* Torna o logotipo principal invisível ao passar o mouse */
}

header nav ul {
    list-style: none; /* Remove os marcadores padrão da lista */
    display: flex; /* Utiliza Flexbox para o layout da lista de navegação */
    margin: 0; /* Remove a margem padrão da lista */
    padding: 0; /* Remove o preenchimento padrão da lista */
}

header nav ul li {
    margin-left: 20px; /* Adiciona margem à esquerda dos itens da lista de navegação */
}

header nav ul li a {
    color: #fff; /* Define a cor dos links da navegação */
    text-decoration: none; /* Remove o sublinhado dos links */
}

header nav ul li a:hover {
    text-decoration: underline; /* Adiciona um sublinhado aos links ao passar o mouse */
}

main {
    padding-top: 80px; /* Adiciona preenchimento superior ao conteúdo principal para evitar sobreposição com o cabeçalho fixo */
    flex: 1; /* Permite que o conteúdo principal cresça para preencher o espaço disponível */
}

/* Estilo das seções */
section {
    padding: 0; /* Remove o preenchimento padrão das seções */
    margin: 0; /* Remove a margem padrão das seções */
}

section#home {
    position: relative; /* Define a posição relativa para o posicionamento absoluto dos elementos filhos */
    min-height: 100vh; /* Define a altura mínima como 100% da altura da viewport */
    margin-top: 80px; /* Adiciona margem superior para evitar sobreposição com o cabeçalho fixo */
    display: flex; /* Utiliza Flexbox para o layout da seção */
    justify-content: center; /* Centraliza horizontalmente o conteúdo da seção */
    align-items: center; /* Centraliza verticalmente o conteúdo da seção */
    overflow: hidden; /* Oculta o conteúdo que excede as bordas da seção */
}

.curso-img {
    position: absolute; /* Posiciona a imagem de fundo de forma absoluta dentro da seção */
    top: 0; /* Alinha a imagem ao topo da seção */
    left: 0; /* Alinha a imagem à esquerda da seção */
    width: 100%; /* Define a largura da imagem como 100% da largura da seção */
    height: 100%; /* Define a altura da imagem como 100% da altura da seção */
    overflow: hidden; /* Oculta o conteúdo que excede as bordas da imagem */
}

.curso-img img {
    width: 100%; /* Define a largura da imagem como 100% da largura da área do container */
    height: 100%; /* Define a altura da imagem como 100% da altura da área do container */
    object-fit: cover; /* Faz a imagem cobrir a área do container mantendo a proporção */
    object-position: center; /* Centraliza a imagem na área do container */
    display: block; /* Remove o espaço extra abaixo da imagem */
}

section#cards {
    padding: 40px 20px; /* Adiciona preenchimento à seção de cartões */
    background-color: #f4f4f4; /* Define a cor de fundo da seção de cartões */
    display: flex; /* Utiliza Flexbox para o layout da seção */
    flex-direction: column; /* Define a direção dos itens como coluna */
    align-items: center; /* Centraliza horizontalmente os itens da seção */
}

.prvc-prep {
    display: flex; /* Utiliza Flexbox para o layout dos elementos dentro de .prvc-prep */
    justify-content: center; /* Centraliza horizontalmente os itens dentro de .prvc-prep */
    gap: 30px; /* Adiciona espaçamento entre os itens dentro de .prvc-prep */
    margin-bottom: 10px; /* Adiciona margem inferior */
    position: relative; /* Define a posição relativa para os elementos filhos */
}

.prvc-prep a {
    text-decoration: none; /* Remove o sublinhado dos links dentro de .prvc-prep */
    color: inherit; /* Herda a cor do elemento pai */
}

.prvc-prep h1 {
    font-size: 2rem; /* Define o tamanho da fonte do título */
    margin: 0; /* Remove a margem padrão do título */
    font-weight: normal; /* Define o peso da fonte como normal */
}

.pink-title {
    color: #e13e90; /* Define a cor rosa para o título */
}

.blue-title {
    color: #1a66b3; /* Define a cor azul para o título */
}

.line {
    width: 200px; /* Define a largura da linha */
    height: 3px; /* Define a altura da linha */
    background-color: #ff69b4; /* Define a cor de fundo da linha */
    margin: 5px 0 20px 0; /* Define as margens superior e inferior da linha */
}

.cards-container {
    display: flex; /* Utiliza Flexbox para o layout dos cartões */
    flex-direction: column; /* Define a direção dos itens como coluna */
    gap: 20px; /* Adiciona espaçamento entre os cartões */
    max-width: 800px; /* Define a largura máxima da container de cartões */
    width: 100%; /* Define a largura da container de cartões como 100% */
}

.card {
    background: #fff; /* Define a cor de fundo do cartão */
    border-radius: 8px; /* Adiciona bordas arredondadas ao cartão */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adiciona sombra ao cartão */
    padding: 10px; /* Adiciona preenchimento interno ao cartão */
    text-align: left; /* Alinha o texto à esquerda dentro do cartão */
    display: flex; /* Utiliza Flexbox para o layout do cartão */
    align-items: center; /* Alinha verticalmente os itens dentro do cartão */
}

.card-content {
    display: flex; /* Utiliza Flexbox para o layout do conteúdo do cartão */
    align-items: center; /* Alinha verticalmente os itens dentro do conteúdo do cartão */
    gap: 15px; /* Adiciona espaçamento entre os itens dentro do conteúdo do cartão */
}

.card-image {
    width: 150px; /* Define a largura da imagem do cartão */
    height: 150px; /* Define a altura da imagem do cartão */
    object-fit: cover; /* Faz a imagem cobrir a área do cartão mantendo a proporção */
    border-radius: 8px; /* Adiciona bordas arredondadas à imagem do cartão */
}

.card-text {
    max-width: calc(100% - 160px); /* Define a largura máxima do texto do cartão */
}

.card h3 {
    margin-bottom: 5px; /* Adiciona margem inferior ao título do cartão */
    font-size: 1.2rem; /* Define o tamanho da fonte do título do cartão */
}

.card p {
    font-size: 1rem; /* Define o tamanho da fonte do texto do cartão */
    color: #666; /* Define a cor do texto do cartão */
}

@media (max-width: 768px) {
    .prvc-prep {
        flex-direction: column; /* Altera a direção dos itens para coluna em telas menores */
        gap: 10px; /* Reduz o espaçamento entre os itens em telas menores */
    }

    .cards-container {
        gap: 15px; /* Reduz o espaçamento entre os cartões em telas menores */
    }
}

.site-footer {
    background-color: #333333; /* Define a cor de fundo do rodapé */
    color: #ecf0f1; /* Define a cor do texto do rodapé */
    padding: 20px 20px; /* Adiciona preenchimento interno ao rodapé */
    text-align: center; /* Centraliza o texto do rodapé */
}

.footer-content {
    display: flex; /* Utiliza Flexbox para o layout do conteúdo do rodapé */
    justify-content: space-around; /* Distribui o conteúdo com espaço igual entre os itens */
    align-items: flex-start; /* Alinha os itens ao início do contêiner verticalmente */
    flex-wrap: wrap; /* Permite que os itens se movam para a linha seguinte se necessário */
    max-width: 1200px; /* Define a largura máxima do conteúdo do rodapé */
    margin: 0 auto; /* Centraliza o conteúdo do rodapé horizontalmente */
}

.footer-section {
    flex: 1; /* Permite que as seções do rodapé cresçam igualmente */
    margin: 10px; /* Adiciona margem ao redor de cada seção do rodapé */
    min-width: 250px; /* Define a largura mínima das seções do rodapé */
}

.footer-section h2 {
    margin-top: 0; /* Remove a margem superior do título da seção do rodapé */
    font-size: 1.5em; /* Define o tamanho da fonte do título da seção do rodapé */
    border-bottom: 2px solid #ecf0f1; /* Adiciona uma borda inferior ao título da seção do rodapé */
    padding-bottom: 10px; /* Adiciona preenchimento inferior ao título da seção do rodapé */
}

.footer-section ul {
    list-style-type: none; /* Remove os marcadores das listas */
    padding: 0; /* Remove o preenchimento das listas */
}

.footer-section ul li {
    margin: 10px 0; /* Adiciona margem superior e inferior aos itens da lista */
}

.footer-section ul li a {
    color: #ecf0f1; /* Define a cor dos links na seção do rodapé */
    text-decoration: none; /* Remove o sublinhado dos links */
    font-size: 1.1em; /* Define o tamanho da fonte dos links */
}

.footer-section ul li a:hover {
    text-decoration: underline; /* Adiciona um sublinhado aos links ao passar o mouse */
    color: #3498db; /* Define a cor dos links ao passar o mouse */
}

.footer-section.contact p {
    margin: 15px 0; /* Adiciona margem superior e inferior aos itens de contato */
}

.footer-bottom {
    margin-top: 20px; /* Adiciona margem superior ao rodapé inferior */
    font-size: 1.1em; /* Define o tamanho da fonte do texto de copyright */
    border-top: 1px solid #34495e; /* Adiciona uma borda superior ao rodapé inferior */
    padding-top: 10px; /* Adiciona preenchimento superior ao rodapé inferior */
}

.footer-bottom p {
    margin: 0; /* Remove a margem do texto de copyright */
}