@charset "UTF-8";

/* Google Web Font */
@import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
/* font-family: 'Raleway', sans-serif; */

*{
  margin: 0; padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway', sans-serif;
}
em{font-style: normal;}
body{
  display: flex; justify-content: center; align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #ff96c7, #faefad);
}
.card{
  position: relative;
  width: 350px; height: 190px;
  border-radius: 20px;
  background-color: #fff;
  box-shadow: 0 35px 80px rgba(0,0,0,0.15);
  transition: 0.5s;
}
.card:hover{height: 450px;}
.img-box{
  position: absolute; left: 50%; top: -50px; 
  width: 150px; height: 150px;
  border-radius: 50%;
  transform: translateX(-50%);
  box-shadow: 0 10px 20px rgba(0,0,0,0.20);
  overflow: hidden;
  transition: all 0.5s;
}
.card:hover .img-box{ width: 200px; height: 200px; }
.img-box img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.card .content{
  width: 100%; height: 100%;
  display: flex; justify-content: center; align-items: end;
  overflow: hidden;
}
.card .content .details{
  width: 100%; padding: 0 40px 50px 40px;
  text-align: center;
  transition: all 0.5s;
  transform: translateY(150px);
}
.card:hover .content .details{ transform: translateY(0px); }
.card .content .details h2{  font-weight: 600; font-size: 1.25em; color: #555; line-height: 1.2em; }
.card .content .details h2 span{
  font-weight: 500; font-size: 0.75em; 
  opacity: 0.5;
} 
.card .content .details .data{
  display: flex; justify-content: space-between;
  margin: 20px 0;
}
.card .content .details .data span{ font-weight: 600; font-size: 1em; line-height: 1.2em; color: #555; }
.card .content .details .data span em{
  font-weight: 400; font-size: 0.85em;
  opacity: 0.5;
}
.card .content .details .btn button{
  padding: 10px 30px;
  border-radius: 5px; border: none;
  font-weight: 500; font-size: 1em; color: #fff;
  background-color: #F57299;
  cursor: pointer;
  outline: none;
  border: 1px solid rgba(0,0,0,0);
  transition: all 0.5s;
}
.card .content .details .btn button:nth-child(2){
  border-color: #ccc;
  color: #999;
  background: #fff;
}
.card .content .details .btn button:hover{
  background-color: #f3176b; 
  color:#fff;
  border-color: rgba(0,0,0,0);

}