.join-platform-container {
  margin-bottom: 200px;
}
.join-platform-container h2 {
  font-size: 50px;
  font-weight: 500;
  color: #000;
  text-align: center;
  margin-bottom: 100px;
}
.join-platform-card {
  border: 1px solid transparent;
  border-radius: 30px;
  padding: 40px;
  height: 100%;
  text-decoration: none;
  transition: all 0.2s ease-in;
}
.join-platform-card-1 {
  background-color: #f8f8ff;
}
.join-platform-card-1:hover {
  border-color: #7b7bdf;
}
.join-platform-card-2 {
  background-color: #edf8ff;
}
.join-platform-card-2:hover {
  border-color: #68a8d3;
}
.join-platform-card-1 svg path {
  fill: #7b7bdf;
}
.join-platform-card svg {
  transition: all 0.2s ease-in;
}
.join-platform-card:hover svg {
  margin-left: 10px;
}
.join-platform-card .profile-img {
  width: 110px;
  height: 110px;
  border-radius: 100%;
  overflow: hidden;
  margin-block: 20px 30px;
}
.join-platform-card .profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.join-platform-card h3 {
  font-size: 35px;
  font-weight: 500;
  color: #333333;
}
.join-platform-card p {
  font-size: 18px;
  color: #7b7b7b;
}

/* responsive */
@media screen and (max-width: 576px) {
  .join-platform-container {
    margin-bottom: 100px;
  }
  .join-platform-container h2 {
    font-size: 32px;
    margin-bottom: 50px;
  }
  .join-platform-card {
    padding: 20px;
  }
  .join-platform-card .profile-img {
    width: 80px;
    height: 80px;
    margin-block: 10px 20px;
  }
  .join-platform-card h3 {
    font-size: 25px;
  }
  .join-platform-card p {
    font-size: 16px;
  }
}