@font-face {
  font-family: "ParalucentStencil-Heavy";
  font-style: normal;
  font-format: opentype;
  font-weight: 400;
  src: url("../public/fonts/paralucent-stencil-heavy.otf") ;
}

/* 導航列樣式 */
.navbar {
  transition: background-color 0.3s ease-in-out;
}

.nav-link {
  position: relative;
  transition: color 0.3s ease-in-out;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 50%;
  background-color: #fff;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.nav-link:hover::after {
  width: 100%;
  left: 0;
}

/* 自定義漢堡選單樣式 */
.custom-toggler .toggler-icon {
  display: block;
  width: 30px;
  height: 2px;
  margin: 6px 0;
  background-color: #fff;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.navbar-toggler {
  padding: 0;
  border: none;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

/* 點擊時的動畫效果 */
.custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(2) {
  opacity: 0;
}

.custom-toggler[aria-expanded="true"] .toggler-icon:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}