@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.delay-100 {
  animation-delay: 0.1s;
}
.delay-200 {
  animation-delay: 0.2s;
}

.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(54 54 55) !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #c7d2fe;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #818cf8;
}

/* Navbar active states */
.nav-scrolled {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.mobile-link {
  transition: all 0.3s;
  position: relative;
}

.mobile-link:hover {
  color: #1d4ed8;
  transform: translateX(10px);
}

.logo-link {
  display: inline-block;
  width: 180px; /* 根據設計稿設定 LOGO 寬度 */
  height: auto; /* 讓高度依比例自動縮放，防止變形 */
}

.logo-img {
  width: 100%; /* 填滿父層容器 */
  height: auto; /* 保持圖片原始比例 */
  display: block; /* 消除圖片底部預留的空白間隙 */
  object-fit: contain; /* 確保圖片在容器內完美適應不被裁切 */
}