/* 全局樣式 */
body {
  font-family: Arial, sans-serif;
  user-select: none; /* 禁止選取文字 */
  -webkit-user-select: none;
  -ms-user-select: none;
}

html {
  scroll-behavior: smooth; /* 平滑滾動 */
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background-color: rgb(16, 16, 16); /* 同 Home 一樣顏色 */
}

/* 背景影片樣式 */
.background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  z-index: -1;
}

/* 主內容樣式 */
#main-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  color: white;
}

/* 區塊樣式 */
.section {
  width: 100%;
  text-align: center;
  color: white;
  display: flex;
  justify-content: center;
}

/* Home 區塊高度與背景 */
#home {
  position: relative;
  height: 100vh; /* 滿屏高度 */
  background-color: rgb(16, 16, 16);
}

/* Home 標題容器 */
.title-container {
  display: flex;
  width: 100vw;
  align-items: center;
  gap:-10px;
  position: sticky; /* 添加 sticky 定位 */
  top: 0; /* 滾動時保持在頂部 */
  z-index: 10; /* 確保位於其他元素之上 */
  background-color: rgb(16, 16, 16); /* 背景色與頁面一致，避免內容透明 */
  padding: 5px 0; /* 可根據需求添加上下內邊距 */
}

/* Home 主標題樣式 */
.home-title {
  font-family: "Bebas Neue", sans-serif;
  font-weight: 600;
  font-size: 140px;
  transform-origin: top;
  letter-spacing: -4px;
  transform: scaleY(1.3);
  display: inline-block;
}

/* 側邊標題樣式 */
.side-title {
  font-size: 8px;
  text-align: justify;
  transform: rotate(90deg); /* 旋轉 90 度 */
  height: min-content;
  margin-left: -20px;
}

/* Home 按鈕樣式 */
.home-buttons {
  position: absolute;
  bottom: 50px; /* 距離底部 20px */
  left: 80px; /* 距離左邊 20px */
  display: flex;
  flex-direction: column; /* 垂直排列 */
  opacity: 1; /* 默認完全可見 */
  transition: opacity 0.5s ease; /
}

.home-buttons a {
  background-color: transparent; /* 背景透明 */
  color: #ffffff; /* 按鈕文字顏色 */
  width: 200px; /* 固定寬度 */
  text-decoration: none;
  font-size: 20px;
  font-weight: 600;
}

.home-buttons a:hover {
  color: #333333;
  font-weight: 800;
}

/* 不同區塊高度與背景顏色 */
#company {
  height: 200vh;
  background-color: rgba(50, 50, 50, 0.7);
}

#about {
  height: 100vh;
  background-color: rgba(100, 100, 100, 0.5);
}

#photography {
  height: 100vh;
  background-color: rgba(150, 150, 150, 0.5);
}

#client{
  height: 100vh;
  background-color: rgba(130, 130, 130, 0.5);
}
#contact {
  height: 100vh;
  background-color: rgba(200, 200, 200, 0.5);
}

/* Footer 樣式 */
footer {
  text-align: center;
  margin-top: 20px;
  color: white;
  font-size: 16px;
}