.Progress {
    position: relative;
    width: 100%;
    padding: 45px 0 15px 0;
}
  .circle-chart {
    width: 130px;
    height: 150px;
    overflow: visible !important;
  }
  
  .circle-chart__circle {
    stroke: #00acc1;
    stroke-width: 4;
    stroke-linecap: round;
    fill: none;
    animation: circle-chart-fill 2s reverse; /* 1 */ 
    transform: rotate(-90deg); /* 2, 3 */
    transform-origin: center; /* 4 */
  }
  
  .circle-chart__circle--negative {
    transform: rotate(-90deg) scale(1,-1); /* 1, 2, 3 */
  }
  
  .circle-chart__background {
    stroke: #efefef;
    stroke-width: 2;
    fill: none; 
  }
  
  .circle-chart__info {
    animation: circle-chart-appear 2s forwards;
    opacity: 0;
    transform: translateY(0.3em);
  }
  
  .circle-chart__percent {
    alignment-baseline: hanging;
    text-anchor: middle;
    font-size: 7px;
  }
  
  .circle-chart__subline {
      alignment-baseline: central;
      text-anchor: middle;
      font-size: 3px;
  }
  
  .success-stroke {
    stroke: #00C851;
  }
  
  .warning-stroke {
    stroke: #ffbb33;
  }
  
  .danger-stroke {
    stroke: #ff4444;
  }
  
  @keyframes circle-chart-fill {
    to { stroke-dasharray: 0 100; }
  }
  
  @keyframes circle-chart-appear {
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  
  .skills{
  color: black;
  }
  
  .skills_section{
    width: 100%;
    margin: 0 auto;
    margin-bottom: 20px;
  }
  
  .skill-head{
    margin: 80px 0;
  }
  
  .skill-head h1{
    font-size: 60px;
    font-weight: 700;
  }
  
  
  .skill-head p{
    margin-bottom: 10px;
  }
  
  .skills-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .single-skill {
    width: 25%;
    margin-bottom: 20px;
  }
  
  .success-stroke {
    stroke: #343148 !important;
  }
  
  .circle-chart__background {
    stroke: #ede4e4;
    stroke-width: 2;
  }
  
  /* Extra small devices (portrait phones, less than 576px) */
  @media (max-width: 575.98px) {
  
      .skill-head {
          margin: 50px 0;
      }	
  
      .skill-head h1 {
          font-size: 30px;
      }
  
      .skill-icon {
          width: 50%;
      }
      
      .skill-icon i {
          font-size: 70px;
      }
  
      .single-skill {
          width: 50%;
      }
  
      .circle-chart {
          width: 110px;
          height: 120px;
      }
  }