html {
    scroll-behavior: smooth;
    scroll-padding: 20vh 0;
    overflow-x: hidden;
}

* {
    margin: 0%;
    padding: 0;
}

a {
    text-decoration: none;
}

@font-face {
    font-family: f1;
    src: url(../font/DFT_R7.TTC);
}

.f1 {
    font-family: f1;
}

@font-face {
    font-family: f2;
    src: url(../font/TaipeiSansTCBeta-Bold.ttf);
}

.f2 {
    font-family: f2;
}

/***************************************************/

.darked .sech2,
.darked .sech1,
.darked .secp,
.darked .nav-link,
.darked .navbar-brand,
.darked .card-text,
.darked .card-title {
    color: #fff !important;
}

.darked .bg {
    background-color: #252525 !important;
}

.darked #sec2,
.darked #sec4,
.darked #sec5 {
    background-image: url(../img/bgl.png);
}

.darked .card {
    background-color: #5d5d5d !important;
}

/***************************************************/

.fwb {
    font-weight: bold;
}

.df {
    display: flex;
}

.jc {
    justify-content: center;
}

.jb {
    justify-content: space-between;
}

.ja {
    justify-content: space-around;
}

.fc {
    flex-direction: column;
}

.color-b {
    color: #1e6091 !important;
    
}

.color-o {
    color: #f4a261 !important;
}

.btn-os {
    background-color: #f59929;
    padding: 8px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 25px;
    width: 150px;
    cursor: pointer;
    transition-duration: .3s;
}

.btn-os:hover {
    background-color: #c17212;
    color: #fff;
}

.icw {
    border: #fff solid 3px;
    border-radius: 100%;
    color: #fff;
    padding: 15px;
    font-size: 1.4rem;
    cursor: pointer;
    transition-duration: .3s;
}

.icw:hover {
    background-color: #fff;
    color: #000;

}

.icc {
    border: #33c1c8 solid 3px;
    border-radius: 100%;
    color: #33c1c8;
    padding: 15px;
    font-size: 1.4rem;
    cursor: pointer;
    transition-duration: .3s;
}

.icc:hover {
    background-color: #33c1c8;
    color: #fff;

}

.btn-wk {
    border: #fff solid 3px;
    padding: 8px;
    color: #fff;
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 15px;
    width: 200px;
    cursor: pointer;
    transition-duration: .3s;
}

.btn-wk:hover {
    background-color: #fff;
    color: #000;
}


.btn-bk {
    border: #33c1c8 solid 3px;
    padding: 8px;
    color: #33c1c8;
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 15px;
    width: 200px;
    cursor: pointer;
    transition-duration: .3s;
}

.btn-bk:hover {
    background-color: #33c1c8;
    color: #fff;
}

.btn-ok {
    border: #f59929 solid 3px;
    padding: 8px;
    color: #f59929;
    font-size: 1.4rem;
    font-weight: bold;
    border-radius: 15px;
    width: 200px;
    cursor: pointer;
    transition-duration: .3s;
}

.btn-ok:hover {
    background-color: #f59929;
    color: #fff;
}


.system-requirement {
    font-size: clamp(1rem, 3.5vw, 2rem); /* 在不同裝置上適應 */
    color: #fff; /* 白色字體，與標題一致 */

}



/***************************************************/

nav {
   background-color: rgba(0, 0, 0, 0.842); /* 黑色半透明背景 */
    backdrop-filter: blur(5px); /* 增加模糊效果 */
    transition: background-color 0.3s ease;
    transition-duration: .3s;
}

.nav-link {
    font-size: 1.3rem;
    font-weight: bold;
}

.navbar-brand {
    font-size: 2rem;
    font-family: f2;
}

.scrolled {
    margin: 1%;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.641);
    border-radius: 20px;
}

.bg {
    background-color: #fff;
    transition-duration: .7s;
}

/***************************************************/

#sec1 {
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.carousel-inner {
    transform: scale(1.01);
}

.slide1 {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-image: url(../img/slide4.jpg);
}

.slide2 {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-image: url(../img/slide5.jpg);
}

.slide3 {
    height: 100vh;
    width: 100%;
    background-size: cover;
    background-image: url(../img/slide6.jpg);
}

.secbg {
    background-color: #00000040;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    z-index: 1;
}

.sec1h0 {
    font-size: 2vw;
    color: #f59929;
    font-family: f2;
    letter-spacing: 5px;

}

.sec1h1 {
    font-size: 7vw;
    color: #fff;
    font-family: f2;
}

.linetop {
    border-top: #fff 3px solid;
    width: 40%;
}

.sec1p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: #ffffff; /* 白色文字 */
    background: rgba(0, 0, 0, 0.5); /* 黑色半透明背景 */
    padding: 10px 15px; /* 增加內邊距，讓背景色有間距 */
    border-radius: 8px; /* 圓角設計 */
    display: inline-block; /* 讓背景剛好包住文字 */
    text-align: left;
}

.sec1box {
    position: relative;
    bottom: -5%;
}

.imgbox {
    width: 35vw;
}

.imgbox .item {
    width: 11vw;
    height: 11vh;
    border-radius: 20px;
    background-size: cover;
    cursor: pointer;
    transition-duration: .3s;
}

.imgbox .item:hover {
    transform: scale(.9);
}

#i1 {
    background-image: url(../img/test_img04.jpg);
}

#i2 {
    background-image: url(../img/test_img26.jpg);
}

#i3 {
    background-image: url(../img/test_img30.jpg);
}

/***************************************************/

#sec2,
#sec4,
#sec5 {
    background-image: url(../img/bg.png);
    transition-duration: .7s;
}

.sec2img {
    height: 40vh;
    width: 97%;
    overflow: hidden;
    border-radius: 20px;
}

.sec2img img {
    width: 850px;
    transition-duration: 1.2s;
}

.sec2img:hover img {
    transform: scale(1.1);
}


.sech0 {
    font-size: 1.2vw;
    color: #f59929;
    letter-spacing: 5px;
    font-weight: bold;
    transition-duration: .3s;
}

.sech1 {
    font-size: 3.8vw;
    color: rgb(95, 95, 95);
    letter-spacing: 5px;
    font-family: f2;
    transition-duration: .3s;
}

.lineright {
    border-right: 2px rgb(61, 61, 61) solid;
}

.secp {
    font-size: 1.45rem;
    line-height: 1.8;
    color: #DCE1E6; /* 清晰的灰白 */
    width: 90%;
    transition-duration: .3s;
}

/***************************************************/

#sec3 {
    background-image: url(../img/s3-1.png);
    background-attachment: fixed;
    width: 100%;
    background-size: cover;
}

.sec3bg {
    background-color: #1e6091;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;

}

.sec3h1 {
    font-size: 3.2vw;
    color: #FFFFFF; /* 純白，提升可讀性 */
    font-family: f2;
}

#sec3 .row {
    margin: 5% 0 2% 0;
}

.sec3h2 {
    font-size: 4vh;
    color: #FFD700; /* 高級金黃，讓運動名稱更明顯 */
    font-family: f2;
}


#sec3 i {
    font-size: 3.5vh;
    color: #fff;
    font-weight: bold;
    transition-duration: .3s;
}

.sec3h3 {
    font-size: 4vh;
    color: #A0AAB2; /* 專業感灰 */
    font-weight: bold;
}

.sec3box {
    width: 80%;
}

#sec3 .lineleft {
    border-left: #fff solid 2px;
}

#sec3 .col-lg-4:hover i {
    transform: rotate(-25deg);
}

/***************************************************/

#sec4 .linetop {
    border-top: #000 2px solid;
    border-bottom: #000 2px solid;
}

.td {
    background-image: linear-gradient(to bottom, transparent 40%, #33c0c836 40%);
}

.sech2 {
    color: #000;
}

.card {
    border-radius: 20px;
    transition-duration: .7s;
}

.card-img-top {
    border-radius: 10px;
}

.card-title,
.modal-title {
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    transition-duration: .3s;
}

.card-text,
.modal-text {
    font-size: 1.3rem;
    line-height: 1.8;
    text-align: start;
    transition-duration: .3s;
}


.liked {
    background-color: #ff5f5f !important;
    color: #fff !important;
    border: #ff5f5f 3px solid !important;
    transition-duration: .3s;
}

.shared {
    background-color: #f6ba71 !important;
    color: #fff;
    border: #f6ba71 3px solid !important;
    transition-duration: .3s;
    cursor: not-allowed;
}

/***************************************************/

.sec5bg {
    height: 60%;
    width: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
    background-image: url(../img/card1.png);
    background-size: cover;
    opacity: .3;
}

#sec5 .card-img-top {
    border-radius: 20px 20px 0 0;
}

#sec5 .active {
    transform: scale(.8);
    transition-duration: .3s;
}

#sec5 .center {
    opacity: 1;
    transform: scale(.8);
    transition-duration: .3s;
}


/***************************************************/

#sec6 {
    height: 70vh;
    background-size: cover;
    background-image: url(../img/sec6.jpg);
    background-attachment: fixed;
    width: 100%;
}



#sec6 .secbg {
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
}

.sec6h1 {
    text-align: center;
    font-size: 7vh;
    font-family: f2;
    color: #fff;
    margin-top: -170px; /* 調整負值讓標題往上 */
}


.sec6h2 {
    text-align: center;
    font-size: 2vh;
    font-weight: bold;
    letter-spacing: 5px;
    color: #fff;
}

.emailbox {
    display: flex;
    justify-content: center;
    position: relative;
}

.emailbox i {
    font-size: 2.4rem;
    color: #fff;
    position: absolute;
    top: 10%;
    left: 28%;
}

.emailbox input {
    width: 45%;
    outline: none;
    border: none;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 20px;
    font-size: 1.1rem;
    color: #fff;
    height: 50px;
    padding: 0 3.5%;
}

.emailbox .btn {
    color: #fff;
    position: absolute;
    right: 27%;
    transform: scale(.8);
}

.gh {
    font-size: 2.4vh;
    color: #fff;
    font-weight: bold;
    text-align: center;
}

.gp {
    font-size: 1.2vh;
    color: #fff;
    text-align: center;
}


.glass {
    display: flex;
    justify-content: center;
    flex-direction: column;
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 10vh;
    backdrop-filter: blur(15px);
}

footer {
    background-color: #1a7579;
    color: #fff;
    font-size: 1.1rem;
    text-align: center;
}

/***************************************************/
.modal input {
    border: none;
    outline: none;
    border-bottom: rgb(84, 84, 84) 1px solid;
    height: 50px;
    font-size: 1.1rem;
    width: 100%;
}

.classbox {
    display: flex;
    justify-content: space-between;
}

.mycomment {
    padding: 3%;
    background-color: rgb(232, 232, 232);
    border-radius: 20px;
    overflow-y: scroll;
    height: 250px;

}

.classbox h5 {
    margin-bottom: 15px;
}


.starbox {
    color: #f59929;
}
/***************************************************/


.ibox {
    display: flex;
    flex-direction: column;
    position: fixed;
    right: 3%;
    bottom: 3%;
    z-index: 99;
}

.ibox i {
    padding: 15px;
    background-color: #33c1c8;
    color: #fff;
    font-size: 2.2rem;
    cursor: pointer;
    transition-duration: .3s;
    margin-bottom: 15px;
    border-radius: 100%;
}

.ibox i:hover {
    background-color: #1a7579;
    color: #fff;
}

.ibox .fa-mobile {
    padding: 15px 20px;
}

/***************************************/

.toast {
    position: fixed;
    right: 6.5%;
    bottom: 3%;
    width: 280px;
    z-index: 99;
}

.toast-body {
    height: 250px;
    display: flex;
    flex-direction: column;
    overflow-y: scroll;
}

.qbox {
    background-color: rgb(232, 232, 232);
    border-radius: 20px 20px 20px 0;
    font-size: 1.1rem;
    max-width: 80%;
    padding: 3.5%;
    margin-bottom: 15px;
}

.qbox a {
    transform: scale(.85);
}

.abox {
    background-color: #1a7579;
    color: #fff;
    border-radius: 20px 20px 0 20px;
    font-size: 1.1rem;
    max-width: 80%;
    padding: 3.5%;
    margin-bottom: 15px;
    align-self: flex-end;
}

@media (max-width:1920px) {
    .secp{
        font-size: 1.2rem;
    }
    .card-text{
        font-size: 1.1rem;
    }
    .card-title{
        font-size: 1.5rem;
    }
    .sec2img img{
        width: 650px;
    }
}

@media (max-width:992px) {
    .sec1h0{
        font-size: 2rem;
    }
    .sec1h1{
        font-size: 5rem;
    }
    .sec1p{
        font-size: 1rem;
    }

    .imgbox{
        display: none;
    }
    
    .sech0{
        font-size: 1.5rem;
    }

    .sech1{
        font-size: 3rem;
    }

    .lineleft {
        border-left: none ;
    }

    #sec3 .lineleft {
        border-left: none ;
        
    }

    .sec3h1 {
        font-size: 3rem;
    }
    footer{
        font-size: 1rem;
    }

    .emailbox input{
        width: 100%;
        
    }
    .emailbox i{
       left: 1.5%;
    }

    .emailbox .btn-os{
        right: 1.5%;
    }

    #sec3 .col-lg-4{
        margin: 3% 0;
    }

}

.calendar-container{
    border: 2px solid #1e6091;
}

/* 內容文字 - 修復黑色文字問題 */
.sec3p {
    font-size: 1.3rem;
    line-height: 1.8;
    color: #EAEAEA; /* 亮灰白，讓文字更清楚 */
    width: 90%;
    transition-duration: .3s;
}

/* 調整圖示顏色，提高對比 */
.fa-redo, .fa-hand-paper, .fa-walking {
    color: #4A90E2; /* 低飽和度專業藍 */
}

.secp-dark {
    color: #222222; /* 更深的黑灰色 */
}

.slide1 {
    position: relative;
    background: url('../img/slide4.jpg') center/cover no-repeat;
}


.carousel-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 60%; /* 仍然覆蓋 60% 左邊 */
    height: 100%;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.85) 15%, rgba(0, 0, 0, 0.6) 40%, rgba(0, 0, 0, 0.3) 70%, transparent 100%);
    z-index: 2; /* 確保遮罩在圖片上層 */
}


/* ========== 卡片區塊背景顏色 ========== */
.card.neck-exercise {
    background-color: #E3F2FD; /* 天空藍 - 頭頸運動 */
}

.card.finger-exercise {
    background-color: #F5F5F5; /* 銀灰色 - 手指運動 */
}

.card.squat-exercise {
    background-color: #E8F5E9; /* 薄荷綠 - 深蹲運動 */
}

/* ========== 卡片通用樣式 ========== */
.card {
    border-radius: 15px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out;
}

.card:hover {
    transform: translateY(-5px);
}

/* ========== 修正影片顯示問題 ========== */
.card video {
    border-radius: 10px;
    width: 100%;         /* 影片寬度填滿卡片 */
    height: auto;        /* 讓影片根據原始比例自適應 */
    min-height: 300px;   /* 確保影片不會太小 */
    max-height: none;    /* 取消高度上限，避免被限制 */
    object-fit: contain; /* 讓影片完整顯示，不會被裁切 */
}
/* ========== 按鈕與圖示 ========== */
.df {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.icc {
    border: #1e6091 solid 2px;
    border-radius: 50%;
    color: #1e6091;
    padding: 12px;
    font-size: 1.4rem;
    cursor: pointer;
    transition-duration: .3s;
}

.icc:hover {
    background-color: #1e6091;
    color: #fff;
}

/* ✅ 按鈕圖示變更 ✅ */
.fa-check-circle {
    color: #1e6091; /* 成功狀態 */
}

.fa-info-circle {
    color: #1e6091; /* 更多資訊 */
}

/* ========== 響應式調整（針對手機和平板） ========== */
@media (max-width: 992px) {
    .card video {
        min-height: 280px; /* 適當縮小 */
    }
}

@media (max-width: 768px) {
    .card video {
        min-height: 250px; /* 在手機上自適應 */
    }
}


.sec4-header {
    background: linear-gradient(to right, rgba(30, 96, 145, 0.9), rgba(30, 96, 145, 0.6)); /* 加深漸層背景 */
    padding: 25px 40px; /* 增加內邊距，讓標題更突出 */
    border-radius: 15px; /* 加強圓角，使區塊更有層次感 */
    text-align: center;
    color: #fff; /* 白色文字，確保對比清晰 */
    margin-bottom: 50px; /* 增加與下方影片區塊的間距 */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* 加陰影，提升層次感 */
}

.neck-exercise .card-img-top {
    margin-top: -50px;
}

.finger-exercise .card-img-top {
    margin-top: -50px;
}

.squat-exercise .card-img-top {
    margin-top: -50px;
}

/* 滾動到這個區塊時，自動調整與選單的距離 */
#sec4,#sec5 {
    scroll-margin-top: -120px; /* 根據 navbar 的高度調整 */
}


#sec2,#sec3 {
    scroll-margin-top: -100px; /* 根據 navbar 的高度調整 */
}

/* 修改sec5頁面 */
/*  AI 智能姿勢體驗 - 背景優化 */
#sec5 {
    position: relative;
    background: linear-gradient(to bottom, rgba(30, 96, 145, 0.7), rgba(30, 96, 145, 0.5)), 
                url(../img/bg.png) center/cover no-repeat;
}

/*  AI 體驗區塊標題 - 調整字體與間距  */
#sec5 .sech1 {
    font-size: 4.5vw; /* 增加標題大小 */
    color: #fff; /* 白色，讓標題更突出 */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6); /* 添加陰影，提高對比 */
    font-weight: bold;
    text-align: center;
    letter-spacing: 3px;
}

#sec5 .system-requirement {
    font-size: 2.3vw; /* 增加標題大小 */
    color: #fff; /* 白色，讓標題更突出 */
    text-shadow: 2px 2px 15px rgba(0, 0, 0, 0.6); /* 添加陰影，提高對比 */
    font-weight: bold;
    text-align: center;
    letter-spacing: 3px;
}


/*卡片區塊 - 讓體驗卡片更聚焦  */
.exercise-card {
    background-color: rgba(255, 255, 255, 0.95); /* 白色略帶透明感 */
    border-radius: 15px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.15); /* 增加陰影提升層次感 */
    transition: all 0.3s ease-in-out;
}

.exercise-card:hover {
    transform: scale(1.05); /* 提高交互感 */
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.25);
}


/* 卡片標題調整  */
.exercise-card .card-title {
    font-size: 3rem;
    font-weight: bold;
    text-align: center;
    color: #1e6091; /* 科技感藍色 */
}

/* 卡片文字內容縮短 */
.exercise-card .card-text {
    font-size: 1.2rem;
    line-height: 1.6;
    text-align: center;
    max-height: 3.2em; /* 限制高度，防止超過兩行 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*  免費體驗標籤 */
.text-success {
    font-size: 1.6rem;
    font-weight: bold;
    color: #27AE60; /* 深綠色，象徵健康與免費 */
    text-align: center;
}

/*  按鈕樣式  */
.exercise-card .btn-bk {
    background: #1e6091;
    color: white;
    font-weight: bold;
    font-size: 1.3rem;
    padding: 10px;
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
    width: 100%;
    text-align: center;
}


.exercise-card .card-body {
    padding: 20px 25px; /* 增加內邊距，讓內容更有層次 */
}

.exercise-card .btn-bk:hover {
    background: #144f75;
}

/*  調整影片區塊 */
.exercise-card video {
    border-radius: 10px;
    width: 100%;
    height: auto;
    min-height: 250px;
    object-fit: contain; /* 讓影片完整顯示 */
}

/* 讓卡片間隔更均勻  */
.owl2 .item {
    margin: 15px;
}

/* 響應式調整 */
@media (max-width: 992px) {
    #sec5 .sech1 {
        font-size: 3vw; /* 適應小螢幕 */
    }

    .exercise-card {
        box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15);
    }
}

@media (max-width: 768px) {
    .exercise-card {
        width: 100%;
        min-height: 350px;
    }

    .exercise-card .card-title {
        font-size: 1.6rem;
    }
}

.owl2 .item {
    margin: 20px;
}


/* 修正圖表 */
canvas {
    height: 300px !important; /* 統一高度 */
    width: 100% !important;
}
.exercise-card {
    min-height: 450px; /* 統一卡片高度 */
}