@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@300&display=swap");

.profile-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;

  color: black;
  font-family: "Raleway", sans-serif;
}

.card {
  position: relative;

  width: 255px;
  height: 400px;

  overflow: hidden;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.card:hover img {
  filter: blur(3px);

  transform: scale(1.2);
}

.card:hover .card-details,
.card:hover .card-details-social a {
  transform: none;
}

.card img {
  width: 100%;
  height: 100%;

  object-fit: cover;

  transition: all 0.3s;
}

.card-details {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 15px;

  position: absolute;

  bottom: 0;
  left: 0;

  width: 100%;

  background-color: white;

  padding: 20px 10px;

  transform: translateY(100%);

  transition: all 0.3s;
}

.card-details h2{
  font-size: 20px;
}

.card-details h3{
  font-size: 16px;
}

.card-details-social,
.card-details-social ul,
.card-details-social ul li a {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card-details-social ul li {
  list-style-type: none;

  /*   transition: all 0.1s; */
}

.card-details-social ul li:not(:last-child) {
  margin-right: 15px;
}

.card-details-social ul li a {
  width: 35px;
  height: 35px;

  color: #272727;
  background-color: white;

  border-radius: 50px;

  box-shadow: 0 5px 4px grey;

  cursor: pointer;

  transform: translateY(50px);

  transition: all 0.3s;
}

.card-details-social ul li:nth-child(1) a {
  transition-delay: 0.1s;
}

.card-details-social ul li:nth-child(2) a {
  transition-delay: 0.2s;
}

.card-details-social ul li:nth-child(3) a {
  transition-delay: 0.3s;
}

.card-details-social ul li a svg {
  width: 20px;
  height: 20px;
}