/* 全局設置 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #F2FFE9;
}

.my-content {
  padding: 50px 0;
  background-image: url('../images/mpic/1.gif');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  color: white;
}
@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-100%); /* 開始時，文本在螢幕左邊外 */
  }
  100% {
    opacity: 1;
    transform: translateX(0); /* 最終狀態：在原始位置 */
  }
}
.my-text {
  text-align: left;
  padding-left: 100px;
  margin-top: 150px;
  opacity: 0; /* 初始隱藏 */
  transform: translateX(-100%); /* 初始位置在左邊螢幕外 */
  animation: slideIn 1s ease-out forwards; /* 設定動畫 */
}

.my-text h1 {
  font-size: 5vw;
  color: #674636;
  font-weight: bold;
  margin-bottom: 2vh;
}

.my-text p {
  font-size: 2vw;
  color: #674636;
  margin-bottom: 3vh;
}

.my-btn {
  padding: 1.5vh 2.5vw;
  border: 3px #674636 solid;
  font-size: 2.5vw;
  border-radius: 50px;
  background-color: #fff;
  color: #674636;
  font-weight: bold;
}

.my-btn:hover {
  
  background-color: #674636;
  color: #fff;
  border: 3px #674636 solid;
}

.my-item img {
  height: 300px;
}



/* 使用指南容器 */
.guide-container {
  text-align: center;          /* 讓內容水平置中 */
  padding: 20px 0;             /* 內邊距 */
  transform: translateY(50px); /* 初始位置在稍下方 */
  opacity: 0; /* 初始透明 */
  transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* 動畫效果 */
}
.guide-container.show {
  transform: translateY(0); /* 向上浮動至原始位置 */
  opacity: 1; /* 完全可見 */
}

/* 使用指南大標題 */
.section-title {
  font-size: 4vw;               /* 調整字體大小 */
  font-weight: bold;            /* 設置字體加粗 */
  color: #4A7242;               /* 文字顏色 */
  display: inline-flex;         /* 使用 inline-flex 讓內容在同一行 */
  align-items: center;          /* 垂直置中對齊圖片與文字 */
  gap: 10px;                    /* 圖片與文字之間的距離 */
  font-family: 'Arial', sans-serif; /* 字體樣式 */
  justify-content: center;      /* 水平置中標題 */            /* 確保標題在父容器中水平置中 */
}

/* 調整圖標大小 */
.title-icon {
  height: 100px;                /* 調整圖片的高度 */
  width: auto;                  /* 自動調整寬度，保持圖片比例 */
}

/* 使用指南描述文字 */
.guide-text {
  font-size: 1.8vw;             /* 文字大小 */
  color: #674636;               /* 文字顏色 */
  max-width: 100%;               /* 最大寬度 */
  margin: 0 auto;               /* 水平置中 */
  line-height: 1.6;             /* 行距 */
  font-weight: bold;
}


/* 響應式設計 */
@media (max-width: 768px) {
  .guide-container {
    flex-direction: column;
    text-align: center;
  }

  .section-title {
    margin-bottom: 20px;
  }

  .guide-text {
    max-width: 100%;
  }
}



.my-item h4 {
  color: #674636;
  font-size: 1.25rem;
  font-weight: bold;
}

.my-item p {
  color: #A0937D;
}



@media (max-width: 576px) {
  .my-text {
    width: 40%;
    padding-left: 5%;
  }

  .my-text h1 {
    font-size: 5vw;
    word-wrap: break-word;
    word-break: break-word;
  }

  .my-text p {
    font-size: 3vw;
    word-wrap: break-word;
    word-break: break-word;
  }

  .my-btn {
    font-size: 3vw;
  }

  .my-item img {
    height: 80px;
  }
}

/* 導覽列的容器 */
.navbar {
  background-color: #f8f9fa; /* 背景顏色 */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加陰影 */
  padding: 10px 20px; /* 上下左右內邊距 */
  font-size: 20px;
  font-weight: bold;
  position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* 確保導覽列在最上層 */
}


.navbar-nav .nav-link {
  margin-right: 20px;
  color: #A0937D;
}

.navbar-nav .nav-link:hover {
  color: #674636;
}

.navbar-nav .nav-link.active {
  color: #674636;
}

.btn-outline-primary {
  color: #A0937D;
  font-weight: bold;
  border: #A0937D 2px solid;
  border-radius: 50px;
  margin-right: 20px;
  font-size: 20px;
}

.btn-outline-primary:hover {
  color: #fff;
  font-weight: bold;
  border: #674636 2px solid;
  border-radius: 50px;
  background-color: #674636;
  margin-right: 20px;
}
/* 修改用戶頭像的樣式 */
.user-avatar {
  width: 45px;  /* 調整圖片寬度 */
  height: 45px;  /* 調整圖片高度 */
  border-radius: 50%;  /* 圓形圖片 */
  margin-right: 10px;  /* 與名稱按鈕之間的距離 */
  object-fit: cover;  /* 保持圖片比例 */
  border: 2px solid #674636;  /* 為圖片增加邊框以突出顯示 */
}

/* 修改用戶信息容器樣式 */
.user-info-container {
  display: flex;
  align-items: center;
}

/* 修改用戶名稱按鈕的樣式 */
.btn-success {
  border: 2px #f8f9fa solid;
  background-color: #f8f9fa;  /* 修改背景顏色 */
  color: #A0937D;  /* 字體顏色設為白色 */
  font-size: 20px;
  font-weight: bold;  /* 粗體字 */
  border-radius: 25px;  /* 圓滑的邊框 */
  text-decoration: none;  /* 移除超連結的下劃線 */
  padding: 8px 15px;  /* 內邊距 */
  transition: background-color 0.3s, color 0.3s;  /* 添加過渡效果 */
}

/* 當用戶名稱按鈕被懸停時的樣式 */
.btn-success:hover {
  color: #674636;  /* 懸停時更改字體顏色 */
  border: 2px #f8f9fa solid;
  background-color: #f8f9fa;  /* 修改背景顏色 */
}
.btn-success:active {
  color: #674636;  /* 按下按鈕時更改字體顏色 */
  border: 2px solid #f8f9fa;  /* 設定按下按鈕時的邊框樣式 */
  background-color: #f8f9fa;  /* 修改按下按鈕時的背景顏色 */
}



/* 卡片樣式 */
.custom-btn {
  color: #557c55; /* 設定文字顏色 */
  padding: 10px 20px; /* 設定按鈕內部間距 */
  border-radius: 50px; /* 設定按鈕圓角 */
  text-decoration: none; /* 移除連結下劃線 */
  font-size: 1.5vw;
  font-weight: bold;
  border: 2px #557C55 solid;
  
}

.custom-btn:hover {
  background-color: #557C55; /* 滑鼠懸停時的顏色 */
  color: #fff;
  border: 2px #557C55 solid;
}


.card-style {
  width: 80%; /* 設定卡片寬度為容器的 80% */
  max-width: 500px; /* 設定最大寬度 */
  margin: 50px auto; /* 調整卡片的上下間距 */
  background-color: #fff;
  border-radius: 20px;
  padding: 40px 20px; /* 調整這裡的內邊距，讓卡片看起來更長 */
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  text-align: left; /* 字體靠左 */
  position: relative; /* 為了讓圓形圖片的絕對定位生效 */
  min-height: 300px; /* 設定最小高度 */
}



/* 圓形圖片 */
.circle-img {
  position: absolute; /* 絕對定位圖片 */
  top: -50px; /* 讓圖片上移 */
  left: 20px; /* 調整圖片的水平位置 */
}

.circle-img img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* 圓形圖片陰影 */
  border: 10px #fff  solid;
}

/* 卡片內的內容 */
.card-content {
  padding-top: 60px; /* 增加內邊距，避免圖片與文字重疊 */
}

.card-content h4 {
  font-size: 24px;
  font-weight: bold;
  color: #674636;
}

.card-content p {
  font-size: 16px;
  color: #A0937D;
  margin: 20px 0;
  line-height: 1.5;
}

.row {
  margin-right: 50px; /* 減少 row 的右外邊距 */
  margin-left: 50px;  /* 減少 row 的左外邊距 */
}

.col-md-6 {
  padding-right: 20px;  /* 減少左右卡片的間距 */
  padding-left: 20px;   /* 減少左右卡片的間距 */
}


/* 響應式設計 */
@media (max-width: 768px) {
  .card-style {
    width: 90%;
  }

  .circle-img {
    top: -30px; /* 在小螢幕上稍微調整圖片位置 */
  }

  .circle-img img {
    width: 60px;
    height: 60px;
  }

  .card-content h4 {
    font-size: 20px;
  }

  .card-content p {
    font-size: 14px;
  }

  .custom-btn {
    font-size: 14px;
    padding: 8px 16px;
  }
}

/* 常見問題大容器 */
.guide-container1 {
  width: 100%;                  /* 設置寬度填滿螢幕 */
  height: 110vh;                 /* 高度自定義，80vh 表示 80% 的螢幕高度 */
  background-image: url('../images/mpic/b2.png'); /* 背景圖片 */
  background-size: cover;       /* 背景圖片大小，確保覆蓋整個區域 */
  display: flex;                /* 使用 flexbox 居中 */
  flex-direction: column;       /* 讓內部元素垂直排列 */
  align-items: center;          /* 水平置中 */
  padding: 20px;                /* 內邊距 */
  transform: translateY(50px); /* 初始位置在稍下方 */
  opacity: 0; /* 初始透明 */
  transition: transform 0.5s ease-out, opacity 0.5s ease-out; /* 動畫效果 */
}
.guide-container1.show {
  transform: translateY(0); /* 向上浮動至原始位置 */
  opacity: 1; /* 完全可見 */
}



/* 響應式設計 */
@media (max-width: 768px) {
  .guide-container {
    height: 60vh;               /* 小螢幕時降低高度 */
  }
  .section-title {
    font-size: 6vw;             /* 小螢幕字體調整 */
  }
  .guide-text p {
    font-size: 4vw;             /* 小螢幕字體調整 */
  }
}

.accordion-container {
  width: 100%; /* 設置響應式寬度 */
  max-width: 600px; /* 最大寬度 */
  margin: 0 auto; /* 居中 */
}

.accordion-item {
  margin-bottom: 40px;
}

.accordion-button {
  background-color: #F5F5F5;
  color: #000;
  font-size: 20px;
  text-align: left;
  padding: 15px;
  width: 100%;
  border: 2px solid #000;
  outline: none;
  cursor: pointer;
  border-radius: 50px; /* 調整圓角半徑，讓外觀更自然 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease, border-radius 0.3s ease; /* 添加過渡效果 */
}
.accordion-button1 {
  background-color: #fff;
  color: #000;
  font-size: 20px;
  text-align: left;
  padding: 15px;
  width: 100%;
  border: 2px solid #000;
  outline: none;
  cursor: pointer;
  border-radius: 50px; /* 調整圓角半徑，讓外觀更自然 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.3s ease, border-radius 0.3s ease; /* 添加過渡效果 */
}
.accordion-button1:hover {
  background-color: #D5D5D5;
}

.accordion-button:hover {
  background-color: #D5D5D5;
}

.accordion-content {
  padding: 0 15px 15px 15px;
  display: none;
  border-top: 0px;
  border-left: 2px solid #5C4033;
  border-right:2px solid #5C4033 ;
  border-bottom:2px solid #5C4033 ;
  border-bottom-left-radius: 25px; /* 左下圓角 */
  border-bottom-right-radius: 25px; /* 右下圓角 */
}

.accordion-content p {
  margin: 0;
  margin-top: 10px;
  line-height: 1.6; /* 行高調整，增加可讀性 */
}

.answer-title {
  font-size: 2rem; /* 調整 A 的大小 */
  font-weight: bold;
  color: #4A7242; /* 設置 A 的顏色 */
  margin-bottom: 10px; /* 與解答內容之間的距離 */
}

.accordion-content a {
  color: #0d6efd; /* 設置郵箱連結顏色 */
  text-decoration: underline; /* 添加下劃線 */
}

.accordion-content a:hover {
  color: #0056b3; /* 懸停時的顏色變化 */
}
/* 針對小於 768px 的裝置進行響應式調整 */
@media (max-width: 768px) {
  .guide-text p {
    font-size: 2.5vw; /* 調整字體大小，使其在小螢幕上仍然可讀 */
    white-space: normal; /* 小螢幕時允許換行 */
  }
  .guide-text1 p {
    font-size: 3vw; /* 調整字體大小，使其在小螢幕上仍然可讀 */
    white-space: normal; /* 小螢幕時允許換行 */
  }
}