.home-sci{
    position: absolute;
    margin-bottom: 20px;
    
}
.home-sci a{
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 45px;
      height: 45px;
      border: 3px solid #00abf0; 
      border-radius: 50%;
      font-size: 20px;
      color: #00abf0;
      text-decoration: none;
      z-index: 1;
      overflow: hidden;
}
.home-sci a::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #00abf0;
    z-index: -1;
    transition: 1s;
  

}
.home-sci a:hover::before{
    width: 100%;
}
.home-sci a:hover{
    color: #081b29;
}

.fancy-btn {
  position: relative;
  display: inline-block;
  padding: 12px 30px;
  color: #fff;
  background: #081b29;
  font-size: 16px;
  font-weight: 600;
  border: 3px solid #00abf0;
  border-radius: 20px;
  cursor: pointer;
  overflow: hidden;
  transition: all 1s ease;
}

.fancy-btn::after {
  content: "";
  position: absolute;
  left: -100%;
  top: 0;
  width: 100%;
  height: 100%;
  background: #020202;
  transform: skewX(-20deg);
  transition: all 1s ease;
}

.fancy-btn:hover::after {
  left: 200%;
}

.fancy-btn:hover {
  background: #00abf0;
  color:#081b29;
  transform: scale(1.05);
}

.fancy-btn:active {
  transform: scale(0.98);
}