/*Estilo para recursos pg-inicial*/

body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

body {  
    /*background-color: #87833c; /* Cor de fundo complementar (azul) */  /* Comentado ou removido */  
            /*background-image: url('./images/fundo-nsa.png');*/ /* Substitua pelo caminho da sua imagem */  /* Comentado ou removido */  
            /*background-color: #3498db;*/ /* Cor de fundo complementar (azul) */  
    background-size: cover;  
    background-position: center;  
    background-repeat: no-repeat;  
    height: 100vh;  
    margin: 0;    
        }  

        
 /* Media query para telas menores */  
 @media (max-width: 768px) {  
            body {  
                background-size: contain; /* Altera para 'contain' em telas menores */  
            }  
        }  

        @media (max-width: 480px) {  
            body {  
                background-size: cover; /* Retorna para 'cover' em telas muito pequenas */  
                background-attachment: fixed; /* Permite o efeito parallax, mas pode não funcionar em todos os dispositivos */  
            }  
        }  



/* Estilo padrão do link */
a {
  color: #0073e6; /* Cor padrão do link */
  text-decoration: none; /* Remove o sublinhado */
  font-weight: bold;
  transition: color 0.3s ease, background-color 0.3s ease; /* Suaviza a transição */
}

/* Estado hover: quando o mouse está sobre o link */
a:hover {
  color: #005bb5; /* Cor mais escura no hover */
  background-color: #e6f3ff; /* Fundo leve no hover */
  border-radius: 4px; /* Bordas arredondadas para o fundo */
}

/* Estado focus: quando o link é focado via teclado */
a:focus {
  outline: 2px dashed #005bb5; /* Borda de foco visível */
  outline-offset: 4px;
}

/* Estado active: quando o link é clicado */
a:active {
  color: #003d80; /* Cor ainda mais escura */
  background-color: #cce7ff; /* Fundo mais escuro */
}

/* Estado visited: para links já visitados */
a:visited {
  color: #551a8b; /* Cor roxa para links visitados */
}

.mensagem-titulo {
    font-size: 18px;
    font-weight: bold;
    color: #004080;
    margin-bottom: 5px;
    text-align: center;
}

.mensagem-informacoes {
    display: flex;
    align-items: center; /* Alinha verticalmente os itens */
    justify-content: space-between;
    text-align: center;
    font-family: sans-serif;
    
}


  .w3-quarter .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha o conteúdo no topo */
    align-items: center;
    background-color: white;
    padding: 10px;
    height: 100%; /* Mantém a altura igual para todas as colunas */
  }

  .w3-quarter img {
    max-width: 100%;
    height: auto;
  }

  /* Garante que todas as colunas na linha tenham a mesma altura */
  .w3-row-padding {
    display: flex;
    flex-wrap: wrap;
  }

  .w3-quarter {
    flex: 1 1 25%; /* Garante quatro colunas por linha */
    box-sizing: border-box;
    margin-bottom: 15px;
    max-width: 25%;
  }

  @media screen and (max-width: 1000px) {
    .w3-quarter {
      flex: 1 1 50%; /* Ajusta para duas colunas em telas médias */
      margin-bottom: 15px;
      max-width: 50%;
    }
  }

  @media screen and (max-width: 600px) {
    .w3-quarter {
      flex: 1 1 100%; /* Ajusta para uma coluna em telas menores */
      margin-bottom: 15px;
      max-width: 100%;
    }
  }



/*Estilo para recursos pg-capela*/

.justificar {  
    text-align: justify; /* Justifica o texto */  
    text-justify:inter-word;
    padding: 20px; /* Adiciona padding para um melhor espaçamento do texto */  
}

.w3-display-middle-custom {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      text-align: center; /* Mantém o texto centralizado */
      padding: 0 15px; /* Adiciona margem interna para evitar que o texto toque as bordas */
    }
	


  .w3-third .content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Alinha o conteúdo no topo */
    align-items: center;
    background-color: white;
    padding: 10px;
    height: 100%; /* Mantém a altura igual para todas as colunas */
  }

  .w3-third img {
    max-width: 100%;
    height: auto;
  }


  .w3-third {
    flex: 1 1 33.33%; /* Garante três colunas por linha */
    box-sizing: border-box;
    max-width: 33.33%;
  }
  
  @media screen and (max-width: 900px) {
    .w3-third {
      flex: 1 1 50%; /* Ajusta para duas colunas em telas médias */
      max-width: 50%;
    }
  }

  @media screen and (max-width: 500px) {
    .w3-third {
      flex: 1 1 100%; /* Ajusta para uma coluna em telas menores */
      max-width: 100%;
    }
  }
  
 /* Create a Parallax Effect */
.bgimg-1, .bgimg-2, .bgimg-3 {
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /*background-size: 75% 50%;*/
}

/* First image (Logo. Full height) */
.bgimg-1 {
  background-image: url('../images/2025-doissagradoscoracoes.jpeg');
  min-height: 100%;
}

/* Second image (Portfolio) */
.bgimg-2 {
  background-image: url("../images/2025-doissagradoscoracoes.jpeg");
  min-height: 400px;
}

/* Third image (Contact) */
.bgimg-3 {
  background-image: url("../images/2025-doissagradoscoracoes.jpeg");
  min-height: 400px;
}

.w3-wide {letter-spacing: 10px;}
.w3-hover-opacity {cursor: pointer;}

/* Turn off parallax scrolling for tablets and phones */
@media only screen and (max-device-width: 1600px) {
  .bgimg-1, .bgimg-2, .bgimg-3 {
    background-attachment: scroll;
    min-height: 400px;
  }
}


.jc {
    color: #252502;
    font-family: 'Sofia', cursive;
    font-size: 16px;
    line-height: 22px;
}

.vassula {
  color: #4129df;
  font-family: 'Sofia', cursive;
  font-size: 16px;
  font-style: italic;
  line-height: 22px;
}

/*Efeito na imagem*/
.content {  
            position: relative; /* Para permitir o posicionamento absoluto do texto */  
            overflow: hidden; /* Certifique-se de que o texto não transborde do container */  
        }  

        /* Efeito na imagem */  
        .content img {  
            transition: transform 0.3s, filter 0.3s; /* Animação suave */  
            width: 100%; /* Garante que a imagem ocupe todo o espaço */  
        }  

        .content:hover img {  
            transform: rotate(5deg); /* Inclina a imagem */  
            filter: brightness(70%); /* Escurece a imagem */  
        }  

/* Efeito no texto */  
/*.mensagem-titulo {  
            position: absolute; /* Posiciona o texto dentro do container */  /*
            bottom: 0; /* Inicialmente na parte inferior */  /*
            left: 0; /* Alinhado à esquerda */  /*
            right: 0; /* Alinhado à direita */  /*
            transition: transform 0.3s; /* Animação suave para o movimento */  /*
            transform: translateY(0); /* Inicialmente, sem transformação */  /*
            color: rgb(40, 7, 7); /* Cor do texto */  /*
            text-align: center; /* Centraliza o texto */ /*  
        }  

        .content:hover .mensagem-titulo {  
            transform: translateY(-20px); /* Move o texto para cima */  /*
        } 
  











/* Estilo do menu barra de opções */
.menu-bar {
    display: flex;
    align-items: center;
    /*justify-content: space-between; /* Alinha os itens nas extremidades */
    justify-content: flex-start; /* Alinhamento inicial */
    background-color: #004080;
    color: white;
    padding: 5px;
    gap: 10px; /* Espaçamento ajustável entre os itens */
  }

  .menu-bar .menu-item {
    padding: 5px 10px; /* Ajuste do espaçamento horizontal */
    cursor: pointer;
  }

  .menu-bar a {
    color: white;
    text-decoration: none;
  }

  .menu-bar a:hover {
    color: #aad4ff;
  }

  .social-icons {
      margin-left: auto; /* Move as mídias sociais para a direita */
      display: flex;
    gap: 10px;
  }

  .social-icons a {
    color: white;
    font-size: 20px;
    text-decoration: none;
  }

  .social-icons a:hover {
    color: #aad4ff;
  }

  /* Estilo do menu vertical para telas menores */
  .vertical-menu {
    display: none; /* Oculto por padrão */
    background-color: #004080;
    padding: 10px;

    position: fixed;
    top: 50px;
    left: 10px;
    z-index: 1000;
    width: 200px;
    border: 1px solid #003366;
  }

  .vertical-menu a {
    display: block;
    color: white;
    padding: 8px;
    text-decoration: none;
  }

  .vertical-menu a:hover {
    background-color: #0059b3;
  }

/* Botão do menu */
.menu-toggle {
  display: none;
    background-color: transparent;
    border: none;
    color: rgb(38, 4, 4);
    font-size: 24px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
  }

  /* Tornar o menu vertical visível em telas menores */
  @media screen and (max-width: 768px) {
    .menu-bar {
      display: none; /* Oculta o menu horizontal */
    }


    .menu-toggle {
      display: block; /* Exibe o botão de menu */
    }
    
  }
/*nota este menu possui um código script que será posto aqui comentando, para conhecimento*/
/*<script>
function toggleMenu() {
const menu = document.querySelector('.vertical-menu');
menu.style.display = menu.style.display === 'block' ? 'none' : 'block';
}
</script>*/