/* ============================================
   home.css - 网站全局样式文件
   主要作用：统一页面各模块样式，包括页眉、导航、
   产品列表、公司介绍及页脚，同时支持响应式布局。
   ============================================ */

/* 通用样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 基本页面样式 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  padding: 20px;
  background-color: #f7f7f7;
  color: #333;
}

/* -----------------------
   页眉 (Header)
----------------------- */
/* 公共页眉样式 */
header {
  position: relative;
  background: url('../images/earth.jpg') no-repeat center center;
  background-size: cover;
  color: white;
  padding: 1rem;
  margin: 0 auto;
  min-height: 115px; /* 增加最小高度，使背景图面积更大 */
}

/* 半透明遮罩 */
header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

/* 确保 header 内容位于遮罩上方 */
header > * {
  position: relative;
  z-index: 1;
}


/* Header 标题 */
header h1 {
  font-size: 24px;
  text-align: left;
  margin: 0 20  15px 0; /* 设置下边距为20px */
}

/* 导航菜单 */
header nav {
  margin-top: 20px;
width: 100%;
    }
header nav ul {
  list-style: none;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      gap: 20px;
padding-left: 0;
  margin: 0
}

header nav ul li a {
   text-decoration: none;
      color: white;
      font-weight: 600;
      padding: 5px 10px;
      border-radius: 4px;
      transition: color 0.3s ease, transform 0.3s ease;
}

header nav ul li a:hover {
  color: #007BFF;
      transform: scale(1.05);
}

/* -----------------------
   产品列表样式
----------------------- */
.product-list {
  display: flex;
  flex-direction: row;
  gap: 20px;
  /* 确保所有子项高度一致 */
  align-items: stretch;
}

.product {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  text-align: center;
}

.product img {
  width: 250px;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
}

.product h3 {
  margin: 0;
}

/* -----------------------
   公司介绍部分 (示例)
----------------------- */
/* 可根据需要在此添加相关样式 */
main {
  margin-bottom: 70px; /* 70px 的间距，具体数值根据页脚高度调整 */
}

/* -----------------------
   页脚 (Footer)
----------------------- */
footer {
  position: fixed;      /* 固定定位 */
  bottom: 0;            /* 固定在底部 */
  left: 0;
  width: 100%;          /* 占满整个视口宽度 */
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 15px 20px;
  font-size: 14px;
  /* 移除 clear 和 margin-top */
}

/* =======================
   响应式设计
======================= */
@media (max-width: 768px) {
  header h1 {
    font-size: 20px;
  }
  
  header nav ul {
    display: block;
  }
  
  header nav ul li {
    display: block;
    margin-bottom: 10px;
    margin-right: 0;
  }
}