/* Estilo para o cabeçalho */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2a5c8c; /* Azul predominante mais escuro */
    color: #fff; /* Texto branco */
}

body {
    padding: 0;
}

head {
    font-size: small;
}

/* Botao de sessao */
.btn.btn-primary {
    padding: 10px 20px; /* Espaçamento interno */
    font-size: 16px; /* Tamanho da fonte */
    color: #fff; /* Texto branco */
    background-color: #006bb3; /* Azul mais escuro */
    border: 2px solid #006bb3; /* Borda sólida azul */
    border-radius: 5px; /* Borda arredondada */
    transition: background-color 0.3s ease, color 0.3s ease; /* Adiciona transições suaves para mudanças de cor */
    cursor: pointer; /* Muda o cursor para uma mão ao passar por cima */
}

.btn.btn-primary:hover {
    background-color: #00548a; /* Azul mais escuro ao passar o mouse */
}

/* Botao de pesquisa */
.btn.btn-outline-success {
    color: #006bb3; /* Azul para o texto */
    border-color: #006bb3; /* Azul para a borda */
    background-color: transparent; /* Cor de fundo transparente */
    transition: background-color 0.3s ease, color 0.3s ease; /* Adiciona transições suaves para mudanças de cor */
    cursor: pointer; /* Muda o cursor para uma mão ao passar por cima */
}

.btn.btn-outline-success:hover {
    background-color: #006bb3; /* Azul ao passar o mouse */
    color: #fff; /* Texto branco ao passar o mouse */
}


/* Estilo personalizado para os botões de controle do carrossel */
.carousel-control-prev,
.carousel-control-next {
    background-color: #007bff; /* Cor de fundo azul */
    border-color: #007bff; /* Cor da borda azul */
    color: #fff; /* Cor do texto branco */
    font-size: 1.25rem; /* Tamanho da fonte */
    width: 40px; /* Largura */
    height: 40px; /* Altura */
    margin-top: 175px;
    margin-left: 50px;
    margin-right: 50px;

    border-radius: 50%; /* Borda arredondada para criar um botão circular */
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease; /* Adiciona transições suaves */
}

/* Estilo personalizado para os botões de controle do carrossel ao passar o mouse */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: #0056b3; /* Azul mais escuro */
    border-color: #0056b3; /* Cor da borda azul mais escura */
}


.carousel-item img {
    max-width: 75%;
    height: 400px;
    margin: 0 auto; /* Centralizar horizontalmente */
    border: 5px solid #fff; /* Borda branca ao redor de cada slide */
    border-radius: 10px; /* Borda arredondada */
}

@media (min-width: 768px) {
    /* Ajusta o tamanho para telas grandes */
    .carousel-control-prev,
    .carousel-control-next {
      width: 60px;
      height: 60px;
      margin-top: 300px;
      margin-left: 70px;
      margin-right: 70px;
    }
  
    .carousel-item img {
      height: 700px;
    }
  }
  
  @media (max-width: 767px) {
    /* Ajusta o tamanho para telas pequenas */
    .carousel-control-prev,
    .carousel-control-next {
      width: 40px;
      height: 40px;
      margin-top: 120px;
      margin-left: auto;
      margin-right: auto;
    }
  
    .carousel-item img {
      height: 300px; /* OU: height: 70%; */
    }
  }

/* Estilo para a seção */
.section {
  text-align: center;
  padding: 50px 20px; /* Adiciona espaço interno acima e abaixo da seção e nas laterais */
  background-color: #f7f7f7; /* Cor de fundo suave */
  max-width: 70%; /* Define uma largura máxima para evitar que o texto se estenda demais */
  margin: 20px auto; /* Centraliza a seção horizontalmente e adiciona margens entre as seções */
  overflow: hidden; /* Evita que o conteúdo da seção ultrapasse seus limites */
  border-radius: 10px; /* Adiciona cantos arredondados */
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1); /* Adiciona sombra suave */
}

/* Estilo para o título da seção */
.section h2 {
  font-family: 'Alice', sans-serif; /* Fonte inspirada em "Alice no País das Maravilhas" */
  font-size: 36px; /* Tamanho grande para o título */
  margin-bottom: 30px; /* Espaçamento inferior para separar o título dos conteúdos */
  color: #333; /* Cor do texto */
}

/* Estilo para os parágrafos da seção */
.section p {
  font-family: 'Georgia', serif; /* Fonte clássica para o texto */
  font-size: 18px; /* Tamanho do texto */
  line-height: 1.6; /* Altura da linha para melhor legibilidade */
  margin-bottom: 20px; /* Espaçamento inferior entre parágrafos */
  color: #666; /* Cor do texto */
  text-align: justify; /* Justifica o texto */
}

/* Estilo para a lista não ordenada */
.section ul {
  list-style: none; /* Remove os marcadores de lista padrão */
  padding-left: 0; /* Remove o espaçamento à esquerda padrão da lista */
  margin-bottom: 20px; /* Espaçamento inferior entre a lista e o próximo elemento */
}

/* Estilo para os itens da lista */
.section li {
  font-family: 'Georgia', serif; /* Fonte clássica para os itens */
  font-size: 16px; /* Tamanho do texto dos itens */
  line-height: 1.6; /* Altura da linha para melhor legibilidade */
  color: #333; /* Cor do texto */
  margin-bottom: 8px; /* Espaçamento inferior entre os itens da lista */
}

/* Estilo para outros elementos de lista, como <ol>, <dl>, etc., se necessário */




.section img {
    width: auto; /* Define a largura da imagem como automática */
    max-width: 100%; /* Define a largura máxima como 100% do contêiner pai */
    height: auto; /* Garante que a altura seja ajustada automaticamente para manter a proporção */
    border: 5px solid black; /* Adiciona uma borda sólida preta */
    border-radius: 10px; /* Adiciona uma borda arredondada */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adiciona uma sombra suave */
}

.section #brasao{
    max-width: 50%; /* Define a largura máxima como 100% do contêiner pai */
    height: auto; /* Garante que a altura seja ajustada automaticamente para manter a proporção */

}

.text_lar h2 {
    font-family: Arial, sans-serif;
    font-size: 24px;
    color: #333; /* Cor do texto */
    margin-top: 20px; /* Espaçamento superior */
    padding-left: 20px;
}

/* Estilo para as divs */
.text_lar div {
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #666; /* Cor do texto */
    margin-bottom: 30px; /* Espaçamento inferior */
    padding: 20px; /* Espaçamento interno */
    border: 1px solid #ccc; /* Borda sólida */
    border-radius: 5px; /* Borda arredondada */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Sombra suave */
}

/* Estilo para a primeira div */
#caracterizacao {
    background-color: #f9f9f9; /* Cor de fundo */
}

/* Estilo para a segunda div */
#missao{
    background-color: #f2f2f2; /* Cor de fundo */
}

/* Estilo para a terceira div */
#valores {
    background-color: #f9f9f9; /* Cor de fundo */
}

/* Estilo para a quarta div */
#servicos {
    background-color: #f2f2f2; /* Cor de fundo */
}

/* Estilo para a quinta div */
#actividades {
    background-color: #f9f9f9; /* Cor de fundo */
}

/* Estilo para a sexta div */
#apoio {
    background-color: #f2f2f2; /* Cor de fundo */
}

#documentos {
    margin: 2rem auto;
    max-width: 800px; /* Adjust as needed */
    padding: 1rem;
    border-radius: 5px; /* Gentle rounded corners */
    background-color: #f5f5f5; /* Light background */
  }

  #documentos  section {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd; /* Subtle separator lines */
  }

  #documentos h2 {
    margin-bottom: 1rem;
    font-size: 1.2rem; /* Adjust heading size */
    color: #333; /* Darker text for headings */
  }

  #documentos #filterInput {
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc; /* Light border */
    border-radius: 3px; /* Rounded input field */
  }

  #documentos ul {
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 0;
  }

  
#documentos a {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit color from parent */
}

  

  #documentos li {
    padding: 0.5rem 1rem;
    border-radius: 3px; /* Rounded list items */
    cursor: pointer; /* Indicate hover interaction */
    background-color: #eee; /* Light background for list items */
    margin-bottom: 0.5rem; /* Add some spacing between items */
  }

  #documentos li:hover {
    background-color: #ddd; /* Subtle hover effect */
  }

  
  .caixa-contacto {
    width: 100%; /* Adjust contact box width as needed */
    padding: 30px;
    background-color: #f2f2f2;
    border-radius: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    margin-right: 20px; /* Add margin for spacing */
    margin: 40px;
  }
  
  h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.5rem; /* Adjust heading size */
  }
  
  .lista-contacto {
    list-style: none;
    padding: 0;
  }
  
  .item-contacto {
    margin-bottom: 15px;
    display: flex; /* Make contact info items inline */
    align-items: center;
  }
  
  .titulo {
    font-weight: bold;
    width: 120px; /* Adjust label width */
    margin-right: 10px; /* Add margin for spacing */
  }
  
  .valor {
    font-size: 1rem; /* Adjust value size */
  }
  
  a.valor {
    color: #007bff;
    text-decoration: none; /* Remove underline for links */
  }
  
  /* Optional media query for smaller screens */
  
  @media only screen and (max-width: 768px) {
    .container {
      flex-direction: column; /* Stack elements on small screens */
      align-items: center;
      justify-content: center;
      width: 75%; /* Make container full width */
      margin-right: 50px;
    }
    .caixa-contacto {
        width: 90%; /* Adjust contact box width as needed */

        background-color: #f2f2f2;
        border-radius: 10px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
        margin-right: 20px; /* Add margin for spacing */
        margin: 40px;
      }
      
}

.galeria-container {
    width: 80%;
    margin: 0 auto;
    padding: 20px;
    background-color: #f2f2f2;
  }

  
  .galeria-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  
  .galeria-item {
    width: 300px;
    height: 300px;
    overflow: hidden;
    position: relative;
  }
  
  .galeria-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
  }
  
  .galeria-item:hover img {
    opacity: 0.7;
  }
  
  .galeria-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  .galeria-item:hover::after {
    opacity: 0.7;
  }
  .expanded-image {
    max-width: 100%;
    max-height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5); /* Sombra opcional */
    border-radius: 5px; /* Borda arredondada opcional */
    background-color: #fff; /* Cor de fundo opcional */
}

/* Estilo para o rodapé */
footer {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #2a5c8c; /* Azul predominante mais escuro */
    color: #fff; /* Texto branco */
    display: flex;
    flex-wrap: wrap; /* Permite que os elementos quebrem para a próxima linha em telas menores */
    justify-content: space-between;
    align-items: center;
}

.footer-left, .footer-center, .footer-right {
    flex: 1;
    text-align: center; /* Alinhar o conteúdo no centro */
     /* Adiciona um espaçamento inferior entre os elementos */
}

.footer-left img {
    max-width: 75%; /* Imagem se ajusta à largura do contêiner */
    height: auto;
}

.footer-center img {
    max-width: 75%; /* Imagem se ajusta à largura do contêiner */
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block; /* Centraliza a imagem horizontalmente */
}

.footer-right {
    flex: 1; /* Ocupa toda a largura do contêiner */
    text-align: center; /* Alinhar o conteúdo no centro */
    margin-top: 10px; /* Adiciona um espaçamento superior */
    padding-right: 10px;
}

.footer-info-box {
    border-radius: 5px;
    border: 1px solid #fff; /* Cor da borda branca */
    text-align: center;
 /* Adiciona um espaçamento inferior */
}

.footer-info-box p {
    margin: 10px 0; /* Adiciona espaço entre os parágrafos */
    font-size: 13px;
}

.footer-bottom-text a {
    color: #fff; /* Texto branco */
    text-decoration: none; /* Remover sublinhado do link */
    font-size: 12px; /* Tamanho da fonte */
}

.footer-bottom-text a:hover {
    text-decoration: underline; /* Adicionar sublinhado quando o link é hover */
}

/* Media query para telas menores */
@media only screen and (max-width: 768px) {
    footer {
        flex-direction: column; /* Altera o layout para empilhar os elementos verticalmente */
        align-items: center; /* Alinha os elementos no centro */
    }

    .footer-center {
        padding-top: 10px;
        order: -1; /* Move o elemento para o início da linha */
    }

    .footer-right {
        margin-top: 20px; /* Aumenta o espaçamento superior */
    }

    /* Reduz o tamanho das imagens */
    .footer-left img {
        max-width: 200px; /* Define a largura máxima das imagens */
        height: auto; /* Mantém a proporção da imagem */
    }

    .footer-center img {
        max-width: 200px; /* Define a largura máxima das imagens */
        height: auto; /* Mantém a proporção da imagem */
    }
}