body {
  margin: 0;
  font-family: sans-serif;
}

header, section {
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
}

/* Add media queries to adjust background image size on different screen sizes */

/* 導航欄樣式 */
#main-nav {
  position: fixed; /* 固定位置 */
  top: 20px; /* 調整上方距離 */
  right: 20px; /* 調整右方距離 */
  background-color: rgba(86, 16, 218, 0.3); /* 設定背景顏色和透明度 */
  padding: 10px;
  border-radius: 5px;
  z-index: 100; /* 確保導航欄在其他元素上方 */
}

#main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex; /* 橫向排列 */
}

#main-nav li {
  margin-left: 20px; /* 調整項目間距 */
}

#main-nav a {
  color: white;
  text-decoration: none;
}

.parallax {
          position: relative;
          width: 100%;
          height: 100vh;
          background-size: cover;
          background-position: center;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden; /* 防止內容超出視窗 */
}
.parallax-content {
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 1; /* 確保內容在背景圖片上方 */
}

/* 設定每個區塊的背景圖片 */
#home {
      background-size: 100% auto;
      background-position: center;
      background-repeat: no-repeat;

      background-image: url("../images/home/ym-01.jpg"); /* 替換成你的圖片 */
}
#about {
    height: 80% auto;
    color: #666; /* or any other gray color code you prefer */
}

#services_img {
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("../images/home/service.jpg"); /* 替換成你的圖片 */

}

#products_img {
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
  background-image: url("../images/home/product.jpg"); /* 替換成你的圖片 */

}
#contact_img {
  /*background-size: 100% auto;  */
  background-position: center;
  background-repeat: no-repeat;
  background-image: url("../images/home/contact.jpg"); /* 替換成你的圖片 */

}
/* ... 其他區塊的背景圖片 */




.gallery {
    max-width: 100vw;
    margin: 20px auto;
    text-align: center; /* 讓資料夾區塊置中 */
}

.folder {
    margin-bottom: 30px;
    width: 100%;
    margin-bottom: 40px; /* 增加區塊之間的間距 */
    padding: 20px 0;
}

.folder-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #333; /* 主資料夾標題顏色較深 */
    text-align: center;
}

.sub-folder {
    
    margin-top: 20px;

}

.sub-folder .folder-title {
    font-size: 20px; /* 字體變小 */
    color: #777; /* 顏色變淺 */
    font-weight: normal;
}

.sub-folders {
    margin-top: 20px;
}

.images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    max-width: 80%;
    min-width: 400px;
    margin: 0 auto;
    padding: 10px 0;
}

.grid-sizer,


.images img {
    width: 180px;
    height: 240px;
    margin: 10px;
    object-fit: contain;
    cursor: pointer;
    display: block;
}

.images a {
    display: inline-block;
}

/* 響應式設計 */
@media (width < 500px) {

  #home{
      display:none;
  } 
  #about{
    top:80px;
    height: 100vh;
  }


  .images img {
    width: 120px;
    height: 260px;
    margin: 5px;

}
  
  .w3-col.m4, .w3-col.m8 {
    width: 100%;
    margin-bottom: 20px;
  }

  .w3-xlarge {
    font-size: 1.5em;
  }

  .w3-left {
    text-align: center;
  }



  .parallax {
    height: auto;
    padding: 20px 0;
  }

  #home .w3-display-topleft {
    position: static;
    margin: 0;
  }

  #about .w3-display-middle {
    position: static;
    margin: 0;
  }

  #services .w3-row {
    flex-direction: column;
    align-items: center;
  }

  #services .w3-col.m4, #services .w3-col.m8 {
    width: 100%;
    text-align: center;
  }

  #services .w3-col.m4 img {
    margin: 0 auto;
  }
  .container {
    width: 100%;
  }
}
/* container */


.container {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}



.error-message {
  color: red;
  display: none;
}
.success-message {
  color: green;
  display: none;
}