.home-banner-btn {
  padding: 0.1em 0.25em;
  width: 13em;
  height: 4.2em;
  background-color: #142939;
  border: 0.08em solid #fff;
  border-radius: 0.3em;
  font-size: 12px;
  cursor: pointer;
}

.home-banner-btn span {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0.4em;
  width: 8.25em;
  height: 2.5em;
  background-color: #142939;
  border-radius: 0.2em;
  font-size: 1.5em;
  color: #fff;
  border: 0.08em solid #fff;
  box-shadow: 0 0.4em 0.1em 0.019em #fff;
}

.home-banner-btn span:hover {
  transition: all 0.5s;
  transform: translate(0, 0.4em);
  box-shadow: 0 0 0 0 #fff;
}

.home-banner-btn span:not(hover) {
  transition: all 1s;
}

.about-us-btn {
  position: relative;
  width: max-content;
  height: 40px;
  background-color: #142939;
  display: flex;
  align-items: center;
  color: white;
  flex-direction: column;
  justify-content: center;
  border: none;
  padding: 12px;
  gap: 12px;
  border-radius: 8px;
  cursor: pointer;
  z-index: 999;
  user-select: unset !important;
}

.about-us-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  left: -4px;
  top: -1px;
  margin: auto;
  width: 128px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(-45deg, #142939 0%, #d0604d 100%);
  z-index: -10;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.about-us-btn::after {
  content: "";
  z-index: -1;
  position: absolute;
  inset: 0;
  background: linear-gradient(-45deg, #142939 0%, #d0604d 100%);
  transform: translate3d(0, 0, 0) scale(0.95);
  filter: blur(20px);
}

.about-us-btn:hover::after {
  filter: blur(30px);
}

.about-us-btn:hover::before {
  transform: rotate(-180deg);
}

.about-us-btn:active::before {
  scale: 0.7;
}