/* 全局设置 */
body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    background-color: #f9f9f9;
}

/* 容器：用于限制内容最大宽度，保持居中 */
.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 链接样式 */
a {
    text-decoration: none;
    color: #333;
    transition: 0.3s;
}

/* 顶部栏 (语言切换) */
.top-bar {
    background-color: #004d40; /* 深绿色，体现ESG环保理念 */
    color: #fff;
    padding: 5px 0;
    text-align: right;
    font-size: 0.9em;
}

.top-bar a {
    color: #fff;
    margin: 0 5px;
}

.top-bar a:hover {
    text-decoration: underline;
}

/* === 修复头部对齐问题 === */

/* 1. 外层：负责全屏白色背景 */
.main-header {
    background-color: white;
    width: 100%;
    border-bottom: 1px solid #ddd;
    position: relative;
    z-index: 10;
}

/* 2. 内层：负责让 Logo 和 菜单 并排显示 */
.header-inner {
    /* 关键代码开始 */
    display: flex !important;       /* 强制变成弹性盒子（横排） */
    justify-content: space-between; /* 一左一右撑开 */
    align-items: center;            /* 垂直居中对齐 */
    /* 关键代码结束 */
    
    padding: 10px 0;
    height: 70px;     /* 强制给它定一个高度，锁死它，不让它乱长高 */
    width: 90%;          /* 确保继承 container 的宽度 */
    max-width: 1200px;   /* 限制最大宽度 */
    margin: 0 auto;      /* 居中显示 */
}


.logo h1 {
    margin: 0;
    color: #004d40;
    font-size: 1.5rem;
}

.logo small {
    color: #666;
    font-size: 0.8rem;
    display: block;
}

/* 导航菜单样式 */
.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav ul li {
    margin-left: 20px;
    position: relative; /* 为了下拉菜单定位 */
}

.main-nav ul li a {
    font-weight: bold;
    font-size: 1rem;
    padding: 10px 0;
    display: block;
}

.main-nav ul li a:hover {
    color: #00796b; /* 悬停时的亮绿色 */
    border-bottom: 2px solid #00796b;
}

/* 下拉菜单 (政策与趋势) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    min-width: 160px;
    z-index: 1;
    top: 100%;
}

/* === 修复下拉菜单文字太靠左的问题 === */
.dropdown-content a {
    /* 核心修改：增加 padding (内边距) */
    /* 第一个数值 12px 是上下间距 */
    /* 第二个数值 25px 是左右间距 <-- 这里改大一点，文字就会往右移 */
    padding: 12px 25px !important; 
    
    display: block;       /* 确保链接占满整行 */
    text-align: left;     /* 确保文字左对齐 */
    color: #333;          /* 文字颜色 */
    text-decoration: none;/* 去掉下划线 */
    transition: 0.2s;     /* 添加一点鼠标悬停的平滑过渡 */
}

/* 可选：增加鼠标悬停时的效果，让交互感更好 */
.dropdown-content a:hover {
    background-color: #f1f1f1; /* 鼠标放上去变灰 */
    color: #004d40;            /* 文字变绿 */
    padding-left: 30px !important; /* 悬停时稍微再往右动一点点，会有动态感 */
}

.dropdown:hover .dropdown-content {
    display: block;
}

/* Hero Section (大图区域) */
.hero {
    background-color: #e0f2f1; /* 浅绿色背景，实际开发中可以用图片代替 */
    padding: 80px 0;
    text-align: center;
}

.hero h2 {
    font-size: 2.5rem;
    color: #004d40;
}

.hero p {
    font-size: 1.2rem;
    color: #555;
    margin-bottom: 30px;
}

.btn {
    background-color: #004d40;
    color: white !important;
    padding: 12px 30px;
    border-radius: 5px;
}

.btn:hover {
    background-color: #00695c;
}

/* 核心板块 (网格布局) */
.features {
    padding: 60px 0;
}

.section-title h3 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 2rem;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.card {
    background: white;
    padding: 30px;
    border: 1px solid #eee;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: transform 0.3s;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.card-icon {
    font-size: 3rem;
    margin-bottom: 15px;
}

/* 页脚 */
footer {
    background-color: #333;
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 40px;
}

/* === 关于我们页面样式 === */

/* 页面顶部标题条 */
.page-title-bar {
    background-color: #004d40; /* 与主色调一致 */
    color: white;
    padding: 60px 0;
    text-align: center;
    margin-bottom: 40px;
}

.page-title-bar h1 {
    margin: 0;
    font-size: 2.5rem;
}

/* 简介区域布局 */
.about-intro {
    display: flex;
    gap: 40px;
    align-items: center; /* 垂直居中 */
    padding-bottom: 60px;
}

.intro-text {
    flex: 1; /* 占一半宽度 */
    line-height: 1.8;
}

.intro-image {
    flex: 1; /* 占另一半宽度 */
}

/* 手机端适配：变成上下排列 */
@media (max-width: 768px) {
    .about-intro {
        flex-direction: column;
    }
}

/* 使命愿景部分的背景色 */
.mission-section {
    background-color: #f4fcfb; /* 很淡的绿色背景，区分区块 */
    padding: 60px 0;
}

/* 干净风格的卡片（去掉阴影，更像 foretica 的扁平风） */
.clean-card {
    background: transparent;
    border: 1px solid #ccece6;
    box-shadow: none;
    text-align: left; /* 文字左对齐更正式 */
}

.clean-card h3 {
    color: #004d40;
    border-bottom: 2px solid #004d40;
    padding-bottom: 10px;
    display: inline-block;
}

/* 导航栏高亮当前页面 */
.current-page {
    color: #004d40 !important;
    border-bottom: 2px solid #004d40;
}

/* === 政策页面专用布局 (侧边栏风格) === */
.content-wrapper {
    display: flex;
    gap: 40px;
    padding: 60px 0;
    align-items: flex-start; /* 顶部对齐 */
}

/* 左侧主内容区 */
.main-content {
    flex: 3; /* 占据 75% 宽度 */
    background: white;
    padding: 30px;
    border: 1px solid #eee;
}

.main-content h2 {
    color: #004d40;
    border-bottom: 2px solid #eee;
    padding-bottom: 15px;
    margin-top: 0;
}

.main-content h3 {
    color: #2c3e50;
    margin-top: 30px;
}

.main-content ul {
    line-height: 1.8;
}

/* 右侧侧边栏 */
.sidebar {
    flex: 1; /* 占据 25% 宽度 */
    background: #f9f9f9;
    padding: 20px;
    border-left: 4px solid #004d40;
}

.sidebar h4 {
    margin-top: 0;
    color: #333;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar ul li {
    margin-bottom: 10px;
}

.sidebar ul li a {
    color: #555;
    display: block;
    padding: 8px 0;
    border-bottom: 1px dotted #ccc;
}

.sidebar ul li a:hover {
    color: #004d40;
    padding-left: 5px; /* 悬停时稍微右移 */
}

/* 手机适配 */
@media (max-width: 768px) {
    .content-wrapper {
        flex-direction: column;
    }
    .sidebar {
        width: 100%;
        border-left: none;
        border-top: 4px solid #004d40;
    }
}

/* === 培训与咨询页面样式 === */

/* 服务/课程网格容器 */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 自适应列数 */
    gap: 30px;
    margin-bottom: 60px;
}

/* 单个卡片样式 */
.service-card {
    background: white;
    border: 1px solid #eee;
    border-radius: 8px;
    overflow: hidden; /* 保证图片圆角不溢出 */
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-5px); /* 悬停上浮 */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* 卡片顶部图片区域（这里用颜色块代替） */
.service-img {
    height: 200px;
    background-color: #e0f2f1; /* 浅绿色背景 */
    display: flex;
    align-items: center;
    justify-content: center;
    color: #004d40;
    font-size: 3rem; /* 图标大小 */
}

/* 卡片文字内容 */
.service-info {
    padding: 25px;
}

.service-info h3 {
    margin-top: 0;
    color: #004d40;
    font-size: 1.25rem;
}

.service-info p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* 卡片底部的按钮 */
.card-btn {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #004d40;
    color: #004d40;
    border-radius: 4px;
    font-weight: bold;
}

.card-btn:hover {
    background-color: #004d40;
    color: white;
}

/* 咨询页面的“联系我们要方案”大框 */
.cta-box {
    background-color: #004d40;
    color: white;
    padding: 50px;
    text-align: center;
    border-radius: 8px;
    margin-top: 40px;
}

.cta-box h2 {
    color: white; /* 覆盖默认颜色 */
}

.cta-btn {
    background-color: white;
    color: #004d40 !important;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: bold;
    display: inline-block;
    margin-top: 20px;
}

/* === 新闻动态页面样式 === */

/* 新闻列表容器 */
.news-container {
    max-width: 900px; /* 让新闻列表窄一点，阅读体验更好 */
    margin: 0 auto;
    padding: 60px 0;
}

/* 单条新闻 */
.news-item {
    display: flex;
    background: white;
    border: 1px solid #eee;
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s;
}

.news-item:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* 新闻图片区域 */
.news-thumb {
    width: 280px;
    background-color: #eee;
    flex-shrink: 0; /* 防止图片被挤压 */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #bbb;
}

/* 新闻文字内容 */
.news-content {
    padding: 25px;
    flex: 1;
}

/* 日期样式 */
.news-date {
    font-size: 0.85rem;
    color: #999;
    margin-bottom: 10px;
    display: block;
}

.news-content h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #004d40;
}

.news-content p {
    color: #666;
    line-height: 1.6;
    margin-bottom: 15px;
}

.read-more {
    color: #004d40;
    font-weight: bold;
    text-decoration: underline;
}

/* 手机适配：变成上下排列 */
@media (max-width: 768px) {
    .news-item {
        flex-direction: column;
    }
    .news-thumb {
        width: 100%;
        height: 200px;
    }
}

/* === 丝绸背景动画样式 === */
#silk-canvas {
    position: fixed; /* 固定在窗口 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* 关键！放在所有内容的最底下 */
    background-color: #0d1117; /* 深色背景，让线条更明显，也可改为白色 */
    pointer-events: none; /* 鼠标可以直接穿透它点击内容 */
}

/* 稍微调整一下原有 body 的背景，让它变成透明，这样才能透出 canvas */
body {
    background-color: transparent !important; 
}