.banner-section {
    background-image: url(/static/image/tree.jpeg);
}



.cooling-about {

    position: relative;

    padding: 0;



    .cooling-container {

        width: min(1280px, calc(100% - 32px));

        padding: 36px;

        margin: 0 auto;

        position: relative;

        z-index: 1;

        border-radius: 16px;

        border: 2px solid var(--orange-color);

        gap: 34px;

        margin-top: -140px;

        background-color: #ffffff;

        display: flex;

        align-items: center;

        box-sizing: border-box;



        &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url(/static/image/bg-2.jpg);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: 0.05;
            z-index: -1;
        }



        .left-wrapper {
            width: 360px;
            flex-shrink: 0;
        }

        .cooling-about__swiper-wrap {
            position: relative;
            width: 100%;
        }

        .cooling-about-swiper {
            width: 100%;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 16px 40px rgba(1, 93, 178, 0.15);
        }

        .cooling-about-swiper .swiper-slide {
            height: auto;
        }

        .cooling-about__slide {
            margin: 0;
            position: relative;
            aspect-ratio: 4 / 3;
            background: linear-gradient(145deg, #e8f1fb 0%, #d4e5f7 100%);
        }

        .cooling-about__slide img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .cooling-about-pagination {
            position: absolute;
            bottom: 12px !important;
            left: 0;
            right: 0;
            z-index: 3;
            display: flex;
            justify-content: center;
            gap: 8px;
        }

        /* .cooling-about-pagination .swiper-pagination-bullet {
            width: 8px;
            height: 8px;
            margin: 0 !important;
            background: rgba(255, 255, 255, 0.55);
            opacity: 1;
            transition: transform 0.25s ease, background 0.25s ease;
        } */

        .cooling-about-pagination .swiper-pagination-bullet-active {
            background: var(--orange-color);
        }



        .right-wrapper {

            flex: 1;

            min-width: 0;

            font-size: 18px;

            line-height: 34px;

            color: #67687a;



            p {

                margin: 0 0 1em;

            }



            p:last-child {

                margin-bottom: 0;

            }

        }

    }

}



/* 多元化社區活動：4 欄 knowledge-card */

.cooling-activities-section .knowledge-card-wrapper {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



/* 服務特色：3 項 */

.cooling-features-section .feature-service-list {
    display: flex;
    justify-content: center;
    gap: 60px;

    .feature-service-item {
        height: 560px;
    }

}



/* 活動形式：3 欄 target-card */

.cooling-formats-section .cooling-formats-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.cooling-formats-section .target-card:nth-child(1) .target-card-bg {

    background: var(--red-color);

}



.cooling-formats-section .target-card:nth-child(2) .target-card-bg {

    background: var(--main-color);

}



.cooling-formats-section .target-card:nth-child(3) .target-card-bg {

    background: var(--orange-color);

}



/* 計劃目標：3 欄 feature-card */

.cooling-goals-section .cooling-goals-cards {

    grid-template-columns: repeat(3, minmax(0, 1fr));

}



.cooling-goals-section .feature-card-title {

    min-height: auto;

}


.plan-target-section {
    padding-bottom: 200px;
}