html {
    scroll-behavior: smooth;/*deixa o redirecionamento das paginas suaves*/
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Garante que bordas não empurrem o layout */
}

/*estilização da barra de rolagem(quero deixar degradê)*/
/*configurar a largura da barra*/
::-webkit-scrollbar {
    width: 20px;
    
}

/*fundo da barra*/
::-webkit-scrollbar-track {
    background: #f1f1f1;
    
}

/*a parte que se move(com o degradê)*/
::-webkit-scrollbar-thumb {
    /*to bottom faz meu degradê começar no topo(primeira cor escolhida) - caso eu queira que fiquem de lado é só usar to right*/
    background: linear-gradient(to bottom, #8842EB, #ffffff, #fdcb06);
    border-radius: 10px;
    border: 2px solid #f1f1f1; /*cria uma borda na minha barra*/
}

/*efeito do mouse na barra*/
::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #7234c9, #d9ae05);
}


/*INICIO DO HEADER*/
header{
    height: 155px; /*altura do fundo roxo*/
    background-color: #8842EB;
    display: flex;
    justify-content: space-between; /*deixa os espaços dos itens(logo e menu) padrão*/ 
    align-items: center;/*alinha os itens do menu no ao centro do padding*/
    padding: 0px 70px; /* Margem interna para os itens do menu não colar na borda da tela */
    width: 100%;/*vai deixar o tamanho da largura padrão*/
}


.container-logo {
    width: 200px;
}


.container-logo img{
    width: 90%;
    height: auto; /*vai manter a proporção sem achatar*/
    display: block;
}


/*Pai controlando o posicionamento dos itens*/
.barras-navegacao {
    display: flex; /*vai colocar os itens lado a lado*/
    gap: 30px; /*espaço entre cada item*/
    
}



/*Filho controlando a estética*/
.barras-navegacao a{
    color: #ffffff;
    font-family: "Jaro", sans-serif;
    font-optical-sizing: auto; /*permite que o navegador ajuste o desenho (a forma) das letras dependendo do tamanho que elas ocupam na tela.*/
    font-weight: 400;
    font-style: normal;
    font-size: 32px;
    transition: 0.3s;
    /* VALORES: Horizontal | Vertical | Desfoque | Cor */
    text-shadow: 3px 3px 0px #4A208F;/*sombra*/
    text-decoration-line: none;
}

/* Quando passa o mouse */
.barras-navegacao a:hover {
    text-shadow: 0px 0px 15px rgba(255, 204, 0);
    cursor: pointer; /* Transforma a seta em "mãozinha" */
    transform: scale(1.1); /* Dá um leve aumento no tamanho */
}
/*FIM DO HEADER*/

/*INICIO DO MAIN HOME*/
.conteudos-home {
    display: flex;
    justify-content: center;/*centraliza as materias*/
    align-items: center;
    gap: 40px; /*espaço entre as imagens*/
    padding: 80px 20px; /*aqui eu controlo o espaço para não colar no meu header*/
    flex-wrap: wrap; /*controle da tela(se for pequena vai para linha de baixo)*/
}

/*estilizacao das imagens*/
.conteudos-home div {
    width: 380px; /*dar um tamanho fixo para divs*/
    transition: transform 0.3s ease;/*animação ao passar o mouse*/
}

.conteudos-home img {
    width: 100%; /*fazer a imagem ocupar toda a div*/
    height: 300px;
    object-fit: cover; /*tirar os espaços em branco da propria imagem*/
    
    /*estilo da borda*/
    border: 5px solid #8842eb;
    border-radius: 25px;
    box-shadow: 8px 8px 0px #fdcb06;
}

/*efeitos com mouse passando na imagem*/
.conteudos-home div:hover {
    transform: translateY(-15px); /*faz o card subir*/

}

.conteudos-home div:hover img {
    border-color: #fdcb06; /*a borda muda de roxo para amarelo*/
    box-shadow: 8px 8px 0px #8842EB; /*a sombra inverte pra roxo*/
    cursor: pointer; /*muda de seta para mão*/
}
/*FINAL DO MAIN HOME*/

/*INICIO FOOTER*/

footer{
    background-color: #8842eb;
    padding: 30px 55px 15px 55px; /*alinha com o padding do meu header e um pouco menor para o copyright*/
    display: flex;
    flex-direction: column; /*Faz geral ficar em coluna junto com o copyright*/
    gap: 40px;
}

footer h3 {
    
    color: #ffffff;
    font-family: "Jaro", sans-serif;
    font-weight: 400;
    font-size: 24px;
    font-optical-sizing: auto;
    font-style: normal;
    text-shadow: 3px 3px 0px #4A208F;
}

/*Container das 3 colunas principais*/
.footer-principal {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start; /*Alinha as colunas pelo topo*/
}



/*container pra segurar geral no rodapé*/
.menu-rodape {
    display: flex;
    gap: 40px;
    padding: 20px;
}

.menu-rodape ul {
    list-style: none; /*tirar os pontinhos*/
    
}

/*estilo de cada par(icone + texto)*/
.item-rodape {
    display: flex; /*imagem e texto lado a lado*/
    align-items: center; /*alinha verticalmente pelo centro*/
    gap: 10px; /*espaço entre logo e texto*/
}

/*ajustando o tamanho das logos*/
.item-rodape img {
    width: 30px;
    height: auto;
}

/*estilo do texto*/
.item-rodape a{
    text-decoration: none;
    color: #ffffff;
    font-family: "Jaro", sans-serif;
    font-size: 1.2rem;
    
   
}

/*Estilo comum para as colunas Institucional e Redes*/
.container-institucional, .container-redes {
    display: flex;
    flex-direction: column; /*Faz o h3 ficar em cima e o conteúdo embaixo*/
    gap: 15px;
    max-width: 300px;
}

/*Tamanho da logo no institucional*/
.container-institucional img {
    width: 150px;
    height: auto;
}

/*Organização dos ícones das redes sociais*/
.icones-redes {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.icones-redes img {
    width: 35px; /*Tamanho padrão para redes sociais*/
    height: auto;
    transition: 0.3s;
}
.icones-redes img:hover {
    transform: translateY(-5px); /*Efeito legal nas redes sociais*/
    cursor: pointer;
}

/*Estilo da frase de direitos autorais*/
.footer-copyright {
    text-align: center;
    border-top: 1px solid rgba(255, 204, 0);/*cria uma linha para separar o copy dos conteudos de cima no footer*/
    padding-top: 20px;
}
.footer-copyright p {
    color: #ffffff;
    font-family: sans-serif;
    font-size: 14px;
    opacity: 0.8;
}
/*FINAL DO FOOTER*/

/*Inicio da responsividade*/
/*Para Tablets e telas médias(até 1024px)*/
@media (max-width: 1025px) {
    header {
        padding: 0px 30px;
    }

    .conteudos-home {
        gap: 20px;
    }

    .conteudos-home div {
        width: 45%;/*Mostra dois cards por linha*/
    }
}

/*Para Celulares (até 768px)*/
@media (max-width: 769px) {
    
    
    header {
        height: auto;
        flex-direction: column; /*Logo em cima, Menu embaixo*/
        padding: 20px;
        gap: 20px;
    }

    .barras-navegacao {
        gap: 15px;
        flex-wrap: wrap; /*Se forem muitos itens, eles quebram linha*/
        justify-content: center;
    }

    .barras-navegacao a {
        font-size: 24px; /*Diminui um pouco a fonte no celular*/
    }

    
    .conteudos-home div {
        width: 90%; /*Um card por linha, ocupando quase a tela toda*/
    }

    .conteudos-home img {
        height: 250px; /*Ajusta a altura da imagem para não ficar muito grande*/
    }

    
    .footer-principal {
        flex-direction: column; /*Empilha as 3 colunas do rodapé*/
        align-items: center;/*Centraliza tudo*/
        text-align: center;
        gap: 40px;
    }

    .menu-rodape ul {
        display: flex;
        flex-direction: column; /*Menu do rodapé vira lista vertical*/
        align-items: center;
        gap: 15px;
    }

    .item-rodape {
        justify-content: center;
    }

    .container-institucional, .container-redes {
        align-items: center; /*Garante que o h3 e as imagens fiquem no meio*/
    }

    .icones-redes {
        justify-content: center;
    }
}

/*Para Celulares Pequenos (até 480px)*/
@media (max-width: 481px) {
    .barras-navegacao a {
        font-size: 20px;
    }
    
    .container-logo {
        width: 150px; /*Logo menorzinha*/
    }
}