@import url(responsiveSection1.css);
@import url(responsiveSection2.css);
@import url(responsiveSection3.css);
@import url(flipBody.css);
@import url(tooltipSection.css);
@import url(sobreJoel.css);
@import url(bibliografia.css);
@import url(premios.css);
@import url(contato.css);
@import url(galeria.css);
@import url(blog.css);
@import url(cookiesPolitics.css);

html{
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  width: 100%; 
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  background-image: url("../img/background_4.png");
  background-size:cover; /* Para cobrir todo o espaço disponível */
  background-repeat: repeat; /* Para evitar a repetição da imagem */
}

@media (max-width: 999px) { 
  body {
    display: flex;
    flex-direction: column;
    width: 100%; 
    min-height: 100vh;
    background-image: url("../img/background_4.png");
    background-color:antiquewhite
  }
}

main {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    justify-content: center;
    flex: 1;
    box-sizing: border-box;
  }
  
  /*Aqui começam as configurações do Header*/ 

h1{
    font-size: 1.7rem;
    text-align: center;
  }
    
nav{
    display:flex;
    justify-content: space-evenly;
    align-items: center;
    font-family:arial;
    background: linear-gradient(to right, #DAA520, #D2691E);
    min-height: 150px;
    margin: 0;
    padding: 0;
    padding-left: 10rem;
    padding-right: 5rem;
}
  
@media (max-width: 999px){
    nav{
      display:flex;
      align-items: center;
      font-family:arial;
      background: linear-gradient(to right, #DAA520, #D2691E);
      min-height: 100px;
      margin: 0;
      padding: 0;
    }
  
    h1{
        padding-top: 5px;
        padding-left: 10px;
        align-items: center;
        font-size: 1.4rem;
        text-align: center;
    }
  }
  
  h5{
    padding-top: 1rem;
  }
  
  p {
    line-height: 1.5; /* Controla o espaçamento entre as linhas dentro do <p> */
    margin: 0; /* Remove a margem padrão entre os parágrafos */
  }
  
  
  a#nav-logo {
    /* Sem a definição de animation: none */
    transition: transform 0.3s ease; /* Transição suave para o transform */
  }
  
  a#nav-logo:hover {
    animation: pulse 2s infinite; /* Repetir a animação enquanto houver hover */
  }
  
  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1); /* Aumenta 10% */
    }
  }
  
  .logo {
    animation: pulse 2s infinite; /* Aplicar ao logo, repetindo infinitamente */
  }
  
  a.nav{
      text-decoration: none;
      text-overflow: ellipsis;
      color: #fff;
      justify-content: center;
    }
  
  nav a:hover{
    text-decoration: none;
  }
  
  #logo-img{
      width: 10rem; /* ou qualquer valor desejado */
      height: 0 auto; /* deve ser igual à largura */
      border-radius: 50%;
      object-fit: cover; /* para manter a proporção da imagem */
      border: solid 2px #D2691E;
  }
  
  .nav-list{ 
    list-style: none;
    display: flex;
    padding-right: 5rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    max-width: 1300px;
    
  }
  
  .nav-list li{
    letter-spacing: 3px;
    margin-left: 32px;
    padding: 5px 10px;
    border-radius: 5px;
    text-align: center;
  }

  .nav-list li:hover{
    background-color: #D2691E;
  }
  
  .mobile-menu{
    display:none;
    cursor: pointer;
  
  }
  
  .mobile-menu div{
    width: 32px;
    height: 2px;
    background: #ffff;
    margin: 8px;
  }
  
  @media (max-width: 999px) {
    body {
      overflow-x: hidden;
    }
  
    .logo{
      font-size: 24px;
      text-transform: uppercase;
      letter-spacing: 7px;
      display:inline;
      text-align: center;
      margin-left: 3rem;
    }  
  
  
  #logo-img{
    display: none;
  }
  
  .nav-list {
      position: absolute;
      z-index:1100;
      top: 6rem;
      right: 0;
      width: 100%;
      min-height: 100vh;
      overflow: hidden;
      overflow-x: hidden;
      background: linear-gradient(to right, #DAA520, #D2691E);
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      transform: translateX(100%);
      transition: transform 0.3s ease-in;
      padding: 0;
    }
  
  .nav-list li {
      margin-left: 0;
      opacity: 0;
    }
  .mobile-menu {
      display: block;
    }
  }
  .nav-list.active {
    transform: translateX(0);
  }
  
  @keyframes navLinkFade {
    from {
      opacity: 0;
      transform: translateX(50px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  .mobile-menu.active .line1 {
    transform: rotate(-45deg) translate(-8px, 8px);
  }
  
  .mobile-menu.active .line2 {
    opacity: 0;
  }
  
  .mobile-menu.active .line3 {
    transform: rotate(45deg) translate(-5px, -7px);
  }

  .subNav{
      align-items: center;
      justify-content: center;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.2);
      margin-top: 0;
      margin-bottom: 1rem;
      padding: 10px;
      text-align: center;
      font-family: Georgia, 'Times New Roman', Times, serif;
    }

  @media (max-width: 999px){
    .subNav{
      align-items: center;
      justify-content: center;
      background-color: rgba(0, 0, 0, 0.2);
      margin-top: 0;
      padding: 10px;
      text-align: center;
      font-family: Georgia, 'Times New Roman', Times, serif;
    }
    .subNav h3{
      color: #fff;
      font-size: 1.2rem;
      text-shadow: 2px 2px 0px gray;
    }
  }
  /*Aqui terminam as configurações do Header*/ 
  
  /* aqui começam as configurações de footer*/
  footer {
    color: #fff;
    display: flex;
    flex-direction: column; /* Mantenha a direção como coluna para o footer */
    align-items: center;    /* Centraliza o conteúdo */
    justify-content: space-evenly;
    font-family: Arial;
    background: linear-gradient(to right, #DAA520, #D2691E);
    min-height: 500px;
    margin-top: 2rem;
    padding: 3rem;
}

.footer-content {
    width: 90%;               /* Assegura que ocupem 100% da largura do footer */
}

.contato {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial;
    text-align: center;
}

.botao-cookie{
    display: inline-block;
    padding: 5px 10px;
    color: white;
    background-color:transparent;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s;
    box-sizing: border-box;
}

.botao-cookie:hover{
    background-color: #D2691E;
    color: white;
    text-decoration: none;
    box-sizing: border-box;    
}

.redes-sociais {
    display: flex;
    gap: 2rem; /* Espaçamento entre os ícones */
  }
  
  .social-icon {
    text-decoration: none;
    font-size: 6rem; /* Tamanho do ícone */
    color: #dcdcdc; /* Cor padrão */
    transition: color 0.3s; /* Efeito de transição suave */
  }

  @media(max-width: 999px){
    .social-icon{
        font-size: 4rem;
    }
  }
  
  .social-icon.linkedin:hover {
    color: #0A66C2; /* Cor para o hover do LinkedIn */
  }
  
  .social-icon.instagram:hover {
    color: #C13584; /* Cor para o hover do Instagram */
  }
  
  .social-icon.whatsapp:hover {
    color: #25D366; /* Cor para o hover do WhatsApp */
  }

.copyright {
    margin-top: 25px; /* Espaço acima do copyright */
    border-top: solid 1px #fff;
    padding-top: 1rem;
    text-align: center; /* Centraliza o texto do copyright */
}

/* Responsividade */
@media (max-width: 999px) {
    .footer-content {
        flex-direction: column; /* Em telas menores, empilhe as divs em coluna */
        align-items: center; /* Centraliza as divs */
    }
    
    .contato, .faq-container {
        width: 100%; /* Em telas menores, ocupe 100% da largura */
        max-width: none; /* Remove a limitação de largura */
    }
}

.contato {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: Arial;
    text-align: center;
}

.redes-sociais {
    display: flex;
    gap: 2rem; /* Espaçamento entre os ícones */
  }
  
  .social-icon {
    text-decoration: none;
    font-size: 7rem; /* Tamanho do ícone */
    color: #dcdcdc; /* Cor padrão */
    transition: color 0.3s; /* Efeito de transição suave */
  }

  @media(max-width: 999px){
    .social-icon{
        font-size: 4rem;
    }
  }
  
  .social-icon.linkedin:hover {
    color: #0A66C2; /* Cor para o hover do LinkedIn */
  }
  
  .social-icon.instagram:hover {
    color: #C13584; /* Cor para o hover do Instagram */
  }
  
  .social-icon.whatsapp:hover {
    color: #25D366; /* Cor para o hover do WhatsApp */
  }

  #img-link {
    display: block;
    margin: 20px auto;
    width: 80px;
    height: auto;
  }
  
  #img-link2 {
    display: block;
    margin-left: 5rem;
    width: 250px; /* Largura total da imagem */
    height: 250px; /* Mantém a proporção */
    border-radius: 50%; /* Bordas arredondadas */
    object-fit: cover;
  }
  
  @media (max-width: 820px){
    #img-link {
      display: block;
      width: 50px;
      height: auto;
    }
  }
  
  .botao-container {
    position: fixed;
    max-width:200px;
    bottom: 40px; /* ajuste a posição vertical conforme necessário */
    right: 40px; /* ajuste a posição horizontal conforme necessário */
    z-index: 1;
    text-align: center;
  }
  
  .botao-container a{
    text-decoration: none;
    font-weight: bold;
    font-size: 1.5rem;
  }

  @media (max-width: 999px){
    .botao-container {
      display: none;
      position: fixed;
      margin: 0;
      padding: 0;
      z-index: 1;
    }
  } 

  #cookie-banner{
    position: fixed;
    text-align: center;
    width: 100%;
    bottom: 0;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    z-index: 1000;
    display: none; /* Inicialmente escondido */
  }
  
  .btn-cookie {
    margin: 0.5rem; /* Espaçamento entre os botões */
    padding: 5px 10px; /* Tamanho do botão */
    border: none; /* Para remover a borda padrão */
    border-radius: 5px; /* Cantos arredondados */
    background-color: #25D366; /* Cor do fundo dos botões */
    color: #fff; /* Cor do texto */
    cursor: pointer; /* Mostrar que o botão é clicável */
  }

  @media(max-width: 999px){
    #cookie-banner{
      position: fixed;
      text-align:center;
      display: flex;
      flex-direction: column;
      width: 100%;
      bottom: 0;
      background: rgba(255, 255, 255, 0.9);
      padding: 10px;
      z-index: 1000;
      display: none; /* Inicialmente escondido */
    }
  
    .btn-cookie{
    margin: 5px; /* Espaçamento entre os botões */
    padding: 5px 10px; /* Tamanho do botão */
    border: none; /* Para remover a borda padrão */
    border-radius: 4px; /* Cantos arredondados */
    background-color: #25D366; /* Cor do fundo dos botões */
    color: #fff; /* Cor do texto */
    cursor: pointer; /* Mostrar que o botão é clicável */
    }
  }
  
  .btn-cookie:hover{
    background-color: #008000; /* Cor mais escura no hover */
  }