@charset "utf-8";
/* CSS Document */

body{
    
    margin: 0px;
    padding: 0px;
    font-family: 'Dosis', sans-serif;
    background: #FFF;
   

}

#mobile{
    
    display: none;
}

body::-webkit-scrollbar { width: 10px; background: #fff;  }
body::-webkit-scrollbar-track { background: rgba(0,0,0,0.1); }
body::-webkit-scrollbar-thumb {  background: #4BC7EF;  }


mark{
  
    background: #00B5D1;
    color: white;
 
font-family: "Alkatra", system-ui;
    border-radius: 8px;
   

}

.circular{
    
    width: 40px;
      height: 40px;
      border: 2px solid #333; /* cor e espessura do contorno */
      border-radius: 100px;     /* transforma em círculo */
    
}


a {
    
    color: inherit;
    text-decoration: none;
}

@keyframes 
ut{
  from{
  transform: translateX(-150px);
  opacity: 0;
  }
  to{
  transform: translateX(0);
  opacity: 1;
  }
}

@keyframes 
up{
  from{
  transform: translateX(150px);
  opacity: 0;
  }
  to{
  transform: translateX(0);
  opacity: 1;
  }
}

@keyframes 
mod{
  from{
  transform: translatey(150px);
  opacity: 0;
  }
  to{
  transform: translatey(0);
  opacity: 1;
  }
}

.efeito3D {
    
    text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}

 .h2{
        
     
        margin-bottom: 0px;
     margin-top: 0px
    }
    
 
    

.logo{
    
    width: 12%;
    margin-left: -140px
}


.topo{
    
    background: #000;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    margin: auto;
    color: #000;
    font-family: 'Exo 2', sans-serif; 
    letter-spacing: 0.3px;
    
  
}

.margem75{
    
    width: 95%;
    margin: auto;
}


.espacoT{
    
    display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: space-around;
align-items: center ;
align-content: center ;

}

.espaco{
    
    display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: center;
align-items: center ;
align-content: center ;

}

.espaco2{
    
display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: center ;
align-items: center ;
align-content: flex-start;

}


.espacoTopmenu{
    
    padding-top: 5px;
    color: #FFF;
    text-decoration: none;
    letter-spacing: 1.3px;
    font-weight: 400
     
}

.espacoTopmenu:hover{
    
    padding-top: 5px;
    color:  #3cb1c0 ;
    text-decoration: none;
    letter-spacing: 1.3px;
     
}

.espacoTopmenu:hover{
    
    padding-top: 5px;

}

.BTfaleconosco{
    
    background: #fff; 
    padding: 8px;
    color: #000;
    border-radius: 5px;
    margin-right: -130px
    
}

.BTfaleconosco:hover{
    
    background: #35D960; 
    padding: 8px;
    color: #fff; 
    border-radius: 5px;
   
    
}


.topIndex{
    
    width: 100%;
    height: 320px;
    background-image: url("img/BG-index.png");
    background-size: cover;
    background-color: #3cb1c0;
    background-repeat: no-repeat;
    margin-top: 5%;
    font-family: 'Exo 2', sans-serif; 
}


.tituloidex{
    
   
}


.primeira{
    
      background-color: #3cb1c0;
    background-size: cover;
    background-repeat: no-repeat;
        
    padding-top: 20px;
    padding-bottom: 10px;
    
}

.bt{
    
    width: 10%;
    animation: ut 3.5s 1;
    position: absolute;
    bottom: 5px
    
}

.bt2{
    
    width: 15%;
    animation: ut 3.5s 1;
}

.btw{
    
    width: 25%;
    margin: auto
}


.cta{
    
    padding: 5px;
    border: 2px #fff solid;
    border-radius: 10px;
    width: 60%
  
}

.cta:hover{
    
    padding: 10px;
    border: 2px #fff solid;
    background: #fff;
    color: cadetblue
  
}

.ctaPreto{
    
    padding: 10px;f
    border: 2px #999 solid;
    border-radius: 4px;
    padding-left: 20px;
    padding-right: 20px;
    color: #555555

  
}

.ctaPreto:hover{
    
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border: 2px cadetblue solid;
    background: #fff;
    color: cadetblue
  
}


#img1 {
    
    width: 43%;
    animation: up 3.5s 1;
    margin-left: 30px;
    border-bottom: #4BC7EF 4px solid;
    border-top: #4BC7EF 4px solid;
    border-radius: 5px;
}

#img2 {
    
    width: 45%;
 
    
}

#img3 {
    
    width: 45%;
    border-bottom: #4BC7EF 4px solid;
    border-top: #4BC7EF 4px solid;
  
   margin-top: 50px
    
}


#texto1{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 25px;
    line-height: 48px;
    width: 35%;
    animation: mod 3.5s 1;
    margin-top: 10px
}

#textoComercial{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 25px;
    line-height: 48px;
    width: 40%;
    animation: mod 3.5s 1;
    margin-top: 10px
}

#textoVendas{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 25px;
    line-height: 48px;
    width: 55%;
    animation: mod 3.5s 1;
    margin-top: 10px
}

#texto2{
    
    font-family: 'Exo 2', sans-serif;    
    color: #333;
    font-size: 22px;
    line-height: 35px;
    width: 30%;
  
  
}

#texto2-2{
    
    font-family: 'Exo 2', sans-serif;    
    color: #333;
    font-size: 15px;
    line-height: 33px;
    letter-spacing: 1px;
    width: 30%;;
    margin-top: 0px;
    border: solid #ccc 1px;
    border-radius: 5px;
    margin-right: 35px;
    padding: 10px;
    background:#fff;
        
        
  box-shadow:
    0px -2px 8px 0px rgba(0, 0, 0, 0.3),
    0px 0px 0px 0px rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(undefined);
  -webkit-backdrop-filter: blur(undefined);

  
}

#texto2-2:hover{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 15px;
    line-height: 33px;
    letter-spacing: 1px;
    width: 30%;;
    margin-top: 0px;
    border: solid #ccc 1px;
    border-radius: 5px;
  
    padding: 10px;
    background:#23BDBB
  
}


 


#texto3{
    
    font-family: 'Exo 2', sans-serif;    
    color: #222;
    font-size: 36px;
    
    width: 100%;
    
  
}

#texto4{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 34px;
    line-height: 45px;
    width: 100%;
    font-weight: 500
    
  
}

#texto6{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 30px;
    
    width: 40%;
    
  
}

#texto7{
    
    font-family: 'Exo 2', sans-serif;    
    color: #000;
    font-size: 25px;

    width: 100%;
    
  
}

#texto8{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 22px;

    width: 50%;
    
    margin-top: 1%
  
}

#texto8-2{
    
    font-family: 'Exo 2', sans-serif;    
    color: #000;
    font-size: 22px;

    width: 50%;  
}

#texto8-3{
    
    font-family: 'Exo 2', sans-serif;    
    color: #000;
    font-size: 28px;

    width: 100%;  
}

.ap{
    
    width: 25%;
}

.segunda{
    

    background: #FFF;
   
    


}


.terceira{
    
    min-height: 5vh;
    background:#222;
    padding-top: 20px;
    padding-bottom: 20px;
    width: 100%;
    
  
    
}

.quarta{
    
    min-height: 30vh;
    background:#111;
    padding-top: 70px
  
    
}

.quinta{
    
    min-height: 45vh;
    background:#fafafa;
    padding-top: 70px;
    
  
    
}

.sexta{
    
    min-height: 60vh;
    background: #000;
    background-image: url("img/fundo3.png");
    background-size: contain;
    padding-top: 0px
  
    
}


.setima{
    
    min-height: 100vh;
    background: #fafafa;
    
    padding-top: 20px;
}

.oitava{
    
    min-height: 30vh;
    background: #222;
    padding-top: 30px;
    padding-bottom: 30px;
}

.nona{
    
    min-height: 30vh;
    
    background: #fafafa;
    padding-top: 30px;
    padding-bottom: 0px;
    
   
}


.atendimento{
    
    width: 18%;
    margin: auto
}

.campo{
    
    width: 45%;
    
    
}

.campo2{
    
    width: 100%; 
    text-align: center;
    border: none;
    border-bottom: solid 3px  #4BC7EF;
    padding: 10px;
    background: #fafafa
    
}

.item{
    
    width: 12%;
    margin-top: 30px;
    
}

.boxIcone{
    
    width: 31.5%;
    font-size: 21px;
    margin-right: 5px;
    
display: flex;
flex-direction: column;
align-items: center ;
align-content: flex-start;
    
}



.BTcontato{
    
   
    border: none; 
    cursor: pointer; 
    width: 25%; 
    background: #4BC7EF; 
    padding: 10px; 
    order-radius: 4px; 
    margin-top: 15px
}

textarea{
    
    width: 100%; 
    margin: auto; 
    border: solid 2px #F0F0F0; 
    height: 200px; 
    padding: 10px; 
    border-radius: 4px; 
    resize: vertical
}


.rodape{
    
    width: 100%;
    padding: 20px 0px 20px 0px;
    background: #4BC7EF;
    color: #fff;
   

}

.redes{
    
    width: 10%;;
  
}

.info{
    
    margin-left: 10%;
    margin-right: 10%;
}

.bt-w-branco{
    
    font-weight: 100; 
    padding: 10px;  
    width: 40%; 
    margin: auto; 
    border-radius: 25px;
    background: #F2F2F2; 
    border: 2px inset #bbb;
}

.bt-w-branco:hover{
    
    font-weight: 100; 
    padding: 10px;  
    width: 40%; 
    margin: auto; 
    border-radius: 25px;
    background: #F2F2F2; 
    border: 2px outset #eee;
}




.someDesk{
    
    display: none;
}


.zoom{
    
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;

}


.zoom:hover{
  -moz-transform: scale(1.07);
  -webkit-transform: scale(1.07);
  transform: scale(1.07);
}

.espacoTOP {
    width: 100%; 
    height: 50px
}

.espacoBOTTOM{
    width: 100%; 
    height: 40px
}


.icone{
    
    width: 18%;
    display: inline-block;
    margin-right: 35px
}

.margemIcone{
    
    width: 90%;
}

.tituloIcone{
    
    color: #fff; 
    font-size: 14px; 
    letter-spacing: 1px;
     font-family: 'Exo 2', sans-serif;
    font-weight: 400
}

.tituloIcone2{
    
    color: #fff; 
    font-size: 14px; 
    letter-spacing: 1px;
     font-family: 'Exo 2', sans-serif;
    font-weight: 400
}


.parte3{
 
    
    background-color: #328a96;
}


.sobre{ 
    
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400; 
    font-size: 14px; 
    width: 66%; 
    margin: auto; 
    text-align: justify;
    line-height: 25px;
}

.IMGsobre{
    
    width:28%;
    float: left; 
    margin-right: 30px;
    margin-bottom: 10px;
    
}

.Qsomos{
    
    text-transform: uppercase; 
    color: #000;  
    font-size: 26px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900;
}

.infoFooter{
    
    width: 100%;
    background-color: #ccc;
    padding-top: 10px;
    padding-bottom: 10px
}

.LogoSobre{
    
    width: 30%;
    margin: auto
}

.espacoSOBRE{
    
    width: 70%;
    margin: auto;
    padding-top: 20px
}

.proposito{
    
    width: 100%;
    padding: 5px;
    margin: 10px;
    margin-bottom: 30px;
    border-bottom: 3px solid #fff;
    color:#fff;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    font-size: 14px;
    
    display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: center ;
align-items: center ;
align-content: center ;
    
}

.iconeProp{
    
    
    width: 20%;
    
    margin-bottom: 20px
    
}

.boxSobre{
    
    width: 75%;
    text-align: justify;
    margin-bottom: 25px
}

.sobreAzul{
    
    width: 100% ;
    background-image: url('img/BG-sobre-azul.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-color: #48B9C4;
}

.iconSolucoes{
    
    width: 25%
}

@media only screen and (min-width: 100px) and  (max-width: 750px)  {
    
    .iconSolucoes{
    
    width: 40%
}
    
    .sobreAzul{
    
    width: 100% ;
    background-image: url('img/BG-sobre-azul-M.png'); 
    background-size: contain; 
    background-repeat: no-repeat; 
    background-color: #48B9C4;
}
    
    .espacoSOBRE{
    
    width: 80%;
    margin: auto;
    padding-top: 0px
}
    
    .boxSobre{
    
    width: 100%;
    text-align: justify;
    margin-bottom: 25px
}
    
    .iconeProp{
    
    
    width: 100%;
    
    margin-bottom: 20px
    
}

    
    
    .LogoSobre{
    
    width: 70%;
    margin: auto
}
    
    .proposito{
    
    width: 100%;
    padding: 0px;
    margin: 0px;
    margin-bottom: 30px;
    border-bottom: 3px solid #fff;
    color:#fff;
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    font-size: 14px;
    
    display: flex ;
flex-direction: column;
flex-wrap: wrap ;
justify-content: center ;
align-items: center ;
align-content: center ;
    
}
    
.Qsomos{
    
    margin-top: 20px;
    text-transform: uppercase; 
    color: #000;  
    font-size: 26px; 
    font-family: 'Montserrat', sans-serif; 
    font-weight: 900;
}
    
.sobre{ 
    
    font-family: 'Montserrat', sans-serif; 
    font-weight: 400;
    font-size: 14px; 
    width: 90%; 
    margin: auto; 
    text-align: justify; 
    line-height: 25px;
    
}

.IMGsobre{
    
    width:80%;
    float: left; 
    margin-right: 0px;
    margin-bottom: 30px;
    margin-left: 25px
}
    
    
    .margemIcone{
    
    width: 900%;
}
    
    .icone{
    
    width: 60%;
    display: inline-block;
    margin-right: 0px;
    margin-top: 10px
}
    
    .espacoTOP {
    width: 100%; 
    height: 5px
}

.espacoBOTTOM{
    width: 100%; 
    height: 5px
}
    
    .someDesk{
    
    display: inherit;
}
    
   .bt-w-branco{
    
    font-weight: 100; width: 85%; margin: auto
}
    
 .rodape{
    
    width: 100%;
    padding: 10px 0px 0px 0px;
    background: #4BC7EF;
    color: #fff;
   

}
    
    .redes{
    
    width: 40%;
    margin-bottom: 20px;
  
}

.info{
    
    margin-left: 0px;
    margin-right: 0px;
    
}
    
    .alinha{
        
display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: center ;
align-items: center ;
align-content: flex-end ;
    }
    
    .logo{
    
    width: 35%;
        display: inline-block; 
        margin-right: 13%;
        margin-bottom: 10px;
        margin-top: 20px;
        margin-left: -1px
    }
    
    body{
    
    margin: 0px;
    padding: 0px;
    font-family: 'Sofia Sans Condensed', sans-serif;
    background: #000

}
    
    #mobile{
    
    display: inherit;
}
    
    textarea{
    
    width: 93%; 
    margin: auto; 
    border: solid 2px #F0F0F0; 
    height: 200px; 
    padding: 10px; 
    border-radius: 4px; 
    resize: vertical
}
    
    .BTcontato{
    
    background: none; 
    border: none; 
    cursor: pointer; 
    width: 65%; 
    background: #4BC7EF; 
    padding: 10px; 
    order-radius: 4px; 
    margin-top: 15px
}
    
    .margem75{
    
    width: 90%;
    margin: auto;
}
    
    .espaco{
    
    display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: center;
align-items: center ;
align-content: flex-start ;
        
        padding-top: 10px

}
    
    .espaco2{
    
   display: flex ;
flex-direction: row ;
flex-wrap: wrap ;
justify-content: center ;
align-items: center ;
align-content: flex-start;
          padding-top: 10px

}
    
    .someMobile {
        
        display: none
    }
    
    
    
.topIndex{
    
    width: 100%;
    height: 180px;
    background-image: url("img/BG-index-mobile.png");
    background-size: cover;
    background-color: #328a96;
    background-repeat: no-repeat;
    margin-top: 5%;
    font-family: 'Exo 2', sans-serif; 
}

    
    .primeira{
        
        padding-top: 20px;
        padding-bottom: 40px;
        background-size: cover;
        margin-top: 0px;
        background-repeat: no-repeat;
        background: #328a96;


}
    
    #img1 {
    
    width: 95%;
    margin: auto;
    animation: up 3.5s 1;
    
}
 
    #texto1{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 22px;
    line-height: 45px;
    width: 96%;
    margin: auto;
   
    animation: mod 3.5s 1;
}
    
    #textoVendas{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 25px;
    line-height: 48px;
    width: 90%;
    animation: mod 3.5s 1;
    margin-top: 10px
}
    
    #textoComercial{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 25px;
    line-height: 48px;
    width: 90%;
    animation: mod 3.5s 1;
    margin-top: 10px
}

    .bt{
    
    width: 60%;
    animation: ut 3.5s 1;
}
    

.segunda{
    
    min-height: 70vh;
  
    background: #fff;
    width: 100%;
    padding-top: 20px;
        padding-bottom: 20px;
    background-repeat: no-repeat
    
}

    #texto2{
    
    font-family: 'Exo 2', sans-serif;    
    color: #000;
    font-size: 18px;
    line-height: 35px;
    width: 90%;
        margin: auto
  
}
       
#texto2-2{
    
    font-family: 'Exo 2', sans-serif;    
    color: #222;
    font-size: 15px;
    line-height: 33px;
    letter-spacing: 1px;
    width: 85%;;
    margin-top: 10px;
    border: solid #ccc 1px;
    border-radius: 5px;
    margin-right: 0px;
    padding: 10px;
    
    background:#fff
  
}

#texto2-2:hover{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 15px;
    line-height: 33px;
    letter-spacing: 1px;
    width: 85%;;
    margin-top: 0px;
    border: solid #ccc 1px;
    border-radius: 5px;
  
    padding: 10px;
    background:#23BDBB
  
}
    
    
.zoom{
    
  -moz-transition: all 0.2s;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;

}


.zoom:hover{
  -moz-transform: scale(1.0);
  -webkit-transform: scale(1.0);
  transform: scale(1.0);
}
    
.terceira{
    
    min-height: 10vh;
    background:#222;
    padding-top: 10px;
    padding-bottom: 10px;
    background-repeat: no-repeat
  
    
}    
    #img3 {
    
    width: 95%;
  
   margin-top: 30px;
        margin-bottom: 40px
            
}

    
#texto3{
    
    font-family: 'Exo 2', sans-serif;    
    color: #222;
    font-size: 36px;
    
    width: 100%;
    
  
}
    
    .item{
    
    width: 45%;
    margin-top: 10px;

}
    
    
.bt2{
    
    width: 60%;
    animation: ut 3.5s 1;
}
    
    #texto4{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 25px;
    line-height: 40px;
    width: 97%;
        margin: auto;
    font-weight: 500;
        margin-top: 0px
    
  
}
    
.quarta{
    
    min-height: 45vh;
    background:#111;
    padding-top: 40px

}
    
    .quinta{
    
    min-height: 45vh;
    background:#fafafa;
    padding-top: 20px;
    
  
    
}
    
    .boxIcone{
    
    width: 70%;
    font-size: 21px;
    margin-bottom: 30px;
    
display: flex;
flex-direction: column;
align-items: center ;
align-content: flex-start;
    
}

    #texto6{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 18px;
        line-height: 35px;
    
    width: 90%;
        margin-top: 20px;
        margin-bottom: 20px;
    
  
}
    
    .atendimento{
    
    width: 45%;
    margin: auto
}

    .h2{
        
        font-size: 25px;
        margin-bottom: 0px;
        margin-top: 10px;
    }
    
    .missao{
        
        font-size: 22px;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    
   .setima{
    
    min-height: 75vh;
    background: #fafafa;
    padding-top: 0px;
    padding-top: 20px;
} 
    
#texto7{
    
    font-family: 'Exo 2', sans-serif;    
    color: #000;
    font-size: 20px;

    width: 100%;
    
  
}
    
    .campo{
    
    width: 95%;
        margin: auto
    
    
}
    
    .campo2{
    
    width: 95%; 
    margin: auto;
    text-align: center;
    border: none;
    border-bottom: solid 3px  #4BC7EF;
    padding: 10px;
    background: #fafafa
    
}
    
.btw{
    
    width: 80%;
    margin: auto
}

    .oitava{

    background: #222;
    
    padding-top: 20px;
    padding-bottom: 20px;
}

    #texto8{
    
    font-family: 'Exo 2', sans-serif;    
    color: #fff;
    font-size: 20px;

    width: 90%;
        margin: auto;
    
    margin-top: 6%
  
}

#texto8-2{
    
    font-family: 'Exo 2', sans-serif;    
    color: #000;
    font-size: 20px;

    width: 90%;  
}

    .nona{
    

    background: #fafafa;
    padding-top: 20px;
    padding-bottom: 20px;
    
}
.campo2C{
    
    width: 90%; 
    text-align: center;
    border: none;
    border-bottom: solid 3px  #4BC7EF;
    padding: 10px;
    background: #fafafa
    
}

    
    
}