html {
    font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

body {
    font-family: 'Noto Sans TC',sans-serif;
    overflow-x: hidden;
}

/*960寬的容器*/
.container-960 {
    width: 100%;
    padding-right: var(--bs-gutter-x, .75rem); /* 1.5rem 總 gutter */
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto; /* 水平置中 */
    margin-left: auto; /* 水平置中 */
    max-width: 960px;
}

.w-960 {
    padding-right: var(--bs-gutter-x, .75rem); /* 1.5rem 總 gutter */
    padding-left: var(--bs-gutter-x, .75rem);
    margin-right: auto; /* 水平置中 */
    margin-left: auto; /* 水平置中 */
    max-width: 960px;
}

[data-scroll-section] {
    scroll-margin-top: 80px;
}

/*===============Layout區段S===============*/

/*最上方的橘線*/
.top-bar{
    height: 4px;
    width: 100%;
    background-color: #FF4500;
}

.contect-btn {
    background-color: #FF4500;
    color: #FFF;
    letter-spacing: 2px !important; 
}

/*透明 Header 捲動動畫*/
/*初始狀態 (在頂部)*/
#sticky-header-wrapper {
    background-color: rgba(255, 255, 255, 0); /* 透明白 */
    box-shadow: none;
    position: sticky;
    top: 0;
    z-index: 1030;
    transition: background-color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

#sticky-header-wrapper .top-bar {
    background-color: rgba(233, 84, 32, 0); /* 透明橘 */
    transition: background-color 0.2s ease-in-out; 
}

#sticky-header-wrapper .navbar {
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: 1px solid transparent !important;
    transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
    padding-top: 5px !important;
    padding-bottom: 5px !important
}

#sticky-header-wrapper .contact-btn {
    border: 1px solid #ffffff !important;
    background-color: #FF4500;
    color: #FFFFFF;
    letter-spacing: 2px !important; 
    transition: all 0.4s ease-in-out;
}
/*捲動狀態*/
#sticky-header-wrapper.header-scrolled {
    background-color: #ffffff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
}

#sticky-header-wrapper.header-scrolled .top-bar {
    background-color: #FF4500 !important;
}

#sticky-header-wrapper.header-scrolled .navbar {
    background-color: #ffffff !important;
    border-color: #dee2e6 !important;
}

/*    #sticky-header-wrapper.header-scrolled .nav-link,
    #sticky-header-wrapper.header-scrolled .navbar-brand {
        color: #FF4500 !important;
        text-shadow: none;
    }*/

#sticky-header-wrapper.header-scrolled .contact-btn {
    background-color: #FF4500 !important;
    border-color: #FF4500 !important;
    color: #ffffff !important;
}

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

a {
    color: #0077cc;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
}

/*===============Layout區段E===============*/

/*===============Index區段S===============*/

/*HERO區段*/

.hero-section-split {
    background-image: url('../img/bg-2-1.webp');
    /* 讓背景圖填滿整個區塊，且不變形 */
    background-size: cover; /* 填滿 */
    background-position: center; /* 置中 */
    color: #333;
    display: flex;
    align-items: center;
    padding: 2rem 0;
    position: relative;
}

.hero-section-split .btn-light {
    color: #E95420;
    font-weight: bold;
}

.hero-title {
    font-family: 'Noto Serif TC',sans-serif;
    font-weight: 800;
}

.btn-hero-contact:hover{
    color:#FF4500;
}

/*箭頭樣式*/
.scroll-down-arrow {
    position: absolute; /* 絕對定位 (相對於 .hero-section-split) */
    bottom: 2rem; /* 離 Hero 底部 2rem (約 32px) */
    left: 50%; /* 水平 50% */
    transform: translateX(-50%); /* 往左移 50% (精確置中) */
    z-index: 10; /* 確保它在 Hero 圖片 "之上" */
    color: #ffffff; /* 箭頭顏色 (白色) */
    font-size: 2rem; /* 箭頭圖示的大小 */
    opacity: 0.7; /* 70% 透明度 */
    animation: bounce-arrow 2s infinite;
}

.scroll-down-arrow:hover {
    opacity: 1.0; /* 滑鼠懸停時 100% 顯示 */
    color: #ffffff; /* 確保顏色不變 */
}

/*定義"bounce-arow"動畫*/
@keyframes bounce-arrow {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px); /* 往上彈 10px */
    }

    60% {
        transform: translateX(-50%) translateY(-5px); /* 往上彈 5px (第二下) */
    }
}

.section-title {
    font-family: 'Noto Serif TC',sans-serif;
    font-weight: 800;
    font-size: 2rem;
}

.section-subtitle {
    /*每一個大標題下面的說明文字*/
    color: #FF4500;
}

.card {
    transition: border-color 0.2s ease-in-out;
}

    .card:hover {
        border-color: #FF4500;
    }

.feature-img {
    max-height: 400px;
}

/*控制非桌面板動畫不需延遲*/
@media (max-width:991.98px) {

    [data-aos] {
        transition-delay: 0s !important;
    }

    [data-aos^="fade"][data-aos] {
        animation: 0s !important;
    }
}

/* CSS 非對稱圓弧背景 (Wavy Background)左到右*/
.wavy-bg-left {
    position: relative;
    isolation: isolate;
}
    .wavy-bg-left::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%; /* 高度 100% (填滿父層 section) */
        width: 85%;/*寬度*/
        background-image: linear-gradient(to right, transparent, #FFE4C4);
        border-top-right-radius: 999em; /* 右上圓角 */
        border-bottom-right-radius: 999em; /* 右下圓角 */
        z-index: -1;
    }

/* 控制手機顯示寬度與圓角 */
@media (max-width: 767.98px) {
    .wavy-bg-left::before {
        width: 96%;
        border-top-right-radius: 100px;
        border-bottom-right-radius: 100px;
    }
}

/* CSS 非對稱圓弧背景 (Wavy Background)右到左*/
.wavy-bg-right {
    position: relative;
    isolation: isolate;
}

    .wavy-bg-right::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        height: 100%; 
        width: 85%;
        background-image: linear-gradient(to left, transparent, #FFE4C4);
        border-top-left-radius: 999em; /* 右上圓角 */
        border-bottom-left-radius: 999em; /* 右下圓角*/
        z-index: -1;
    }

/*控制手機顯示寬度與圓角*/
@media (max-width: 767.98px) {
    .wavy-bg-right::before {
        width: 96%;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
    }
}

/*===============Index區段E===============*/

/*===============表單區段S===============*/
.btn-submit{
    background-color:#FF4500;
    color:#FFF;
}
    .btn-submit:hover{
        color:#FFF;
    }
/*===============表單區段E===============*/