@font-face {
  font-family: Samim;
  src: url("./Samim.ttf") format("truetype");
}
*{
  font-family: 'Samim', sans-serif;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  user-select: none;
  list-style: none;
  text-decoration: none;
}
img{
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 1rem;
}
h2{font-size: 2rem;}
h3{
  background: coral;
  color: #fff;
  padding: 6px 12px;
  display: inline-block;
  margin: 10px 0 20px 0;
  font-size: 14px;
  border-radius: .5rem;
}
.businessCard{
  width: 500px;
  height: 280px;
}
.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.front, .back{
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  backface-visibility: hidden;
  transition: all .5s linear;
  border-radius: 1rem;
}
.back{
  background: #02484f;
  color: #fff;
  padding: 1rem 2rem;
  transform: perspective(400px) rotateX(180deg);
}
.back::before{
  content: "";
  position: absolute;
  background: rgb(255, 145, 105);
  width: 80px;
  height: 120px;
  left: 1rem;
  bottom: -1px;
  clip-path: polygon(0 100%,40% 0,100% 100%);
}
.back::after{
  content: "";
  position: absolute;
  background: coral;
  width: 100px;
  height: 100%;
  bottom: 0;
  left: -1px;
  clip-path: polygon(0 0,90% 0,40% 100%,0% 100%);
}
.infoLink{
  margin: .8rem 0;
  display: flex;
  align-items: center;
}
.infoLink a{
  display: flex;
  color: #fff;
  transition: all .5s ease-in-out;
}
.infoLink a:hover{
  color: coral;
}
.infoLink i{
  width: 1.8rem;
  height: 1.8rem;
  background: coral;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 6px;
  border-radius: .4rem;
  transition: all .5s ease-in-out;
}
.infoLink i:hover{
  background: #fff;
  color: coral;
}
.businessCardActive .back{
  transform: perspective(400px) rotateX(0deg);
}
.businessCardActive .front{
  transform: perspective(400px) rotateX(-180deg);
}