@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;900&display=swap&format=woff&format=truetype");
 
html {
  /* a cada 1rem transforme 10px */
  font-size: 63%;   
  scroll-behavior: smooth; /* EFEITO DE ROLAR A TELA SUAVE */
  
}
html,
body { /* margin: 0 auto; */  
  scroll-snap-stop:initial;  
  font-family: "Montserrat";
  overflow-x: hidden; /* IMPEDE O SCROLL NO EIXO X HORIZONTAL NAO USADO EM SLAID */
  /* suaviza font CINZA - RECUSO NOVO */
  text-rendering: optimizelegibility;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;    
                                        -o-font-smoothing: grayscale;          -ms-font-smoothing: grayscale;       

  background: url("../images/fundo-nuvem-topo-transp-nevoip.png"), linear-gradient(73.83deg, #0D142B 27.18%, #21BC8A 97.42%) no-repeat;
  background-attachment: fixed; background-position: center center;
}  
header {    /* FALTA GERA PEQUENA ROLAGEM HOR 8px*/
  width: 100%; 
  height: 12vh; /* height: 12vh; */
  display: flex;   
  align-items: center; 
  justify-content: center;
  position: absolute; 
  background: transparent;  /* red */
  z-index: 10;   /*  border: .1rem red solid; */
}
.sec-header { /* width: 100%;   max-width: 98rem; *//* c/ limite de expanção máx dos elementos a 980px   width: min(90vw, 98rem);  min-width: 100%; */  
  width: min(90vw, 98rem);  /* border: .1rem blue solid; */
  /* min-width: 100%; */   
  display: flex;
  margin: 0 auto;   
  align-items: center; 
  position: relative;  
  justify-content: space-between; /* espaço grande entre logo e menu */  
  margin-top: 3.75rem;  /* 60 px */ /* background-color: black; */
}

/*=============== 
PADRÃO FONTES ESTILOS
==================*/
h1 { /* TITULOS */ 
  color: #22C38E;/* #30328A  */ 
}
h2 { /* SUBTITULOS */
  color: #fff;  
}
h3 { /* TITULOS ALTERNATIVOS ESTÁ NO BOOTSTRAPP */  
}
h4 { /* H4 LEGENDAS ESTÁ NO BOOTSTRAPP */  
}
h5 { /* H4 LEGENDAS BEM PEQUENAS ESTÁ NO BOOTSTRAPP */  
}
p { /* TEXTOS PADRÃO ESTÁ NO BOOTSTRAPP */ 
}

/*  =============== 
  PADRÃO BOTÕES 
================== */
.box-botoes-solicitar {   /* width: min(90vw, 98rem); */   /*  width: 100%; */  /* padding: 5rem 0 12rem;  */ /*      */ 
  display: flex; 
  flex-direction: row; 
  justify-content: center;
  align-items: center;  
  margin:  9rem auto; 
} 
/* tb do botao solicitar */
 .area-clicavel-botoes {  /*  margin: 0 auto;  width: 21.8rem; height: 5.7rem;  */ 
 display: inline-block; 
 position: inherit; 
}
.box-botoes-solicitar[id="ID-BTsolicitar-beneficios"] {
  width: 45rem;
  margin: 0 0 9rem;
  justify-content: flex-start;
  float: left; 
}
.botoes {
  display: inline-block; 
  font-size: 1.4rem;
  font-weight: 400;
  color: #fff;  
  padding: 2rem 5rem;
  border: 0;
  border-radius: 5rem;
  background: #0C0D4E;

  /* ele volta suave da transicao */
  transition: all 150ms linear 0s;   -webkit-transition: all 150ms linear 0s;   -moz-transition: all 150ms linear 0s;
                                     -o-transition: all 150ms linear 0s;        -ms-transition: all 150ms linear 0s;
                                      
  /* EFEITO SHADOWS BORDA*/  
  box-shadow: 0.2rem 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2),   0rem 1rem 2rem -1rem rgba(0, 0, 0, 0.5);
  -webkit-box-shadow:0.2rem 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2),   0rem 1rem 2rem -1rem rgba(0, 0, 0, 0.5);
  -moz-box-shadow:0.2rem 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2),   0rem 1rem 2rem -1rem rgba(0, 0, 0, 0.5);
  -o-box-shadow:0.2rem 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2),   0rem 1rem 2rem -1rem rgba(0, 0, 0, 0.5);
  -ms-box-shadow:0.2rem 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.2),   0rem 1rem 2rem -1rem rgba(0, 0, 0, 0.5);

}
.botoes:hover {
  /* AUMENTA O OBEJETO */
  background-color: #03A8E3;
  transition:all 250ms linear 0s;      -webkit-transition:all 250ms linear 0s;        -moz-transition:all 250ms linear 0s;
                                       -o-transition:all 250ms linear 0s;             -ms-transition:all 250ms linear 0s; 

  transform:scale3d(1.3, 1.3, 1.3);    -webkit-transform:scale3d(1.3, 1.3, 1.3);      -moz-transform:scale3d(1.3, 1.3, 1.3);
                                       -o-transform:scale3d(1.3, 1.3, 1.3);           -ms-transform:scale3d(1.3, 1.3, 1.3); 
 }
.botoes:active {
  /*  -webkit / -moz / -o / -ms - / abrir em qualquer navegador - */
  /* FICA FADE, DEPENDE ( @-webkit-keyframes ) FORA DA CLASSE */   
  background-color: #7CCE34;
  transition: all .0.7s ease-in-out;    -webkit-transition: all .0.7s ease-in-out;    -moz-transition: all .0.7s ease-in-out; 
                                        -o-transition: all .0.7s ease-in-out;         -ms-transition: all .0.7s ease-in-out;

  animation: fadeIn 0.3s ease-in-out;   -webkit-animation: fadeIn 0.3s ease-in-out;   -moz-animation: fadeIn 0.3s ease-in-out; 
                                        -o-animation: fadeIn 0.3s ease-in-out;        -ms-animation: fadeIn 0.3s ease-in-out; 

  /* DIMINUI O OBEJETO */
  transition: all 250ms linear 0s;      -webkit-transition: all 250ms linear 0s;      -moz-transition: all 250ms linear 0s;   
                                        -o-transition: all 250ms linear 0s;           -ms-transition: all 250ms linear 0s;

  transform:scale3d(1, 1, 1);           -webkit-transform:scale3d(1, 1, 1);           -moz-transform:scale3d(1, 1, 1); 
                                        -o-transform:scale3d(1, 1, 1);                -ms-transform:scale3d(1, 1, 1);  
} 
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; } 
  }
  @-moz-keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1; }
  }
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; } 
}

/* ===============
  FIM BOTOAO SCROLL
=============== */
.scroll-up-btn {     /* .scroll-up-btn */  
  width: 4.1rem;          height: 4.5rem;          right: 5rem;        bottom: 8rem;     position: fixed; 
  text-align: center;     line-height: 5rem;       font-size: 2rem;  
  color: #7CCE34;       background: #0C0D4E; /* verde */
  border-radius: 0.6rem;  z-index: 9999;          cursor: pointer;
  opacity: 0;             pointer-events: none;

  transition: all 0.3s ease;    -webkit-transition: all 0.3s ease;    -moz-transition: all 0.3s ease;
                                -o-transition: all 0.3s ease;         -ms-transition: all 0.3s ease;
}
.scroll-up-btn.show { /* .show */
  bottom: 3rem;
  opacity: 1;
  pointer-events:auto;  
}
/* ===============
  FIM BOTOAO SCROLL
=============== */
/*  =============== 
  FIM PADRÃO BOTÕES 
================== */


/* ===============
ANIMACOES PRECISA DO JS EXTERNO PARA PASSAR A CLASSE .ANIMATE LÁ
=============== */

/* ESTA CLASSE SERVE PARA DESAPARECER QUALQUER COMPONENTE MAIS DEIXAR LIDO NO DISPOSITIVOS */
.sr-olny {
  position: absolute; /* Na camada acima */  
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden; /* esconde o conteudo depois da caixa */
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}
/* ESTA CLASSE ACIMA SERVE PARA DESAPARECER QUALQUER COMPONENTE MAIS DEIXAR LIDO NO DISPOSITIVOS */

[data-anime] {
  opacity: 0;
  transition: 1.2s;     -webkit-transition: 1.2s;     -moz-transition: 1.2s;    -o-transition: 1.2s;    -ms-transition: 1.2s;
}
[data-anime="down"] { /* X    Y    Z  */
  transform: translate3d(0, -100%, 0);    -webkit-transform: translate3d(0, -100%, 0);    -moz-transform: translate3d(0, -100%, 0);     -o-transform: translate3d(0, -100%, 0);         -ms-transform: translate3d(0, -100%, 0); 
}
[data-anime="up"] {
  transform: translate3d(0, 100%, 0);     -webkit-transform: translate3d(0, 100%, 0);    -moz-transform: translate3d(0, 100%, 0);     -o-transform: translate3d(0, 100%, 0);         -ms-transform: translate3d(0, 100%, 0); 
}
[data-anime="left"] { 
  transform: translate3d(-100%, 0 ,0);    -webkit-transform: translate3d(-100%, 0 ,0);   -moz-transform: translate3d(-100%, 0 ,0);      -o-transform: translate3d(-100%, 0 ,0);        -ms-transform: translate3d(-100%, 0 ,0); 
}
[data-anime="right"] { 
  transform: translate3d(5rem, 0,0);     -webkit-transform: translate3d(5rem, 0,0);     -moz-transform: translate3d(5rem, 0,0);     -o-transform: translate3d(5rem, 0,0);         -ms-transform: translate3d(5rem, 0,0); 
}
[data-anime].animate {
  /* QUANDO RECEBER .animate O SCRIP.JS ACRESCENTA 
  ESTA CLASSE E O ITEM VOLTA AO ESTADO ORIGINAL */
  opacity: 1; 
  transform: translate3d(0, 0,0);         -webkit-transform: translate3d(0, 0,0);       -moz-transform: translate3d(0, 0,0);      -o-transform: translate3d(0, 0,0);            -ms-transform: translate3d(0, 0,0);
}

[subir] { /* transform: translate3d(0, 100%, 0) ; X, Y e Z z-index: 1040; position: relative; ::backdrop*/
  opacity: 0;           
  transition: 1.4s;   /*   -webkit-transition: 1.2s;       -moz-transition: 1.2s;      -o-transition: 1.2s;      -ms-transition: 1.2s; */
}
[subir="up2"] { /* aqui sobe X, Y e Z display: flex;  align-self: flex-end; */     
  transform: translateY(100%);    -webkit-transform: translateY(100%);     -moz-transform: translateY(100%);      -o-transform: translateY(100%);     -ms-transform: translateY(100%); 
}
[subir].animate { /*  aqui volta X, Y e Z transform: scaleY(100.70%); */
  opacity: 1;    
  transform: translateY(0);      -webkit-transform: translateY(0);        -moz-transform: translateY(0);      -o-transform: translateY(0);      -ms-transform: translateY(0);
}   
/* ===============
  FIM ANIMACOES 
=============== */


/* =============== 
  PADRÃO DE IMAGENS 
================== */ 
.sec-introducao img { /* background-color: black; */
  /* IMG MINITOR CONVERSA logo vertical */  
  width: 45%;     margin: auto; 
  transform: translateY(-3.5rem);    -webkit-transform: translateY(-3.5rem);   -moz-transform: translateY(-3.5rem);
                                     -o-transform: translateY(-3.5rem);        -ms-transform: translateY(-3.5rem);
}
.box-numeros > picture > img, .sec-footer > picture > img {     
  /* IMG NUVEM topo  */
  display: flex;    width: 40%;     text-align: center;     margin: 0 auto;

  transform: translateY(-12rem);    -webkit-transform: translateY(-12rem);    -moz-transform: translateY(-12rem);
                                    -o-transform: translateY(-12rem);         -ms-transform: translateY(-12rem);      
}
.box-numeros > picture > img {
  transform: scale(0.80) translateY(-21rem);
}

/* PADRÃO DE BANNER */
.banner-media-social {
  width: 107%; 
  margin-left: -3.5%;
  transition: all 150ms linear 0s;      -webkit-transition: all 150ms linear 0s;    -moz-transition: all 150ms linear 0s; 
                                        -o-transition: all 150ms linear 0s;         -ms-transition: all 150ms linear 0s;     
}
.banner-media-social:hover {
    /* AUMENTA O OBEJETO */
    transition: all 250ms linear 0s;    -webkit-transition: all 250ms linear 0s;    -moz-transition: all 250ms linear 0s;
                                        -o-transition: all 250ms linear 0s;         -ms-transition: all 250ms linear 0s;
    transform:scale3d(1.1, 1.1, 1.1);   -webkit-transform:scale3d(1.1, 1.1, 1.1);   -moz-transform:scale3d(1.1, 1.1, 1.1);
                                        -o-transform:scale3d(1.1, 1.1, 1.1);        -ms-transform:scale3d(1.1, 1.1, 1.1);    
 } 
.banner-media-social-sm:active {
  /*  -webkit / -moz / -o / -ms - / abrir em qualquer navegador - */
  /* FICA FADE, DEPENDE ( @-webkit-keyframes ) FORA DA CLASSE */
  transition: all .0.7s ease-in-out;    -webkit-transition: all .0.7s ease-in-out;  -moz-transition: all .0.7s ease-in-out; 
                                        -o-transition: all .0.7s ease-in-out;       -ms-transition: all .0.7s ease-in-out;
  
  animation: fadeIn 0.3s ease-in-out;   -webkit-animation: fadeIn 0.3s ease-in-out; -moz-animation: fadeIn 0.3s ease-in-out;
                                        -o-animation: fadeIn 0.3s ease-in-out;      -ms-animation: fadeIn 0.3s ease-in-out;          

  /* DIMINUI O OBEJETO */
  transition: all 250ms linear 0s;      -webkit-transition: all 250ms linear 0s;    -moz-transition: all 250ms linear 0s;
                                        -o-transition: all 250ms linear 0s;         -ms-transition: all 250ms linear 0s;

  transform:scale3d(1, 1, 1);           -webkit-transform:scale3d(1, 1, 1);         -moz-transform:scale3d(1, 1, 1);
                                        -o-transform:scale3d(1, 1, 1);              -ms-transform:scale3d(1, 1, 1); 
} 
  @-webkit-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; } 
  }
  @-moz-keyframes fadeIn {
    0% { opacity: 0;}
    100% { opacity: 1; }
  }
  @-o-keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes fadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; } 
}
/* FIM BANNER */
 
.container-sobre img[name="Logo Nevoz"], .container-footer img[name="Logo Nevoz"]  {
 /*  Logo FOOTER  */ 
  /* position: relative;  */
   width: 27%;     display: flex;      margin: auto;
} 
/* =============== 
  FIM PADRÃO DE IMAGENS 
================== */


/* =============== 
  SECTIONS MAIN, INTRODUCAO, NUMEROS, SOBRE
================== */
main {
  width: 100%;  
  height: auto;
  margin: 0 auto;
  display: flex; 
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  align-items: center;  
  position: relative;
} 
.sec-introducao { 
   width: 100%; min-width: 100%;
   display: flex; 
   flex-direction: column;
   justify-content: center;
   align-content: center;
   flex-wrap: wrap;
   margin: 0 auto;
   position: relative; 
   text-align: center; 
   padding-bottom: 26rem; 
   background: #7CCE34;  
}
.sec-sobre {   /* transform: translateY(13.5rem);  */  
  width: 100%;  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;   
  scroll-snap-align: start; /* barra de rolagem para no posicao start - horizontal esq */
}
/* =============== 
  FIM SECTIONS VERDE INTRODUCAO, NUMEROS, SOBRE 
================== */


/* =============== 
  TOPO DEPOIS NO HEADER
================== */
.sec-topo {   /* position: relative;  */ 
  width: 100%;  min-width: 100%;    min-height: 80vh;
  display: flex;  height: 80vh;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  height: auto;
  margin: 0 auto;
  position: relative;   
  margin-top: 0px;      /* background-color: rebeccapurple; */ 
}
.container-topo {
  width: min(90vw, 98rem);  height: auto;  
  display: flex;
  flex-direction: row;
  position: relative;
  margin: 0 auto;    
}
.anuncio-topo {
  width: 45rem;
  display: flex;
  flex-direction: column;
  justify-content: center; 
  align-items: left;  
  text-align: left;   /* background-color: slategray; */
}
.anuncio-topo h1 {
  width: 45rem;
  margin: 14rem 0px 2rem 0px;   
  height: 13rem;
  text-align: left;
}
.anuncio-topo h1#tit-h1-topo span#typing-2 {   
  color: #7CCE34;
}
.box-subtitulos-topo {
  display: flex;   
}
.box-subtitulos-topo > img{  /* ICONES X e V Topo*/
  display: block;  
  align-items: center;
  padding: 1rem 0px;  
  margin-right: 2rem;  
} 
.box-subtitulos-topo > div {
  display: flex;  align-self: center;
  flex-direction: column;   
}
.box-subtitulos-topo > div > h2 {  
  padding: 0px;
  margin-left: 0;
}
/* =============== 
  FIM TOPO DEPOIS NO HEADER
================== */


/* =============== 
  INTRODUCAO VERDE
================== */
.container-introducao {  /*width: 90%;  max-width: 98rem; */
  width: min(90vw, 98rem);  
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.container-introducao > h3 {
  margin: 0 auto;
  padding: 3.5rem 8%;
  color: #fff;  
  text-align: center; /* background-color: violet; */
} 
.paragrafo-num {
  margin: 0 auto;
  padding: 3.5rem 8%;
  text-align: center;
  color: #fff;
  margin-bottom: 5rem;
}
/* =============== 
  FIM INTRODUCAO VERDE
================== */

/* =============== 
  NUMEROS 
================== */
/* CONTAINER NUMEROS BOX */
.box-numeros { 
  width: 100%;         min-height: 35rem;          margin-bottom: 9rem;
  display: flex;       flex-direction: column;     flex-wrap: wrap;      align-content: center;
  text-align: center;  background: #0C0D4E;       position: inherit;
}
.box-numeros > h4 {
  display: block;     align-self: center;     
  position: absolute;     text-align: center;     margin-top: 3rem;
}
.box-numeros h4 span{
   color: #7CCE34;  
}
 .box-itens-lista-numeros {  
  width: 100%;  /* width: min(90%, 98rem); */ 
  min-height: 32rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;   
  justify-content: center; 
  background: #0C0D4E;
}   
.contain-box-num-sobre { /* background-color: red; */
  /* border: 1px solid white; */
 /*  position: inherit; */
  width: 80vw;
  /* transform: translate(-50%, -50%); */
  display: flex;
  justify-content: space-around;
  /* gap: 2px; */
}
.box-item-numeros-sobre {  
  width: 35vmin;
  min-height: 40vmin;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 2rem;
  margin-bottom: 5rem;
  /* position: inherit; */
  font-size: 18px;
  border-radius: 0.5em;
  border: 0.5px solid rebeccapurple;
}
.box-item-numeros-sobre > i {
  color: #7CCE34; /* #18f98f; */
  font-size: 2.5em;
  text-align: center;
}
.box-item-numeros-sobre span.num {
  color: #C2FBE8;
  display: grid;
  place-items: center;
  font-size: 80px;
  font-weight: 600;
  line-height: .9em;  
}
.box-item-numeros-sobre span.text {
  color: #7CCE34; 
  font-size: 1.3em;
  text-align: center;
  /* pad: 0.7em 0; */
  font-weight: 400;
  line-height: 2.5rem;
}  
/* =============== 
  FIM NUMEROS 
================== */


/* =============== 
  SOBRE 
================== */
.container-sobre {
  width: min(90vw, 98rem); 
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.paragrafo-sobre {
  color: #C2FBE8;
  margin: 0 auto;
  padding: 9rem 0%;  
  margin-bottom: 3rem;   
  text-align: center;
}
.paragrafo-sobre span {
  font-weight: 700;
}
.paragrafo-sobre span#ne {
  color:#7CCE34; 
}
.paragrafo-sobre span#voz {
  color:#03A8E3; 
} 
/* =============== 
  FIM SOBRE 
================== */


/* =============== 
 BENEFÍCIOS
================== */
.sec-beneficios {   
  width: 100%; min-width: 100%;
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  position: relative;
  margin: 0 auto;   
  background: #028ABC; 
}
.container-beneficios {    /* flex-direction: row; flex-wrap: wrap; */  /* grid-gap:5px; padding do grid  grid-template-columns: 5fr 1fr; grid-template-rows: 20vh 60vh 60vh 95vh 20vh; */
width: min(90vw, 98rem); 
margin: 0 auto;
display: flex;
flex-direction: column;   
}
.container-beneficios > h3 {
  max-width: 45rem;
  padding: 6rem 0;
  display: inline-block;
  flex-direction: row;
  flex-wrap: wrap;   
  color: #0C0D4E; 
  position: relative;
}
div.contem-box-col-esq-dir { /*  max-width: 58rem; */
  width: min(100%, 98rem);  
  padding: 6rem 0 0;
  display: flex;
  flex-direction: row; 
  justify-content: flex-start; /* horizontal */
  align-content: flex-start; /* vertical */
  flex-wrap: wrap;
  color: #0C0D4E;
  text-align: left;  
  position: relative; 
}
.box-col-esqueda-beneficios, .box-col-direita-beneficios {
  width: 29rem;
  display: flex;
  flex-direction: column;       
  color: #86FF1D;  
  margin-top:-6rem;
  padding: 2.5rem 0px; 
  position: relative;  
} 
.container-beneficios .coluna-dir-foto {
  width: 34rem;
  display: flex; 
  justify-content: flex-end; /* horizontal */
  align-content: flex-end; /* vertical */
  align-items: flex-end; /* vertical */
  align-self: flex-end; /* direita so para o item */  /* background-color: cornflowerblue;   */    
  position: absolute;
}
.visible-true {
  visibility: hidden;
}
.box-icone-texto-beneficios { /* list-style: none; */  
  display: flex;
  flex-direction: row;
  padding: 3rem 0px;  
  text-align: left;    
}
.box-icone-texto-beneficios h4 {
  color: #0C0D4E;   padding-bottom: 1rem;
}
.box-texto-beneficios {
 padding: 0.5rem 1rem 0px; 
 width: 21.5rem;
 min-width: 5rem; 
} 
/* =============== 
  FIM BENEFÍCIOS
================== */


/* =============== 
  SEC - DEPOIMENTOS  
================== */
.sec-depoimentos {   
  width: 100%;  min-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;  
  position: relative;      
  height: auto;
  margin: 0 auto;   
  background: url("../images/fundo-nuvem-imagem.png"), #E6ECFF; 
  background-attachment: fixed; 
  background-position: center center; 
  background-size: auto; 
  background-repeat: no-repeat; 
  background: opacity 50%;     
}
.container-depoimentos {
  width: min(90vw, 98rem);  
  margin: 0 auto;
  display: flex;
  flex-direction: column; 
  justify-content: center;
  align-items: center;   
  flex-wrap: wrap;   
} 
.container-depoimentos h3 {
  text-align: center;
  padding: 6rem;
  color: #0c0d4e;
}
.container-logos {
  width: 100%; 
  margin: 0 auto;   margin-bottom: 6.5rem;
  display: flex;
  flex-direction: row; 
  justify-content: center; 
  align-items: center;    
  justify-content: space-evenly;  
  flex-wrap: wrap;
} 
.container-logos >*{ /* aplica regra em todos os filhos */ 
  padding: 3rem;  
}

.box-depoimento { /* caixa depoimento */
  width: 27rem;           min-width: 5rem;           height: auto;                padding: 4rem;      
  display: flex;          flex-direction: column;    justify-content: center;      
  background: #fff;     text-align: left;          margin-left: 0;
  border-radius: 3.4rem;   

  box-shadow: 0 0.8rem 1rem rgba(85, 124, 242, .15);        -webkit-box-shadow: 0 0.8rem 1rem rgba(85, 124, 242, .15);  
  -moz-box-shadow: 0 0.8rem 1rem rgba(85, 124, 242, .15);   -o-box-shadow: 0 0.8rem 1rem rgba(85, 124, 242, .15);  
  -ms-box-shadow: 0 0.8rem 1rem rgba(85, 124, 242, .15);     
}
#estrelas {   display: flex;    font-size: 3.2rem;    color: #7CCE34;  margin-bottom:1rem; }

.container-depoimentos div.box-todos-depoimentos { /* caixa geral com todos BLACK */
  width: 100%;                          
  display: flex;              flex: 3 1;    
  flex-direction: row;        justify-content: center;         
  flex-wrap: wrap;            gap: 4rem;
} 

.coluna-1-dep .box-depoimento, .coluna-3-dep .box-depoimento {  
  margin-bottom: 4rem; 
}  
.coluna-centro-dep .box-depoimento {  
  margin-top: 4rem; 
}   
.box-depoimento h5 { /* depoimento txt */
  color: #0C0D4E;           font-weight: bold;
  display: flex;              flex-direction: row;          flex-wrap: wrap; 
}  
.box-depoimento .box-autor { /* caixa icon + nome autor */
  display: flex;                       margin: 3rem 0 0 0;  
  align-items: center;  
}
.box-autor :is(picture, source, img) {
  width: 4.2rem;              height: 4.2rem;   
  align-self: center;         align-items: center;  
}  
.box-autor h5#autor-depoimento{ /* nome do autor txt */
  display: flex;   color: #03A8E3;   padding-left: 0.5rem;  
}  
.container-depoimentos button {
  margin: 4rem 0px 8rem; 
  text-align: center;   
}
/* =============== 
FIM SEC - DEPOIMENTOS  
================== */


/* =============== 
  CONTATO FORM
================== */
.sec-contato {  
  width: 100%; min-width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: auto;
  margin: 0 auto;  
  padding-bottom: 6rem;
 } 
.container-contato {
  width: min(90vw, 98rem); 
  margin: 0 auto;
  display: flex;
  flex-direction: row; 
}
.box-lados-cont { 
  margin-top: 5rem;
  width: 35rem; 
  flex: 3 1; /* flex-grow: 3 */
  display: block;    
  position: relative;  
 }
.box-lados-cont > h3, p {
  color: #0C0D4E; 
  text-align: right;
  padding-bottom: 3rem;
}

/* FORM */
#form {
  display:flex;
  align-items: center;
  justify-content: center; 
}
#form form {
  width: min(90vw, 98rem); 
}
#form form label {
  display: none;   
} 
[name]:focus{ /* Comunicação pelo atributo name */
  box-shadow: 0 0.1rem 2.5rem rgba(85, 124, 242, 15);           -webkit-box-shadow: 0 0.1rem 2.5rem rgba(85, 124, 242, 15);
  -moz-box-shadow: 0 0.1rem 2.5rem rgba(85, 124, 242, 15);      -o-box-shadow: 0 0.1rem 2.5rem rgba(85, 124, 242, 15);
  -ms-box-shadow: 0 0.1rem 2.5rem rgba(85, 124, 242, 15);
} 
.form-group {
  display: flex;
  flex-direction: row; 
}
.form-group label.right-inline {
  text-align: right; 
  width: auto;
} 
.form-group .input-control {
  flex: 1 1; 
  display: block;
  margin: 1rem 0px;
  padding: 1.6rem;
  font-size: 1.5rem;
  border-radius: 1rem;
  border: 0;
} 
::-webkit-input-placeholder { color: #7CCE34; } input-moz::-moz-placeholder { color: #7CCE34; }

textarea {
  min-height: 20rem; color: #7CCE34;
} 
/* =============== 
  FIM CONTATO FORM
================== */  


/* =============== 
  FOOTER
================== */
.sec-footer {
  display: flex;    flex-direction: column;     flex-wrap: wrap;      align-content: center;
  width: 100%;      min-width: 100%;
  position: relative;
  height: auto;
  margin: 0 auto; 
  background-color: #0C0D4E; 
}
.container-footer {
  width: min(90vw, 98rem);   
  margin: 0 auto;

  transform: translateY(-8.7rem);     -webkit-transform: translateY(-8.7rem);     -moz-transform: translateY(-8.7rem);
                                      -o-transform: translateY(-8.7rem);          -ms-transform: translateY(-8.7rem);    
}
.group-logo-social-media-icones {  
  width: 25rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: 0 auto; 
} 
.box-itens-lista-footer { 
  display: flex;
  flex-direction: row; 
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 2% 0;  
}
.box-itens-lista-footer > ul {
  display: flex;
  margin-top: 3rem;     padding: 1rem 0.5rem;     align-items: center;      margin: auto; 
}
.box-itens-lista-footer > ul > li {
  color: #03A8E3;
}
.box-itens-lista-footer h3 {
 padding: 1rem; 
}
.paragrafo-footer {
  color: #7CCE34;   padding-top: 2rem;      text-align: center; 
}
#btn-contato-footer  {
  display: block;     color: #03A8E3;  
}
/* =============== 
  FIM FOOTER 
================== */

  
/* =============== 
  MEDIA QUERIES
================== */ 
@media screen and (min-width: 0px) and (max-width: 100vw) {/*  MENU PRINCIPAL 1 + TODOS MEDIAS SCRREN */
   
  /* =============== 
    MENU PRINCIPAL TODOS DISPOSITIVOS
  ================== */     
  .menu-toggle { /* MENU AMBURGUER ICONE  transform: translateY(-3px); */ /*  margin-top:-4.5rem; */
    display: inline-block;      cursor: pointer;      border-radius: 1rem;      background: #7CCE34;
    width: 6rem;                height: 5rem;         padding: 0.3rem;          position: inherit;
  }
  .menu-toggle:hover {   
    /* DIMINUI AS LINHAS */
    transition: all 250ms linear 0s;    -webkit-transition: all 250ms linear 0s;    -moz-transition: all 250ms linear 0s;   -o-transition: all 250ms linear 0s;   -ms-transition: all 250ms linear 0s;
  }

  /* MENU AMBURGUER MOBILE LINHAS */
  .one, .two, .three {
    background: #0C0D4E;      height: 0.5rem;       width: 75%;              margin: 7px auto;       
    transition-duration: 0.3s; /* 300 mile-segundos */  -webkit-transition-duration: 0.3s;    -moz-transition-duration: 0.3s;     -o-transition-duration: 0.3s;     -ms-transition-duration: 0.3s; 
  }    
  .menu-overlay {
    width:  100%;     position: fixed;      display: flex;        justify-content: left;          align-items: center;
    height: 100%;     top: 0;               right: auto;          bottom: auto;                   left: 0;              
    margin: 0 auto;   background: rgba(124, 206, 52, 0.1);      backdrop-filter: blur(70px);    /* background-color: rgba(0,0,0,0.7); */ 
          
    transition: all 0.1s ease-in-out 0s;    -webkit-transition: all 0.1s ease-in-out 0s;      -moz-transition: all 0.1s ease-in-out 0s;   -o-transition: all 0.1s ease-in-out 0s;   -ms-transition: all 0.1s ease-in-out 0s;   
    visibility: hidden;   opacity: 0;     z-index: 11;    /* transform: translateX(-2rem);  */
  }
  .menu-overlay.active {    visibility: visible;    opacity: 1;   }

  /* CONTEÚDO DA CAIXA DO MODAL */ 
  .menu-principal-modal {
    display: flex;              flex-direction: column;         justify-content: center;      align-items: center; 
    width: min(80vw, 55rem);    position: absolute;               /* overflow-y: auto; */
    height: 112vh;              background: rgba(12, 13, 78, 0.8);    backdrop-filter: blur(70px);
    top: -3.75rem;      right: 0;     bottom: 0;      left: 0;      margin-left: 107%;    /* margin-left: 107%; */

    animation-fill-mode: forwards 3s;   -webkit-animation-fill-mode: forwards 3s;   -moz-animation-fill-mode: forwards 3s;    -o-animation-fill-mode: forwards 3s;    -ms-animation-fill-mode: forwards 3s;
    /*  animation-name: example; */   /* animation-duration: 3s; */

    /* EFEITO SHADOWS BORDA*/      
    box-shadow: 0.2rem 0px 0.2rem -2rem rgba(0, 0, 0, 0.2),   0px 1rem 2rem 0.8rem  rgba(0, 0, 0, 0.2);     -webkit-box-shadow: 0.2rem 0px 0.2rem -2rem rgba(0, 0, 0, 0.2),   0px 1rem 2rem 0.8rem  rgba(0, 0, 0, 0.2);   -moz-box-shadow: 0.2rem 0px 0.2rem -2rem rgba(0, 0, 0, 0.2),   0px 1rem 2rem 0.8rem  rgba(0, 0, 0, 0.2);    -o-box-shadow: 0.2rem 0px 0.2rem -2rem rgba(0, 0, 0, 0.2),   0px 1rem 2rem 0.8rem  rgba(0, 0, 0, 0.2);    -ms-box-shadow: 0.2rem 0px 0.2rem -2rem rgba(0, 0, 0, 0.2),   0px 1rem 2rem 0.8rem  rgba(0, 0, 0, 0.2);   /*  border-radius: 0 0 2.5rem 2.5rem; */

    visibility: hidden;    opacity: 0;   z-index: 12;
  } 
  /* APRESENTA O MENU */
  .menu-principal-modal.active {    
    visibility: visible;    opacity: 1;     transform: translateX(-115%);   -webkit-transform: translateX(-115%);   -moz-transform: translateX(-115%);    -o-transform: translateX(-115%);    -ms-transform: translateX(-115%);   /* transform: translateX(-138%); */  
  }
  .menu-principal-modal nav {
    margin-right: 7%;   width: 80%;  
    display: flex;      flex-direction: column;     justify-content: right;     text-align: right; 
  }
  .menu-principal-modal nav ul {    text-align: right;    } 
  
  .menu-principal-modal nav a {     font-size: 3.7rem;     line-height: 6rem;   }
  
  /* caixa dos Ícones social media menu principal */
  .social-icons-menu {
    width: 80%;       gap: 2rem;  
    display: flex;    justify-content: flex-end;    align-items: flex-end;    align-self: flex-end;     
  }

  /* ICONE ABRIR VIRA X */   
  .box-btn-fechar {  display: flex;  justify-content: right;  }
  
  .menu-toggle[id="botao-fechar"] {   margin-bottom: 1rem;   }
  
  .menu-toggle[id="botao-fechar"] .one {    transform: rotate(45deg) translate(0.9rem, 0.7rem);     -webkit-transform: rotate(45deg) translate(0.9rem, 0.7rem);     -moz-transform: rotate(45deg) translate(0.9rem, 0.7rem);      -o-transform: rotate(45deg) translate(0.9rem, 0.7rem);      -ms-transform: rotate(45deg) translate(0.9rem, 0.7rem);
  }
  .menu-toggle[id="botao-fechar"] .two {    opacity: 0;   }

  .menu-toggle[id="botao-fechar"] .three {  transform: rotate(-45deg) translate(0.8rem, -0.9rem);   -webkit-transform: rotate(-45deg) translate(0.8rem, -0.9rem);   -moz-transform: rotate(-45deg) translate(0.8rem, -0.9rem);    -o-transform: rotate(-45deg) translate(0.8rem, -0.9rem);    -ms-transform: rotate(-45deg) translate(0.8rem, -0.9rem);
  }
  /* =============== 
    FIM MENU PRINCIPAL TODOS DISPOSITIVOS 
  ================== */

      @media screen and (min-width: 1199.99px) and (max-width: 5000px) { /* SO H1 */

          h1, .h1 {   font-size: 6.7rem !important;   line-height: 7rem;    } 
      }      
          @media screen and (min-width: 1199.99px) and (max-width: 5000px) { /* IMAGEM TOPO E TOPO */
            .sec-topo .container-topo[id="contain-top-id"] {    /* background-color: cadetblue; */    height: 80vh;   }

            .sec-topo .container-topo img.foto-2nev-pc-exGrande.foto-2nev-pc { /*  background-color: red; */ /* visibility: hidden; opacity: 0 */ /* transform: scale(50%, 50%) !important; */
              margin: 0 auto; 
              /* FOTO 2-NEVOIPIANAS MENOR TMOB, TAB, PC */
              transform: scale(0.93) translateY(4rem) translateX(-5.5rem);      -webkit-transform: scale(0.93) translateY(4rem) translateX(-5.5rem);      -moz-transform: scale(0.93) translateY(4rem) translateX(-5.5rem);    -o-transform: scale(0.93) translateY(4rem) translateX(-5.5rem);      -ms-transform: scale(0.93) translateY(4rem) translateX(-5.5rem);
            }
          }    
              @media screen and (min-width: 768px) and (max-width: 1141px) { /* BENEFICIOS 1 */  

                  /* ================================= CONTEÚDO BENEFÍCIOS ============================================*/
                  .container-beneficios > h3 {
                    display: -ms-flexbox;   padding: 6rem 12rem 0;    text-align: center;   line-height: 4rem;
                    min-width: 100%;  
                  }
                  .container-beneficios div.contem-box-col-esq-dir {    width: 100%;   justify-content: space-evenly;   }

                  .box-col-esqueda-beneficios, .box-col-direita-beneficios {    align-items: center;    }

                  /* ================================= FIM CONTEÚDO BENEFÍCIOS ============================================*/

                  /* FOTO BENEFICIOS - MOBIL | IPAD | PC */
                  .box-botoes-solicitar[id="ID-BTsolicitar-beneficios"] {   width: 100%;      justify-content: center;    } 
  
              }
                  @media screen and (min-width: 1142px) and (max-width: 4000px) { /* BENEFICIOS 2 */    

                    /* ================================= CONTEÚDO BENEFÍCIOS ============================================*/                      
                    /* FOTO BENEFICIOS PC A PC-EXTRA */                   
                    .coluna-dir-foto img.foto-maior.visible-true { /*  opacity: 1; esta esta visivel */
                      opacity: 1 ;              visibility: visible;      position: relative;  
                      align-self: flex-end;     align-items: flex-end;

                      transform: scale(0.85) translate3d(40%, 16.5%, 0);              -webkit-transform: scale(0.85) translate3d(40%, 16.5%, 0);    -moz-transform: scale(0.85) translate3d(40%, 16.5%, 0);         -o-transform: scale(0.85) translate3d(40%, 16.5%, 0);     -ms-transform: scale(0.85) translate3d(40%, 16.5%, 0);
                                                               /* x,   y,   z */
                      -webkit-transform: scale(0.85) translate3d(40%, 16.5%, 0);      -moz-transform: scale(0.85) translate3d(40%, 16.5%, 0);   -o-transform: scale(0.85) translate3d(40%, 16.5%, 0);           -ms-transform: scale(0.85) translate3d(40%, 16.5%, 0); 
                    }
                    /* ================================= FIM CONTEÚDO BENEFÍCIOS ============================================*/

                  }

      @media screen and (min-width: 1020px) and (max-width: 1200px) { /* MENU 1 */

        /* ================================= MENU PRINCIPAL 1020PX A 1200PX ==================================================== */

        .menu-principal-modal.active {   width: 47rem;    transform: translateX(-115%);   -webkit-transform: translateX(-115%);   -moz-transform: translateX(-115%);    -o-transform: translateX(-115%);    -ms-transform: translateX(-115%);}
       /*  .menu-principal-modal nav a {     font-size: 2.7rem;     line-height: 4rem; }        */
        .menu-toggle {   transform: scale(0.80);    -webkit-transform: scale(0.80);   -moz-transform: scale(0.80);    -o-transform: scale(0.80);    -ms-transform: scale(0.80);   }
        .social-icons-menu a img {   width: 87%;   }

        /* ================================= FIM MENU PRINCPAL 1020PX A 1200PX ================================================= */

      }
          @media screen and (min-width: 650px) and (max-width: 1019.99px) { /* MENU 2 */

            /* ================================= MENU PRINCIPAL 650PX A 1019.99px ==================================================== */

            .menu-principal-modal.active {   width: 45rem;      transform: translateX(-110%);   -webkit-transform: translateX(-110%);   -moz-transform: translateX(-110%);    -o-transform: translateX(-110%);    -ms-transform: translateX(-110%);     }
            .menu-principal-modal nav {  width: 70%;  margin-right: 10%;   }
            .menu-principal-modal nav a {     font-size: 2rem;     line-height: 3.2rem; }
            .menu-toggle {   transform: scale(0.75);    -webkit-transform: scale(0.75);   -moz-transform: scale(0.75);    -o-transform: scale(0.75);    -ms-transform: scale(0.75);}
            .social-icons-menu a img {   width: 82%;   }

            /* ================================= FIM MENU PRINCPAL 650PX A 1019.99px ================================================= */

          }
              @media screen and (min-width: 150px) and (max-width: 649.99px) { /* MENU 3 */

                /* ================================= MENU PRINCIPAL 1020PX A 1200PX ==================================================== */

                .menu-principal-modal.active {   width: 38rem;    transform: translateX(-100%);   -webkit-transform: translateX(-100%);   -moz-transform: translateX(-100%);    -o-transform: translateX(-100%);    -ms-transform: translateX(-100%); }
                .menu-principal-modal nav {  width: 60%;  margin-right: 10%;   }
                .menu-principal-modal nav a {     font-size: 2rem;     line-height: 3.2rem; }            
                .menu-toggle {   transform: scale(0.70);    -webkit-transform: scale(0.70);   -moz-transform: scale(0.70);    -o-transform: scale(0.70);    -ms-transform: scale(0.70);   }
                .social-icons-menu a img {   width: 77%;   }

                /* ================================= FIM MENU PRINCPAL 1020PX A 1200PX ================================================= */

              }
          

          @media screen and (min-width: 768px) and (max-width: 1200px) {  /* TOPO */
          
            /* ================================= CONTEÚDO TOPO 768PX A 1200PX ===================================================== */
            .sec-topo[id="section-topo"] { /* background-color: peru; */  
              margin: 3rem 0 0 0;   min-height: auto;   height: auto;  
              align-content: flex-start;   
            } 
            .sec-topo .container-topo[id="contain-top-id"]{   /* background-color: green; */
              min-height: auto;      height: auto;     width: 80%; /* height: auto; */
              display: flex;  flex-direction: column;     flex-wrap: wrap;      margin: 0 auto;     justify-content: center;                                             
            }
            div.anuncio-topo[id="anuncio-id"] {   /* background-color: orange; */
              width: 100%;      margin: 0 0 7rem;     min-height: 53vh;   
              display: flex;    flex-direction: column; 
            }        
            .box-subtitulos-topo {  /* background-color: navy; */
              width: auto;      text-align: center;             
              display: flex;    flex-direction: column;     margin: 0 auto;     justify-content: center;      align-items: center;
            }
            .box-subtitulos-topo h2 {
              margin-top: 1rem ;      font-size: 2.1rem;      line-height: 2.9rem;
            }
            .box-subtitulos-topo img {    width: 20%;     margin: 1.2rem 0 1rem;   }

            div.anuncio-topo[id="anuncio-id"] h1 {  /* background-color: red; */      
              font-size: 5.7rem;      line-height: 5.4rem;      text-align: center;     width: auto;    
            } 

            /* FOTO 2 NEVOIPIANAS TOPO - MUDA A POSICAO DOS ELEMENTOS NO TOPO HEADER  min 768px */ /*  .sec-topo[id="section-topo"] {  background-color: teal; } */  /* .sec-topo .container-topo{  height: 35vh; background-color: blue;  }  */
            .sec-topo .container-topo img.foto-2nev-pc-exGrande.foto-2nev-pc.foto-2nev-Mob {  /* background-color: violet;  */  
            /*  position: relative;     width: 45%;     margin: 0 auto;     margin-bottom: -24rem; */ /* visibility: hidden; */ display: none;
            }
            /* FIM MUDA A POSICAO */                  
            /* =================================  FIM CONTEÚDO TOPO 768PX A 1200PX ====================================================== */
              
            /* =================================  DIMINUI VÁRIAS IMAGENS 768PX A 1200PX ====================================================== */
            :is( .sec-header .logo-principal-header, #logo-sobre-topo, .container-footer > img[name="Logo Nevoz"]) {
              transform: scale(0.80);     -webkit-transform: scale(0.80);     -moz-transform: scale(0.80);      -o-transform: scale(0.80);      -ms-transform: scale(0.80);
            }                 
            /* =================================  DIMINUI VÁRIAS IMAGENS 768PX A 1200PX ====================================================== */

          }
              @media screen and (min-width: 150px) and (max-width: 767px) { /* TOPO, EXCETO MENU */
                            
                  /* =================================  CONTEÚDO TOPO 150PX A 767PX ============================================*/
                  .sec-topo[id="section-topo"] { /*  background-color: cyan;  */min-height: auto;   }

                  .sec-topo .container-topo {  /* background-color: tomato; */
                    min-height: 73vh;      margin: 0;      padding: 0;
                    /*  QUEBRA EM LINHA A DIV E A IMG  */ 
                    flex-direction: column;  /* VERTICAL */   
                    text-align: center;
                  }              
                  .anuncio-topo {  /* background-color: darkmagenta; */   width: 100%;      min-width: 98%;     height: auto;     margin: 0 auto;    }

                  .anuncio-topo >*{   margin: 0 auto;   }

                  .box-subtitulos-topo {     
                    width: auto;      text-align: center;
                    display: flex;    flex-direction: column;     margin: 0 auto;     justify-content: center;      align-items: center;    
                  }
                  .box-subtitulos-topo h2 {
                    margin-bottom: 1rem ;      font-size: 1.5rem;      line-height: 2.2rem;
                  }
                  div.anuncio-topo[id="anuncio-id"] h1 {   /* background-color: #0C0D4E; */
                    width: 80%;    text-align: center;    align-self: center;     margin-top: 27vh;
                  }
                  .anuncio-topo > h1 + .box-subtitulos-topo { /* seleciona somente: Fim das ligações perdidas com fixos */ margin-top: -2rem;     }

                  img.foto-2nev-pc-exGrande.foto-2nev-pc.foto-2nev-Mob.foto-2nev-MobMini { /*  background-color: firebrick; */
                    /* transform: scale(0.40) translateY(-47rem);  */  
                    position: relative;   width: 45%;   margin: 0 auto;  
                  }
                  /* =================================  FIM CONTEÚDO TOPO 150PX A 767PX ============================================*/

              }
                      @media screen and (min-width: 650px) and (max-width: 996px) { /* DEPOIMENTOS | ICON NUVEM NUMERO E FOOTER */
                        
                        /* =================================  NUVEM TOPO NUMERO E FOOTER 50PX a 767.99PX ===================================== */
                        .box-numeros picture img, .sec-footer > picture > img {
                          /* IMG NUVEM topo  */   
                          transform: translateY(-10rem);    -webkit-transform: translateY(-10rem);    -moz-transform: translateY(-10rem);     -o-transform: translateY(-10rem);     -ms-transform: translateY(-10rem);                                                                 
                        }
                        /* =================================  CONTEÚDO DEPOIMENTO 650PX A 996PX ============================================ */
                        .container-logos {
                          margin-bottom: 0;
                        }
                        .container-depoimentos div.box-todos-depoimentos {   justify-content: center;   }

                        div.box-todos-depoimentos div.coluna-3-dep .box-depoimento, div.coluna-1-dep .box-depoimento {
                          margin: 4rem 0 0;
                        }
                        div.box-todos-depoimentos div[id="col-centro"]{
                          order: 1;    display: flex;     flex-direction: row;      flex-wrap: wrap;      gap: 4rem;  
                          margin: auto;
                        }
                        .coluna-centro-dep .box-depoimento {    margin-top: 0;    } 
                        /* =================================  FIM CONTEÚDO DEPOIMENTO 650PX A 996PX ============================================ */

                      }   

          @media screen and (max-width: 1024px) { /* NUMEROS TOPO DE SOBRE */
            .contain-box-num-sobre {
                /* width: 85vw; */
            }
            .box-item-numeros-sobre {
                width:  45vmin; 
                /* height: 26vmin; */
                padding: 2em;
                font-size: 15px;
            }
            .box-item-numeros-sobre span.num {  
              font-size: 60px;
              line-height: 1.5em;  
            }
          }
            @media screen and (max-width: 767px) { /* NUMEROS TOPO DE SOBRE */
            
              .contain-box-num-sobre {
                /*  width: 90vw; */
                  flex-wrap: wrap;
                  gap: 10px;
              }
              .box-item-numeros-sobre {
                  width:  35vmin; /* width: calc(50%, -40%); */
                  height: auto;
                  padding: 2em;
                  font-size: 12px;
              }
              .box-item-numeros-sobre span.num {  
                font-size: 40px;
                line-height: 1.5em;  
              }
            }
              @media screen and (max-width: 400px) { /* NUMEROS TOPO DE SOBRE */
          
                .contain-box-num-sobre {
                    gap: 15px;
                }
                .box-item-numeros-sobre {
                    width: 100%;
                    height: 40vmin;
                    font-size: 12px; 
                    padding: 6rem 0;
                }
                .box-item-numeros-sobre span.num {  
                  font-size: 30px;
                  line-height: 1.8em;  
                }
          
              }


      @media screen and (min-width: 50px) and (max-width: 767.99px) { /* ICON NUVENS NUMEROS E FOOTER */

        /* =================================  HEADER MENU PRINCIPAL 50PX a 767.99PX ====================================== */                                
        /* LOGO HEADER */
        .sec-header .logo-principal-header {   /* background-color: grey; */    width: 75%;   margin-top: 0.8rem;   }
       
       
        

        /* =================================  FIM HEADER MENU PRINCIPAL 50PX a 767.99PX ====================================== */
            
        /* =================================  NUVEM TOPO NUMERO E FOOTER 50PX a 767.99PX ===================================== */ 
        .box-numeros picture img, .sec-footer > picture > img { /* background-color: greenyellow;  */
          /* IMG NUVEM NUMEROS topo  */ 
          transform: translateY(-8rem);    -webkit-transform: translateY(-8rem);    -moz-transform: translateY(-8rem);    -o-transform: translateY(-8rem);    -ms-transform: translateY(-8rem);   
        }                                
                
        /* ================================= CONTEÚDO BENEFÍCIOS 50PX a 767.99PX  ========================================== */
        .container-beneficios > h3 {
          display: -ms-flexbox;     padding: 6rem  4rem 0;    text-align: center;   line-height: 3.3rem;
          min-width: 100%;          max-width: 40rem; 
        }
        .container-beneficios div.contem-box-col-esq-dir[class="contem-box-col-esq-dir"] {    width: 100%;    justify-content: space-evenly;    }
        
        .box-col-esqueda-beneficios, .box-col-direita-beneficios {    width: auto;    }
       
        .box-icone-texto-beneficios {   flex-direction: column;     text-align: center;   }
        
        .box-icone-texto-beneficios > li {    margin: 0 auto;   }
        
        .box-botoes-solicitar[id="ID-BTsolicitar-beneficios"] {   width: 100%;    justify-content: center;    }
        /* ================================= FIM CONTEÚDO BENEFÍCIOS 50PX a 767.99PX ====================================== */

        /* =================================  CONTEÚDO CONTATO 50PX a 767.99PX ============================================ */      
        .container-contato > .box-lados-cont > img {   width: min(80%, 70%);    margin-left: 5rem;   } 
        
        .container-contato { /* MUDA O DISPLAY DE HOROZONTAL PARA VERTICAL */
          display: flexbox;   align-items: center;   align-content: center;   align-self: center;
        } 
        /* =================================  FIM CONTEÚDO TOPO 50PX a 767.99PX ============================================ */ 

      }
          @media screen and (min-width: 10px) and (max-width: 676px) { /* CONTATO */
                    
            /* =================================  CONTEÚDO CONTATO 10PX A 676PX ============================================ */
            .container-contato {    flex-direction: column;   }

            .container-contato > .box-lados-cont h3, p {    text-align: center;   }

            .container-contato div[id="form"].form form[id="formularioID"]{   height: 700px;    }
            /* =================================  FIM CONTEÚDO CONTATO 10PX A 676PX ============================================ */                

          }         
                  @media screen and (min-width: 10px) and (max-width: 550px) { /* ICON NUVENS NUMEROS E FOOTER */ 
                    
                    /* ============================= CONTEÚDO NUMERO E FOOTER FOTO NUVEM TOPO  10PX A 550px ========================== */
                    .box-numeros picture img, .sec-footer > picture > img { /* background-color: greenyellow;  */
                      /* IMG NUVEM topo  */   
                      width: 45%;
                      transform: translateY(-5rem);   -webkit-transform: translateY(-5rem);   -moz-transform: translateY(-5rem);    -o-transform: translateY(-5rem);    -ms-transform: translateY(-5rem);                                                                                    
                    }
                    /* ============================= FIM CONTEÚDO NUMERO E FOOTER FOTO NUVEM TOPO  10PX A 550px ====================== */

                  }

              

} 


/* 
10px = 1rem; 20px = 2rem; 50px = 5rem; 320px = 32rem; 540px = 54rem;
100 = 10rem; 980px = 98rem;
*/