.stepwise-section {
  padding: 1em 0;
   font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  line-height: 1.8;
  font-weight: normal;
  background: #fafafa;
  color: gray; 
}

.stepwise-no-pt {
  padding-top: 0; }

.stepwise-no-pb {
  padding-bottom: 0; }

.heading-section {
  font-size: 28px;
  color: #000; }

.step-description{
  padding: 0 20px;
}




.stepwise-section h1, .stepwise-section h2, .stepwise-section h3, .stepwise-section h4, .stepwise-section h5 .stepwise-section h6,
.stepwise-section .h1, .stepwise-section .h2, .stepwise-section .h3, .stepwise-section .h4, .stepwise-section .h5, .stepwise-section .h6 {
  line-height: 1.5;
  font-weight: 400;
  font-family: "Roboto", Arial, sans-serif;
  color: #000; 
  font-style: normal;
  text-transform: none ;
  letter-spacing: 0;
  position: relative;
}

.stepwise-coursetitle {
  line-height: 1.2;
  font-size: 1.4em;
  font-weight: 400;
  font-family: "Roboto", Arial, sans-serif;
  color: #000; 
  font-style: normal;
  text-transform: none ;
  letter-spacing: 0;
  position: relative;
}


.stepwise-heading {
  line-height: 1.2;
  font-size: 12px;
  font-weight: 400;
  font-family: "Roboto", Arial, sans-serif;
  color: #000; 
  font-style: normal;
  text-transform: none ;
  letter-spacing: 0;
  position: relative;
}

.stepwise-section h5::before, .stepwise-section h6::before {
content: '';
position: absolute;
display: none;
width: 15%;
top: 30px;
left: -25px;
border-bottom:0;
}


.stepwise-accordion {
  margin: 0 auto;
  -webkit-box-shadow: 0px 10px 29px -16px rgba(0, 0, 0, 0.12);
  -moz-box-shadow: 0px 10px 29px -16px rgba(0, 0, 0, 0.12);
  box-shadow: 0px 10px 29px -16px rgba(0, 0, 0, 0.12);
  background: #fff;
  border-radius: 5px;
  overflow: hidden; }

.stepwise-section .wrap {
  background: #fad735; }

  .stepwise-section .wrap h5 {
    color: #2d4d96; }

.stepwise-accordion .card,
.stepwise-accordion .card:last-child .card-header {
  border: none;
  background: transparent; }

.stepwise-accordion .card-header {
  border: none;
  background: transparent;
  text-align: left; }
    .stepwise-accordion .card-header .numbers {
      padding: ;
    }
  .stepwise-accordion .card-header .title {
    font-size: 16px;
    position: relative;
    padding-left: 5px;
    font-weight: 300;
    z-index: 0;
    text-align: left; 
  }
     .stepwise-accordion .card-header .completion {
      
    font-size: 16px;
      width:90px;
      color: #7d7b7b;
      position: relative;
      padding: 0 10px;
      z-index: 0;
      text-align: right; }
       .stepwise-accordion .card-header .completion i.fa-check {
        text-decoration: none;
        color: #89b456;
        font-size: 22px; }

 .stepwise-accordion .icon {
  display: inline-block;
  width: 30px;
  padding: 0 5px;
 }


.stepwise-accordion .fa {

  font-size: 16px;
  color: rgba(0, 0, 0, 0.3); }

.stepwise-accordion .btn {
  text-decoration: none;
  white-space: normal;
   -webkit-box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19) !important;
    -moz-box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19) !important;
    box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19) !important; }

}

  .stepwise-accordion .btn:hover {
    -webkit-box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19) !important;
    -moz-box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19) !important;
    box-shadow: 0px 8px 18px -16px rgba(0, 0, 0, 0.19) !important; }
  .stepwise-accordion .btn:focus {
    -webkit-box-shadow: 0px 12px 18px -16px rgba(0, 0, 0, 0.37) !important;
    -moz-box-shadow: 0px 12px 18px -16px rgba(0, 0, 0, 0.37) !important;
    box-shadow: 0px 12px 18px -16px rgba(0, 0, 0, 0.37) !important; }

.stepwise-accordion .btn-link {
  width: 100%;
  color: #000;
  text-decoration: none;
}

.stepwise-accordion .btn-link:hover,
.stepwise-accordion .btn-link:focus {
  text-decoration: none; }




.stepwise-section  [data-bs-toggle="collapse"] .fa:before {
  font: var(--fa-font-solid);
    content: ' \f078';
  font-style: normal; }



.stepwise-section  [data-toggle="collapse"] .fa:before {
  font: var(--fa-font-solid);
    content: ' \f078';
  font-style: normal; }

.stepwise-section  [aria-expanded="true"] .fa::before {
  font: var(--fa-font-solid);
    content: ' \f077';
  font-style: normal; 
}
/*
.stepwise-section .btn-link[aria-expanded="true"]{
  background: #e0e0e0;
}
*/




.stepwise-section .card {
  border: none;
}

.legend {
  margin: 0 auto;
  background: #f6f6f7;
    font-size: 1.2em;
    line-height: 1.2em;
}
@media only screen and (max-width: 768px) {
  .legend {
    width:50%;
  }
}


.stepwise-section .card-body {
  background: rgba(0, 0, 0, 0.02); }
  .stepwise-section .card-body .menus {
    width: 100%;
    padding: 0;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 5px;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s; }
    @media (prefers-reduced-motion: reduce) {
      .stepwise-section .card-body .menus {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } }
    .stepwise-section .card-body .menus:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
      border: none; }
    .stepwise-section .card-body .menus .text {
      padding: 0 20px; }
    .stepwise-section .card-body .menus .text p {
        margin-bottom: 0;
        color: rgba(0, 0, 0, 0.4); }
    .stepwise-section .card-body .menus .text  h3 {
        font-size: 16px;
        font-weight: 500; }
    .stepwise-section .card-body .menus .one-half{
      width: 100%;
    }


i.blue{
  color: #74a1c1;
}

.one-forth {
  text-align: right;
  min-width: 150px;
}
.stepwise-inprogress {
  font-size: 21px;
  color: #fff;
  background-color: #56abeb;
  margin: 0 10px;
}
.stepwise-pending {
  font-size: 21px;
  color: #fff;
  background-color: #e2e679;
  margin: 0 10px;
}
.stepwise-completed {
  font-size: 21px;
  color: #fff;
  background-color: #89b455;
  margin: 0 10px;
}


.legend .stepwise-inprogress {
  color: #56abeb;
}
.legend .stepwise-pending {
  color: #e2e679;
}
.legend .stepwise-completed {
  color: #89b455;
}

.stepwise-section .btn-primary {
color: #fff;
background-color: #e21e0f;
border-color: #e21e0f;
}

.stepwise-section .btn {
  text-decoration: none;
  background: #fff;
  display: inline-block;
  padding: 8px 35px;
  border: 0;
  border-radius: 0;
  color: #000;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  transition: 0.3s;
}
.stepwise-section .btn:hover {

  background: #e7e6e6;
}


.btn-link:hover, .btn-link:focus, .btn-link:active, .btn-link.active, .open>.dropdown-toggle.btn-link {
    color: #000;
    background-color: #fff;
    border-color: #fff; 

}


.stepwise-section .btn3 {
  text-align: center;
  text-decoration: none;
  color:#fff;
  background: #3256A4;
  display: inline-block;
  padding: 8px 35px;
  border: 0;
  border-radius: 0;
  transition: none;
  font-size: 14px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  transition: 0.3s;
}
.stepwise-section .btn3:hover {

  color: #3256A4;
  background: #fad735;
}



.step_box{
  width: 100%;
  height: auto;
  padding-top: 100%; 
  position: relative;
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}
.step_box img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  object-fit: contain;
}