:root {
    /* 网站主题色变量 */
    --primary: #005500;      /* 主色调 - 深绿色 */
    --secondary: #8a9a5b;    /* 次要色 - 橄榄绿 */
    --accent: #d4c06f;       /* 强调色 - 金色 */
    --light: #f8f4e9;        /* 浅色背景 */
    --dark: #4d3a1f;         /* 深色背景 */
    --text: #5d4a2d;         /* 主要文本颜色 */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 确保元素的宽度和高度包括内边距和边框 */
}
html, body {
  height: 100%;
}
body {
    font-family: 'Noto Serif SC', serif; /* 设置全局字体为 Noto Serif SC */
    color: var(--text);                  /* 使用定义的文本颜色变量 */
    background: var(--light);            /* 设置背景浅色 */
    line-height: 1.6;                    /* 设置行高 */
}


/* 顶部品牌区域样式 */
.brand-top {
    background: var(--primary);          /* 使用主色调作为背景色 */
    color: white;                        /* 设置文字颜色为白色 */
    justify-content: center;             /* 水平居中对齐内容 */
    align-items: center;                 /* 垂直居中对齐内容 */
    position: relative;                  /* 相对定位 */
    z-index: 1000;                       /* 设置堆叠顺序 */
}

.brand-info {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 15px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
}

.brand-logo {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 15;                              /* 子元素间距 */
	margin-top: 10px;                     /* 上边距 */
	margin-bottom: 0px;                  /* 下边距 */
}

.contact-info {
    display: flex;                        /* 使用 flex 布局 */
    gap: 20px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
}

.contact-item {
    display: flex;                        /* 使用 flex 布局 */
    align-items: center;                  /* 垂直居中对齐内容 */
    gap: 8px;                             /* 子元素间距 */
    font-size: 14px;                      /* 设置联系信息字体大小 */
	margin-top: 10px;                     /* 上边距 */
	margin-bottom: 10px;                  /* 下边距 */
}
.contact-fbt {
    display: flex;                        /* 使用 flex 布局 */
    gap: 50px;                            /* 子元素间距 */
    justify-content: center;              /* 水平居中对齐内容 */
	margin-top: 0px;                     /* 上边距 */
	margin-bottom: 0px;                  /* 下边距 */
}

.contact-fbt2 {
    align-items: center;                  /* 垂直居中对齐内容 */
    font-size: 16px;                      /* 设置自然之味健康之礼字体大小 */
}
nav {
  background: var(--light);                             /* 使用CSS变量设置浅色背景 */
  padding: 5px 30px;                                      /* 左右内边距30px，上下为0 */
  border-bottom: 1px solid rgba(139, 115, 75, 0.1);     /* 底部半透明边框 */
  position: sticky;                                     /* 粘性定位 */
  top: 0;   /* 距离视口顶部0px时固定 */
  z-index: 999; /* 确保导航栏在最顶层 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* 底部轻微阴影 */
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 内容居中对齐 */
  align-items: center; /* 垂直居中 */
  max-width: 100%; /* 确保宽度不超过视口 */
  margin: 0 auto; /* 水平居中 */
}

/* 导航内容容器布局 */
.nav-container {
  display: flex; /* 启用Flex布局 */
  justify-content: center; /* 内容居中对齐 */
  align-items: center; /* 垂直居中 */
  max-width: 1200px; /* 最大宽度限制 */
  margin: 0 auto; /* 水平居中 */
  padding: 0 20px; /* 添加左右内边距（可选） */
}

/* 主导航链接列表样式 */
.main-nav {
  display: flex; /* 启用Flex布局 */
  list-style: none; /* 移除列表默认样式 */
}
/* 单个导航项样式 */
.nav-item {
  position: relative; /* 相对定位（用于伪元素定位） */
  padding: 10px 30px; /* 内边距 */
  font-weight: 600; /* 粗体 */
  font-size: 16px; /* 字体大小 */
  color: var(--dark); /* 文字颜色使用CSS变量 */
  cursor: pointer; /* 鼠标指针样式 */
  transition: all 0.3s ease; /* 所有属性过渡效果 */
  display: flex; /* 启用Flex布局 */
  align-items: center; /* 垂直居中 */
}

/* 导航项底部指示条（伪元素） */
.nav-item::after {
  content: ''; /* 必须内容属性 */
  position: absolute; /* 绝对定位 */
  bottom: 0; /* 定位到底部 */
  left: 50%; /* 从左侧50%位置开始 */
  width: 0; /* 初始宽度为0 */
  height: 3px; /* 高度 */
  background: var(--secondary); /* 使用CSS变量设置颜色 */
  transform: translateX(-50%); /* 水平居中 */
  transition: width 0.3s ease; /* 宽度过渡动画 */
}

/* 悬停/激活状态下的指示条效果 */
.nav-item:hover::after, 
.nav-item.active::after {
  width: 80%; /* 展开至80%宽度 */
}

/* 悬停/激活状态文字效果 */
.nav-item:hover, 
.nav-item.active {
  color: var(--primary); /* 使用CSS变量改变文字颜色 */
}

/* 导航项内图标样式 */
.nav-item i {
  margin-right: 8px; /* 图标右侧间距 */
  font-size: 18px; /* 图标大小 */
  color: var(--secondary); /* 使用CSS变量设置颜色 */
}
/* 导航链接样式 */
.nav-item a {
    text-decoration: none;             /* 去掉文本装饰（如下划线） */
    color: inherit;                    /* 继承父元素的颜色属性 */
}
/* 欢迎区域 */
.welcome-section {
    padding: 20px 40px; /* 设置内边距为上下左右各40像素 */
    text-align: center; /* 文本居中对齐 */
    background: var(--light-beige); /* 背景颜色使用自定义属性 --light-beige */
    position: relative; /* 定位类型设为相对定位 */
	flex: 1;
}

.section-title {
    font-size: 2.7rem; /* 字体大小设为2.8rem */
    color: var(--primary); /* 字体颜色使用自定义属性 --primary-green */
    margin-bottom: 20px; /* 下边距设为20像素 */
    font-family: 'Ma Shan Zheng', cursive; /* 字体使用 'Ma Shan Zheng'，后备字体为 cursive */
    position: relative; /* 定位类型设为相对定位 */
    display: inline-block; /* 显示类型设为行内块元素 */
}

.section-title::after {
    content: ''; /* 生成一个空内容的元素 */
    position: absolute; /* 定位类型设为绝对定位 */
    bottom: -10px; /* 距离底部10像素 */
    left: 50%; /* 距离左边50% */
    transform: translateX(-50%); /* 水平方向平移自身宽度的50%，实现水平居中 */
    width: 100px; /* 宽度设为100像素 */
    height: 4px; /* 高度设为4像素 */
    background: var(--accent); /* 背景颜色使用自定义属性 --accent */
}

.welcome-text {
    max-width: 800px; /* 最大宽度设为800像素 */
	color: var(--text);
    margin: 10px auto; /* 上下边距设为40像素，左右自动 */
    font-size: 1.2rem; /* 字体大小设为1.2rem */
    line-height: 1.8; /* 行高设为1.8倍的字体大小 */
}

.tea-leaves {
    display: flex; /* 使用弹性盒布局 */
    justify-content: center; /* 子元素居中对齐 */
    gap: 30px; /* 子元素之间的间距设为30像素 */
    margin-top: 40px; /* 上边距设为40像素 */
    flex-wrap: wrap; /* 子元素换行显示 */
}

.tea-leaf {
    width: 30px; /* 宽度设为80像素 */
    height: 60px; /* 高度设为100像素 */
    background: var(--secondary); /* 背景颜色使用自定义属性 --secondary */
    border-radius: 40px 40px 40px 0; /* 圆角半径设为40像素，形成特定形状 */
    transform: rotate(45deg); /* 旋转45度 */
    position: relative; /* 定位类型设为相对定位 */
    opacity: 0.7; /* 透明度设为0.7 */
    animation: float 4s infinite ease-in-out; /* 应用名为float的动画，持续4秒，无限循环，缓入缓出效果 */
}

.tea-leaf:nth-child(2) {
    background: #5d7340; /* 第二个叶子的背景颜色设为#5d7340 */
    animation-delay: 0.5s; /* 动画延迟0.5秒开始 */
}

.tea-leaf:nth-child(3) {
    background: var(--primary); /* 第三个叶子的背景颜色使用自定义属性 --primary */
    animation-delay: 1s; /* 动画延迟1秒开始 */
}

.tea-leaf:nth-child(4) {
    background: var(--accent); /* 第四个叶子的背景颜色使用自定义属性 --accent */
    animation-delay: 1.5s; /* 动画延迟1.5秒开始 */
}

@keyframes float {
    0%, 100% { transform: rotate(45deg) translateY(0); } /* 动画开始和结束时，旋转45度且不移动垂直位置 */
    50% { transform: rotate(45deg) translateY(-15px); } /* 动画中间时，旋转45度并向上移动15像素 */
} 

/* =========== 茶叶特色部分 =========== */
.features-section {
    background: var(--light-beige); /* 背景 */
    padding: 20px 5%; /* 内边距 */
}

.features-title {
    font-size: 2.8rem; /* 字体大小 */
    color: var(--primary); /* 文字颜色 */
    margin-bottom:40px; /* 底部外边距 */
    font-family: 'Ma Shan Zheng', cursive; /* 特殊字体 */
    position: relative; /* 相对定位 */
    display: block; /* 行内块元素 */
	 text-align: center; /* 添加这里：文本居中 */
}

.features-title::after {
    content: ''; /* 伪元素内容 */
    position: absolute; /* 绝对定位 */
    bottom: -10px; /* 底部位置 */
    left: 50%; /* 左侧位置 */
    transform: translateX(-50%); /* X轴偏移 */
    width: 100px; /* 宽度 */
    height: 4px; /* 高度 */
    background: var(--accent); /* 背景色 */
}

.features {
    padding: 40px 5%; /* 内边距 */
    background: #f8f5f0; /* 背景色 */
}

.features-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 自适应列 */
    gap: 40px; /* 网格间距 */
    max-width: 1200px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
}

.feature-card {
    background: white; /* 背景色 */
    border-radius: 12px; /* 圆角 */
    overflow: hidden; /* 溢出隐藏 */
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); /* 阴影 */
    transition: transform 0.3s ease; /* 过渡效果 */
}

/* 卡片悬停效果 */
.feature-card:hover {
    transform: translateY(-10px); /* Y轴偏移 */
}

.feature-img {
    height: 220px; /* 固定高度 */
    overflow: hidden; /* 溢出隐藏 */
}

.feature-img img {
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    object-fit: cover; /* 图片填充方式 */
    transition: transform 0.5s ease; /* 过渡效果 */
}

/* 图片悬停放大效果 */
.feature-card:hover .feature-img img {
    transform: scale(1.05); /* 缩放 */
}
.feature-img {
  will-change: transform;
}

.feature-content {
    padding: 10px; /* 内边距 */
}

.feature-content h3 {
    font-family: 'Ma Shan Zheng', serif; /* 特殊字体 */
    color: var(--primary); /* 文字颜色 */
    font-size: 1.5rem; /* 字体大小 */
	margin: 10px 0; /* 上下外边距20px，左右外边距为0 */
}

.feature-content p {
    color: var(--text); /* 文字颜色 */
    margin-bottom: 10px; /* 底部外边距 */
	margin: 10px 0; /* 上下外边距20px，左右外边距为0 */
}
/* =========== 茶叶种类部分 =========== */
.tea-section {
    background: var(--light-beige); /* 背景 */
    padding: 100px 5%; /* 内边距 */
}

.tea-container {
    max-width: 800px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    text-align: center; /* 文本居中 */
}

.tea-grid {
    display: grid; /* 网格布局 */
	grid-template-columns: repeat(2, minmax(200px, 1fr)); /* 自适应列 */
    gap: 30px; /* 网格间距 */
    margin-top: 40px; /* 顶部外边距 */
}

.tea-card {
    background: white; /* 背景色 */
    border-radius: 12px; /* 圆角 */
    padding: 30px 20px; /* 内边距 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* 阴影 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 茶叶卡片悬停效果 */
.tea-card:hover {
    transform: translateY(-10px); /* Y轴偏移 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* 阴影增强 */
}

.tea-icon {
    font-size: 3.5rem; /* 图标大小 */
    color: var(--accent); /* 图标颜色 */
    margin-bottom: 20px; /* 底部外边距 */
}

.tea-title {
    font-size: 1.4rem; /* 字体大小 */
    color: var(--primary); /* 文字颜色 */
    margin-bottom: 10px; /* 底部外边距 */
    font-family: 'Ma Shan Zheng', cursive; /* 特殊字体 */
}
.tea-card p {
    font-size: 1rem; /* 字体大小 */
    color: var(--text); /* 文字颜色 */
    margin-bottom: 5px; /* 底部外边距 */
}

/* 图片容器 */
.img-container {
    overflow: hidden; /* 溢出隐藏 */
    position: relative; /* 相对定位 */
}

/* 默认图片样式 */
.tea-img {
    width: 100%; /* 宽度100% */
    height: 250px; /* 固定高度 */
    object-fit: cover; /* 图片填充方式 */
    transition: transform 0.5s ease; /* 过渡效果 */
    border-radius: 8px; /* 圆角 */
    margin: 10px 0; /* 外边距 */
}

/* 图片悬停放大效果 */
.tea-card:hover .tea-img {
    transform: scale(1.05); /* 缩放 */
}

/* 小尺寸图片 */
.small-img {
    height: 60px; /* 固定高度 */
}

/* 中等尺寸图片 */
.medium-img {
    height: 280px; /* 固定高度 */
}

/* 大尺寸图片 */
.large-img {
    height: 350px; /* 固定高度 */
}

/* 方形图片 */
.square-img {
    height: 250px; /* 固定高度 */
    width: 100%; /* 宽度100% */
    object-fit: cover; /* 图片填充方式 */
}

.tea-year {
    font-size: 1rem; /* 字体大小 */
    color: var(--text); /* 文字颜色 */
    font-weight: 600; /* 字体粗细 */
    margin-bottom: 15px; /* 底部外边距 */
}

/* =========== 茶叶产品展示部分 =========== */
.products {
    padding: 100px 5%; /* 内边距 */
    background: #f8f5f0; /* 背景色 */
}

.products-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 自适应列 */
    gap: 40px; /* 网格间距 */
    max-width: 1200px; /* 最大宽度 */
    margin: 50px auto 0; /* 外边距 */
}

.product-card {
    background: white; /* 背景色 */
    border-radius: 12px; /* 圆角 */
    overflow: hidden; /* 溢出隐藏 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* 阴影 */
    transition: all 0.4s ease; /* 过渡效果 */
}

/* 产品卡片悬停效果 */
.product-card:hover {
    transform: translateY(-12px); /* Y轴偏移 */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); /* 阴影增强 */
}

.product-img {
    height: 280px; /* 固定高度 */
    overflow: hidden; /* 溢出隐藏 */
    position: relative; /* 相对定位 */
}

.product-img img {
    width: 100%; /* 宽度100% */
    height: 100%; /* 高度100% */
    object-fit: cover; /* 图片填充方式 */
}

.product-tag {
    position: absolute; /* 绝对定位 */
    top: 20px; /* 顶部位置 */
    right: 20px; /* 右侧位置 */
    background: rgba(255, 255, 255, 0.85); /* 半透明白色背景 */
    padding: 8px 20px; /* 内边距 */
    border-radius: 30px; /* 圆角 */
    font-weight: 600; /* 字体粗细 */
    color: var(--primary); /* 文字颜色 */
}

.product-content {
    padding: 20px; /* 内边距 */
}

.product-content h3 {
    font-family: 'Noto Serif SC', serif; /* 字体 */
    font-size: 1.7rem; /* 字体大小 */
    color: var(--text); /* 文字颜色 */
    margin-bottom: 0px; /* 底部外边距 */
	margin: 5px auto 0; /* 上外边距为30像素，左右居中，取消下外边距 */
}

.product-desc {
    font-size: 1.05rem; /* 字体大小 */
    color: var(--secondary); /* 文字颜色 */
    font-style: italic; /* 斜体 */
    padding: 15px 0; /* 内边距 */
    border-top: 1px dashed #ddd; /* 顶部虚线边框 */
    border-bottom: 1px dashed #ddd; /* 底部虚线边框 */
    margin: 20px 0; /* 外边距 */
}

.product-details {
    display: flex; /* 弹性布局 */
    flex-wrap: wrap; /* 允许换行 */
    margin-bottom: 25px; /* 底部外边距 */
}

.detail-item {
    display: flex; /* 弹性布局 */
    align-items: center; /* 垂直居中 */
    margin-right: 20px; /* 右侧外边距 */
    margin-bottom: 12px; /* 底部外边距 */
    color: #666; /* 文字颜色 */
}

.detail-item i {
    color: var(--secondary); /* 图标颜色 */
    margin-right: 8px; /* 右侧外边距 */
}

.product-price {
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center; /* 垂直居中 */
}

.price {
    font-size: 2rem; /* 字体大小 */
    font-weight: 600; /* 字体粗细 */
    color: var(--primary); /* 文字颜色 */
}

.price span {
    font-size: 1rem; /* 字体大小 */
    color: #777; /* 文字颜色 */
    font-weight: normal; /* 正常字体粗细 */
}
/* 按钮样式 */
.btn {
    padding: 10px 25px; /* 内边距10px上下，25px左右 */
    background: var(--secondary); /* 背景颜色使用自定义属性 --secondary */
    color: white; /* 字体颜色为白色 */
    border: none; /* 无边框 */
    border-radius: 50px; /* 圆角边框半径为50px */
    font-weight: 600; /* 字体加粗 */
    cursor: pointer; /* 鼠标指针变为手型 */
    transition: all 0.3s ease; /* 所有变化过渡效果持续0.3秒 */
    display: flex; /* 使用弹性盒布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 子元素间距8px */
    text-decoration: none; /* 无下划线 */
}

.btn:hover {
    background: #7a8a4b; /* 悬停时背景颜色变为#7a8a4b */
    transform: translateY(-2px); /* 悬停时向上移动2px */
    box-shadow: 0 5px 15px rgba(138, 154, 91, 0.3); /* 悬停时的投影效果 */
}
/* =========== 茶文化体验部分 =========== */
.culture-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 自适应列 */
    gap: 40px; /* 网格间距 */
    max-width: 1200px; /* 最大宽度 */
    margin: 40px auto 0; /* 外边距 */
}

.culture-card {
    text-align: center; /* 文本居中 */
    padding: 40px 30px; /* 内边距 */
    border-radius: 12px; /* 圆角 */
    background:  white; /* 背景 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 阴影 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 文化卡片悬停效果 */
.culture-card:hover {
    transform: translateY(-8px); /* Y轴偏移 */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12); /* 阴影增强 */
}

.culture-icon {
    width: 80px; /* 图标宽度为90像素 */
    height: 80px; /* 图标高度为90像素 */
    background: var(--light); /* 背景颜色使用自定义属性 --light */
    border-radius: 50%; /* 圆形边框 */
    display: flex; /* 使用弹性盒布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    margin: 0 auto 20px; /* 外边距：上下0像素，左右自动，下25像素 */
    position: relative; /* 相对定位 */
    z-index: 2; /* 层级设为2 */
    border: 2px solid var(--accent); /* 边框颜色使用自定义属性 --accent */
    transition: all 0.4s ease; /* 所有属性的过渡效果，持续时间0.4秒，缓动效果 */
}

.culture-card:hover .culture-icon {
    background: var(--primary); /* 鼠标悬停时，图标背景颜色变为自定义属性 --primary */
    transform: scale(1.1); /* 鼠标悬停时，图标放大1.1倍 */
}
.culture-card:hover .culture-icon i {
    color: white; /* 鼠标悬停时，图标颜色变为白色 */
}

.culture-icon i {
    font-size: 40px; /* 图标字体大小为40像素 */
    color: var(--primary); /* 图标颜色使用自定义属性 --primary */
    transition: all 0.4s ease; /* 所有属性的过渡效果，持续时间0.4秒，缓动效果 */
}

.culture-card h3 {
    font-family: 'Noto Serif SC', serif; /* 字体 */
    color: var(--primary); /* 文字颜色 */
    font-size: 1.6rem; /* 字体大小 */
    margin-bottom: 15px; /* 底部外边距 */
}
.culture-card p {
    font-family: 'Noto Serif SC', serif; /* 字体 */
    color: var(--text); /* 文字颜色 */
    font-size: 1rem; /* 字体大小 */
    margin-bottom: 10px; /* 底部外边距 */
}
/* =========== 荣誉展示区 =========== */
.honors-section {
    background: var(--light-beige); /* 背景 */ 
    padding: 40px 5%; /* 内边距 */
}

.honors-container {
    max-width: 700px; /* 最大宽度 */
    margin: 0 auto; /* 水平居中 */
    text-align: center; /* 文本居中 */
}

.honors-grid {
    display: grid; /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* 自适应列 */
    gap: 30px; /* 网格间距 */
    margin-top: 40px; /* 顶部外边距 */
}

.honor-card {
    background: white; /* 背景色 */
    border-radius: 12px; /* 圆角 */
    padding: 30px 20px; /* 内边距 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); /* 阴影 */
    transition: all 0.3s ease; /* 过渡效果 */
    display: flex; /* 弹性布局 */
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
}

/* 荣誉卡片悬停效果 */
.honor-card:hover {
    transform: translateY(-10px); /* Y轴偏移 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* 阴影增强 */
}

.honor-icon {
    font-size: 3.5rem; /* 图标大小 */
    color: var(--accent); /* 图标颜色 */
    margin-bottom: 20px; /* 底部外边距 */
}

.honor-title {
    font-size: 1.4rem; /* 字体大小 */
    color: var(--primary-green); /* 文字颜色 */
    margin-bottom: 10px; /* 底部外边距 */
    font-family: 'Ma Shan Zheng', cursive; /* 特殊字体 */
}

.honor-card img {
    max-width: 100%; /* 最大宽度 */
    height: auto; /* 高度自适应 */
    max-height: 800px; /* 最大高度 */
    object-fit: contain; /* 图片填充方式 */
    display: block; /* 块元素 */
    margin: 0 auto 10px; /* 外边距 */
    border-radius: 8px; /* 圆角 */
}

.honor-year {
    font-size: 1rem; /* 字体大小 */
    color: var(--secondary); /* 文字颜色 */
    font-weight: 600; /* 字体粗细 */
    margin-bottom: 15px; /* 底部外边距 */
}
/* 企业图片 */
.gallery-section { /* 定义画廊部分的样式 */
    padding: 30px 40px 0px 40px; /* 上 右  下  左文本居中对齐 */
    text-align: center; /* 文本居中对齐 */
    width: 100%;
    background: var(--light); /* 背景颜色使用自定义属性 --light-beige */
}

.gallery-container { /* 定义画廊容器的样式 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; /* 相对定位 */
    max-width: 1200px; /* 最大宽度为1100px */
    margin: 20px auto 30px; /* 上外边距40px，左右自动，下外边距30px */
    padding: 0 50px; /* 左右内边距为50px */
    overflow: hidden; /* 超出部分隐藏 */
}
  
.gallery-track { /* 定义画廊轨道的样式 */
    display: flex; /* 使用flex布局 */
    transition: transform 0.5s ease-in-out; /* 变换效果持续0.5秒，缓入缓出 */
    gap: 25px; /* 子元素之间的间距为25px */
    padding: 15px 0; /* 上下内边距为15px */
}

.gallery-item { /* 定义画廊项目的样式 */
    flex: 0 0 300px; /* 固定宽度为300px */
    background: #fff; /* 背景颜色为白色 */
    border-radius: 10px; /* 圆角半径为10px */
    overflow: hidden; /* 超出部分隐藏 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* 投影效果 */
    transition: all 0.3s ease; /* 所有变换效果持续0.3秒，缓动 */
    position: relative; /* 相对定位 */
}

.gallery-item:hover { /* 定义画廊项目悬停时的样式 */
    transform: translateY(-8px); /* 向上移动8px */
}

.gallery-img { /* 定义画廊图片容器的样式 */
    position: relative; /* 相对定位 */
    height: 220px; /* 高度为220px */
    overflow: hidden; /* 超出部分隐藏 */
}

.gallery-img img { /* 定义画廊图片的样式 */
    width: 100%; /* 宽度为100% */
    height: 100%; /* 高度为100% */
    object-fit: cover; /* 保持宽高比并裁剪图片 */
    transition: transform 0.5s ease; /* 变换效果持续0.5秒，缓动 */
}

.gallery-item:hover .gallery-img img { /* 定义画廊项目悬停时图片的样式 */
    transform: scale(1.05); /* 放大1.05倍 */
}

.img-overlay { /* 定义图片覆盖层的样式 */
    position: absolute; /* 绝对定位 */
    top: 0; /* 顶部对齐 */
    left: 0; /* 左侧对齐 */
    width: 100%; /* 宽度为100% */
    height: 100%; /* 高度为100% */
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 60%); /* 渐变背景 */
    opacity: 0.7; /* 不透明度为0.7 */
    transition: opacity 0.3s ease; /* 不透明度变化效果持续0.3秒，缓动 */
}

.gallery-item:hover .img-overlay { /* 定义画廊项目悬停时覆盖层的样式 */
    opacity: 0.85; /* 不透明度变为0.85 */
}

.gallery-content { /* 定义画廊内容的样式 */
    padding: 10px; /* 内边距为18px */
    position: relative; /* 相对定位 */
    text-align: center;
    padding: 10px;
    z-index: 1; /* Z轴顺序为1 */
}

.gallery-title { /* 定义画廊标题的样式 */
    font-size: 1.25rem; /* 字体大小为1.25rem */
    margin-bottom: 5px; /* 下边距为8px */
    color: var(--primary); /* 字体颜色使用自定义属性 --primary-green */
}

.gallery-desc { /* 定义画廊描述的样式 */
    font-size: 0.95rem; /* 字体大小为0.95rem */
    color: var(--text); /* 字体颜色为#5a7d59 */
    margin-bottom: 0px; /* 下边距为12px */
}

.gallery-nav { /* 定义画廊导航按钮的样式 */
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    transform: translateY(-50%); /* 调整位置使其垂直居中 */
    width: 45px; /* 宽度为45px */
    height: 45px; /* 高度为45px */
    background: white; /* 背景颜色为白色 */
    border-radius: 50%; /* 圆角半径为50%（圆形）*/
    background-color: rgb(248, 252, 248); /* 将选中的指示器改为绿色 */
    display: flex; /* 使用flex布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    cursor: pointer; /* 鼠标指针变为手型 */
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); /* 投影效果 */
    z-index: 10; /* Z轴顺序为10 */
    transition: all 0.3s ease; /* 所有变换效果持续0.3秒，缓动 */
}

.gallery-nav:hover { /* 定义画廊导航按钮悬停时的样式 */
    background: #2c5e1a; /* 背景颜色变为#2c5e1a */
    color: white; /* 字体颜色变为白色 */
    transform: translateY(-50%) scale(1.1); /* 垂直居中并放大1.1倍 */
}

.prev-btn { /* 定义前一个按钮的样式 */
    left: 0; /* 左侧对齐 */
}

.next-btn { /* 定义下一个按钮的样式 */
    right: 0; /* 右侧对齐 */
}

.gallery-indicators { /* 定义画廊指示器的样式 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中对齐 */
    gap: 10px; /* 子元素之间的间距为10px */
    margin-top: 25px; /* 上外边距为25px */
     margin-bottom: 25px; /* 下外边距为25px */
}

.indicator { /* 定义单个指示器的样式 */
    width: 12px; /* 宽度为12px */
    height: 12px; /* 高度为12px */
    border-radius: 50%; /* 圆角半径为50%（圆形）*/
    background: #cfcfcf; /* 背景颜色为#dde8d5 */
    cursor: pointer; /* 鼠标指针变为手型 */
    transition: all 0.3s ease; /* 所有变换效果持续0.3秒，缓动 */
}

.indicator.active { /* 定义选中状态的指示器样式 */
    background: green; /* 背景颜色为绿色 */
}


/* 底部区域样式 */
footer {
    background: var(--dark); /* 设置背景颜色为变量 --dark 的值 */
    color: rgba(255,255,255,0.8); /* 设置文字颜色为白色，透明度为0.8 */
    padding: 30px 20px 20px; /* 设置内边距：上60px，左右40px，下30px */
}
.footer-container {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(4, minmax(100px, 1fr)); /* 每行四个列，每列最小宽度300像素，最大宽度为可用空间的一份 */
    gap: 10px; /* 设置列间距为40px */
    max-width: 1200px; /* 设置最大宽度为1200px */
    margin: 0 auto; /* 居中对齐 */
}
.footer-col h3 {
    color: white; /* 设置标题颜色为白色 */
    font-size: 1.5rem; /* 设置字体大小为1.5倍根元素字体大小 */
    margin-bottom: 10px; /* 设置下边距为25px */
    position: relative; /* 设置定位为相对定位 */
    padding-bottom: 10px; /* 设置下边距填充为10px */
}
.footer-col h3::after {
    content: ''; /* 生成伪元素内容为空 */
    position: absolute; /* 设置绝对定位 */
    bottom: 0; /* 定位到元素的底部 */
    left: 0; /* 定位到元素的左边 */
    width: 50px; /* 设置宽度为50px */
    height: 2px; /* 设置高度为2px */
    background: var(--accent); /* 设置背景颜色为变量 --accent 的值 */
}
	
.footer-links {
    list-style: none; /* 移除默认的列表符号 */
    padding: 0; /* 移除内边距 */
    margin: 0; /* 移除外边距 */
    display: flex; /* 使用flex布局 */
    flex-direction: column; /* 将子元素排列成列方向 */
}

.footer-links li {
    margin-bottom: 10px; /* 设置每个列表项的下边距为15px */
}
.footer-links a {
    color: rgba(255,255,255,0.7); /* 设置链接颜色为白色，透明度为0.7 */
    text-decoration: none; /* 移除文本装饰 */
    transition: color 0.3s ease; /* 设置颜色过渡效果，持续时间0.3秒 */
    display: flex; /* 使用弹性盒布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 10px; /* 设置子元素之间的间距为10px */
}
.footer-links a:hover {
    color: white; /* 鼠标悬停时，链接颜色变为白色 */
}
.copyright {
    text-align: center; /* 设置文本居中对齐 */
    padding-top: 20px; /* 设置上边距填充为20px */
    margin-top: 20px; /* 设置上边距为20px */
    border-top: 1px solid rgba(255,255,255,0.1); /* 设置顶部边框为1px实线，颜色为白色，透明度为0.1 */
}
@viewport {
  width: device-width;
  zoom: 1.0;
}

@media screen and (max-width: 768px) {
  body {
    min-width: 1200px; /* 强制保持桌面版宽度 */
    overflow-x: auto; /* 允许横向滚动 */
  }
  .brand-top, .nav-container {
    min-width: 1200px;
  }
}
/* 防止移动端文字自动调整 */
html {
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 为所有文本元素设置固定大小 */
body, p, h1, h2, h3, h4, h5, h6, 
.nav-item, .contact-item, .slide-content {
  -webkit-text-size-adjust: none !important;
  text-size-adjust: none !important;
}