/* =============================================
   上海康卫迪检测｜common.css v2 增强质感版
   B端第三方CMA检测机构｜商务稳重、高级克制
============================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* 优化字体栈，Windows/macOS/移动端渲染更干净 */
    font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    color: #3c4858;
    background-color: #ffffff;
    line-height: 1.85;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 容器：区分页面外边距 和 模块内边距，不要全部压在container上 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 64px 20px;
}

.container-narrow {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------- 网站最顶部头部 header（logo+热线） ---------------- */
header {
    overflow: hidden;
}

.headp {
    background: #0b233a;
    color: #e2ecf5;
    padding: 0.65em 20px;
    font-size: 0.92em;
    text-align: center;
    margin: 0;
}

    .headp p {
        margin: 0;
    }

.headdiv {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.4em 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.headdiv1 {
    flex-shrink: 0;
    margin-right: 0.5em;
    padding-right: 0.8em;
    border-right: 1px solid #c2d4e6;
    width: 8em;
}

    .headdiv1 img {
        max-width: 100%;
        height: auto;
        display: block;
    }

.headdiv2 {
    flex: 1;
    min-width: 240px;
    font-size: 1.22em;
    line-height: 1.75;
    letter-spacing: 0.06em;
    color: #0F3B64;
}

    .headdiv2 span {
        font-size: 1.7em;
        font-weight: 600;
        letter-spacing: 0;
        color: #c47820;
    }

.headdiv3 {
    flex-shrink: 0;
    background: url(/img/phone.gif) no-repeat left top;
    background-size: 3.6em;
    color: #0F3B64;
    padding-left: 4.4em;
    letter-spacing: 0.08em;
    line-height: 1.75;
    font-size: 1.26em;
}

    .headdiv3 span {
        color: #c47820;
        font-size: 1.16em;
        letter-spacing: 0em;
        display: inline-block;
        font-weight: 600;
    }

/* ---------- 导航栏 ---------- */
nav {
    background-color: #0b2c4b;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 3px 12px rgba(8, 28, 48, 0.18);
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

nav ul {
    list-style: none;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

    nav ul li a {
        display: block;
        color: #e8f1f8;
        text-decoration: none;
        padding: 15px 20px;
        font-size: 0.96rem;
        transition: 0.24s ease;
        position: relative;
    }

        nav ul li a:hover {
            background-color: #184470;
            color: #ffffff;
        }

        nav ul li a.active {
            background-color: #24609c;
            color: #fff;
        }

/* 移动端汉堡菜单按钮 */
.mobile-menu-btn {
    display: none;
    padding: 14px 12px;
    cursor: pointer;
}

    .mobile-menu-btn span {
        display: block;
        width: 26px;
        height: 3px;
        background: #fff;
        margin: 5px 0;
        border-radius: 2px;
    }

/* ---------- 子页面页面标题通栏 page-header ---------- */
.page-header {
    background: linear-gradient(130deg,#0d345c,#164b82);
    color: #fff;
    padding: 56px 0;
    text-align: center;
}

    .page-header h2 {
        font-size: 2.2rem;
        margin-bottom: 12px;
        font-weight: 600;
        color: #ffffff;
    }

    .page-header p {
        opacity: 0.82;
        font-size: 1.08rem;
        max-width: 700px;
        margin: 0 auto;
    }

/* ========== 面包屑导航（子页面使用，首页不用） ========== */
.breadcrumb-wrap {
    background: #f7fafc;
    padding: 18px 0;
    border-bottom: 1px solid #e6edf4;
}

.breadcrumb-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.breadcrumb {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.92rem;
    color: #64788c;
}

    .breadcrumb li {
        display: flex;
        align-items: center;
    }

        .breadcrumb li + li::before {
            content: "›";
            margin: 0 8px;
            color: #96a7b9;
        }

    .breadcrumb a {
        color: #225b94;
        text-decoration: none;
    }

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

    .breadcrumb .current {
        color: #1d354e;
        font-weight: 500;
    }

/* ---------- 图片放大弹窗 ---------- */
.zoom-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.88);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.zoom-image {
    max-width: 92%;
    max-height: 92vh;
}

.close-zoom {
    position: absolute;
    top: 24px;
    right: 30px;
    color: #fff;
    font-size: 42px;
    cursor: pointer;
}

/* ---------- 页脚 footer ---------- */
footer {
    background-color: #0b233a;
    color: #c5d5e4;
    text-align: center;
    padding: 52px 20px 40px;
    font-size: 0.92rem;
    line-height: 1.9;
}

    footer p {
        margin: 10px 0;
    }

    footer a {
        color: #82b7e2;
        text-decoration: none;
    }

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

/* ---------- 全局标题统一，拉开层级 ---------- */
h2 {
    font-size: 2.05rem;
    color: #0d2c4c;
    font-weight: 600;
    margin-bottom: 0.6em;
}

h3 {
    font-size: 1.5rem;
    color: #0d2c4c;
    margin-bottom: 0.7em;
    font-weight: 600;
}

h4 {
    font-size: 1.18rem;
    color: #14406e;
    font-weight: 600;
    margin-bottom: 0.5em;
}

p {
    margin-bottom: 1em;
}

/* ---------- 全局卡片 增强质感：浅阴影+hover微动，区分普通卡片 / 强调卡片 ---------- */
.home-service-card,
.qualification-item,
.service-item,
.certificate-item,
.declaration-section {
    background: #f7fafc;
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(11, 35, 60, 0.06), 0 4px 12px rgba(15, 50, 88, 0.05);
    border: none;
    transition: transform 0.26s ease, box-shadow 0.26s ease;
}

    .home-service-card:hover,
    .qualification-item:hover,
    .service-item:hover,
    .certificate-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 4px 16px rgba(13,44,77,0.11);
    }
    /* declaration-section是大文本承诺块，关闭上浮，只保留底色 */
    .declaration-section:hover {
        transform: none;
        box-shadow: 0 1px 3px rgba(11, 35, 60, 0.06), 0 4px 12px rgba(15, 50, 88, 0.05);
    }

/* ---------- 按钮全局统一，增加hover深度变化 ---------- */
button, .btn-primary {
    background-color: #0F3B64;
    color: #fff;
    border-radius: 8px;
    border: 0;
    padding: 13px 28px;
    font-size: 1rem;
    transition: 0.24s ease;
    cursor: pointer;
}

    button:hover, .btn-primary:hover {
        background-color: #0b2c4b;
        box-shadow: 0 4px 10px rgba(15, 59, 100, 0.22);
    }

/* 表单输入框美化，聚焦高亮 */
.contact-form input, .contact-form textarea {
    border: 1px solid #cbd8e4;
    border-radius: 8px;
    background: #ffffff;
    transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

    .contact-form input:focus, .contact-form textarea:focus {
        outline: none;
        border-color: #24609c;
        box-shadow: 0 0 0 3px rgba(36, 96, 156, 0.12);
    }

/* ---------- 辅助：强调背景区块（可以给首页咨询栏用 class="bg‑accent‑block"） ---------- */
.bg-accent-block {
    background: linear-gradient(130deg,#0d345c,#164b82);
    color: #ffffff;
    padding: 60px 0;
}

/* ---------- 响应式适配 ---------- */
@media (max-width:768px) {
    .mobile-menu-btn {
        display: block;
    }

    nav ul#nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }

        nav ul#nav-menu.show {
            display: flex !important;
        }

    nav ul li a {
        text-align: left;
        padding: 13px 16px;
    }

    .headdiv {
        justify-content: center;
        text-align: center;
        font-size: 0.92em;
    }

    .headdiv1 {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
        width: 7em;
    }

    .headdiv3 {
        width: 100%;
        padding-left: 0;
        background-image: none;
        margin-top: 10px;
    }

    .page-header h2 {
        font-size: 1.8rem;
    }

    .container {
        padding: 48px 16px;
    }
}

@media screen and (max-width:480px) {
    .headp {
        font-size: 0.82em;
    }

    .headdiv2 {
        letter-spacing: 0.03em;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }
}

@media screen and (max-width:380px) {
    .headp {
        font-size: 0.74em;
    }
}