/* 沉浸式透明导航 */
.building-header {
    background-color: transparent;
    position: absolute;
    /* 脱离文档流，悬浮在首屏上方 */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    /* 保持原有的极高层级 */
    border-bottom: none;
}

.build-wrap {
    z-index: 100;
}

/* 独立的视频轮播首屏区块 */
.building-hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: #000;
    /* 防止出现白色背景闪烁 */
}

.building-crumb {
    top: 110px;
    z-index: 10;
    background: url(/images/build/icon-home-w.png) no-repeat left 0;
}

.building-crumb,
.building-crumb li a {
    color: #fff;
}

@media screen and (max-width: 968px) {
    .building-crumb {
        top: 190px;
    }
}

@media screen and (max-width: 768px) {
    .building-crumb {
        top: 100px;
    }
}

@media screen and (max-width: 414px) {
    .building-crumb {
        top: 80px;
    }
}

@media screen and (max-width: 375px) {
    .building-crumb {
        top: 70px;
    }
}

/* 视频轮播容器 */
.building-slider-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* 轮播项：使用 3D 加速，默认在屏幕右侧 */
.building-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
    z-index: 1;
}

.building-slide.active {
    transform: translate3d(0, 0, 0);
    z-index: 2;
}

/* System Performance Section */
.system-performance-section {
    background-color: #fff;
    width: 100%;
}

.system-performance-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    /* Add side padding to prevent touching edges */
}

.performance-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border: 1px solid #707070;
    background: #fff;
}

.performance-card {
    padding: 30px 25px;
    border-right: 1px solid #707070;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: border-color 0.3s ease, outline-color 0.3s ease;
    min-height: 200px;
    position: relative;
    outline: 1px solid transparent;
}

.performance-card:last-child {
    border-right: none;
}

.performance-card:hover {
    border-color: transparent;
    /* Hide the right border to prevent double thickness */
    outline: 1px solid #0056b3;
    /* Draw a 1px border around the entire card */
    z-index: 2;
}

.performance-icon {
    height: 60px;
    width: 60px;
    margin-bottom: 36px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.performance-icon picture,
.performance-icon img {
    height: 100%;
    width: auto;
    display: block;
    object-fit: contain;
    object-position: left center;
}

.card-title {
    font-size: 20px;
    color: #0148a1;
    /* Chalco Blue */
    font-weight: 700;
    line-height: 1.3;
    font-family: 'Hind', sans-serif;

}

.card-data {
    font-size: 18px;
    color: #343434;
    line-height: 1.5;
    display: block;
    font-family: 'Hind-light', sans-serif;
}

.performance-disclaimer {
    margin-top: 20px;
    font-size: 20px;
    color: #343434;
    line-height: 1.5;
    font-family: 'Hind', sans-serif;
}

/* Responsive Breakpoints */

/* Tablet (iPad Pro / Small Laptops) - 1024px */
@media (max-width: 1024px) {
    .performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .performance-card {
        border-bottom: 1px solid #707070;
    }

    .performance-card:nth-child(2n) {
        border-right: none;
    }

    /* 5th item spans full width */
    .performance-card:nth-child(5) {
        grid-column: span 2;
        border-right: none;
        border-bottom: none;
        align-items: center;
        text-align: center;
    }

    .performance-card:nth-child(5) .performance-icon {
        justify-content: center;
    }
}

/* Mobile - 767px and below */
@media (max-width: 767px) {

    .performance-grid {
        display: flex;
        flex-direction: column;
        border: none;
    }

    .performance-card {
        width: 100%;
        border: 1px solid #707070;
        margin-bottom: 15px;
        border-bottom: 1px solid #707070 !important;
        border-right: 1px solid #707070 !important;
        /* Restore right border */
    }

    .performance-card:nth-child(5) {
        grid-column: auto;
        /* Reset */
        align-items: flex-start;
        text-align: left;
    }

    .performance-card:nth-child(5) .performance-icon {
        justify-content: flex-start;
    }

    .performance-disclaimer {
        font-size: 16px;
    }
}


/* 退出项样式：移至左侧 */
.building-slide.prev-slide {
    transform: translate3d(-100%, 0, 0);
    z-index: 1;
}

/* 只有一个视频时隐藏指示点 */
.building-slider-dots:empty,
.building-slider-dots[style*="display: none"] {
    display: none !important;
}

/* 视频：保持比例填满 */
.building-slide video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

/* 轮播文字内容：居中显示 */
.building-slide-content {
    position: absolute;
    top: 56%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    text-align: center;
    color: #fff;
    width: 80%;
    max-width: 1200px;
}

.building-slide-content h1,
.building-slide-content h2 {
    font-size: 80px;
    margin-bottom: 90px;
    line-height: 96px;
    color: #fff;
    font-family: 'Hind-Medium';
}

.building-slide-content p {
    font-size: 30px;
    margin-bottom: 48px;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
    font-style: italic;
}

/* 按钮样式 */
.building-slide-content .btn-main {
    display: inline-block;
    padding: 8px 30px;
    background: transparent;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    font-size: 22px;
    border-radius: 8px;
}

.building-slide-content .btn-main:hover {
    border: 2px solid #0056b3;
}

/* 轮播指示点 */
.building-slider-dots {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 15px;
}

.building-dot {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s;
}

.building-dot.active,
.building-dot:hover {
    background: #fff;
}

/* 修复悬浮菜单显示问题 */
.building-panl {
    position: absolute;
    top: 95px;
    /* 匹配导航栏高度 */
    left: 0;
    width: 100%;
    z-index: 99990;
    /* 低于 header (99999)，高于视频 (1) */
    background: #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* =========================================
   第二板块：系统介绍 (Commercial & Residential)
   ========================================= */
.building-systems-section {
    padding: 80px 0;
    background-color: #fff;
}

.building-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.building-systems-grid {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    /* 两列之间的间距 */
}

.building-system-card {
    flex: 1;
    /* 平分空间 */
    display: flex;
    flex-direction: column;
}

.system-img-wrapper {
    width: 100%;
    margin-bottom: 25px;
    overflow: hidden;
}

.system-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 589 / 333;
    /* 保持图片比例统一 */
    transition: transform 0.3s ease;
}

.building-system-card:hover .system-img-wrapper img {
    transform: scale(1.05);
    /* 鼠标悬停时图片轻微放大 */
}

.system-title {
    font-size: 32px;
    color: #262626;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 15px;
    line-height: 1.3;
}

.system-desc {
    font-size: 24px;
    color: #343434;
    font-family: 'Hind-Light', sans-serif;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1;
    /* 让描述撑开，保证底部链接对齐 */
}

.system-link {
    font-size: 18px;
    color: #222;
    font-family: 'Hind';
    text-decoration: none;
    display: inline-block;
}

.system-link:hover {
    color: #0056b3;
    /* 悬停变为主题蓝 */
}


/* =========================================
   第三板块：垂直 Tab 切换 (Facade & Cladding)
   ========================================= */
.building-tabs-section {
    width: 100%;
    background-color: #f4f8fb;
    /* 浅底色 */
}

.building-tabs-wrapper {
    display: flex;
    width: 100%;
    /* max-width: 1600px;  如果需要限制最大宽 */
    margin: 0 auto;
    height: 750px;
    /* 固定高度，或者 min-height */
}

/* 左侧导航 */
.building-tabs-nav {
    width: 38%;
    background-color: #dee5f2;
    /* 默认背景 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.building-tabs-nav ul {
    width: 100%;
}

.building-tab-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    box-sizing: border-box;
    --active-bar-right: 352px;
    /* Increased by 10px to match the padding shift */
    padding: 22px 28px 22px 12px;
    /* Increased right padding by 10px to move content left */
    cursor: pointer;
    transition: all 0.3s ease;
    color: #333;
    position: relative;
}

.building-tab-item .tab-icon {
    width: 54px;
    height: 54px;
    margin-right: 20px;
}

.building-tab-item .tab-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.building-tab-item span {
    display: flex;
    align-items: center;
    width: 240px;
    font-size: 20px;
    font-family: 'Hind-Medium', sans-serif;
    text-align: left;
    white-space: nowrap;
    position: relative;
}

/* 选中状态 */
.building-tab-item.active {
    background: linear-gradient(to right,
            transparent calc(100% - var(--active-bar-right) - 5px),
            #c6d6ec calc(100% - var(--active-bar-right) - 5px));
}

.building-tab-item.active span {
    color: #0055a2;
}

.building-tab-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 5px;
    right: var(--active-bar-right);
    background-color: #0055a2;
}

/* 右侧箭头跟在文字后面 */
.building-tab-item.active span::after {
    content: '>';
    margin-left: 10px;
    color: #0055a2;
    font-weight: bold;
    font-family: monospace;
    font-size: 20px; /* Increased font size for the arrow */
    /* 简单的箭头 */
}

/* 右侧内容区 */
.building-tabs-content {
    width: 62%;
    position: relative;
    overflow: hidden;
}

.building-tab-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.tab-pane-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.building-tab-pane.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.tab-pane-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 27, 52, 0.6);
    /* 深蓝遮罩 */
    z-index: 1;
}

.tab-pane-inner {
    position: relative;
    z-index: 2;
    color: #fff;
    width: 80%;
    max-width: 1000px;
    min-height: 430px;
    padding-top: 90px;
}

.tab-pane-inner h2 {
    font-size: 48px;
    margin-bottom: 20px;
    font-family: 'Hind-Medium';
    color: #f2f2f2;
    min-height: 64px;
}

.tab-pane-inner p {
    font-size: 24px;
    margin-bottom: 40px;
    max-width: 600px;
    line-height: 32px;
    font-family: 'Hind-Light', sans-serif;
    color: #fff;
    min-height: 96px;
}

.btn-explore {
    display: inline-block;
    padding: 12px 50px 12px 30px;
    background: #fff;
    color: #0055a2;
    font-size: 22px;
    font-family: 'Hind', sans-serif;
    text-decoration: none;
    border-radius: 8px;
    margin-bottom: 60px;
    position: relative;
    transition: background 0.3s, color 0.3s;
}

.btn-explore::after {
    content: '→';
    position: absolute;
    right: 20px;
    top: 53%;
    transform: translateY(-50%);
    font-size: 20px;
    /* 增大箭头 */
    color: #0055a2;
    transition: transform 0.3s ease, color 0.3s;
}

.btn-explore:hover::after {
    transform: translate(5px, -50%);
}

/* 底部 Quick Access */
.quick-access {
    width: 100%;
    padding-top: 40px;
    position: relative;
}

.quick-access::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.quick-access>span {
    display: block;
    font-size: 28px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.quick-access .tags a {
    display: inline-block;
    padding: 4px 30px;
    border: 1px solid #fff;
    border-radius: 24px;
    color: #fff;
    font-family: 'Hind', sans-serif;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 20px;
    transition: all 0.3s;
}

.quick-access .tags a:hover {
    background: #fff;
    color: #0055a2;
    border-color: #fff;
}

/* =========================================
   响应式布局 (Responsive Design)
   ========================================= */

/* 大屏平板 / 小屏笔记本 */
@media screen and (max-width: 1200px) {

    .building-slide-content h1,
    .building-slide-content h2 {
        font-size: 60px;
        line-height: 1.2;
        margin-bottom: 50px;
    }

    .building-slide-content p {
        font-size: 24px;
        margin-bottom: 40px;
    }

    .building-tab-item {
        --active-bar-right: 308px;
        /* Increased by 10px */
        padding: 12px 34px 12px 10px;
        /* Increased right padding by 10px */
    }

    .building-tab-item .tab-icon {
        width: 48px;
        height: 48px;
        margin-right: 16px;
    }

    .building-tab-item span {
        width: 200px;
        font-size: 16px;
    }

    .building-tabs-wrapper {
        height: 650px;
    }

    .tab-pane-inner h2 {
        font-size: 40px;
        margin-bottom: 15px;
        min-height: 56px;
    }

    .tab-pane-inner p {
        font-size: 20px;
        line-height: 28px;
        margin-bottom: 30px;
        min-height: 84px;
    }

    .quick-access>span {
        font-size: 24px;
    }

    .quick-access .tags a {
        font-size: 18px;
    }
}

/* 平板竖屏 */
@media screen and (max-width: 992px) {

    .building-slide-content h1,
    .building-slide-content h2 {
        font-size: 48px;
        margin-bottom: 40px;
    }

    .building-slide-content p {
        font-size: 20px;
        margin-bottom: 30px;
    }

    .building-slide-content .btn-main {
        padding: 7px 24px;
        font-size: 18px;
    }

    .building-tab-item {
        --active-bar-right: 276px;
        /* Increased by 10px */
        padding: 10px 30px 10px 8px;
        /* Increased right padding by 10px */
    }

    .building-tab-item .tab-icon {
        width: 42px;
        height: 42px;
        margin-right: 14px;
    }

    .building-tab-item span {
        width: 180px;
        font-size: 14px;
    }

    .building-tabs-wrapper {
        height: 550px;
    }

    .tab-pane-inner {
        min-height: 360px;
        padding-top: 60px;
    }

    .tab-pane-inner h2 {
        font-size: 32px;
        min-height: 48px;
    }

    .tab-pane-inner p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 25px;
        min-height: 72px;
    }

    .btn-explore {
        padding: 10px 40px 10px 20px;
        margin-bottom: 30px;
        font-size: 16px;
    }

    .quick-access {
        padding-top: 20px;
    }

    .quick-access>span {
        font-size: 20px;
    }

    .quick-access .tags a {
        font-size: 14px;
        padding: 6px 12px;
    }
}

/* 大屏手机 */
@media screen and (max-width: 768px) {
    .building-slide-content {
        width: 90%;
        top: 55%;
        /* 移动端可以稍微偏上一点 */
    }

    .building-slide-content h1,
    .building-slide-content h2 {
        font-size: 36px;
        line-height: 1.3;
        margin-bottom: 30px;
    }

    .building-slide-content p {
        font-size: 18px;
        margin-bottom: 25px;
    }

    .building-slide-content .btn-main {
        padding: 6px 20px;
        font-size: 16px;
    }

    /* 第二板块变单列 */
    .building-systems-section {
        padding: 50px 0;
    }

    .building-systems-grid {
        flex-direction: column;
        gap: 50px;
    }

    /* 第三板块：Tab 变顶部横向滚动 */
    .building-tabs-wrapper {
        flex-direction: column;
        height: auto;
    }

    .building-tabs-nav {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding: 10px 0;
        background: #fff;
        scrollbar-width: none;
        /* Firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        cursor: grab;
    }

    .building-tabs-nav::-webkit-scrollbar {
        display: none;
        /* Chrome/Safari */
    }

    .building-tabs-nav.active {
        cursor: grabbing;
    }

    .building-tabs-nav ul {
        display: flex;
        width: max-content;
    }

    .building-tab-item {
        flex: 0 0 25vw;
        /* Show exactly 4 items per screen width */
        width: 25vw;
        margin-left: 0;
        padding: 10px 5px;
        border-left: none;
        border-bottom: 3px solid transparent;
        flex-direction: column;
        align-items: center;
        text-align: center;
        user-select: none;
        /* Prevent text selection while dragging */
    }

    .building-tab-item.active {
        border-left: none;
        border-bottom-color: #0055a2;
        background: transparent;
    }

    .building-tab-item::before,
    .building-tab-item::after {
        display: none;
        /* 移动端隐藏箭头 */
    }

    .building-tab-item .tab-icon {
        margin-right: 0;
        margin-bottom: 5px;
        width: 50px;
        height: 50px;
    }

    .building-tab-item span {
        display: none;
    }

    /* 右侧内容区变下方 */
    .building-tabs-content {
        width: 100%;
        height: 550px;
        /* 移动端高度增加以容纳标签 */
    }

    .tab-pane-inner {
        width: 90%;
        padding-left: 0;
        margin: 0 auto;
        min-height: 420px;
        padding-top: 60px;
    }

    .tab-pane-inner h2 {
        font-size: 28px;
        min-height: 42px;
    }

    .tab-pane-inner p {
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
        min-height: 64px;
    }

    .btn-explore {
        font-size: 14px;
        padding: 8px 40px 8px 16px;
        margin-bottom: 50px;
    }

    .btn-explore::after {
        right: 15px;
        top: 51%;
    }

    .quick-access::before {
        width: 100%;
    }

    .quick-access {
        display: block;
        /* 恢复显示 */
        width: 100%;
        padding-top: 50px;
    }

    .quick-access>span {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .quick-access>.tags {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .quick-access .tags a {
        font-size: 14px;
        padding: 4px 10px;
        margin-right: 5px;
        margin-bottom: 8px;
    }
}

/* 小屏手机 */
@media screen and (max-width: 576px) {
    .building-slide-content {
        top: 50%;
    }

    .building-slide-content h1,
    .building-slide-content h2 {
        font-size: 32px;
        margin-bottom: 40px;
    }

    .building-slide-content p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 40px;
    }

    .building-slide-content .btn-main {
        padding: 5px 16px;
        font-size: 16px;
    }

    .building-slider-dots {
        bottom: 20px;
    }

    /* 移动端文字微调 */
    .system-title {
        font-size: 28px;
    }

    .system-desc {
        font-size: 16px;
    }
}

/* =========================================
   第四板块：Portfolio (Bringing Visions to Life)
   ========================================= */
.portfolio-section {
    padding: 80px 0;
    background-color: #fff;
}

.portfolio-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

.portfolio-header {
    text-align: center;
    margin-bottom: 50px;
}

.portfolio-header h2 {
    font-size: 48px;
    font-family: 'Hind-Medium', sans-serif;
    color: #262626;
    margin-bottom: 15px;
}

.portfolio-header p {
    font-size: 24px;
    font-family: 'Hind', sans-serif;
    color: #343434;
}

/* 桌面端三列布局 */
.portfolio-grid {
    display: flex;
    gap: 20px;
    /* Removed fixed height to let content determine height */
}

.portfolio-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

.portfolio-item {
    position: relative;
    flex: 1;
    /* 占据可用空间 */
    aspect-ratio: 385 / 247;
    /* 给普通图设定一个默认比例 */
    border-radius: 8px;
    /* 强制移除圆角，覆盖全局或默认样式 */
    overflow: hidden;
    cursor: pointer;
}

.portfolio-item.tall {
    flex: 1;
    height: 100%;
    /* 让中间长图填满整列高度 */
    aspect-ratio: auto;
    /* 取消长图的固定比例 */
}

.portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.portfolio-item:hover img {
    transform: scale(1.05);
}

/* 底部黑色渐变与文字 */
.portfolio-label {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 5px 20px 5px 20px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    text-align: right;
    font-size: 22px;
    font-family: 'Hind-Medium', sans-serif;
    pointer-events: none;
    /* 让鼠标穿透，不影响hover */
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
    /* Removed fixed height */
}

@media screen and (max-width: 992px) {
    .portfolio-grid {
        gap: 16px;
    }

    .portfolio-col {
        gap: 16px;
    }

    .portfolio-header h2 {
        font-size: 36px;
    }

    .portfolio-header p {
        font-size: 20px;
    }

    .portfolio-label {
        font-size: 18px;
        padding: 5px 15px;
    }
}

@media screen and (max-width: 768px) {
    .portfolio-section {
        padding: 50px 0;
    }

    .portfolio-header {
        margin-bottom: 30px;
    }

    .portfolio-header h2 {
        font-size: 28px;
    }

    .portfolio-header p {
        font-size: 16px;
    }

    .portfolio-grid {
        flex-direction: column;
    }

    .portfolio-col {
        height: auto;
    }

    .portfolio-item {
        flex: none;
        /* 取消flex:1伸缩 */
    }

    .portfolio-item.tall {
        height: 300px;
        /* 中间长图稍微高一点 */
    }

    .portfolio-label {
        font-size: 16px;
        padding: 5px 15px;
    }
}

/* =========================================
   Parameter Section
   ========================================= */
.parameter-section {
    background-color: #fff;
    width: 100%;
}

.parameter-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}


.parameter-group {
    margin-bottom: 50px;
}

.parameter-group:last-child {
    margin-bottom: 0;
}

.parameter-subtitle {
    font-size: 24px;
    color: #0148a1;
    /* Chalco Blue */
    margin-bottom: 20px;
    font-family: 'Hind-Medium', sans-serif;
    position: relative;
    padding-left: 0;
}

.parameter-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 60px;
    /* Space between the two main columns */
    row-gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.parameter-item {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #848a91;
    font-size: 15px;
    line-height: 1.4;
    transition: background-color 0.3s ease;
}

.parameter-item:hover {
    background-color: #f8f9fa;
    /* Light grey background on hover */
}

/* Apply top border ONLY to the first item in each column */
.parameter-item:nth-child(1),
.parameter-item:nth-child(2) {
    border-top: 1px solid #848a91;
}

.parameter-label {
    color: #343434;
    font-family: 'Hind-Medium', sans-serif;
    padding-right: 15px;
    font-size: 20px;
    flex: 1;
    /* Take up available space */
}

.parameter-value {
    color: #343434;
    font-family: 'Hind-Light', sans-serif;
    text-align: left;
    /* Left align the value */
    font-size: 20px;
    width: 220px;
    /* Wider fixed width to move it away from the right edge and align columns */
    flex-shrink: 0;
    /* Prevent value from shrinking */
}

/* Responsive */
@media (max-width: 768px) {

    .parameter-list {
        grid-template-columns: 1fr;
        /* Stack on mobile */
        column-gap: 0;
    }

    /* On mobile, only the VERY first item needs the top border since it's a single column */
    .parameter-item:nth-child(2) {
        border-top: none;
    }

    .parameter-item {
        padding: 10px 0;
    }

    .parameter-label,
    .parameter-value {
        font-size: 16px;
    }

    .parameter-value {
        width: 120px;
        /* Adjust width for mobile */
    }

    .parameter-subtitle {
        font-size: 20px;
    }
}

/* =========================================
   Color Selection Section
   ========================================= */
.color-section {
    padding: 0 0 60px 0;
    background-color: #fff;
    width: 100%;
}

.color-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.color-title {
    font-size: 26px;
    color: #0148a1;
    /* Chalco Blue */
    font-weight: 700;
    margin-bottom: 25px;
    font-family: 'Hind-Medium', sans-serif;
}

.color-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

.color-swatch {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid #e0e0e0;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.color-note {
    font-size: 20px;
    color: #343434;
    font-family: 'Hind', sans-serif;
    margin-bottom: 20px;
}

.color-action {
    display: flex;
    justify-content: flex-end;
    padding-top: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 15px;
    padding-right: 15px;
}

.btn-full-specs {
    display: inline-flex;
    align-items: center;
    padding: 8px 30px;
    background-color: #fff;
    color: #0054a6;
    border: 1px solid #0054a6;
    font-size: 20px;
    font-family: 'Hind', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-full-specs img {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
}

.btn-full-specs:hover {
    color: #fff;
    background-color: #0054a6;
}

.btn-full-specs:hover img {
    transform: translateY(-3px);
    filter: brightness(0) invert(1);
    /* Turn the icon white on hover */
    /* Make the icon jump slightly */
}

/* Responsive */
@media (max-width: 768px) {
    .color-swatches {
        gap: 10px;
    }

    .color-note {
        font-size: 16px;
    }

    .color-action {
        justify-content: center;
    }

    .btn-full-specs {
        font-size: 16px;
        padding: 6px 16px;
    }

    .btn-full-specs img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        margin-top: -4px;
    }

    .color-title {
        font-size: 20px;
    }
}

/* =========================================
   Opening Configurations Section
   ========================================= */
.opening-config-section {
    position: relative;
    padding-bottom: 80px;
    background-color: #fff;
    width: 100%;
    margin-top: 40px;
}

/* Gray background strip acting as "under" layer */
.opening-bg-strip {
    position: absolute;
    top: 120px;
    /* Adjust top position to sit under the main card */
    left: 0;
    width: 100%;
    height: 220px;
    background-color: #eef1f6;
    /* Fallback color */
    background-image: url('/images/build/PP42291206-Hotel-Window-Facade-scaled.jpg');
    /* Replace with your specific background image path */
    background-size: cover;
    background-position: center;
    z-index: 0;
}

.opening-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    z-index: 1;
    /* Ensure content sits on top of the gray strip */
}

.opening-main-title {
    font-size: 36px;
    color: #232323;
    margin-bottom: 50px;
    /* Space between title and the card */
    font-weight: 700;
    font-family: 'Hind-Medium', sans-serif;
    padding-top: 20px;
}

/* The main white card container */
.opening-card {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 0px 92px 0px rgba(95, 95, 95, 0.3);
    padding: 40px;
    width: 100%;
    margin-top: 160px;
    /* Overlap effect */
}

.opening-card-title {
    font-size: 32px;
    color: #232323;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 10px;
}

.opening-content-grid {
    display: flex;
    gap: 40px;
}

/* Left side: Large image area */
.opening-image-area {
    flex: 1;
    background-color: #eef1f6;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.opening-image-area img,
.opening-image-area iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Right side: List of types */
.opening-types-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
}

.opening-type-item {
    display: flex;
    align-items: center;
    padding: 10px 30px;
    border: 1px solid #d2d6de;
    border-radius: 12px;
    transition: all 0.3s ease;
    background-color: #fafafc;
}

.opening-type-item:hover {
    border-color: #0054a6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transform: translateX(5px);
}

.opening-type-icon {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 20px;
    border-radius: 4px;
    overflow: hidden;
    background: #f5f5f5;
}

.opening-type-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.opening-type-text {
    flex: 1;
}

.opening-type-name {
    font-size: 16px;
    color: #333;
    font-family: 'Hind-Medium', sans-serif;
    font-weight: bold;
    /* Make it bold as requested */
}

.opening-type-desc {
    font-size: 16px;
    /* Match font size with name for inline flow */
    color: #666;
    line-height: 1.4;
    font-family: 'Hind', sans-serif;
    margin: 0;
}

.opening-note {
    margin-top: 20px;
    font-size: 18px;
    color: #5d5d5d;
    font-family: 'Hind', sans-serif;
}

/* Responsive */
@media (max-width: 992px) {
    .opening-content-grid {
        flex-direction: column;
    }

}

@media (max-width: 768px) {
    .opening-config-section {
        padding-bottom: 40px;
        margin-top: 20px;
    }

    .opening-bg-strip {
        height: 150px;
        /* Reduced height for mobile */
        top: 80px;
        /* Adjusted to sit nicely under the title */
    }

    .opening-card {
        padding: 25px 20px;
        margin-top: 80px;
        /* Adjusted overlap for mobile */
    }

    .opening-main-title {
        font-size: 24px;
        margin-bottom: 20px;
        /* Less space below title on mobile */
        padding-top: 10px;
    }

    .opening-card-title {
        font-size: 20px;
        margin-bottom: 10px;
    }

    .opening-type-item {
        padding: 12px;
    }

    .opening-type-icon {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }

    .opening-type-name {
        font-size: 16px;
    }

    .opening-type-desc {
        font-size: 13px;
    }

    .opening-note {
        font-size: 16px;
    }
}

/* =========================================
   Zigzag Content Blocks Section
   ========================================= */
.zigzag-section {
    padding: 40px 0;
    background-color: #fff;
    width: 100%;
}

.zigzag-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.zigzag-row {
    display: flex;
    align-items: flex-start;
    /* Align text and image to the top */
    margin-bottom: 80px;
}

.zigzag-row:last-child {
    margin-bottom: 0;
}

/* For the reversed layout */
.zigzag-row.reverse {
    flex-direction: row-reverse;
}

.zigzag-image {
    flex: 1;
    background-color: #eef1f6;
    aspect-ratio: 600 / 360;
    overflow: hidden;
}

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

.zigzag-content {
    flex: 0 0 calc(50% - 40px);
    /* Strictly take up 50% minus the 40px gap */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Start text from the top */
    padding-top: 40px;
    /* Optional: slight top padding to align nicely with image top edge */
    margin-left: 40px;
    /* Create the gap on the left when content is on the right */
}

/* When reversed, content is on the left, so margin goes on the right */
.zigzag-row.reverse .zigzag-content {
    margin-left: 0;
    margin-right: 40px;
}

.zigzag-title {
    font-size: 26px;
    color: #232323;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 20px;
    line-height: 1.3;
}

.zigzag-desc {
    font-size: 20px;
    color: #343434;
    line-height: 1.6;
    font-family: 'Hind', sans-serif;
    margin-bottom: 15px;
}

.zigzag-desc:last-child {
    margin-bottom: 0;
}

/* Responsive */
@media (max-width: 992px) {
    .zigzag-row {
        margin-bottom: 60px;
    }

    .zigzag-content {
        flex: 0 0 calc(50% - 20px);
        margin-left: 20px;
    }

    .zigzag-row.reverse .zigzag-content {
        margin-left: 0;
        margin-right: 20px;
    }
}

@media (max-width: 768px) {
    .zigzag-section {
        padding: 20px 0;
    }

    .zigzag-row,
    .zigzag-row.reverse {
        flex-direction: column;
        margin-bottom: 10px;
    }
    .zigzag-row{
        margin-bottom: 40px;
    }

    .zigzag-image {
        width: 100%;
        flex: auto;
    }

    .zigzag-content,
    .zigzag-row.reverse .zigzag-content {
        width: 100%;
        flex: auto;
        margin-left: 0;
        margin-right: 0;
        /* margin-top: 20px; */
    }

    .zigzag-title {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .zigzag-desc {
        font-size: 16px;
    }
}

/* =========================================
   Project Portfolio Section (New)
   ========================================= */
.project-portfolio-section {
    padding: 60px 0 30px 0;
    background-color: #fff;
    width: 100%;
}

.project-portfolio-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.project-portfolio-title {
    font-size: 36px;
    color: #222;
    text-align: center;
    margin-bottom: 50px;
    font-weight: 700;
    font-family: 'Hind-Medium', sans-serif;
}

.portfolio-carousels-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0 15px;
}

.portfolio-carousel {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    cursor: grab;
    /* Hide scrollbar */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* Internet Explorer 10+ */
    -webkit-overflow-scrolling: touch;
}

.portfolio-carousel::-webkit-scrollbar {
    display: none;
    /* WebKit */
}

.portfolio-carousel.active {
    cursor: grabbing;
}

.portfolio-carousel.active .project-portfolio-item {
    pointer-events: none;
    /* Disable pointer events on items during drag to prevent image drag ghosting */
    transition: none;
    /* Disable hover transitions while dragging for buttery smoothness */
}

.portfolio-track {
    display: flex;
    gap: 15px;
    width: max-content;
    padding: 0;
    /* Removed padding since wrapper now has padding */
}

.project-portfolio-item {
    width: 38vw;
    /* Responsive width */
    max-width: 454px;
    /* Max width to maintain PC design */
    aspect-ratio: 454 / 345;
    /* Maintain aspect ratio instead of fixed height */
    height: auto;
    background-color: #eef1f6;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
    /* Prevent text selection during drag */
}

.project-portfolio-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    z-index: 2;
}

.project-portfolio-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
    pointer-events: none;
    /* Crucial for drag-to-scroll */
}

.project-portfolio-item:hover img {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 992px) {
    .project-portfolio-item {
        width: 45vw;
        /* Slightly larger on tablet */
    }
}

@media (max-width: 768px) {
    .project-portfolio-section {
        padding: 40px 0 40px 0;
    }

    .project-portfolio-title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .project-portfolio-item {
        width: 80vw;
        /* Take up most of the screen on mobile */
    }
}

/* =========================================
   Explore Systems Section (Carousel)
   ========================================= */
.explore-section {
    padding: 80px 0 30px 0;
    background-color: #fff;
    width: 100%;
    overflow: hidden;
}

.explore-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    /* Total content width approx 1170px */
    /* text-align: center; Remove this so the carousel aligns left */
}

.explore-title {
    font-size: 36px;
    color: #232323;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 60px;
    text-align: center;
    /* Keep title centered */
}

/* Carousel Container */
.explore-carousel-wrapper {
    width: 100%;
    max-width: 1200px;
    /* Limit to standard container width */
    margin: 0 auto;
    /* Center the carousel on the screen */
    padding: 0 15px 20px 15px;
    /* Add side padding to match container alignment */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
}

.explore-carousel-wrapper::-webkit-scrollbar {
    display: none;
}

.explore-carousel-wrapper.active {
    cursor: grabbing;
}

.explore-carousel {
    display: flex;
    gap: 24px;
    /* Gap between cards */
    width: max-content;
    padding-right: 20px;
    /* Right padding for scroll end */
}

.explore-card {
    /* Calculation for 3.5 cards in ~1170px width:
       (1170 - 3*24) / 3.5 = 1098 / 3.5 ≈ 313px
       Let's use 315px to be close to 1200px visual */
    width: 315px;
    flex-shrink: 0;
    /* Prevent shrinking */
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
    user-select: none;
    text-decoration: none;
    /* Remove underline if it's an 'a' tag */
}

/* Hover effect for a tag cards */
a.explore-card:hover .explore-name {
    color: #0148a1;
    /* Change to Chalco Blue on hover */
}

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

.explore-img-box {
    width: 100%;
    height: 210px;
    background-color: #eef1f6;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.explore-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.explore-name {
    font-size: 20px;
    color: #232323;
    font-family: 'Hind', sans-serif;
    text-align: center;
    display: block;
    /* Ensure it behaves like the old h3 */
    transition: color 0.3s ease;
    /* Smooth color transition */
}

/* Responsive */
@media (max-width: 768px) {
    .explore-section {
        padding: 60px 0;
    }

    .explore-title {
        font-size: 28px;
        margin-bottom: 40px;
    }

    .explore-card {
        width: 260px;
        /* Smaller width for mobile */
    }

    .explore-img-box {
        height: 190px;
    }
}

/* =========================================
   CTA Section (Bottom Call to Action)
   ========================================= */
.cta-section {
    padding: 80px 0;
    background-color: #e9ecf2;
    /* Light gray background */
    width: 100%;
    text-align: center;
}

.cta-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.cta-title {
    font-size: 32px;
    color: #232323;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 20px;
}

.cta-desc {
    font-size: 20px;
    color: #5d5d5d;
    line-height: 1.6;
    font-family: 'Hind', sans-serif;
    margin-bottom: 40px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .cta-section {
        padding: 60px 0;
    }

    .cta-title {
        font-size: 26px;
    }

    .cta-buttons {
        flex-direction: row;
        /* Ensure buttons stay in a row */
        gap: 15px;
        align-items: center;
        justify-content: center;
        /* Keep them centered */
        flex-wrap: wrap;
        /* Allow wrapping if screen is too small */
    }

    .btn-cta-primary,
    .btn-cta-secondary {
        font-size: 16px;
        padding: 8px 20px;
    }
}

.partner-section {
    padding: 60px 0;
    background-color: #fff;
    width: 100%;
}

.partner-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    gap: 80px;
}

/* Left Side: Overlapping Images */
.partner-images {
    flex: 1;
    position: relative;
    /* Create a minimum height to contain the absolute positioned image */
    min-height: 500px;
    display: flex;
    align-items: flex-start;
}

.partner-img-main {
    width: 70%;
    aspect-ratio: 1 / 1;
    background-color: #eef1f6;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    z-index: 1;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

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

.partner-img-overlap {
    width: 55%;
    aspect-ratio: 1 / 1;
    background-color: #e4e9f2;
    /* Slightly darker gray for placeholder distinction */
    border-radius: 4px;
    overflow: hidden;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    /* Sits on top of the main image */
    box-shadow: -10px -10px 30px rgba(0, 0, 0, 0.08);
    /* Shadow to emphasize overlap */
}

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

/* Right Side: Content */
.partner-content {
    flex: 1;
}

.partner-title {
    font-size: 36px;
    color: #232323;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 25px;
    line-height: 1.3;
}

.partner-desc {
    font-size: 24px;
    color: #5d5d5d;
    line-height: 1.6;
    font-family: 'Hind', sans-serif;
    margin-bottom: 30px;
}

.partner-list {
    list-style: none;
    padding: 0 0 0 26px;
    /* Added 20px left padding to indent the entire list */
    margin: 0 0 40px 0;
}

.partner-list li {
    font-size: 20px;
    color: #5d5d5d;
    font-family: 'Hind', sans-serif;
    margin-bottom: 15px;
    padding-left: 20px;
    position: relative;
    line-height: 1.5;
}

.partner-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    background-color: #0054a6;
    /* Chalco Blue square bullet */
}

.btn-expert-support {
    display: inline-block;
    padding: 8px 36px;
    color: #0148a1;
    border: solid 1px #0148a1;
    background-color: transparent;
    font-size: 20px;
    font-family: 'Hind-Medium', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-expert-support:hover {
    background-color: #0054a6;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0, 84, 166, 0.2);
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 992px) {
    .partner-container {
        gap: 40px;
    }

    .partner-images {
        min-height: 400px;
    }

    .partner-title {
        font-size: 28px;
    }
}

@media (max-width: 768px) {
    .partner-section {
        padding: 40px 0;
    }

    .partner-container {
        flex-direction: column-reverse; /* Reverse order: text first, images second */
        gap: 50px;
    }

    .partner-images {
        width: 100%;
        max-width: 500px;
        /* Keep images from getting too huge on tablets */
        margin: 0 auto;
        min-height: auto;
        aspect-ratio: 1 / 1.1;
        /* Maintain a rough box shape for the composition */
    }

    .partner-content {
        width: 100%;
    }

    .partner-title {
        font-size: 26px;
    }

    .partner-desc {
        font-size: 16px;
    }

    .partner-list {
        padding: 0 0 0 14px;
    }

    .partner-list li {
        font-size: 16px;
    }

    .btn-expert-support {
        font-size: 16px;
        padding: 6px 16px;
        display: inline-block;
        margin-left: 12px;
    }
}

.why-choose-section {
    position: relative;
    width: 100%;
    padding: 100px 0;
    overflow: hidden;
    color: #fff;
    z-index: 1;
    background-image: url('/images/build/factory-bg.webp');
    background-attachment: fixed;
    /* 关键：背景固定 */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.why-choose-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    /* 黑色遮罩，让白字清晰 */
    z-index: 0;
}

.why-choose-container {
    position: relative;
    z-index: 1;
    /* 内容在遮罩之上 */
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    text-align: center;
}

.why-choose-container h2 {
    font-size: 48px;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 60px;
    color: #fff;
}

.why-choose-grid {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.why-card {
    background: #fff;
    color: #333;
    flex: 1;
    max-width: 400px;
    padding: 50px 30px;
    border-radius: 8px;
    text-align: center;
    transition: transform 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.why-card:hover {
    transform: translateY(-10px);
    /* 悬浮上浮效果 */
}

.card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 30px;
}

.card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.why-card h3 {
    font-size: 24px;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 25px;
    color: #000;
}

.card-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.card-list li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 12px;
    color: #555;
    font-family: 'Hind', sans-serif;
}

/* 响应式调整 */
@media screen and (max-width: 1200px) {
    .why-choose-container h2 {
        font-size: 40px;
        margin-bottom: 40px;
    }

    .why-card {
        padding: 40px 20px;
    }

    .why-card h3 {
        font-size: 22px;
    }
}

@media screen and (max-width: 992px) {
    .why-choose-grid {
        flex-wrap: wrap;
        /* 允许换行，但其实三列变一列更常见 */
        gap: 20px;
    }

    .why-card {
        min-width: 300px;
        /* 平板下可能稍微挤一点 */
    }
}

@media screen and (max-width: 768px) {
    .why-choose-section {
        padding: 60px 0;
    }

    .why-choose-container h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .why-choose-grid {
        flex-direction: column;
        /* 移动端改为垂直排列 */
        align-items: center;
    }

    .why-card {
        width: 100%;
        max-width: 1000px;
        /* 撑满 */
        margin-bottom: 20px;
    }

    .why-card:last-child {
        margin-bottom: 0;
    }
}

/* =========================================
   Building Details Page Styles
   ========================================= */
.building-detail {
    border-bottom: 1px solid #fff;
}

/* Generic content styles for standalone text between sections */
/* Simplified selectors to target any standalone h2, p, and ul that are direct children of the body or main content wrapper 
   This avoids being tied to specific preceding classes like .lem_price */

.bd-article-page > h2,
.bd-article-page > section + h2 {
    font-size: 36px;
    color: #33363b;
    font-family: 'Hind-Medium', sans-serif;
    margin: 40px auto 20px;
    max-width: 1200px;
    padding: 0 15px;
    display: block;
}

.bd-article-page > p,
.bd-article-page > section + p,
.bd-article-page > h2 + p,
.bd-article-page > section + h2 + p {
    font-size: 20px;
    color: #5f6771;
    line-height: 1.8;
    margin: 40px auto 30px;
    font-family: 'Hind-Light', sans-serif;
    max-width: 1200px;
    padding: 0 15px;
    display: block;
}

/* Adjust top margin if p immediately follows an h2 */
.bd-article-page > h2 + p,
.bd-article-page > section + h2 + p {
    margin-top: 0;
}

.bd-article-page > ul,
.bd-article-page > p + ul {
    list-style: none;
    padding: 0;
    margin: 0 auto 30px auto;
    max-width: 1200px;
    padding: 0 15px 0 35px; /* 15px right, 35px left for bullets */
    display: block;
}

.bd-article-page > ul > li,
.bd-article-page > p + ul > li {
    font-size: 20px;
    color: #5f6771;
    line-height: 1.8;
    position: relative;
    margin-bottom: 10px;
    font-family: 'Hind-Light', sans-serif;
    margin-left: 20px;
}

.bd-article-page > ul > li::before,
.bd-article-page > p + ul > li::before {
    content: '';
    position: absolute;
    left: -20px;
    top: 14px;
    width: 6px;
    height: 6px;
    background-color: #0056b3;
    transform: rotate(45deg);
}

/* Responsive for generic text */
@media (max-width: 768px) {
    .bd-article-page > h2,
    .bd-article-page > section + h2 {
        font-size: 28px;
        margin-top: 40px;
        margin-bottom: 20px;
    }
    .bd-article-page > p,
    .bd-article-page > section + p,
    .bd-article-page > h2 + p,
    .bd-article-page > section + h2 + p {
        font-size: 16px;
        margin-bottom: 20px;
    }
    .bd-article-page > ul,
    .bd-article-page > p + ul {
        padding: 0 15px 0 24px;
    }

    .bd-article-page > ul > li,
    .bd-article-page > p + ul > li {
        font-size: 16px;
    }
}

.bd-hero {
    position: relative;
    width: 100%;
}

.bd-hero-bg {
    width: 100%;
    height: 480px;
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    position: relative;
}

.bd-hero-card-container {
    width: 100%;
    max-width: 1200px;
    margin: -176px auto 0;
    position: relative;
    z-index: 10;
    padding: 0 15px;
}

.bd-card-content {
    background: #fff;
    border-radius: 32px;
    padding: 50px 80px;
    box-shadow: 3px 3px 49px 0px rgba(101, 101, 101, 0.3);
}

.bd-card-content h1 {
    font-size: 50px;
    color: #33363b;
    font-family: 'Hind-Medium', sans-serif;
}

.bd-card-content p {
    font-size: 20px;
    color: #848a91;
    margin-bottom: 20px;
    font-family: 'Hind', sans-serif;
}

.bd-tags {
    display: flex;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.bd-tags span,
.bd-tags a {
    border: 1px solid #848a91;
    color: #848a91;
    padding: 2px 10px;
    border-radius: 18px;
    font-size: 16px;
    font-family: 'Hind-Medium', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bd-tags a:hover {
    border-color: #0056b3;
    color: #0056b3;
}

.bd-actions {
    display: flex;
    gap: 20px;
}

.btn-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0056b3;
    color: #fff;
    padding: 8px 36px;
    font-size: 18px;
    text-decoration: none;
    font-family: 'Hind', sans-serif;
    transition: background 0.3s;
}

.btn-quote:hover {
    background: #004494;
    color: #fff;
}

.btn-brochure {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #0056b3;
    border: 1px solid #0056b3;
    padding: 8px 36px;
    font-size: 18px;
    text-decoration: none;
    font-family: 'Hind-Medium', sans-serif;
    transition: background 0.3s, color 0.3s;
}

.btn-brochure:hover {
    background: #0056b3;
    color: #fff;
}

.bd-overview {
    padding: 0 15px 20px 15px; /* Removed 80px top padding since it's now handled by the generic h2 */
    max-width: 1200px;
    margin: 0 auto;
}

.bd-overview-list {
    list-style: none;
    padding: 0;
    margin: 0 0 50px 20px;
}

.bd-overview-list li {
    font-size: 20px;
    color: #5f6771;
    line-height: 1.8;
    position: relative;
    margin-bottom: 10px;
    font-family: 'Hind-Light', sans-serif;
    padding-left: 20px;
}

.bd-overview-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 14px;
    width: 6px;
    height: 6px;
    background-color: #0056b3;
    transform: rotate(45deg);
}

.bd-overview-features {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: 40px;
}

.bd-feature {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    flex: 1;
    justify-content: center;
}

.bd-feature:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background-color: #e0e0e0;
}

.bd-feature img {
    width: 40px;
    height: 40px;
}

.bd-feature-text {
    display: flex;
    flex-direction: column;
}

.bd-feature-text strong {
    font-size: 20px;
    color: #33363b;
    font-family: 'Hind-Medium', sans-serif;
}

.bd-feature-text span {
    font-size: 18px;
    color: #6c747d;
    font-family: 'Hind-Light', sans-serif;
}

@media (max-width: 768px) {
    .bd-hero-bg {
        height: 260px;
        /* Reduced height for mobile */
    }

    .bd-card-content {
        padding: 30px 20px;
    }

    .bd-card-content h1 {
        font-size: 32px;
    }

    .bd-actions {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    .btn-quote,
    .btn-brochure {
        font-size: 16px;
        padding: 6px 16px;
        display: inline-flex;
    }

    .bd-hero-card-container {
        margin-top: -50px;
    }

    .bd-overview-features {
        gap: 30px;
        flex-direction: column;
        align-items: center;
        /* Center the wrapper block */
    }

    .bd-feature {
        justify-content: flex-start;
        /* Ensure the icon and text are left-aligned internally */
        width: auto;
        /* Let it shrink to its content size so we can center the block */
        min-width: 200px;
        /* Give it a min-width so all 3 items align neatly with each other */
    }

    .bd-feature:not(:last-child)::after {
        display: none;
    }

    /* Overview section text optimization */
    .bd-overview {
        padding: 20px 15px;
    }

    .bd-overview-list {
        margin: 0 0 30px 0;
    }

    .bd-overview-list li {
        font-size: 16px;
    }

    .bd-feature-text strong {
        font-size: 18px;
    }

    .bd-feature-text span {
        font-size: 14px;
    }
}

/* =========================================
   Building Details: System Positioning
   ========================================= */
.bd-positioning {
    position: relative;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    padding: 60px 0;
    /* Add padding to create top/bottom space for the background image */
}

.bd-positioning-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    /* Adjusted width to let the card overlap more */
    height: 100%;
    background-color: #eef1f6;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    z-index: 1;
}

.bd-positioning-content-wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    padding: 0 15px;
}

.bd-positioning-card {
    background: #fff;
    width: 100%;
    max-width: 650px;
    /* Slightly wider to ensure overlap */
    padding: 60px;
    box-shadow: 3px 3px 49px 0px rgba(101, 101, 101, 0.3);
    margin-top: -30px;
    /* Shift card up to overlap the top spacing slightly if needed, or rely on wrapper padding */
    margin-bottom: -30px;
}

.bd-positioning-card h2 {
    font-size: 36px;
    color: #33363b;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 20px;
    color: #33363b;
}

.bd-positioning-desc {
    font-size: 20px;
    color: #5f6771;
    line-height: 1.6;
    margin-bottom: 40px;
    font-family: 'Hind-Light', sans-serif;
    color: #5f6771;
}

.bd-positioning-list {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bd-positioning-item {
    display: flex;
    align-items: center; /* Align to top instead of center to handle missing image gracefully */
    gap: 15px;
}

.bd-positioning-item img {
    width: 40px;
    height: 40px;
    flex-shrink: 0; /* Prevent image from shrinking */
}

.bd-positioning-text {
    display: flex;
    flex-direction: column;
}

/* If bd-positioning-text is the FIRST child (meaning no img tag precedes it), add left margin to simulate the missing icon's space */
.bd-positioning-item > .bd-positioning-text:first-child {
    margin-left: 40px; /* 32px (img width) + 15px (gap) = 47px */
}

.bd-positioning-text strong {
    font-size: 20px;
    color: #33363b;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 5px;
    color: #33363b;
}

.bd-positioning-text span,  .bd-positioning-text p{
    font-size: 18px;
    color: #5f6771;
    font-family: 'Hind-Light', sans-serif;
}

/* 响应式调整 */
@media (max-width: 992px) {
    .bd-positioning-img {
        width: 100%;
        height: 40%;
    }

    .bd-positioning {
        flex-direction: column;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .bd-positioning-content-wrapper {
        justify-content: center;
        margin-top: 15%;
        /* Overlap image from top */
    }

    .bd-positioning-card {
        padding: 40px 30px;
        max-width: 90%;
    }
}

@media (max-width: 768px) {
    .bd-positioning-content-wrapper {
        margin-top: 25%;
    }

    .bd-positioning-card {
        padding: 30px 20px;
        max-width: 100%;
    }

    .bd-positioning-card h2 {
        font-size: 28px;
    }

    .bd-positioning-desc {
        font-size: 16px;
        margin-bottom: 30px;
    }

    .bd-positioning-item img {
        width: 32px;
        height: 32px;
    }

    .bd-positioning-text strong {
        font-size: 16px;
    }

    .bd-positioning-text span,  .bd-positioning-text p {
        font-size: 14px;
    }
}

/* =========================================
   Building Details: Window Types
   ========================================= */
.bd-types {
    padding: 0 15px 40px 15px; /* Removed top padding, added side padding to match generic content */
    max-width: 1200px;
    margin: 0 auto;
}


.bd-types-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.bd-type-item {
    width: calc(33.333% - 20px);
    display: flex;
    flex-direction: column;
}

.bd-type-img-link {
    display: block;
    width: 100%;
}

.bd-type-img {
    width: 100%;
    aspect-ratio: 384 / 254;
    overflow: hidden;
    background-color: #eef1f6;
    margin-bottom: 20px;
    position: relative;
}

.bd-type-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover effect: Zoom image */
.bd-type-item:hover .bd-type-img img {
    transform: scale(1.1);
}

.bd-type-title-link {
    font-size: 24px;
    color: #5f6771;
    font-family: 'Hind-Medium', sans-serif;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
    line-height: 1.6;
}

.bd-type-title-link:hover {
    color: #0056b3;
}

.bd-type-title-text {
    font-size: 24px;
    color: #5f6771;
    font-family: 'Hind-Medium', sans-serif;
    cursor: default;
    line-height: 1.6;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .bd-type-item {
        width: calc(50% - 15px);
    }
}

@media (max-width: 768px) {
    .bd-types {
        padding: 20px 15px;
    }

    .bd-type-item {
        width: 100%;
    }

    .bd-type-title-link,
    .bd-type-title-text {
        font-size: 20px;
    }
}

/* =========================================
   Building Details: Casement Window System
   ========================================= */
.bd-system-grid {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    gap: 40px;
}

.bd-system-item {
    width: calc(50% - 20px);
    display: flex;
    flex-direction: column;
}

.bd-system-img-link {
    display: block;
    width: 100%;
}

.bd-system-img {
    width: 100%;
    aspect-ratio: 588 / 320;
    overflow: hidden;
    background-color: #eef1f6;
    margin-bottom: 25px;
    position: relative;
}

.bd-system-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* Hover effect: Zoom image */
.bd-system-item:hover .bd-system-img img {
    transform: scale(1.1);
}

.bd-system-title-link {
    font-size: 26px;
    color: #5f6771;
    font-family: 'Hind-Medium', sans-serif;
    text-decoration: none;
    margin-bottom: 10px;
    transition: color 0.3s ease;
    display: inline-block;
}

.bd-system-title-link:hover {
    color: #0056b3;
}

.bd-system-title-text {
    font-size: 26px;
    color: #5f6771;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 10px;
    cursor: default;
}

.bd-system-desc {
    font-size: 18px;
    color: #5f6771;
    margin-bottom: 20px;
    font-family: 'Hind-Light', sans-serif;
}

.bd-system-divider {
    width: 100%;
    height: 1px;
    background-color: #848a91;
    margin-bottom: 25px;
}

.bd-system-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bd-system-list li {
    font-size: 20px;
    color: #5f6771;
    line-height: 1.6;
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
    font-family: 'Hind-Light', sans-serif;
}

.bd-system-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 4px;
    height: 4px;
    background-color: #0056b3;
}

@media (max-width: 768px) {
    .bd-system-grid {
        flex-direction: column;
        margin-top: 20px;
        gap: 20px;
    }

    .bd-system-item {
        width: 100%;
        margin-bottom: 10px;
    }

    .bd-system-title-link,
    .bd-system-title-text {
        font-size: 20px;
    }

    .bd-system-desc {
        font-size: 16px;
    }

    .bd-system-list li {
        font-size: 16px;
    }
}

/* =========================================
   Building Details: Solutions Section
   ========================================= */
.bd-solutions {
    padding: 0 15px 40px 15px; /* Removed top padding, added side padding to match generic content */
    max-width: 1200px;
    margin: 0 auto;
}

.bd-solution-row {
    display: flex;
    align-items: center;
    gap: 50px;
    margin-bottom: 50px;
}

.bd-solution-img {
    width: 60%;
    aspect-ratio: 750 / 336;
    background-color: #eef1f6;
    overflow: hidden;
}

.bd-solution-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.bd-solution-row:hover .bd-solution-img img {
    transform: scale(1.05);
}

.bd-solution-content {
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.bd-solution-title {
    font-size: 26px;
    color: #232323;
    font-family: 'Hind', sans-serif;
    margin-bottom: 20px;
}

.bd-solution-content p {
    font-size: 20px;
    color: #343434;
    line-height: 1.6;
    margin-bottom: 30px;
    font-family: 'Hind', sans-serif;
}

.bd-btn-explore {
    display: inline-flex;
    align-items: center;
    padding: 8px 50px;
    background: #fff;
    color: #0148a1;
    font-size: 20px;
    font-family: 'Hind', sans-serif;
    text-decoration: none;
    transition: color 0.3s ease;
    position: relative;
    padding-right: 80px;
    /* Make space for arrow */
    border: solid 1px #0148a1;
}

.bd-btn-explore::after {
    content: '→';
    position: absolute;
    right: 50px;
    top: 55%;
    transform: translateY(-50%);
    font-size: 20px;
    transition: transform 0.3s ease;
}

.bd-btn-explore:hover {
    color: #004494;
    /* Darker blue on hover */
    border-color: #004494;
}

.bd-btn-explore:hover::after {
    transform: translate(5px, -50%);
}

/* 响应式调整 */
@media (max-width: 992px) {
    .bd-solution-row {
        flex-direction: column !important;
        /* Force stack for normal row (img then text) */
        gap: 30px;
        margin-bottom: 40px;
    }

    .bd-solution-row.bd-solution-reverse {
        flex-direction: column-reverse !important;
        /* Reverse row needs column-reverse so img (which is 2nd in HTML) goes on top */
    }

    .bd-solution-img,
    .bd-solution-content {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .bd-solution-row {
        margin-bottom: 60px;
    }
    .bd-solutions {
        padding: 20px 15px;
    }

    .bd-solution-title {
        font-size: 24px;
    }

    .bd-solution-content p {
        font-size: 16px;
    }

    .bd-btn-explore {
        font-size: 15px;
        /* Even smaller font */
        padding: 4px 20px;
        /* Reduced padding top/bottom and left */
        padding-right: 40px;
        /* Reduced space for arrow */
    }

    .bd-btn-explore::after {
        right: 15px;
        /* Move arrow even closer */
        font-size: 16px;
        /* Smaller arrow */
    }
}

/* =========================================
   Building Details: Who We Serve Section
   ========================================= */
.bd-serve {
    padding: 40px 0px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.bd-serve h2 {
    font-size: 36px;
    color: #232323;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 50px;
}

/* Images Grid */
.bd-serve-grid {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 80px;
}

.bd-serve-item {
    width: calc(33.333% - 20px);
}

.bd-serve-img {
    width: 100%;
    aspect-ratio: 385 / 254;
    background-color: #eef1f6;
    position: relative;
    overflow: hidden;
}

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

.bd-serve-tag {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    padding: 8px 22px;
    font-size: 16px;
    font-family: 'Hind-Medium', sans-serif;
    text-align: left;
    /* Notice the background color width only wraps the text */
    display: inline-block;
    max-width: 90%;
}

/* Text Grid */
.bd-serve-text-grid {
    display: flex;
    justify-content: center;
    gap: 100px;
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
}

.bd-serve-text-item {
    flex: 1;
}

.bd-serve-text-item h3 {
    font-size: 26px;
    color: #232323;
    font-family: 'Hind-Medium', sans-serif;
    margin-bottom: 15px;
}

.bd-serve-divider {
    width: 86px;
    height: 2px;
    background-color: #0148a1;
    margin-bottom: 25px;
}

.bd-serve-text-item p {
    font-size: 18px;
    color: #5d5d5d;
    line-height: 1.6;
    font-family: 'Hind', sans-serif;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .bd-serve-grid {
        flex-wrap: wrap;
        justify-content: center;
    }

    .bd-serve-item {
        width: calc(50% - 15px);
        margin-bottom: 30px;
    }

    .bd-serve-text-grid {
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .bd-serve {
        padding: 20px 15px;
    }

    .bd-serve h2 {
        font-size: 28px;
        margin-bottom: 30px;
    }

    .bd-serve-grid {
        flex-direction: column;
        margin-bottom: 40px;
    }

    .bd-serve-item {
        width: 100%;
        margin-bottom: 20px;
    }

    .bd-serve-text-grid {
        flex-direction: column;
        gap: 40px;
    }

    .bd-serve-text-item h3 {
        font-size: 20px;
    }

    .bd-serve-text-item p {
        font-size: 16px;
    }
}

/* =========================================
   第六板块：Technical Resource Center
   ========================================= */
.tech-resource-section {
    width: 100%;
    background-color: #fff;
    padding-top: 80px;
}

.tech-resource-container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tech-resource-content {
    flex: 1;
    max-width: 800px;
}

.tech-resource-content h2 {
    font-size: 48px;
    font-family: 'Hind-Medium', sans-serif;
    color: #262626;
    margin-bottom: 20px;
}

.tech-resource-content p {
    font-size: 24px;
    line-height: 1.6;
    color: #555;
    font-family: 'Hind', sans-serif;
    margin: 0;
}

.tech-resource-action {
    margin-left: 50px;
}

.btn-download {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    background-color: #0055a2;
    color: #fff;
    font-size: 20px;
    font-family: 'Hind', sans-serif;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-download:hover {
    background-color: #003d7a;
    color: #fff;
}

.btn-download .download-icon {
    display: inline-flex;
    margin-right: 12px;
}

/* 响应式调整 */
@media screen and (max-width: 992px) {
    .tech-resource-container {
        flex-direction: column;
        text-align: center;
    }

    .tech-resource-content {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .tech-resource-action {
        margin-left: 0;
    }
}

@media screen and (max-width: 768px) {
    .tech-resource-section {
        padding: 50px 0;
    }

    .tech-resource-content h2 {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .tech-resource-content p {
        font-size: 16px;
    }

    .btn-download {
        font-size: 16px;
        padding: 12px 24px;
    }
}