/* From Uiverse.io by eslam-hany */ 
.card {
  position: relative;
  width: 220px;
  height: 320px;
  background:#3a8885;
  display: block;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
 
}



.card::before,
.card::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  background-color: #ddebea;
  transition: all 0.5s;
}

.card::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
 
}

.card::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100%  0 15px;
}


.card:hover::before,
.card:hover:after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  transition: all 0.5s;

}


.p
{
  justify-content: center;
  align-items: center;
  font-size: medium;
}
.s
{
  font-size: small;
  justify-content: center;
}
.card div>p{
  object-fit:c;
  font-size: medium;
  
  position: absolute;
  /* align-items: center; */
}


.card:hover::after {
  content: attr(data-content); /* Use the data-content attribute for dynamic content */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.5em; /* Adjust as needed */
  color: black; /* Adjust text color as needed */
  text-align: center;
  z-index: 2; /* Ensure it’s above the background overlay */
}


.card1 {
  position: relative;
  width: 220px;
  height: 320px;
  background: #3a8885;

  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  overflow: hidden; /* Prevent overflow */
  transition: none !important;
    transform: none !important;
}





.card1 div {
  position: relative; /* Change to relative to position text correctly */
}

.card1 div > p {
  position: absolute;
  right: 60px;
  bottom: 2px;
  font-size: medium;
  color: aliceblue; /* Text color */
 
  
}