/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 09 2025 | 07:46:18 */
/* Button with class 'learn' */
.learn {
  position: relative;
  padding: 12px 30px!important;
  border: none;
  background: none;
  cursor: pointer;
  overflow: hidden;
  font-family: " ", sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #234567;
  display: inline-flex!important;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

/* Expanding background circle */
.learn:before {
  content: "";
  position: absolute!important;
  top:0;
  left:0;
  width: 45px;
  height: 45px;
  border-radius: 50px;
  background: #b1dae7;
  transition: all 0.3s ease;
  z-index: 0;
}

/* Make text appear above hover circle */
.learn span {
  position: relative!important;
  z-index: 1!important;
}

/* Arrow using pseudo element */
.learn:after {
  content: " "; /* simple arrow */
  position: relative!important;
  margin-left: 10px!important;
  transform: translateX(-5px)!important;
  transition: all 0.3s ease!important;
  display: inline-block!important;
  z-index: 1!important;
}

/* Hover effects */
.learn:hover:before {
  width: 100%!important;
}

.learn:hover:after {
  transform: translateX(0)!important;
}

/* Click effect */
.learn:active {
  transform: scale(0.95)!important;
}