#card_section{
  padding: 70px 0;
  background-color: var(--primary-color);
}

#card_section h2{
  font-size: 70px;
  text-align: center;
}

.flex_container {
  margin-top: 50px;
  display: flex;
  gap: 40px;
  justify-content: center;
  flex-wrap: wrap;
}

.card{
  width: 350px;
  max-width: calc(90% - 40px);
  background-color: var(--secondary-color);
  border-radius: 100px;
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.card p{
  font-size: 25px;
}

.card *{
  text-align: center;
}



.card a{
  background-color: var(--secondary-color);
  width: min-content;
  padding: 15px 40px;
  border-radius: 50px;
  margin: 0 auto;
  text-decoration: none;
  color: var(--text-color);
  border: 4px solid var(--primary-color);
  transition: 150ms ease-in-out;
}

.card a:hover{
  background-color: transparent;
}

@media(max-device-width: 800px) {
  #card_section h2{
    font-size: 12vw;
  }

  .card h3{
    font-size: 30px;
  }
}