.skillcardBox {
  width: 200px;
  height: 254px;
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 20px;
  cursor: pointer;
  box-shadow: rgba(249, 249, 249, 0.4) 0px 30px 60px -12px inset,
    rgba(15, 238, 241, 0.5) 0px 18px 36px -18px inset;
}
.skillcard {
  position: relative;
  width: 97%;
  height: 97%;
  color: #2e2d31;
   background: #ffffff; 
  overflow: hidden;
  border-radius: 20px;
}

.temporary_text {
  width: 100%;
  height: 200px; /* Adjust height as needed */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background-color: #f9f9f9; /* Optional: background for contrast */
}

.temporary_text img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Use 'cover' if you want it to fill the box entirely */
}



/* .temporary_text {
  font-weight: bold;
  font-size: 24px;  
  padding: 16px 15px;
  color: #d86464;
} */

.skillcard_title {
  font-weight: bold;
  /* font-size: 1.5em;  */
  color: #ffffff;
  font-size: clamp(12px, 2vw, 18px); /* Responsive font size */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.skillcard_content {
  position: absolute;
  bottom: 0;
  font-size: 0.7em;
  width: fit-content;
 
    /* edit the width to fit skillcard */
  width: 100%;
  padding: 15px;
  background: #f3921ce9;
  border-top-left-radius:20px ;
    /* edit here to change the height of the content box */
  transform: translateY(190px);
  transition: transform .4s;
}



.skillcardBox::before {
  content: "";
  position: absolute;
  width: 20%;
  height: 150%;
  /* background: #ff0000; */
  background: -webkit-linear-gradient(to right,  #eb0d0d,  hsl(42, 84%, 56%), #f9b804);
  background: linear-gradient(to right,  #d41212,  hsl(42, 84%, 56%), #f9b804);
  transform-origin: Top;
  animation: glowing_401 2.5s linear infinite;
}

.skillcard_content::before {
  content: '';
  position: absolute;
  top: -47px;
  right: -45px;
  width: 100px;
  height: 100px;
  transform: rotate(-360deg);
  border-radius: 50%;
  /* box-shadow: outset 40px 50px #ea0000; */
}

.skillcard_title {
  color: #535252;
  font-weight: 800;
  line-height: 15px;
}

.skillcard_subtitle {
  display: block;
  font-size: 12px;
  margin-bottom: 10px;
}

.skillcard_description {
  max-height: 200px; 
  overflow-y: auto;         /* Enable vertical scrollbar when content overflows */
  /* transition: max-height 0.5s ease;  */
  white-space: wrap;
  scrollbar-width: thin;              /* For Firefox */
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;  
  text-align: left;
  padding-right: 10px;

  font-size: 14px;
  color: #353434;
  opacity: 0;
  transition: opacity .5s;
  margin: 0;
}

.skillcard:hover .skillcard_content {
  transform: translateY(0);
}

.skillcard:hover .skillcard_description {
  opacity: 1;
  transition-delay: .25s;
}

@keyframes glowing_401 {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}