/* Importação das fontes Karla e Roboto no CSS */
@import url('https://fonts.googleapis.com/css2?family=Karla:ital,wght@0,200..800;1,200..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900&display=swap');

/* Estilos globais */
/* Estilos globais */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #f5f5f5; /* Branco Fumaça */
    font-family: 'Roboto', sans-serif;
    text-align: justify;
}

/* Container principal para centralizar todos os elementos horizontal e verticalmente */
.container {
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100vh; /* Altura da tela inteira */
    flex-direction: row; /* Coloca os elementos em uma linha (row) */
    text-align: center;
    flex-wrap: wrap; /* Permite que os elementos "quebrem" linha se necessário */
}

/* Estilo da imagem (logo) */
.logo {
    width: 300px;
    height: 300px;
    pointer-events: none; /* Impede qualquer tipo de interação com a imagem */
    margin-right: 50px; /* Espaçamento à direita do logo */
}

/* Estilo dos botões "SOBRE" e "PROJETOS" */
.menu-item {
    font-size: 40px;
    color: black;
    text-decoration: none;
    font-weight: 200; /* Karla ExtraLight */
    margin: 0 25px; /* Espaçamento entre os botões */
    position: relative; /* Necessário para o gradiente underline */
}

/* Estilo do menu superior */
.menu-superior {
    display: flex;
    justify-content: center; /* Centraliza o menu horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    background-color: #f5f5f5; /* Fundo do menu combinando com o site */
    padding: 10px 0; /* Espaçamento vertical no menu */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra leve abaixo do menu */
    position: sticky; /* Faz o menu fixar no topo ao rolar a página */
    top: 0; /* Garante que o menu esteja no topo */
    z-index: 1000; /* Garante que o menu fique acima de outros elementos */
}

/* Links do menu */
.menu-superior a {
    text-decoration: none;
    font-family: 'Karla', sans-serif;
    font-weight: 200; /* Karla ExtraLight */
    font-size: 20px; /* Tamanho do texto no menu */
    color: black; /* Cor do texto */
    margin: 0 15px; /* Espaçamento entre os links */
    transition: color 0.3s ease; /* Suaviza a transição de cor */
}
/* FIM Estilo do menu superior */


/* Gradiente underline que surge ao passar o mouse */
.menu-item::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: -5px;
    left: 0;
    background: linear-gradient(to right, #ff9900, #3d1365, #00297f);
    transition: width 0.5s ease-in-out;
}

/* Quando passar o mouse, o underline cresce da esquerda para a direita */
.menu-item:hover::after {
    width: 100%; /* Expande o underline */
}

/* Estilo do dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

/* O dropdown content (o menu) fica oculto por padrão */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%; /* Alinhado ao topo do botão */
    left: 0;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    min-width: 250px;
    z-index: 1;
}

/* Mostrar o dropdown ao passar o mouse */
.dropdown:hover .dropdown-content {
    display: block; /* Exibe o menu dropdown */
}

/* Links dentro do dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: center;
}

/* Estilo de hover nos itens do dropdown */
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Estilo da div conteudo_sobre para centralizar o texto */
.conteudo_sobre {
    width: 700px; /* Define a largura padrão para telas grandes */
    margin: 0 auto; /* Centraliza a div horizontalmente */
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Centraliza verticalmente */
    text-align: justify; /* Alinha o texto de forma justificada */
}

/* Estilo do texto dentro da div conteudo_sobre */
.conteudo_sobre p {
    font-size: 18px; /* Tamanho padrão do texto */
    line-height: 1.6; /* Espaçamento entre as linhas para melhor legibilidade */
    width: 100%; /* Ocupa toda a largura da div */
}

/* Estilo do título na div conteudo_sobre */
.conteudo_sobre h1 {
    font-size: 24px; /* Tamanho padrão do título */
    margin-bottom: 20px; /* Espaçamento abaixo do título */
    text-align: center;
}

/* Estilo para centralizar e limitar as imagens dentro de .conteudo_sobre */
.conteudo_sobre img {
    display: block; /* Faz a imagem se comportar como um bloco */
    margin: 0 auto; /* Centraliza a imagem horizontalmente */
    max-width: 100%; /* Garante que a imagem não ultrapasse o tamanho do container */
    width: auto; /* Mantém a proporção da imagem */
    height: auto; /* Mantém a proporção da altura */
    max-width: 700px; /* Limita a largura máxima a 700px */
    border-radius: 5px; /* (Opcional) Adiciona bordas arredondadas */
}


/* Media Queries para responsividade */

/* Ajusta a largura e o tamanho da fonte para telas menores que 768px (tablets e celulares) */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Coloca os elementos um abaixo do outro */
        height: auto; /* Ajusta a altura conforme necessário */
    }

    .logo {
        width: 200px; /* Redimensiona o logo para telas menores */
        height: auto; /* Mantém a proporção da altura automaticamente */
        margin-bottom: 20px; /* Adiciona espaço abaixo da logo */
        margin-right: 0; /* Remove o espaçamento à direita */
    }

    .menu-item {
        font-size: 30px; /* Diminui o tamanho dos botões em telas menores */
        margin: 10px 0; /* Adiciona espaçamento vertical entre os botões */
    }

    .conteudo_sobre {
        width: 90%; /* Reduz a largura para ocupar 90% da tela */
    }

    .conteudo_sobre p {
        font-size: 16px; /* Reduz o tamanho da fonte em telas menores */
    }

    .conteudo_sobre h1 {
        font-size: 20px; /* Ajusta o tamanho do título */
    }
}

/* Ajusta a largura e o tamanho da fonte para telas menores que 480px (celulares menores) */
@media (max-width: 480px) {
    .logo {
        width: 150px; /* Redimensiona ainda mais o logo para telas pequenas */
        height: auto; /* Mantém a proporção */
    }

    .menu-item {
        font-size: 25px; /* Reduz ainda mais o tamanho dos botões */
    }

    .conteudo_sobre p {
        font-size: 14px; /* Reduz ainda mais o tamanho da fonte para celulares */
    }

    .conteudo_sobre h1 {
        font-size: 18px; /* Reduz o tamanho do título */
    }
}

/* Estilo para o container dos cards */
.cards-container {
    display: flex;
    flex-direction: column; /* Organiza os cards em uma coluna */
    align-items: center; /* Centraliza os cards horizontalmente */
    gap: 20px; /* Espaçamento vertical entre os cards */
    padding: 20px; /* Espaçamento interno */
}

/* Estilo do card */
.card {
    width: 90%; /* Largura padrão em telas menores */
    max-width: 600px; /* Largura máxima do card */
    background-color: #fff; /* Fundo branco */
    border-radius: 10px; /* Cantos arredondados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Sombra para destaque */
    overflow: hidden; /* Garante que o conteúdo extra seja cortado */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transições suaves */
    cursor: pointer; /* Indica que o card é clicável */
    text-decoration: none; /* Remove o sublinhado do link */
}

/* Efeito ao passar o mouse sobre o card */
.card:hover {
    transform: translateY(-5px); /* Eleva o card levemente */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Intensifica a sombra */
}

/* Cabeçalho do card */
.card-header {
    background-color: #1e111d; /* Nova cor do cabeçalho */
    padding: 10px 20px; /* Espaçamento interno */
    color: #fff; /* Cor do texto no cabeçalho */
    font-size: 18px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    text-align: center; /* Centraliza o texto */
}

/* Corpo do card */
.card-body {
    padding: 15px 20px; /* Espaçamento interno */
    font-size: 16px; /* Tamanho da fonte */
    color: #333; /* Cor do texto */
    line-height: 1.6; /* Altura da linha para melhor legibilidade */
    text-align: justify; /* Alinha o texto de forma justificada */
}

/* Responsividade: cards em colunas para telas menores */
@media (max-width: 768px) {
    .card {
        width: 100%; /* Cards ocupam toda a largura em telas menores */
    }
}

/* Container para centralizar os botões */
.download-container {
    display: flex;
    flex-direction: column; /* Organiza os botões verticalmente */
    align-items: center; /* Centraliza horizontalmente */
    gap: 20px; /* Espaçamento entre os botões */
    margin: 20px auto; /* Centraliza o container na página */
}

/* Estilo dos botões de download */
.botao-download {
    display: inline-block; /* Ajusta a largura ao conteúdo */
    text-align: center;
    padding: 10px 20px; /* Espaçamento interno */
    background-color: #1e111d; /* Cor do botão */
    color: #fff; /* Cor do texto */
    font-size: 16px; /* Tamanho do texto */
    font-weight: bold; /* Texto em negrito */
    text-decoration: none; /* Remove o sublinhado */
    border-radius: 5px; /* Bordas arredondadas */
    transition: background-color 0.3s ease; /* Transição para o hover */
}

/* Efeito hover */
.botao-download:hover {
    background-color: #522081; /* Cor ao passar o mouse */
}

/* Barra flutuante fixa na parte inferior */
.barra-flutuante {
    position: fixed; /* Fixa a barra na parte inferior da tela */
    bottom: 0; /* Posiciona a barra no limite inferior */
    left: 0; /* Garante que a barra comece no canto esquerdo */
    width: 100%; /* Faz a barra ocupar toda a largura da tela */
    background-color: #360f5a; /* Cor de fundo da barra */
    padding: 10px 0; /* Espaçamento interno vertical */
    display: flex; /* Habilita o flexbox para alinhamento */
    justify-content: center; /* Centraliza os botões horizontalmente */
    align-items: center; /* Centraliza os botões verticalmente */
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1); /* Sombra acima da barra */
    z-index: 1000; /* Garante que a barra fique acima de outros elementos */
}

/* Estilo dos botões na barra */
.barra-flutuante .botao-download {
    display: inline-block; /* Ajusta a largura ao conteúdo */
    text-align: center;
    padding: 10px 20px; /* Espaçamento interno */
    background-color: #3b3b3b; /* Cor do botão */
    color: #fff; /* Cor do texto */
    font-size: 14px; /* Tamanho da fonte */
    font-weight: bold; /* Texto em negrito */
    text-decoration: none; /* Remove o sublinhado */
    border-radius: 5px; /* Bordas arredondadas */
    margin: 0 10px; /* Espaçamento horizontal entre os botões */
    transition: background-color 0.3s ease; /* Transição para o hover */
}

/* Efeito hover nos botões */
.barra-flutuante .botao-download:hover {
    background-color: #333333; /* Cor ao passar o mouse */
}