/* Reset CSS */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* Global Styles */
        body {
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    position: relative;
    padding-top: 60px; /* Added padding to body */
}
        
        h1 {
            color: #333;
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 20px;
            text-align: center;
            text-transform: uppercase;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            padding: 20px;
            z-index: 999;
            width: 100%; /* Added width */
        }

        .card-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start; /* Add this line to align items to the start */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    
}


.card {
    border-radius: 5px;
    margin-top: 100px; /* Adjusted top margin to create space */
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    width: 100%;
    max-width: 280px;
    display: flex;
    flex-direction: column;
}

        .card:hover {
            transform: translateY(-5px);
        }

        .card-content {
            padding: 20px;
            background-color: #fff;
            text-align: center;
            flex-grow: 1;
        }

        .card h3 {
            margin-bottom: 10px;
            color: #333;
            font-size: 16px;
        }

        .card p {
            color: #0b29d6;
            font-size: 19px;
            font-weight: bold;
        }

        .card a {
            text-decoration: none;
            color: #333;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .card a:before {
            content: "";
            width: 80px;
            height: 80px;
            margin-bottom: 10px;
            background-image: url("./1.png");
            background-size: cover;
            background-position: center;
        }

        @media screen and (min-width: 1024px) {
    .card {
        max-width: calc(20% - 16px); /* 调整每个卡片的最大宽度，考虑到边距 */
        margin-top: 50px; /* 调整电脑端卡片的上边距 */
    }
    .card-container { margin-top: -200px; /* 调整电脑端卡片的上边距 */}
   
}

@media screen and (max-width: 768px) {
    .card {
        max-width: calc(50% - 20px); /* 计算每个卡片的最大宽度，考虑到边距 */
        margin-top: 20px; /* 调整手机端卡片的上边距 */
        margin-right: 10px; /* 增加卡片之间的水平间距 */
        margin-left: 10px; /* 增加卡片之间的水平间距 */
    }
}