/* 全局样式 */
* {
    margin: 0;          /* 重置所有元素的外边距 */
    padding: 0;         /* 重置所有元素的内边距 */
    box-sizing: border-box; /* 让元素的宽度和高度包括内边距和边框 */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* 设置默认字体 */
}

body {
    background-color: #f5f7fa;  /* 设置页面背景颜色 */
    color: #333;               /* 设置页面默认文本颜色 */
    line-height: 1.6;         /* 设置行高 */
}

.container {
    width: 85%;              /* 设置容器宽度 */
    max-width: 1200px;       /* 设置容器最大宽度 */
    margin: 0 auto;          /* 设置容器水平居中 */
    padding: 0 15px;         /* 设置容器左右内边距 */
}



/**/
.long-image-section {
    padding: 40px 0;
    background-color: #fff;
}

.long-image-section .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0; /* 移除内边距，让图片贴边 */
}

.long-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* 如果贴边，可能需要移除圆角 */
    box-shadow: none; /* 如果贴边，可能需要移除阴影 */
}

/**/


/* 导航栏样式 */
header {
    background-color: #003366;  /* 设置导航栏背景颜色 */
    color: white;               /* 设置导航栏文本颜色 */
    padding: 15px 0;            /* 设置导航栏上下内边距 */
    position: sticky;          /* 设置导航栏为粘性定位 */
    top: 0;                   /* 设置导航栏固定在顶部 */
    z-index: 100;              /* 设置导航栏的堆叠顺序 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 设置导航栏阴影 */
}

nav {
    display: flex;              /* 设置导航栏为弹性布局 */
    justify-content: space-between; /* 设置导航栏元素两端对齐 */
    align-items: center;       /* 设置导航栏元素垂直居中 */
}

.logo {
    font-size: 24px;          /* 设置logo字体大小 */
    font-weight: bold;        /* 设置logo字体加粗 */
}

.nav-links {
    display: flex;              /* 设置导航链接为弹性布局 */
    list-style: none;          /* 去除导航链接列表样式 */
}

.nav-links li {
    margin-left: 20px;         /* 设置导航链接项左外边距 */
    position: relative;        /* 为子菜单提供定位上下文 */
}

.nav-links a {
    color: white;               /* 设置导航链接文本颜色 */
    text-decoration: none;     /* 去除导航链接下划线 */
    font-size: 14px;          /* 设置导航链接字体大小 */
    font-weight: 500;          /* 设置导航链接字体粗细 */
    transition: color 0.3s;    /* 设置导航链接颜色过渡效果 */
}

.nav-links a:hover {
    color: #4dabf7;            /* 设置导航链接悬停时文本颜色 */
}

/* 子菜单样式 */
.submenu {
    display: none;             /* 默认隐藏子菜单 */
    position: absolute;        /* 设置子菜单为绝对定位 */
    background-color: white;    /* 设置子菜单背景颜色 */
    border-radius: 5px;        /* 设置子菜单圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* 设置子菜单阴影 */
    padding: 10px 0;           /* 设置子菜单上下内边距 */
    width: 200px;              /* 设置子菜单宽度 */
    z-index: 101;              /* 设置子菜单的堆叠顺序，确保在导航栏上方 */
    transition: opacity 0.3s ease, transform 0.3s ease; /* 设置子菜单显示/隐藏过渡效果 */
    opacity: 0;                /* 初始时子菜单透明度为0 */
    transform: translateY(10px); /* 初始时子菜单向下偏移10px */
    left: 0;                   /* 设置子菜单左对齐 */
    list-style: none;          /* 去除子菜单列表样式 */
}

/* 鼠标悬停时显示子菜单 (基本样式) */
.nav-links li:hover .submenu {
    display: block;            /* 显示子菜单 */
    opacity: 1;                /* 子菜单透明度变为1 */
    transform: translateY(0);  /* 子菜单垂直偏移恢复为0 */
}

.submenu li {
    margin: 0;                /* 重置子菜单项外边距 */
    padding: 10px 20px;        /* 设置子菜单项内边距 */
    max-width: 85%;           /* 设置子菜单项最大宽度 */
    transition: background-color 0.3s; /* 设置子菜单项背景颜色过渡效果 */
    box-sizing: border-box;    /* 重要：防止 padding 撑大宽度 */
}

.submenu li:hover {
    background-color: #f0f0f0; /* 设置子菜单项悬停时背景颜色 */
          /* 确保阴影覆盖整个 li */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 添加或调整阴影 */
}

.submenu li a {
    color: #333;               /* 设置子菜单链接文本颜色 */
    text-decoration: none;     /* 去除子菜单链接下划线 */
    font-size: 14px;          /* 设置子菜单链接字体大小 */
    transition: color 0.3s;    /* 设置子菜单链接颜色过渡效果 */
    display: block;            /* 让链接充满整个 li */
    width: 100%;              /* 设置子菜单链接宽度 */
}

.submenu li a:hover {
    color: #003366;           /* 设置子菜单链接悬停时文本颜色 */
}


/* Hero section */
.hero {
     /* 设置背景图片和渐变叠加 */
   /* background: linear-gradient(rgba(0, 51, 102, 0.7), rgba(0, 51, 102, 0.7)), url('../images/hero-bg.jpg'); */
     background: linear-gradient(rgba(0, 51, 102, 0.8), rgba(0, 51, 102, 0.8)), url('images/background.jpg');
    background-size: cover;   /* 设置背景图片大小为覆盖 */
    background-position: center; /* 设置背景图片位置为居中 */
    color: white;              /* 设置文本颜色为白色 */
    text-align: center;       /* 设置文本水平居中 */
    padding: 100px 0;          /* 设置上下内边距 */
}

.hero h1 {
    font-size: 3.5em;         /* 设置标题字体大小 */
    margin-bottom: 20px;      /* 设置标题下外边距 */
}

.hero p {
    font-size: 1.2em;         /* 设置段落字体大小 */
    margin-bottom: 30px;      /* 设置段落下外边距 */
}


.cta-button {
    display: inline-block;
    background-color: white;
    color: #003366;
    padding: 12px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s;
}

.cta-button:hover {
    background-color: #357ebd; /* 设置按钮悬停时背景颜色 */
}


/* Overview section */
.overview {
    padding: 60px 0;          /* 设置上下内边距 */
    background-color: #fff;   /* 设置背景颜色 */
}

.overview h2 {
    font-size: 2.5em;         /* 设置标题字体大小 */
    margin-bottom: 20px;      /* 设置标题下外边距 */
    text-align: center;       /* 设置文本水平居中 */
}
.overview > .container > h2{
    font-size: 2em;          /* 设置次级标题字体大小 */
     margin-bottom: 10px;      /* 设置次级标题下外边距 */
}

.overview p {
    margin-bottom: 30px;      /* 设置段落下外边距 */
    text-align: justify;      /* 设置文本两端对齐 */
}

.features {
    display:grid;                                         /* 设置为网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 设置网格列数，自适应，最小宽度300px */
    gap: 20px;                                              /* 设置网格间距 */
    margin-top: 40px;                                         /* 设置上外边距 */
}

.feature {
    background-color: #f9f9f9;                             /* 设置背景颜色 */
    padding: 20px;                                           /* 设置内边距 */
    border-radius: 5px;                                       /* 设置圆角 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);                  /* 设置阴影 */
    text-align: center;                                      /* 设置文本水平居中 */
}

.feature h3 {
    font-size: 1.5em;                                       /* 设置标题字体大小 */
    margin-bottom: 10px;                                      /* 设置标题下外边距 */
    color: #003366;                                          /* 设置标题颜色 */
}

/* Products section */
.products {
    padding: 60px 0;                                         /* 设置上下内边距 */
    background-color: #f5f7fa;                             /* 设置背景颜色 */
}

.products h2 {
    font-size: 2.5em;                                       /* 设置标题字体大小 */
    margin-bottom: 40px;                                      /* 设置标题下外边距 */
    text-align: center;                                      /* 设置文本水平居中 */
}

.product-grid {
    display: grid;                                         /* 设置为网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* 设置网格列数，自适应，最小宽度350px */
    gap: 30px;                                              /* 设置网格间距 */
}

.product-card {
    background-color: white;                                 /* 设置背景颜色 */
    border-radius: 8px;                                       /* 设置圆角 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);                  /* 设置阴影 */
    overflow: hidden;                                        /* 隐藏溢出内容 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;    /* 设置过渡效果 */
}

.product-card:hover {
    transform: translateY(-5px);                              /* 鼠标悬停时向上移动 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);                 /* 鼠标悬停时增加阴影 */
}

.product-image {
    height: 250px;                                           /* 设置图片容器高度 */
    overflow: hidden;                                        /* 隐藏溢出内容 */
}

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

.product-card:hover .product-image img {
    transform: scale(1.1);                                    /* 鼠标悬停时图片放大 */
}

.product-info {
    padding: 20px;                                           /* 设置内边距 */
    text-align: center;                                      /* 设置文本水平居中 */
}

.product-info h3 {
    font-size: 1.4em;                                       /* 设置标题字体大小 */
    margin-bottom: 10px;                                      /* 设置标题下外边距 */
    color: #003366;                                          /* 设置标题颜色 */
}

.product-info p {
    font-size: 1em;                                         /* 设置段落字体大小 */
    margin-bottom: 15px;                                      /* 设置段落下外边距 */
    text-align: justify;                                      /* 设置文本两端对齐 */
}

.learn-more {
    display: inline-block;                                   /* 设置为行内块元素 */
    background-color: #4dabf7;                               /* 设置背景颜色 */
    color: white;                                             /* 设置文本颜色 */
    padding: 10px 20px;                                       /* 设置内边距 */
    text-decoration: none;                                    /* 去除下划线 */
    border-radius: 5px;                                       /* 设置圆角 */
    font-weight: bold;                                        /* 设置文本加粗 */
    transition: background-color 0.3s;                        /* 设置背景颜色过渡效果 */
    margin-top: 10px;                                         /* 设置上外边距 */
}

.learn-more:hover {
    background-color: #357ebd;                               /* 设置悬停时背景颜色 */
}

/* Footer */
footer {
    background-color: #333;                                  /* 设置背景颜色 */
    color: white;                                             /* 设置文本颜色 */
    text-align: center;                                      /* 设置文本水平居中 */
    padding: 20px 0;                                         /* 设置上下内边距 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .nav-links {
        display: none;        /* 隐藏导航链接 */
        flex-direction: column; /* 垂直排列 */
        width: 100%;          /* 设置宽度为100% */
        position: absolute;   /* 绝对定位 */
        top: 60px;            /* 调整位置，在 header 下方 */
        left: 0;              /* 左对齐 */
        background-color: #003366; /* 设置背景颜色 */
    }

    .nav-links.active {
        display: flex;        /* 显示导航链接 */
    }

    .nav-links li {
        margin: 10px 0;       /* 设置外边距 */
        text-align: center;   /* 水平居中 */
    }

     .nav-links li:hover .submenu{
            position: static; /*  移动端，子菜单改为静态定位 */
            display: block;
            opacity: 1;
            transform: none;
            width: 100%;
        }
        .submenu{
            width: auto;
            position: static; /*  移动端，子菜单改为静态定位 */
        }
        .has-submenu{
            position: static;
        }

    .logo {
        /* 可以在这里添加汉堡菜单图标的样式 */
        cursor: pointer;      /* 鼠标悬停时显示手型 */
    }

    .hero h1 {
        font-size: 2.5em;    /* 调整标题字体大小 */
    }

    .hero p {
        font-size: 1em;     /* 调整段落字体大小 */
    }
     .overview h2{
         font-size: 1.8em;
     }
    .overview > .container > h2{
        font-size: 1.5em;
    }
    .products h2{
        font-size: 1.8em;
    }

    .features,
    .product-grid {
        grid-template-columns: 1fr; /* 垂直排列 */
    }
     .nav-links li:hover .submenu{
            position: static; /*  移动端，子菜单改为静态定位 */
            display: block;
            opacity: 1;
            transform: none;
            width: 100%;
            list-style: none; /* 移除列表项目符号 */
        }
        .submenu{
            width: auto;
            position: static; /*  移动端，子菜单改为静态定位 */
            list-style: none; /* 移除列表项目符号 */
        }
}