.tl_hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.tl_hero .tl_hero_slider {
    height: calc(100vh - 88px);
}


.tl_hero .bx-wrapper {
    margin: 0;
    width: 100%;
    border: none;
}

.tl_hero .bx-wrapper .bx-viewport {
    border: none;
    left: 0;
}


.tl_hero_shortlinks>a {
    background-color: #286EA0;
    color: white;
    padding: 20px 50px;
    flex: 1;
    display: flex;
    width: fit-content;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    gap: 15px;
    transition: all 0.5s ease-in-out;
}




.tl_hero_shortlinks>a:hover,
.tl_hero_shortlinks>a:focus,
.tl_hero_shortlinks>a:focus-visible
{
    color: white;
    text-decoration: none;


}



.tl_hero_shortlinks i {
    font-size: 2rem;
}

.tl_hero .tl_hero_shortlinks {
    position: absolute;
    bottom: 0;
    display: flex;
    background-color: #062F64;
    gap: 2px;
    flex-wrap: wrap;
}

.tl_hero .tl_hero_slider>div {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
}


.tl_hero_shortlinks > a {
  background-color: #286EA0;
  color: white;
  padding: 20px 50px;
  flex: 1;
  display: flex;
  width: fit-content;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  gap: 15px;
  position: relative;
  z-index: 1;
}

/* animatable radial color layer */
.tl_hero_shortlinks > a::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #A0C832; /* hover color */
  clip-path: circle(0% at 50% 50%);
  z-index: -1;
  transition: clip-path 0.5s ease-out;
}

.tl_hero_shortlinks a i
{
    transition: transform 0.2s ease-in-out;
    transform: scale(1);
}

.tl_hero_shortlinks a:hover i
{
    transform: scale(1.25);
}

/* grow radial color on hover */
.tl_hero_shortlinks > a:hover::before {
  clip-path: circle(150% at 50% 50%);
}

/* optional: slow radial pulsing while hovered */
@keyframes radialPulse {
  0%   { background-color: #A0C832; }
  50%  { background-color: #A0C832; }
  100% { background-color: #A0C832; }
}

.tl_hero_shortlinks > a:hover::before {
  animation: radialPulse 3s ease-in-out infinite;
}


@media (max-width: 768px) {
    .tl_hero_shortlinks {

    }
}