/* ========= 30秒看懂HACCP认证移动端样式开始 ========= */
@media (max-width: 1024px) {
    .haccp-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .haccp-feature-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .haccp-feature-card {
        padding: 1.5rem;
    }

    .haccp-feature-icon {
        width: 48px;
        height: 48px;
    }

    .haccp-feature-icon i {
        font-size: 1.3rem;
    }

    .haccp-feature-card h3 {
        font-size: 1.1rem;
    }

    .haccp-feature-card p {
        font-size: 0.9rem;
    }
}

/* ========= 30秒看懂HACCP认证移动端样式结束 ========= */

/* ========= 什么是HACCP危害分析与关键控制点认证移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-content-card {
        padding: 1.8rem;
    }

    .haccp-content-card p,
    .haccp-content-card li {
        font-size: 1rem;
    }

    .haccp-content-card ul {
        margin-left: 1.2rem;
    }
}

/* ========= 什么是HACCP危害分析与关键控制点认证移动端样式结束 ========= */

/* ========= 企业为什么要做HACCP认证移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-content-line {
        padding: 1.8rem;
    }

    .haccp-content-line p {
        font-size: 1rem;
    }
}

/* ========= 企业为什么要做HACCP认证移动端样式结束 ========= */

/* ========= 哪些企业适合做HACCP认证移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-content-light {
        padding: 1.8rem;
    }

    .haccp-content-light p,
    .haccp-content-light li {
        font-size: 1rem;
    }
}

/* ========= 哪些企业适合做HACCP认证移动端样式结束 ========= */

/* ========= HACCP和ISO22000是什么关系移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-compare-wrapper {
        padding: 1.5rem;
    }

    .haccp-compare-row {
        flex-direction: column;
        gap: 20px;
    }

    .haccp-compare-title {
        font-size: 1.2rem;
    }

    .haccp-compare-desc {
        font-size: 0.9rem;
    }

    .haccp-compare-features li {
        font-size: 0.85rem;
    }

    .haccp-relation-summary p {
        font-size: 0.9rem;
    }
}

/* ========= HACCP和ISO22000是什么关系移动端样式结束 ========= */

/* ========= 为什么很多企业把HACCP交给世通国际认证移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-why-card {
        padding: 1.5rem;
    }

    .haccp-why-card p {
        font-size: 0.95rem;
    }
}

/* ========= 为什么很多企业把HACCP交给世通国际认证移动端样式结束 ========= */

/* ========= HACCP认证一般怎么开展移动端样式开始 ========= */
@media (max-width: 992px) {
    .haccp-process-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .haccp-process-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .haccp-process-wrapper {
        padding: 1.5rem;
    }

    .haccp-process-card {
        padding: 1.2rem;
    }

    .haccp-step-badge {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }

    .haccp-step-title {
        font-size: 1rem;
    }

    .haccp-process-card p {
        font-size: 0.85rem;
    }
}

/* ========= HACCP认证一般怎么开展移动端样式结束 ========= */

/* ========= 做HACCP认证企业通常需要准备哪些资料移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-data-card {
        padding: 1.5rem;
    }

    .haccp-data-card li {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .haccp-data-card p {
        font-size: 0.9rem;
        margin-top: 12px;
    }
}

/* ========= 做HACCP认证企业通常需要准备哪些资料移动端样式结束 ========= */

/* ========= AI平台能帮你做什么移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-ai-card {
        padding: 1.5rem;
    }

    .haccp-ai-card p,
    .haccp-ai-card li {
        font-size: 0.95rem;
    }

    .haccp-ai-action-buttons {
        flex-direction: column;
        gap: 12px;
    }

    .haccp-ai-btn {
        width: 100%;
        text-align: center;
    }
}

/* ========= AI平台能帮你做什么移动端样式结束 ========= */

/* ========= 企业推进HACCP时最常见的难点是什么移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-difficulties-wrapper {
        padding: 1.5rem;
    }

    .haccp-difficulties-wrapper li {
        font-size: 0.9rem;
        margin-bottom: 6px;
    }

    .haccp-difficulties-wrapper p {
        font-size: 0.9rem;
        margin-top: 12px;
    }
}

/* ========= 企业推进HACCP时最常见的难点是什么移动端样式结束 ========= */

/* ========= 世通如何帮助企业推进HACCP移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-help-card {
        padding: 1.5rem;
    }

    .haccp-help-card p {
        font-size: 0.95rem;
        margin-bottom: 12px;
    }
}

/* ========= 世通如何帮助企业推进HACCP移动端样式结束 ========= */

/* ========= 做完HACCP很多企业还会继续做这些认证移动端样式开始 ========= */
@media (max-width: 1024px) {
    .haccp-cert-cards-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .haccp-cert-cards-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .haccp-cert-wrapper {
        padding: 1.5rem;
    }

    .haccp-cert-intro {
        font-size: 0.95rem;
    }

    .haccp-cert-card {
        padding: 1.2rem;
    }

    .haccp-cert-card h4 {
        font-size: 1rem;
    }

    .haccp-cert-card p {
        font-size: 0.85rem;
    }

    .haccp-cert-note {
        font-size: 0.9rem;
    }

    .haccp-cert-actions {
        flex-direction: column;
        gap: 12px;
    }

    .haccp-cert-btn {
        width: 100%;
        text-align: center;
    }
}

/* ========= 做完HACCP很多企业还会继续做这些认证移动端样式结束 ========= */

/* ========= 常见问题解答移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-faq-question {
        padding: 1rem 1.2rem;
        font-size: 1rem;
    }

    .haccp-faq-answer.open {
        padding: 0 1.2rem 1.2rem 1.2rem;
        font-size: 0.9rem;
    }
}

/* ========= 常见问题解答移动端样式结束 ========= */

/* ========= 联系区域移动端样式开始 ========= */
@media (max-width: 560px) {
    .haccp-contact .haccp-contact-btn-white,
    .haccp-contact .haccp-contact-btn-outline {
        margin: 5px 0;
        width: 100%;
        max-width: 280px;
    }
}

@media (max-width: 768px) {
    .haccp-contact {
        padding: 40px 20px;
    }

    .haccp-contact h2 {
        font-size: 1.2rem;
    }

    .haccp-contact p {
        font-size: 0.9rem;
    }
}

/* ========= 联系区域移动端样式结束 ========= */

/* ========= 各模块标题移动端样式开始 ========= */
@media (max-width: 768px) {
    .haccp-section-title-1,
    .haccp-section-title-2,
    .haccp-section-title-3,
    .haccp-section-title-4,
    .haccp-section-title-5,
    .haccp-section-title-6,
    .haccp-section-title-7,
    .haccp-section-title-8,
    .haccp-section-title-9,
    .haccp-section-title-10,
    .haccp-section-title-11,
    .haccp-section-title-12,
    .haccp-section-title-13 {
        font-size: 1.5rem;
        margin: 1rem 0 1.2rem;
    }
}

@media (max-width: 480px) {
    .haccp-section-title-1,
    .haccp-section-title-2,
    .haccp-section-title-3,
    .haccp-section-title-4,
    .haccp-section-title-5,
    .haccp-section-title-6,
    .haccp-section-title-7,
    .haccp-section-title-8,
    .haccp-section-title-9,
    .haccp-section-title-10,
    .haccp-section-title-11,
    .haccp-section-title-12,
    .haccp-section-title-13 {
        font-size: 1.5rem;
        margin: 1rem 0 1.2rem;
    }
}

/* ========= 各模块标题移动端样式结束 ========= */