html{
  background-color: #D9D4D1;
}

.header {
  padding: 10px 20px; /* Reduz o padding do cabeçalho */
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px; /* Mantém um tamanho fixo */
}

.logo img {
    max-width: 180px;
    height: 10;
    display: block;
}

.container {
  display: flex;
  align-items: center;
  position: relative;
}

.busca {
  padding: 10px 40px 10px 15px;
  border-radius: 35px;
  border: 1px solid rgba(255, 255, 255, .5);
  height: 42px;
  width: 250px;
  outline: none;
  font-size: 16px;
}

.button {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 25px;
  background-image: url("lupa.png");
  background-repeat: no-repeat;
  background-size: contain;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

/* Ajustando a posição do menu */
nav {
  margin-top: -50px; /* Deixa o menu mais próximo */
}

/*https://pt.stackoverflow.com/questions/471065/alinhar-imagem-de-lupa-dentro-do-campo-input-de-busca-html*/
/*Cor no topo da navegação*/
ul {
  list-style-type: none;
  background-color: #333;
  margin: 50px;
  padding: 15px;
  overflow: hidden;
  border-radius: 20px;
  text-align: center;
}

.flex-container {
  display: flex;
  justify-content: space-around;
}

/*Estilo dos links dentro da navegação*/
li a{
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;

  text-decoration: none;
  font-size: 23px;

}

/* Mudar de cor ao selecionar os links */
li a:hover {
  color: black;
}

div.image{
  padding: 8px;
  margin: 50px;
  border: 1px solid #ccc;
  height: 350px;
  text-align: center;
}

div.image img{
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/*https://www.w3schools.com/css/tryit.asp?filename=trycss_image_gallery_responsive*/
div.gallery{
  /*border: 1px solid #ffffff;*/
  padding: 0 6px;

  float:left;
  border-spacing: 10px;
  width: 24.99999%;

  border-radius: 10px; /* Bordas suavizadas */
  overflow: hidden; /* Garante que a imagem dentro siga o formato */
  /*ox-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);  Adiciona um leve sombreamento */
  padding-bottom: 50px;
}

/*alinha o box das imagens*/
*{
  box-sizing: border-box;

}

/*cor ao passar o cursor do mouse na imagem*/
div.gallery:hover{
  border: 1px solid #505A63;
}

div.gallery img {
  width: 100%;
  height: auto;
  border-radius: 10px; /*Borda arredondada*/
}

div.espaco{
  padding-bottom: 20px;
}

div.desc {
  padding: 15px;
  text-align: center;
}

.noticias-em-alta {

  border-spacing: 10px;
  width: 100%;
  height: 100%;
  margin: 60px auto 20px;
  padding: 8px;
  padding-bottom: 30px;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  border-top: 4px solid #ddd;
}

.noticias-em-alta h2 {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
  color: #333;
}

.card-noticia {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  background-color: #ffffff;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.card-noticia img {
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 15px;
}

.conteudo-noticia h3 {
  margin: 0 0 5px 0;
  font-size: 18px;
  color: #222;
}

.conteudo-noticia p {
  margin: 0;
  font-size: 14px;
  color: #555;
}

.rodape {
  background-color: #2d2f30;
  color: #f2f2f2;
  padding: 20px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 5px; /* Bordas arredondadas */
}

.rodape-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 98%; /* Corrigi o erro de digitação */
}

.logo_rodape a {
  display: flex;
  align-items: center; /* Centraliza o texto */
  text-decoration: none;
  background-color: white;
  color: black; /* Ajustei a cor do texto para ser visível */
  padding: 10px 10px;
  font-weight: bold;

}
.logi img {
  height: 40px; /* Ajuste a altura conforme necessário */
  width: auto; /* Mantém a proporção */
  max-height: 50px; /* Garante que a imagem não ultrapasse um limite */
  border-radius: 3px;
}

.desenvolvedores {
  font-size: 12px; /* Reduzi um pouco a fonte */
  text-align: center;
}