.half-underline {
  display: inline-block;
  position: relative;
}

.half-underline::before {
  content: '';
  position: absolute;
  bottom: 0;
  right: 20;
  width: 30px;
  height: 3px;
  margin-bottom: -5px;
  background-color: Green;
  transform: translateX(-5%);
  transition: transform 1.0s linear;
}

.half-underline:hover::before {
  transform: translateX(0);
  width: 100%;
}


.box {
  width: 300px;  
  height: 100px;  
  padding: 20px; 
  background-color: #fff;  
  border: 1px solid #ccc;  
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);  
}

//implimentation page code

//the column of the implimentation section 1
/* Create a container for the element you want to trigger the effect */
/* Add styles to the column */
.column {
  border: 3px solid #ccc;
  transition: border-width 1s ease-in-out;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);
}

.column:hover {
  border: 2px solid #74BFDC;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}


//button style
 
 <a href="https://example.com" class="external-link">www.google.com</a>

.external-link {
  color: #007bff;  
  text-decoration: underline;  
  cursor: pointer;  
}

.external-link:hover {
  color: #0056b3;  
}

//bold text in accordian

.boldtext {
  font-weight: bold;  
}

.boldtext {
  font-weight: 600; 
}