.services{
  width: 90%;
  margin:  50px auto   50px auto;
  align-items: center;
  justify-content: center;
  border-radius: 80px;
  box-shadow: 2px 2px rgba(255, 255, 255, 0.122);
  
}

.container-services{
  margin: 40px auto   40px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;



}
.container-services .card{
  width: 22%;
  padding: 10px 20px;
  background: var(--color-bg-variant) transparent;
  border-radius: 1rem;
  transition:var(--transition) ;
  border: 1px solid rgba(255, 255, 255, 0.252);
}
.container-services .card:hover{
  background: transparent;
  border-color: var(--color-primary);
}
.container-services .icon{
  font-size: 70px;
  margin-bottom: 20px;
  color: var(--color-primary);
}
.container-services h3{
  margin-bottom: 20px;
  color: white;
}
.container-services p{
  font-size: 16px;
  line-height: 2;
  color: white;
}
@media (max-width:600px) {
  .container-services .card{
    width: 100%;
    margin-bottom: 10px;
    

  }
}
@media (max-width:1024px) {
  .container-services .card{
    width: 45%;
    margin-bottom: 10px;
    
  }
}