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

.menu-h ul{
    width: 100%;
    height: 80px;
    background-color: #000501;
    font-family: Arial;
    position: fixed;
    padding: 0 32%;
  
    
}

.menu-h ul li{
    display: inline;
    width:200px;
    float: center;  
}

.menu-h ul li a{
    color: #FFFFFF;
    padding: 40px;
    display: inline-block;
    text-decoration: none;
    transition: background ,4s; 
    text-align: center; 
}

.menu-h ul li a:hover{
    background-color: #b09e9e;   
}


/*container*/
.imagem{
    width: 100%;
    height: 500px;
    text-align: center;
    padding: 40px 4%;
    color: rgb(20,20,20);

    background-position: center;
    background-size: cover;/*significa que a imagem de fundo sempre se ajustará a toda a div*/
    background-repeat: no-repeat;/**/
    background-attachment: fixed;/**/
}

.secundario__imagem {
    width: 100px;
    height: 50px;
    padding: 0 24px;
    transition: .4s all ease-in-out;
}

.texto:hover img{
    transform: scale(1.8);
}

.texto{
    width: 100%;
    height: 250px;
    text-align: center;
    padding: 40px 4%;
    font-family: roboto;
    font-size: 24px;
    color: rgb(20,20,20);
}
.texto__principal{/**/
    width: 100%;/*largura*/
    height: 100px;/*altura*/
    text-align: center;/*alinhamento do texto*/
    padding: 60px 4%;/*espaçamento interno*/
    font-family: roboto;/*tipo da fonte*/
    font-size: 24px;/*tamanho da fonte*/
    color: rgb(20,20,20);/*cor da fonte*/
}
h1{
    margin-bottom: 20px;/* define a margin area na parte inferior de um elemento*/

}

section:nth-of-type(2){/*pseudo-classe CSS selecionam itens de um grupo de elementos HTML*/
    background-image: url("campo.jpg");/*imagem de fundo*/
}
section:nth-of-type(4){
    background-image: url("cidade.jpg");
}
section:nth-of-type(6){
    background-image: url("oportunidade.jpg");
}



/*para colocar o efeito na borda*/
.caixa {
    margin: auto;
     position: relative;
     width: 50px;
     height: 20px;
     color: #151320;
     background: #fff;
     display: flex;
    justify-content: center;
     align-items: center;
     border-radius: 3px;
     font-weight: 700;
 }
 
 .caixa::before, .caixa::after {
     content: '';
     position: absolute;
     z-index: -1;
     width: calc(100% + 5px);
     height: calc(100% + 5px);
     background: linear-gradient(45deg, #c3c4c4, #979696, #646364, 
     #839a9f, #d7d8d8, #9f9f9f, #939292, #646364);
     background-size: 300%;
     background-repeat: no-repeat;
     background-position: 100%;
     border-radius: 10px;
     animation: AnimarBorda 4s linear infinite;
     
 }
 
 @keyframes AnimarBorda {
     0% {
         background-position: 0;
     }
     100% {
         background-position: 300%;
     }
 }
 .caixa::after {
     filter: blur(5px);
 }
 
 .caixa {
     margin: auto;
      position: relative;
      width: 50px;
      height: 20px;
      color: #151320;
      background: #fff;
      display: flex;
     justify-content: center;
      align-items: center;
      border-radius: 3px;
      font-weight: 700;
  }
  
  .caixa::before, .caixa::after {
      content: '';
      position: absolute;
      z-index: -1;
      width: calc(100% + 5px);
      height: calc(100% + 5px);
      background: linear-gradient(45deg, #128686, #8d1313, #646364, 
      #839a9f, #d7d8d8, #881111, #939292, #b91bb9);
      background-size: 300%;
      background-repeat: no-repeat;
      background-position: 100%;
      border-radius: 10px;
      animation: AnimarBorda 4s linear infinite;
      
  }
  
  @keyframes AnimarBorda {
      0% {
          background-position: 0;
      }
      100% {
          background-position: 300%;
      }
  }
  .caixa::after {
      filter: blur(5px);
  }