@import url('https://fonts.googleapis.com/css?family=Poppins:100,300,400,500,600,700,800, 800i, 900&display=swap');  
* {  
  padding: 0;  
  margin: 0;  
  /* font-family: 'Poppins', sans-serif;   */
}  
body {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  min-height: 100vh;  
  background: #ececec;  
}  
.cont {  
  position: relative;  
  /* margin-left: 20px; */
}  
.cont .card {  
  position: relative;  
  width: 320px;  
  height: 450px;  
  background: #232323;  
  border-radius: 20px;  
  overflow: hidden;  
  top: 50px;
  /* left: 100px; */
}  
.cont .card:before {  
  content: "";  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  /* background: #1BBFE9;   */
  background-color: #ea713e;
  clip-path: circle(150px at 80% 20%);  
  transition: 0.5s ease-in-out;  
}  
.cont .card:hover:before {  
  clip-path: circle(300px at 80% -20%);  
}  
.cont .card:after {  
  /* content: "OPEN";   */
  position: absolute;  
  top: 30%;  
  left: -20%;  
  font-size: 12em;  
  font-weight: 800;  
  font-style: italic;  
  color: rgba(255, 255, 255, 0.04);  
}  
.cont .card .imgBx {  
  position: absolute;  
  top: 50%;  
  transform: translateY(-50%);  
  z-index: 1000;  
  width: 100%;  
  height: 100%;  
  transition: .5s;  
}  
.cont .card:hover .imgBx {  
  top: 0%;  
  transform: translateY(-25%);  
  /* bug */  
}  
.cont .card .imgBx img {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%) rotate(1deg);  
  width: 270px;  
}  
.cont .card .contentBx {  
  position: absolute;  
  bottom: 0;  
  width: 100%;  
  height: 100px;  
  text-align: center;  
  transition: 1s;  
  z-index: 90;  
}  
.cont .card:hover .contentBx {  
  height: 210px;  
}  
.cont .card .contentBx h2 {  
  position: relative;  
  font-weight: 600;  
  letter-spacing: 1px;  
  color: #fff;  
}  
/* .container .card .contentBx .size,  
.container .card .contentBx .color {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 8px 20px;  
  transition: .5s;  
  opacity: 0;  
  visibility: hidden;  
}  
.container .card:hover .contentBx .size {  
  opacity: 1;  
  visibility: visible;  
  transition-delay: .5s;  
}   */
.cont .card:hover .contentBx .color {  
  opacity: 1;  
  visibility: visible;  
  transition-delay: .6s;  
}  
.cont .card .contentBx .size h3,  
.cont .card .contentBx .color h3 {  
  color: white;  
  font-weight: 300;  
  font-size: 14px;  
  text-transform: uppercase;  
  letter-spacing: 2px;  
  margin-right: 10px;  
}  
/* .container .card .contentBx .size span {  
  width: 26px;  
  height: 26px;  
  text-align: center;  
  line-height: 26px;  
  font-size: 14px;  
  display: inline-block;  
  color: #111;  
  background: #fff;  
  margin: 0 5px;  
  transition: .5s;  
  color: #111;  
  border-radius: 4px;  
  cursor: pointer;  
}   */
 /* other bug */  
/* .container .card .contentBx .size span:hover {
  background: #B90000;  
}   */
.cont .card .contentBx .color span {  
  width: 20px;  
  height: 20px;  
  background: #ff0;  
  border-radius: 50%;  
  margin: 0 5px;  
  cursor: pointer;  
}  
.cont .card .contentBx .color span:nth-child(2) {  
   background: #1BBFE9;  
}  
.cont .card .contentBx .color span:nth-child(3) {  
   background: #1B2FE9;  
}  
.cont .card .contentBx .color span:nth-child(4) {  
   background: #080481;  
}  
.cont .card .contentBx a {  
  font-family: 'Poppins', sans-serif; 
  display: inline-block;  
  /* padding: 10px 20px;   */
  /* padding: 0px 12px; */
  padding-right:3px;
  /* padding-left: 5px; */
  background: #fff;  
  border-radius: 4px;  
  /* margin-top: 10px;   */
  text-decoration: none;  
  font-weight: 600;  
  color: #111;  
  opacity: 0;  
  transform: translateY(50px);  
  transition: .5s; 
  margin: 20px; 
}  
.cont .card:hover .contentBx a {  
  opacity: 1;  
  transform: translateY(0px);  
  transition-delay: .7s;  
}









a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 140px;
  text-align: center;
  font-size: 20px;
  letter-spacing: 2px;
  line-height: 60px;
  text-decoration: none;
  color: #fff;
  
}

a svg,
a svg rect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: transparent;
}

a svg rect {
  stroke: #fff;
  stroke-width: 4;
  transition: 1s;
  stroke-dasharray: 500,500;
  stroke-dashoffset: 0;
}

a:hover svg rect {
  stroke-dashoffset: 220;
  stroke-dasharray: 100,400;
  stroke: #00bcd4;
}






.cont .card1 {  
  position: relative;  
  width: 320px;  
  height: 450px;  
  background: #232323;  
  border-radius: 20px;  
  overflow: hidden;  
  top: 100px;
}  
.cont .card1:before {  
  content: "";  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  /* background: #1BBFE9;   */
  background-color: #ea713e;
  clip-path: circle(150px at 80% 20%);  
  transition: 0.5s ease-in-out;  
}  
.cont .card1:hover:before {  
  clip-path: circle(300px at 80% -20%);  
}  
.cont .card1:after {  
  /* content: "OPEN";   */
  position: absolute;  
  top: 30%;  
  left: -20%;  
  font-size: 12em;  
  font-weight: 800;  
  font-style: italic;  
  color: rgba(255, 255, 255, 0.04);  
}  
.cont .card1 .imgBx {  
  position: absolute;  
  top: 50%;  
  transform: translateY(-50%);  
  z-index: 1000;  
  width: 100%;  
  height: 100%;  
  transition: .5s;  
}  
.cont .card1:hover .imgBx {  
  top: 0%;  
  transform: translateY(-25%);  
  /* bug */  
}  
.cont .card1 .imgBx img {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%) rotate(1deg);  
  width: 270px;  
}  
.cont .card1 .contentBx {  
  position: absolute;  
  bottom: 0;  
  width: 100%;  
  height: 100px;  
  text-align: center;  
  transition: 1s;  
  z-index: 90;  
}  
.cont .card1:hover .contentBx {  
  height: 210px;  
}  
.cont .card1 .contentBx h2 {  
  position: relative;  
  font-weight: 600;  
  letter-spacing: 1px;  
  color: #fff;  
}  
/* .container .card1 .contentBx .size,  
.container .card1 .contentBx .color {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 8px 20px;  
  transition: .5s;  
  opacity: 0;  
  visibility: hidden;  
}  
.container .card1:hover .contentBx .size {  
  opacity: 1;  
  visibility: visible;  
  transition-delay: .5s;  
}   */
.cont .card1:hover .contentBx .color {  
  opacity: 1;  
  visibility: visible;  
  transition-delay: .6s;  
}  
.cont .card1 .contentBx .size h3,  
.cont .card1 .contentBx .color h3 {  
  color: white;  
  font-weight: 300;  
  font-size: 14px;  
  text-transform: uppercase;  
  letter-spacing: 2px;  
  margin-right: 10px;  
}  
/* .container .card1 .contentBx .size span {  
  width: 26px;  
  height: 26px;  
  text-align: center;  
  line-height: 26px;  
  font-size: 14px;  
  display: inline-block;  
  color: #111;  
  background: #fff;  
  margin: 0 5px;  
  transition: .5s;  
  color: #111;  
  border-radius: 4px;  
  cursor: pointer;  
}   */
 /* other bug */  
/* .container .card1 .contentBx .size span:hover {
  background: #B90000;  
}   */
.cont .card1 .contentBx .color span {  
  width: 20px;  
  height: 20px;  
  background: #ff0;  
  border-radius: 50%;  
  margin: 0 5px;  
  cursor: pointer;  
}  
.cont .card1 .contentBx .color span:nth-child(2) {  
   background: #1BBFE9;  
}  
.cont .card1 .contentBx .color span:nth-child(3) {  
   background: #1B2FE9;  
}  
.cont .card1 .contentBx .color span:nth-child(4) {  
   background: #080481;  
}  
.cont .card1 .contentBx a {  
  display: inline-block;  
  /* padding: 10px 20px;   */
  /* padding: 0px 12px; */
  padding-right:3px;
  /* padding-left: 5px; */
  background: #fff;  
  border-radius: 4px;  
  /* margin-top: 10px;   */
  text-decoration: none;  
  font-weight: 600;  
  color: #111;  
  opacity: 0;  
  transform: translateY(50px);  
  transition: .5s; 
  margin: 20px; 
}  
.cont .card1:hover .contentBx a {  
  opacity: 1;  
  transform: translateY(0px);  
  transition-delay: .7s;  
}





.cont .card2 {  
  position: relative;  
  width: 320px;  
  height: 450px;  
  background: #232323;  
  border-radius: 20px;  
  overflow: hidden;  
  top: 100px;
}  
.cont .card2:before {  
  content: "";  
  position: absolute;  
  top: 0;  
  left: 0;  
  width: 100%;  
  height: 100%;  
  /* background: #1BBFE9;   */
  background-color: #ea713e;
  clip-path: circle(150px at 80% 20%);  
  transition: 0.5s ease-in-out;  
}  
.cont .card2:hover:before {  
  clip-path: circle(300px at 80% -20%);  
}  
.cont .card2:after {  
  /* content: "OPEN";   */
  position: absolute;  
  top: 30%;  
  left: -20%;  
  font-size: 12em;  
  font-weight: 800;  
  font-style: italic;  
  color: rgba(255, 255, 255, 0.04);  
}  
.cont .card2 .imgBx {  
  position: absolute;  
  top: 50%;  
  transform: translateY(-50%);  
  z-index: 1000;  
  width: 100%;  
  height: 100%;  
  transition: .5s;  
}  
.cont .card2:hover .imgBx {  
  top: 0%;  
  transform: translateY(-25%);  
  /* bug */  
}  
.cont .card2 .imgBx img {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  transform: translate(-50%, -50%) rotate(1deg);  
  width: 270px;  
}  
.cont .card2 .contentBx {  
  position: absolute;  
  bottom: 0;  
  width: 100%;  
  height: 100px;  
  text-align: center;  
  transition: 1s;  
  z-index: 90;  
}  
.cont .card2:hover .contentBx {  
  height: 210px;  
}  
.cont .card2 .contentBx h2 {  
  position: relative;  
  font-weight: 600;  
  letter-spacing: 1px;  
  color: #fff;  
}  
/* .container .card2 .contentBx .size,  
.container .card2 .contentBx .color {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  padding: 8px 20px;  
  transition: .5s;  
  opacity: 0;  
  visibility: hidden;  
}  
.container .card2:hover .contentBx .size {  
  opacity: 1;  
  visibility: visible;  
  transition-delay: .5s;  
}   */
.cont .card2:hover .contentBx .color {  
  opacity: 1;  
  visibility: visible;  
  transition-delay: .6s;  
}  
.cont .card2 .contentBx .size h3,  
.cont .card2 .contentBx .color h3 {  
  color: white;  
  font-weight: 300;  
  font-size: 14px;  
  text-transform: uppercase;  
  letter-spacing: 2px;  
  margin-right: 10px;  
}  
/* .container .card2 .contentBx .size span {  
  width: 26px;  
  height: 26px;  
  text-align: center;  
  line-height: 26px;  
  font-size: 14px;  
  display: inline-block;  
  color: #111;  
  background: #fff;  
  margin: 0 5px;  
  transition: .5s;  
  color: #111;  
  border-radius: 4px;  
  cursor: pointer;  
}   */
 /* other bug */  
/* .container .card2 .contentBx .size span:hover {
  background: #B90000;  
}   */
.cont .card2 .contentBx .color span {  
  width: 20px;  
  height: 20px;  
  background: #ff0;  
  border-radius: 50%;  
  margin: 0 5px;  
  cursor: pointer;  
}  
.cont .card2 .contentBx .color span:nth-child(2) {  
   background: #1BBFE9;  
}  
.cont .card2 .contentBx .color span:nth-child(3) {  
   background: #1B2FE9;  
}  
.cont .card2 .contentBx .color span:nth-child(4) {  
   background: #080481;  
}  
.cont .card2 .contentBx a {  
  display: inline-block;  
  /* padding: 10px 20px;   */
  /* padding: 0px 12px; */
  padding-right:3px;
  /* padding-left: 5px; */
  background: #fff;  
  border-radius: 4px;  
  /* margin-top: 10px;   */
  text-decoration: none;  
  font-weight: 600;  
  color: #111;  
  opacity: 0;  
  transform: translateY(50px);  
  transition: .5s; 
  margin: 20px; 
}  
.cont .card2:hover .contentBx a {  
  opacity: 1;  
  transform: translateY(0px);  
  transition-delay: .7s;  
}