.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* --- 把高度增加到 90px (長度變長) --- */
    height: 90px; 
    /* --- 鎖定平設組青綠色 --- */
    background-color: #11a9a4 !important; 
    color: white;
    z-index: 9999;
    display: flex;
    align-items: center;
    padding: 0 5%;
    transition: all 0.4s ease; /* 控制縮放動畫的順滑度 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* 為了防止手機版文字「擠壓」，請務必加上這段 */
@media (max-width: 768px) {
    .header {
        height: 75px; 
    }
}

.banner {
    display: flex;
    justify-content: space-between; /* 關鍵：這行會把 nav-left 推到左邊，nav-right 推到右邊 */
    align-items: center;
    width: 100%;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 20px; /* 圖示之間的間距 */
}

.main-logo {
    height: 60px; /* Logo 大小 */
    width: auto;
}

.nav-social-icon {
    height: 28px; /* FB, IG, 選單圖示的大小 */
    width: auto;
    transition: transform 0.3s ease;
}

.nav-social-icon:hover {
    transform: scale(1.1); /* 滑鼠移上去稍微放大 */
}

/* 專門調整「互動選單」按鈕的大小 */
#open-menu-btn .nav-social-icon {
    /* 1. 調整高度 (原本如果是 28px，你可以試試看 35px 或 40px) */
    height: 50px !important; 
    
    /* 2. 寬度設為 auto，讓 SVG 依照比例縮放不變形 */
    width: auto;
    
    /* 3. 如果覺得位置太高或太低，可以用 margin 微調 */
    margin-top: 2px; 
}

/* 📱 針對手機版進行縮放 (避免在手機上看太突兀) */
@media (max-width: 768px) {
    #open-menu-btn .nav-social-icon {
        height: 30px !important; /* 手機版稍微縮小一點 */
    }
}

.main-title {
    height: 35px;
    width: auto;
    transition: all 0.4s ease;
}

.nav-item {
     display: flex;
    align-items: center;
    transition: all 0.3s ease;
    color: white;
}
.nav-icon {
    height: 25px;  /* 圖標大小 */
    width: auto;
    transition: all 0.3s ease;
}

.nav-item:hover {
    color: #ffeb3b;
}

.nav-item span {
    color: white !important;
}

.dept-logo {
    height: 30px;
    width: auto;
    transition: all 0.4s ease;
}

/* 縮小狀態 */
.header.scrolled, .header.shrink {
    height: 70px; /* 往下滾時稍微縮小一點點，維持動態感 */
    background-color: #11a9a4 !important; /* 強制滾動後顏色不准變回紫色 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
/* -------------------- */

.header.shrink .nav-icon {
    height: 18px;
}
/* ... 後面接你原本的代碼 ... */
/* 新 */
.header.shrink .nav-icon {
    height: 18px;  /* 縮小後的圖標大小 */
}

.header.shrink .banner {
    gap: 15px;
}

.header.shrink .main-title {
    height: 25px;
}

.header.shrink .nav-item {
    font-size: 0.9rem;
}

.header.shrink .dept-logo {
    height: 22px;
}
/* 使用 !important 確保強制執行 */
header#header.shrink {
    padding: 5px 3% !important; /* 強制縮小間距 */
    background: #11a9a4 !important;
    transition: all 0.4s ease !important;
}

header#header.shrink .main-title {
    height: 25px !important; /* 強制縮小 Logo */
}

header#header.shrink .nav-icon {
    height: 18px !important; /* 強制縮小圖標 */
}

header#header.shrink .banner {
    gap: 15px !important; /* 強制縮小間距 */
}

/* 預設隱藏選單 */
#fullscreen-menu-modal {
    display: none; 
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #11a9a4; /* 平設組青綠色 */
    z-index: 10000;
}

/* 當 JS 啟動時，讓它顯示出來 */
#fullscreen-menu-modal.active {
    display: flex !important;
}

/* 讓手機外框動畫動起來 (對應 JS 裡的 slide-up-animation) */
.slide-up-animation {
    animation: menuSlideUp 0.6s ease-out forwards;
}

@keyframes menuSlideUp {
    from { transform: translateY(100px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* 讓兩張圖片疊在一起的關鍵 */
.image-swap-container {
    position: relative;
    display: inline-block;
}

/* 第二張圖（Hover）預設藏起來並疊在第一張上面 */
.img-hover {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* 預設透明 */
    transition: opacity 0.3s ease; /* 變身的過渡感 */
}

/* 滑鼠移上去時，第二張現身 */
.image-swap-container:hover .img-hover {
    opacity: 1;
}