@layer utilities {
    .content-auto {
        content-visibility: auto;
    }

    .text-shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .text-shadow-lg {
        text-shadow: 0 4px 8px rgba(0, 0, 0, 0.25);
    }

    .bg-gradient-blue {
        background: linear-gradient(135deg, #00316e 0%, #0a5cad 100%);
    }

    .nav-active {
        position: relative;
    }

    .nav-active::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 0;
        width: 100%;
        height: 3px;
        background-color: #ffe500;
        border-radius: 3px;
    }

    .animate-fade-in {
        animation: fadeIn 0.8s ease forwards;
    }

    .timeline-item::before {
        content: '';
        position: absolute;
        left: -30px;
        top: 5px;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background-color: #ffe500;
        border: 3px solid #00316e;
    }

    .timeline-item::after {
        content: '';
        position: absolute;
        left: -24px;
        top: 17px;
        width: 2px;
        height: calc(100% + 20px);
        background-color: #e2e8f0;
    }

    .timeline-item:last-child::after {
        display: none;
    }
}

html {
    scroll-behavior: smooth;
}

/* 动画效果 */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 优势卡片hover效果 */
.advantage-card {
    transition: all 0.3s ease;
}

.advantage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px -10px rgba(0, 49, 110, 0.15);
}

.advantage-icon {
    transition: all 0.3s ease;
}

.advantage-card:hover .advantage-icon {
    background-color: #00316e;
    color: white;
    transform: scale(1.1);
}

/* 团队成员卡片效果 */
.team-card {
    transition: all 0.3s ease;
}

.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 49, 110, 0.1);
}

.team-social {
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.team-card:hover .team-social {
    opacity: 1;
    transform: translateY(0);
}

/* 悬浮数据卡片的样式 */
.xuanfu-card {
    position: absolute;
    z-index: 120; /* 重点：把z-index调得比图片的z-index（原z-10）更高 */
}

@media (max-width: 768px) {
    .-right-8 {
        right: -1rem !important;
    }

    .feximage {
        display: none !important;
    }
}

.h-45 {
    height: 12rem;
}

.tipscolor{
    color: rgb(255 229 0) !important;
}

.honor-card {
    height: 16rem; /* 保持原有高度 */
    display: flex; /* 使用flex布局让图片居中 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    overflow: hidden; /* 隐藏超出部分 */
    background-color: #f8fafc; /* 给空白区域添加浅背景色，更美观 */
}

.honor-card img {
    width: 100%; /* 宽度铺满容器 */
    height: 100%; /* 高度铺满容器 */
    object-fit: cover; /* 关键：图片完整显示，不裁剪，保持比例 */
    object-position: center; /* 图片居中显示 */
    transition-transform: duration-500; /* 保持原有过渡效果 */
}

@media (max-width: 768px) {
    .honor-card {
        height: 8rem; /* 移动端降低高度，适配小屏幕 */
    }
}

/* 修复原有样式中gap的内联样式问题（可选优化） */
.honor-grid {
    gap: 3rem !important; /* 统一间距，替换内联的gap:70px */
}