section {
    min-height: calc(100vh - 200px);
}

.h3{
    font-size: 1.75rem;
}

.h5 {
    font-size: 1.25rem;
}

.container {
    max-width: 1080px;
    /* 想要的固定寬度 */
    width: 80%;
    /* 保持響應式縮放 */
    margin: 0 auto;
    /* 水平置中 */
}

footer {
    p {
        font-size: 14px;
        font-weight: 500;
        margin: 0;
    }
}

.text-align-left {
    text-align: justify;
    text-align-last: left;
}

/* 初始位置在下方且透明 */
.animate-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* 當加入 .visible 後動畫生效 */
.animate-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 可用 nth-of-type 或直接用 data-delay 自訂 */
.animate-up[data-delay="1"] {
    transition-delay: 0.2s;
}

.animate-up[data-delay="2"] {
    transition-delay: 0.4s;
}

.top-btn {
    position: fixed;
    bottom: 40px;
    /* 距離底部 */
    right: 40px;
    /* 距離右邊 */
    width: 50px;
    /* 按鈕大小 */
    height: 50px;
    cursor: pointer;
    opacity: 0;
    /* 初始隱藏 */
    visibility: hidden;
    transition: opacity 0.4s ease;
    z-index: 1000;

}

.top-btn.show {
    opacity: 1;
    visibility: visible;
}

.top-btn:hover {
    transform: scale(1.1);
    transition: transform 0.3s ease;

}

/* 關於研達 */
.banner {
    width: 100%;
    height: 24rem;
    background-image: url(../img/banner.jpg);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    position: relative;
    overflow: hidden;

    h1 {
        font-size: 3.5rem;
        font-weight: 900;
        text-shadow: 0.5rem rgba(0, 0, 0, 0.5);
    }

    .btn-primary-span {
        border-radius: 2rem !important;
        font-weight: 700;
    }
}

.nvidia {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    text-align: center;
    height: auto;

    h2 {
        font-size: 1.8rem;
        font-weight: 700;
        color: white;
        margin: 0 1rem;
    }

    .text-wide {
        letter-spacing: 0.2rem;
        /* 字距 */
    }

    img {
        height: 3rem;
        /* 🔥 固定圖片高度 */
        width: auto;
    }
}


.trademark-wrapper {
    position: relative;
    display: inline-block;
    font-weight: 700;

    .trademark {
        position: absolute;
        top: 0.5rem;
        right: 2.1rem;
        font-size: 0.6rem;
        /* 小字 */
    }
}

.box {
    display: inline-block;
    width: 0.6rem;
    height: 2rem;
    background-color: #C81528;

    h5 {
        font-weight: 700;
    }
}


.bg-gray {
    background-color: #E4E4E4;
    min-height: calc(100vh - 200px);
}

.iconimg {
    width: 10rem;
    height: 10rem;

    .home-icon {
        width: 100%;
        height: auto;
    }
}

.card-1 {
    height: 20rem;
    background-image: url(../img/home_img1.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: transform 0.3s ease, background-image 0.3s ease;
}

.card-1:hover {
    background-image: url(../img/home_img1_.jpg);
}

.card-2 {
    height: 20rem;
    background-image: url(../img/home_img2_.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: transform 0.3s ease, background-image 0.3s ease;
}

.card-3 {
    height: 20rem;
    background-image: url(../img/home_img3.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 0.5rem 0.5rem 0 0;
    transition: transform 0.3s ease, background-image 0.3s ease;
}

.card-3:hover {
    background-image: url(../img/home_img3_.jpg);
}


/* 精選產品 */
.picbg {
    width: 100%;
    background: url(../img/picbg.jpg) fixed center;
    background-size: cover;
}


.item {
    max-width: 800px;
    width: auto;
    height: auto;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding: 2rem;
    margin: auto;
    box-sizing: border-box;
    border-radius: 1rem;
    border: white 4px solid;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;


    button {
        border-radius: 2rem !important;
        padding: 0 0.8rem;
    }

    img {
        width: 100%;
        height: auto;
        border-radius: 1rem;
    }

    .dot-list {
        padding-left: 1.2em;

        /* 整體縮進 */
        li {
            text-align: start;
            line-height: 1.6rem;
        }
    }

    .dot-list p::before {
        content: '‧';
        /* 加上你想要的點點符號 */
        margin-right: 0.5em;
    }



    .tabs {
        margin-top: 1rem;
        text-align: start;

        tab {
            padding: 0 0.5rem;
            margin-bottom: 0.5rem;
            border-radius: 2rem;
            background-color: #E95D00;
            color: white;
            transition: background-color 0.3s ease;
        }

    }

    .performance {
        margin-top: 1rem;
        text-align: start;
        border-radius: 0.5rem;
        border: #E95D00 1px solid;
        background-color: white;

        tab {
            width: 2.8rem;
            padding: 0 0.5rem;
            margin: 0.8rem 1rem 0.5rem 1rem;
            border-radius: 2rem;
            background-color: #E95D00;
            color: white;
            transition: background-color 0.3s ease;
        }

        div {
            margin-left: 1rem;
            margin-bottom: 1rem;
        }

    }
}


.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    animation: fadeIn 0.3s ease;

    .video-container {
        position: relative;
        width: 80%;
        max-width: 900px;
        aspect-ratio: 16/9;

        iframe {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 1rem;
        }

        .close-btn {
            position: absolute;
            top: -40px;
            right: 0;
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }
}

.image-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    animation: fadeIn 0.3s ease;

    .image-container {
        position: relative;
        width: 80%;
        max-width: 900px;


        img {
            width: 100%;
            height: 100%;
            border: none;
            border-radius: 1rem;
            object-fit: contain;
        }

        .close-btn {
            position: absolute;
            top: -40px;
            right: 0;
            background: none;
            border: none;
            color: white;
            font-size: 28px;
            cursor: pointer;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }
    }
}





/* --- 圖片外框，統一比例與遮罩 --- */
.carousel-img-wrapper {
    position: relative;
    width: 85%;
    height: 26rem;
    /* 統一高度，可自行調整 */
    margin: auto;
    overflow: hidden;
    border-radius: 1rem;
    border: #fff 4px solid;
    box-shadow: 0 0px 4px rgba(0, 0, 0, 0.4);
}

/* --- 圖片滑動、縮放、亮度漸變 --- */
.carousel-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 2s ease, filter 1.5s ease;
}

/* 當前圖片：微放大、亮一點 */
.carousel-item.active img {
    transform: scale(1.05);
    filter: brightness(1) blur(0);
}

/* 即將切換的圖片：稍暗、有點模糊 */
.carousel-item-next img,
.carousel-item-prev img {
    transform: scale(1);
    filter: brightness(0.85) blur(2px);
}

/* 滑動過渡更柔順 */
.carousel-item {
    transition: transform 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 滑鼠移上去微縮放（可保留） */
.carousel-item:hover img {
    transform: scale(1.1);
}

/* --- 控制按鈕 --- */
.custom-control {
    width: 2rem;
    height: 2rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.custom-control:hover {
    opacity: 1;
}

.control-icon {
    width: 100%;
    height: auto;
}

/* --- 指示器（圓點） --- */
.carousel-indicators [data-bs-target] {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    margin: 0 0.4rem;
    border: none;
    transition: all 0.3s ease;
}

.carousel-indicators .active {
    background-color: rgb(255, 192, 192);
    transform: scale(1.2);
}

.carousel-indicators [data-bs-target]:hover {
    background-color: rgba(255, 192, 192, 0.8);
}

.contact-info {
    width: auto;
    height: auto;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 1rem;
    border: #fff 0.3rem solid;
    box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.1);

    .box {
        display: inline-block;
        width: 0.3rem;
        height: 1rem;
        background-color: #C81528;

    }

    .text-wide {
        letter-spacing: 0.08rem;
    }

    img {
        width: auto;
        height: auto;
        cursor: pointer;
    }
}




@media (max-width: 768px) {

    .container {
        width: 100%;
        /* 保持響應式縮放 */
        margin: 0 auto;
        /* 水平置中 */
    }

    .footer_nbsp {
        display: none;
    }

    /* md 以下 */
    .banner {
        background-attachment: scroll;
        /* 👈 讓手機不錯亂 */
    }

    h1 {
        font-size: 2rem !important;
    }

    .nvidia {
        img {
            height: 2.4rem;
            /* 🔥 手機再縮小一點 */
        }

        h2 {
            font-size: 1.2rem;
            margin: 0.3rem;
        }
    }


    .carousel-img-wrapper {
        width: 95%;
        height: 16rem;
    }

    .contact-info {
        h5 {
            font-size: 0.9rem;
        }
    }

}

@media (min-width: 992px) {




    /* lg 以上 */



}