.project-card-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.project-card-text {
    -webkit-line-clamp: 2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    color: #000;
    margin-top: 0px;
}

.read-more {
    border-color: var(--secondary-color);
    background-color: #ffffff;
    color: var(--secondary-color);        
}

.read-more:hover {
    background-color: #f9f9f9;
    color: var(--secondary-color);
    text-decoration: none;
    border-color: var(--secondary-color);
}

.project-card-title {
    color: var(--primary-color) !important;
    font-weight: bold !important;
}

.project-card-body, .project-card-footer {
    padding: 16px;
}

.hvr-grow-shadow {      
    -webkit-transform: perspective(1px) translateZ(0) !important;
    transform: perspective(1px) translateZ(0) !important;        
    -webkit-transition-duration: 0.3s !important;
    transition-duration: 0.3s !important;
    -webkit-transition-property: box-shadow, transform;
    transition-property: box-shadow, transform;
}

.hvr-grow-shadow:hover,
.hvr-grow-shadow:focus,
.hvr-grow-shadow:active {
    box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
    -webkit-transform: scale(1.05) !important;
    transform: scale(1.05) !important;
}

.project-card-progress {        
    margin-bottom: 10px;
    height: 12px;
}

.project-card-progress::-webkit-progress-value {
    background-color: var(--primary-color);
}


.is-loading {
    .image,    
    h3,
    h5,
    small,
    progress,
    a,
    p {
      background: #eee;
      background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
      border-radius: 5px;
      background-size: 200% 100%;
      animation: 1.5s shine linear infinite;
    }
  
    .image {
      height: 200px;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  
    h3{
      height: 30px;
    }
  
    p {
      height: 50px;
      margin-top: 5px;
    }

    a {
      height: 30px;
      width: 30%;
    }

    h5{
        height: 12px;
        width: 75%;        
    }

    progress{
        margin-bottom: 10px;
    }
  }
  
  @keyframes shine {
    to {
      background-position-x: -200%;
    }
  }