.hero {
 width:100%;
 height:240px;
 margin-top:110px;
 background-image:url(/imagens/layout/bgheroimg.webp);
 background-position:center;
 background-size:cover;
 background-repeat:no-repeat;
 position:relative;
}

.herotxt {
 position:absolute;
 top:50%;
 left:50%;
 transform:translateX(-50%) translateY(-50%);
 width:100%;
 max-width:800px;
 text-align:center;
 padding:0 20px;
 font-size:2.4em;
 line-height:1.3em;
 color:#fff;
 text-shadow:2px 3px 5px rgba(0,0,0,0.8);
}

.intro {
 width:100%;
 max-width:930px;
 margin:0 auto;
 padding:60px 20px;
}

.introtxt {
 font-size:1.5em;
 font-weight:300;
 line-height:1.2em;
}

.introbot {
 display:inline-block;
 width:100%;
 max-width:240px;
 background-color:var(--cor-dois);
 border-radius:5px;
 text-align:center;
 padding:13px 10px;
 color:#fff;
 font-size:0.9em;
 letter-spacing:0.5px;
 transition:0.3s;
}

.introbot:hover {
 background-color:var(--cor-escura);
 color:#fff;
}

.introbox {
 flex:1;
 background-color:#fff;
 border:1px solid #c3c0ad;
 padding:20px;
 margin:10px;
}

.introbox-num {
 display:inline-block;
 vertical-align:top;
 font-size:3.2em;
 font-weight:700;
 color:var(--cor-escura);
 line-height:1em;
 letter-spacing:-0.05em;
}

.introbox-txt {
 display:inline-block;
 vertical-align:top; 
 padding-left:10px;
 padding-top:5px;
 font-size:1.1em;
 line-height:1.2em;
 color:var(--cor-dois);
}

.clientes {
 width:100%;
 background-color:#fff;
 padding:50px 20px;
}

.clientelogo {
 width:100%;
 max-width:165px;
 margin:10px 0;
 filter:grayscale(1);
 cursor:pointer;
}

.clientelogo:hover {
 filter:none;
}

.segmentos {
 width:100%;
 max-width:1350px;
 margin:0 auto;
 padding:70px 20px;
}

.segmentosbox {
 flex:1;
 max-width:400px;
 min-width:290px;
 background-color:#fff;
 box-shadow:0 0 15px rgba(0,0,0,0.1);
 margin:25px 20px;
 position:relative;
}

.segmentosbola {
 float:right;
 width:60px;
 height:60px;
 background-color:var(--cor-escura);
 border-radius:30px;
 border:3px solid #fff;
 text-align:center;
 padding-top:14px;
 margin-top:-35px;
 position:absolute;
 right:25px;
}

.segmentosico {
 width:25px;
 filter:invert() brightness(100);
}

.segmentostxt {
 display:inline-block;
 padding:40px 25px 25px;
 font-weight:300;
 font-size:1.3em;
 line-height:1.2em;
 letter-spacing:0.5px;
}

.segmentosbot {
 display:inline-block;
 width:100%;
 background-color:var(--cor-dois);
 border-radius:5px;
 text-align:center;
 margin-top:25px;
 padding:6px;
 font-size:0.7em;
 font-weight:400;
 color:#fff;
 transition:0.3s;
}

.segmentosbot:hover {
 background-color:var(--cor-escura);
 color:#fff;
}

.valores {
 width:100%;
 background-color:var(--cor-escura);
 padding:45px 20px;
}

.valoresbox {
 flex:1;
 min-width:240px;
 background-color:var(--cor-escura);
 border:1px solid var(--cor-base);
 border-radius:10px;
 margin:40px 40px 20px;
 padding:0 25px 30px;
 text-align:left;
 font-weight:300;
 font-size:1.1em;
 color:#fff;
 line-height:1.3em;
 letter-spacing:0.3px;
}

.valoresbola {
 display:inline-block;
 width:70px;
 height:70px;
 background-color:var(--cor-escura);
 border:2px solid var(--cor-base);
 border-radius:40px;
 text-align:center;
 padding-top:8px;
 margin-top:-35px;
 margin-bottom:20px;
}

.valoresico {
 width:100%;
 max-width:50px;
}

.tecnicas {
 width:100%;
 max-width:1350px;
 margin:0 auto;
 padding:70px 20px;
}

.tecnicasbox {
 flex:1;
 max-width:400px;
 min-width:290px;
 background-color:#fff;
 box-shadow:0 0 15px rgba(0,0,0,0.1);
 margin:20px;
 padding:10px 10px 15px;
 font-weight:300;
 font-size:1.05em;
 line-height:1.3em;
 letter-spacing:0.5px;
 transition:0.3s;
}

.tecnicasbox:hover {
 color:var(--cor-escura);
 translate:0 -5px;
}

.video {
 width:100%;
 max-width:890px;
 margin:0 auto;
 padding:0 20px 150px;
}

.subtit {
 font-size:1.1em;
 color:var(--cor-dois);
 line-height:1em;
 letter-spacing:0.5px;
}

.titulo {
 font-size:2.4em;
 font-weight:400;
 color:var(--cor-escura);
 line-height:1.1em;
}

.titraco {
 width:90px;
 height:3px;
 background-color:var(--cor-dois);
 margin:10px 0;
}

/*********/

@media screen and (max-width:1200px) {
 .clientes {
  padding:40px 20px;
 }
 .clientelogo {
  max-width:110px;
 }
 .segmentos, .tecnicas {
  padding:40px 20px;
 }
 .segmentosbox {
  margin:15px 10px 30px;
 }
 .segmentostxt {
  font-size:1.2em;
 }
 .tecnicasbox {
  margin:20px 10px;
 }
}

@media screen and (max-width:900px) {
 .hero {
  margin-top:90px;
 }
 .herotxt {
  font-size:2em;
 }
 .intro {
  padding:30px 20px 40px;
 }
 .introtxt {
  font-size:1.2em;
 }
 .introbox {
  margin:10px 5px;
  padding:15px 10px;  
 }
 .introbox-num {
  font-size:2.5em;
 }
 .introbox-txt {
  padding-left:6px;
  padding-top:3px;
  font-size:1em;
 }
 .valores {
  padding:35px 20px;
 }
 .valoresbox {
  min-width:250px;
  margin:40px 20px 20px;
 }
 .video {
  padding:0 20px 100px;
 }
}

@media screen and (max-width:700px) {
 .hero {
  margin-top:55px;
 }
 .herotxt {
  font-size:1.6em;
 }
 .introbox {
  flex:none;
  display:inline-block;
  width:100%;
  max-width:350px;
  margin:0 0 10px;
 }
 .clientes {
  padding:25px 20px;
 }
 .segmentostxt {
  padding:35px 15px 15px;
  font-size:1.1em;
 }
 .segmentosbot {
  font-size:0.75em;
 } 
 .valores {
  padding:30px 20px;
 }
 .valoresbox {
  min-width:220px;
  margin:40px 10px 20px;
  padding:0 15px 20px;
  font-size:1em;
 }
 .tecnicasbox {
  max-width:300px;
  min-width:250px;
  margin:15px 10px;
  padding:10px;
  font-size:1em;
 }
 .subtit {
  font-size:0.9em;
 }
 .titulo {
  font-size:2em;
 }
 .titraco {
  height:2px;
  margin:5px 0;
 }
}

@media screen and (max-width:500px) {
 .hero {
  height:200px;
 }
 .herotxt {
  font-size:1.3em;
 }
 .intro {
  padding:20px 15px 30px;
 }
 .introtxt {
  font-size:1.1em;
 }
 .introbot {
  max-width:200px;
  padding:10px 5px;
  font-size:0.8em;
 }
 .introbox {
  max-width:none;
  text-align:center;
  margin:0 0 10px;
 }
 .introbox-num {
  font-size:2em;
 }
 .introbox-txt {
  text-align:left;
  padding-top:0;
  font-size:0.9em;
 }
 .clientes {
  font-size:0.8em;
 }
 .segmentos, .tecnicas {
  padding:30px 20px;
 }
 .segmentosbox {
  min-width:250px;
  margin:15px 0 25px;
 }
 .segmentostxt {
  padding:30px 15px 15px;
  font-size:1.05em;
 }
 .segmentosbot {
  margin-top:20px;
  padding:8px;
  font-size:0.8em;
 } 
 .valoresbox {
  margin:40px 5px 10px;
 }
 .valoresbola {
  width:56px;
  height:56px;
  padding-top:6px;
  margin-top:-30px;
  margin-bottom:15px;
  margin-left:5px;
}
 .valoresico {
  max-width:40px;
 }
 .tecnicasbox {
  max-width:400px;
  margin:15px 0;
 }
}