#training{
    display:grid;
    align-items: center;
    text-align: center;
    background-color: var(--secondary-color);
    padding: 50px 25px;
  
    
}



#training .person_text{
    max-width: 100%;
  padding: 0px 50px;
  margin-top: 30px;
  color: var(--secondary-text-color);
   
}

.cards{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    padding: 100px 25px;
    gap: 20px;
}
.card{
    max-width: 400px;
    max-height: 400px;
    background-color: var( --primary-color);
    padding: 20px;
    transition: all 200ms ease-in;
}
.card:hover{
 transform: translateY(-20px);
 transition: all 200ms ease-in;
 cursor: pointer;
 border-radius: 10px;
 background-color: var( --light-secondary-color);
 box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

.card i{
    font-size: 100px;
    margin-top: 20px;
    color: var(--main-brand-color)
}
.card i:hover{
    font-size: 120px;
    color: white;
    transition: all 200ms;
}
h2{
    margin-top: 20px;
}

@media (max-width:800px){
    #training .person_text{
        max-width: 100%;
      padding: 0px 10px;
      margin-top: 30px;
      color: var(--secondary-text-color);
       
    }
}