@charset "UTF-8";
html {
  scroll-behavior: smooth;
}
.index-ew{
    background-image: -webkit-linear-gradient(0deg,rgba(255,221,0,0.58) 0%,rgba(251,195,153,0.00) 100%);
    background-image: -moz-linear-gradient(0deg,rgba(255,221,0,0.58) 0%,rgba(251,195,153,0.00) 100%);
    background-image: -o-linear-gradient(0deg,rgba(255,221,0,0.58) 0%,rgba(251,195,153,0.00) 100%);
    background-image: linear-gradient(90deg,rgba(255,221,0,0.58) 0%,rgba(251,195,153,0.00) 100%);
    padding-left: 51px;
	    font-size: clamp(0.3rem, 0.5vw + 1rem, 6rem);
    line-height: 1.1; /* 超大文字的行高通常要設小一點（1.1~1.2），結構才好看 */
}
.index-cw01{
    /* 語法：clamp(最小值, 首選值, 最大值) */
    font-size: clamp(2.5rem, 5.5vw + 1rem, 6rem);
    line-height: 1.1; /* 超大文字的行高通常要設小一點（1.1~1.2），結構才好看 */
    margin-left: 46px;
}
.index-cw02{
    /* 語法：clamp(最小值, 首選值, 最大值) */
    font-size: clamp(2.5rem, 11vw + 1rem, 9rem);
    line-height: 1.1; /* 超大文字的行高通常要設小一點（1.1~1.2），結構才好看 */
    margin-left: 46px;
}

.index-cw03{
    /* 語法：clamp(最小值, 首選值, 最大值) */
    font-size: clamp(2.5rem, 6vw + 1rem, 8rem);
    line-height: 1.1;
    color: rgba(255,245,175,0.80);
    padding-left: 0px;
}
/* 地圖外層容器：負責控制響應式比例、圓角與陰影 */
.map-container {
  width: 100%;
  aspect-ratio: 16 / 9;      /* 控制地圖寬高比，可依畫面調整 */
  border-radius: 24px;       /* 這裡設定你想要的圓角大小（如 16px 或 24px） */
  overflow: hidden;          /* 關鍵：強制把地圖超出圓角的部分隱藏起來 */
  position: relative;
}

/* 讓地圖完全填滿容器 */
.map-container iframe {
  width: 100%;
  height: 100%;
  border: 0;
}
/* 處理固定導覽列（fixed-top）蓋住内容的問題 */
#home, #about, #services, #contact {
  scroll-margin-top: 56px; /* 56px 是 Bootstrap 導覽列的預設高度 */
}

/* 滾動監控高亮時的文字顏色 */
#main-nav .nav-link.active {
  color: #0d6efd !important; 
  font-weight: bold;
}

/* 確保文字層級在遮罩上方 */
.z-1 {
  position: relative; /* ? 需要加上 position 與 z-index 才會讓 HTML 的 .z-1 生效 */
  z-index: 2 !important;
}


/* ==========================================
   2. 首頁：視差效果核心樣式
   ========================================== */
/* 微調首頁兩行文字的行距與間隔 */
.hero-title {
  line-height: 1.1;
  margin-bottom: 0px;
}

.hero-subtitle {
  line-height: 2;
}

/*遮罩放大圖片3倍*/
.img-mask {
  width: 300px;  /* 固定的外框寬度 */
  height: 300px; /* 固定的外框高度 */
  object-fit: cover;
  
  /* 1. 定義遮罩形狀：這裡用 inset(0) 代表一個貼齊 300x200 邊界的矩形框 */
  clip-path: inset(0); 
  
  /* 2. 直接放大圖片內容，此時圖片放大但 clip-path 範圍不變，達成遮罩內放大 */
  transform: scale(4); 
  
  /* 如果您想要滑鼠移過去才放大，可以改寫成：
  transition: transform 0.3s ease;
  &:hover { transform: scale(1.5); } 
  */
}

/*遮罩放大圖片2倍*/
.img-mask2 {
  width: 300px;  /* 固定的外框寬度 */
  height: 300px; /* 固定的外框高度 */
  object-fit: cover;
  
  /* 1. 定義遮罩形狀：這裡用 inset(0) 代表一個貼齊 300x200 邊界的矩形框 */
  clip-path: inset(0); 
  
  /* 2. 直接放大圖片內容，此時圖片放大但 clip-path 範圍不變，達成遮罩內放大 */
  transform: scale(2); 
  
  /* 如果您想要滑鼠移過去才放大，可以改寫成：
  transition: transform 0.3s ease;
  &:hover { transform: scale(1.5); } 
  */
}


/* 黑色半透明遮罩 */
.bg-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 1; /* ? 調整為 1，層級放在背景圖上方 */
}

/* 速度變化的視差外層區塊（首頁） */
.parallax-slow {
  position: relative;
  overflow: hidden; /* 隱藏因為位移而超出範圍的背景圖 */
  width: 100%;
}

/* 速度變化的視差背景層 */
.parallax-slow .parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 130%; /* 高度調高到 130%，多留一些空間給 JS 往下滑動，避免畫面穿幇 */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  z-index: 0; /* ? 調整為 0，不可設為負數，否則背景會掉到網頁最底層變白色 */
  will-change: transform; /* 優化瀏覽器?染效能，減少畫面?頓 */
}

/* 原本舊有的純 CSS 固定視差效果（服務頁目前在使用） */
.bg-parallax {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}

.font-readme{
    color:rgba(255,227,181,1.00);
    font-size: 10pt;
    margin: 0px;
	padding: 10px;
    text-align: center;
	background:rgba(255,144,0,1.00);
}

/* ==========================================
   3. 關於我：團隊頭像設定
   ========================================== */
.avatar-wrapper {
  width: 200px;          /* 如果想縮小，可以把這裡跟下面改成 100px */
  height: 200px;         
  border-radius: 50%;    
  overflow: hidden;      
  border: 3px solid #fff; 
  display: inline-block; /* ? 確保外層容器在 Bootstrap 彈性盒中能維持設定的寬高 */
}

/* 確保圖片在圓形容器内完美填滿不變形 */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;     
  object-position: center; 
}

/* ==========================================
   6. 作品集：多欄位排版 (模擬 card-columns)
   ========================================== */
.custom-card-columns {
  column-count: 1; /* 預設手機版為 1 欄 */
  column-gap: 1.5rem; /* 欄位間的間距 */
}

/* ==========================================
   7. 作品集：文字超連結與?片滑過效果
   ========================================== */
/* 預設超連結標題 */
.custom-card-columns .card-link-title {
  color: #ffffff;          /* 預設文字顏色 */
  text-decoration: none;   /* 移除預設的超連結底線 */
  transition: color 0.3s ease; /* 漸變顏色效果 */
}

/* 滑鼠移到超連結時變更顏色 */
.custom-card-columns .card-link-title:hover {
  color: rgba(255, 190, 0, 1.00); /* 滑動時變更為黄色 */
  text-decoration: underline; /* 加上底線，增加使用者互動感 */
}

/* ?片滑動 hover 效果（增加陰影與上浮感） */
.custom-card-columns .card {
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-card-columns .card:hover {
  border-color: #0d6efd !important; /* 邊框變藍色 */
  transform: translateY(-5px);       /* ?片往上飄移 5px */
  box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2) !important; /* 增加藍色的科技感陰影 */
}

/* 確保?片内容不被切斷或分開 */
.custom-card-columns .card {
  display: inline-block;
  width: 100%;
}

/* 深色背景下的半透明白色文字顏色 */
.text-light-50 {
  color: rgba(255, 255, 255, 0.7) !important;
}
.index-homstudio {
    text-align: right;
	margin-top: 50px;
}

/* 平板尺寸斷點（螢幕寬度 768px 以上時變 2 欄） */
@media (min-width: 768px) {
  .custom-card-columns {
    column-count: 2;
  }
}

/* 電腦版尺寸斷點（螢幕寬度 992px 以上時變 3 欄） */
@media (min-width: 992px) {
  .custom-card-columns {
    column-count: 3;
  }
}

/* ==========================================
   4. RWD 行動裝置優化相容性 (置底)
   ========================================== */
@media (max-width: 991.98px) {
  .bg-parallax {
    background-attachment: scroll;
  }
  /* 手機版建議關閉 JS 滾動位移，改回一般捲動，避免部分手機出現畫面抖動 */
  .parallax-slow .parallax-bg {
    height: 100%;
    transform: none !important;
  }
}

/* ==========================================
   5. 關於我：圖片間的指向右箭頭
   ========================================== */
.step-arrow {
  position: absolute;
  top: 100px;             /* 控制箭頭的上下高度，目前對準圓形圖片的中央 */
  right: -40px;           /* 將箭頭推到兩張圖片的間隔中間 */
  font-size: 5rem;        /* 箭頭大小 */
  color:rgba(69,200,182,1.00); /* 箭頭顏色 */
  font-weight: bold;
  transform: translateY(-50%); /* 確保垂直完美居中 */
  z-index: 10;
}
.p-2{
	text-align: justify;
	margin-top: 20px;
}

.process-step {
  position: relative;
  padding: 0 0 1.75rem;
  background: #fff;
  border: 1px solid rgba(33, 37, 41, 0.08);
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(33, 37, 41, 0.06);
  overflow: hidden;
}

.process-steps-row {
  margin-bottom: 6rem;
}

.process-step .avatar-wrapper {
  display: block;
  width: 100%;
  height: 200px;
  margin-right: 0 !important;
  margin-left: 0 !important;
  border: 0;
  border-radius: 0;
}

.process-step .avatar-img {
  display: block;
}

.process-step-number {
  position: absolute;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  padding: 0.65rem 1rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.78);
  color: #c7a781;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}

.process-step-title {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 3.5rem;
  margin: 0 0 0;
  padding: 0 1.5rem;
  color: #212529;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.35;
}

.process-step-label {
  min-height: 1.5rem;
  margin: 0 0 1.5rem;
  padding: 0 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.process-step-badge {
  display: inline-block;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: #f5eee6;
  color: #8b6848;
  line-height: 1.4;
}

.process-step-description {
  margin: 0;
  padding: 0 1.5rem;
  color: #6c757d;
  font-size: 0.925rem;
  line-height: 1.75;
}

@media (max-width: 575.98px) {
  .process-step {
    padding-bottom: 1.5rem;
  }

  .process-step-title,
  .process-step-label,
  .process-step-description {
    padding-right: 1.25rem;
    padding-left: 1.25rem;
  }

  .process-step-title,
  .process-step-label {
    min-height: 0;
  }
}

/* 確保視差外層容器能正確裁切超出範圍的背景與文字 */
.parallax-slow {
  position: relative;
  overflow: hidden; 
  width: 100%;
}

/* 確保背景高度?高，提供 JS 位移空間 */
.parallax-slow .parallax-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 130%; /* 130% 高度防穿幇 */
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    z-index: 0;
    will-change: transform;
    text-decoration: underline;
}

/* 核心關鍵：為文字加上 will-change，讓瀏覽器優化硬體加速，滾動時文字完全不發抖、不?頓 */
#hero-text {
  will-change: transform, opacity;
}
#hero-text2 {
  will-change: transform, opacity;
}

  .custom-colored-list{
    color: #715253;
	  font-weight: 500;
}
  /* 鎖定這個清單裡面的點 (marker)，並設定顏色與大小 */
  .custom-colored-list li::marker {
    color: #FFB700;      /* 替換成您想要的顏色，此處以 Bootstrap 藍色為例 */
    font-size: 1.5rem;   /* 可以微調圓點的大小 */
}

/* ==========================================
   8. 擴充：點擊放大燈箱 (Lightbox) 樣式
   ========================================== */
/* 讓圓形圖片滑過時產生微幅放大提示，吸引使用者點選 */
.avatar-wrapper .zoomable-img {
  transition: transform 0.3s ease;
}
.avatar-wrapper:hover .zoomable-img {
  transform: scale(1.08);
}

/* 燈箱背景遮罩（預設隱藏） */
.lightbox-overlay {
  display: none; 
  position: fixed;
  z-index: 9999; /* 確保在所有網頁元素（包含導覽列）的最上方 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* 極黑深色遮罩 */
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* 燈箱放大後的圖片：保持原圖比例、不變形、限制最大尺寸 */
.lightbox-content {
  margin: auto;
  display: block;
  max-width: 85%;
  max-height: 80vh;
  object-fit: contain; /* 確保放大後是完整的矩形原圖，不會被圓形裁切 */
  border: 3px solid #fff;
  border-radius: 4px;
  animation: zoomInEffect 0.3s ease;
}

/* 圖片下方的文字說明 */
#lightboxCaption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  font-size: 1.1rem;
}

/* 右上角關閉按鈕 */
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
}
.lightbox-close:hover {
  color: #ffb700; /* 滑過時變更為網頁黃色主題色 */
}

/* 動態登場效果：淡入並放大 */
@keyframes zoomInEffect {
  from { transform: scale(0.7); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
/*名片*/
.cardlv-1{
	margin-bottom: 0;
	padding-bottom: 0;
	
}
.cardlv-2{
	color:rgba(166,166,166,1.00);
	font-size: 10pt;
	margin-top: 0;
	padding-top: 0;
}