.elementor-kit-6{--e-global-color-primary:#0568FF;--e-global-color-secondary:#54595F;--e-global-color-text:#222222;--e-global-color-accent:#61CE70;--e-global-color-8bdb37d:#0568FF;--e-global-color-410b56f:#666666;--e-global-color-77f7eb3:#999999;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:26px;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* 初始狀態 - 透明背景、白色 Logo 和文字 */
.white-logo {
  display: inline-block;
}
.blue-logo {
  display: none;
}
.sticky-menu-items a {
  color: white !important;
  transition: all 0.3s ease-in-out;
  /* text-shadow: 1px 1px 2px rgba(0, 0, 0, 09); */
}


/* 初始狀態的 hover 和 active 效果 */
.sticky-menu-items a:hover,
.sticky-menu-items .current-menu-item a {
  color: white !important;
  font-weight: 700 !important;
  border-top: 3px solid white !important;
}

/* --- Elementor 子選單固定樣式 --- */
/* 確保這些規則優先級夠高，且不受 sticky 狀態影響 */

/* 子選單容器 (通常是 <ul class="sub-menu">) */
/* 注意：請用瀏覽器「檢查」工具確認你的子選單容器確實是 .sub-menu */
/* 如果 class 不同，請替換下面的 .sub-menu */
.elementor-nav-menu .sub-menu {
    background-color: white !important; /* 強制白色背景 */
    border-radius: 8px !important;     /* 圓角效果，數值可調整 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; /* 參考圖片的陰影 */
    padding: 10px 0 !important;       /* 容器本身的上下內距 */
    border: none !important;          /* 確保無邊框 */
    margin-top: 5px !important;       /* 可選：讓下拉選單離主選單項目稍微有點距離 */
}

/* 子選單項目中的連結 (<a>) */
.elementor-nav-menu .sub-menu a {
    color: #222222 !important;     /* 黑色或深灰色文字 (可自訂色碼) */
    background-color: transparent !important; /* 確保連結背景是透明的 */
    font-weight: normal !important; /* 正常字體粗細 */
    border: none !important;        /* 確保連結本身無邊框 */
    padding: 8px 20px !important;   /* 選單項目的內距 (上下8px, 左右20px) */
    display: block !important;      /* 讓連結填滿列表項寬度 */
    text-decoration: none !important; /* 移除文字底線 */
    transition: background-color 0.2s ease, color 0.2s ease; /* 添加平滑過渡效果 */
}

/* 子選單項目的滑鼠懸停 (Hover) 效果 */
.elementor-nav-menu .sub-menu a:hover {
    color: #222222 !important;       /* 例如：Hover 時文字變藍色 */
    background-color: #f5f5f5 !important; /* 例如：Hover 時淺灰色背景 */
    border-radius: 0 !important;   /* <--- 在這裡添加/確保存在 */
}

/* --- End of Elementor 子選單固定樣式 --- */



/* 滾動後狀態 - 白色背景、藍色 Logo 和黑色文字 */
.elementor-sticky--effects {
  background-color: white !important;
  transition: background-color 0.5s ease !important;
  box-shadow: 0px 2px 10px rgba(0,0,0,0.1) !important;
}
.elementor-sticky--effects .white-logo {
  display: none;
}
.elementor-sticky--effects .blue-logo {
  display: inline-block;
}
.elementor-sticky--effects .sticky-menu-items a{
  color: black !important;
  transition: all 0.3s ease-in-out;
  text-shadow: none !important;
}

.elementor-sticky--effects .sticky-menu-items .sub-arrow {
  fill: black !important;
  color: black !important;
  transition: all 0.3s ease-in-out;
}

/* 滾動後狀態的 hover 和 active 效果 */
.elementor-sticky--effects .sticky-menu-items a:hover,
.elementor-sticky--effects .sticky-menu-items .current-menu-item a
{
  color: #0568FF !important;
  font-weight: 700 !important;
  border-top: 3px solid #0568FF !important;
}

.elementor-sticky--effects .sticky-menu-items a:hover .sub-arrow,
.elementor-sticky--effects .sticky-menu-items .current-menu-item a .sub-arrow {
  fill: #0568FF !important;
}

/* --- Elementor 子選單在 Sticky 狀態下的詳細樣式 --- */
/* 前提：主 header 元素已有 .elementor-sticky--effects class */
/* 基本的 .sub-menu 容器樣式 (白底/圓角/陰影) 已設定 */

/* 1. 預設狀態 (Default / "默認") */
/* 確保文字顏色是深色，背景透明 */
.elementor-sticky--effects .elementor-nav-menu .sub-menu a {
    color: #222222 !important; /* 深灰色或黑色文字 */
    background-color: transparent !important; /* 確保無背景色 */
    font-weight: normal !important; /* 正常字重 */
    /* 可選：確保移除頂層選單繼承來的樣式 */
    border: none !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease, color 0.2s ease; /* 過渡效果 */
}

/* 2. 懸浮狀態 (Hover / "懸浮") */
/* 文字顏色不變，背景變淺灰 */
.elementor-sticky--effects .elementor-nav-menu .sub-menu a:hover {
    color: #222222 !important; /* 文字顏色保持深灰 */
    background-color: #f5f5f5 !important; /* 淺灰色背景 */
}
/* 3. 選中狀態 (Selected / Active / "選中") */
/* 文字變藍色，背景透明 */
/* 注意：你需要檢查實際是哪個 class 代表選中狀態， */
/* 可能是 .current-menu-item 或 .current-menu-ancestor */
.elementor-sticky--effects .elementor-nav-menu .sub-menu .current-menu-item > a,
.elementor-sticky--effects .elementor-nav-menu .sub-menu .current-menu-ancestor > a {
    color: #0568FF !important; /* 藍色文字 */
    background-color: transparent !important; /* 確保無背景色 */
    font-weight: normal !important; /* 圖片看起來字重未變，如果需要加粗可設為 bold */
}

/* --- End of Sticky Sub-Menu Styling --- */


/* --- 子選單 Scrollspy 樣式 --- */

/* 1. 重置 default WP active state UNLESS JS has marked it active (保持不變) */
.elementor-sticky--effects .elementor-nav-menu .current-menu-ancestor .sub-menu li.current-menu-item:not(.submenu-active-scroll) > a,
.elementor-sticky--effects .elementor-nav-menu .sub-menu li.current-menu-item:not(.submenu-active-scroll) > a {
    color: #222222 !important;
    background-color: transparent !important;
    font-weight: normal !important;
}

/* 2. 定義 JS 控制的 active item 的【非 Hover】狀態 (保持不變) */
.elementor-sticky--effects .elementor-nav-menu .sub-menu li.submenu-active-scroll > a {
    color: #0568FF !important; /* 藍色文字 */
    background-color: transparent !important; /* 確保背景透明 */
}

/* --- 修改/新增以下 Hover 規則 --- */

/* 3. 定義【所有】子選單項目(li > a)的【通用 Hover】樣式 */
.elementor-sticky--effects .elementor-nav-menu .sub-menu li > a:hover {
    background-color: #f5f5f5 !important; /* 淺灰色背景 */
    color: #333333 !important; /* 預設 hover 文字顏色 */
    border-radius: 0 !important;   /* 新增：強制移除 hover 背景的圓角 */
}

/* 4. 【針對 Active 項目】的【Hover】樣式 (保持不變) */
.elementor-sticky--effects .elementor-nav-menu .sub-menu li.submenu-active-scroll > a:hover {
     color: #0568FF !important; /* Hover 時文字保持藍色 */
     /* border-radius: 0 !important; 已經由上面的通用規則處理 */
}

/* 5. 【針對被規則 #1 重置的項目】的【Hover】樣式 (如果之前有加，檢查是否還需要，或者這裡也加上 border-radius: 0) */
/* 如果規則 #3 的修改能解決問題，規則 #5 中關於 background-color 的部分可能就不再嚴格需要了 */
.elementor-sticky--effects .elementor-nav-menu .current-menu-ancestor .sub-menu li.current-menu-item:not(.submenu-active-scroll) > a:hover,
.elementor-sticky--effects .elementor-nav-menu .sub-menu li.current-menu-item:not(.submenu-active-scroll) > a:hover {
    background-color: #f5f5f5 !important;
    color: #333333 !important;
    border-radius: 0 !important; /* 確保這裡也加上 */
}

/* --- End of Scrollspy CSS --- */



/* 手機大小時的樣式 */
/* 手機大小時的樣式 */
@media screen and (max-width: 768px) {
  /* 為Header添加初始狀態下的白色背景 */
  .elementor-sticky--active,  /* 添加這一行 */
  .elementor-section-wrap header.elementor-section,  /* 添加這一行 */
  .elementor-sticky--effects {
    background-color: white !important;
    box-shadow: 0px 2px 10px rgba(0,0,0,0.05) !important;
    transition: background-color 0.5s ease !important;
  }

  /* 隱藏白色Logo，顯示藍色Logo - 無論是否滾動 */
  .white-logo {
    display: none !important;
  }
  
  .blue-logo {
    display: inline-block !important;
  }

  /* 調整選單文字顏色為黑色 - 無論是否滾動 */
  .sticky-menu-items a {
    color: black !important;
    transition: all 0.3s ease-in-out;
  }

  /* 手機上的hover和active效果 */
  .sticky-menu-items a:hover,
  .sticky-menu-items .current-menu-item a {
    color: #0568FF !important;
    font-weight: bold !important;
    border-top: none !important;
    text-decoration: underline;
  }
}/* End custom CSS */