:root {
  --main-theme-color: #000000;
}

/* 全域變色套用 */
h1,
h2,
h3,
.nav-link,
.text-primary,
.bi {
  color: var(--main-theme-color) !important;
  transition: 0.3s;
}

/* 讓捲動定位時，上方自動預留導覽列的高度 (通常是 70px ~ 90px) */
section[id], article[id], main[id] {
  scroll-margin-top: 100px; /* 根據您的導覽列實際高度調整數值 */
  scroll-behavior: smooth; /* 讓捲動過程變得平滑，不會瞬間跳轉 */
}

/* 針對 HTML 根元素開啟平滑捲動 */
html {
  scroll-behavior: smooth;
}

.container {
  /* border: #000 1px solid; */
  padding: 30px 0;
}

@media (max-width: 991.98px) {
  section[id], article[id], main[id] {
    scroll-margin-top: 650px; /* 根據您的導覽列實際高度調整數值 */
    scroll-behavior: smooth; /* 讓捲動過程變得平滑，不會瞬間跳轉 */
  }

  /* 讓 Bootstrap 的 container 在手機版強制維持 20px 邊距 */
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
    max-width: 100%;
  }

  /* 修正原本 CSS 裡對 .container 的 padding: 50px 0 定義 */
  /* 避免它把左右的 20px 覆蓋掉 */
  .container {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

/* 初始狀態：透明且往下位移 30px */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: all 2s ease-out;
}

/* 啟動狀態：完全顯示且回到原位 */
.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.btn-primary,
.bg-primary {
  background-color: var(--main-theme-color) !important;
  border-color: var(--main-theme-color) !important;
  transition: 0.3s;
}

.navbar-brand img {
  height: 50px;
}

/* --- 右側拉出式主題切換器 --- */
#sideSwitcher {
  position: fixed;
  top: 20%;
  right: 0;
  display: flex;
  align-items: flex-start;
  z-index: 10000;
  transition: transform 0.4s ease;
  transform: translateX(60px);
}

#sideSwitcher.active {
  transform: translateX(0);
}

.switcher-btn {
  background-color: #ffffff;
  padding: 10px;
  cursor: pointer;
  border-radius: 5px 0 0 5px;
  box-shadow: -2px 2px 15px rgba(0, 0, 0, 0.1);
}

.color-panel {
  background-color: #ffffff;
  padding: 15px 10px;
  display: flex;
  flex-direction: column;
  gap: 15px;
  box-shadow: -2px 2px 15px rgba(0, 0, 0, 0.1);
  width: 60px;
}

.dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #eee;
  transition: 0.2s;
  margin: 0 auto;
}

.dot:hover {
  transform: scale(1.1);
  border-color: #999;
}

.dot.active {
  border: 3px solid #000 !important;
}

.bg-black {
  background-color: #000000;
}

.bg-red {
  background-color: #b71f22;
}

/* 行動版優化 */
@media (max-width: 991.98px) {
  /* 1. 減少 Navbar 上下留白 */
  .navbar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  
  .navbar-brand img {
    height: 40px; /* 稍微縮小 Logo 讓導覽列更扁 */
  }

  /* 2. 簡約漢堡選單：移除框線，改用更乾淨的設計 */
  .navbar-toggler {
    border: none !important;
    padding: 0;
  }
  .navbar-toggler:focus {
    box-shadow: none !important; /* 移除點擊時的藍色光暈 */
  }

  /* 3. 選單內容置中 */
  .navbar-nav {
    text-align: center;
    padding: 20px 0; /* 展開後的上下間距 */
  }

  .nav-item {
    margin: 10px 0; /* 選單項目之間的垂直距離 */
  }

  /* 移除下拉選單的邊框與陰影（更簡約） */
  .dropdown-menu {
    border: none;
    text-align: center;
    background-color: transparent;
  }
}

/* --- Banner 視差滾動核心樣式 --- */
.hero-section {
  position: relative;
  overflow: hidden;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 200px 0;
}

/* 獨立背景層：這是實現視差的關鍵 */
.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  /* 高度大於容器，預留滾動空間防止露白 */
  background-image: linear-gradient(rgba(59, 59, 59, 0.4),
      rgba(35, 35, 35, 0.6)),
    url("images/banner.jpg");
  background-size: cover;
  background-position: center top;
  z-index: 0;
  will-change: transform;
  /* 啟動瀏覽器硬體加速 */
  filter: blur(0px);
}

.hero-section .container {
  position: relative;
  z-index: 1;
  /* 確保文字在背景上方 */
}

.hero-section h1,
.hero-section p {
  color: white !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.btn-contact {
  transition: all 0.5s ease;
  position: relative;
  top: 0;
}

.btn-contact:hover {
  filter: brightness(0.5);
  color: white !important;
}

.about {
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 70px;
}

.about-p {
  font-size: larger;
  text-align: justify;
  line-height: 2;
  margin: 0 auto;
  padding: 20px 0 80px;
}

.hover-box {
  border-radius: 12px;
  overflow: hidden;
  /* 確保圖片放大時不會超出範圍 */
  position: relative;
  background-color: #000;
}

.img-wrapper {
  position: relative;
  aspect-ratio: 4 / 3;
  /* 固定圖片比例為 4:3，這樣六張圖才會整齊 */
}

.img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 保持比例裁切填充 */
  transition: transform 0.6s ease, filter 0.6s ease;
}

/* 懸浮遮罩層 */
.hover-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--main-theme-color);
  /* 這裡會自動套用你的黑/紅主題色 */
  opacity: 0;
  /* 預設透明度為 0 */
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 文字樣式 */
.hover-text {
  color: #fff;
  font-size: 1.25rem;
  font-weight: bold;
  transform: translateY(20px);
  /* 讓文字有一點從下面上來的感覺 */
  transition: transform 0.4s ease;
}

/* 滑鼠移入效果 */
.hover-box:hover img {
  transform: scale(1.1);
  /* 圖片縮放 */
  filter: blur(2px) brightness(0.7);
  /* 圖片模糊變暗 */
}

.hover-box:hover .hover-overlay {
  opacity: 0.85;
  /* 遮罩顯現 */
}

.hover-box:hover .hover-text {
  transform: translateY(0);
  /* 文字歸位 */
}

.product-showcase {
  background-color: #f5f5f5;
}

.carousel-item img {
  height: 450px;
  /* 增加輪播圖高度 */
  object-fit: cover;
  border-radius: 12px;
  /* 輪播圖帶圓角 */
}

/* 輪播指示器和文字陰影保持不變 */
.carousel-indicators [data-bs-target] {
  background-color: var(--main-theme-color);
}

.carousel-indicators .active {
  background-color: var(--main-theme-color);
}

.carousel-caption h5,
.carousel-caption p {
  color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

/* 進度條樣式 */
.progress {
  background-color: #6b747c;
  border-radius: 50px;
  overflow: hidden;
  /* 確保進度條內容不溢出 */
}

.progress-bar {
  background-color: var(--main-theme-color) !important;
  border-radius: 50px;
  transition: width 2s cubic-bezier(0.1, 0.5, 0.5, 1);
  display: flex;
  /* 讓百分比數字可以居中 */
  align-items: center;
  justify-content: flex-end;
  /* 數字靠右 */
  padding-right: 10px;
  /* 數字與邊緣留空 */
  color: white;
  /* 百分比數字的顏色 */
  font-size: 0.85rem;
}

.progress-item span {
  font-size: 0.95rem;
}

.progress-percent {
  color: var(--main-theme-color);
  font-weight: bold;
}

/* 數據達成指標區塊 */
.achievement-section {
  position: relative;
  overflow: hidden;
  background-color: #222;
  /* 底色 */
  padding: 80px 0;
}

/* 背景圖模糊層 */
.achievement-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('images/pic01.jpg');
  /* 替換您的圖片 */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  filter: blur(8px);
  transform: scale(1.1);
  z-index: 1;
}

/* 黑色半透明遮罩層 */
.achievement-section::after {
  content: "";
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  /*讓白字更明顯 */
  z-index: 2;
}

/* 確保內容在最前層 */
.achievement-section .container {
  position: relative;
  z-index: 3;
}

/* 強制文字與數字為白色 */
.achievement-section h2,
.achievement-section span,
.achievement-section p {
  color: #ffffff !important;
}

/* Icon 顏色控制邏輯 */
.achievement-section i {
  /* 預設為白色，若 JS 沒動到它，它就是白的 */
  color: var(--achievement-icon-color, #ffffff) !important;
  transition: color 0.3s ease;
}

/* 證照輪播按鈕樣式 */
#certCarousel .carousel-control-prev,
#certCarousel .carousel-control-next {
  width: 5%;
  opacity: 0.8;
}

#certCarousel .carousel-control-prev:hover,
#certCarousel .carousel-control-next:hover {
  opacity: 1;
}

/* 確保圖片在欄位內呈現一致感 */
#certCarousel .carousel-item img {
  max-height: 200px;
  /* 您可以根據證照圖案調整高度 */
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

#certCarousel .carousel-item img:hover {
  transform: scale(1.05);
}

/* 修正行動裝置顯示 (一列顯示兩張) */
@media (max-width: 768px) {
  #certCarousel .carousel-item img {
    max-height: 80px;
  }
}

.testimonials-section {
  background-color: #f4f7f9; /* 比純白深一點的淺藍灰色 */
}

/* 評論卡片基礎樣式 */
.testimonial-card {
  background: #fff;
  border-radius: 15px;
  border-left: 5px solid var(--main-theme-color, #000);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 針對 Bootstrap 內建 text-primary 改為跟隨主題色 */
.testimonials-section i.text-primary {
  color: var(--main-theme-color, #000) !important;
}

/* 按鈕美化與旋轉效果 */
.toggle-btn {
  border-color: var(--main-theme-color, #000);
  color: var(--main-theme-color, #000);
}

.toggle-btn:hover {
  background-color: var(--main-theme-color, #000);
  border-color: var(--main-theme-color, #000);
}

.toggle-btn[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.toggle-btn i {
  transition: transform 0.3s ease;
}

.toggle-btn:active {
  background-color: var(--main-theme-color) !important;
  border-color: var(--main-theme-color) !important;
  opacity: 0.8; /* 點擊時輕微變暗，提供視覺回饋 */
}

.partner-logo {
  max-height: 80px;
  /* 統一 Logo 高度 */
  width: auto;
  filter: grayscale(100%);
  /* 預設灰色 */
  transition: all 0.3s ease;
  opacity: 0.7;
}

.partner-logo:hover {
  filter: grayscale(0%);
  /* 滑過恢復彩色 */
  opacity: 1;
  transform: scale(1.05);
}

/* 讓控制按鈕顏色明顯一點 */
.carousel-control-prev,
.carousel-control-next {
  width: 5%;
}

/* 設定指示器顏色與間距 */
#partnerCarousel .carousel-indicators [button] {
  background-color: var(--main-theme-color, #000);
  /* 跟隨您的主題色變數 */
  height: 5px;
  /* 長方形高度 */
  width: 30px;
  /* 長方形寬度 */
  border: none;
  margin-bottom: -20px;
  /* 稍微往下推開距離 */
}

/* 為了讓指示器在白色背景下清晰，如果背景是白的可以加個 opacity */
#partnerCarousel .carousel-indicators .active {
  opacity: 1;
}

#partnerCarousel .carousel-indicators button {
  opacity: 0.3;
  background-color: #333;
  /* 非使用中的顏色 */
}

.partner-logo {
  max-height: 70px;
  width: auto;
  filter: grayscale(100%);
  opacity: 0.6;
  transition: 0.3s;
}

.partner-logo:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* 增加間距給指示器 */
.partners-section {
  padding-bottom: 80px !important;
}

/* 聯絡我們區塊容器 */
.contact-section {
  position: relative;
  overflow: hidden; /* 防止模糊邊緣溢出 */
  padding: 80px 0;
  background-color: #000; /* 預設底色，防止圖片載入前過亮 */
}

/* 製作模糊背景層 */
.contact-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* 請替換為您的圖片路徑 */
  background-image: url('images/contact03.jpg'); 
  background-size: contain;
  background-position: center;
  /* 模糊度設定 */
  filter: blur(5px); 
  /* 讓背景變暗，確保白色文字清晰 */
  background-color: rgba(107, 107, 107, 0.612); 
  background-blend-mode: darken;
  /* 稍微放大一點點(1.1倍)以消除模糊產生的白邊 */
  transform: scale(2); 
  z-index: 0;
}

/* 確保內容在背景之上 */
.contact-section .container {
  position: relative;
  z-index: 1;
}

/* 標題與副標題改為白色 */
.contact-section h2, 
.contact-section h5 {
  color: #ffffff !important;
}

/* 保持您原本的等高與彈性佈局邏輯 */
.contact-section .row.d-flex {
  display: flex;
  flex-wrap: wrap;
}

.contact-section .flex-grow-1 {
  flex-grow: 1;
}

/* 修改公司資訊卡片與業務卡片：改為半透明白，質感更好 */
.contact-info-card, .hover-shadow {
  background-color: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* 您的主題色變數連動 */
.contact-section .badge.custom-theme-badge {
  background-color: var(--main-theme-color, #000) !important;
}

.custom-theme-border {
  border-top-color: var(--main-theme-color, #000) !important;
}

/* 圖示顏色連動 */
.theme-color-text {
  color: var(--main-theme-color, #000) !important;
}

/* 手機版適配 */
@media (max-width: 991px) {
  .contact-section iframe {
    height: 350px !important;
  }
}
.footer-section {
  background-color: #1a1a1a; /* 極深灰背景 */
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-section p {
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

.footer-links a {
  transition: color 0.3s ease;
  font-size: 0.9rem;
}

.footer-links a:hover {
  color: var(--main-theme-color, #ffffff) !important;
}

/* 確保 Footer 的主題色圖示在黑色背景下也能正確顯示 */
.footer-section .theme-color-text {
  /* 這裡沿用您聯絡我們區塊的邏輯 */
  color: var(--main-theme-color, #ffffff) !important;
}

/* 固定右下角按鈕 */
.back-to-top {
  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 999;
  
  /* 按鈕大小與形狀 */
  width: 65px;
  height: 65px;
  border-radius: 50%;
  
  /* 灰色霧面效果 (Glassmorphism) */
  background-color: rgba(128, 128, 128, 0.2) !important; /* 灰色半透明 */
  backdrop-filter: blur(10px); /* 關鍵：背景模糊 */
  -webkit-backdrop-filter: blur(10px);
  
  /* 置中箭頭 */
  display: flex;
  align-items: center;
  justify-content: center;
  
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2); /* 淡淡的白邊增加質感 */
}

/* 箭頭樣式 */
.back-to-top i {
  /* 變大箭頭 */
  font-size: 2.8rem; 
  /* 連動調色盤主題色 */
  color: var(--main-theme-color, #ffffff) !important;
  line-height: 1;
}

/* 滑過效果 */
.back-to-top:hover {
  background-color: rgba(128, 128, 128, 0.6) !important;
  transform: translateY(-8px) scale(1.05);
}

/* 手機版縮小一點點以免擋到內容 */
@media (max-width: 768px) {
  .back-to-top {
    right: 20px;
    bottom: 20px;
    width: 55px;
    height: 55px;
  }
  .back-to-top i {
    font-size: 2.2rem;
  }
}

/* 預留內容空間測試滾動感 
.content-placeholder {
  height: 1000px;
  background: #fff;
}*/