body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* 与导航栏高度匹配 */
}

.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: transparent; /* 设置背景为透明 */
    display: flex;
    align-items: center;
    padding: 0 50px;
    box-sizing: border-box;
    z-index: 1000;
}

.navbar .logo {
    display: flex;
    align-items: center;
}

.navbar .logo a {
    font-size: 24px;
    color: #00A6F7;

}

.navbar .logo span {
    font-size: 24px;
    color: #ffffff;
}

.navbar .nav-links {
    margin-top: 30px;
    display: flex;
    gap: 150px;
    margin-left: 220px;
    font-family: 'Source Han Sans', sans-serif; /* 指定字体为 Source Han Sans */
    font-weight: bold; /* 设置为粗体 */
}

.navbar .nav-links a {
    font-size: 20px;
    color: #00A6F7;
    text-decoration: none;
}



.navbar .contact {
    margin-top: 30px;
    margin-left: auto; /* 将contact推到右边 */
    margin-right: 50px; /* 设置右边距为50px */
}

/*.navbar .contact img {*/
/*    height: 40px; !* 可根据需要调整图片大小 *!*/
/*}*/

.image-container {
    width: 100%;
    text-align: center;

}

img {
    width: 100%;
    height: auto; /* 避免图片高度过大 */
    position: relative;

}

/* 确保 footer 不被其他内容遮挡 */
/* 确保 footer 不被其他内容遮挡 */
.footer {
    background-color: #0A0E31;
    color: #ffffff;
    text-align: center;
    padding: 20px;
    font-size: 24px; /* 统一所有字体的字号 */
    display: flex;
    align-items: center;
    height: 152px;
    width: 100%;
    box-sizing: border-box;
    justify-content: space-between;
    position: relative;
    z-index: 1000;
    margin-top: 50px; /* 确保 footer 离页面底部有足够空间 */
}

.footer a {
    color: #ffffff;
    font-size: 24px; /* 统一链接的字体字号 */
    text-decoration: none;
    font-family: 'Roboto', sans-serif;
}

.footer .links {
    display: flex;
    align-items: center;
    margin-left: 100px;
}

.footer .links img {
    height: 50px;
    width: auto;
    margin-right: 10px;
}

.footer a:hover {
    text-decoration: underline;
}




.gp-icon, .gp-icon2 {
    position: relative;
    display: inline-block; /* 使它们可以被点击 */
    cursor: pointer; /* 鼠标悬停时显示为点击手型 */
}

/* 使 a 标签覆盖整个图标区域 */
.gp-icon a, .gp-icon2 a {
    display: block;
    width: 100%;
    height: 100%;
}

.gp-icon img, .gp-icon2 img {
    width: 100%;  /* 让图标宽度填满父容器 */
    height: auto;
    position: absolute;
    top: 0; /* 确保图标不会偏移 */
    left: 0;
}

/* 定义图标的位置 */
.gp-icon {
    position: relative;
    bottom: 400px;
    right: 550px;
    width: 300px;
}

.gp-icon2 {
    position: relative;
    bottom: 220px;
    left: 350px;
    width: 400px;
}
.swiper-container {
    margin-top: 80px; /* 增加上方的外边距，确保轮播图不被导航栏遮住 */
    height: 600px;

}
.swiper-pagination {
    display: none;
}


@media (max-width: 650px) {
    /* 导航栏调整 */
    .navbar {
        height: 40px;
        padding: 0 10px;
        position: fixed; /* 确保导航栏保持固定 */
        top: 0; /* 使导航栏保持在页面顶部 */
        left: 0; /* 使导航栏从页面左边开始 */
        width: 100%; /* 确保导航栏宽度100% */
    }

    /* 将 Health Logger 向左上角调整 */
    .navbar .logo {
        display: flex;
        align-items: center;
        margin-left: 10px;  /* 向左移动 */
    }

    .navbar .logo a {
        font-size: 11px; /* 调整字体大小 */
        color: #00A6F7;
    }

    .navbar .nav-links {
        gap: 20px;
        margin-left: 20px;
    }

    .navbar .nav-links a {
        font-size: 8px;
    }

    .navbar.contact {
        margin-right: 10px; /* 修改右边距，避免超出 */
    }

    /* 调整 Contact 图标大小 */
    .navbar .contact img {
        height: 20px; /* 调整为较小的高度 */
        width: auto;  /* 保持宽高比 */
    }

    /* 其他图片调整 */
    img {
        width: 100%;
        height: auto;
    }

    /* 底部调整 */
    .footer {
        padding: 10px;
        font-size: 10px;
        height: 60px;
    }

    .footer .links {
        margin-left: 10px;
    }

    .footer .links img {
        height: 30px;
    }

    .footer .links a:last-child {
        font-size: 8px;
    }

    /* Google Play 图标调整 */
    .gp-icon {
        bottom: 60px;
        left: 0;
        width: 100px;
    }

    .gp-icon img {
        width: 86%;  /* 让图标宽度填满父容器 */
        height: auto;
        position: absolute;
        top: -35px; /* 确保图标不会偏移 */
        left: -83px;
    }

    /* 调整 gp2 图标的大小 */
    .gp-icon2 {
        bottom: 150px;
        left: 0; /* 修正左侧距离，确保图标不会超出 */
        width: 300px;
    }

    .gp-icon2 img {
        width: 40%;  /* 让图标宽度填满父容器 */
        height: auto;
        position: absolute;
        top: 80px;
        left: 170px;
    }

    .footer a {
        color: #ffffff;
        font-size: 11px; /* 统一链接的字体字号 */
        text-decoration: none;
        font-family: 'Roboto', sans-serif;
    }
}