/* 基础样式 */
body {
    font-family: 'Microsoft YaHei', sans-serif; /* 设置全局字体为微软雅黑，备用字体为无衬线字体 */
    color: #333; /* 设置全局文本颜色为深灰色 */
    line-height: 1.6; /* 设置全局行高为1.6倍字体大小，以提高可读性 */
    font-size: 20px; /* 设置全局默认字体大小为20px */
    margin: 0; /* 移除默认的body边距 */
    padding: 0; /* 移除默认的body填充 */
}

/* 导航栏样式 */
.navbar {
    background: white; /* 设置导航栏背景色为白色 */
    display: flex; /* 使用Flexbox布局 */
    /*   flex-direction: column;   手机端垂直排列*/
    padding: 15px 10%; /* 设置内边距，上下各15px，左右各占父容器宽度的10% */
    align-items: center; /* 在垂直方向上居中对齐Flexbox中的子元素 */
}

.logo {
    display: flex; /* 使用Flexbox布局 */
    /* align-items: center; */ /* 移除这一行，避免Logo和旁边的文本在垂直方向上居中对齐 */
}

.logo-img {
    width: 300px; /* 设置Logo图片的宽度为300px */
    height: 100px; /* 设置Logo图片的高度为100px */
    margin-right: 10px; /* 在Logo图片右侧添加10px的外边距 */
    display: block; /* 设置为块级元素 */
    margin-left: 0; /* 确保左边距为0 */
}

.nav-menu {
    flex: 1; /* 使.nav-menu占据剩余的空间，并根据需要进行伸缩 */
    display: flex; /* 使用Flexbox布局 */
    justify-content: space-around; /* 在水平方向上均匀分布Flexbox中的子元素（即导航菜单项），并在它们之间留出相等的空间 */
    margin-left: 10px; /* 在导航菜单左侧添加10px的外边距 */
}

.nav-item:hover {
    color: blue; /* 当鼠标悬停在导航菜单项上时，字体颜色变为蓝色 */
    background-color: #f0f0f0; /* 添加浅色背景以增强对比度 */
}

.nav-item {
    color: rgb(21, 31, 231); /* 设置导航菜单项的字体颜色 */
    text-decoration: none; /* 移除链接的下划线 */
    padding: 10px 20px; /* 设置内边距 */
    font-size: inherit; /* 继承父元素的字体大小 */
}

/* 页脚样式 */
footer {
    background: #2c3e50; /* 设置页脚背景色 */
    color: white; /* 设置页脚文本颜色为白色 */
    padding: 15px; /* 设置内边距 */
    text-align: center; /* 文本居中对齐 */
    margin-top: 50px; /* 设置页脚与上方内容的间距 */
}

/* 通用样式 */
.container {
    max-width: 1100px; /* 设置最大宽度为1100px */
    margin: 0 auto; /* 水平居中 */
    padding: 15px; /* 设置内边距 */
}

.section-title {
    text-align: center; /* 文本居中对齐 */
    font-size: 2.2em; /* 设置字体大小为父元素字体大小的2.2倍 */
    margin-bottom: 40px; /* 设置底部间距 */
    color: #1a365d; /* 设置文本颜色 */
}

/* 产品页面样式 */
.product-grid {
    display: grid; /* 使用Grid布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列数，每列最小宽度为300px */
    gap: 30px; /* 设置网格单元之间的间距 */
}

.product-card {
    background: #fff; /* 设置背景色为白色 */
    border-radius: 8px; /* 设置圆角 */
    box-shadow: 0 2px 15px rgba(0,0,0,0.1); /* 设置阴影效果 */
    padding: 20px; /* 设置内边距 */
    transition: transform 0.3s; /* 设置过渡效果 */
}

.product-card img {
    width: 100%; /* 图片宽度为100% */
    height: 300px; /* 图片高度为300px */
    object-fit: cover; /* 图片覆盖整个区域 */
    border-radius: 5px; /* 设置圆角 */
}

/* 关于我们页面样式 */
.about-content {
    display: grid; /* 使用Grid布局 */
    grid-template-columns: 1fr 1fr; /* 设置两列，每列宽度相等 */
    gap: 40px; /* 设置网格单元之间的间距 */
    align-items: center; /* 在垂直方向上居中对齐网格单元 */
}

.about-content img {
    width: 100%; /* 图片宽度为100% */
    border-radius: 10px; /* 设置圆角 */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2); /* 设置阴影效果 */
}

.advantage-list {
    list-style: none; /* 移除列表样式 */
    padding: 0; /* 移除内边距 */
    font-size: 1.2em; /* 设置字体大小为父元素字体大小的1.6倍 */
}

.advantage-list li {
    padding: 12px; /* 设置内边距 */
    margin: 10px 0; /* 设置顶部和底部间距 */
    background: #f8f9fa; /* 设置背景色 */
    border-left: 4px solid #1a365d; /* 设置左侧边框 */
}

/* 资质证书样式 */
.product-grid1 {
    display: grid; /* 使用Grid布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列数，每列最小宽度为300px */
    gap: 30px; /* 设置网格单元之间的间距 */
}

.product-card1 {
    background: #fff; /* 设置背景色为白色 */
    border-radius: 8px; /* 设置圆角 */
    box-shadow: 0 2px 15px rgba(0,0,0,0.1); /* 设置阴影效果 */
    padding: 20px; /* 设置内边距 */
    transition: transform 0.3s; /* 设置过渡效果 */
}

.product-card1:hover {
    transform: translateY(-5px); /* 当鼠标悬停时，向上移动5px */
}

.product-card1 img {
    width: 100%; /* 图片宽度为100% */
    height: 450px; /* 图片高度为450px */
    object-fit: cover; /* 图片覆盖整个区域 */
    border-radius: 5px; /* 设置圆角 */
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .container {
        padding: 20px; /* 减少内边距以适应较小的屏幕 */
    }
}

@media (max-width: 992px) {
    .navbar {
        padding: 10px 5%; /* 减少内边距以适应较小的屏幕 */
    }

    .logo-img {
        width: 250px; /* 减少Logo图片的宽度 */
        height: 80px; /* 减少Logo图片的高度 */
    }

    .nav-menu {
        margin-left: 5px; /* 减少导航菜单左侧外边距 */
    }

    .section-title {
        font-size: 2em; /* 减少字体大小 */
    }

    .product-grid {
        gap: 20px; /* 减少网格单元之间的间距 */
    }

    .product-card img {
        height: 250px; /* 减少图片高度 */
    }

    .about-content {
        gap: 30px; /* 减少网格单元之间的间距 */
    }

    .about-content img {
        border-radius: 8px; /* 减少圆角 */
    }

    .advantage-list {
        font-size: 1.5em; /* 减少字体大小 */
    }

    .product-card1 img {
        height: 400px; /* 减少图片高度 */
    }
}

@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* 改为垂直排列 */
        align-items: flex-start; /* 左对齐 */
    }

    .logo {
        margin-bottom: 10px; /* 添加底部间距 */
    }

    .nav-menu {
        flex-direction: column; /* 改为垂直排列 */
        align-items: flex-start; /* 左对齐 */
        margin-left: 0; /* 移除左侧外边距 */
    }

    .nav-item {
        margin-bottom: 5px; /* 添加底部间距 */
    }

    .container {
        padding: 15px; /* 减少内边距 */
    }

    .section-title {
        font-size: 1.8em; /* 减少字体大小 */
    }

    .product-grid {
        grid-template-columns: 1fr; /* 设置一列 */
        gap: 15px; /* 减少网格单元之间的间距 */
    }

    .product-card img {
        height: 200px; /* 减少图片高度 */
    }

    .about-content {
        grid-template-columns: 1fr; /* 设置一列 */
        gap: 20px; /* 减少网格单元之间的间距 */
    }

    .about-content img {
        border-radius: 6px; /* 减少圆角 */
    }

    .advantage-list {
        font-size: 1.4em; /* 减少字体大小 */
    }

    .product-card1 img {
        height: 350px; /* 减少图片高度 */
    }
}

@media (max-width: 576px) {
    .container {
        padding: 10px; /* 减少内边距 */
    }

    .section-title {
        font-size: 1.6em; /* 减少字体大小 */
    }

    .product-grid {
        gap: 10px; /* 减少网格单元之间的间距 */
    }

    .product-card img {
        height: 150px; /* 减少图片高度 */
    }

    .about-content {
        gap: 15px; /* 减少网格单元之间的间距 */
    }

    .about-content img {
        border-radius: 4px; /* 减少圆角 */
    }

    .advantage-list {
        font-size: 1.2em; /* 减少字体大小 */
    }

    .product-card1 img {
        height: 300px; /* 减少图片高度 */
    }
}