@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800;900&family=Roboto:wght@300;400;500;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto;
  margin: 0 120px 0 120px;
  height: 5rem;
  font-family: 'Montserrat', sans-serif;
}

.logo img {
  width: 130px;
  height: 40px;
}

.nav .lista_itens {
  display: flex;
  gap: 32px;
}

.nav .lista_itens li {
  list-style: none;
  font-size: 1rem;
}

.nav .lista_itens li a {
  text-decoration: none;
  color: #113067;
  font-weight: 500;

}

#btn_login {
  transition: all 0.2s ease, visibility 0s;
  background: linear-gradient(45deg, #772eeb 0%, #fc789b 100%);
  /* background-color: #113067; */
  color: #FFFFFF;
  padding: 10px 32px;
  border-radius: 50px;
}

#btn_login:hover {
  /* background-color: #303743; */
  opacity: 0.8;
  background: linear-gradient(45deg, #fc789b 0%, #772eeb 100%);
}

.bg {
  display: block;
  background-image: url(img_assinador_main.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 0;
  width: 100%;
  height: 100%;
  min-height: 42vh;
  z-index: -1;
}

.conteudo_principal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 4.8rem;
  margin: 0 300px 0 120px;
  font-family: 'Montserrat', sans-serif;
  max-width: 100%;
}

.conteudo_principal h1 {
  font-size: 2.2rem;
  font-weight: 600;
  color: #FFFFFF;
  width: 100%;
}

.conteudo_principal p {
  color: #FFFFFF;
  font-weight: 500;
  font-size: 1rem;
  margin: 16px 0px 0 0;
  line-height: 28px;

}

.tipos_de_autenticacao {
  display: flex;
  margin: 80px 60px 80px 60px;
  gap: 50px;
}

.autenticacao_whatsapp:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transform: scale(1.05);
  transition: .3s;
}

.autenticacao_sms:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transform: scale(1.05);
  transition: .3s;
}

.autenticacao_biometria_facial:hover {
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transform: scale(1.05);
  transition: .3s;
}

.autenticacao_sms,
.autenticacao_whatsapp,
.autenticacao_biometria_facial {
  display: flex;
  flex-direction: column;
  width: fit-content;
}

.autenticacao_sms {
  padding: 14px;
}

.autenticacao_sms h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #113067;
  font-size: 24px;
  margin-top: 22px;
}

.autenticacao_sms p {
  font-family: 'Roboto', sans-serif;
  color: #232323;
  line-height: 28px;
  font-size: 16px;
  letter-spacing: 0.6px;
  margin-top: 16px;
}

.autenticacao_whatsapp {
  padding: 16px;
}

.autenticacao_whatsapp h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #113067;
  font-size: 24px;
  margin-top: 22px;
}

.autenticacao_whatsapp p {
  font-family: 'Roboto', sans-serif;
  color: #232323;
  line-height: 28px;
  font-size: 16px;
  letter-spacing: 0.6px;
  margin-top: 16px;
}

.autenticacao_biometria_facial {
  padding: 14px;
}

.autenticacao_biometria_facial h2 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: #113067;
  font-size: 24px;
  margin-top: 22px;
}

.autenticacao_biometria_facial p {
  font-family: 'Roboto', sans-serif;
  color: #232323;
  line-height: 28px;
  font-size: 16px;
  letter-spacing: 0.6px;
  margin-top: 16px;
}

.section_plataforma_ativus {
  display: flex;
  height: 100%;
}

.imagem_ativus img {
  width: 100%;
  height: 100%;
}

.conteudo_ativus {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* background-color: #113067; */
  background: repeat padding-box border-box 0% 0% / auto auto scroll linear-gradient(45deg, #772eeb 0%, #fc789b 100%);
  width: 100%;
}

.conteudo_ativus h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.6px;
  font-size: 2.2rem;
  color: #FFFFFF;
  margin: 0 40px 0 60px;
}

.conteudo_ativus .sub_paragrafo {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600px;
  color: #FFFFFF;
  margin: 16px 60px 0 60px;
  font-size: 18px;
}

.conteudo_ativus .conteudo_paragrafo {
  font-family: 'Roboto', sans-serif;
  font-weight: 200px;
  margin: 24px 60px 0 60px;
  font-size: 1rem;
  letter-spacing: 0.6px;
  line-height: 22px;
  color: #F6F6F6;
}

.conteudo_ativus span {
  color: #232323;
}

.btn_ativus {
  display: flex;
  justify-content: center;
}

.btn_ativus button:hover {
  opacity: 0.8;
  /* background-color: #E9EFF5; */
}

.conteudo_ativus button {
  width: 140px;
  height: 42px;
  border: none;
  border-radius: 50px;
  margin-top: 62px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  background: #113067;
}

.conteudo_ativus button a {
  text-decoration: none;
  font-size: 16px;
  /* color: #113067; */
  font-weight: 600;
  color: white;
  
}

.rodape {
  display: flex;
  gap: 40px;
  margin: 0px 120px 62px 120px;
}

.rodape h3 {
  font-family: 'Roboto', sans-serif;
  color: #303743;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.infos_bart {
  width: 400px;
  margin-top: 3rem;
}

.infos_bart img {
  width: 140px;
}

.infos_bart p {
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #464D58;
  margin-top: 22px;
  line-height: 1.6;
}

.endereco_lista,
.contatos,
.redes_sociais {
  margin-top: 4.2rem;
}

.endereco_lista {
  width: 400px;
}

.endereco_lista_conteudo {
  margin-top: 16px;
}

.endereco_lista_conteudo span {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #303743;
}

.endereco_lista_conteudo p {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #747982;
  margin-top: 6px;
}

.redes_sociais {
  width: 200px;
}

.lista_redes_sociais {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}

.contatos {
  width: 200px;
}

.lista_contatos {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
  list-style: none;
}

.lista_contatos a {
  font-family: 'Roboto', sans-serif;
  text-decoration: none;
  font-size: 16px;
  color: #747982;
}

.bart_direitos {
  display: flex;
  justify-content: center;
}

.bart_direitos span {
  font-family: 'Roboto', sans-serif;
  color: #747982;
  font-size: 14px;
  margin-bottom: 16px;
}

@media (max-width: 910px) {
  body {
    width: 100vw;
  }

  .cabecalho {
    height: 4.5rem;
    margin: 0 60px 0 60px;
  }

  .lista_itens li a {
    font-size: 0.9rem;
  }
}

@media (max-width: 1370px) {
  body {
    overflow-x: hidden;
  }
}

@media (max-width: 1256px) {

  .conteudo_principal {
    padding: 4.8rem 0 4rem 0;
    margin: 0 60px 0 60px;
  }

  .conteudo_principal h1 {
    font-size: 2em;
  }

  .conteudo_principal p {
    width: 100%;
    margin-top: 18px;
  }

  .bg {
    max-width: 100%;
  }
}

@media (max-width: 990px) {
  .tipos_de_autenticacao {
    display: flex;
    flex-direction: column;
    gap: 36px;
    flex-wrap: wrap;
    margin: 40px 60px 40px 60px;
  }

  .autenticacao_sms,
  .autenticacao_whatsapp,
  .autenticacao_biometria_facial {
    width: 100%;
  }
}

@media (max-width: 1200px) {
  .conteudo_ativus {
    padding-top: 36px;
  }

  .conteudo_ativus h1,
  span {
    font-size: 1.8rem;
  }

  .conteudo_ativus .sub_paragrafo {
    font-size: 1.1rem;
    width: 100%;
  }

  .conteudo_ativus .conteudo_paragrafo {
    font-size: 0.9rem;
    font-weight: 200;
  }

  .btn_ativus button {
    margin: 32px 0 42px 0;
    width: 120px;
    height: 38px;
  }

  .btn_ativus button a {
    font-size: 1rem;
  }

  .imagem_ativus img {
    display: none;
  }

}

@media (max-width: 640px) {
  .lista_itens_link {
    display: none;
  }
}

@media (max-width:1000px) {
  .rodape {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0px 0px 62px 40px;
  }

  .rodape h3 {
    font-size: 1rem;
  }

  .endereco_lista {
    margin-top: 1.4rem;
  }

  .redes_sociais {
    margin-top: 1rem;
  }

  .contatos {
    margin-top: 1rem;
  }

  .endereco_lista p {
    line-height: 1.4;
  }

  .endereco_lista_conteudo p,
  .contatos a {
    font-size: 0.9rem;
  }

  .infos_bart p {
    font-size: 0.8rem;
  }
}