* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }

 body {
            background-color: #f9f9f9;
 }
.header {
    background-color: #ffffff;
    box-shadow: 0 2px 15px rgb(0 0 0 / 53%);
    position: sticky;
    top: 0;
    z-index: 100;
    }

        .header-container {
            max-width: 13000px;
            margin: 0 auto;
            padding: 0 px;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
        }

        .brand {
            display: flex;
            align-items: center;
        }
        .logo{
            width:80xp;
            height:80xp;
            display:flex;
            align-items:center;
            justify-content:center;
            margin-right:1xp;
        }
        .brand-title {
            font-size: 50px;
            font-weight: 700;
            color: #5f4848;
            letter-spacing: 1px;
            margin-left:1em;
        }

        .brand-title span {
            color: #d16262;
        }

        .nav-menu {
            display: flex;
            list-style: none;
        }

        .nav-item {
            margin-left: 30px;
            position: relative;
        }

        .nav-link {
            text-decoration: none;
            color: #555;
            font-weight: 600;
            font-size: 20px;
            padding: 10px ;
            transition: color 0.3s ease;
            position: relative;
        }

        .nav-link:hover {
            color: #c74b4b;
        }

        .nav-link::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: #8e5959;
            transition: width 0.3s ease;
        }

        .nav-link:hover::after {
            width: 100%;
        }

.grid-container .headpicture::before {
  content: ""; /* 伪元素必须有content属性 */
  position: absolute; /* 绝对定位，覆盖图片 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 半透明灰色：rgba(灰色值, 透明度)，最后一个值0-1控制透明 */
  background-color: rgb(27 22 22 / 41%); 
  pointer-events: none; /* 让鼠标事件穿透图层，不影响图片悬停缩放 */
  z-index:1;
}
.grid-container .headpicture::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 25%; /* 阴影高度 */
  background: linear-gradient(to top, 
    rgb(42 49 65 / 90%), /* 底部深色（与卡片背景一致） */
    rgba(15, 23, 42, 0.6), 
    transparent
  );
  pointer-events: none; /* 不影响图片交互 */
  z-index:2;
}
.grid-container .headpicture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  position: relative;/* 确保图片在渐变层下方（可选，因伪元素是绝对定位） */
  margin-bottom: 3rem;
}
/* 卡片宽度：可改为固定宽度（如w-80）或百分比（如w-full） */
.headpicture {  
width: auto; /* 图片宽度=父容器宽度的80% */  
height: auto;  
display: block; /* 可选：消除图片默认的inline空隙 */  
margin: 0 auto;/* 可选：水平居中 */
overflow: hidden;
}

.card-grid-5 {
  /* 网格布局 */
  display: grid;
  /* 列数：最小宽度280px，自动填充，最多5列 */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  /* 列之间的间距（水平间距） */
  column-gap: 3rem; /* 24px，可调整为1rem=16px等 */
  /* 行之间的间距（垂直间距），如果有多行的话 */
  row-gap: 2rem; /* 32px，可调整 */
  /* 可选：添加最大宽度限制，防止容器过宽 */
  max-width: 1600px; /* 根据5张卡片宽度+间距计算（280*5 + 1.5*4=1406px，留有余量） */
  margin: 0 auto; /* 水平居中 */
  padding: 0 1rem; /* 左右内边距，适配移动端 */
}

.custom-card {
/* 卡片宽度：可改为固定宽度（如w-80）或百分比（如w-full） */
  width: 100%; /* 响应式宽度，适应父容器 */
  max-width: 300px; /* 最大宽度限制，防止过大 */
  
  /* 卡片背景色：替换为你需要的颜色 */
  background-color: rgb(231 227 241); /* 深蓝色背景（带透明度） */
  
  /* 边框样式：颜色、粗细、圆角 */
  border: 1px solid rgb(69 58 79 / 30%); /* 紫色边框（带透明度） */
  border-radius: 1rem; /* 圆角大小（数值越大越圆） */
  
  /* 阴影效果 */
  box-shadow: 0 8px 24px rgba(126, 34, 206, 0.15); /* 淡紫色阴影 */
  overflow: hidden; /* 确保图片和内容不超出圆角 */
  transition: all 0.3s ease; /* 过渡动画，保持平滑效果 */
  margin-left: rem;
}
/* 直接修改 custom-card 中的图片容器样式 */
.custom-card .img-hover-zoom {
  /* 固定图片高度（核心）：根据需求调整数值 */
  height: 200px; /* 示例：200px 高度，可改为 180px/220px 等 */
  width: 100%; /* 宽度铺满卡片 */
  overflow: hidden; /* 隐藏超出容器的图片部分（关键，实现裁剪） */
}

/* 图片适配规则（保持不变，确保图片不拉伸） */
.custom-card .img-hover-zoom img {
  width: 100%; /* 图片宽度铺满容器 */
  height: 100%; /* 图片高度铺满容器 */
  object-fit: cover; /* 核心：裁剪图片填充容器（优先保证图片比例，多余部分隐藏） */
  transition: transform 0.5s ease; /* 保留原有缩放动画 */
}



.card-link {
  text-decoration: none; /* 消除a标签默认下划线 */
  display: block; /* 让a标签铺满父容器，整卡可点击 */
  display: block; 
  width: 100%;
  margin: 0;
}

/* 标题强调样式（保持原有设计，hover时增强效果） */
.card-link .card-title {
  color: #39434d;
  transition: all 0.3s ease;
  font-weight: 700; /* 标题加粗强调 */
}

/* 整卡hover时，标题变色（与卡片hover效果呼应） */
.card-link:hover .card-title {
  color: #77707d; /* 与你原有hover色一致 */
}

/* 保留卡片原有hover效果（放大、阴影） */
.card-link .custom-card {
  transition: all 0.3s ease;
}
.card-link:hover .custom-card {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 28px rgba(126, 34, 206, 0.3);
}

/* 可选："查看详情"按钮样式（改为纯文本提示，避免重复点击） */
.card-link .card-btn {
  color: #c084fc;
  cursor: pointer;
}