/*@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');*/

@font-face {
 font-family: 'Poppins Regular';
 src: url('../fonts/Poppins-Regular.ttf');
}


  :root{
   --cor-principal: #3125D4;
   --cor-de-fundo: #fff;
   --cor-de-texto: #141414;
   --cor-de-texto-2: #3A3A3A;
   --medida: calc((100vw + 100vh) / 100);
   --texto-pequeno: clamp(.75rem, var(--medida) , 0.95rem);
   --texto-normal: clamp( .95rem, calc(var(--medida) * 1.2), 1rem);
   --texto-medio: clamp( 1.3rem, calc(var(--medida) * 2.2), 1.8rem);
   --texto-grande: clamp( 2rem, calc(var(--medida) * 3) , 2.5rem);
   --margem: 20px;
   scroll-behavior: smooth;
   background-color: #DFEBFF;
   color: var(--cor-de-texto);
   font-family: 'Poppins Regular', sans-serif;
  }

@media (prefers-color-scheme: dark){

   :root{
      --cor-de-fundo: #171717;
      --cor-de-texto: #D1D1D1;
      --cor-de-texto-2: #CDCDCD;
      background-color: #141414;
   }
   
   mark{
      color: #5A62FF!important;
   }
}


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

*.imagem{
  overflow: hidden;
  -webkit-border-radius: var(--texto-medio);
  -moz-border-radius: var(--texto-medio);
  border-radius: var(--texto-medio);
}

::selection{
  background: #3125D4;
  color: #eee
}

.titulo-sublinhado{
   font-size: var(--texto-grande);
   margin: 120px auto;
   width: max-content;
   text-align: center;
   border-bottom: 4px solid var(--cor-principal);
}

p.paragrafo{
   font-size: calc(var(--texto-normal) * 1.1);
   text-align: justify;
   text-indent: 1rem;
   color: var(--cor-de-texto-2);
}

mark{
  background: transparent;
  color: var(--cor-principal);
}

.pagina{
  margin: var(--margem);
  margin-top: 120px;
}

.navegacao{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: var(--cor-principal);
  -webkit-box-shadow:  0 10px 15px #00000045;
  -moz-box-shadow:  0 10px 15px #00000045;
  box-shadow:  0 10px 15px #00000045;
  z-index: 100;
}

.barra-de-navegacao{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  padding: 10px var(--margem);
  left: 0;
  top: 0;
  color: #eee;
  text-transform: uppercase;
  z-index: 100;
  background: inherit;
}

.barra-de-navegacao h2{
  font-size: calc(var(--texto-normal) * 1.2);
}

.barra-de-navegacao .hamburguer{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3px;
  width: 25px;
  background: #eee;
  position: relative;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.barra-de-navegacao .hamburguer:after,
.barra-de-navegacao .hamburguer:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: #eee;
  -webkit-border-radius: inherit;
  -moz-border-radius: inherit;
  border-radius: inherit;
  -webkit-transition: transform .3s ease;
  -moz-transition: transform .3s ease;
  -ms-transition: transform .3s ease;
  -o-transition: transform .3s ease;
  transition: transform .3s ease;
}

.barra-de-navegacao .hamburguer:before{
  top: -7px;
}

.barra-de-navegacao .hamburguer:after
{
  bottom: -7px;
}

.barra-de-navegacao .hamburguer.xis{
  background: transparent;
}

.barra-de-navegacao .hamburguer.xis:after{
   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   -o-transform: rotate(-45deg);
   transform: rotate(-45deg);
   inset: auto auto auto auto
}

.barra-de-navegacao .hamburguer.xis:before{
   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   -o-transform: rotate(45deg);
   transform: rotate(45deg);
   inset: auto auto auto auto
}

.menu{
   position: fixed;
   height: 100%;
   width: 100%;
   top: -120%;
   right: 0;
   padding: 30px;
   background: #00000095;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
   -webkit-transition: .2s ease-in;
   -moz-transition: .2s ease-in;
   -ms-transition: .2s ease-in;
   -o-transition: .2s ease-in;
   transition: .2s ease-in;
   z-index: 10;
}

.menu.abrir{
  top: 70px;
}

.menu .lista-menu{
  position: absolute;
  width: 100%;
  max-width: 300px;
  height: 100%;
  top: 0;
  right: -100%;
  background: var(--cor-de-fundo);
  padding: 20px;
  list-style: none;
  -webkit-transition: .4s ease;
  -moz-transition: .4s ease;
  -ms-transition: .4s ease;
  -o-transition: .4s ease;
  transition: .4s ease;
  -webkit-transition-delay: .3s;
  -moz-transition-delay: .3s;
  -ms-transition-delay: .3s;
  -o-transition-delay: .3s;
  transition-delay: .3s;
  overflow-y: scroll;
}

.menu.abrir .lista-menu{
  right: 0;
}

.menu .lista-menu h2{
  font-size: var(--texto-medio);
  margin: 25px 0;
}

.menu .lista-menu li{
   display: none;
   align-items: center;
   height: 50px;
   text-transform: uppercase;
   color: var(--cor-de-texto-2);
   font-size: var(--texto-normal);
   -webkit-transition: 150ms ease;
   -moz-transition: 150ms ease;
   -ms-transition: 150ms ease;
   -o-transition: 150ms ease;
   transition: 150ms ease;
}

.menu .lista-menu li.animar{
  display: flex;
}

.menu .lista-menu li a{
  padding: 5px 0;
  text-decoration: none;
  color: inherit;
  border-bottom: 2px solid transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.menu .lista-menu li.ativado a{
  border-bottom-color: var(--cor-principal);
}

.menu .lista-menu li:hover a,
.menu .lista-menu li:active a{
  background: var(--cor-principal);
  color: #eee;
  padding: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;     
}

.apresentacao{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.apresentacao .imagem{
  overflow: hidden;
  width: max-content;
  height: max-content;
  display: flex;
  -webkit-box-shadow:  0 10px 15px #00000045;
  -moz-box-shadow:  0 10px 15px #00000045;
  box-shadow:  0 10px 15px #00000045;
}

.apresentacao .imagem img{
  width: 100%;
  max-width: 300px;
}

.apresentacao .conteudo{
  width: 100%;
  height: 100%;
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.apresentacao h2{
  font-size:  var(--texto-medio);
  width: 100%;
}

.apresentacao p.cnpj{
  margin-top: 10px;
  font-size: var(--texto-normal);
  width: 100%;
}

.apresentacao p.info{
   margin-top: 50px;
   background: var(--cor-principal);
   color: #eee;
   padding: 15px;
   border-top-left-radius: 2rem;
   border-bottom-right-radius: 2rem;
}

.sobre{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.sobre .flexbox{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.sobre .imagem{
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sobre .imagem img{
   width: 100%;
   max-width: 400px;
   -webkit-border-radius: 1.2rem;
   -moz-border-radius: 1.2rem;
   border-radius: 1.2rem;
  -webkit-box-shadow:  0 10px 15px #00000045;
  -moz-box-shadow:  0 10px 15px #00000045;
  box-shadow:  0 10px 15px #00000045;
}

.conhecimentos .flexbox{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  height: max-content;
}

.conhecimentos .imagem{
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-box-shadow:  0 10px 15px #00000045;
  -moz-box-shadow:  0 10px 15px #00000045;
  box-shadow:  0 10px 15px #00000045;
}

.conhecimentos .imagem img{
  width: 100%;
  max-width: 300px;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
}

.acordeon{
  background: var(--cor-de-fundo);
   -webkit-border-radius: 1rem;
   -moz-border-radius: 1rem;
   border-radius: 1rem;
   overflow: hidden;
   margin-bottom: 10px;
   -webkit-box-shadow: 0 0 15px #00000095;
   -moz-box-shadow: 0 0 15px #00000095;
   box-shadow: 0 0 15px #00000095;
   cursor: pointer;
   -webkit-tap-highlight-color: transparent;
}

.acordeon.expandir{
  padding-bottom: 30px;
}

.acordeon header{
   display: flex;
   align-items: center;
   justify-content: space-between;
   height: 70px;
   padding: 15px;
   background: var(--cor-principal);
   color: #eee; 
   -webkit-border-radius: 1rem;
   -moz-border-radius: 1rem;
   border-radius: 1rem;
}

.acordeon.expandir p{
  margin-top: 30px;
  height: var(--altura-do-acordeon);
  opacity: 1;
  -webkit-transition: height .4s ease;
  -moz-transition: height .4s ease;
  -ms-transition: height .4s ease;
  -o-transition: height .4s ease;
  transition: height .4s ease;
}

.acordeon header i:before{
   content: '\ebc0'
}

.acordeon.expandir header i:before{
  content: '\eb8b'
}

.acordeon p{
  padding: 0 15px;
  height: 0;
  opacity: 0;
  -webkit-transition: height .4s ease;
  -moz-transition: height .4s ease;
  -ms-transition: height .4s ease;
  -o-transition: .4s ease;
  transition: .4s ease;
}

.apoio p{
   background: var(--cor-principal);
   color: #eee;
   padding: 15px;
   border-top-right-radius: var(--texto-medio);
   border-bottom-right-radius: var(--texto-medio);
   margin-bottom: 80px;
}

.projetos .aviso{
   margin: 50px auto;
   margin-bottom: 100px;
   background: #CA8503;
   padding: 15px;
   color: #FFEFD1;
   -webkit-border-radius: var(--texto-normal);
   -moz-border-radius: var(--texto-normal);
   border-radius: var(--texto-normal);
   max-width: max-content;
  -webkit-box-shadow:  0 10px 15px #00000045;
  -moz-box-shadow:  0 10px 15px #00000045;
  box-shadow:  0 10px 15px #00000045;
}

.projetos .aviso h2{
  text-transform: uppercase;
  font-size: var(--texto-medio);
}

.projetos .aviso p{
  font-size: var(--texto-normal);
}

.apoio h3{
   margin: 30px 0;
   text-align: right;
   font-size: calc(var(--texto-normal) * 1.1);
}

.apoio h2{
  text-align: right;
  font-size: var(--texto-medio);
}

.apoio .imagem{
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.apoio .imagem img{
  width: 100%;
  max-width: 400px;
  -webkit-border-radius: .5rem;
  -moz-border-radius: .5rem;
  border-radius: .5rem;
  -webkit-box-shadow:  0 10px 15px #00000045;
  -moz-box-shadow:  0 10px 15px #00000045;
  box-shadow:  0 10px 15px #00000045;
}

footer{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: 100px;
  background: var(--cor-principal);
  color: #eee;
  height: 400px;
  width: 100%;
  gap: 20px;
  position: relative;
}
footer .redes-sociais nav{
  display: flex;
  align-items: center;
  justify-content: center;
  width: max-content;
  gap: 0 20px;
}

footer h3{
  font-size: calc(var(--texto-normal) * 1.5);
  text-transform: uppercase
}

.redes-sociais{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: column;
  width: 100%;
  height: 120px;
}


footer .redes-sociais nav a{
  width: calc(var(--texto-grande) * 1.2);
  height: calc(var(--texto-grande) * 1.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--texto-normal) * 1.3);
  text-decoration: none;
  color: var(--cor-principal);
  background: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  -webkit-tap-highlight-color: transparent;
}

footer .redes-sociais nav a:hover,
footer .redes-sociais nav a:active{
  color: #fff;
}

footer .redes-sociais nav a.logo-instagram:hover,
footer .redes-sociais nav a.logo-instagram:active{
  background: #DA1264;
}

footer .redes-sociais nav a.logo-facebook:hover,
footer .redes-sociais nav a.logo-facebook:active{
  background: #0059FF;
}

footer .redes-sociais nav a.logo-whatsapp:hover,
footer .redes-sociais nav a.logo-whatsapp:active{
  background: #029F31;
}


@media screen and (min-width: 768px){
   :root{
      --margem: 30px
   }
   
   .menu .lista-menu{
     max-width: 500px;
   }
   
   .apresentacao{
     align-items: center;
     justify-content: center;
     gap: 50px;
   }
   
   .apresentacao .imagem{
      width: max-content;
      height: 300px;
   }
   
   .apresentacao p{
     margin-bottom: 0;
   }
   
   .apresentacao .conteudo{
      width: calc(100% - 350px);
      height: 300px;
      margin-top: 0;
   }
   
   
   .sobre .flexbox{
     gap: 0 20px
   }
   
   .sobre .imagem{
    width: max-content;
    align-items: flex-start;
   }
   
   .sobre p{
     width: calc(100% - 420px);
   }
   
   .conhecimentos .imagem{
     height: 100%;
   }
   
   .conhecimentos .imagem img{
     height: inherit;
   }
   
   .conhecimentos .paragrafo{
     width: calc(100% - 350px);
   }
}

@media screen and (min-width: 840px)
{
   .navegacao .hamburguer{
     display: none;
   }
   
   .menu{
     position: relative;
     top: 0!important;
     right: 0!important;
     z-index: 100;
     width: 100%;
     height: 70px;
     background: transparent;
     margin: 0;
     padding: 0;
     margin-right: var(--margem);
   }
   
   .menu .lista-menu{
     display: flex;
     align-items: center;
     justify-content: flex-end;
     position: static;
     width: max-content;
     max-width: none;
     padding: 0;
     margin: 0;
     background: inherit;
     gap: 0 10px
   }
   .menu .lista-menu li{
     display: inline-flex;
     color: #eee;
   }
   
   .menu .lista-menu li a:hover,
   .menu .lista-menu li a:active{
     -webkit-border-radius: 0;
     -moz-border-radius: 0;
     border-radius: 0;
     padding: 0;
   }
   
   .menu .lista-menu li.ativado a{
     border-bottom-color: #eee;
   }
   
   .menu .lista-menu h2{
     display: none;
   }
}

@media screen and (min-width: 1025px){
   :root{
      --margem: calc( (100vw  - 1024px) / 2 )
   }

    .apresentacao h2{
     font-size: var(--texto-grande);
   }
   

}