.card-container {
    width: 420px;
background-image: url('../courses/wpg/wpgPoster.png');
    padding: 15px;
   background-size:cover;
  
    border-radius: 20px;
    color: white;
    height: 235px;
    margin-top: 10px;
    margin-left: 10px;
    border: 5px solid gray;
    transition: .5s;
  }
  .card-container:hover{
    border: 5px solid #1a9eeb;
    transition: .5s;
  }
  

  .percentage-square {
    background-color: #ffffff55;
    border-radius: 10px;
   float: right;
   text-align: center;
    width: 60px;
    height: 60px;
    padding-top: 2px;
  }

  .card-progress-bar {
background-color: #ffffff65;
border-radius: 5px;
/* (height of inner div) / 2 + padding */
margin-top: 8px;
height: 8px;
width: 60%;
}

.card-progress {
background-color: orange;

width: 25%;
/* Adjust with JavaScript */
height: 8px;
border-radius: 5px;
}

.card-heading{
    margin-bottom: 10px;
    font-size: 22px;
    width: 100%;
    font-family: vogue;
    letter-spacing: 2px;
}

.card-subtitle{
    margin-bottom: 65px;
    font-size: 18px;
    width: 310px;
    font-weight: normal;
    font-family: vogue;
    letter-spacing: 1px;
    
}

.continue-link-two-lines {
    font-weight: bold;
  
    margin-top: 25px;
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: vogue;
    letter-spacing: 2px;
}

.continue-link-one-line {
  font-weight: bold;
  
  margin-top: 25px;
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-family: vogue;
    letter-spacing: 2px;
}

.continue-link-line {
  font-weight: bold;

  margin-top: 47px;
  color: white;
  text-decoration: none;
  font-size: 16px;
  font-family: vogue;
    letter-spacing: 2px;
}

.percentage-text{
    margin-top: 35%;
    font-size: 16px;
    font-family: vogue;
    letter-spacing: 2px;
   margin-left: 5px;
}



.card-progress-bar-m1 {
background-color: #ffffff65;
border-radius: 5px;
/* (height of inner div) / 2 + padding */
margin-top: 28px;
height: 8px;
width: 70%;
}
.card-progress-bar-m2 {
background-color: #ffffff65;
border-radius: 5px;
/* (height of inner div) / 2 + padding */
margin-top: 28px;
height: 8px;
width: 70%;
}
.card-progress-bar-m3 {
background-color: #ffffff65;
border-radius: 5px;
/* (height of inner div) / 2 + padding */
margin-top: 28px;
height: 8px;
width: 70%;
}
.card-progress-bar-m4 {
  background-color: #ffffff65;
  border-radius: 5px;
  /* (height of inner div) / 2 + padding */
  margin-top: 28px;
  height: 8px;
  width: 70%;
  }
.card-progress-bar-m5 {
  background-color: #ffffff65;
  border-radius: 5px;
  /* (height of inner div) / 2 + padding */
  margin-top: 28px;
  height: 8px;
  width: 70%;
  }
  .card-progress-bar-m6 {
    background-color: #ffffff65;
    border-radius: 5px;
    /* (height of inner div) / 2 + padding */
    margin-top: 50px;
    height: 8px;
    width: 70%;
    }