/* 香港吉恆貿易公司網站樣式 */

/* 全局樣式 */
body {
    font-family: 'PingFang TC', 'Heiti TC', 'Microsoft JhengHei', sans-serif;
}

/* 過渡效果 */
.transition {
    transition: all 0.3s ease;
}

/* 標題下劃線動畫 */
.w-20.h-1.bg-blue-700 {
    transition: width 0.5s ease-in-out;
}

section:hover .w-20.h-1.bg-blue-700 {
    width: 6rem;
}

/* 按鈕懸停效果 */
.hover\:scale-105:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
}

/* 導航欄陰影效果加強 */
.shadow-md {
    box-shadow: 0 4px 6px rgba(0, 0, 50, 0.08);
}

/* 卡片陰影效果加強 */
.shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 50, 0.1);
}

/* 圖片懸停效果 */
.overflow-hidden img {
    transition: transform 0.5s ease;
}

.overflow-hidden:hover img {
    transform: scale(1.05);
}

/* 產品分類按鈕樣式 */
.category-btn {
    transition: all 0.3s ease;
}

.category-btn.active {
    background-color: #1e3a8a;
    color: white;
}

/* 產品詳情模態框動畫 */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#product-modal .bg-white {
    animation: fadeIn 0.3s ease-out;
}

/* 首頁動畫效果 */
@keyframes slideInFromLeft {
    0% {
        transform: translateX(-10%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(10%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeInUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 應用動畫到首頁元素 */
header .md\:w-1\/2:first-child {
    animation: slideInFromLeft 1s ease-out;
}

header .md\:w-1\/2:last-child {
    animation: slideInFromRight 1s ease-out;
}

section .text-center {
    animation: fadeInUp 0.8s ease-out;
}

/* 響應式調整 */
@media (max-width: 768px) {
    .container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* 特殊效果 */
.bg-gradient-to-r {
    background-size: 200% 200%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.logo{
    max-height: 32px;
}