*{
    position: relative;
    scroll-behavior: smooth;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

    .title{
        font-size: 6vh;
        font-weight: bolder;
    }

    .subtitle{
        font-size: 2vh;
        font-weight: bolder;
        color: #0008;
    }

    @media (max-width:1024px) {
        .title{
            font-size: 5vh;
        }
        .subtitle{
            font-size: 1.5vh;
        }
    }

    @media (max-width:768px) {
        .title{
            font-size: 4vh;
        }
        .subtitle{
            font-size: 1.5vh;
        }
    }
}

body{
    background: linear-gradient(180deg, #dbe6f6 0%, #ffffff 100%);
}

nav{
    
    .nav-link{
        color: #1f2d40 !important; 
        font-weight: bolder;
    }

    .nav-link:hover{
        color: #0b408e !important;
    }

    .more-information{
        display: flex;
        flex-direction: direction;
        justify-content: center;
        align-items: center;
        padding: 10px 18px;
        box-shadow: 0 6px 18px rgba(23,107,155,0.18);
        font-weight: 600;   
        background-color: #0b408e;
    }

    .navbar-nav{
        padding-right: calc(280px - 130px);

    }
    .navbar-nav:hover{
        color: #0b408e !important;
    }

    @media (max-width: 1024px) {

        .navbar-nav{
            padding: 8px 18px;
        }
    }

    @media (max-width : 768px) {

        .more-information{
            display: none;
            box-shadow: 0 4px 16px rgba(23,107,155,0.18);
        }
    }


}

#home{

    height: 100vh;
    padding-top: 15vh;

    .main-heading{
        font-size: 10vh;
        font-weight: bolder;
        margin-bottom:10vh;
    }

    .container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .background-box{
        display:block;
        background-color: #1f4f86;
        height: 50vh;
        width: 100%;
        border-radius: 16px;
    }

    img{
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
        width: 70%;
        border: solid 1rem #000;
        border-radius: 16px;
    }

    @media (max-width: 1024px) {

        max-height: 50vh;
        padding-top: 12vh;

        .main-heading{
            font-size: 6vh;
        }

        .background-box{

            height: 20vh;
            margin-top: 5vh;
            border-radius: 16px;
        }
    }

    @media (max-width : 768px) {

        max-height: 50vh;

        .main-heading{
            font-size: 4vh;
        }

        .background-box{
            display: none;
        }

        img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, 50%);
            width: 70%;
            border: solid 1rem #000;
            border-radius: 16px;
        }
    }
}

#features{

    
    padding-top: 15vh;

    .title,.subtitle, .features-title, .features-content,.col-3{
        text-align: center;
    }

    .col-lg-3{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
    }

    .features-title{
        font-size: 1.333rem;
        font-weight: bolder;
    }

    .features-content{
        color: #0008;
    }

    hr{
        margin: 3rem;
    }

    i{
        font-size: 3rem;
    }

    .features-item{
        margin: 0;
    }

    @media (max-width:768px) {

        padding-top: 5vh;

        .features-item{
            margin-bottom: 2rem;
        }
    }
}

#news{

    padding-top: 15vh;

    .title,.subtitle{
        text-align: right;
    }

    .news-list{
        margin-top: 3rem;
        padding: 0;
    }

    .news-title{
        display: -webkit-box;  
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 1;   
        line-clamp: 1;  
        overflow: hidden;    
        font-size: 1.2rem;
        font-weight: bolder;     

        line-height: 1.5rem;
        height: 1.5rem;
    }

    .news-img{
        height: 25vh;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    @media (max-width: 1024px) {

        padding-top: 8vh;

        .news-img{
            height: 15vh;
            background-size: cover;
            background-repeat: no-repeat;
        }

    }

    @media (max-width : 768px) {

        padding-top: 5vh;

        .title,.subtitle{
            text-align: center;
        }

        .news-list{
            padding: 0 2rem;
        }

        .news-img{
            height: 26vh;
            background-size: cover;
            background-repeat: no-repeat;
        }
    }

}

#courses{

    padding-top: 15vh;

    .courses-list{
        margin-top: 3rem;
        min-height: 30vh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        padding: 0;
    }
    

    .courses-title{
        cursor: pointer;
        color: #1f2d40;
        text-decoration: none;
    }

    .courses-title:hover{
        color: #0b408e;
    }

    .courses-number{
        min-width: 3rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    @media (max-width: 1024px) {

        padding-top: 8vh;

        .courses-list{
            min-height: 20vh;
        }
    }

    @media (max-width : 768px) {

        padding-top: 5vh;

        .title,.subtitle{
            text-align: center;
        }

        .courses-list{
            padding: 0 0.8rem;
            min-height: 30vh;
        }
    }

}

#campus-view{

    padding-top: 15vh;

    .container-fluid{
        min-height: 60vh;
        background-image: url(../images/campus/1.png);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    @media (max-width : 1024px) {

        padding-top: 5vh;

        .container-fluid{
            min-height: auto;
            background-position: right;
            aspect-ratio: 958 / 439;
        }

    }

    @media (max-width : 768px) {

        padding-top: 5vh;

        .container-fluid{
            min-height: auto;
            background-position: right;
            aspect-ratio: 958 / 439;
        }

    }
}

#links{

    padding-top: 15vh;
    
    .container-fluid{
        /* width: 75%; */

        width: 95%;          /* 小螢幕時佔滿 */
        max-width: 1400px;   /* 大螢幕時限制最大寬度 */
        margin: 0 auto;      /* 置中 */
    }

    .title,.subtitle{
        text-align: center;
    }

    .carousel-container {
        width: 100%;
        max-width: 1400px;
        margin: 0 auto;
        position: relative; /* 為了讓按鈕定位 */
        padding: 0 50px;    /* 左右留空間給按鈕 */
        box-sizing: border-box;
    }

    
    .carousel-track {
        display: flex;
        gap: 24px;           /* 卡片之間的間距 */
        overflow-x: hidden;    /* 允許橫向捲動 */
        scroll-behavior: smooth; /* 平滑捲動效果 */
        padding: 20px 0;  /* 上下留點空間給陰影 */
        scroll-snap-type: x mandatory;
    }

    .carousel-track::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }

    .quick-menu-card {
        flex: 0 0 calc((100% - (24px * 3)) / 4);
        position: relative;
        display: block;
        aspect-ratio: 300 / 220;
        scroll-snap-align: start;
        border-radius: 20px;
        overflow: hidden;
        text-decoration: none;
        cursor: pointer;
        box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* 修正透明度寫法 */
        transition: transform 0.3s ease;
    }

    /* 左右切換按鈕 */
    .nav-btn {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #ddd;
        color: #333;
        font-size: 18px;
        cursor: pointer;
        z-index: 10;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s;
    }

    .nav-btn:hover {
        background: #333;
        color: #fff;
    }

    .prev-btn { left: 0; }
    .next-btn { right: 0; }

    .quick-menu-card .card-background {
        position: absolute;
        inset: 0;
        z-index: 1;
    }

    .quick-menu-card .card-background img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.5s ease;
    }

    .quick-menu-card .card-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 2;
        transition: background 0.3s ease;
    }

    .quick-menu-card .card-number {
        position: absolute;
        top: 14px;
        left: 14px;
        font-size: 22px;
        color: #fff;
        z-index: 3;
    }

    .quick-menu-card .card-title {
        position: absolute;
        left: 14px;
        bottom: 16px;
        font-size: 16px;
        color: #fff;
        z-index: 3;
        font-weight: 700;
    }

    .quick-menu-card .card-description {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px;
        text-align: center;
        z-index: 4;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.25s ease, transform 0.25s ease;
    }

    .quick-menu-card:hover { transform: translateY(-6px); }
    .quick-menu-card:hover .card-background img { transform: scale(1.08); }
    .quick-menu-card:hover .card-overlay { background: rgba(0,0,0,0.55); }
    .quick-menu-card:hover .card-description { opacity: 1; transform: translateY(0); }
    .quick-menu-card:hover .card-number,
    .quick-menu-card:hover .card-title { opacity: 0; transform: translateY(-20px); transition: all 0.25s ease; }

    .quick-menu-card .card-description p { color: #fff; margin: 0; font-size: 14px; line-height: 1.6; }
    
    @media (max-width : 1024px) {

        padding-top: 10vh;

        .quick-menu-card {
            box-shadow: 0 10px 15px rgba(0,0,0,0.15);
        }

        .quick-menu-card .card-number {
            font-size: 20px;
            top: 10px;
            left: 10px;
        }

        .quick-menu-card .card-title {
            font-size: 12px;
            left: 10px;
            bottom: 12px;
           
        }

        .quick-menu-card .card-description {
            display: none;
        }

        .quick-menu-card:hover .card-number,
        .quick-menu-card:hover .card-title {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @media (max-width : 768px) {

        padding-top: 5vh;

        .carousel-container {
            padding: 0 45px;
        }
        
        .container-fluid{
            width: 100%;
        }

        .quick-menu-card {
            flex: 0 0 calc((100% - 12px) / 2);
            height: auto;
            box-shadow: 0 5px 5px rgba(0,0,0,0.15);
        }
        .carousel-track {
            gap: 12px;
        }
        
        .quick-menu-card .card-number {
            font-size: 18px;
            top: 10px;
            left: 10px;
        }

        .quick-menu-card .card-title {
            font-size: 10px;
            left: 10px;
            bottom: 12px;
        }

        .quick-menu-card .card-description {
            display: none;
        }

        .quick-menu-card:hover .card-number,
        .quick-menu-card:hover .card-title {
            opacity: 1;
            transform: translateY(0);
        }
        
    }
}

#contact{

    padding: 15vh 0;

    .container{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .title,.subtitle{
        text-align: center;
    }

    .contact-info{
        margin-top: 3rem;
        text-align: center;
        color: #0008;
    }

    .btn{
        width: 80%;
        border-radius: 24px;
        padding: 1rem;
    }

    @media (max-width : 1024px) {

        padding-top: 10vh;

    }
    
    @media (max-width : 768px) {

        padding: 5vh 0;

    }
}

#footer{
    background-color: #1f2d40;
    color: #fff;
    padding: 2rem 0;
    /* text-align: center; */

    .footer-link{
        padding: 1rem 0;
        display: flex;
        /* flex-direction: column; */
        gap: 1rem;
    }

    a{
        color: #fff;
        text-decoration: none;
        font-size: 1.2rem;
    }

    a:hover{
        text-decoration: underline;
    }

    
    @media (max-width : 768px) {
        
        .footer-link{
            padding: 1rem 0;
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
    }
}

.modal{

    label{
        font-weight: bolder;
        padding: .5rem 0;
    }

    .form-control-box {
        position: relative; /* 確保內部絕對定位是參考這裡 */
        padding-bottom: 25px; /* 留空間給錯誤訊息 */

        /* 1. 錯誤訊息文字 (預設隱藏) */
        small {
            visibility: hidden;
            color: #e74c3c;
            font-size: 0.875rem;
            position: absolute;
            bottom: 2px;
            left: 2px;
            font-weight: bold;
            z-index: 10;
            background-color: #fff;
            padding-right: 5px;
        }

        /* 2. Icon (預設隱藏) */
        .success-icon,
        .error-icon {
            position: absolute;
            top: 40px; /* 這裡可能需要根據您的 label 高度微調 */
            right: 15px;
            visibility: hidden;
            z-index: 10;
            pointer-events: none;
        }

        /* --- 成功狀態 (Green) --- */
        /* & 代表 "連在一起"，編譯後會變成 .form-control-box.success */
        &.success {
            input, textarea {
                border-color: #2ecc71;
                border-width: 2px;
            }
            
            .success-icon {
                visibility: visible; /* 您原本代碼多打了一個 t (visiblet)，我幫您修正了 */
                color: #2ecc71;
            }
            
            small {
                visibility: hidden;
            }
        }

        /* --- 失敗狀態 (Red) --- */
        /* 編譯後會變成 .form-control-box.error */
        &.error {
            input, textarea {
                border-color: #e74c3c;
                border-width: 2px;
            }
            
            .error-icon {
                visibility: visible;
                color: #e74c3c;
            }
            
            small {
                visibility: visible;
            }
        }
    }
}