/* From Uiverse.io by satyamchaudharydev */
.tf-btn {
    position: relative;
    transition: all 0.3s ease-in-out;
    padding: 14px 24px 14px 24px;
    background-color: #00A8D0;
    border-radius: 14px;
    display: inline-block;
    color: #ffff;
    outline: none;
    overflow: hidden;
    letter-spacing: 0px;
    cursor: pointer;
    font-weight: 700;
    font-size: 16px;
    line-height: 140%;
}

.tf-btn svg {
     width: 13px;
    height: 13px;
    transition: all 0.3s ease-in-out;
    transform: translate(4px);
    vertical-align: inherit;
    display: inline-block;
}
.tf-btn svg path {
    stroke: #fff;
}
.tf-btn i {
    transition: all 0.3s ease-in-out;
    font-size: 16px;
    transform: translate(2px);
    vertical-align: middle;
    display: inline-block;
}

.tf-btn:hover {
  background-color: #24272C;
  color: #fff;
}
.tf-btn:hover i {
  transform: translate(4px);
}

.tf-btn:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.tf-btn::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}

@media only screen and (max-width: 768px) {
.tf-btn {
    padding: 12px 20px 12px 20px;
    font-size: 14px;
}

}