body {
  display: grid;
  place-items: center; /* 水平和垂直置中 */
  height: 100vh;
  margin: 0;
  background-color: #d5cfe1;
}

.section-title {
  color: #2572e4;
}

.accordion-item {
  margin-bottom: 10px !important;
}

.main_container {
  width: 45vw;
  max-width: 750px;
  min-width: 300px;
  height: 100.4%;
  background-color: #e1dee9;
}

.sing_up {
  width: 45vw;
  max-width: 750px;
  min-width: 300px;
  height: 100.4%;
  background-color: #e1dee9;
}

@media (max-width: 1243px) {
  .main_container,
  .sing_up {
    width: 90%;
  }
}

@media (max-width: 828px) {
  .main_container,
  .sing_up {
    width: 100%;
  }
}

.image-preview {
  width: 100%;
  border: 1px dashed #ccc;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
}

.image-preview img {
  width: 100%;
  display: none; /* 默認隱藏圖片 */
}

.image-preview .placeholder {
  width: 100%;
  height: 300px;
  font-size: 16px;
  color: #999;
  text-align: center;
  position: absolute;
}

#information .icon-container {
  text-align: center;
  margin-bottom: 20px;
}

#information .icon-container img {
  width: 80px;
  height: auto;
  margin-bottom: 10px;
}

#information .section-title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 30px;
}

#information .course-title {
  text-align: center;
  font-size: 16px;
}

#information .info-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
  color: #ff6600;
}

#information .info-text {
  font-size: 14px;
  color: #333;
}
/* ******************#introduce******************** */
#introduce {
  background-color: white;
  width: 90%;
  border-radius: 15px;
  border: #b6a6ca;
}
#introduce img {
  width: 100%;
}
/* ******************#chapters******************** */
#chapters {
  background-color: white;
  width: 90%;
  border-radius: 15px;
  border: #b6a6ca;
}

#chapters .accordion-button {
  background-color: #ff9f43 !important;
  /* 橙色背景 */
  color: #fff !important;
  /* 白色文字 */
  font-weight: bold;
  border-radius: 5px !important;
}

#chapters .accordion-button:not(.collapsed) {
  box-shadow: none;
}

#chapters .accordion-body {
  font-size: 14px;
  color: #333;
}

/* ******************#faq-section******************** */

#faq-section {
  background-color: white;
  width: 90%;
  border-radius: 15px;
  border: #b6a6ca;
}

/* 問題按鈕樣式 */
.accordion-button {
  background: transparent !important;
  color: #0056b3 !important;
  font-weight: bold;
  border: none;
  text-align: left;
}

.accordion-button:not(.collapsed) {
  background: #e7f1ff !important;
  color: #0056b3 !important;
  box-shadow: none;
}

/* 回答文字樣式 */
.accordion-body {
  font-size: 14px;
  color: #333;
}

/* ******************#teacher******************** */
#teacher {
  background-color: white;
  width: 90%;
  border-radius: 15px;
  border: #b6a6ca;
}

#teacher img {
  border-radius: 15px;
  width: 90%;
}

#teacher h4 {
  color: #2572e4;
}

/* ******************#sing_up******************** */
#sing_up {
  background-color: white;
  width: 90%;
  border-radius: 15px;
  border: #b6a6ca;
}

#sing_up img {
  border-radius: 15px;
  width: 90%;
}

/* 表單樣式 */
#sing_up .form-check-label {
  font-size: 14px;
  color: #333;
}

#sing_up .form-control {
  background-color: #fef5e6; /* 淡橙色背景 */
  border: 1px solid #b6a6ca;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
}

#sing_up .form-control:focus {
  outline: none;
  box-shadow: 0 0 4px #b6a6ca;
  border-color: #b6a6ca;
}

/* 提交按鈕樣式 */
#sing_up .btn-warning {
  background-color: #ff9f43;
  border: none;
  font-size: 16px;
}

#sing_up .btn-warning:hover {
  background-color: #ff7f0e;
}

#sing_up .form-check {
  margin-bottom: 10px;
}

/* ************ 懸浮按鈕******************** */
.floating-btn {
  position: fixed;
  bottom: 20px; /* 距離頁面底部20px */
  right: 20px; /* 距離頁面右邊20px */
  background-color: #007bff; /* 按鈕背景顏色 */
  color: white; /* 按鈕文字顏色 */
  border: none;
  border-radius: 12px; /* 圓角樣式 */
  padding: 10px 20px; /* 內邊距調整 */
  font-size: 16px; /* 文字大小 */
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: all 0.3s;
}

/* 鼠標懸停時改變按鈕樣式 */
.floating-btn:hover {
  background-color: #0056b3;
  transform: scale(1.1);
}