.border-col-2 {
  position: relative;
  transition: ease-out 0.5s;
  -webkit-transition: ease-out 0.5s;
  -moz-transition: ease-out 0.5s;
}

.border-col-2::before, .border-col-2::after {
  position: absolute;
  content: "";
  width: 0%;
  height: 0%;
  visibility: hidden;
}

.border-col-2::after {
  bottom: -3px;
  right: -3px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  border-radius: 8px;
  transition: width .1s ease .1s, height .1s ease, visibility 0s .2s;
}

.border-col-2::before {
  top: -3px;
  left: -3px;
  border-top: 2px solid var(--red);
  border-right: 2px solid var(--red);
  border-radius: 8px;
  transition: width .1s ease .3s, height .1s ease .2s, visibility 0s .4s;
}

.border-col-2:hover {
  animation: pulse 1s ease-out .4s;
  color: var(--tprimary-bg-color);
}

.border-col-2 {
  animation: pulse 1s ease-out .4s;
  color: var(--tprimary-bg-color);
}

.border-col-2:hover::after, .border-col-2:hover::before {
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  visibility: visible;
  transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

@media (max-width: 991px) {
  .border-col-2:hover::after, .border-col-2:hover::before {
    visibility: hidden !important;
  }
}

.border-col-2::after, .border-col-2::before {
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  visibility: visible;
  transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

@media (max-width: 991px) {
  .border-col-2::after, .border-col-2::before {
    visibility: hidden !important;
  }
}

.border-col-2:hover::after {
  transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.border-col-2::after {
  transition: width .1s ease .2s, height .1s ease .3s, visibility 0s .2s;
}

.border-col-2:hover::before {
  transition: width .1s ease, height .1s ease .1s;
}

.border-col-2::before {
  transition: width .1s ease, height .1s ease .1s;
}