/* ===== CSS重置和基础样式 ===== */

/* 通用选择器，重置所有元素的默认边距和填充 */
* {
    margin: 0;                    /* 清除默认外边距 */
    padding: 0;                   /* 清除默认内边距 */
    box-sizing: border-box;       /* 设置盒模型为border-box，便于布局计算 */
    font-family: 'Helvetica Neue', Arial, sans-serif; /* 设置默认字体栈 */
}

/* 页面主体样式 */
body {
    line-height: 1.6;             /* 设置行高为1.6倍，提高可读性 */
    color: #333;                  /* 设置主要文字颜色为深灰色 */
    background-color: #f9f9f9;    /* 设置页面背景色为浅灰色 */
    overflow-x: hidden;           /* 隐藏水平滚动条，防止横向滚动 */
}

/* 容器类，用于限制内容宽度并居中 */
.container {
    width: 100%;                  /* 宽度100%适应父容器 */
    max-width: 1600px;            /* 最大宽度1200px，在大屏幕上不会过宽 */
    margin: 0 auto;               /* 上下边距为0，左右自动（居中效果） */
    padding: 0 20px;              /* 左右内边距20px，在小屏幕上提供呼吸空间 */
}

/* ===== 顶部语言选择栏样式 ===== */

/* 顶部语言选择栏容器 */
.top-language-bar {
    background-color: #000;       /* 黑色背景 */
    height: 25px;                 /* 固定高度25px */
    position: fixed;              /* 固定定位 */
    top: 0;                       /* 定位到页面顶部 */
    left: 0;                      /* 定位到页面左侧 */
    width: 100%;                  /* 宽度100%，横跨整个页面 */
    z-index: 1001;                /* 设置比header更高的z-index */
    display: flex;                /* 启用flex布局 */
    align-items: center;          /* 垂直居中对齐 */
}

/* 顶部语言选择栏的容器特殊样式 */
.top-language-bar .container {
    display: flex;                /* 启用flex布局 */
    justify-content: flex-end;    /* 右对齐 */
    align-items: center;          /* 垂直居中 */
}

/* 语言选择器包装器 */
.language-selector-wrapper {
    position: relative;           /* 相对定位，用于下拉菜单定位 */
}

/* 语言选择按钮 */
.language-selector-btn {
    background: none;              /* 无背景 */
    border: none;                 /* 无边框 */
    color: #fff;                  /* 白色文字 */
    cursor: pointer;              /* 手型光标 */
    display: flex;                /* flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 5px;                     /* 元素间距 */
    font-size: 0.8rem;            /* 字体大小 */
    font-weight: 500;            /* 字体粗细 */
    padding: 0;                   /* 无内边距 */
    transition: all 0.3s ease;     /* 过渡效果 */
}

/* 语言选择按钮悬停效果 */
.language-selector-btn:hover {
    color: #3498db;              /* 悬停时变蓝色 */
}

/* 语言选择按钮激活状态 */
.language-selector-btn.active {
    color: #3498db;              /* 激活时蓝色 */
}

/* 语言文字 */
.language-text {
    font-size: 0.8rem;           /* 字体大小 */
}

/* 下拉箭头 */
.language-arrow {
    font-size: 0.6rem;           /* 箭头字体大小 */
    transition: transform 0.3s ease; /* 旋转过渡效果 */
}

/* 激活状态下箭头旋转 */
.language-selector-btn.active .language-arrow {
    transform: rotate(180deg);     /* 旋转180度 */
}

/* 语言下拉菜单 */
.language-dropdown-menu {
    position: absolute;           /* 绝对定位 */
    top: 100%;                    /* 定位到按钮下方 */
    right: 0;                     /* 右对齐 */
    background: white;            /* 白色背景 */
    border-radius: 8px;          /* 圆角 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 阴影效果 */
    min-width: 140px;            /* 最小宽度 */
    opacity: 0;                   /* 初始透明 */
    visibility: hidden;           /* 初始隐藏 */
    transform: translateY(-5px);  /* 初始向上偏移 */
    transition: all 0.3s ease;    /* 过渡效果 */
    border: 1px solid rgba(0, 0, 0, 0.1); /* 边框 */
    overflow: hidden;            /* 隐藏溢出 */
    z-index: 1002;              /* 确保在最上层 */
}

/* 显示下拉菜单 */
.language-dropdown-menu.show {
    opacity: 1;                   /* 完全不透明 */
    visibility: visible;          /* 可见 */
    transform: translateY(0);     /* 回到原位置 */
}

/* 语言菜单项 */
.language-menu-item {
    display: flex;                /* flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 8px;                     /* 元素间距 */
    padding: 8px 12px;           /* 内边距 */
    text-decoration: none;        /* 无下划线 */
    color: #333;                  /* 深灰色文字 */
    transition: all 0.2s ease;    /* 过渡效果 */
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 底部边框 */
    font-size: 0.8rem;           /* 字体大小 */
}

/* 最后一个语言菜单项移除底部边框 */
.language-menu-item:last-child {
    border-bottom: none;
}

/* 语言菜单项悬停效果 */
.language-menu-item:hover {
    background-color: #f8f9fa;    /* 浅灰色背景 */
    color: #2c3e50;              /* 深蓝色文字 */
}

/* 激活的语言菜单项 */
.language-menu-item.active {
    background-color: #e3f2fd;    /* 浅蓝色背景 */
    color: #1976d2;              /* 蓝色文字 */
    font-weight: 600;            /* 字体加粗 */
}

/* 国旗图标 */
.flag-icon {
    font-size: 1rem;             /* 国旗大小 */
    width: 16px;                 /* 固定宽度 */
    text-align: center;           /* 居中对齐 */
}

/* 语言名称 */
.language-name {
    font-size: 0.8rem;           /* 字体大小 */
    font-weight: 500;            /* 字体粗细 */
}

/* ===== 导航栏样式 ===== */

/* 导航栏头部样式 */
header {
    background-color: rgba(255, 255, 255, 0.95); /* 半透明白色背景 */
    color: #333;                  /* 文字颜色深灰色 */
    padding: 0 0;                 /* 上下内边距0，左右为0 */
    position: fixed;              /* 固定定位，随页面滚动 */
    top: 25px;                    /* 定位到顶部语言选择栏下方 */
    left: 0;                      /* 定位到页面左侧 */
    width: 100%;                  /* 宽度100%，横跨整个页面 */
    z-index: 1000;                /* 设置高z-index，确保导航栏在最上层 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 添加轻微阴影，增加层次感 */
    transition: all 0.3s ease;    /* 所有属性变化都有0.3秒的缓动过渡效果 */
}

/* 导航栏容器，使用flex布局 */
.nav-container {
    display: flex;                /* 启用flex布局 */
    justify-content: space-between; /* 子元素两端对齐，logo在左，菜单在右 */
    align-items: center;          /* 子元素垂直居中 */
    height: 80px;                 /* 固定导航栏高度为80px */
    position: relative;           /* 相对定位，用于子元素定位 */
}

/* 网站logo样式 */
.logo {
    display: flex;                /* 启用flex布局，用于logo图片和文字排列 */
    align-items: center;          /* 垂直居中对齐 */
    font-size: 1.8rem;            /* 设置logo文字大小为1.8rem */
    font-weight: bold;            /* 设置logo文字粗细为粗体 */
    color: #2c3e50;               /* 设置logo文字颜色为深蓝色 */
    height: 100%;                 /* 高度100%继承父容器高度 */
}

/* logo图片样式 */
.logo img {
    height: 25px;                 /* 固定logo图片高度为30px */
    width: auto;                  /* 宽度自动，保持图片原始比例 */
    max-height: 100%;             /* 最大高度100%，确保不超过容器高度 */
    margin-left: 0px;
    margin-right: 12px;           /* 图片右侧外边距12px，与文字保持距离 */
    object-fit: contain;          /* 图片适应方式：保持比例完整显示 */
    transition: all 0.3s ease;    /* 所有属性变化都有0.3秒的缓动过渡效果 */
}

/* 导航链接列表样式 */
.nav-links {
    display: flex;                /* 启用flex布局，水平排列导航项 */
    list-style: none;             /* 移除列表默认样式（圆点） */
    margin-left: 100px;           /* 左侧外边距100px，与logo保持距离 */
    flex: 1;                      /* 占据剩余空间 */
    justify-content: flex-start;   /* 左对齐 */
}

/* 单个导航项样式 */
.nav-links li {
    margin-left: 2rem;            /* 每个导航项左侧外边距2rem，项之间保持距离 */
}

/* 导航链接样式 */
.nav-links a {
    color: #333;                  /* 链接文字颜色为深灰色 */
    text-decoration: none;        /* 移除链接下划线 */
    font-weight: 500;             /* 设置字体中等粗细 */
    transition: color 0.3s;       /* 文字颜色变化有0.3秒过渡效果 */
    position: relative;           /* 设置为相对定位，用于伪元素定位 */
}

/* 导航链接悬停效果 */
.nav-links a:hover {
    color: #3498db;               /* 悬停时文字颜色变为蓝色 */
}

/* 导航链接下方的装饰线（伪元素） */
.nav-links a::after {
    content: '';                  /* 伪元素内容为空 */
    position: absolute;           /* 绝对定位，相对于链接元素 */
    bottom: -5px;                 /* 定位到链接下方5px */
    left: 0;                      /* 从左侧开始 */
    width: 0;                     /* 初始宽度为0，不可见 */
    height: 2px;                  /* 高度2px */
    background-color: #3498db;    /* 背景色蓝色 */
    transition: width 0.3s;       /* 宽度变化有0.3秒过渡效果 */
}

/* 导航链接悬停时装饰线效果 */
.nav-links a:hover::after {
    width: 100%;                  /* 悬停时宽度变为100%，显示完整下划线 */
}

/* 导航栏联系信息样式 */
.contact-info-nav {
    display: flex;                /* 启用flex布局 */
    flex-direction: column;       /* 垂直排列联系信息 */
    align-items: flex-end;        /* 右对齐 */
    margin-right: 0;              /* 右边距为0 */
    gap: 0rem;                  /* 联系信息项之间间距 */
}

/* 单个联系信息项 */
.contact-item-nav {
    display: flex;                /* 启用flex布局 */
    align-items: center;          /* 垂直居中对齐 */
    font-size: 0.9rem;           /* 字体大小 */
    color: #333;                  /* 文字颜色深灰色 */
}

/* 联系信息标签 */
.contact-label {
    font-weight: 600;             /* 字体中等粗细 */
    margin-right: 0.3rem;         /* 右侧间距 */
}

/* 联系信息值 */
.contact-value {
    color: #3498db;               /* 蓝色文字 */
    font-weight: 500;             /* 字体中等粗细 */
}

/* 移动端菜单切换按钮 */
.menu-toggle {
    display: none;                /* 默认隐藏，只在移动端显示 */
    background: none;             /* 无背景色 */
    border: none;                 /* 无边框 */
    color: #333;                  /* 图标颜色深灰色 */
    font-size: 1.5rem;            /* 图标大小1.5rem */
    cursor: pointer;              /* 鼠标悬停时显示手型光标 */
    padding: 5px;                 /* 内边距5px，增加点击区域 */
}

/* ===== 响应式设计 - 媒体查询 ===== */

/* 中等屏幕设备（平板等）样式 - 最大宽度992px */
@media (max-width: 992px) {
    .nav-links {
        margin-left: 30px;        /* 中等屏幕减小左侧间距为30px */
    }
    
    /* 中等屏幕联系信息调整 */
    .contact-info-nav {
        font-size: 0.85rem;      /* 稍微减小字体大小 */
    }
}

/* 小屏幕设备（手机等）样式 - 最大宽度768px */
@media (max-width: 768px) {
    /* 移动端顶部语言选择栏调整 */
    .top-language-bar {
        height: 22px;             /* 稍微减小高度 */
    }
    
    .language-selector-btn {
        font-size: 0.7rem;        /* 稍微减小字体 */
        gap: 4px;                 /* 减小间距 */
    }
    
    .language-text {
        font-size: 0.7rem;        /* 稍微减小字体 */
    }
    
    .language-arrow {
        font-size: 0.5rem;        /* 稍微减小箭头 */
    }
    
    .language-dropdown-menu {
        min-width: 120px;         /* 减小下拉菜单宽度 */
    }
    
    .language-menu-item {
        padding: 6px 10px;        /* 减小内边距 */
        gap: 6px;                 /* 减小间距 */
        font-size: 0.7rem;         /* 减小字体 */
    }
    
    .flag-icon {
        font-size: 0.9rem;         /* 稍微减小国旗大小 */
        width: 14px;              /* 减小宽度 */
    }
    
    .language-name {
        font-size: 0.7rem;         /* 减小字体 */
    }
    
    .menu-toggle {
        display: block;           /* 显示菜单切换按钮 */
    }
    
    /* 移动端导航链接样式 */
    .nav-links {
        display: none;            /* 默认隐藏导航菜单 */
        flex-direction: column;   /* 垂直排列导航项 */
        position: absolute;       /* 绝对定位 */
        top: 100%;                /* 定位到导航栏下方 */
        left: 0;                  /* 从左侧开始 */
        width: 100%;              /* 宽度100%，全屏显示 */
        background-color: white;  /* 背景色白色 */
        padding: 1rem 0;          /* 上下内边距1rem */
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1); /* 添加阴影 */
        margin-left: 0;           /* 重置左侧边距 */
        flex: none;               /* 重置flex属性 */
    }
    
    /* 激活状态的导航菜单 */
    .nav-links.active {
        display: flex;            /* 显示导航菜单 */
    }
    
    /* 移动端导航项样式 */
    .nav-links li {
        margin: 0.5rem 0;         /* 上下边距0.5rem，左右为0 */
        text-align: center;       /* 文字居中对齐 */
    }
    
    /* 移动端logo图片调整 */
    .logo img {
        height: 20px;             /* 稍微缩小logo高度 */
        margin-right: 8px;        /* 减小右侧间距 */
    }
    
    /* 移动端logo文字调整 */
    .logo span {
        font-size: 1.6rem;        /* 稍微缩小文字大小 */
    }
    
    /* 移动端联系信息样式 */
    .contact-info-nav {
        display: none;            /* 在移动端隐藏联系信息 */
    }
}

/* 超小屏幕设备样式 - 最大宽度480px */
@media (max-width: 480px) {
    /* 超小屏幕顶部语言选择栏调整 */
    .top-language-bar {
        height: 20px;             /* 进一步减小高度 */
    }
    
    .language-selector-btn {
        font-size: 0.6rem;        /* 进一步减小字体 */
        gap: 3px;                 /* 进一步减小间距 */
    }
    
    .language-text {
        font-size: 0.6rem;        /* 进一步减小字体 */
    }
    
    .language-arrow {
        font-size: 0.4rem;        /* 进一步减小箭头 */
    }
    
    .language-dropdown-menu {
        min-width: 100px;         /* 进一步减小下拉菜单宽度 */
    }
    
    .language-menu-item {
        padding: 5px 8px;         /* 进一步减小内边距 */
        gap: 5px;                 /* 进一步减小间距 */
        font-size: 0.6rem;        /* 进一步减小字体 */
    }
    
    .flag-icon {
        font-size: 0.8rem;         /* 进一步减小国旗大小 */
        width: 12px;              /* 进一步减小宽度 */
    }
    
    .language-name {
        font-size: 0.6rem;        /* 进一步减小字体 */
    }
    
    .logo img {
        height: 15px;             /* 进一步缩小logo高度 */
    }
    
    .logo span {
        font-size: 1.4rem;        /* 进一步缩小文字大小 */
    }
}

/* ===== 英雄区域样式 ===== */

/* 页面顶部大图展示区域 */
.hero {
    /* 背景图：深色渐变叠加 + 背景图片 */
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), 
                url('../pics/hero-bg.jpg') center/cover no-repeat;
    color: white;                 /* 文字颜色白色 */
    text-align: center;           /* 文字居中对齐 */
    padding: 12rem 1rem;          /* 上下内边距12rem，左右1rem */
    margin-top: 105px;            /* 上边距105px，为顶部语言选择栏(25px)和固定导航栏(80px)留出空间 */
}

/* 英雄区域主标题 */
.hero h1 {
    font-size: 3rem;              /* 大字体3rem */
    margin-bottom: 1.5rem;        /* 下方间距1.5rem */
    font-weight: 700;             /* 字体粗细700（粗体） */
}

/* 英雄区域描述文字 */
.hero p {
    font-size: 1.3rem;            /* 字体大小1.3rem */
    max-width: 700px;             /* 最大宽度700px，避免文字过长 */
    margin: 0 auto 2.5rem;        /* 上下边距0，左右自动（居中），下方2.5rem */
    opacity: 0.9;                 /* 90%不透明度，稍微透明 */
}


/* ===== 按钮基础样式 ===== */

/* 通用按钮样式 */
.btn {
    display: inline-block;        /* 行内块元素，可设置宽高 */
    padding: 0.8rem 1.8rem;       /* 内边距：上下0.8rem，左右1.8rem */
    text-decoration: none;        /* 移除下划线 */
    border-radius: 5px;           /* 圆角5px */
    font-weight: 600;             /* 字体中等粗细 */
    transition: all 0.3s;         /* 所有属性变化0.3秒过渡 */
    border: none;                 /* 无边框 */
    cursor: pointer;              /* 手型光标 */
}

/* 主要按钮样式 */
.btn-primary {
    background-color: #3498db;    /* 背景色蓝色 */
    color: white;                 /* 文字颜色白色 */
}

/* 主要按钮悬停效果 */
.btn-primary:hover {
    background-color: #2980b9;    /* 悬停时背景色变深蓝 */
    transform: translateY(-3px);  /* 向上移动3px，浮动效果 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 添加阴影，增强立体感 */
}

/* 次要按钮样式 */
.btn-secondary {
    background-color: transparent; /* 透明背景 */
    color: white;                 /* 文字颜色白色 */
    border: 2px solid white;      /* 白色边框2px */
}

/* 次要按钮悬停效果 */
.btn-secondary:hover {
    background-color: white;      /* 悬停时背景变白色 */
    color: #333;                  /* 文字颜色变深灰 */
    transform: translateY(-3px);  /* 向上移动3px */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* 添加阴影 */
}

/* ===== 内容区域通用样式 ===== */

/* 各个内容区块的通用样式 */
.section {
    padding: 6rem 0;              /* 上下内边距6rem，创建区块间距 */
}

/* 区块标题样式 */
.section-title {
    text-align: center;           /* 文字居中对齐 */
    margin-bottom: 4rem;          /* 下方间距4rem */
}

/* 区块主标题 */
.section-title h2 {
    font-size: 2.5rem;            /* 字体大小2.5rem */
    color: #2c3e50;               /* 深蓝色文字 */
    position: relative;           /* 相对定位，用于伪元素 */
    display: inline-block;        /* 行内块元素 */
    padding-bottom: 0.8rem;       /* 下方内边距，为装饰线留空间 */
    margin-bottom: 1rem;          /* 下方间距1rem */
}

/* 标题下方的装饰线 */
.section-title h2::after {
    content: '';                  /* 伪元素内容为空 */
    position: absolute;           /* 绝对定位 */
    bottom: 0;                    /* 定位到底部 */
    left: 50%;                    /* 从50%位置开始 */
    transform: translateX(-50%);  /* 向左平移50%自身宽度，实现居中 */
    width: 80px;                  /* 宽度80px */
    height: 4px;                  /* 高度4px */
    background-color: #3498db;    /* 蓝色背景 */
    border-radius: 2px;           /* 轻微圆角 */
}

/* 区块副标题/描述文字 */
.section-title p {
    font-size: 1.2rem;            /* 字体大小1.2rem */
    color: #7f8c8d;               /* 灰色文字 */
    max-width: 600px;             /* 最大宽度600px */
    margin: 0 auto;               /* 上下边距0，左右自动（居中） */
}

/* ===== 关于我们区域样式 ===== */

/* 关于我们内容容器 */
.about-content {
    display: flex;                /* 启用flex布局 */
    align-items: center;          /* 子元素垂直居中 */
    gap: 4rem;                    /* 子元素之间间距4rem */
}

/* 关于我们文字内容 */
.about-text {
    flex: 1;                      /* 占据剩余空间的1份 */
}

/* 关于我们小标题 */
.about-text h3 {
    font-size: 1.8rem;            /* 字体大小1.8rem */
    color: #2c3e50;               /* 深蓝色文字 */
    margin-bottom: 1.5rem;        /* 下方间距1.5rem */
}

/* 关于我们段落文字 */
.about-text p {
    margin-bottom: 1.5rem;        /* 段落之间间距1.5rem */
    font-size: 1.1rem;            /* 字体大小1.1rem */
    line-height: 1.8;             /* 行高1.8倍，提高可读性 */
}

/* 统计数据容器 */
.stats {
    display: flex;                /* 启用flex布局 */
    justify-content: space-between; /* 子元素两端对齐 */
    margin-top: 2rem;             /* 上方间距2rem */
}

/* 单个统计项 */
.stat-item {
    text-align: center;           /* 文字居中对齐 */
}

/* 统计数字 */
.stat-number {
    display: block;               /* 块级元素，独占一行 */
    font-size: 2.5rem;            /* 大字体2.5rem */
    font-weight: bold;            /* 粗体 */
    color: #3498db;               /* 蓝色文字 */
}

/* 统计标签 */
.stat-label {
    font-size: 1rem;              /* 正常字体大小 */
    color: #7f8c8d;               /* 灰色文字 */
}

/* 关于我们图片区域 */
.about-image {
    flex: 1;                      /* 占据剩余空间的1份 */
    border-radius: 10px;          /* 圆角10px */
    overflow: hidden;             /* 隐藏溢出内容 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

/* 关于我们图片 */
.about-image img {
    width: 100%;                  /* 宽度100%适应容器 */
    height: auto;                 /* 高度自动，保持比例 */
    display: block;               /* 块级元素 */
    transition: transform 0.5s;   /* 变换效果0.5秒过渡 */
}

/* 图片悬停效果 */
.about-image:hover img {
    transform: scale(1.05);       /* 悬停时放大5% */
}


/* ===== 产品展示样式 ===== */

/* 产品展示网格容器 */
.products-grid {
    display: grid;                /* 启用grid布局 */
    /* 自动适应列数，每列最小300px，最大1fr */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;                    /* 网格项之间间距2rem */
}

/* 单个产品卡片 */
.product-card {
    background: white;            /* 白色背景 */
    border-radius: 10px;          /* 圆角10px */
    padding: 2.5rem 2rem;          /* 内边距：上下2.5rem，左右2rem */
    text-align: center;            /* 文字居中对齐 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
    transition: all 0.3s;          /* 所有属性0.3秒过渡 */
    border: 1px solid #f0f0f0;     /* 浅灰色边框 */
}

/* 产品卡片悬停效果 */
.product-card:hover {
    transform: translateY(-10px); /* 悬停时向上移动10px */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* 增强阴影 */
}

/* 产品图片容器 */
.product-image {
    width: 100%;                   /* 宽度100%适应父容器 */
    max-width: 300px;              /* 最大宽度300px */
    aspect-ratio: 1 / 1;           /* 保持正方形比例 */
    margin: 0 auto 1.5rem;        /* 上下边距0，左右自动（居中），下方1.5rem */
    border-radius: 10px;          /* 圆角10px */
    overflow: hidden;              /* 隐藏溢出内容 */
    display: flex;                 /* flex布局 */
    align-items: center;           /* 垂直居中 */
    justify-content: center;       /* 水平居中 */
    background-color: #f8f9fa;     /* 浅灰色背景 */
}

/* 产品图片 */
.product-image img {
    width: 100%;                  /* 宽度100%适应容器 */
    height: 100%;                 /* 高度100%适应容器 */
    object-fit: cover;            /* 覆盖整个容器，可能裁剪 */
}

/* 产品标题 */
.product-card h3 {
    font-size: 1.5rem;            /* 字体大小1.5rem */
    margin-bottom: 1rem;          /* 下方间距1rem */
    color: #2c3e50;               /* 深蓝色文字 */
}

/* 产品描述文字 */
.product-card p {
    color: #7f8c8d;               /* 灰色文字 */
    margin-bottom: 0.8rem;        /* 下方间距0.8rem */
    font-size: 0.95rem;           /* 稍微小一点的字体 */
    line-height: 1.6;             /* 行高1.6倍，提高可读性 */
}

/* 产品链接 */
.product-link {
    color: #3498db;               /* 蓝色文字 */
    text-decoration: none;   /* 文字按钮：下划线 */
    font-weight: 600;             /* 中等粗细 */
    transition: color 0.2s;       /* 颜色变化过渡 */
    display: inline;              /* 纯文字样式 */
    padding: 0;                   /* 移除内边距 */
    border: none;                 /* 无边框 */
    border-radius: 0;             /* 无圆角 */
    margin-top: 1rem;             /* 上方间距1rem */
}

/* 产品链接悬停效果 */
.product-link:hover {
    color: #2980b9;               /* 悬停时颜色变深蓝 */
    background: transparent;      /* 无背景 */
    transform: none;              /* 移除位移 */
    box-shadow: none;             /* 移除阴影 */
}

/* ===== 工厂展示 跑马灯样式 ===== */

/* 外层容器 */
.factory-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;            /* 隐藏溢出，形成窗口 */
    background-color: #f9f9f9;   /* 与页面背景一致的底色 */
}

/* 滚动轨道 */
.marquee-track {
    display: flex;
    align-items: center;
    gap: 16px;                   /* 图片间隙 */
    animation: marquee-scroll 30s linear infinite; /* 匀速循环滚动 */
    background-color: #f9f9f9;   /* 轨道背景与页面背景一致 */
}

/* 单个图片项 */
.marquee-item {
    flex: 0 0 auto;              /* 不缩放不换行 */
    width: 400px;                /* 固定宽度 */
    height: 300px;               /* 固定高度 */
    border-radius: 12px;         /* 圆角 */
    overflow: hidden;            /* 裁剪图片 */
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    background: #f0f2f5;         /* 占位背景  */
}

.marquee-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;           /* 等比裁剪铺满 */
    display: block;
}

/* 悬停暂停滚动 */
.factory-marquee:hover .marquee-track {
    animation-play-state: paused;
}

/* 跑马灯关键帧：向左无缝滚动 */
@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-120%); } /* 8张图片复制一遍共16张，移动50%正好无缝衔接 */
}

/* ===== 团队展示样式（已移除） ===== */

/* ===== 联系信息样式 ===== */

/* 联系表单容器 */
.contact-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 联系表单容器 */
.contact-form {
    background: white;            /* 白色背景 */
    padding: 2.5rem;              /* 内边距2.5rem */
    border-radius: 10px;          /* 圆角10px */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); /* 轻微阴影 */
    width: 100%;                  /* 宽度100% */
}

/* 表单行布局 */
.form-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

/* 第一行表单组 - 3个输入框等宽分布 */
.form-row:first-child .form-group {
    flex: 1;
}

/* 全宽表单组 */
.form-group.full-width {
    flex: 1;
}

/* 提交按钮居中 */
.contact-form .btn {
    display: block;
    margin: 0 auto;
    margin-top: 1rem;
}

/* 联系表单标题 */
.contact-form h3 {
    font-size: 1.5rem;            /* 字体大小1.5rem */
    margin-bottom: 1.5rem;        /* 下方间距1.5rem */
    color: #2c3e50;               /* 深蓝色文字 */
}

/* 表单组（每个输入字段的容器） */
.form-group {
    margin-bottom: 1.5rem;        /* 下方间距1.5rem */
}

/* 表单输入字段和文本域 */
.form-group input,
.form-group textarea {
    width: 100%;                  /* 宽度100%适应容器 */
    padding: 0.8rem 1rem;         /* 内边距：上下0.8rem，左右1rem */
    border: 1px solid #e0e0e0;    /* 浅灰色边框 */
    border-radius: 5px;           /* 圆角5px */
    font-size: 1rem;              /* 正常字体大小 */
    transition: border-color 0.3s; /* 边框颜色变化0.3秒过渡 */
}

/* 输入字段获得焦点时的样式 */
.form-group input:focus,
.form-group textarea:focus {
    outline: none;                /* 移除默认轮廓线 */
    border-color: #3498db;        /* 边框颜色变为蓝色 */
}

/* ===== 固定联系方式板块样式 ===== */

/* 固定联系方式板块 */
.contact-widget {
    position: fixed;              /* 固定定位 */
    right: 1px;                  /* 距离右边框20px */
    bottom: 15rem;                /* 距离底部10rem */
    z-index: 1000;               /* 确保在最上层 */
    display: flex;                /* flex布局 */
    flex-direction: column;      /* 垂直排列 */
    gap: 8px;                     /* 图标之间间距8px */
}

/* 联系方式图标 */
.contact-widget .contact-icon {
    width: 60px;                  /* 固定宽度60px */
    height: 40px;                 /* 固定高度40px */
    background-color: #3498db;    /* 蓝色背景，与网站主题一致 */
    border-radius: 8px;           /* 圆角8px */
    display: flex;                /* flex布局 */
    align-items: center;          /* 垂直居中 */
    justify-content: center;      /* 水平居中 */
    cursor: pointer;              /* 手型光标 */
    transition: all 0.3s ease;    /* 过渡效果 */
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3); /* 蓝色阴影 */
    position: relative;           /* 相对定位，用于弹出菜单 */
    border: 1px solid rgba(255, 255, 255, 0.2); /* 白色边框 */
}

/* 联系方式图标悬停效果 */
.contact-widget .contact-icon:hover {
    background-color: #2980b9;    /* 悬停时深蓝色 */
    transform: scale(1.05);       /* 悬停时放大5% */
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4); /* 增强阴影 */
}

/* 联系方式图标文字 */
.contact-widget .contact-icon span {
    color: white;                 /* 白色文字 */
    font-size: 1.1rem;            /* 字体大小 */
    font-weight: bold;            /* 粗体 */
}

/* 弹出菜单样式 */
.contact-popup {
    position: absolute;           /* 绝对定位 */
    left: -200px;                 /* 定位到图标左侧 */
    top: 50%;                     /* 垂直居中 */
    transform: translateY(-50%);  /* 垂直居中调整 */
    background: white;            /* 白色背景 */
    border-radius: 8px;           /* 圆角8px */
    padding: 15px 20px;           /* 内边距 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); /* 阴影 */
    border: 1px solid #e0e0e0;   /* 边框 */
    min-width: 180px;             /* 最小宽度 */
    opacity: 0;                   /* 初始透明 */
    visibility: hidden;           /* 初始隐藏 */
    transition: all 0.3s ease;    /* 过渡效果 */
    z-index: 1001;               /* 确保在最上层 */
    transform: translateY(-50%) translateX(-10px); /* 初始向左偏移 */
}

/* 弹出菜单显示状态 */
.contact-popup.show {
    opacity: 1;                   /* 完全不透明 */
    visibility: visible;          /* 可见 */
    transform: translateY(-50%) translateX(0); /* 回到原位置 */
}

/* 弹出菜单箭头 */
.contact-popup::after {
    content: '';                  /* 伪元素内容为空 */
    position: absolute;           /* 绝对定位 */
    right: -8px;                  /* 定位到右侧 */
    top: 50%;                     /* 垂直居中 */
    transform: translateY(-50%);  /* 垂直居中调整 */
    width: 0;                     /* 宽度0 */
    height: 0;                    /* 高度0 */
    border-left: 8px solid white; /* 左边框白色三角形 */
    border-top: 8px solid transparent; /* 上边框透明 */
    border-bottom: 8px solid transparent; /* 下边框透明 */
}

/* 鼠标悬浮时显示弹出菜单 */
.contact-widget .contact-icon:hover .contact-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

/* 弹出菜单文字 */
.contact-popup p {
    margin: 0;                    /* 移除默认边距 */
    color: #333;                  /* 深灰色文字 */
    font-size: 0.9rem;            /* 字体大小 */
    line-height: 1.4;             /* 行高 */
}

/* ===== 页脚样式 ===== */

/* 页脚主容器 */
footer {
    background-color: rgb(240, 240, 240); /* 浅灰色背景 */
    color: #333;                  /* 深灰色文字 */
    padding: 4rem 0 1rem;         /* 内边距：上4rem，下1rem，左右0 */
}

/* 页脚内容网格 */
.footer-content {
    display: grid;                /* 启用grid布局 */
    /* 自动适应列数，每列最小250px，最大1fr */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2.5rem;                  /* 列之间间距2.5rem */
    margin-bottom: 3rem;          /* 下方间距3rem */
}

/* 三列页脚（等宽，带分隔线） */
.footer-3col {
    grid-template-columns: 1fr 1fr 2fr; /* 第三列更宽，前两列更窄 */
    gap: 2rem;                           /* 列间距 */
    position: relative;                  /* 便于伪元素绘制分隔线 */
}

.footer-3col .footer-col {
    position: relative;                     /* 为单列伪元素分隔做定位 */
}

/* 在第1、2列右侧画竖线分隔 */
.footer-3col .footer-col:not(:last-child) {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    padding-right: 2rem;
}

/* 第1列：Logo 居中显示 */
.footer-col-logo .logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-col-logo .logo img {
    height: 30px;
    width: auto;
}

/* 第2列：联系信息 */
/* .footer-col-contact h3 未在页脚使用，移除样式 */

.footer-col-contact .contact-list {
    list-style: none;
}

.footer-col-contact .contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333;
    opacity: 0.8;
    margin: 0.4rem 0;
}

.footer-col-contact .contact-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    font-size: 0.9rem;
}

.footer-col-contact .contact-text {
    line-height: 1.6;
}

/* 第3列：二维码 2x2 网格 */
/* .footer-col-qr h3 未在页脚使用，移除样式 */

.footer-col-qr .qr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 一行4个 */
    gap: 20px;
}

.footer-col-qr .qr-item {
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.footer-col-qr .qr-item img {
    width: 100%;
    aspect-ratio: 1 / 1;         /* 正方形 */
    object-fit: cover;
    border-radius: 6px;
    background: #fff;
}

.footer-col-qr .qr-caption {
    display: block;
    margin-top: 6px;
    font-size: 0.9rem;
    color: #333;
    opacity: 0.8;
}



/* 页脚底部版权信息 */
.footer-bottom {
    text-align: center;           /* 文字居中对齐 */
    padding-top: 2rem;            /* 上方内边距2rem */
    border-top: 1px solid rgba(0, 0, 0, 0.1); /* 顶部边框线 */
    opacity: 0.7;                 /* 70%不透明度 */
}

/* ===== 响应式设计 - 媒体查询（续） ===== */

/* 中等屏幕设备 - 最大宽度992px */
@media (max-width: 992px) {
    .hero h1 {
        font-size: 2.5rem;        /* 减小英雄区域标题大小 */
    }
    
    .about-content {
        flex-direction: column;   /* 关于我们区域改为垂直排列 */
    }
    
    .about-image {
        order: -1;                /* 图片移到文字上方 */
    }
    
    .form-row {
        flex-direction: column;   /* 表单行在小屏幕下垂直排列 */
    }
    
    /* 产品图片在小屏幕下调整 */
    .product-image {
        max-width: 250px;         /* 小屏幕下最大宽度250px */
    }
}

/* 小屏幕设备 - 最大宽度768px */
@media (max-width: 768px) {
    .hero {
        padding: 8rem 1rem;       /* 减小英雄区域内边距 */
        margin-top: 102px;        /* 上边距102px，为顶部语言选择栏(22px)和导航栏(80px)留出空间 */
    }
    
    .hero h1 {
        font-size: 2rem;          /* 进一步减小标题大小 */
    }
    
    .hero p {
        font-size: 1.1rem;        /* 减小描述文字大小 */
    }
    
    
    .section {
        padding: 4rem 0;          /* 减小内容区块内边距 */
    }
    
    .stats {
        flex-direction: column;   /* 统计数据垂直排列 */
        gap: 1.5rem;              /* 统计数据项之间间距 */
    }
    
    .products-grid,
    .team-grid {
        grid-template-columns: 1fr; /* 网格改为单列布局 */
    }
    
    /* 轮播图在小屏幕下调整 */
    .carousel-container {
        height: 400px;              /* 减小轮播图高度 */
    }
    
    .carousel-caption {
        padding: 30px 20px 20px;   /* 减小内边距 */
    }
    
    .carousel-caption h3 {
        font-size: 1.5rem;         /* 减小标题字体 */
    }
    
    .carousel-caption p {
        font-size: 1rem;           /* 减小描述字体 */
    }
    
    .footer-content {
        grid-template-columns: 1fr; /* 页脚改为单列布局 */
    }

    /* 三列页脚在小屏下堆叠，分隔线改为底部分隔 */
    .footer-3col {
        grid-template-columns: 1fr; /* 小屏改为单列 */
        gap: 1.25rem;
    }

    .footer-3col .footer-col:not(:last-child) {
        border-right: none;
        padding-right: 0;
        border-bottom: 1px solid rgba(0,0,0,0.1);
        padding-bottom: 1rem;
    }

    /* 小屏下二维码仍保持两列以免过小 */
    .footer-col-qr .qr-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 超小屏幕设备 - 最大宽度480px */
@media (max-width: 480px) {
    .hero {
        padding: 6rem 1rem;       /* 进一步减小英雄区域内边距 */
        margin-top: 100px;        /* 上边距100px，为顶部语言选择栏(20px)和导航栏(80px)留出空间 */
    }
    
    .hero h1 {
        font-size: 1.8rem;        /* 进一步减小标题大小 */
    }
    
    .section-title h2 {
        font-size: 2rem;          /* 减小区块标题大小 */
    }
    
    .service-card,
    .team-member {
        padding: 1.5rem;          /* 减小卡片内边距 */
    }
    
    .footer-section .logo {
        flex-direction: column;   /* 页脚logo垂直排列 */
        text-align: center;       /* 页脚logo居中对齐 */
    }
    
    .footer-section .logo img {
        margin-right: 0;          /* 移除右侧间距 */
        margin-bottom: 10px;      /* 添加下方间距 */
        height: 35px;             /* 调整页脚logo大小 */
    }
    
    /* 产品图片在超小屏幕下进一步调整 */
    .product-image {
        max-width: 200px;         /* 超小屏幕下最大宽度200px */
    }
}