.margin{
padding-top: 200px;
}
.pi{
  margin-left: -630px;
  font-size: 2.5rem;
}
span{
  color: white;
}
.flex{
  padding-left:0px;
}
.margi{
  margin-top: 150px;
}
.img2{
  margin-left: 120px;
}
#fle p{
  font-size: 1rem;
  color: black;
  margin-left: -20px;margin-top: -40px;
 
}
footer{
  margin-bottom: -120px;
  margin-top: 20px;
}
button{
  background-color: red;
  border-color: red;
  color: white;
  padding: 10px;
  border-radius: 30px;
}
button:hover{
  background-color: blue;
  border-color: blue;
  transition: 1s;

}
@media(min-width:1500px){
 
    .margi{
      margin-top: 470px;
    }
  }

  @media (min-width: 300px) and (max-width: 500px){

    *{
      margin: 0px;
      padding: 0px;
    }
    .margi{
      display: grid;
      grid-template-columns: 1fr;
    }
    .div{
      display: grid;
     grid-template-columns: 1fr;
      padding-left: 30px;
    }
    .logo{
      display: none;
    }
    .grid2{
      display: grid;
      grid-template-columns: 1fr;
    }
    .van{
      display: none;
        }
    
        
       .happy1{
        display: flex;
        flex-direction: column;
        padding-left: 10px;
       }
       .imga{
        height: 590px;
        
       }
       .logo{
       display: none;
       
       }
       .header-menu{
        
        margin-top: -10px;
        padding-top: -30px;
       }
       li{
        font-size: 20px;
        display: flex;
        
       }
       ul{
        display: flex;
        flex-direction: row;
       
       }
       .grid1{
        display: grid;
        grid-template-columns: 1fr;
       }
       .grid2{
        display: grid;
        grid-template-columns: 1fr;
     
       }
       .grid{
        display: grid;
        grid-template-columns: 1fr;
       
       }
       .bg{
        display: grid;
        grid-template-columns: 1fr;
       }
       .happy{
        display: grid;
        grid-template-columns: 1fr;
       }
       .gf{
        width: 300px;
        padding-left: 30px;
       }
       .gf1{
        padding-left: 50px;
       }
      p{
        padding-left: 5px;
      }
      .a{
        padding-top: 30px;
      }
      .header{
        width: 100vw;
      }
      .cabecalho nav li a{
        font-size: 9px;
       
        display: flex;
    
      
      
      }
    
      .cabecalho{
        margin-left: -10px;
        padding: 0px;
        width: 100vw;
        height: 100px;
      }
      .grid3{
        display: grid;
        grid-template-columns: 1fr;
      }
      header{
        width: 100vw
      }
   
    .grid3{
      display: grid;
      grid-template-columns: 1fr;
    }
    .pi{
      margin-left: 0px;
    }
    .img2{
      margin-left: 20px;
    }
    p,h1{
      padding-left: 5px;
    }
    p{
      padding-left: 40px;
      padding-right: 20px;
    }
  }