.home {
    background-image: url('https://d335luupugsy2.cloudfront.net/cms/files/435954/1709563900/$08ef5oq6x7yx')!important; /* Mantém o background anterior */
    background-size: cover; /* Faz a imagem cobrir todo o espaço disponível */
    background-position: center; /* Centraliza a imagem */
    height: 80vh; /* Define a altura da seção como 100% da altura da janela de visualização */
    display: flex; /* Define a seção como um flex container */
    justify-content: center; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    color: white; /* Cor do texto */
     /* Define a fonte */
  }

@media (min-width: 768px) {


  .content {
    display: flex; /* Define o conteúdo como um flex container */
    align-items: center; /* Centraliza os itens verticalmente */
  }

  .text {
    text-align: center; /* Alinha o texto à esquerda */
    margin-right: 0; /* Adiciona uma margem à direita para separar do conteúdo à direita */
  }

  .t1, .t2 {
    margin: 0; /* Remove margens padrão dos cabeçalhos */
  }

  .t1 {
    font-size: 2em; /* Tamanho da fonte */
  }

  .t2 {
    font-size: 6em; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    color: #c9d200;
  }

  .image {
    width: 200px; /* Largura da imagem */
    height: auto; /* Altura automática para manter a proporção */
  }

  .p_lt {
    padding-right: 10%;
  }

  .titulo_tempo {
    background-color: #e7e6e6; 
    height: 10vh; /* Define a altura da seção como 100% da altura da janela de visualização */
    display: flex; /* Define a seção como um flex container */
    justify-content: center; /* Centraliza os itens horizontalmente */
    color: white; /* Cor do texto */
     /* Define a fonte */
    justify-content: center; /* Centraliza os elementos verticalmente */
  }

  .progresso {
    text-align: center;
    margin-top: 50px;
  }
  
  .progresso h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
 
  .progresso-concluido {
    height: 100%;
    background-color: #00ae9d;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 30px;
    color: white;
    font-weight: bold;
  }
  
  
  .ano_tempo {
    background-color: #e7e6e6; 
    height: 10vh; /* Define a altura da seção como 100% da altura da janela de visualização */
    display: flex; /* Define a seção como um flex container */
    justify-content: center; /* Centraliza os itens horizontalmente */
    color: white; /* Cor do texto */
     /* Define a fonte */
    justify-content: center; /* Centraliza os elementos verticalmente */
  }

  .progress {
    background-color: #e7e6e6; 
    height: 5vh; /* Define a altura da seção como 100% da altura da janela de visualização */
    display: flex; /* Define a seção como um flex container */
    justify-content: center; /* Centraliza os itens horizontalmente */
    color: white; /* Cor do texto */
     /* Define a fonte */
    justify-content: center; /* Centraliza os elementos verticalmente */
  }

  .content {
    display: flex; /* Define o conteúdo como um flex container */
    align-items: center; /* Centraliza os itens verticalmente */
  }

  .t3 {
    font-size: 2em; /* Tamanho da fonte */
    font-weight: bold; /* Negrito */
    color: #00ae9d;
    padding-top: 6vh;
  }

  .etapa_tempo {
    background-color: #e7e6e6;
    display: flex;
    color: black;
    
    padding-bottom: 20px;
 
}

  .linha_tempo {
    background-color: #e7e6e6;
    display: flex;
    color: black;
    
    justify-content: left; /* Centraliza os itens horizontalmente */
    align-items: center; /* Centraliza os itens verticalmente */
    padding-left: 15%;
    padding-bottom: 2%;
    line-height: 2;
}



.linha_tempo_mobile {
  display: none;
}


.etapa {
    font-size: 1.5rem;
    font-weight: bold;
    color: #003641;
    margin: 0;
    padding-left: 15%;
    padding-top: 3%;
    padding-bottom: 10px;

}




  .btn_video {
    background-color: #00ae9d;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 10px;
  }


.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(52, 52, 52);
  background: linear-gradient(
    90deg,
    rgba(52, 52, 52, 1) 0%,
    rgba(97, 119, 255, 1) 0%,
    rgba(33, 57, 189, 1) 100%
  );
}
 
.wrapper a {
  display: inline-block;
  text-decoration: none;
  padding: 15px;
  background-color: #fff;
  border-radius: 3px;
  text-transform: uppercase;
  color: #00ae9d;
  font-family: "Roboto", sans-serif;
}

.modal {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 54, 65, 0.7);
  transition: all 0.4s;
  
}
 
.modal:target {
  visibility: visible;
  opacity: 1;
}

.modal__cont {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  background: #fff;
  padding: 1em;
  overflow-y: auto; /* Adicionando scroll se necessário */
}

.modal__close {
  position: absolute;
  top: 15px;
  right: 30px;
  color: #ffffff;
  font: 1rem;
  text-decoration: none;
}

.modal__close:hover {

  color: #c9d200;
  font: 1.2rem;
 
}

.modal__footer {
  text-align: right;
}

.modal__footer-btn-close {
  padding: 10px;
  text-decoration: none;
  background-color: #00ae9d;
  color: #fff;
  border-radius: 3px;
}

.modal__footer-btn-close:hover {

  background-color: #7db81c;
  color: #fff;

}
 
.footer {
  text-align: right;
  margin-top: 50px;
}
 
.close {
  position: absolute;
  top: 30px;
  right: 30px;
  color: #c9d200; /* Cor do ícone do botão de fechar */
  font-size: 24px; /* Tamanho do ícone */
  text-decoration: none;
  z-index: 9999; /* Certifique-se de que o botão de fechar esteja acima de tudo */
}

.close:hover {
  color: #19b619; /* Cor do ícone do botão de fechar ao passar o mouse */
}
 
.footer-btn-close {
  width: 150px;
  padding: 10px;
  text-decoration: none;
  background-color: #00ae9d;
  color: #fff;
  border-radius: 3px;
}

.b_lt{
  font: 3rem;
  color: #00ae9d;
}

}


@media (min-width: 950px) {

  .progresso-bar {
    width: 900px;
    height: 30px;
    background-color: #f0f0f0;
    border-radius: 5px;
    position: relative;
  }

  .ano {
    font-size: 2rem;
    font-weight: bold;
    color: #7474748f;   
    padding-top: 3%;
  }

  .titulo_tempo {
    background-color: #e7e6e6; 
    height: 10vh; /* Define a altura da seção como 100% da altura da janela de visualização */
    display: flex; /* Define a seção como um flex container */
    justify-content: center; /* Centraliza os itens horizontalmente */
    color: white; /* Cor do texto */
     /* Define a fonte */
    justify-content: center; /* Centraliza os elementos verticalmente */
  }

}

@media (min-width: 801px) and (max-width: 949px) {

  .progresso-bar {
    width: 700px;
    height: 30px;
    background-color: #f0f0f0;
    border-radius: 5px;
    position: relative;
  }

  .ano {
    font-size: 2rem;
    font-weight: bold;
    color: #7474748f;   
    padding-top: 10%;
    padding-bottom: 15%;
  }

  .titulo_tempo {
    background-color: #e7e6e6; 
    height: 10vh; /* Define a altura da seção como 100% da altura da janela de visualização */
    display: flex; /* Define a seção como um flex container */
    justify-content: center; /* Centraliza os itens horizontalmente */
    color: white; /* Cor do texto */
     /* Define a fonte */
    justify-content: center; /* Centraliza os elementos verticalmente */
  }
  
}

@media (min-width: 768px) and (max-width: 800px) {

  .progresso-bar {
    width: 600px;
    height: 30px;
    background-color: #f0f0f0;
    border-radius: 5px;
    position: relative;
  }

  .ano {
    font-size: 2rem;
    font-weight: bold;
    color: #7474748f;   
    padding-top: 10%;
    padding-bottom: 15%;
  }
  
  .progresso {
    text-align: center;
    margin-top: 50px;
  }
  
  .progresso h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
 
  .progresso-concluido {
    height: 100%;
    background-color: #00ae9d;
    border-radius: 5px;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 30px;
    color: white;
    font-weight: bold;
  }
  
}



  @media (min-width: 500px) and (max-width: 767px) {

    .progresso-bar {
      width: 400px;
      height: 30px;
      background-color: #f0f0f0;
      border-radius: 5px;
      position: relative;
    }

    .progresso {
      text-align: center;
      margin-top: 50px;
    }
    
    .progresso h2 {
      font-size: 24px;
      margin-bottom: 10px;
    }
    
   
    .progresso-concluido {
      height: 100%;
      background-color: #00ae9d;
      border-radius: 5px;
      position: absolute;
      top: 0;
      left: 0;
      line-height: 30px;
      color: white;
      font-weight: bold;
    }
    

    .ano {
      font-size: 2rem;
      font-weight: bold;
      color: #7474748f;   
      padding-top: 1%;
      padding-bottom: 10%;
    }

    

}



@media (max-width: 767px) {

  .home {
      background-image: url('Imagens/BG_home.gif'); /* Mantém o background anterior */
      background-size: cover; /* Faz a imagem cobrir todo o espaço disponível */
      background-position: center; /* Centraliza a imagem */
      height: 50vh; /* Define a altura da seção como 100% da altura da janela de visualização */
      display: flex; /* Define a seção como um flex container */
      justify-content: center; /* Centraliza os itens horizontalmente */
      align-items: center; /* Centraliza os itens verticalmente */
      color: white; /* Cor do texto */
       /* Define a fonte */
    }
  
    .content {
      display: flex; /* Define o conteúdo como um flex container */
      align-items: center; /* Centraliza os itens verticalmente */
    }
  
    .text {
      text-align: center; /* Alinha o texto à esquerda */
      margin-right: 0; /* Adiciona uma margem à direita para separar do conteúdo à direita */
    }
  
    .t1, .t2 {
      margin: 0; /* Remove margens padrão dos cabeçalhos */
    }
  
    .t1 {
      font-size: 1em; /* Tamanho da fonte */
    }
  
    .t2 {
      font-size: 4em; /* Tamanho da fonte */
      font-weight: bold; /* Negrito */
      color: #c9d200;
    }
  
    .image {
      width: 150px; /* Largura da imagem */
      height: auto; /* Altura automática para manter a proporção */
    }
  
  
  
    .titulo_tempo {
      background-color: #e7e6e6; 
      height: 15vh; /* Define a altura da seção como 100% da altura da janela de visualização */
      display: flex; /* Define a seção como um flex container */
      justify-content: center; /* Centraliza os itens horizontalmente */
      color: white; /* Cor do texto */
       /* Define a fonte */
      justify-content: center; /* Centraliza os elementos verticalmente */
      
    }
  
    .ano_tempo {
      background-color: #e7e6e6; 
      height: 5vh; /* Define a altura da seção como 100% da altura da janela de visualização */
      display: flex; /* Define a seção como um flex container */
      justify-content: center; /* Centraliza os itens horizontalmente */
      color: white; /* Cor do texto */
       /* Define a fonte */
      justify-content: center; /* Centraliza os elementos verticalmente */
    }
    .content {
      display: flex; /* Define o conteúdo como um flex container */
      align-items: center; /* Centraliza os itens verticalmente */
    }
  
    .t3 {
      
      color: #00ae9d;
      font-size: 2em; /* Tamanho da fonte */
      font-weight: bold; /* Negrito */
      color: #00ae9d;
      padding-top: 6vh;
      text-align: center;
      margin-left: 8%;
      margin-right: 8%;

    }
  
    .etapa_tempo {
      background-color: #e7e6e6;
      display: flex;
      color: black;
      
      padding-bottom: 20px;
   
  }
  
  .modal_mobile {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 54, 65, 0.7);
    transition: all 0.4s;
  }
   
  .modal:target {
    visibility: visible;
    opacity: 1;
  }

  
.modal_mobile:target {
  opacity: 1;
  visibility: visible;
}

.modal__cont {
  position: relative;
  max-width: 90%;
  max-height: 90%;
  background: #fff;
  padding: 1em;
  overflow-y: auto; /* Adicionando scroll se necessário */
}

.modal__close {
  position: absolute;
  top: 10px;
  right: 10px;
  color: #ffffff;
  text-decoration: none;
}

.modal__footer {
  text-align: right;
}

.modal__footer-btn-close {
  padding: 10px;
  text-decoration: none;
  background-color: #00ae9d;
  color: #fff;
  border-radius: 3px;
}
  
  
    .linha_tempo {
      display: none;
    }

    .linha_tempo_mobile {
      background-color: #e7e6e6;
      display: flex;
      flex-direction: column; /* Empilhar elementos verticalmente */
      align-items: center; /* Centralizar os itens horizontalmente */
      color: black;
      
      justify-content: left; /* Centraliza os itens horizontalmente */
      padding-left: 15%;
      padding-bottom: 10%;
      line-height: 2;
    }
 
  
  
  .etapa {
      font-size: 1.5rem;
      font-weight: bold;
      color: #003641;
      margin: 0;
      padding-left: 15%;
      padding-top: 3%;
      padding-bottom: 10px;
  
  }
  
  .ano_tempo {
    padding-bottom: 5%;
  }


  
  .btn_video {
    background-color: #00ae9d;
    color: #fff;
    font-weight: 600;
    padding: 10px;
    margin-top: 10px;
    border: none;
    border-radius: 10px;
  }

  .p_mobile{
    margin-right: 5%;
  }

  .b_lt{
    font: 3rem;
    color: #00ae9d;
  }
  
  }