.hero-section {
    background: url('/pcshop/images/aboutusbg.jpg.png') center/cover;
    height: 250px;
    color: white;
    display: flex;
    align-items: center;
    padding: 0 50px;
    position: relative;
}

.hero-content {
    width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

    .hero-content h1 {
        font-size: 36px;
        font-weight: bold;
        margin-bottom: 15px;
    }

    .hero-content p {
        font-size: 16px;
        max-width: 460px;
    }

.certification-container {
    background-color: #F6F6F6; /* 主元素的背景色 */
    padding: 30px; /* 内部填充 */
    display: flex; /* 使用Flexbox布局 */
    max-width: 1200px; /* 限制最大宽度 */
    width: 100%; /* 宽度占满父容器 */
    gap: 50px; /* 左右两部分之间的间距 */
    box-sizing: border-box; /* 边框盒模型 */
    margin-top: 30px;
    margin: 30px auto 0 auto;
}

.img-section {
    flex: 1; /* 左侧占据一半宽度 */
    display: flex; /* 内部也使用Flexbox布局，让两张图片并排 */
    gap: 30px; /* 两张图片之间的间距 */
    justify-content: center; /* 水平居中图片 */
    align-items: center; /* 垂直居中图片 */
    box-sizing: border-box;
}

.image-wrapper {
    background-color: white; /* 图片背景（白色卡片效果） */
    padding: 20px; /* 图片内部填充 */
    border-radius: 10px; /* 图片卡片圆角 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* 图片卡片阴影 */
    flex: 1; /* 每张图片卡片占据左侧区域的一半 */
    display: flex; /* 再次使用Flexbox来居中图片 */
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    height: 350px;
}

    .image-wrapper img {
        max-width: 100%; /* 图片最大宽度为父容器的100% */
        max-height: 100%;
        height: auto; /* 高度自动调整，保持图片比例 */
        display: block; /* 移除图片底部可能存在的额外空白 */
        border-radius: 5px; /* 图片自身的轻微圆角 */
        object-fit: contain;
    }

.content-section {
    flex: 1; /* 右侧占据一半宽度 */
    display: flex; /* 使用Flexbox布局 */
    align-items: center; /* 垂直居中文本内容 */
    justify-content: flex-start; /* 文本左对齐 */
    box-sizing: border-box;
}

    .content-section p {
        font-size: 1.1em; /* 字体大小 */
        line-height: 1.8; /* 行高 */
        color: #555; /* 字体颜色 */
        text-align: left; /* 文本左对齐 */
        margin: 0; /* 移除段落默认外边距 */
        padding: 20px;
    }

/* 响应式设计：小屏幕设备下垂直堆叠 */
@media (max-width: 992px) {
    .certification-container {
        flex-direction: column; /* 左右元素垂直堆叠 */
        padding: 25px;
        gap: 25px;
    }

    .img-section {
        flex-direction: column; /* 左侧两张图片也垂直堆叠 */
        gap: 15px;
    }

    .image-wrapper {
        padding: 15px;
        flex: none; /* 取消flex:1，让图片卡片宽度自适应 */
        width: 100%; /* 图片卡片宽度占满 */
    }

    .content-section {
        padding: 10px 0;
        text-align: center; /* 文本居中 */
        justify-content: center;
    }

        .content-section p {
            font-size: 1em;
            max-width: 100%; /* 文本宽度占满 */
        }
}

@media (max-width: 576px) {
    .certification-container {
        padding: 20px;
    }

    .image-wrapper {
        padding: 10px;
    }
}