body {
         background-color: #f8f9fa;
      }

      .profile-img {
         width: 140px;
         height: 140px;
         object-fit: cover;
         border-radius: 50%;
         border: 4px solid #000000;
      }

      .sub-title {
         display: inline-block;
         padding-bottom: 5px;
         margin-bottom: 15px;
         text-transform: uppercase;
      }

      /* ---- CIRCLE PROGRESS STYLE ---- */
      .progress-circle {
         position: relative;
         width: 120px;
         height: 120px;
         margin: auto;
      }

      .progress-circle svg {
         transform: rotate(-10deg);
         width: 120px;
         height: 120px;
         stroke: #464343;
      }

      .progress-circle circle {
         fill: none;
         stroke-width: 6;
         stroke-linecap: round;
      }

      .progress-bg {
         stroke: #d0d2d5;
         
      }


      /* ---- PROGRESS BAR STYLE ---- */
      .progress-bar {
         transition: stroke-dashoffset 1s ease-in-out;
      }

      .progress {
         height: 15px;
         border-radius: 10px;
         background-color: #d0d2d5;
      }

      .progress-text {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
         font-weight: 600;
         font-size: 1.2rem;
      }

      .edu-logo {
         width: 100px;
         height: 100px;
         object-fit: contain;
         margin-right: 15px;
      }