* {
  padding: 0;
  margin: 0;
}

html,
body {
  scroll-behavior: smooth;
}

.apresentacao {
  /* height: calc(100vh - 120px); */
  height: calc(100vh - 80px);
  width: 100%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 50% 50%;
  grid-template-areas:
    "titulo  imagem"
    "botao   imagem";
  justify-content: center;
  /* background-color: #121412; */
  background-image:  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("./imgs/sectionbg.webp");
  background-attachment: fixed;
  background-size: cover;
  box-sizing: border-box;
  /* border-bottom: 5px rgb(78, 233, 17) solid; */
}



/* EFEITO REVEAL ELEMENTOS*/

.efeito-reveal-titulo, .efeito-reveal-botao, .efeito-reveal-img, .subtitulo {
  visibility: hidden;
}


.apresentacao > * {
}

.titulo-container {
  grid-area: titulo;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 50% 50%;
  align-items: center;
  justify-content: center;
}

.titulo-container h1 {
  user-select: none;
}

.titulo-container > :nth-child(2) {
  font-size: min(1.8vw, 2.5rem) !important;
  color: #ffffff;
  margin-left: 10%;
  margin-top: 50px;
  font-weight: 300;
  text-wrap: balance;
}

#titulo-apresentação {
  font-size: min(2.2vw, 2.2rem) !important;
  color: #39ff14;
  justify-self: center;
  margin-top: 15%;
  margin-left: 10%;
  white-space: nowrap;
}

#botao-container {
  grid-area: botao;
  height: auto;
  width: 100%;
  overflow-y: hidden;
  color: white;
  font-weight: bolder;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Botão orçamento */

.botao-orcamento {
  background-color: rgb(32, 26, 26);
  color: #39ff14;
  border: 2px solid #39ff14;
  width: auto;
  padding: 5% !important;
  font-size: 30px;
  font-weight: bold;
  border-radius: 8px;
  white-space: nowrap;
  cursor: pointer;
  animation: flutuar 2s ease-in-out infinite;
  transition: box-shadow 0.3s ease;
  box-shadow: 0 0 5px #39ff14, 0 0 15px #39ff14, 0 0 25px #39ff14,
    0 0 40px #39ff14;
}

.botao-orcamento:hover {
  box-shadow: 0 0 10px #39ff14, 0 0 25px #39ff14, 0 0 40px #39ff14,
    0 0 60px #39ff14;
}

/* Animação para o botão ficar flutuando */
@keyframes flutuar {
  0%,
  100% {
    transform: translateY(0);
  }

  40% {
    transform: translateY(-10px);
  }
}

#img-container {
  grid-area: imagem;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

#imagem-apresentação {
  width: auto;
  height: 75%;

  filter: drop-shadow(0 0 1px #39ff14) drop-shadow(0 0 1px #39ff14)
    drop-shadow(0 0 12px #39ff14);
  border-radius: 1%;
}

h1 {
  text-align: center;
  font-size: 70px;
  color: green;
  font-family: "roboto";
}

#tecnologias-titulo {
  font-size: 55px;
  color: #000;
  font-family: "roboto";
}

h2 {
  color: #d3d3d3;
  font-family: "roboto";
  text-align: center;
}

.container {
  display: block;
  min-height: 100%;
  margin: 0;
  padding: 0px;
  width: 100%;
  overflow-x: hidden;
  /*background-color:#2f4538;*/
  /* background-color: #8cb47a;  */
  background-color: #000000;
  font-style: helvetica;
}

.painel {
  display: flex;
  align-items: center;
  justify-content: center;
}

/*Ocultando menu mobile*/

.header-mobile {
  display: none;
}

.navMenu {
  z-index: 99;
  position: fixed;
  text-decoration: none;
  list-style-type: none;
  display: grid;
  grid-template-columns: 30% 70% !important;
  grid-template-rows: 100% 100%;

  /* background-color: #1f221e; */
  background-color: #0e0f0e;
  opacity: 0.99;
  backdrop-filter: blur(50px);
  height: clamp(50px, 80px, 80px);
  width: 100% !important;
  transition: height 0.3s ease;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
}

#divImgLogo {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  overflow: hidden; /* impede que a imagem ultrapasse */
}

#logo {
  max-width: 80%;
  max-height: 80%;
  width: auto; /* ajuste: deixa a largura flexível */
  height: auto; /* mantém proporção */
  display: block;
}

.conteudo {
  /* border:3px solid red; */

  height: auto;
  overflow-x: hidden;
  /* width: 1000000px; */
  /* overflow: hidden; */
  /* background-image: url('imgs/platyNoComputador.jpeg'); */
}

.menu {
  text-decoration: none;
  list-style-type: none;
  display: flex;
  flex-direction: row;
  /* gap: clamp(0.1rem, 4vw, 10vw); */
  gap: 5%;
  margin-bottom: 0px;
  background-color: none;
  padding: 0px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

nav li {
  box-sizing: border-box;
  height: 100%;
  gap: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
}

nav li a {
  text-decoration: none;
  color: rgb(255, 255, 255);
  font-weight: 300;
  font-size: clamp(14px, 2vw, 30px);

  font-family: "Montserrat", sans-serif;
  padding: 0px 0px 10px 0;
  position: relative;
  user-select: none;
}

nav li a::after {
  content: " ";
  width: 0%;
  height: 2px;
  background-color: #1aa754;
  position: absolute;
  bottom: 0;
  left: 0;
  transition: 0.7s ease-in-out;
}

nav li:hover a::after {
  width: 100%;
}

a.actived::after {
  width: 100%;
}

main {
  text-align: center;
  background-color: transparent;
}

main section h1 {
  font-size: 70px;
  color: green;
  font-family: "roboto";
}

.divRodape {
  display: flex;
}

#rodape > * {
}

.contato {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 10%;
  grid-area: contato;
  padding-top: 20%;
}

.contato > * {
}

#divContato {
  display: flex;
  box-sizing: border-box;
  justify-content: center;
}

#tituloContatos {
  font-size: 45px;
  margin: 0px;
  /* color: #1aa754; */
  color: green;
  text-align: center;
}

.divMidia {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#midiasSociais {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 2vh;
}

#midiasSociais > * {
}

#midiasSociais div label {
  text-decoration: none;
  list-style: none;
  color: rgb(150, 150, 150);
  font-size: 20px;
  margin-left: 20px;
}

#midiasSociais div a {
  text-decoration: none;
  list-style: none;
  color: white;
  font-family: "roboto";
  display: inline-block;
}

#midiasSociais div a img {
  width: 3vw;
  display: block;
}

.nmSocial {
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  top: -100px;
}

#rodape {
  background-color: #1f221e;
  font-family: "roboto";
  padding: 0;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 30% 1fr 30%;
  grid-template-rows: 1fr 5%;
  grid-template-areas:
    "contato formContato direita"
    "footer footer footer";
}

/* #direita {
  grid-area: direita;
  background-color: red;
} */

#formulario-contato {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  grid-area: formContato;
}

.formContato {
  box-sizing: border-box;
  background-color: black;
  border: solid green 4px;
  border-radius: 20px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 10% 10% 10% 1fr 10% auto;
  grid-template-areas:
    "msgOrcamento msgOrcamento msgOrcamento"
    "inputNome inputNome inputNome"
    "inputEmail inputEmail inputEmail"
    "msgContato msgContato msgContato"
    "enviarContainer enviarContainer enviarContainer"
    "mensagemResposta mensagemResposta mensagemResposta";
  align-items: center;
  justify-content: center;
  width: min(900px, 100%);
  max-width: 100%;
  height: min(600px, 70%);
  max-height: 90%;
  padding-top: 2%;
  overflow: hidden;
}

.formContato * {
  box-sizing: border-box;
}

#msgOrçamento {
  font-size: min(6vw, 3rem);
  grid-area: msgOrcamento;
  text-align: center;
}

#formInputNome {
  grid-area: inputNome;
  width: 90%;
  justify-self: center;
}

#formInputEmail {
  grid-area: inputEmail;
  width: 90%;
  justify-self: center;
  margin-bottom: 2%;
}

#msgContato {
  resize: none;

  outline: 0;
  background-color: #222222;
  color: rgb(255, 255, 255);
  font-family: "roboto";
  font-size: min(5vw, 2.5rem);
  border: 0;
  height: 90%;
  width: 90%;
  align-self: end;
  left: 0;
  border-radius: 10px;
  text-indent: 20px;
  grid-area: msgContato;
  align-self: center;
  justify-self: center;
}

#enviarContainer {
  grid-area: enviarContainer;
  display: flex;
  flex-direction: row;
  height: 100%;
  width: auto !important;
  align-items: center;
  justify-content: end;
  gap: 2%;
  padding-right: 2%;
}

#enviarContainer > * {
}

#btEnviar {
  padding: 0;
  height: auto;
  width: 90px;
  color: rgb(150, 150, 150);
  font-family: "roboto";
  font-size: min(2vw, 2rem);
  background-color: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  align-self: center;
  grid-area: botaoEnviar;
}

.formContato > * {
}

/* Spinner e mensagem de envio do email */

/* Spinner */
.spinner {
  visibility: hidden;
  border: 4px solid #ffffff;
  border-top: 4px solid #008000;
  width: 2vmin;
  height: 2vmin;
  aspect-ratio: 1/1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  grid-area: spinner;
  align-self: center;
}

/* Animação spinner */

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.mensagem {
  display: none;
  text-align: center;
  margin-top: 10px;
  padding: 8px;
  border-radius: 5px;
  color: #000000;
  font-weight: bold;
  grid-area: mensagemResposta;
}

.sucesso {
  background-color: #39ff14;
}

.erro {
  background-color: #dc3545;
}

.front-back-column {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas:
    "front back "
    "database database";
  list-style: none;
  justify-content: center;
  margin-top: 60px;
  row-gap: 100px;
}

.front-back-column > li {
  column-gap: 60px;
}

#front {
  justify-self: center;
}

#back {
  justify-self: center;
  width: 600px;
}

#database {
  grid-area: database;
}

.formInputs {
  height: auto;
  width: 90%;
  position: relative;
}

#inputEmail {
  margin-top: 5%;
}

.formInputs label {
  font-size: 16px;
  position: absolute;
  left: 0;
  bottom: 5px;
  color: grey;
  font-weight: bold;
  cursor: text;
  transition: 0.5s ease-in-out;
}

.formInputs input {
  width: 100%;
  color: rgb(255, 255, 255);
  border: 0;
  background-color: transparent;
  border-bottom: 2px solid rgb(150, 150, 150);
  outline: 0;
  font-size: 15px;
}

.formInputs input:focus,
.formInputs input:valid {
  border-bottom: 2px solid green;
}

.formInputs input:focus ~ label,
.formInputs input:valid ~ label {
  transform: translateY(-2vh);
  font-size: 20px;
  color: grey;
}

/* Cor de fundo do autocomplete */
input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px rgb(0, 0, 0) inset;
}

/* Cor do texto do autocomplete */
input:-webkit-autofill {
  -webkit-text-fill-color: rgb(255, 255, 255) !important;
}

#btEnviar::after {
  content: " ";
  height: 1.5px;
  width: 0%;
  background-color: green;
  position: absolute;
  left: 0;
  bottom: 0;
}

#btEnviar:hover::after {
  width: 100%;
}

#divMsgdia {
  position: absolute;
  margin: 0px;
  top: 10px;
  height: 100%;
  width: auto;
  right: 25px;
}

#msgDia {
  color: white;
  font-size: 25px;
}

.container main img {
  width: 50px;
  height: 50px;
}

#msgFinal {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: #008000;
  color: rgb(2, 2, 2);
  font-size: 15px;
  text-align: center;
  font-family: "roboto";
  grid-area: footer;
  align-self: end;
  white-space: nowrap;
}

/*
  SERVIÇOS
  */

.slider-mobile {
  display: none;
}

#serviços {
  display: grid;
  align-items: start;
  overflow-y: hidden;
}

#serviços-titulo {
  font-size: min(4vw, 3rem);
  padding: 0;
}


#serviços-subtitulo01 {
  padding-bottom: 50px;
}

#painel-serviços {
  display: flex;
  flex-direction: column;
  row-gap: 100px;
  align-items: center;
  width: 100%;
  height: fit-content;
  background-color: transparent;
}

.painel-software {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
  padding-left: 5%;
  padding-right: 5%;
  background-color: #000;
  
}

.painel-software-div {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-width: 250px;
  padding: 0;
  border-radius: 30px;
  border: 0.009em solid rgb(169, 169, 169, 0.2);
  border-bottom: 10px solid green;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  align-self: center;
  justify-self: center;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
}

.painel-software-div > * {
}

.painel-software-div h3 {
  color: green;
  text-align: center;
  font-family: "roboto";
  font-size: min(2vw, 2rem);
}

.painel-software-div:nth-child(6) {
  grid-column: 2;
}

.painel-software h2 {
}

.painel-software h2::after {
  content: " ";
  display: block;
  height: 2px;
  width: 100%;
  background-color: green;
  left: 0;
  bottom: 10px;
}

.painel-software img {
  width: 50%;
  height: auto;
  justify-self: center;
}

#serviços-titulo {
  color: #4dff2c;
}

.serviço-texto {
  position: absolute;

  background-image: linear-gradient(to top, #013220, #000000);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  position: absolute;
  top: 600px;
  transition: top 0.5s ease-in-out;
}

.serviço-texto > h2 {
  color: darkgreen;
}

.serviço-texto p {
  font-size: min(3vw, 1rem) !important;
  font-family: "roboto";
  height: auto;
  color: rgb(73, 243, 73);
  align-self: center;
  text-align: center;
  margin-top: auto;
  margin-bottom: auto;
}

/* TEXTO EXPLICATIVO SITE INSTITUCIONAL*/

#site-i-div:hover #site-i {
  top: 0;
}

.serviço-texto#site-i > h2 {
  font-size: 30px;
}

/* TEXTO EXPLICATIVO LANDING-PAGES*/

#landing-page-div:hover #landing-page {
  top: 0;
}

.serviço-texto#landing-page > h2 {
  font-size: 30px;

  z-index: 2001;
}

#landing-page p {
  font-size: 20px;
}

/* TEXTO EXPLICATIVO HOT SITE*/

#hot-site-div:hover #hot-site {
  top: 0;
}

.serviço-texto#hot-site > h2 {
  font-size: 30px;

  z-index: 2001;
}

/*TEXTO EXPLICATIVO SISTEMA WEB*/

#web-system-div:hover #web-system {
  top: 0;
}

.serviço-texto#web-system > h2 {
  font-size: 30px;
  z-index: 2001;
}

/* TEXTO EXPLICATIVO E-COMMERCE*/

#e-commerce-div:hover #commerce {
  top: 0;
}

.serviço-texto#commerce > h2 {
  font-size: 30px;
  z-index: 2001;
}

/* TEXTO EXPLICATIVO CONSULTORIA*/

#consultoria-div:hover #consultoria {
  top: 0;
}

.serviço-texto#consultoria > h2 {
  font-size: 30px;
}

#consultoria-div p {
  font-size: 20px;
}

/* TEXTO EXPLICATIVO APLICATIVOS ANDROID*/

#android-div:hover #android {
  top: 0;
}

.serviço-texto#android > h2 {
  font-size: 30px;
}

#android-div p {
  font-size: 20px;
}

/* TEXTO EXPLICATIVO SISTEMA DE GESTÃO (ERP)*/

#erp-div:hover #erp {
  top: 0;
}

.serviço-texto#erp > h2 {
  font-size: 30px;
}

#erp-div p {
  font-size: 20px;
}

/*********************************************/

/* PAINEL MODELOS DE NEGOCIO */

.div-modelo-negocio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-bottom: 2%;
}

.div-modelo-negocio-mobile {
  display: none;
}

#modelo-negocio-subtitulo {
  margin-bottom: 60px;
}

.div-modelo-negocio h1 {
  font-size: 40px;
  color: #4dff2c;
}

.painel-modelo-negocio {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  padding: 20px;
  background-color: #000;
}

.modelo-negocio-card1, .modelo-negocio-card2 {
  visibility: hidden;
}

.modelo-negocio-card1:hover, .modelo-negocio-card2:hover {
  
}

.painel-modelo-negocio div {
  flex: 0 0 calc((100% - 200px) / 5); /* largura responsiva */
  aspect-ratio: 5 / 3; /* MAIS largo do que alto */
  background-color: #1b1b1b;
  color: white;
  font-weight: bold;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s;
  min-width: 120px;
}

.painel-modelo-negocio img {
  width: 100px;
}

/************************************************/
#img-website {
  width: 80%;
}

#img-erp {
  width: 80%;
}

#img-android {
  display: inline-block;
  width: 80%;
}

.titulo-softwares {
  color: white;
  background-color: transparent;
  margin-bottom: 30px;
}

/*
  TECNOLOGIAS
  */
#tecnologias {
  /* background-color: #cdd69d; */
  /* background-color: #6c724b; */
  height: 100vh;

 
}

#tecnologias section  {
  display: flex;
  flex-direction: column;
  position: relative;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

#tecnologias section:first-child {
  
}

#platypus-capacete {
  width: 15%;
  position: absolute;
  z-index: 1000;
  left: 100px;
  opacity: 1;
  transition: opacity 10s ease-in;
}

/* PAINEL TECNOLOGIAS FRONT-END*/

#tecnologia-front-div {
  display: grid;
  width: 700px;
}

#tecnologias-subtitulo01 {
  font-size: 20px;
  font-weight: 0;
  color: black;
}

#painelTecnologias {
  margin-top: 70px;
  justify-self: center;
  width: 1200px;
  height: 700px;
  background-color: transparent;
  
  border-bottom: solid 6px green;
  border-radius: 20px;
  background-color: black;
}

.tecnologia-front {
  display: grid;
  grid-template-columns: auto auto auto;
  text-decoration: none;
  list-style-type: none;
  justify-content: center;
  padding: 0;
}

.tecnologia-front li {
  width: 160px;
  height: 209px;
  box-sizing: border-box;
  text-align: center;
  padding: 0;
  margin: 0;
  position: relative;
}

.front-li {
  display: grid;
  align-items: center;
  justify-content: start;
  padding: 0;
  margin: 0;
  transition: 0.3ms ease;
}

.front-li:hover {
  transform: scale(1.2);
}

.front-li label {
  align-self: end;
}

#javascript-li img {
  /* margin-left: 40px;
    margin-right: 40px; */
  justify-content: start;
}

#javascript-li label {
  justify-self: center;
}

.section#tecnologias {
  background-color: #cecece;
  height: 100vh;
}

.front-img {
  height: 100px;
  user-select: none;
  width: auto;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* #css-logo-img{
     width: 125px;
     height: auto;
     top: -200px;
     padding: 0;
  } */

#li-css {
  padding: 0;
}

.tecnologia-logo-label {
  color: #006400;
  font-family: "roboto";
  user-select: none;
  display: block;
  font-size: 20px;
  font-weight: bold;
}

/* PAINEL TECNOLOGIA BACK-END*/
.tecnologia-back-div {
  display: grid;
}

.tecnologia-back {
  display: grid;
  grid-template-columns: auto auto auto;
  list-style-type: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}

.tecnologia-back li {
  /* display: block; */
  text-align: center;
  margin: 0;
  width: 160px;
  height: 209px;
}

.back-li {
  display: grid;
  align-items: center;
  transition: 0.9ms ease-in-out;
}

.back-li:hover {
  transform: scale(1.2);
}

.back-li img {
  align-self: start;
}

.back-li label {
  align-self: end;
}

#php-li {
  margin-right: 50px;
}

.back-img {
  width: 150px;
  height: auto;
  margin: 0;
}

/* PAINEL TECNOLOGIA DATABASE*/
#tecnologia-database-div li {
  list-style-type: none;
}

.tecnologia-database {
  display: grid;
  grid-template-columns: auto;
}

.tecnologia-database li {
  justify-self: center;
}

#data-li {
  display: grid;
  align-items: center;
  transition: 0.9ms ease-in-out;
 
 
}

#data-li:hover {
  transform: scale(1.2);
}

#data-li label {
  justify-self: center;
}

.data-img {
  height: 150px;
}

/* SECTION POR QUE TER UM SITE */

#porque-ter-um-site {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding-bottom: 0;
}

#porque-ter-um-site * {
  box-sizing: border-box;
}

.bloco {
  height: auto;
}

.bloco01 {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: 100% 100%;
  justify-content: center;
  align-items: center;
  padding: 2%;
  padding-bottom: 0;
  height: 100vh;
  width: 100vw;
  box-sizing: border-box;
  background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.6)),
    url("imgs/foguete-fundo.webp");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
}

.bloco01 h1 {
  color: #4dff2c;
  font-size: 3.5rem;
  text-align: center;
  text-wrap: balance;
  /* line-height: -2000px;
  letter-spacing: -2px; */
}

.bloco01 h2 {
  text-wrap: balance;
}

#img-bloco01 {
  height: 100%;
  display: flex;
  justify-content: end;
  flex-direction: column;
 
}

#img-bloco01 img {


}

#apresentacao-bloco01{
  z-index: 1;
}

.bloco02 {
  width: 100%;
  height: auto;
  background-color: #080808;
  padding-top: 40px;
  padding-bottom: 40px;

}

#apresentacao-bloco02 {
  margin-bottom: 48px;
}

#apresentacao-bloco02 h1 {
  color: #4dff2c;
  font-size: 25px;
}

#apresentacao-bloco02 h2 {
  text-wrap: balance;
  font-size: 16px;
}

#elementos-bloco02 {
  display: grid;
  height: 80vh;
  margin-inline: 10%;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}

#elementos-bloco02 li {
  border: solid 2px #333333;
  background-color: #111111;
  border-radius: 14px;
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: repeat(2, 1fr);
  overflow: hidden;
  gap: 20px;
  padding-top: 24px;
  padding-bottom: 24px;
}


#elementos-bloco02 img {
  /* height: 30px; */
  border: solid 2px oranged;
  width: 25px;
  display: block;
}

#elementos-bloco02 div {
}

.elemento-card01 {
  padding-left: 24px;
  padding-right: 24px;
  display: flex;
  flex-direction: column;
  row-gap: 6px;
}

.elemento-card01 p {
  color: #4dff2c;
  font-family: "roboto";
  font-size: 20px;
  font-weight: bold;
}

.elemento-card02 {
  padding-left: 24px;
  padding-right: 24px;
}

.elemento-card02 p {
  color: #ccc7c7;
  font-family: "roboto";
}

.elemento-card01 > div:first-child {
  background-color: #172913;
  height: auto;
  width: auto;
  display: inline-block;
  padding: 12px;
  border-radius: 15px;
  width: fit-content;
}

.bloco03 {
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
}

#apresentacao-bloco03 {
  margin-bottom: 48px;
}

#apresentacao-bloco03 h1 {
  color: #4dff2c;
  font-size: 2rem;
}

#apresentacao-bloco03 h2 {
  color: #ccc7c7;
  font-size: 1rem;
  text-wrap: balance;
}

#tabela-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
}

#tabela {
  width: auto;
  display: inline-block;
  border-radius: 15px;
  border: solid 1px #333333;

  font-family: "roboto";
  background-color: #111111;
  overflow: hidden;
  padding-top: 30px;
}

#tabela h1 {
  color: #4dff2c;
}

#tabela-site-redes-sociais {
  height: auto;
  border-collapse: collapse;
  width: 800px;
  border-radius: 10%;
  text-align: center;
}

#tabela-site-redes-sociais thead {
}

#tabela-site-redes-sociais thead tr {
  border-collapse: collapse;
  border-bottom: solid 2px #333333;
  font-size: 20px;
}

#tabela-site-redes-sociais thead tr th {
  text-align: center;
}

#tabela-site-redes-sociais thead tr th > div {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  /* padding: 20px; */
}

#tabela-site-redes-sociais thead tr th > div h1 {
  font-size: 20px;
}

#tabela-site-redes-sociais thead tr th > div > div {
  display: inline-block;
  width: auto;
  height: fit-content;
  padding: 20px;
}

#tabela-site-redes-sociais thead tr th img {
  align-self: start;

  display: block;
  width: 40px;
}
#tabela-site-redes-sociais thead tr th img#redes-sociais-icon {
  width: 60px;
}

#tabela-site-redes-sociais th {
  color: #4dff2c;
}

#tabela-site-redes-sociais tr {
  background-color: #111111;
}

#tabela-site-redes-sociais tbody tr:hover {
  background-color: #1a1919;
}

#tabela-site-redes-sociais tr td:first-child {
  color: #4dff2c;
}

#tabela-site-redes-sociais tr td:nth-child(2) {
  color: #4dff2c;
}

#tabela-site-redes-sociais tr td:nth-child(3) {
  color: #ccc7c7;
}

#tabela-site-redes-sociais tr td {
  padding: 20px 6px;
  line-height: 1;
}

#tabela-site-redes-sociais td {
  text-align: center;
  border-bottom: solid 1px #333333;
}

.bloco04 {
  height: 50vh;
  display: flex;
  box-sizing: border-box;
  align-items: end;
  width: 100%;

  padding-top: 30px;
}

.bloco04 > div {
  background-color: #4dff2c;
  height: 90%;
  min-height: fit-content;

  width: 100vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  text-align: center;
}

#rocket-icon-container {
  display: inline-block !important;
  width: fit-content;
  height: fit-content;
  padding: 0;
}

#rocket-icon {
  width: 60px;
}

#relogio-icon-container {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

#relogio-icon {
  width: 25px;
}

.bloco04 h1,
.bloco04 h2,
.bloco04 h3 {
  color: black;
  font-family: "roboto";
  text-wrap: balance;
}

.bloco04 h1 {
  margin-bottom: 16px;
}

.bloco04 h2 {
  font-size: 20px;
  font-weight: normal;
  color: rgb(26, 24, 24);
  margin-bottom: 36px;
}

/* SECTION SOBRE*/

#sobre * {
  box-sizing: border-box;
}

.section#sobre {
  box-sizing: border-box !important;
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 10%;
  text-align: center;
}

#sobre .hidden {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 20% 80%;
  box-sizing: border-box !important;
  height: auto;
  width: 100%;
  height: 100%;
}

#sobre-titulo-section {
  align-self: center;
}

#sobre .hidden > * {
}

#sobre .hidden > * {
}

.sobre-container {
  height: 100%;
  width: 100%;
  display: grid;
  gap: 2%;
  grid-template-columns: auto 55%;
  grid-template-rows: 100% 100%;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.sobre-container > * {
  box-sizing: border-box !important;
}

.sobre-container div {
}

.sobre-container p {
  font-size: 70px;
  color: white;
}

#sobre-foto {
  /* display: flex; */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: auto;
  width: auto;
}

#foto-apresentação {
  width: 22vw;
  justify-self: center;
  align-self: center;
  border-radius: 30px;
  box-sizing: border-box !important;
}

/* #sobre-texto {
  width: 50vw;
  height: auto;
  
  align-self: center;
  
  display: flex;
  flex-direction: column;
  justify-content: end;
  box-sizing: border-box !important;
  white-space: nowrap;
 
} */

#sobre-texto {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sobre-texto > * {
  align-self: center;
}

#sobre-texto-painel {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  align-items: center;
  justify-content: center;
  height: auto;
  width: 100%;
  background-color: #1e2329;
  border-radius: 10px;
  border: 2px solid darkgreen !important;
  box-sizing: border-box;
  padding-top: 5%;
  padding-bottom: 2%;
  padding-left: 5%;
  padding-right: 5%;
  white-space: nowrap;
}

#sobre-texto-painel > * {
}

#sobre-nome {
  color: #d3d3d3;
  font-size: min(3vw, 2.5rem) !important;
  text-align: center;
}

#sobre-titulo {
  font-size: min(2.5vw, 2.5rem) !important;
  color: darkgreen;
  font-family: "roboto";
  box-sizing: border-box !important;
}

#sobre-formacao {
  color: #d3d3d3;
  text-align: start;
  font-family: "roboto";
  font-size: min(1.5vw, 2rem);
}

/* REDES SOCIAIS PROFISSIONAIS*/

#painel-redes-profissionais {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  width: auto;
  align-self: end;
  border-radius: 10px;
  border: solid 2px darkgreen;
}

#painel-redes-profissionais > * {
}

#painel-redes-profissionais a {
  padding: 0;
  border: none;
  background: none;
  height: auto;
  width: auto;
  cursor: pointer;
}

#painel-redes-profissionais img {
  display: block;
  width: 3vw;
  height: auto;
  transition: ease 0.5s;
}

#painel-redes-profissionais img:hover {
  filter: brightness(2);
}

/* 
  
  #ANIMAÇÃO DE SCROLL
  
  */

.hidden {
  display: grid;
  padding: 0;
  margin: 0;
  opacity: 0;
  filter: blur("150px");
  transition: all 2s;
  transform: translateX(-100%);
  background-color: transparent;
  box-sizing: border-box;
  

}

.show {
  opacity: 1;
  filter: blur(0);
  transform: translateX(0);
  transition: all 2s;
  
}

.section#inicio {
  padding: 0;
  margin: 0;
  font-size: 19px;
  color: white;
  width: 100%;
  height: 100vh;
  background-color: rgb(0, 0, 0);
  box-sizing: border-box;
  display: flex;
  align-items: end;
  justify-content: end;
  padding-left: 5%;
  padding-right: 5%;
}

/* img{display:none;} */
/* Celular */

.section {
  height: calc(100vh - 80px);
  display: block;
  background-color: #000000;
  width: 100%;
  box-sizing: border-box !important;
}

.section#serviços {
  margin-top: 10%;
  height: auto;
  box-sizing: border-box;
}

#serviços-hidden {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: fit-content;

  
}

#serviços-hidden > * {
  width: 100% !important;
  box-sizing: border-box !important;
}

.painel-modelo-negocio div:hover {
  transform: scale(1.1);
}

.painel-modelo-negocio label {
  font-family: "roboto";
  font-size: clamp(0.5rem, 1.5vw, 2rem) !important;
  font-weight: bold;
  position: relative;
}

#projetos {
  background-color: #5e5b5b;
  height: 120vh;
  display: grid;
  align-items: center;
  justify-content: center;
}