/* 大筆電 */
@media (max-width: 1600px) {
    .image-showcase{
        margin-top: 5rem;
    }

    .integration-points-sidebar{
        padding-left: 7rem;
    }
}

/* 筆電 */
@media (max-width: 1440px) and (min-width: 991px) {
    .section_animation{
        padding: 0px 2rem 5rem;
    }    

    .image-showcase{
        margin-top: 5rem;
    }

    .integration-points-sidebar{
        width: auto;
    }

    .discover-button{
        font-size: 1rem;
    }
}

/* 大橫式平板(例: iPad Pro/Air) */
@media (max-width: 1200px) and (min-width: 992px) {
    .section-description {
        font-size: 16px;
    }

    .integration-description{
        font-size: 16px;
    }
}

/* 平板（<=992px） */
@media (max-width: 992px) {
    .info_title{
        margin-top: 4rem;
    }
    .main-heading {
        max-width: 100%;
        font-size: 40px;
    }
    .main-description {
        max-width: 100%;
    }
    .content-container {
        padding: 26px 20px 44px;
        margin-top: 40px;
    }
    .content-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .animation_content {
        width: 100%;
    }
    .content-grid {
        max-width: 100%;
        margin-top: 40px;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .text-content-column {
        width: 100%;
    }
    .text-content {
        max-width: 100%;
    }
    .section-title {
        max-width: 100%;
    }
    .section-description {
        max-width: 100%;
        margin-right: 10px;
    }
    .feature-title {
        margin-top: 40px;
    }
    .discover-button {
        padding: 10px 20px;
        white-space: initial;
    }
    .visual-content-column {
        width: 100% !important;
    }
    .visual-container {
        max-width: 100%;
    }
    .image-showcase {
        max-width: 100%;
        padding: 100px 20px;
        white-space: initial;
    }
    .integration-points-visual {
        margin-bottom: 10px;
        white-space: initial;
    }
    .point-number {
        white-space: initial;
    }
    .progress-indicator {
        padding: 0 20px;
    }
    .integration-points-sidebar {
        width: 100%;
    }
    .sidebar-content {
        margin-top: 40px;
    }
    .integration-points-sidebar .integration-description:last-child {
        margin-right: 10px;
    }
}

/* 小平板或大手機（<=768px） */
@media only screen and (max-width: 768px) {
    .section_animation {
        padding: 2rem 1.3rem 3.75rem 1.3rem;
    }
    
    .info_title{
        margin-top: 0rem;
        padding: 0;
    }

    .content-grid{
        margin-top: 0;
    }

    .content-container{
        padding: 0;
    }

    .image-showcase{
        max-width: 90%;
        margin-top: 0;
        padding-top: 0;
    }

    .div_mobile_img{
        height: clamp(360px, 22.5rem, 999px);
        background-position: right !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
        padding: 0;
    }

    /* 在移動裝置必須隱藏則加上此Class */
    .hide_on_mobile{
        display: none !important;
    }

    .hide_on_desktop{
        display: block !important;
    }

    /* #region 彈出視窗樣式 */
    .pop_out_window{
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: calc(var(--real-vh, 1vh) * 100);
        background: linear-gradient(165deg, #e5edfa 20.61%, #ccdcf6 81.91%);
        z-index: 9999;
        padding: 0 16px 20px 16px;
        box-sizing: border-box;
        overflow-y: scroll;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    
    .mobile-popup-container {
        position: relative;
        width: 100%;
        height: 100%;
        background: linear-gradient(165deg, #e5edfa 20.61%, #ccdcf6 81.91%);
        overflow-y: auto;
        padding: 0;
        box-sizing: border-box;
        padding-bottom: 2.5rem;
        -webkit-overflow-scrolling: touch;
    }

    /* 關閉按鈕 */
    .close-button {
        position: absolute;
        top: 2%;
        right: 0;
        width: 30px;
        height: 30px;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10;
    }

    .close-icon {
        position: relative;
        width: 13px;
        height: 13px;
    }

    .close-line {
        position: absolute;
        width: 18px;
        height: 1.2px;
        background: #000;
        top: 50%;
        left: 50%;
        transform-origin: center;
    }

    .close-line:first-child {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .close-line:last-child {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* 車子圖片區域 */
    .window_header_div {
        position: relative;
        width: 100%;
        height: 12rem;
        margin-top: 3.75rem;
        overflow: hidden;
    }

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

    .overlay-shape {
        position: absolute;
        background: #fff;
        border-radius: 2px;
    }

    .overlay-shape-1 {
        width: 118px;
        height: 43px;
        top: 150px;
        left: 84px;
        background: #b1c5ff;
    }

    .overlay-shape-2 {
        width: 54px;
        height: 38px;
        top: 118px;
        left: 177px;
    }

    .overlay-shape-3 {
        width: 101px;
        height: 40px;
        top: 101px;
        left: 236px;
    }

    .point-indicator {
        position: absolute;
        top: 67px;
        left: 94px;
        width: 30px;
        height: 30px;
        background: #0042ff;
        border-radius: 2px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
    }

    /* 內容區域 */
    .content-section {
        padding: 2.4rem 10px 0rem 0;
    }

    .content-section::after {
        content: "";
        display: block;
        height: 2.5rem;
    }

    .popup-title {
        font-family: "Funnel Display";
        font-size: clamp(21px, 1.3rem, 999px);
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: #000;
        text-align: left;
    }

    .popup-description {
        font-family: "Funnel Sans";
        font-size: clamp(18px, 1.125rem, 999px);
        font-style: normal;
        font-weight: 300;   
        color: #000;
        line-height: normal;
        margin: 15px 0 0 0;
        text-align: left;
    }

    /* 跳出視窗內的晶片區塊 */
    .feature-card {
        background: #fff;
        border-radius: 5px;
        padding: 0;
        margin: 30px 5px 0 0;
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .feature-icon-section {
        width: 7.125rem;
        height: 100%;
        /* background: linear-gradient(135deg, #fff 0%, #0042ff 100%); */
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .feature-icon {
        width: 100%;
        height: 100%;
        object-fit: fill;
        margin-top: 0;
    }

    .feature-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }

    .feature-title {
        width: 100%;
        font-family: "Funnel Sans";
        font-size: clamp(16px, 1rem, 999px);
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: #000;
        margin: 0 0 15px 0;
        padding-right: 10px;
    }

    .discover-btn {
        border: none;
        border-radius: 2px;
        padding: 10px 23px;
        font-size: 16px;
        font-weight: 400;
        cursor: pointer;
        min-width: 116px;
        height: 43px;
    }

    /* Integration Points 區域 */
    .integration-section {
        margin-top: 40px;
    }

    .integration-title {
        font-family: "Funnel Sans";
        font-size: clamp(18px, 1.125rem, 999px);
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-transform: capitalize;
        color: #000;
        margin: 0 0 15px 0;
        text-align: left;
    }

    .integration-list {
        border-top: 1px solid #000;
    }

    .integration-item {
        margin-top: 0 !important;
        padding: 15px 0;
        border-bottom: 1px solid #000;
    }

    .integration-item:last-child {
        border-bottom: none;
    }

    .item-title {
        font-family: "Funnel Sans";
        font-size: clamp(21px, 1.3125rem, 999px);
        font-weight: 400;
        color: #000;
        margin: 0 0 10px 0;
        line-height: 1.3;
    }

    .item-description {
        font-family: "Funnel Sans";
        font-size: clamp(18px, 1.125rem, 999px);
        font-style: normal;
        font-weight: 300;
        line-height: normal;
        color: #000;
        margin: 0;
    }
    /* #endregion */
}

/* 小型手機（<=576px） */
@media (max-width: 576px) {
    .section_animation{
        padding: 2rem 1.3rem 3.75rem 1.3rem;
    }
    
    .info_title{
        margin-top: 0;
        padding: 0;
    }

    .main-heading{
        font-size: clamp(28px, 1.75rem, 999px);
    }

    .main-description{
        margin-top: 20px;
        font-size: clamp(18px, 1.125rem, 999px);
    }

    /* 額外針對explore模板作微調 */
    .cardSplide{
        padding-top: 40px !important;
    }
}