.portfolio-card {
  width: 100%;
  height: auto;
  perspective: 1000px;
}

.card-inner {
  width: 100%;
  height: 300px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.999s;
  direction: ltr !important;
}

.portfolio-card:hover .card-inner {
  transform: rotateY(180deg);
}

.portfolio-card:hover .card-back{
  opacity: 1;
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


.card-back>ul>li{
  cursor: default;
}
 
.card-back>p{
  cursor: default;
}

.card-front {
  background-color: #6A2C70;
  color: #fff;
  text-align:center;
  align-items: center;
  border-radius: 15px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(0deg);
}

.card-back {
  background-color: #F08A5D;
  color: #fff;
  align-items: center;
  border: 10px solid #F08A5D;
  border-radius: 15px;
  font-size: 18px;
  transform: rotateY(180deg);
  opacity: 0;
  transition: all 1s;
}


.card-back ul{
  width: 80%;
  margin: auto auto;
  margin-top:10px;
}

 

.card-icon{
   margin-bottom: 10px;
   margin-top: 70px;
}

.card-column{
  min-height: 300px;
}

.skills.html{
  margin-top: 80px;
  position: relative;
  text-align: right;
  background-color: #ffffff;
  color: black; 
  font-size: 5px;
}

.skills.html::after {
  content: attr(data-content);
  font-size: 15px;
  right: -3px;
  position: absolute;
  bottom: 10px;
  color: #fff;
  top: -25px;
}

.skill-container{
  width: 85%;
  background-color: #000; 
  padding:0px ;
  margin: auto auto;
}