* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.body {
    font-family: Arial, sans-serif;
}

.navbar {
    padding: 30px;
    margin-bottom: 60px;
    background: #FFFFFF; /* 白色底 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 底部陰影 */
}


.nav-link {
    position: relative; /* For positioning the underline */
}

.nav-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px; /* Positioning of the underline */
    height: 2px; /* Thickness of the underline */
    background-color: #FDC435; /* Underline color */
    transform: scaleX(0); /* Initial state hidden */
    transition: transform 0.3s ease; /* Smooth transition */
}

.nav-link:hover::after,
.nav-link:focus::after {
    transform: scaleX(1); /* Show underline on hover/focus */
}

/*標題*/
.title-style {
    display: inline-block; /* 使底線根據文字寬度自動調整 */
    border-bottom: 4px solid #FDC435; /* 底線的厚度和顏色 */
    padding-bottom: 5px; /* 給底線一點間距 */
    }

/*內容文字*/
    .custom-text p {
        font-size: 2.5rem; /* 調整文字大小 */
    }
    
    .custom-image {
        max-width: 50%; /* 控制圖片的最大寬度 */
        height: auto; /* 使高度自動調整以保持比例 */
    }

    .object-cover {
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .shadow-effect {
        border: 1px solid rgba(0, 0, 0, 0.1); /* 可選：邊框顏色 */
        border-radius: 8px; /* 調整圓角半徑 */
        background: rgba(255, 255, 255, 0.8); /* 白色背景與透明度 */
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); /* 柔霧陰影效果 */
        padding: 16px; /* 增加內邊距 */
        transition: box-shadow 0.3s; /* 增加過渡效果 */
    }
    
    .shadow-effect:hover {
        box-shadow: 0 6px 30px rgba(0, 0, 0, 0.2); /* 鼠標懸停時加深陰影 */
    }
    
    .custom-button {
        background-color: white;  /* 白色背景 */
        color: black;             /* 黑色文字 */
        border: 2px solid black;  /* 黑色邊框 */
        padding: 10px 20px;       /* 按鈕內邊距 */
        border-radius: 4px;       /* 邊框圓角 */
        text-decoration: none;     /* 移除下劃線 */
        transition: background-color 0.3s, color 0.3s; /* 過渡效果 */
    }
    
    .custom-button {
        background-color: white;  /* 白色背景 */
        color: black;             /* 黑色文字 */
        border: 2px solid black;  /* 黑色邊框 */
        padding: 10px 20px;       /* 按鈕內邊距 */
        border-radius: 50px;      /* 橢圓形邊框圓角 */
        text-decoration: none;     /* 移除下劃線 */
        transition: background-color 0.3s, color 0.3s; /* 過渡效果 */
    }
    
    .custom-button:hover {
        background-color: black;   /* 滑鼠懸停時的背景色 */
        color: white;              /* 滑鼠懸停時的文字顏色 */
    }

    .thumbnail {
        width: 100%; /* 設置縮圖寬度為100% */
        max-width: 600px; /* 最大寬度 */
        border-radius: 8px; /* 圓角 */
        cursor: pointer; /* 游標變為手型 */
    }    

    /* 影片RWD尺寸 */
    
/* 影片容器：響應式設計 */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9比例 */
    height: 0;
    overflow: hidden;
    max-width: 880px; /* 設定桌面版的最大寬度 */
    margin: 0 auto; /* 置中顯示 */
    background-color: #000;
}

/* 影片框架：自適應內容 */

.video-container {
    position: relative;
    width: 800px;  /* 固定桌面版寬度 */
    height: 550px; /* 固定桌面版高度 */
    margin: 0 auto; /* 影片置中 */
    overflow: hidden;
    background-color: #000;
}

/* 影片框架 */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* 小螢幕響應式調整 */
@media (max-width: 768px) {
    .video-container {
        width: 100%; /* 小螢幕填滿可用寬度 */
        height: auto; /* 自動調整高度 */
        aspect-ratio: 16 / 9; /* 保持影片比例 */
    }

    .video-container iframe {
        width: 100%;
        height: 100%;
    }
}

    
    
/* 加入的字體大小和懸停效果 */
.navbar-nav .nav-link {
    font-size: 1.2rem; /* 調整字體大小，可以根據需要更改數值 */
    padding: 10px 15px; /* 可選：增加內邊距，讓點擊區域更大 */
    transition: color 0.3s ease; /* 可選：添加過渡效果 */
}

.intro-section {
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 5px; /* Optional: Adds rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
}

/* 手機版 Offcanvas 內邊距設定 */
@media (max-width: 768px) {
    .offcanvas-body {
        padding: 30px; /* 設定 Offcanvas 的內邊距為 30px */
    }

    .navbar {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 網頁版 */
@media (min-width: 769px) {
    .navbar {
        flex-direction: row; /* 網頁版為橫向排列 */
        justify-content: flex-end; /* 使導航項目靠右排列 */
    }
}

.footer {
    background-color: #F9FAFF;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); /* 將陰影放在上方 */
    padding: 20px;
    text-align: center;
}

.social-links a {
    margin: 0 10px;
    text-decoration: none;
    color: #333;
}

/* 可選：為鏈接添加懸停效果 */
.social-links a:hover {
    text-decoration: underline; /* 在懸停時添加下劃線 */
}
#myBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 20px; /* Place the button at the bottom of the page */
    right: 30px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    border: none; /* Remove borders */
    outline: none; /* Remove outline */
    background-color: #FDC435; /* Set a background color */
    color: white; /* Text color */
    cursor: pointer; /* Add a mouse pointer on hover */
    padding: 15px; /* Some padding */
    border-radius: 50px; /* Rounded corners */
    font-size: 18px; /* Increase font size */
  }
  
  #myBtn:hover {
    background-color: #333333; /* Add a dark-grey background on hover */
  }