/* ============================================================================
   DOTRIX 点线成面 - 开发指南与维护文档
   ============================================================================ */

/*
 * CSS架构说明：
 * 
 * 1. CSS变量系统 (Lines 1-50)
 *    - 统一管理颜色、尺寸、动画参数
 *    - 便于主题切换和全局调整
 *    - 提高代码可维护性
 * 
 * 2. 选择器特异性策略
 *    - 使用高特异性选择器替代 !important
 *    - 遵循 BEM 命名规范的变体
 *    - 确保样式覆盖的可预测性
 * 
 * 3. 组件化设计
 *    - 专业卡片手风琴组件 (.major-accordion-*)
 *    - 品牌Logo组件 (.dotrix-logo-*)
 *    - 服务卡片组件 (.service-card-*)
 * 
 * 4. 动画系统
 *    - 统一的过渡时间和缓动函数
 *    - 分层的悬停效果
 *    - 响应式动画适配
 */

/*
 * 专业卡片手风琴组件架构：
 * 
 * 结构层次：
 * .faq-content.style-2
 *   └── .accordion-item
 *       └── .accordion-header
 *           └── .accordion-button.major-accordion-button
 *               ├── .major-accordion-image (背景图片)
 *               ├── .major-accordion-text (专业名称)
 *               └── ::after (下拉按钮)
 * 
 * 样式分层：
 * 1-6: 基础结构样式
 * 7-13: 动画和交互效果
 */

/*
 * 修改指南：
 * 
 * 修改颜色：
 * - 编辑 :root 中的 CSS 变量
 * - 避免在组件样式中硬编码颜色值
 * 
 * 修改尺寸：
 * - 调整 --accordion-* 变量
 * - 保持比例协调性
 * 
 * 修改动画：
 * - 调整 --transition-* 变量
 * - 测试不同设备的性能表现
 * 
 * 添加新组件：
 * - 遵循现有的命名规范
 * - 使用CSS变量保持一致性
 * - 添加相应的文档注释
 */

/*
 * 性能优化说明：
 * 
 * 1. 使用 transform 而非 position 属性进行动画
 * 2. 合理使用 will-change 属性（如需要）
 * 3. 避免复杂的选择器嵌套
 * 4. 使用 contain 属性隔离布局影响（如需要）
 */

/*
 * 浏览器兼容性：
 * 
 * 支持的浏览器版本：
 * - Chrome 60+
 * - Firefox 55+
 * - Safari 12+
 * - Edge 79+
 * 
 * CSS变量支持：
 * - IE11 不支持，需要 fallback 或 polyfill
 * - 现代浏览器完全支持
 */

/*
 * 维护检查清单：
 * 
 * 定期检查：
 * □ CSS变量是否被正确使用
 * □ 选择器特异性是否合理
 * □ 动画性能是否流畅
 * □ 响应式断点是否正确
 * □ 无障碍性是否符合标准
 * 
 * 版本更新时：
 * □ 备份当前样式文件
 * □ 测试核心功能完整性
 * □ 验证浏览器兼容性
 * □ 更新文档注释
 */

/* ============================================================================
   文件结束 - DOTRIX 点线成面自定义样式
   最后更新：2025年7月
   维护者：DOTRIX开发团队
   ============================================================================ */

/* ============ CSS变量系统 ============ */
:root {
    /* 品牌颜色 */
    --dotrix-primary: #007bff;
    --dotrix-secondary: #00205B;
    --dotrix-white: #ffffff;
    --dotrix-header: var(--header);
    --dotrix-text: var(--text);
    --dotrix-border: var(--border);
    --dotrix-border2: var(--border2);
    --dotrix-theme2: var(--theme2);

    /* 手风琴组件 */
    --accordion-height: 70px;
    --accordion-min-height: 70px;
    --accordion-border-radius: 12px;
    --accordion-button-width: 37px;
    --accordion-button-height: 37px;
    --accordion-image-border-radius: 12px 0 0 12px;
    --accordion-text-left-position: 75%;
    --accordion-padding-right: 50px;

    /* 动画与过渡 */
    --transition-fast: 0.2s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* 变换效果 */
    --hover-lift-small: translateY(-1px);
    --hover-lift-medium: translateY(-2px);
    --rotation-180: rotate(180deg);

    /* 阴影效果 */
    --shadow-normal: 0px 14px 50px #E4E9F1;
    --shadow-hover: 0px 18px 60px rgba(228, 233, 241, 0.8);

    /* 字体 */
    --font-size-accordion-text: 22px;
    --font-weight-bold: 600;
    --line-height-normal: 1.2;

    /* 文本阴影 */
    --text-shadow-white: 2px 2px 4px rgba(255, 255, 255, 0.9);
}

/* ============ 开发说明 ============ */
/*
 * DOTRIX 点线成面 - 自定义样式文件
 * 
 * 文件作用：
 * - 覆盖Bootstrap和主题默认样式
 * - 实现DOTRIX品牌特定的UI效果
 * - 专业卡片手风琴组件的定制样式
 * 
 * 开发规范：
 * 1. 尽量避免使用 !important
 * 2. 使用CSS变量提高可维护性
 * 3. 保持选择器特异性合理
 * 4. 添加清晰的注释说明
 * 
 * 主要组件：
 * - 专业卡片手风琴 (.major-accordion-*)
 * - 品牌Logo (.dotrix-logo-*)
 * - 服务卡片 (.service-card-*)
 */

/* ============ 自定义样式覆盖 ============ */
/* ========================================
   DOTRIX 点线成面 - 自定义样式覆盖文件
   用于修复布局问题和个性化定制
   ======================================== */

/* ============ 全局设置重构 ============ */
/* 添加平滑滚动效果 */
html {
    scroll-behavior: smooth;
}

/* 
 * 禁用自动首字母大写功能
 * 使用 html body 前缀提高特异性，替代 !important
 */
html body * {
    text-transform: none;
}

/* 特别针对邮箱和链接 - 使用高特异性选择器 */
html body a[href^="mailto:"],
html body .mailto,
html body .email,
html body input[type="email"],
html body .contact-text,
html body .offcanvas__contact-text,
html body .header-top-wrapper a {
    text-transform: none;
}

/* ============ 头部导航样式重构 ============ */
/* 
 * 使用高特异性选择器，匹配main.css中的层级结构
 * 避免使用 !important
 */

/* 增加header容器的可用空间 */
html body .header-3 .mega-menu-wrapper .container-fluid {
    padding: 0 var(--accordion-padding-right);
    /* 使用CSS变量，减少左右padding从100px到50px */
}

/* 减少菜单项之间的间距 */
html body .header-3 .mega-menu-wrapper .header-main .main-menu ul li {
    margin-inline-end: 25px;
    /* 从40px减少到25px */
}

/* 调整logo区域，确保左对齐 */
html body .header-3 .mega-menu-wrapper .header-main .logo {
    margin-left: 0;
    padding-left: 0;
    flex-shrink: 0;
    /* 防止logo被压缩 */
}

/* 优化logo图片大小，在保持清晰度的同时节省空间 */
html body .header-3 .mega-menu-wrapper .header-main .logo .header-logo img:first-child {
    height: var(--accordion-height);
    /* 使用CSS变量，从100px减少到80px */
}

html body .header-3 .mega-menu-wrapper .header-main .logo .header-logo img:not(:first-child) {
    max-width: 180px;
    /* 限制logo文字部分的最大宽度 */
}

/* 确保菜单文字不换行 */
html body .header-3 .mega-menu-wrapper .header-main .main-menu ul li a {
    white-space: nowrap;
    font-size: 15px;
    /* 轻微减少字体大小 */
}

/* 调整header-main的布局，给菜单更多空间 */
html body .header-3 .mega-menu-wrapper .header-main {
    justify-content: space-between;
    gap: 20px;
    /* 添加适当的间距 */
}

html body .header-3 .mega-menu-wrapper .header-main .header-left {
    flex: 1;
    min-width: 0;
    /* 允许flex子项收缩 */
}

html body .header-3 .mega-menu-wrapper .header-main .header-right {
    flex-shrink: 0;
    /* 防止右侧按钮区域被压缩 */
}

/* ============ 轮播图区域样式重构 ============ */
/* 调整轮播图区域高度，让其变窄 */
html body .hero-section.hero-3 .slide-bg {
    padding: 120px 0;
    /* 使用高特异性选择器，从190px减少到120px */
}

/* ============ 品牌展示区域样式重构 ============ */
/* 
 * Brand section图片样式优化 - 保持完整水平尺寸
 * 使用更高的特异性避免!important
 */
html body .brand-section .brand-wrapper .brand-image,
html body .brand-wrapper-3 .brand-image {
    width: auto;
    min-width: 120px;
    max-width: 200px;
    height: var(--accordion-height);
    /* 使用CSS变量设置固定高度，宽度自适应 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    /* 强制覆盖灰度滤镜 */
    -webkit-filter: none;
    filter: none;
    opacity: 1;
    /* 确保完全不透明 */
}

html body .brand-section .brand-wrapper .brand-image img,
html body .brand-wrapper-3 .brand-image img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* 保持完整显示，不裁剪 */
    object-position: center;
    /* 居中定位 */
    -webkit-filter: none;
    filter: none;
    /* 强制移除灰度滤镜，默认显示彩色 */
    opacity: 1;
    /* 确保完全不透明 */
    transition: transform var(--transition-normal);
    /* 使用CSS变量添加平滑过渡效果 */
}

html body .brand-section .brand-wrapper .brand-image:hover,
html body .brand-wrapper-3 .brand-image:hover {
    /* 保持彩色状态 */
    -webkit-filter: none;
    filter: none;
    opacity: 1;
}

html body .brand-section .brand-wrapper .brand-image:hover img,
html body .brand-wrapper-3 .brand-image:hover img {
    transform: scale(1.05);
    /* 鼠标悬停时轻微放大 */
}

/* ============ 滚动文字样式重构 ============ */
/* 调整滚动文字大小 */
html body .marque-section .text-slider.text-style-2 {
    font-size: 42px;
    /* 减小字体大小，使用更高特异性 */
}

/* ============ Case Study区域样式重构 ============ */
/* Case Study区域图片样式 - 固定尺寸居中裁剪 */
html body .case-study-section .case-study-items .case-study-image {
    width: 100%;
    height: 250px;
    /* 设置固定高度 */
    overflow: hidden;
    border-radius: var(--accordion-border-radius);
    /* 使用CSS变量添加圆角 */
    position: relative;
}

html body .case-study-section .case-study-items .case-study-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 居中裁剪，填满容器 */
    object-position: center;
    /* 居中定位 */
    transition: transform var(--transition-normal);
    /* 使用CSS变量添加平滑过渡效果 */
}

html body .case-study-section .case-study-items:hover .case-study-image img {
    transform: scale(1.05);
    /* 鼠标悬停时轻微放大 */
}

/* ============ 团队成员样式重构 ============ */
/* 团队成员图片样式 - 固定尺寸居中裁剪 */
html body .team-section .team-image,
html body .team-section .single-team-item .team-image {
    width: 100%;
    height: 300px;
    /* 设置固定高度 */
    overflow: hidden;
    border-radius: var(--accordion-border-radius);
    /* 使用CSS变量添加圆角 */
    position: relative;
}

html body .team-section .team-image img,
html body .team-section .single-team-item .team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 居中裁剪，填满容器 */
    object-position: center;
    /* 居中定位 */
    transition: transform var(--transition-normal);
    /* 使用CSS变量 */
}

html body .team-section .single-team-item:hover .team-image img {
    transform: scale(1.05);
    /* 鼠标悬停时轻微放大 */
}

/* ============ 展示栏样式重构 ============ */
/* 减少展示栏的上下空白 */
html body .brand-section.section-padding {
    padding: 30px 0;
    /* 减少上下padding，使用高特异性选择器 */
}

html body .marque-section.section-padding {
    padding: 20px 0;
    /* 减少滚动文字区域的上下padding，覆盖section-padding类 */
}

/* ============ 响应式设计重构 ============ */
/* 
 * 响应式断点样式 - 使用高特异性选择器替代!important
 */

/* 小屏幕适配 */
@media (max-width: 1399px) {
    html body .header-3 .mega-menu-wrapper .container-fluid {
        padding: 0 15px;
        /* 在小屏幕上进一步减少padding */
    }
}

/* 超宽屏幕适配 */
@media (min-width: 1600px) {
    html body .header-3 .mega-menu-wrapper .container-fluid {
        padding: 0 80px;
    }

    html body .header-3 .mega-menu-wrapper .header-main .main-menu ul li {
        margin-inline-end: 35px;
    }

    html body .header-3 .mega-menu-wrapper .header-main .main-menu ul li a {
        font-size: 16px;
    }
}

/* 轮播图响应式高度调整 */
@media (max-width: 1199px) {
    html body .hero-section.hero-3 .slide-bg {
        padding: 100px 0;
        /* 从160px减少到100px */
    }
}

@media (max-width: 1191px) {
    html body .hero-section.hero-3 .slide-bg {
        padding: 80px 0;
        /* 从120px减少到80px */
    }
}

@media (max-width: 991px) {
    html body .hero-section.hero-3 .slide-bg {
        padding: 70px 0;
        /* 从100px减少到70px */
    }
}

@media (max-width: 767px) {
    html body .hero-section.hero-3 .slide-bg {
        padding: 60px 0;
        /* 从100px减少到60px */
    }

    html body .marque-section .text-slider.text-style-2 {
        font-size: 12px;
        /* 在小屏幕上进一步减小 */
    }
}

@media (max-width: 575px) {
    html body .hero-section.hero-3 .slide-bg {
        padding: var(--accordion-padding-right) 0;
        /* 移动端使用CSS变量 */
    }
}

/* ============ Logo相关样式重构 ============ */
/* 侧边栏Logo样式 */
html body .offcanvas .offcanvas-body .offcanvas__logo {
    margin-left: 0;
    padding-left: 0;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-left: 0;
    padding-left: 0;
}

.offcanvas-logo-img {
    width: 80%;
    max-width: 180px;
    min-width: 120px;
    height: auto;
}

/* 主Logo样式 */
.main-logo-img {
    height: 100px;
    width: auto;
    margin-left: 0;
}

.header-logo-full {
    width: 100%;
    max-width: 220px;
    min-width: 120px;
    height: auto;
}

/* ============ 图标样式 ============ */
.icon-small {
    height: 18px;
    width: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* ============ 背景图片样式重构 ============ */
/* 轮播图背景 */
/* 轮播图背景已移至HTML文件中的style属性 */

html body .testimonial-bg-1 {
    background-image: url('../img/testimonial/06.jpg');
}

html body .testimonial-bg-2 {
    background-image: url('../img/testimonial/07.jpg');
}

html body .testimonial-bg-3 {
    background-image: url('../img/testimonial/08.jpg');
}

html body .testimonial-bg-4 {
    background-image: url('../img/testimonial/09.jpg');
}

html body .news-bg-1 {
    background-image: url('../img/news/06.jpg');
}

html body .news-bg-2 {
    background-image: url('../img/news/07.jpg');
}

html body .news-bg-3 {
    background-image: url('../img/news/08.jpg');
}

html body .contact-section-bg {
    background-image: url('../img/contact-bg.jpg');
}

/* ============ 字体大小样式重构 ============ */
html body .hero-section .hero-title-large {
    font-size: 2.5em;
}

html body .section-title-large {
    font-size: 2.2em;
    margin-top: 40px;
    display: block;
}

/* ============ 服务产品卡片样式 ============ */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
}

.service-card {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 300px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    cursor: pointer;
}

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

.service-card-link {
    text-decoration: none;
}

.service-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.service-card-overlay {
    position: absolute;
    top: 10px;
    left: 0;
    width: 100%;
}

.service-card-title {
    display: block;
    font-weight: bold;
    text-align: left;
    padding-left: 15px;
    font-size: 1.2em;
}

.service-card-title.dark-text {
    color: #000;
}

.service-card-title.light-text {
    color: white;
}

.service-card-subtitle {
    font-size: 0.75em;
    font-weight: normal;
}

/* ============ 侧边栏覆盖层样式重构 ============ */
/* 侧边栏遮罩层透明度调整 */
/* 让右侧边栏的遮罩层只是稍微暗一点点，而不是很黑 */
html body .offcanvas__overlay.active,
html body .offcanvas__overlay.overlay-open {
    opacity: 0.3;
    /* 从原来的0.8改为0.3，让背景只是稍微暗一点 */
}

/* ============ Video Image区域样式重构 ============ */
/* Video Image区域图片样式 - 限定在about-tabs-area内的video-image */
html body .about-section .about-tabs-area .video-image {
    width: 100%;
    max-width: 320px;
    /* 设置最大宽度 */
    height: 200px;
    /* 16:10比例高度 (320px * 10/16 = 200px) */
    overflow: hidden;
    border-radius: var(--accordion-border-radius);
    /* 使用CSS变量添加圆角 */
    position: relative;
    margin: 0 0 20px 0;
    /* 添加底部间距 */
    display: block;
    /* 确保显示 */
    border: 2px solid #e0e0e0;
    /* 临时边框用于调试 */
    background-color: #f8f8f8;
    /* 临时背景色用于调试 */
}

html body .about-section .about-tabs-area .video-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 居中裁剪，填满容器 */
    object-position: center;
    /* 居中定位 */
    transition: transform var(--transition-normal);
    /* 使用CSS变量 */
    display: block;
    /* 确保图片显示 */
    background-color: #f0f0f0;
    /* 添加背景色用于调试 */
}

html body .about-section .about-tabs-area .video-image:hover img {
    transform: scale(1.02);
    /* 鼠标悬停时轻微放大 */
}

/* 确保video-box播放按钮正确定位 - 限定范围 */
html body .about-section .about-tabs-area .video-image .video-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* ============ 文件信息部分样式 ============ */
.filing-info-section {
    background-color: #f8f9fa;
    padding: 20px 0;
    border-top: 1px solid #e9ecef;
    font-family: Arial, sans-serif;
}

.filing-info-content {
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
}

.filing-text {
    font-size: 11px;
    line-height: 1.4;
    color: #666;
    margin: 3px 0;
    word-wrap: break-word;
}

.filing-text a {
    color: #666;
    text-decoration: none;
}

.filing-text a:hover {
    color: #333;
    text-decoration: underline;
}

.shield-icon {
    color: #1E88E5;
    font-size: 12px;
}

.partner-icons {
    color: #ff4444;
    font-size: 12px;
}

.company-info {
    font-weight: 500;
    margin-top: 8px;
}

.partner-logos {
    margin-top: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
}

.partner-text {
    font-size: 11px;
    color: #666;
}

.logo-items {
    display: flex;
    gap: 10px;
    align-items: center;
}

.logo-placeholder {
    background-color: #e9ecef;
    padding: 2px 8px;
    border-radius: 3px;
    font-size: 10px;
    color: #666;
}

/* ============ 点线成面Logo图片样式 ============ */
.dotrix-logo-text {
    height: 1.2em;
    /* 与h1文字行高匹配 */
    width: auto;
    /* 保持图片比例 */
    display: block;
    /* 改为block以便居中 */
    margin: 0 auto;
    /* 自动居中 */
    padding: 0;
    background-color: transparent;
    /* 确保背景透明 */
    -webkit-background-clip: content-box;
    background-clip: content-box;
    image-rendering: crisp-edges;
    /* 保持图片清晰度 */
    -webkit-image-rendering: crisp-edges;
    -moz-image-rendering: crisp-edges;
}

/* 在hero section中的特殊处理 */
.hero-content h1 .dotrix-logo-text {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));
    /* 添加阴影增强可读性 */
}

/* 确保h1标题中的图片行居中 */
.hero-content h1 {
    text-align: center;
    /* 改为居中对齐 */
}

.hero-content h1 .dotrix-logo-text {
    margin-bottom: 0.3em;
    /* 添加适当的下边距 */
}

/* ============ 文件信息部分响应式设计 ============ */
@media (max-width: 768px) {
    .filing-info-section {
        padding: 15px 0;
    }

    .filing-text {
        font-size: 10px;
        line-height: 1.3;
        margin: 2px 0;
    }

    .partner-logos {
        flex-direction: column;
        gap: 10px;
    }

    /* 移动端logo图片调整 */
    .dotrix-logo-text {
        height: 1.1em;
        /* 移动端稍微小一点 */
    }
}

/* ============ 专业卡片网格布局样式 ============ */
.major-cards-grid-section {
    padding: 20px 0 60px 0;
    background: transparent;
}

.major-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, 320px);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    justify-content: center;
}

.major-card-item {
    width: 100%;
    display: flex;
    justify-content: center;
}

.major-card-content {
    display: flex;
    align-items: center;
    background: var(--white);
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    padding: 0;
    height: 80px;
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.major-card-content:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.major-card-content::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(147, 51, 234, 0.05));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.major-card-content:hover::before {
    opacity: 1;
}

.major-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center;
    border-radius: 16px;
    margin: 0;
    border: none;
    box-shadow: none;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.major-card-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--header);
    line-height: 1.2;
    white-space: pre-line;
    text-align: right;
    padding-right: 20px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
}

.major-card-text .details {
    font-size: 14px;
    font-weight: 300;
    display: block;
    margin-top: 4px;
}

/* 专业卡片网格布局相关样式 */
.pricing-section .major-cards-grid-section {
    position: relative;
    z-index: 10;
    margin: 30px 0;
    padding: 20px 0 60px 0;
}

/* 确保专业卡片下方的价格区域有足够间距 */
.pricing-section .major-cards-grid-section+.row {
    margin-top: 80px;
    position: relative;
    z-index: 1;
}

/* ============ 专业卡片响应式设计 ============ */
@media (max-width: 1199px) {
    .major-cards-grid {
        grid-template-columns: repeat(auto-fit, 300px);
        gap: 25px;
    }

    .major-card-content {
        height: 75px;
        width: 300px;
        min-width: 300px;
        max-width: 300px;
        padding: 0;
        align-items: center;
    }

    .major-card-image {
        width: 100%;
        height: 100%;
        object-position: left center;
    }

    .major-card-text {
        font-size: 17px;
        padding-right: 18px;
        color: var(--header);
        white-space: pre-line;
    }

    .major-card-text .details {
        font-size: 13px;
    }
}

@media (max-width: 991px) {
    .major-cards-grid {
        grid-template-columns: repeat(auto-fit, 280px);
        gap: 25px;
    }

    .major-card-content {
        height: 70px;
        width: 280px;
        min-width: 280px;
        max-width: 280px;
        padding: 0;
        align-items: center;
    }

    .major-card-image {
        width: 100%;
        height: 100%;
        margin: 0;
        object-position: left center;
    }

    .major-card-text {
        font-size: 16px;
        padding-right: 15px;
        color: var(--header);
        white-space: pre-line;
    }

    .major-card-text .details {
        font-size: 12px;
    }
}

@media (max-width: 767px) {
    .major-cards-grid {
        grid-template-columns: repeat(auto-fit, 250px);
        gap: 20px;
        padding: 0 15px;
    }

    .major-card-content {
        height: 65px;
        width: 250px;
        min-width: 250px;
        max-width: 250px;
        padding: 0;
        align-items: center;
    }

    .major-card-image {
        width: 100%;
        height: 100%;
        margin: 0;
        object-position: left center;
    }

    .major-card-text {
        font-size: 15px;
        padding-right: 12px;
        color: var(--header);
        white-space: pre-line;
    }

    .major-card-text .details {
        font-size: 11px;
    }

    .pricing-section.section-padding {
        padding: 40px 0;
    }

    .pricing-section .major-cards-grid-section {
        margin: 20px 0;
        padding: 15px 0 30px 0;
    }

    .pricing-section .major-cards-grid-section+.row {
        margin-top: 40px;
    }
}

@media (max-width: 575px) {
    .major-cards-grid {
        grid-template-columns: repeat(auto-fit, 220px);
        gap: 15px;
        padding: 0 10px;
    }

    .major-card-content {
        height: 60px;
        width: 220px;
        min-width: 220px;
        max-width: 220px;
        padding: 0;
        align-items: center;
    }

    .major-card-image {
        width: 100%;
        height: 100%;
        margin: 0;
        object-position: left center;
    }

    .major-card-text {
        font-size: 14px;
        padding-right: 10px;
        color: var(--header);
        white-space: pre-line;
    }

    .major-card-text .details {
        font-size: 10px;
    }
}

/* ============ 专业卡片手风琴组件样式 ============ */
/* 
 * 使用高特异性选择器避免 !important
 * 通过CSS变量实现统一的主题管理
 */

/* 1. 手风琴下拉按钮基础样式 */
.faq-content.style-2 .accordion-item .accordion-header .accordion-button.major-accordion-button::after {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    /* 使用CSS变量 */
    content: "\f078";
    width: var(--accordion-button-width);
    height: var(--accordion-button-height);
    background-color: var(--dotrix-theme2);
    text-align: center;
    line-height: var(--accordion-button-height);
    color: var(--dotrix-white);
    border-radius: 4px;
    font-family: "Font Awesome 5 Pro";
    font-weight: 300;
    /* 添加旋转动画和原点设置 */
    transition: transform var(--transition-normal), background-color var(--transition-normal);
    transform-origin: center center;
}

/* 2. 展开状态下的按钮样式 - 旋转180度并改变背景色 */
.faq-content.style-2 .accordion-item .accordion-header .accordion-button.major-accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) var(--rotation-180);
    background: var(--dotrix-secondary);
}

/* 3. 确保按钮溢出可见 */
.faq-content.style-2 .accordion-item .accordion-header .accordion-button.major-accordion-button[style*="background: transparent"] {
    overflow: visible;
}

/* 4. 专业卡片按钮主体样式 */
.faq-content.style-2 .accordion-item .accordion-header .major-accordion-button {
    position: relative;
    padding: 0 var(--accordion-padding-right) 0 0;
    background: transparent;
    border-radius: var(--accordion-border-radius);
    overflow: hidden;
    height: var(--accordion-height);
    min-height: var(--accordion-min-height);
}

/* 5. 专业卡片背景图片 */
.faq-content.style-2 .accordion-item .accordion-header .major-accordion-button .major-accordion-image {
    position: absolute;
    top: 0;
    left: 0;
    width: calc(100% - var(--accordion-padding-right));
    height: 100%;
    object-fit: cover;
    object-position: left center;
    z-index: 1;
    border-radius: var(--accordion-image-border-radius);
}

/* 6. 专业卡片文字 */
.faq-content.style-2 .accordion-item .accordion-header .major-accordion-button .major-accordion-text {
    position: absolute;
    left: var(--accordion-text-left-position);
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    font-size: var(--font-size-accordion-text);
    font-weight: var(--font-weight-bold);
    color: var(--dotrix-header);
    line-height: var(--line-height-normal);
    text-shadow: var(--text-shadow-white);
    background: transparent;
}

/* ============ 专业卡片手风琴动画系统 ============ */
/* 
 * 使用CSS变量统一管理动画参数
 * 减少硬编码，提高可维护性
 */



/* 7. 手风琴内容区域展开动画 */
.faq-content.style-2 .accordion-item .accordion-collapse {
    transition: all var(--transition-normal);
}

/* 8. 专业卡片按钮悬停效果 */
.faq-content.style-2 .accordion-item .accordion-header .major-accordion-button:hover {
    transform: var(--hover-lift-medium);
    transition: transform var(--transition-fast);
}

/* 9. 按钮基础过渡效果 */
.faq-content.style-2 .accordion-item .accordion-header .major-accordion-button {
    transition: all var(--transition-fast);
}

/* 10. 手风琴卡片整体动画效果 */
.faq-content.style-2 .accordion-item {
    transition: box-shadow var(--transition-normal), transform var(--transition-fast);
}

/* 11. 卡片悬停时的整体效果 */
.faq-content.style-2 .accordion-item:hover {
    transform: var(--hover-lift-small);
    box-shadow: var(--shadow-hover);
}