body {
    font-family: 'Arial', sans-serif;
    background-color: #e0f7fa;
    color: #333;
    margin: 0;
    padding: 0;
    
}

header {
    background-color: #007acc;
    color: white;
    text-align: center;
    padding: 20px;
}

h1 {
    margin: 0;
}

p {
    margin: 5px 0;
}

main {
    display: flex; /* 使用 flex 布局 */
    gap: 20px; /* 设置元素之间的间距 */
    padding: 20px; /* 设置内边距 */
}

.left-image {
    flex: 1 /* 占据 1 份空间 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.big-image {
    max-width: 50%; /* 图片最大宽度为容器宽度 */
    height: auto; /* 高度自适应 */
    border-radius: 10px; /* 图片圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 图片阴影 */
}

.card-container {
    /* 不放大，不缩小，宽度占父容器的 40% */
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 25%;
    display: grid; /* 使用网格布局 */
    grid-template-columns: repeat(1, 1fr); /* 两列布局 */
    gap: 10px; /* 设置卡片之间的间距 */
}

.card {
    background-color: #fff; /* 卡片背景颜色 */
    border-radius: 10px; /* 卡片圆角 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 卡片阴影 */
    padding: 10px; /* 适当减小内边距，可根据实际调整 */
    text-align: center; /* 文字水平居中 */
    text-decoration: none; /* 去除链接下划线 */
    color: #333; /* 文字颜色 */
    transition: transform 0.3s ease; /* 过渡效果 */
    display: flex; /* 使用 flex 布局让内容垂直居中 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    min-height: 80px; /* 适当减小最小高度，可根据实际调整 */
}

.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: 16px; /* 调整字体大小，可按需修改 */
}

/* 新增的链接状态控制 */
.card a {
    text-decoration: none;
    color: inherit;
}

.card a:visited,
.card a:hover,
.card a:focus,
.card a:active {
    color: inherit;
    text-decoration: none;
}

/* 原有的基础卡片样式 */
.card[href] {
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
}
footer {
    text-align: center;
    padding: 10px;
    background-color: #007acc;
    color: white;
    position: relative;
    bottom: 0;
    width: 100%;
}
/* 基础卡片样式 */
.card[href] {
    /* 保留原有过渡效果 */
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s; 
}

/* 为每个卡片定制渐变色 */
#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%);
}

/* 添加悬停效果增强 */
.card[href]:hover {
    transform: translateY(-7px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.15);
    background-size: 150% 150%;
}

/* 文字内容优化 */
.card h2 {
    color: #2c3e50;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.3);
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 300;
    color: #000000 !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    font-weight: 700;  /* 添加加粗效果 */
    font-size: 35px; /* 设置文字大小为 20px，
    
}
.card h1 {
    color: #2c3e50;
    text-shadow: 1px 1px 2px rgba(255,255,255,0.3);
    color: rgba(255, 255, 255, 0.9) !important;
    font-weight: 300;
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    letter-spacing: 1px;
    font-weight: 700;  /* 添加加粗效果 */

}
.card p {
    color: #5a6a7d;
}

/* 设置主显示区域的样式 */
.main-container {
    display: flex;
    height: auto; /* 可以根据需要调整高度 */
}

/* 左边大图区域的样式 */
.left-image {
    flex: 1;
    max-width: 1000px;
    max-height: 790px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 右边民航卡片区域的样式 */
.right-card {
    flex: 1;
    background-color: #e0e0e0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 大图样式 */
.big-image {
    max-width: 100%;
    max-height: 100%;
}