.contact-card {
  width: 100%;
  height: 540px;
  background: white;
  border-radius: 1px;
  padding: 3px;
  position: relative;
  transition: all 0.5s ease-in-out;
  color: white;
}

.contact-card .contact-profile-pic {
  position: absolute;
  width: calc(100% - 6px);
  height: calc(60% - 6px);
  top: 3px;
  left: 3px;
  border-radius: 1px;
  z-index: 1;
  border: 0px solid #fbb9b6;
  overflow: hidden;
  transition: all 0.5s ease-in-out 0.2s, z-index 0.5s ease-in-out 0.2s;
}

.contact-card .contact-profile-pic img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  object-position: 0px 0px;
  transition: all 0.5s ease-in-out 0s;
}

.contact-card .contact-bottom {
  position: absolute;
  bottom: 28%;
  left: 5%;
  right: 3px;
  background: white;
  top: 43%;
  border-radius: 1px;
  z-index: 2;
  overflow: hidden;
  width: 90%;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
}

.contact-card-content {
  color: var(--bs-primary);
  width: 80%;
}

.contact-card-content:hover {
  color: var(--bs-primary);
}

.contact-card:hover .contact-bottom {
  background-color: rgba(255,255,255,0.945);
  top: 30%;
  bottom: 5%;
  transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
  color: var(--bs-primary);
}

@media (max-width: 360px) {
  #first-step {
    width: 340px;
    padding-left: 12px;
  }
}

@media (min-width: 1200px) {
  .border-left {
    border-left: 24px solid #E5E5E3;
  }
}

@media (max-width: 1200px) {
  .contact-card .contact-bottom {
    position: absolute;
    bottom: 23%;
    left: 5%;
    right: 3px;
    background: white;
    top: 43%;
    border-radius: 1px;
    z-index: 2;
    overflow: hidden;
    width: 90%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  }
}

@media (max-width: 1200px) {
  .contact-card:hover .contact-bottom {
    background-color: rgba(255,255,255,0.945);
    top: 25%;
    bottom: 0%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    color: var(--bs-primary);
  }
}

@media (max-width: 992px) {
  .contact-card .contact-bottom {
    position: absolute;
    bottom: 23%;
    left: 5%;
    right: 3px;
    background: white;
    top: 43%;
    border-radius: 1px;
    z-index: 2;
    overflow: hidden;
    width: 90%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  }
}

@media (max-width: 992px) {
  .contact-card:hover .contact-bottom {
    background-color: rgba(255,255,255,0.945);
    top: 13%;
    bottom: 0%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    color: var(--bs-primary);
  }
}

@media (max-width: 768px) {
  .contact-card .contact-bottom {
    position: absolute;
    bottom: 22%;
    left: 5%;
    right: 3px;
    background: white;
    top: 43%;
    border-radius: 1px;
    z-index: 2;
    overflow: hidden;
    width: 90%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  }
}

@media (max-width: 768px) {
  .contact-card:hover .contact-bottom {
    background-color: rgba(255,255,255,0.945);
    top: 15%;
    bottom: 10%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    color: var(--bs-primary);
  }
}

@media (max-width: 768px) {
  .padding-left-12 {
    padding-left: 24px;
  }
}

@media (max-width: 576px) {
  .contact-card .contact-bottom {
    position: absolute;
    bottom: 22%;
    left: 5%;
    right: 3px;
    background: white;
    top: 43%;
    border-radius: 1px;
    z-index: 2;
    overflow: hidden;
    width: 90%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  }
}

@media (max-width: 576px) {
  .contact-card:hover .contact-bottom {
    background-color: rgba(255,255,255,0.945);
    top: 15%;
    bottom: 12%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    color: var(--bs-primary);
  }
}

@media (max-width: 576px) {
  .padding-left-12 {
    padding-left: 24px;
  }
}

@media (max-width: 470px) {
  .contact-card .contact-bottom {
    position: absolute;
    bottom: 18%;
    left: 5%;
    right: 3px;
    background: white;
    top: 43%;
    border-radius: 1px;
    z-index: 2;
    overflow: hidden;
    width: 90%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  }
}

@media (max-width: 470px) {
  .contact-card:hover .contact-bottom {
    background-color: rgba(255,255,255,0.945);
    top: 15%;
    bottom: 2%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    color: var(--bs-primary);
  }
}

@media (max-width: 470px) {
  .padding-left-12 {
    padding-left: 24px;
  }
}

@media (max-width: 375px) {
  .contact-card .contact-bottom {
    position: absolute;
    bottom: 18%;
    left: 5%;
    right: 3px;
    background: white;
    top: 43%;
    border-radius: 1px;
    z-index: 2;
    overflow: hidden;
    width: 90%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  }
}

@media (max-width: 375px) {
  .contact-card:hover .contact-bottom {
    background-color: rgba(255,255,255,0.945);
    top: 5%;
    bottom: 5%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    color: var(--bs-primary);
  }
}

@media (max-width: 375px) {
  .padding-left-12 {
    padding-left: 24px;
  }
}

@media (max-width: 360px) {
  .contact-card .contact-bottom {
    position: absolute;
    bottom: 16%;
    left: 5%;
    right: 3px;
    background: white;
    top: 43%;
    border-radius: 1px;
    z-index: 2;
    overflow: hidden;
    width: 90%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0s;
  }
}

@media (max-width: 360px) {
  .contact-card:hover .contact-bottom {
    background-color: rgba(255,255,255,0.945);
    top: 5%;
    bottom: 5%;
    transition: all 0.5s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    color: var(--bs-primary);
  }
}

@media (max-width: 360px) {
  .padding-left-12 {
    padding-left: 24px;
  }
}

@media (min-width: 768px) {
  .padding-left-12 {
    padding-left: 0px;
  }
}