: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;                    /* 继承父元素的颜色属性 */
}


/* 轮播图区域样式 */
.hero-slider {
    position: relative;  /* 相对定位创建定位上下文 */
    height:400px;        /* 高度为视窗高度的40% */
    overflow: hidden;    /* 隐藏超出容器部分 */
}
/* 轮播图滑动容器 */
.slides {
    display: flex;       /* 弹性布局使幻灯片横向排列 */
    height: 100%;        /* 继承父容器高度 */
    transition: transform 0.8s ease;   /* 添加滑动动画效果 */
}
/* 单个幻灯片样式 */
.slide {
    min-width: 100%;     /* 最小宽度100%确保每页占满容器 */
    position: relative;  /* 相对定位用于内容定位 */
}
/* 幻灯片图片样式 */
.slide img {
    width: 100%;         /* 宽度填满容器 */
    height: 100%;        /* 高度填满容器 */
    object-fit: cover;   /* 保持比例覆盖整个区域 */
    display: block;      /* 块级元素消除底部间隙 */
}

/* 幻灯片文字内容容器 */
.slide-content {
    position: absolute;  /* 绝对定位覆盖在图片上 */
    top: 50%;            /* 垂直居中 */
    left: 50%;           /* 水平居中 */
    transform: translate(-50%, -50%);  /* 精确居中 */
    text-align: center;  /* 文字居中 */
    color: white;        /* 白色文字 */
    width: 100%;         /* 宽度100% */
    max-width: 800px;    /* 最大内容宽度限制 */
    padding: 0 20px;     /* 左右内边距 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);  /* 文字阴影增强可读性 */
}

/* 主标题样式 */
.slide-content h1 {
    font-size: 3rem;           /* 大字号标题 */
    margin-bottom: 20px;       /* 下边距 */
    font-weight: 700;          /* 粗体 */
    letter-spacing: 2px;       /* 字间距 */
    font-family: 'Ma Shan Zheng', cursive;  /* 特殊艺术字体 */
}

/* 描述文字样式 */
.slide-content p {
    font-size: 1.2rem;           /* 标准字号 */
    margin-bottom: 30px;       /* 下边距 */
}

/* 轮播图按钮样式 */
.slider-btn {
    padding: 15px 40px;        /* 内边距 */
    background: transparent;   /* 透明背景 */
    color: white;              /* 白色文字 */
    border: 2px solid white;   /* 白色边框 */
    border-radius: 50px;       /* 圆形按钮 */
    font-size: 1.1rem;         /* 字体大小 */
    font-weight: 600;          /* 中等字重 */
    cursor: pointer;           /* 手型指针 */
    transition: all 0.3s ease; /* 过渡动画 */
}

/* 按钮悬停效果 */
.slider-btn:hover {
    background: rgba(255,255,255,0.2);  /* 半透明白色背景 */
}

/* 导航点容器 */
.slider-nav {
    position: absolute;        /* 绝对定位 */
    bottom: 30px;              /* 距底部30px */
    left: 50%;                 /* 水平居中 */
    transform: translateX(-50%);  /* 精确居中 */
    display: flex;             /* 弹性布局 */
    gap: 10px;                 /* 点之间间距 */
}

/* 单个导航点样式 */
.slider-dot {
    width: 12px;               /* 点宽度 */
    height: 12px;              /* 点高度 */
    border-radius: 50%;        /* 圆形 */
    background: rgba(255,255,255,0.5);  /* 半透明白色 */
    cursor: pointer;           /* 手型指针 */
    transition: background 0.3s ease;  /* 背景色过渡动画 */
}

/* 激活状态导航点 */
.slider-dot.active {
    background: white;         /* 纯白色激活状态 */
}

/* 欢迎区域样式 */
.welcome-section {
    padding: 10px 10px; /* 设置内边距为上下左右各40像素 */
    text-align: center; /* 文本居中对齐 */
    background: var(--light-beige); /* 背景颜色使用自定义属性 --light-beige */
    position: relative; /* 相对定位，方便内部绝对定位元素使用 */
}

.section-title {
    font-size: 2.8rem; /* 字体大小设置为2.8倍根元素字体大小 */
    color: var(--primary); /* 字体颜色使用自定义属性 --primary */
    margin-bottom: 10px; /* 底部外边距设置为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: 900px; /* 最大宽度设置为800像素 */
	color: var(--text); /* 字体颜色使用自定义属性*/
    margin: 40px auto; /* 上下外边距设置为40像素，左右自动居中 */
    font-size: 1.2rem; /* 字体大小设置为1.2倍根元素字体大小 */
    line-height: 1.8; /* 行高设置为1.8倍字体大小 */
}

.tea-leaves {
    display: flex; /* 使用Flexbox布局 */
    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度，垂直位移为0 */
    50% { transform: rotate(45deg) translateY(-15px); } /* 动画中间状态：旋转45度，垂直位移为-15像素 */
}

/* 特色区域整体样式 */
.feature-section {
  padding: 20px 20px;          /* 区域的内边距 */
  background: var(--light-beige); /* 使用浅米色背景变量 */
  position: relative;          /* 为装饰元素定位做准备 */
  overflow: hidden;            /* 隐藏溢出的装饰元素 */
  justify-content: center;      
  text-align: left;
}

/* 内容容器布局 */
.feature-container {
  display: flex;               /* 弹性布局实现左右排列 */
  max-width: 1200px;          /* 最大宽度限制 */
  margin: 0 auto;             /* 水平居中 */
  align-items: center;        /* 垂直居中对齐 */
  gap: 30px;                  /* 内容区块间距 */
}

/* 左侧内容区域 */
.feature-content {
  flex: 1;                    /* 占据可用空间 */
  padding: 10px;              /* 内边距 */
  position: relative;         /* 定位上下文 */
  z-index: 2;                 /* 确保内容在装饰元素上方 */
}

/* 右侧图片区域 */
.feature-image {
  flex: 0.9;                    /* 与内容区域等宽 */
  position: relative;
  border-radius: 20px;        /* 圆角效果 */
  overflow: hidden;           /* 隐藏图片溢出部分 */
  box-shadow: 0 20px 40px rgba(94, 72, 11, 0.2); /* 立体阴影 */
  transform: rotate(-2deg);   /* 初始旋转角度 */
  transition: transform 0.5s ease; /* 旋转过渡动画 */
}
.feature-image:hover {
  transform: rotate(0) scale(1.02); /* 悬停时复位+轻微放大 */
}

/* 图片样式 */
.feature-image img {
  width: 100%;                /* 宽度填充容器 */
  height: 500px;              /* 固定高度 */
  object-fit: cover;          /* 保持比例覆盖区域 */
  display: block;
  transition: transform 0.5s ease; /* 缩放过渡动画 */
}
.feature-image:hover img {
  transform: scale(1.05);     /* 悬停时图片放大 */
}

/* 椭圆标签样式 */
.section-tag {
  display: inline-block;      /* 行内块显示 */
  background: #e8d8b6;        /* 标签背景色 */
  color: #7f5429;             /* 文字颜色 */
  padding: 8px 20px;          /* 内边距 */
  border-radius: 30px;        /* 胶囊形状 */
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;        /* 下边距 */
  letter-spacing: 1px;        /* 字间距 */
}

/* 主标题样式 */
.feature-title {
  font-size: 2.5rem;
  color: var(--primary);      /* 使用主色变量 */
  margin-bottom: 0px;
  line-height: 1;
  position: relative;
  padding-bottom: 20px;       /* 为下划线预留空间 */
  font-family: 'Ma Shan Zheng', cursive; /* 特殊字体 */
  text-align: left;
  margin-top: 5px;           /* 添加上边距 */
}

/* 标题下划线伪元素 */
.feature-title::after {
  content: '';                /* 必须内容属性 */
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100px;                /* 下划线长度 */
  height: 4px;                /* 线粗 */
  background: var(--accent);  /* 强调色 */
  border-radius: 2px;         /* 端点圆角 */
  text-align: left;
}

/* 描述文本样式 */
.feature-desc {
  font-size: 1.1rem;
  line-height: 1.8;           /* 舒适行高 */
  color: var(--text);             /* 深棕色 */
  margin-bottom: 20px;
}

/* 特色列表容器 */
.feature-list {
  margin-bottom: 20px;
}

/* 单个特色项布局 */
.feature-item {
  display: flex;
  align-items: center;    /* 顶部对齐 */
  margin-bottom: 10px;
}

/* 图标容器 */
.feature-icon {
  width: 50px;
  height: 50px;
  background: #f1e9d9;        /* 浅背景 */
  border-radius: 50%;         /* 圆形 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;         /* 与文字间距 */
  flex-shrink: 0;             /* 防止压缩 */
}

/* 图标样式 */
.feature-icon i {
  color: var(--secondary);    /* 使用次要色变量 */
  font-size: 20px;
}

/* 文字内容样式 */
.feature-text h3 {
  color: #5d7340;             /* 标题绿色 */
  margin-bottom: 5px;
  text-align: left;
  margin: 0;                  /* 移除默认外边距 */
  display: flex;               /* 使用flex布局 */
  align-items: center;         /* 垂直居中对齐 */
}

.feature-text p {
  color: #7a6a4d;             /* 描述文本色 */
  line-height: 1;
  text-align: left;
}

/* 按钮样式 */
.feature-btn {
  display: inline-flex;
  align-items: center;
  padding: 15px 35px;
  background: var(--secondary); /* 次要色背景 */
  color: white;
  border-radius: 50px;        /* 胶囊形状 */
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;  /* 所有属性过渡动画 */
  box-shadow: 0 5px 15px rgba(138, 154, 91, 0.3); /* 柔和阴影 */
}
.feature-btn:hover {
  background: #7a8a4b;        /* 悬停深色 */
  transform: translateY(-3px); /* 上浮效果 */
  box-shadow: 0 8px 20px rgba(138, 154, 91, 0.4); /* 阴影增强 */
}

/* 按钮图标动画 */
.feature-btn i {
  margin-left: 10px;
  transition: transform 0.3s ease;
}
.feature-btn:hover i {
  transform: translateX(5px); /* 悬停时右移 */
}

/* 抽象装饰元素 */
.tea-decoration {
  position: absolute;
  width: 200px;
  height: 200px;
  opacity: 0.05;              /* 极低透明度 */
  z-index: 1;                 /* 在背景层 */
}
/* 左上角装饰 */
.tea-decoration-1 {
  top: 10%;
  left: 5%;
  background: var(--secondary);
  border-radius: 50% 50% 50% 0; /* 特殊形状 */
  transform: rotate(45deg);   /* 45度旋转 */
}
/* 右下角装饰 */
.tea-decoration-2 {
  top: 70%;
  left: 85%;
  background:var(--secondary);
  border-radius: 50% 0% 50% 50%; /* 不对称形状 */
  transform: rotate(45deg);
}

/* 民宿客房区整体样式 */
.experience-section {
    padding: 10px 40px;               /* 区块内边距：上下10px，左右40px */
    background: var(--light-beige);    /* 使用自定义变量设置浅米色背景 */
    text-align: center;                /* 内容居中显示 */
}

/* 客房网格布局容器 */
.experience-grid {
    display: grid;  /* 启用网格布局 */
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 每行三个列，每列最小宽度300像素，最大宽度为可用空间的一份 */
    gap: 30px;                        /* 网格项间距30px */
    max-width: 1200px;                /* 最大宽度限制 */
    margin: 40px auto 0;              /* 上外边距40px，水平居中 */
}

/* 单个客房卡片样式 */
.experience-card {
    background: white;                /* 卡片背景色（自定义变量） */
    border-radius: 10px;              /* 圆角半径 */
    overflow: hidden;                 /* 隐藏溢出内容（如图片圆角） */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* 柔和阴影效果 */
    transition: transform 0.3s ease;  /* 悬浮变换动画 */
    text-align: left;                 /* 卡片内文字左对齐 */
}

/* 卡片悬浮效果 */
.experience-card:hover {
    transform: translateY(-10px);     /* 上移10像素 */
}

/* 卡片图片容器 */
.experience-img {
    height: 250px;                    /* 固定高度 */
    overflow: hidden;                 /* 隐藏溢出部分 */
}

/* 图片样式 */
.experience-img img {
    width: 100%;                      /* 宽度撑满容器 */
    height: 100%;                     /* 高度撑满容器 */
    object-fit: cover;                /* 保持比例覆盖容器 */
    transition: transform 0.5s ease;  /* 缩放动画 */
}

/* 悬浮时图片放大效果 */
.experience-card:hover .experience-img img {
    transform: scale(1.1);            /* 轻微放大（110%） */
}

/* 卡片内容区域 */
.experience-content {
    padding-top: 10px;    /* 上内边距 */
    padding-right: 15px;  /* 右内边距 */
    padding-bottom: 10px; /* 下内边距 */
    padding-left: 15px;   /* 左内边距 */
}

/* 客房标题样式 */
.experience-title {
    font-size: 1.5rem;                /* 字体大小24px（基于16px基准） */
    color: var(--primary);            /* 主品牌色（自定义变量） */
	padding-top: 0px;    /* 上内边距 */
	margin-top: 0;       /* 上外边距 */
    margin-bottom: 2px;              /* 下边距 */
}

/* 客房描述文本 */
.experience-desc {
    color: var(--text);               /* 正文文本色（自定义变量） */
	padding-top: 2px;    /* 上内边距 */
    margin-bottom: 10 px;              /* 下边距 */
}

/* 价格样式 */
.experience-price {
    font-size: 1.5rem;                /* 字体大小19.2px */
    color: var(--primary);            /* 主品牌色 */
    font-weight: 600;                 /* 加粗显示 */
	margin-bottom: 10px;              /* 下边距 */
}

/* 特色服务区域样式 */
.services-section {
    padding: 20px 40px; /* 设置内边距为40像素 */
    background: var(--light-beige); /* 背景颜色使用自定义属性 --light-beige */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-align: center; /* 文本居中对齐 */
}

.services-grid {
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(3, minmax(100px, 1fr)); /* 每行三个列，每列最小宽度300像素，最大宽度为可用空间的一份 */
    gap: 40px; /* 网格项之间的间距为40像素 */
    max-width: 1200px; /* 最大宽度为1200像素 */
    margin: 0 auto; /* 水平居中 */
}

.service-card {
    background: white; /* 背景颜色为白色 */
    border-radius: 15px; /* 圆角边框半径为15像素 */
    padding: 20px 20px; /* 内边距：上下40像素，左右30像素 */
    text-align: center; /* 文本居中对齐 */
    transition: all 0.4s ease; /* 所有属性的过渡效果，持续时间0.4秒，缓动效果 */
    position: relative; /* 相对定位 */
    overflow: hidden; /* 隐藏溢出内容 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 投影效果 */
    border: 1px solid rgba(139, 115, 75, 0.1); /* 边框颜色和透明度 */
}

.service-card:hover {
    transform: translateY(-10px); /* 鼠标悬停时，卡片向上移动10像素 */
    box-shadow: 0 15px 40px rgba(0,0,0,0.1); /* 鼠标悬停时的投影效果 */
}

.service-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秒，缓动效果 */
}

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

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

.service-card:hover .service-icon i {
    color: white; /* 鼠标悬停时，图标颜色变为白色 */
}

.service-title {
    font-size: 1.6rem; /* 标题字体大小为1.6倍根元素字体大小 */
    color: var(--primary); /* 标题颜色使用自定义属性 --primary */
    margin-bottom: 10px; /* 下边距为15像素 */
    font-weight: 700; /* 字体加粗 */
    position: relative; /* 相对定位 */
    z-index: 2; /* 层级设为2 */
}

.service-desc {
    color: var(--text); /* 描述文字颜色使用自定义属性 --text */
    line-height: 1.7; /* 行高为1.7倍字体大小 */
    position: relative; /* 相对定位 */
    z-index: 2; /* 层级设为2 */
}

/* 企业风采展示区样式 */
.gallery-section {
    padding: 20px 20px; /* 区块内边距 */
    background: var(--light); /* 使用CSS变量定义浅米色背景 */
    position: relative; /* 相对定位为子元素定位提供基准 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-align: center; /* 内容居中对齐 */
}

/* 轮播容器 */
.gallery-container {
    position: relative; /* 相对定位 */
    max-width: 1200px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    overflow: hidden; /* 隐藏溢出内容 */
    padding: 0 60px; /* 左右内边距为导航按钮留空间 */
}

/* 轮播轨道 */
.gallery-track {
    display: flex; /* 弹性布局实现水平排列 */
    gap: 20px; /* 项目间距 */
    transition: transform 0.5s ease; /* 平滑滑动动画 */
    padding: 20px 0; /* 上下内边距 */
    cursor: grab; /* 抓取手势光标 */
}

/* 激活状态（拖动时） */
.gallery-track:active {
    cursor: grabbing; /* 抓取中状态光标 */
}

/* 单个展示项目 */
.gallery-item {
	flex: 0 0 calc(25% - 20px); /* 响应式宽度 */
    min-width: 260px; /* 最小宽度保证项目大小 */
    background: white; /* 白色背景 */
    border-radius: 15px; /* 圆角效果 */
    overflow: hidden; /* 隐藏内容溢出 */
    transition: all 0.3s ease; /* 所有属性变化过渡动画 */
}

/* 项目悬停效果 */
.gallery-item:hover {
    transform: translateY(-10px); /* 上浮效果 */
}

/* 图片容器 */
.gallery-img {
    width: 100%; /* 宽度填充父容器 */
    aspect-ratio: 3 / 2; /* 设定宽高比为3:2 */
    /* 备选方案：使用padding实现比例已不再需要 */
}

/* 图片样式 */
.gallery-img img {
    display: block; /* 块级显示 */
    width: 100%; /* 宽度填充容器 */
    height: 100%; /* 高度填充容器 */
    object-fit: cover; /* 保持比例填充 */
    transition: transform 0.5s ease; /* 缩放动画 */
}

/* 图片悬停放大效果 */
.gallery-item:hover .gallery-img img {
    transform: scale(1.1); /* 轻微放大 */
}

/* 悬停时显示遮罩 */
.gallery-item:hover .img-overlay {
    opacity: 1; /* 完全显示 */
}

/* 按钮悬停效果 */
.view-btn:hover {
    background: rgba(255, 255, 255, 0.2); /* 半透明白色背景 */
}

/* 内容区域 */
.gallery-content {
	padding-top: 0px;    /* 上内边距 */
	padding-right: 15px;  /* 右内边距 */
	padding-bottom: 10px; /* 下内边距 */
	padding-left: 15px;   /* 左内边距 */
    text-align: center; /* 文本居中 */
}

/* 标题样式 */
.gallery-title {
    font-size: 1.5rem; /* 标题字号 */
	margin-top: 10px;       /* 上外边距 */
    color: var(--primary); /* 主品牌色 */
    margin-bottom: 5px; /* 增加下边距以改善布局 */
    font-weight: 700; /* 加粗 */
}

/* 描述文本 */
.gallery-desc {
    color: var(--text); /* 正文颜色 */
	margin-top: 5px;       /* 上外边距 */
    margin-bottom: 0px; /* 增加下边距以改善布局 */
    line-height: 1.6; /* 行高 */
}

/* 导航按钮容器 */
.gallery-nav-container {
    position: absolute; /* 绝对定位 */
    top: 50%; /* 垂直居中 */
    left: 0; /* 左对齐 */
    right: 0; /* 右对齐 */
    display: flex; /* 弹性布局 */
    justify-content: space-between; /* 两端对齐分布 */
    transform: translateY(-50%); /* 去掉额外的10px，直接居中 */
    z-index: 10; /* 确保在最上层 */
	pointer-events: none; /* 防止按钮阻挡 */
}

/* 导航按钮 */
.gallery-nav {
    width: 50px; /* 按钮宽度 */
    height: 50px; /* 按钮高度 */
    background: white; /* 白色背景 */
    border-radius: 50%; /* 圆形按钮 */
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    cursor: pointer; /* 手型指针 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* 阴影效果 */
    transition: all 0.3s ease; /* 过渡效果 */
	pointer-events: auto; /* 恢复按钮点击 */
	position: relative; /* 修复定位 */
	margin: 0 20px; /* 添加外边距 */
}

/* 导航按钮悬停效果 */
.gallery-nav:hover {
    background: var(--accent); /* 强调色背景 */
    transform: scale(1.1); /* 放大效果 */
}

/* 导航按钮图标样式 */
.gallery-nav i {
    font-size: 20px; /* 图标大小 */
    color: var(--primary); /* 主品牌色 */
}

/* 导航按钮悬停时图标颜色变化 */
.gallery-nav:hover i {
    color: white; /* 白色图标 */
}

/* 指示器容器 */
.gallery-indicators {
    display: flex; /* 弹性布局 */
    justify-content: center; /* 水平居中 */
    gap: 10px; /* 项目间距 */
    margin-top: 20px; /* 上边距 */
}

/* 指示器样式 */
.indicator {
    width: 12px; /* 宽度 */
    height: 12px; /* 高度 */
    border-radius: 50%; /* 圆形指示器 */
    background: rgba(138, 154, 91, 0.3); /* 确保颜色变量一致 */
    cursor: pointer; /* 手型指针 */
    transition: all 0.3s ease; /* 过渡效果 */
}

/* 激活状态的指示器样式 */
.indicator.active {
    background: var(--secondary); /* 确保颜色变量一致 */
    transform: scale(1.2); /* 放大效果 */
}
/* 底部区域样式 */
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;
}