body {
    background-image: url('images/bg.jpg'); /* 设置背景图片 */
    background-size: cover; /* 背景图片覆盖整个页面 */
    font-family: Arial, sans-serif; /* 设置字体 */
    margin: 0; /* 去除默认外边距 */
    padding: 0; /* 去除默认内边距 */
    display: flex;
    flex-direction: column;
}

header {
    text-align: left;
    padding: 20px;
    color: white;
    border-bottom: 2px solid white;
    box-sizing: border-box; /* 确保内边距和边框包含在总高度内 */
}

.main-container {
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中对齐内容 */
    align-items: flex-start; /* 垂直顶部对齐内容 */
    padding: 20px; /* 设置内边距 */
    margin-top: 10px; /* 根据需要调整 */
}

.left-image {
    width: 30%; /* 设置图片宽度为30% */
    padding: 20px; /* 设置内边距 */
}

.big-image {
    width: 90%; /* 图片宽度为容器的100% */
    height: auto; /* 高度自适应 */
}

.card-container {
    width: 50%; /* 设置卡片容器宽度为50% */
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(2, 1fr); /* 两列布局 */
    gap: 20px; /* 设置网格间距 */
    padding: 20px; /* 设置内边距 */
    margin-top: 50px; /* 默认设置 */
}

.card {
    background-color: rgba(255, 255, 255, 0.8); /* 设置卡片背景颜色，带透明度 */
    border-radius: 8px; /* 设置卡片圆角 */
    padding: 20px; /* 设置卡片内边距 */
    text-align: center; /* 文本居中对齐 */
    transition: transform 0.3s; /* 设置过渡效果 */
    text-decoration: none; /* 去除文本下划线 */
    color: black; /* 设置文本颜色为黑色 */
    width: 60%; /* 设置卡片宽度 */
    height: 60px; /* 设置卡片高度 */
    display: flex; /* 使用flex布局 */
    justify-content: center; /* 水平居中对齐内容 */
    align-items: center; /* 垂直居中对齐内容 */
    margin: 5px; /* 设置卡片之间的距离 */
}

.card:hover {
    transform: scale(1.05); /* 鼠标悬停时放大效果 */
}

footer {
    text-align: center; /* 文本居中对齐 */
    padding: 10px; /* 设置内边距 */
    color: white; /* 设置文本颜色为白色 */
}

h1 {
    margin: 0;
}

.card h2 {
    margin: 0;
    color: #000000; /* 设置文本颜色为黑色 */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* 添加文本阴影效果 */
    letter-spacing: 1px; /* 设置字母间距 */
    font-weight: 700; /* 设置字体加粗 */
    font-size: 25px; /* 设置字体大小 */
}

#intro {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}
#team {
    background: linear-gradient(135deg, #f5f7fa 0%, #ff491b 100%);
}
#concept {
    background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
}
#innovation {
    background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
}
#effect {
    background: linear-gradient(135deg, #89f7fe 0%, #66a6ff 100%);
}
#resources {
    background: linear-gradient(135deg, #96fbc4 0%, #f9f586 100%);
}
#support {
    background: linear-gradient(135deg, #f8fbc2 0%, #d266f6 100%);
}
#more {
    background: linear-gradient(135deg, #f8fbc2 0%, #d266f6 100%);
}

/* 新增的响应式代码 */
@media (max-width: 768px) {
    .main-container {
        flex-direction: column;
    }
    .card-container {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 30px; /* 在较小屏幕上调整 */
    }
}

@media (max-width: 480px) {
    .card-container {
        grid-template-columns: 1fr;
        margin-top: 20px; /* 在更小屏幕上进一步调整 */
    }
}