.about-section {



    display: grid;

    grid-template-columns: repeat(2, 1fr); /* Apply 2-column grid layout */

    gap: 20px;

    align-items: center;



    color: #fff;

    background-color: #002b4f;

    padding: 60px 20px;

    text-align: left;

    height: 400px; /* 添加固定高度 */

}



.about-text, .about-stats {

    padding: 20px;

    box-sizing: border-box; /* 包括内边距在宽度计算内 */

}



.stats {

    display: grid; /* 修改为网格布局 */

    grid-template-columns: repeat(3, 1fr); /* Apply 2-column grid layout */

    gap: 20px;

}



.stat-item {

    flex-direction: column; /* 垂直排列 */

    align-items: center; /* 居中对齐 */

    text-align: center; /* 文本居中 */

    padding: 10px;

    border: none; /* 移除边框 */

}



.stat-item img {

    width: 60px;

    height: 60px;

    margin-bottom: 10px;

    transform: scale(1);

    transfron: 0.3s;

    padding: 5px;

    background-color: #fff;

    border-radius: 15px

}

.stat-item img:hover {

    transform: scale(1.2); /* 图标放大 */

    transfron: 0.3s; /* 添加过渡效果 */

}



.stat-item h2 {

    font-size: 24px; /* 调整字体大小 */

    margin: 5px 0;

}



.stat-item p {

    font-size: 14px; /* 调整字体大小 */

    margin: 0;

}



.more-button {

    display: inline-block;

    margin-top: 20px;

    padding: 10px 20px;

    font-size: 16px;

    color: #fff;

    border: 1px solid #fff;

    border-radius: 5px;

    text-decoration: none;

    transition: background-color 0.3s ease, color 0.3s ease;

}



.more-button:hover {

    background-color: #fff;

    color: #002b4f;

}



@media (max-width: 1024px) {

    .about-section {

        grid-template-columns: 1fr; /* Single column layout */

        height: auto; /* Remove fixed height */

    }



}