/* CSS 变量定义 ------------材料价值*/
:root {
    --section-bg: #ffffff; /* 整个版块的背景色 */
    --text-color-primary: #2c3e50; /* 主标题和特性的标题颜色 */
    --text-color-secondary: #7f8c8d; /* 正文颜色 */
    --icon-size: 60px; /* 图标的尺寸 */
}

/* 整体版块容器样式 */
.partner-section {
    background-color: var(--section-bg);
    padding: 30px 20px;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; /* 统一字体 */
    text-align: center; /* 保持主标题居中 */
}

/* 主标题样式 */
.section-title {
    margin-bottom: 50px;
}

/* 特性网格容器 */
.features-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

/* 单个特性容器 */
.feature-item {
    flex: 1;
    text-align: left; /* 标题和描述左对齐 */
}

/* 新增：部分图片样式，确保占据整个 feature-item 宽度 */
.section-image {
    width: 100%; /* 占据父容器的全部宽度 */
    height: auto;
    margin-bottom: 20px;
    display: block; /* 确保是块级元素 */
}

/* 原有的图标图片样式（这里注释或删除，因为现在用 .section-image 了）
.feature-icon-img {
    max-width: 50px;
    height: auto;
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
} */

/* 特性标题样式 */
.feature-title {
    font-size: 16px;
    font-weight: bold;
    color: #0f403f;
    margin-bottom: 10px;
    line-height: 1.4;
    text-align: left; /* 确保小标题左对齐 */
}

/* 覆盖 HTML 内联样式，使标题在 feature-item 内部居中 */
.feature-item h3.feature-title {
    text-align: center !important;
}

/* 覆盖 HTML 内联样式，使描述在 feature-item 内部居中 */
.feature-item p.feature-description:first-of-type {
    text-align: center !important;
}

/* 特性描述样式 */
.feature-description {
    font-size: 14px;
    color: var(--text-color-secondary);
    line-height: 1.6;
    text-align: left; /* 文本左对齐 */
}

/* 列表项的文本保持左对齐 */
.feature-item ul {
    list-style: disc; /* 添加列表点 */
    padding-left: 20px;
}
.feature-item li {
    text-align: left;
}


/* 响应式调整 - 手机端修改 */
@media (max-width: 768px) { /* 针对更小的手机屏幕进行优化 */
    .features-grid {
        flex-direction: column; /* 关键：改为垂直堆叠 */
        gap: 40px; /* 增加垂直间距 */
        padding: 0 10px; /* 增加左右内边距 */
    }
    .feature-item {
        flex: 0 0 100%;
        width: 100%;
        margin-bottom: 0;
        text-align: left;
    }
}

/* 保持原有平板响应式（如果需要） */
@media (min-width: 769px) and (max-width: 1024px) {
    .features-grid {
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .feature-item {
        flex: 0 0 calc(50% - 15px); /* 平板上每行显示两个 */
        margin-bottom: 30px;
        text-align: left;
    }
}