/* 设置全局参数 */
* {
    margin: 0;
    padding: 0;
    font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif; /* 设置字体 */
    box-sizing: border-box; /* 固定div等盒子的宽度计算方式，内容区会自动缩小，给内边距和边框腾位置 */
}

/* 让整个页面参数 */
body {
    background-color: #f8f9fa; 
    min-width: 1500px;
    /* 
    1. 浏览器默认行为（不加 min-width 时）
    浏览器窗口缩小时，它会强行把页面宽度压缩成和窗口一样宽。
    比如窗口只有500px宽，页面就被压成500px。你的导航栏菜单总宽度可能有1000px，
    但页面被强行压成500px→右边500px的菜单直接被“切掉”看不见，也不出滚动条。
    2.加了 min-width: 1500px 之后
    强制规定：我的页面宽度，最小最小最小，也必须是 1500px！
    于是：
    浏览器窗口 1500px 宽 → 页面宽度 1500px（正常）
    浏览器窗口 1000px 宽 → 页面宽度依然 1500px
    浏览器窗口 500px 宽 → 页面宽度依然 1500px
    当页面宽度（1500px） > 浏览器窗口宽度时，浏览器就会自动在底部出现横向滚动条！
    因为它知道：页面太宽了，窗口装不下，你拖动滚动条就能看全部内容。 */
}

/* 顶部完整导航栏的父元素，主要用于实现导航栏吸顶才加入此段代码 */
#navbar {
  position: sticky;
  top: 0;
  z-index: 999; /* 保证导航在最上层 */
  width: 100%; /* 占满宽度 */
}

/* 顶部完整导航栏 */
header {
    width: 100%;
    padding: 20px;
    color: #fff;
    background-color: #333F50;
    display: flex;  /* 导航栏内的块元素从垂直排列改为水平排列(不包含孙块元素) */
}

/* LOGO */
.logo {
    color: #fff;
    font-size: 30px;
    font-weight: bold;  /* 字体加粗 */
    white-space: nowrap; /* 文本不换行 */
}

/* 主导航 */
.main-nav {
    gap: 40px; /* 导航菜单间距 */
    display: flex;  /* 设置弹性盒子，使列表由纵向排列改为横向排列 */
    list-style: none;   /* 取消列表项前面的1点 */
    margin: 0 auto;      /* 自动左右居中，设置后子标签对比父标签水平居中 */
}

/* 登录，辅助占位，确保不管浏览器怎么缩小放大，主导航栏都永远居中展示 */
.login {
    width:200px;
}

/* 导航字体样式 */
.main-nav > li > a {
    font-size: 25px; 
    line-height: 50px; /* 垂直居中 */
    color: white;   /* 带链接的文本颜色默认为蓝色，改回白色 */
    text-decoration: none;  /* 带链接的文本默认带下划线，删除下划线 */
}

/* 鼠标移动到主菜单时变色 */
.main-nav > li > a:hover,
.main-nav > li > a.active {
    color: #D4AF6A;
}

/* 选中主菜单时弹出二级菜单 */
.has-submenu {
    position: relative; 
}

/* 二级菜单样式 */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #404E64;
    list-style: none;
    min-width: 200px;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none; /* 默认隐藏 */
    z-index: 999; /* 确保二级菜单在最上层 */
    padding: 10px 0;
}

/* 二级菜单选项样式 */
.submenu li {
    padding: 0 15px;
}

/* 二级菜单字体样式 */
.submenu li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    display: block;
    padding: 10px 0;
    transition: color 0.3s;
}

/* 鼠标移动到二级菜单时交互效果 */
.submenu li a:hover {
    color: #D4AF6A;
    padding-left: 5px; /* 鼠标悬浮时轻微缩进，提升交互感 */
    transition: padding-left 0.3s;
}

/* 鼠标悬浮主菜单时显示二级菜单 */
.has-submenu:hover .submenu {
    display: block;
}

/* 首屏横幅 */
.hero {
    background-image: url(../img/backgroud.png);
    background-size: 100% 100%;
    color: white;
    text-align: center;
    padding: 5rem;
}

.hero p {
    font-size: 1.5rem;
    margin: 1.5rem;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
}

.hero-btn-primary {
    background-color: #D4AF6A;
    color: #0F2540;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
}

.hero-btn-secondary {
    background-color: transparent;
    color: white;
    border: 2px solid white;
    padding: 1rem 2.5rem;
    border-radius: 6px;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background-color 0.3s;
}

.hero-btn-secondary:hover {
    background-color: rgba(255,255,255,0.1);
}

/* 案例展示 */
.cases {
    padding-top: 5rem;
    background-color: #f8f9fa;
}

.cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto 0;
}

.case-card {
    background-color: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.case-image {
    width: 100%;
    height: 280px;
    object-fit: cover;
}

.case-info {
    padding: 1.5rem;
}

.case-info h3 {
    font-size: 1.5rem;
    color: #0F2540;
    margin-bottom: 1rem;
}

.case-tag {
    background-color: #e9ecef;
    color: #506478;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.95rem;
    display: inline-block;
}

/* 核心服务 */
.services {
    padding: 5rem 2rem;
    background-color: #f8f9fa;
}

.section-title {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title h2 {
    font-size: 2.2rem;
    color: #0F2540;
    margin-bottom: 1rem;
}

.section-title p {
    font-size: 1.3rem;
    color: #506478;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background-color: white;
    padding: 2.5rem;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.service-icon {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #0F2540;
}

.service-card h3 {
    font-size: 1.6rem;
    color: #0F2540;
    margin-bottom: 1rem;
}

.service-card p {
    color: #506478;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.learn-more {
    color: #D4AF6A;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.learn-more::after {
    content: "→";
}

/* 团队介绍 */
.team {
    padding-bottom: 5rem;
    background-color: #f8f9fa;
    display: flex;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    gap: 4rem;
}

.team-image {
    width: 40%;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}

.team-content {
    width: 60%;
}

.team-content h2 {
    font-size: 2.2rem;
    color: #0F2540;
    margin-bottom: 2rem;
}

.team-list {
    list-style: none;
}

.team-list li {
    font-size: 1.3rem;
    color: #0F2540;
    margin-bottom: 1.5rem;
}

.team-list li::before {
    content: "✓";
    color: #D4AF6A;
    font-weight: bold;
    font-size: 1.5rem;
    margin-right: 1.5 rem;
}

.team-list li span {
    color: red;
}

.team-btn {
    background-color: #0F2540;
    color: white;
    border: none;
    padding: 1rem 2.5rem;
    border-radius: 6px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
}

/* 页脚 */
footer {
    background-color: #0F2540;
    color: white;
    padding: 2rem;
}

.footer-content {
    display: grid;
    grid-template-columns: 450px auto 400px;
    gap: 5rem;
    max-width: 1200px;
    margin: 0 auto 3rem;
}

.footer-logo {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
}

.footer-desc {
    color: rgba(255,255,255,0.8);
    line-height: 1.8;
    font-size: 1.2rem;
}

.footer-links h4, .footer-contact h4 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: white;
}

.footer-links ul {
    list-style: none;
}

.footer-links ul li {
    margin-bottom: 1rem;
}

.footer-links ul li a {
    color: rgba(255,255,255,0.8);
    text-decoration: none;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.footer-links ul li a:hover {
    color: #D4AF6A;
}

.footer-contact p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 1rem;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.footer-contact p::before {
    color: #D4AF6A;
    font-size: 1.3rem;
}

.footer-phone::before {
    content: "📞";
}

.footer-email::before {
    content: "✉️";
}

.footer-address::before {
    content: "📍";
}