/* Configuração global */
* {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}

.merriweather-light {
    font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: normal;
  }
  
  .merriweather-regular {
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-style: normal;
  }
  
  .merriweather-bold {
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-style: normal;
  }
  
  .merriweather-black {
    font-family: "Merriweather", serif;
    font-weight: 900;
    font-style: normal;
  }
  
  .merriweather-light-italic {
    font-family: "Merriweather", serif;
    font-weight: 300;
    font-style: italic;
  }
  
  .merriweather-regular-italic {
    font-family: "Merriweather", serif;
    font-weight: 400;
    font-style: italic;
  }
  
  .merriweather-bold-italic {
    font-family: "Merriweather", serif;
    font-weight: 700;
    font-style: italic;
  }
  
  .merriweather-black-italic {
    font-family: "Merriweather", serif;
    font-weight: 900;
    font-style: italic;
  }

  


.lora-bold {
  font-family: "Lora", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
  

html, body, header {
    margin: 0;
    padding: 0;
    width: 100vw; 
    height: 100%; 
    overflow-x: hidden;
}

/* Estilo para o #parte1 */
#parte1 {
    background-image: url(/imagens/master-background-1.png); /* Caminho da imagem 1 */
    background-size: cover; /* Garante que a imagem cubra a área sem distorção */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-position: center; /* Centraliza a imagem */
    height: 100vh; /* Altura de 80% da altura da tela */
    margin: 0; /* Remove margens */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: center;
    padding: 0%;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
}

.Lidere {
    color: white; /* Cor branca */
    font-size: 2.3em; /* Ajusta o tamanho da fonte */
    margin: 0; /* Remove margens indesejadas */
    margin-left: 20%;
    padding: 10px 20px; /* Adiciona espaço ao redor do texto */
    transform: translateX(-20%); /* Move o texto um pouco para a esquerda do centro */
    text-align: center; /* Alinha o texto à esquerda */
    margin-top: 5%;
}

.Descubra{
    color: white;
    margin-left: 10%;
    margin-top: 0%;
    font-size: 1.5vw;
}

.Gratuita {
    color: yellow;
    font-size: 2em;
    margin-left: 7%;
    text-align: left;
    margin-top: 10vh;
    
}

.Botão1 {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    margin-left: 6%;
    margin-top: 2vh;
    width: 27%;
      
}
.Botão1 a {
    text-decoration: none;
    color: white;
}
button {
    padding: 15px 30px; /* Adiciona preenchimento interno */
    border: none; /* Remove bordas */
    border-radius: 10px; /* Bordas arredondadas */
    background-color: #5e4ce6; /* Cor azul para o botão */
    color: white; /* Cor branca para o texto */
    font-size: 1.5em; /* Ajusta o tamanho da fonte para combinar com a frase */
    cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
    text-align: center; /* Centraliza o texto no botão */
    width: 100%; /* Botão se ajusta ao tamanho do texto */
}

button:hover {
    background-color: #0056A3; /* Azul mais escuro ao passar o mouse */
    transition: background-color 0.3s ease; /* Suaviza a transição de cor */
}

/* Efeito ao clicar no botão */
button:active {
    background-color: #003E73; /* Azul ainda mais escuro ao clicar */
    transform: scale(0.98); /* Efeito de "pressionado" */
    transition: transform 0.1s ease; /* Suaviza o efeito */
}

.Saiba {
    color: white; /* Define a cor branca */
    font-size: 2em; /* Mantém o tamanho da fonte */
    
    margin-top: 10vh; /* Define a altura na tela, ajustando conforme necessário */
    margin-left: 55vw; /* Afasta o texto da borda direita */
    text-align: right; /* Alinha o texto à direita */
}

.Saiba img {
    margin-bottom: 20%; /* Espaço entre o texto e a imagem */
    margin-top: 0vh;
    margin-right: 4vw;
    height: 18vh; /* Mantém a proporção da imagem */
    
}

.Marco {
    display: flex; /* Flexbox para organizar o conteúdo */
    justify-content: flex-end; /* Move a imagem para a direita */
    align-items: flex-start; /* Alinha a imagem ao topo */
    width: 100%; /* Garante que o container ocupe a largura total */
    height: 100%; /* Permite ajuste automático da altura */
    margin-top: 0; /* Remove margens que podem empurrar a imagem para fora da tela */
    z-index: 1;
    position: relative;
}

.Marco img {
    display: block; /* Garante que a imagem seja renderizada como bloco */
    height: 80vh;
    width: auto; /* Mantém a proporção da imagem */
    object-fit: contain; /* Evita distorções na imagem */
    margin-right: 2vw; /* Ajusta o espaçamento à direita */
    z-index: 2;
    position: relative;
    margin-top: -87vh;
}



.Data {
    background-color: goldenrod;
    color: white;
    z-index: 1;
    position: relative;
    font-size: 2em;
    top: -55vh ;
    left: 50vw;

}


/* Estilo para a #parte2 */
#parte2 {
    background-image: url(/imagens/master-background-2.png); /* Caminho da imagem 2 */
    background-size: cover; /* Garante que a imagem cubra a área sem distorção */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-position: center; /* Centraliza a imagem */
    height: 100vh; /* Altura de 80% da altura da tela */ 
    margin: 0; /* Remove margens */
    display: flex;
    flex-direction: column; /* Organiza as classes em linha */
    justify-content: space-between; /* Espaço entre os itens */
    align-items: center; /* Alinha os itens na parte superior */
    padding: 0%;
    position: relative; /* Adiciona contexto de posicionamento para os filhos */
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
}

/* Estilo para o h1 da classe .ps */
/* Título no topo */
.ps {
    text-align: center; /* Centraliza o texto */
    color: red; /* Cor do texto */
    font-size: 2.5em; /* Ajusta o tamanho da fonte */
    margin: 0; /* Remove margens indesejadas */
    margin-top: 5vh;
    padding: 0; /* Remove preenchimento */
    width: 90%; /* Ocupa 90% da largura do viewport */
}

/* Container para os 4 blocos (Produtividade, Práticas, Pioneirismo, Prosperidade) */
.container-4ps {
    display: flex;
    flex-wrap: wrap; /* Permite que os elementos fiquem em linhas diferentes */
    justify-content: space-evenly; /* Espaço uniforme entre os itens */
    align-items: flex-start; /* Alinha os itens ao topo */
    width: 100%; /* Ocupa toda a largura do viewport */
    gap: 5vh; /* Espaço entre os elementos vertical e horizontal */
    margin-top: 15vh;
}

/* Estilo para cada bloco (Produtividade, Práticas, Pioneirismo, Prosperidade) */
.Produtividade, .Práticas, .Pioneirismo, .Prosperidade {
    text-align: center; /* Centraliza o texto */
    font-size: 25px;
    width: 45%; /* Cada bloco ocupa 45% da largura do viewport (lado a lado) */
    margin: 0; /* Remove margens extras */
}

/* Estilo do botão */
.Botão2 {
    margin: 2vh 0; /* Espaçamento vertical */
    text-align: center; /* Centraliza o botão */
    width: 40vw; /* Ajusta o tamanho do botão */
    height: auto;
}

.Botão2 a {
    text-decoration: none;
    color: white;
}

button {
    padding: 10px 34px; /* Adiciona preenchimento interno */
    border: none; /* Remove bordas */
    border-radius: 10px; /* Bordas arredondadas */
    background-color: #5e4ce6; /* Cor azul para o botão */
    color: white; /* Cor branca para o texto */
    font-size: 2.0em; /* Ajusta o tamanho da fonte para combinar com a frase */
    cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
    text-align: center; /* Centraliza o texto no botão */
}

button:hover {
    background-color: #0056A3; /* Azul mais escuro ao passar o mouse */
    transition: background-color 0.3s ease; /* Suaviza a transição de cor */
}

/* Efeito ao clicar no botão */
button:active {
    background-color: #003E73; /* Azul ainda mais escuro ao clicar */
    transform: scale(0.98); /* Efeito de "pressionado" */
    transition: transform 0.1s ease; /* Suaviza o efeito */
}

/* Data abaixo alinhada com o botão */
.Data2 {
    background-color: goldenrod;
    color: white;
    font-size: 2em;
    padding: 10px;
    text-align: center;
    width: auto; /* Ajusta o tamanho conforme o conteúdo */
    margin: 0 auto; /* Centraliza horizontalmente */
    margin-bottom: 3vh;
}

#parte3 {
    background-image: url(/imagens/master-background-3.png); /* Caminho da imagem 1 */
    background-size: cover; /* Garante que a imagem cubra a área sem distorção */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-position: center; /* Centraliza a imagem */
    height: 120vh; /* Altura de 80% da altura da tela */
    margin: 0; /* Remove margens */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0%;
    width: 100vw;
    position: relative;
    min-height: 100vh;
    justify-content: space-between;
}

.Pq {
    text-align: center; /* Centraliza o texto */
    color: red; /* Cor do texto */
    font-size: 2.5em; /* Ajusta o tamanho da fonte */
    margin: 0; /* Remove margens extras */
    padding: 0; /* Remove preenchimento */
    width: 90%; /* Ocupa 90% da largura do viewport */
    margin-top: 37vh; /* Margem superior de 27% */
}

.Container-Pq {
    display: flex; /* Organiza os elementos em linha */
    flex-direction: row; /* Garante que fiquem lado a lado */
    justify-content: space-evenly; /* Espaço uniforme entre os itens */
    align-items: flex-start; /* Alinha os itens ao topo */
    width: 90%; /* Ocupa toda a largura do viewport */
    gap: 5vw; /* Espaço horizontal entre os itens */
    margin-top: 15vh; /* Espaço entre o título e os três elementos */
    margin-left: -15vh;
}

.LiderIA, .InovPrat, .RoiMensu {
    text-align: center; /* Centraliza o texto */
    font-size: 25px;
    width: 30%;
    margin: 0; /* Remove margens extras */
    position: relative;

}

.bottom-container3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: auto; /* Empurra o container para o final da parte3 */
    padding: 20px;
}



.Botão3 {
    width: 60%;
    margin: 0 auto;
    display: flex;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    margin-bottom: 0vh; /* Espaço inferior ajustável */
    margin-top: 0vh;
    width: 30vw; /* Largura total */
}

.Botão3 button {
    padding: 10px 34px; /* Adiciona preenchimento interno */
    border: none; /* Remove bordas */
    border-radius: 10px; /* Bordas arredondadas */
    background-color: #5e4ce6; /* Cor azul para o botão */
    color: white; /* Cor branca para o texto */
    font-size: 1.2em; /* Ajusta o tamanho da fonte para combinar com a frase */
    cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
    text-align: center; /* Centraliza o texto no botão */
}

.Botão3 a {
    text-decoration: none;
    color: white;
}

.Botão3 button:hover {
    background-color: #0056A3; /* Azul mais escuro ao passar o mouse */
    transition: background-color 0.3s ease; /* Suaviza a transição de cor */
}

/* Efeito ao clicar no botão */
.Botão3 button:active {
    background-color: #003E73; /* Azul ainda mais escuro ao clicar */
    transform: scale(0.98); /* Efeito de "pressionado" */
    transition: transform 0.1s ease; /* Suaviza o efeito */
}

.Data3 {
    position: absolute;
    left: 20%; /* Posiciona a data no ponto médio entre a margem esquerda e o botão */
    transform: translateX(-50%);
    background-color: goldenrod;
    color: white;
    font-size: 2em;
    text-align: center;
    margin-bottom: 0vh; /* Espaço inferior ajustável */
    margin-top: 0vh;
    width: 25%; /* Largura do elemento */
    align-self: flex-start; /* Alinha ao início horizontalmente */
    
}

#Parte4 {
    background-image: url(/imagens/master-background-4.png); /* Caminho da imagem 1 */
    background-size: cover; /* Garante que a imagem cubra a área sem distorção */
    background-repeat: no-repeat; /* Evita repetição da imagem */
    background-position: center; /* Centraliza a imagem */
    height: 100vh; /* Altura de 80% da altura da tela */
    margin: 0; /* Remove margens */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: center;
    padding: 0%;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;   
}

.Garanta {
    color: red;
    text-align: center; /* Alinha o texto à direita */
    width: 100%; /* Garante que o texto ocupe toda a largura */
    padding-right: 40%; /* Espaço extra da borda direita */
    font-size: 1.8em;
}

.Cem {
    text-align: center; /* Alinha o texto à direita */
    width: 100%; /* Garante que o texto ocupe toda a largura */
    padding-right: 40%; /* Espaço extra da borda direita */
    font-size: 1.8em;
    margin-top: 1em;
}

.SemCustos {
    text-align: center; /* Alinha o texto à direita */
    width: 100%; /* Garante que o texto ocupe toda a largura */
    padding-right: 40%; /* Espaço extra da borda direita */
    font-size: 1.2em;
    margin-top: 1em;
}

.Vagas {
    text-align: center; /* Alinha o texto à direita */
    width: 100%; /* Garante que o texto ocupe toda a largura */
    padding-right: 40%; /* Espaço extra da borda direita */
    font-size: 1.8em;
}

.Conteudo {
    text-align: center; /* Alinha o texto à direita */
    width: 100%; /* Garante que o texto ocupe toda a largura */
    padding-right: 40%; /* Espaço extra da borda direita */
    font-size: 1.8em;
    margin-top: 1em;
}

.Botão4 {
    max-width: 100%; /* Define um limite de largura para o botão */
    text-align: center; /* Garante que o texto no botão esteja centralizado */
    width: 40%; /* Define a largura do botão */
    padding-right: 0; /* Remove o padding desnecessário na borda direita */
    margin-top: 3em; /* Espaçamento superior */
    margin-left: auto; /* Empurra o botão para a direita */
    margin-right: 50%; /* Define um espaçamento em relação à borda direita */
}


.Botão4 a {
    text-decoration: none;
    color: white;
}

.Botão4 button {
    padding: 10px 34px; /* Adiciona preenchimento interno */
    border: none; /* Remove bordas */
    border-radius: 10px; /* Bordas arredondadas */
    background-color: #5e4ce6; /* Cor azul para o botão */
    color: white; /* Cor branca para o texto */
    font-size: 1.2em; /* Ajusta o tamanho da fonte para combinar com a frase */
    cursor: pointer; /* Cursor de ponteiro ao passar o mouse */
    text-align: center; /* Centraliza o texto no botão */
    width: 100%; /* Botão se ajusta ao tamanho do texto */
}

.Botão4 button:hover {
    background-color: #0056A3; /* Azul mais escuro ao passar o mouse */
    transition: background-color 0.3s ease; /* Suaviza a transição de cor */
}

/* Efeito ao clicar no botão */
.Botão4 button:active {
    background-color: #003E73; /* Azul ainda mais escuro ao clicar */
    transform: scale(0.98); /* Efeito de "pressionado" */
    transition: transform 0.1s ease; /* Suaviza o efeito */
}

.Data4 {
    background-color: goldenrod;
    color: white;
    font-size: 2em;
    text-align: center; /* Alinha o texto à direita */
    margin-left: 20%;
    margin-top: 1em;
}

/* Estilos originais para desktop permanecem inalterados */



@media only screen and (max-width: 767px) {
    #parte1 {
      height: auto;
      min-height: 100vh;
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start; /* Alterado para flex-start */
      align-items: center;
      
    }
  
    .Lidere {
      font-size: 1.3em;
      margin-left: 0;
      transform: none;
      width: 100%;
      margin-top: 20px;
    }
  
    .Descubra {
      font-size: 0.9em;
      margin-left: 0;
      width: 100%;
      margin-top: 10px;
    }
  
    .Gratuita {
      font-size: 1.1em;
      margin-left: 0;
      width: 100%;
      margin-top: 20px;
    }
  
    .Botão1 {
        width: 80%;
        margin-left: -18vw;
        margin-top: 20px;
        margin-bottom: 20px; /* Adiciona espaço abaixo do botão */
        z-index: 2; /* Garante que o botão fique acima de outros elementos */
    }
  
    .Botão1 button {
      font-size: 1.2em;
      padding: 10px 20px;
      width: 80%;
    }
  
    .Data {
        font-size: 1em;
        position: static;
        background-color: goldenrod;
        color: white;
        padding: 5px 10px;
        margin-top: 20px; /* Ajustado para criar espaço após o Saiba */
        width: auto;
        text-align: left;
        order: 2; /* Alterado para vir após o Marco */
        align-self: flex-start; /* Alinha à esquerda */
        margin-left: 2vw; /* Alinha com o Saiba */
    }
    
      .Saiba {
        font-size: 1.5em;
        margin-left: 6vw;
        width: 100%;
        margin-top: 5vh;
        text-align: left;
        display: flex;
        flex-direction: column; /* Alinha verticalmente o texto e a imagem */
        align-items: flex-start;
        justify-content: flex-start;
        order: 3;
      }
    
      .Saiba img {
        height: 10vh;
        margin-left: 12vw;
        margin-top: 5px; /* Espaço entre o texto e a imagem */
      }
    
      .Marco {
        order: 4;
        display: flex;
        justify-content: flex-end; /* Alinha a imagem à direita */
        align-items: flex-end;
        margin-top: 3vh; /* Move a imagem para cima, sobrepondo parcialmente o Saiba */
        margin-bottom:0;
      }
    
      .Marco img {
        height: auto;
        width: 60%; /* Reduz o tamanho da imagem */
        max-width: 200px;
        margin-right: 0;
      }

      #parte2 {
        min-height: 100vh;
        padding: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        background-position: 10% center; /* Mantém o lado esquerdo da imagem visível */
        background-size: cover;
    }

    .ps {
        font-size: 1.3em;
        width: 90%;
        margin: 10px auto;
        text-align: center;
    }

    .container-4ps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        margin-bottom: 10px;
        width: 100%;
    }

    .Produtividade, .Práticas, .Pioneirismo, .Prosperidade {
        font-size: 0.75em;
        text-align: center;
        padding: 5px;
        width: 100%;
    }

    .Produtividade p, .Práticas p, .Pioneirismo p, .Prosperidade p {
        margin: 0; /* Remove margens padrão */
        padding: 0; /* Remove padding padrão */
        width: 100%; /* Garante que o parágrafo ocupe toda a largura do elemento pai */
        word-wrap: break-word; /* Permite que palavras longas quebrem */
        hyphens: auto; /* Adiciona hifenização automática para melhor quebra de palavras */
      
    }

    .bottom-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 5px; /* Empurra para o final da página */
    }

    .Botão2 {
        width: 80%;
        margin-bottom: 10px;
    }

    .Botão2 button {
        width: 100%;
        font-size: 1.2em;
        padding: 10px 20px;
    }

    .Data2 {
        font-size: 1.2em;
        background-color: goldenrod;
        color: white;
        padding: 5px 10px;
        width: auto;
        text-align: center;
    }
  

    #parte3 {
        height: 100vh; /* Define a altura exata do viewport */
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Distribui o espaço verticalmente */
        background-size: 100% auto; /* Ajusta a imagem para cobrir todo o elemento */
        background-position: top center;
        background-color: #faf9f9;
        position: relative;
        overflow: hidden;
        align-items: center;
    }

    .Pq {
        font-size: 1.3em; /* Reduzido um pouco */
        width: 90%;
        margin: 13vh auto 0; /* Reduzido a margem superior */
        text-align: center;
        z-index:2;
    }

    .Container-Pq {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        margin-top: 2vh;
        margin-bottom: 2vh;
        margin-left:4vh;
        z-index:2;
    }

    .LiderIA, .InovPrat, .RoiMensu {
        font-size: 0.8em; /* Reduzido um pouco */
        width: 80%;
        text-align: center;
        margin-bottom: 1.5vh; /* Reduzido o espaço entre os elementos */
        z-index: 2;
    }

    .bottom-container3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin-top: auto; /* Reduzido a margem superior */
        padding-bottom: 3vh; /* Reduzido o padding inferior */
        z-index: 2;
    }

    .Botão3 {
        width: 80%;
        margin-bottom: 5vh; /* Reduzido o espaço entre o botão e a data */
    }

    .Botão3 button {
        width: 100%;
        font-size: 0.8em; /* Reduzido um pouco */
        padding: 8px 16px; /* Reduzido o padding */
    }

    .Data3 {
        font-size: 0.9em; /* Reduzido um pouco */
        background-color: goldenrod;
        color: white;
        padding: 4px 8px; /* Reduzido o padding */
        width: auto;
        text-align: center;
        margin-bottom: 30vh;
        left:50%;
        
    }
    #Parte4 {
        background-image: url(/imagens/master-background-4.png);
        background-size: cover;
        background-position: 95% center; /* Ajustado para manter o relógio visível */
        background-color: #d5c8fa;
        height: 100vh;
        padding: 20px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        overflow: hidden;
        position:relative;
    }

    #Parte4::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(255, 255, 255, 0.6); /* Branco com 30% de opacidade */
        z-index: 1;
    }

    #Parte4 > * {
        position: relative;
        z-index: 2; /* Garante que o conteúdo fique acima da sobreposição */
    }

    .Garanta, .Cem, .SemCustos, .Vagas, .Conteudo {
        width: 100%;
        padding-right: 0; /* Remove o padding direito */
        margin-left: 0;
        text-align: center;
    }

    .Garanta {
        color: red;
        font-size: 1em;
        margin-top: 5vh; /* Ajusta a posição do título */
    }

    .Cem {
        font-size: 0.9em;
        margin-top: 5vh;
    }

    .SemCustos {
        font-size: 0.7em;
        margin-top: 3vh;
    }

    .Vagas {
        font-size: 0.9em;
        margin-top: 5vh;
    }

    .Conteudo {
        font-size: 0.9em;
        margin-top: 5vh;
    }

    .Botão4 {
        width: 80%;
        margin: 2em auto 0;
        padding-right: 0;
    }

    .Botão4 button {
        width: 100%;
        font-size: 1em;
        padding: 10px 20px;
    }

    .Data4 {
        font-size: 0.9em;
        margin: 1em auto 0;
        width: 80%;
    }
    
}