/* 重置與全域樣式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 預設字體，請將 "LXGW WenKai TC" 換成你的 Adobe Fonts 字體名稱 */
body {
  /* 中間用 #8a0001，邊緣用 #770001（你可以依需求微調顏色） */
  /* background: radial-gradient(circle, #9b0101 0%, #770001 100%); */
  background: radial-gradient(circle, #9b0101, #5e0002);
  color: #d3a371;
  font-family: "LXGW WenKai TC", sans-serif;
}

/* 頂端資訊區 */
.top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 40px;
  flex-wrap: nowrap; /* 保持在同一行 */
  border-bottom: 1px solid #d3a371; /* 金色底線 */
  animation: slideDown 0.5s ease-in-out;
  
}

@keyframes slideDown {
  from {
      transform: translateY(-100%);
  }
  to {
      transform: translateY(0);
  }
}

/* 讓每個子容器佔相等寬度，且置中內容 */
.top-bar > div {
  flex: 1;
  display: flex;
  align-items: center;
}

/* 調整左右容器對齊方式 */
.top-bar > .top-left {
  justify-content: flex-start;
  margin-left: -20px; /* 將左側向左拉 40px */
}

.top-bar > .top-center {
  justify-content: center;
}

.top-bar > .top-right {
  justify-content: flex-end;
  margin-right: -20px; /* 將左側向右拉 40px */
}

/* 圖片隨著容器縮放 */
.top-left img,
.top-center img,
.top-right img {
  max-height: 100px;
  width: auto;
  max-width: 100%;
  height: auto;
}


/* Logo + 導覽列容器 */
header {
  text-align: center;
  margin-top: 10px;
  /* margin-bottom: 20px; */
  animation: slideDown 0.5s ease-in-out;
}

@keyframes slideDown {
  from {
      transform: translateY(-100%);
  }
  to {
      transform: translateY(0);
  }
}

/* 導覽列 - 桌機版 */
.main-nav {
  position: relative;
  z-index: 10;
}
.nav-links {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 5vw; /* 使用相對單位 */
  font-size: clamp(16px, 1.5vw, 20px);
}
.nav-links li {
  position: relative;
}
.nav-links li a {
  color: #d3a371;
  text-decoration: none;
  transition: color 0.3s;
}
.nav-links li a:hover {
  text-decoration: underline;
}

/* 下拉選單 */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%; /* 緊貼下方 */
  left: 50%;  /* 置中參考點 */
  transform: translateX(-50%); /* 真正置中對齊 */
  background-color: #770001;
  padding: 10px 0;
  border-radius: 5px;
  min-width: 160px;
  z-index: 999;
  list-style: none; /* ✅ 取消點點符號 */
  text-align: center; /* ✅ 讓內容也置中對齊 */
}

.dropdown-menu li {
  padding: 5px 20px;
}

.dropdown-menu li a {
  color: #d3a371;
  text-decoration: none;
  display: block;
}

/* 滑到 dropdown 時顯示選單 */
.dropdown:hover .dropdown-menu {
  display: block;
}




/* 漢堡選單（桌機隱藏） */
.hamburger {
  display: none;
  font-size: 30px;
  cursor: pointer;
}

/* 手機版：當螢幕寬度 ≤ 900px */
@media (max-width: 900px) {
  .hamburger {
    display: block;
  }
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    background-color: #770001;
    width: 100%;
    padding: 10px 0;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .nav-links.active {
    display: flex;
  }
  .nav-links li a {
    font-size: 18px;
  }
}

/* 主要宣傳區（Hero） */
.hero {
  text-align: center;
  padding: 10px 20px 40px;
  line-height: 1.8;
  animation: fadeInUp 1s ease-in-out;
}

@keyframes fadeInUp {
  from {
      opacity: 0;
      transform: translateY(50px);
  }
  to {
      opacity: 1;
      transform: translateY(0);
  }
}

.hero img {
  width: 100%;       /* 讓圖片最大寬度隨容器 */
  max-width: 100%;   /* 防止圖片超出 */
  height: auto;      /* 高度自動，維持比例 */
  display: block;    /* 避免行內元素的間隙 */
  align-items: center;
  /* margin: 0 auto;    置中圖片 */
}

.hero h2 {
  font-size: 24px;
  margin-bottom: 10px;
}
.hero h1 {
  font-size: 28px;
  margin-bottom: 20px;
}
.buttons a {
  display: inline-block;
  margin: 0 10px;
  padding: 8px 16px;
  border: 1px solid #d3a371;
  border-radius: 4px;
  font-size: 16px;
  color: #d3a371;
  text-decoration: none;
  transition: background-color 0.3s;
}
.buttons a:hover {
  background-color: #d3a371;
  color: #770001;
}


/* =========================================== */
/* 師資介紹頁面 */
/* 主要內容容器 */
.teacher-details {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 15px; /* 加入左右內距，避免在小螢幕過貼邊 */
}

/* 主要內容容器 */
.teacher-details h2 {
  
  padding: 0 0px 10px; /* 加入左右內距，避免在小螢幕過貼邊 */
  text-align: center; /* ✅ 讓標題置中 */
  /* margin: 20px auto; */
}

/* 師資介紹區塊 */
.teacher-profile {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 30px;
  flex-wrap: nowrap;
  margin: 40px auto;
}


.teacher-image {
  max-width: 50%; /* Scales with parent container */
  min-width: 300px; /* Minimum width for desktop */
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 10px;
  border: 2px solid #d3a371;
  margin-bottom: 20px;
  display: block; /* Ensures centering with margin auto */
  margin-left: 0;
  margin-right: auto; /* Centers the image */
  overflow: hidden;
}

.teacher-info {
  flex: 1;
  /* max-width: 400px; 避免文字太寬 */
}

.teacher-info .title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #d3a371;
}

.teacher-info p {
  font-size: 16px;
  line-height: 1.8;
  color: #d3a371;
}

.teacher-name {
  font-size: 24px;
  font-weight: bold;
  color: #d3a371;
  margin-bottom: 10px;
}

.teacher-titles {
  list-style-type: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.teacher-titles li {
  font-size: 16px;
  margin-bottom: 5px;
  position: relative;
  padding-left: 1.5em;
  color: #ffd9a0;
}

.teacher-titles li::before {
  content: "★";
  position: absolute;
  left: 0;
  color: #d3a371;
}

.teacher-bio p {
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 15px;
  text-align: justify;
}







@media (max-width: 900px) {
  .teacher-profile {
    flex-direction: column;
    text-align: center;
    justify-content: center; /* Center children in column */
    width: 100%; /* Ensure full width */
  }

  .teacher-image {
    max-width: 300px; /* Full width on mobile */
    min-width: 50px; /* Adjusted minimum for mobile */
    width: 100%; /* Takes full container width */
    margin: 0 auto 15px auto;
    display: block;
    box-sizing: border-box;
    overflow: hidden;
  }

  .teacher-info {
    text-align: left;
  }

  .teacher-info .title {
    margin-bottom: 10px;
    text-align: center;
  }
}



/* =========================================== */
/* 公司位置頁面 */

/* 主要內容容器 */
.location-details {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 15px; /* 加入左右內距，避免在小螢幕過貼邊 */
}

/* 主要內容容器 */
.location-details h2 {
  
  padding: 0 0px 10px; /* 加入左右內距，避免在小螢幕過貼邊 */
  text-align: center; /* ✅ 讓標題置中 */
}

/* 地圖區塊 */
.map-container {
  margin-bottom: 30px;
}

.map-container iframe {
  width: 100%;
  height: 450px;
  border: 3px solid #d3a371;
  border-radius: 30px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 公司圖片區塊 */
.location-image {
  margin-bottom: 30px;
  text-align: center; /* 讓圖片在區塊中置中 */
}

.location-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border: 3px solid #d3a371;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* 交通方式區塊 */
.transportation {
  text-align: left;
  margin-bottom: 40px;
  padding: 0 15px;
}

.transportation h3 {
  font-size: 24px;
  color: #d3a371;
  margin-bottom: 20px;
  border-bottom: 2px solid #d3a371;
  padding-bottom: 5px;
}

.transportation p {
  font-size: 18px;
  color: #d3a371;
  margin-bottom: 20px;
  line-height: 1.6;
}

.transportation ul {
  list-style: disc; /* 改為內嵌圓點 */
  margin-left: 20px;
}

.transportation li {
  font-size: 18px;
  color: #d3a371;
  margin-bottom: 15px;
}

.transportation strong {
  color: #d3a371;
}

/* RWD 調整：若螢幕較窄時 */
@media (max-width: 480px) {
  .map-container iframe {
    height: 300px;  /* 地圖高度縮小 */
  }
  .transportation h3 {
    font-size: 20px;
  }
  .transportation p,
  .transportation li {
    font-size: 16px;
  }
}

/* =============================================================== */
/* 公司起源 */

.about-origin {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.about-origin h2 {
  text-align: center;
  font-size: 28px;
  margin-bottom: 20px;
  color: #d3a371;
}

.about-origin h3 {
  font-size: 22px;
  color: #d3a371;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 5px solid #d3a371;
  padding-left: 10px;
}

.about-origin p {
  margin-bottom: 15px;
  text-align: justify;
}

.origin-points {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
}

.origin-points li {
  margin-bottom: 10px;
  color: #f5dca8;
}



/* =============================================================== */
/* 成人命名 */
.adult-naming-importance {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.adult-naming-importance h2 {
  text-align: center;
  font-size: 28px;
  color: #d3a371;
  margin-bottom: 20px;
}

.adult-naming-importance h3 {
  font-size: 20px;
  color: #d3a371;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 5px solid #d3a371;
  padding-left: 10px;
}

.adult-naming-importance p {
  margin-bottom: 15px;
  text-align: justify;
}

.adult-naming-importance ul {
  margin-left: 20px;
  margin-bottom: 20px;
  list-style-type: disc;
}

.adult-naming-importance ul li {
  margin-bottom: 10px;
  color: #f5dca8;
}

.adult-naming-importance .cta {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-left: 4px solid #d3a371;
  font-weight: bold;
  border-radius: 6px;
}

.adult-naming-importance .cta a {
  color: #ffb98e;
  text-decoration: underline;
}

.adult-naming-importance .cta a:hover {
  color: #ffffff;
  text-decoration: none;
}






/* ================================================================ */
/* 嬰兒命名 */
.baby-naming-section {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.baby-naming-section h2 {
  text-align: center;
  font-size: 28px;
  color: #d3a371;
  margin-bottom: 20px;
}

.baby-naming-section h3 {
  font-size: 20px;
  color: #d3a371;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 5px solid #d3a371;
  padding-left: 10px;
}

.baby-naming-section p {
  margin-bottom: 15px;
  text-align: justify;
}

.baby-naming-section blockquote {
  margin: 20px 0;
  padding: 10px 20px;
  border-left: 5px solid #d3a371;
  background-color: rgba(255, 255, 255, 0.05);
  font-style: italic;
  color: #f5dca8;
}

.naming-cases,
.baby-naming-features {
  margin-left: 20px;
  margin-bottom: 20px;
  list-style-type: disc;
}

.naming-cases li,
.baby-naming-features li {
  margin-bottom: 10px;
}

.baby-naming-section .cta {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-left: 4px solid #d3a371;
  font-weight: bold;
  border-radius: 6px;
}

.baby-naming-section .cta a {
  color: #ffb98e;
  text-decoration: underline;
}

.baby-naming-section .cta a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* ================================================================ */
/* 八字論命 */
.bagua-naming-content {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.bagua-naming-content h2 {
  text-align: center;
  font-size: 28px;
  color: #d3a371;
  margin-bottom: 20px;
}

.bagua-naming-content h3 {
  font-size: 20px;
  color: #d3a371;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 5px solid #d3a371;
  padding-left: 10px;
}

.bagua-naming-content p {
  margin-bottom: 15px;
  text-align: justify;
}

.bagua-naming-content blockquote {
  margin: 20px 0;
  padding: 10px 20px;
  border-left: 5px solid #d3a371;
  background-color: rgba(255, 255, 255, 0.05);
  font-style: italic;
  color: #f5dca8;
}

.fortune-issues,
.fortune-features {
  margin-left: 20px;
  margin-bottom: 20px;
  list-style-type: disc;
}

.fortune-issues li,
.fortune-features li {
  margin-bottom: 10px;
}

.bagua-naming-content .cta {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-left: 4px solid #d3a371;
  font-weight: bold;
  border-radius: 6px;
}

.bagua-naming-content .cta a {
  color: #ffb98e;
  text-decoration: underline;
}

.bagua-naming-content .cta a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* =============================================================== */
/* 擇日 */
.select-day-content {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.select-day-content h2 {
  text-align: center;
  font-size: 28px;
  color: #d3a371;
  margin-bottom: 20px;
}

.select-day-content h3 {
  font-size: 20px;
  color: #d3a371;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 5px solid #d3a371;
  padding-left: 10px;
}

.select-day-content p {
  margin-bottom: 15px;
  text-align: justify;
}

.select-day-list {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
}

.select-day-list li {
  margin-bottom: 8px;
  color: #f5dca8;
}

.select-day-content .cta {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-left: 4px solid #d3a371;
  font-weight: bold;
  border-radius: 6px;
}

.select-day-content .cta a {
  color: #ffb98e;
  text-decoration: underline;
}

.select-day-content .cta a:hover {
  color: #ffffff;
  text-decoration: none;
}


/* ================================================================ */
/* 公司撰名 */
.company-naming-content {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.company-naming-content h2 {
  text-align: center;
  font-size: 28px;
  color: #d3a371;
  margin-bottom: 20px;
}

.company-naming-content h3 {
  font-size: 20px;
  color: #d3a371;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 5px solid #d3a371;
  padding-left: 10px;
}

.company-naming-content ul.company-naming-list {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
  color: #f5dca8;
}

/* .company-naming-content .cta {
  text-align: center;
  font-weight: bold;
  margin-top: 30px;
  font-size: 17px;
} */

.company-naming-content  .cta {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-left: 4px solid #d3a371;
  font-weight: bold;
  border-radius: 6px;
}

.company-naming-content .cta a {
  color: #ffb98e;
  text-decoration: underline;
}

.company-naming-content .cta a:hover {
  color: #ffffff;
  text-decoration: none;
}


/* ============================================================== */
/* service page */
.service-pricing-content {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.service-pricing-content h2 {
  font-size: 28px;
  text-align: center;
  color: #d3a371;
  margin-bottom: 20px;
}

.service-pricing-content h3, .service-pricing-content h4 {
  color: #d3a371;
  margin-top: 25px;
}

.service-pricing-content ul {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
}


.service-pricing-content a {
  color: #d3a371;
}

.service-pricing-content a:hover {
  color: #ffd7ad;
}

.service-table-wrapper {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.service-table {
  border-collapse: collapse;
  width: 100%;
  max-width: 800px;
  background-color: rgba(255,255,255,0.03);
  border: 1px solid #d3a371;
}

.service-table th,
.service-table td {
  border: 1px solid #d3a371;
  padding: 12px;
  text-align: center;
  color: #ffd9a0;
}

.service-table th {
  background-color: rgba(211, 163, 113, 0.2);
  font-size: 18px;
}

.service-table td a {
  color: #ffd9a0;
  text-decoration: underline;
}

.service-table td a:hover {
  color: #fff2c0;
}


/* ================================================================ */
/* 郵寄命名 */
.mail-naming-content {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.mail-naming-content h2 {
  font-size: 28px;
  text-align: center;
  color: #d3a371;
  margin-bottom: 20px;
}

.mail-naming-content h3 {
  font-size: 20px;
  color: #d3a371;
  margin-top: 30px;
  margin-bottom: 10px;
  border-left: 5px solid #d3a371;
  padding-left: 10px;
}

.mail-naming-content h4 {
  font-size: 17px;
  margin-top: 15px;
  color: #f0c684;
}

.mail-naming-content ul {
  list-style-type: disc;
  margin-left: 20px;
  margin-bottom: 20px;
}

/* .mail-naming-content .cta {
  text-align: center;
  font-weight: bold;
  font-size: 17px;
  margin-top: 30px;
} */


.mail-naming-content .cta {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-left: 4px solid #d3a371;
  font-weight: bold;
  border-radius: 6px;
}

.mail-naming-content .cta a {
  color: #ffb98e;
  text-decoration: underline;
}

.mail-naming-content .cta a:hover {
  color: #ffffff;
  text-decoration: none;
}


/* ======================================================================= */
/* 開運吉印 */
.sticker-section {
  font-size: 16px;
  line-height: 1.8;
  color: #ffd9a0;
}

.sticker-section h2 {
  text-align: center;
  font-size: 28px;
  color: #d3a371;
  margin-bottom: 20px;
}

.sticker-section p {
  margin-bottom: 16px;
  text-align: justify;
}

.sticker-section .cta {
  background-color: rgba(255, 255, 255, 0.06);
  padding: 12px 18px;
  border-left: 4px solid #d3a371;
  font-weight: bold;
  border-radius: 6px;
}

.sticker-section .cta a {
  color: #ffb98e;
  text-decoration: underline;
}

.sticker-section .cta a:hover {
  color: #ffffff;
  text-decoration: none;
}

/* ========================================================================= */
/* 線上預約 */
.booking-content {
  max-width: 700px;
  margin: 0 auto;
  padding: 30px 20px;
  text-align: left;
  background-color: rgba(255, 255, 255, 0.02); /* 可選：背景色更有區塊感 */
  border-radius: 10px;
}


.form-section {
  max-width: 600px;     /* 最大寬度限制 */
  margin: 20px auto;       /* 水平置中 */
  padding: 30px 20px;   /* 內距讓表單不擁擠 */
  background-color: rgba(255, 255, 255, 0.05); /* 可視需要加背景 */
  border-radius: 10px;
}

select#service-select {
  color: #d3a371; /* 改為你想要的字色，這裡是金色 */
  background-color: #5e0002; /* 可選：背景色 */
  border: 1px solid #d3a371;
  padding: 8px 12px;
  border-radius: 6px;
  appearance: none;         /* 去除 iOS 原生樣式 */
  -webkit-appearance: none;
  -moz-appearance: none;
}


button[type="submit"] {
  background-color: #d3a371; /* 或你想要的金色、紅色等 */
  color: #000; /* 文字顏色 */
  font-size: 1.1em;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  appearance: none; /* ⭐ 關鍵：移除 iOS 預設樣式 */
  -webkit-appearance: none;
  -moz-appearance: none;
}

button[type="submit"]:hover {
  background-color: #e8c98b;
  color: #000;
}

/* 隱藏原生 radio 按鈕 */
.custom-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #d3a371;
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
  top: 2px;
  background-color: transparent;
  cursor: pointer;
}

/* 選取後內圈填滿金色 */
.custom-radio input[type="radio"]:checked {
  background-color: #d3a371;
}

/* hover 效果可加強提示 */
.custom-radio input[type="radio"]:hover {
  box-shadow: 0 0 0 2px rgba(211, 163, 113, 0.5);
}

/* 保持字體顏色一致 */
.custom-radio {
  color: #d3a371;
  font-size: 16px;
  margin-right: 12px;
  cursor: pointer;
}


#booking-form {
  font-size: 18px; /* 整體文字變大 */
}

input::placeholder {
  color: #d3a371; /* 金色 */
  opacity: 1;     /* 確保 iOS Safari 也正常 */
}

#booking-form input[type="text"],
#booking-form input[type="email"],
#booking-form input[type="tel"],
#booking-form input[type="number"],
#booking-form select,
#booking-form textarea {
  font-size: 18px;
  padding: 10px;
  border: 1px solid #d3a371;
  border-radius: 6px;
  width: 100%;
  max-width: 500px;
  background-color: rgba(255,255,255,0.1);
  color: #d3a371; /* 可視背景決定 */
}

#booking-form textarea {
  resize: vertical;
}

#booking-form label {
  font-weight: bold;
  display: block;
  margin: 10px 0 0px;
}

button.randomcode-renew {
  background-color: #d3a371;
  color: #000;
  font-size: 1.1em;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

button.randomcode-renew:hover {
  background-color: #e8c98b;
  color: #000;
}



/* ================================================================ */
/* 頁尾 */
footer {
  position: relative;
  text-align: center;
  border-top: 2px solid #d3a371; /* 粗線 */
  padding: 20px 40px;
  font-size: 14px;
  line-height: 1.6;
}

/* 使用偽元素放置細線 */
footer::before {
  content: "";
  position: absolute;
  top: -10px;         /* 與粗線之間的間距，數值可依需求調整 */
  left: 0;
  width: 100%;
  border-top: 5px solid #d3a371; /* 細線 */
}

footer .icon-link {
  display: inline-block;
  margin: 0px 3px;     /* 可調整圖示間距 */
  font-size: 24px;      /* 調整圖示大小 */
  transition: transform 0.3s, color 0.3s;
}

footer .icon-link:hover {
  transform: scale(1.1);
  color: #ffffff;       /* 滑鼠懸停時改變顏色 */
}

/* 將頁尾拆成左右兩邊 */
.footer-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
}

/* 左側區塊：圖示與版權資訊都靠左 */
.footer-left {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;  /* 將內部內容靠左 */
  text-align: left;         /* 文字靠左 */
}

/* 右側區塊：聯絡圖片與聯絡資訊都靠右 */
.footer-right {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;    /* 將內部內容靠右 */
  text-align: right;        /* 文字靠右 */
}

/* 左側：圖示區域 */
.footer-icons {
  display: flex;
  justify-content: flex-start; /* 靠左 */
  align-items: center;
  gap: 10px; /* 圖示間距 */
}

/* 左側：版權資訊 */
.footer-copy {
  margin-top: 5px;
  text-align: left;
}

/* 右側：聯絡我們圖片 */
.footer-contact-image img {
  max-width: 65%;
  min-width: 45%;
  height: auto;
  /* display: block; */
  justify-content: flex-end; /* 靠左 */
  align-items: right;
  /* margin: 0; 取消自動置中 */
}

/* 右側：聯絡資訊 */
.footer-contact-info {
  margin-top: 5px;
  text-align: right;
  line-height: 1.6;
}


/* RWD 補充：調整頂端資訊區與選單間距 */
@media (max-width: 900px) {

  .nav-links {
    gap: 15px;
  }
  .hero h1,
  .hero h2 {
    font-size: 20px;
  }
}

@media (max-width: 360px) {
  .footer-right {
    margin-top: 10px;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
  .footer-contact-image {
    text-align: left; /* 讓容器內內容靠左 */
  }
  .footer-contact-image img {
    max-width: 50%;
    min-width: 45%;
    height: auto;
    margin: 0; /* 取消預設的置中 margin */
  }
  .footer-contact-info {
    text-align: left;
    width: 100%;
  }
}


/* ========================================================================= */
/* 文字框 */
.framed-content {
  position: relative;
  padding: 0px;
  /* margin: 30px auto; */
  margin: 60px auto 30px; /* 上 60px、左右 auto、下 30px */
  max-width: 1600px;
  width: calc(100% - 40px); /* 兩邊總共留 40px */
  border: 40px solid transparent;
  padding-left: max(20px, env(safe-area-inset-left));
  padding-right: max(20px, env(safe-area-inset-right));
  background-color: rgba(255,255,255,0.03); /*  透明中帶底色 */

  /* 這裡用你提供的中式圖做為邊框 */
  box-sizing: border-box; /* ✅ 保證 padding + border 計算在內 */
  border-image: url('img/Border_img.png') 240 fill stretch;
  /* 40 是邊框切片值，要和上面 border 一致 */
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.frame-top-icon {
  position: absolute;
  top: -95px; /* 根據圖片高度微調 */
  left: 50%;
  transform: translateX(-50%);
  width: 20%;       /* ✅ 圖片寬度以父層比例控制 */
  max-width: 140px; /* 圖片寬度可自訂 */
  min-width: 80px; /* 圖片寬度可自訂 */
  height: auto;
  z-index: 2;
}
.inner_content {
  z-index: 1;
  max-width: 1000px; /* ✅ 把內文拉寬一些 */
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 900px) {
  .framed-content {
    position: relative;
    margin: 40px 20px;
    padding: 0px 30px;
    padding-left: 25px;
    padding-right: 25px;;
  }
  .frame-top-icon {
    max-width: 120px; /* 手機上圖片寬度 */
    top: -70px; /* 手機上邊框是 40px */
  }
  .inner-content {
    max-width: 1100px;
  }
}





/* ========================================================================= */