/* Similar Products Responsive */
@media (max-width: 767.98px) {
  .similar-product-image {
    height: 200px;
  }

  .similar-product-body {
    padding: 1rem;
  }

  .similar-product-title {
    font-size: 1rem;
  }

  .similar-product-desc {
    font-size: 0.9rem;
  }
}

@media (max-width: 575.98px) {
  .similar-products-section {
    margin-bottom: 1.5rem;
  }

  .similar-product-image {
    height: 180px;
  }

  .related-products-grid {
    --bs-gutter-y: 1rem;
  }

  .similar-product-body {
    padding: 0.9rem;
  }
}
/* ========================================
   Responsive Media Queries
   响应式媒体查询样式
   ======================================== */

/* ========================================
   Extra Large Devices (≥1400px)
   超大屏幕设备
   ======================================== */
@media (min-width: 1400px) {
  :root {
    --font-size-5xl: 3.5rem;       /* 56px */
    --font-size-4xl: 2.5rem;       /* 40px */
  }
  
  .container {
    max-width: 1320px;
  }
}

/* ========================================
   Large Devices (≥992px and <1400px)
   大屏幕设备
   ======================================== */
@media (min-width: 992px) and (max-width: 1399px) {
  :root {
    --font-size-5xl: 2.75rem;      /* 44px */
    --font-size-4xl: 2.125rem;     /* 34px */
  }
}

/* ========================================
   Medium Devices (≥768px and <992px)
   中等屏幕设备 - 平板
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
  :root {
    --font-size-5xl: 2.5rem;       /* 40px */
    --font-size-4xl: 2rem;         /* 32px */
    --font-size-3xl: 1.75rem;      /* 28px */
    --spacing-3xl: 3rem;           /* 48px */
  }
  
  h1 {
    font-size: var(--font-size-4xl);
  }
  
  h2 {
    font-size: var(--font-size-3xl);
  }
  
  .section {
    padding: var(--spacing-2xl) 0;
  }
  
  .section-lg {
    padding: var(--spacing-3xl) 0;
  }
  
  .btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: var(--font-size-base);
  }
}

/* ========================================
   Small Devices (≥576px and <768px)
   小屏幕设备 - 大手机/小平板
   ======================================== */
@media (min-width: 576px) and (max-width: 767px) {
  :root {
    --font-size-5xl: 2.25rem;      /* 36px */
    --font-size-4xl: 1.875rem;     /* 30px */
    --font-size-3xl: 1.5rem;       /* 24px */
    --font-size-2xl: 1.375rem;     /* 22px */
    --spacing-3xl: 2.5rem;         /* 40px */
    --spacing-2xl: 2rem;           /* 32px */
  }
  
  h1 {
    font-size: var(--font-size-4xl);
  }
  
  h2 {
    font-size: var(--font-size-3xl);
  }
  
  h3 {
    font-size: var(--font-size-2xl);
  }
  
  .section {
    padding: var(--spacing-xl) 0;
  }
  
  .section-lg {
    padding: var(--spacing-2xl) 0;
  }
  
  .btn {
    padding: 0.625rem 1.25rem;
    font-size: var(--font-size-sm);
  }
  
  .btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: var(--font-size-base);
  }
  
  .card-body {
    padding: var(--spacing-lg);
  }
}

/* ========================================
   Extra Small Devices (<576px)
   超小屏幕设备 - 手机
   ======================================== */
@media (max-width: 575px) {
  :root {
    --font-size-5xl: 2rem;         /* 32px */
    --font-size-4xl: 1.75rem;      /* 28px */
    --font-size-3xl: 1.375rem;     /* 22px */
    --font-size-2xl: 1.25rem;      /* 20px */
    --font-size-xl: 1.125rem;      /* 18px */
    --spacing-3xl: 2rem;           /* 32px */
    --spacing-2xl: 1.5rem;         /* 24px */
    --spacing-xl: 1.25rem;         /* 20px */
  }
  
  body {
    font-size: var(--font-size-sm);
  }
  
  h1 {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
  }
  
  h2 {
    font-size: var(--font-size-2xl);
  }
  
  h3 {
    font-size: var(--font-size-xl);
  }
  
  h4 {
    font-size: var(--font-size-lg);
  }
  
  h5, h6 {
    font-size: var(--font-size-base);
  }
  
  p {
    font-size: var(--font-size-sm);
  }
  
  p.lead {
    font-size: var(--font-size-base);
  }
  
  .section {
    padding: var(--spacing-xl) 0;
  }
  
  .section-sm {
    padding: var(--spacing-lg) 0;
  }
  
  .section-lg {
    padding: var(--spacing-2xl) 0;
  }
  
  .btn {
    padding: 0.625rem 1rem;
    font-size: var(--font-size-sm);
    width: 100%;
  }
  
  .btn-lg {
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-base);
  }
  
  .btn-sm {
    padding: 0.5rem 0.875rem;
    font-size: var(--font-size-xs);
  }
  
  .card-body {
    padding: var(--spacing-md);
  }
  
  .nav-link {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
  }
  
  .form-control {
    font-size: var(--font-size-sm);
    padding: 0.625rem 0.875rem;
  }
}

/* ========================================
   Landscape Orientation - Mobile
   横屏模式 - 移动设备
   ======================================== */
@media (max-width: 767px) and (orientation: landscape) {
  .section {
    padding: var(--spacing-lg) 0;
  }
  
  .section-lg {
    padding: var(--spacing-xl) 0;
  }
  
  h1 {
    font-size: var(--font-size-3xl);
  }
  
  h2 {
    font-size: var(--font-size-2xl);
  }
}

/* ========================================
   Touch Device Optimizations
   触摸设备优化
   ======================================== */
@media (hover: none) and (pointer: coarse) {
  /* 增加触摸目标大小 */
  .btn {
    min-height: 44px;
    min-width: 44px;
  }
  
  .nav-link {
    min-height: 44px;
    padding: 0.75rem 1rem;
  }
  
  /* 移除 hover 效果 */
  .btn:hover {
    transform: none;
  }
  
  .card:hover {
    transform: none;
  }
  
  .img-hover-zoom:hover img {
    transform: none;
  }
}

/* ========================================
   Print Styles
   打印样式
   ======================================== */
@media print {
  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }
  
  .navbar,
  .btn,
  .section-dark,
  .section-primary {
    display: none;
  }
  
  a {
    color: #000;
    text-decoration: underline;
  }
  
  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
  }
  
  /* img {
    max-width: 100%;
    page-break-inside: avoid;
  } */
}

/* ========================================
   High Resolution Displays
   高分辨率显示屏优化
   ======================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ========================================
   Reduced Motion Preference
   减少动画偏好设置
   ======================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ========================================
   Top Bar & Navigation Responsive Styles
   顶部栏和导航响应式样式
   ======================================== */

/* ========================================
   Large Devices (≥992px)
   大屏幕设备
   ======================================== */
@media (min-width: 992px) {
  .navbar-nav .nav-item:hover .dropdown-menu {
    display: block;
  }
  
  .mega-dropdown:hover .mega-menu {
    display: block;
  }
}

/* ========================================
   Medium Devices (≥768px and <992px)
   中等屏幕设备 - 平板
   ======================================== */
@media (min-width: 768px) and (max-width: 991px) {
  .top-bar-left {
    justify-content: start;
    gap: var(--spacing-md);
  }
  
  .navbar-logo {
    height: 45px;
  }
  
  .navbar-collapse {
    margin-top: var(--spacing-md);
  }
  
  .navbar-nav {
    gap: 0;
  }
  
  .nav-link {
    padding: 0.75rem 1rem;
  }
  
  .mega-menu {
    position: relative;
    width: 100%;
    padding: var(--spacing-md) var(--spacing-md);
    box-shadow: none;
    border: none;
    background-color: var(--bg-lighter);
  }
  
  .mega-menu .row {
    margin: 0;
  }
  
  .mega-menu .col-lg-3,
  .mega-menu .col-md-6 {
    padding: var(--spacing-sm) 0;
  }
  
  .mega-menu-title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
  }
  
  .dropdown-menu {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: var(--bg-lighter);
    padding: var(--spacing-sm) var(--spacing-md);
  }
}

/* ========================================
   Small Devices (≥576px and <768px)
   小屏幕设备 - 大手机/小平板
   ======================================== */
@media (min-width: 576px) and (max-width: 767px) {
  .top-bar-section {
    padding: 0.5rem 0;
  }
  
  .top-bar-left {
    justify-content: start;
    align-items: flex-start;
    gap: var(--spacing-xs);
  }
  
  .top-bar-link {
    font-size: var(--font-size-xs);
  }
  
  .top-bar-social {
    width: 28px;
    height: 28px;
  }
  
  .navbar {
    padding: 0.75rem 0;
  }
  
  .navbar-logo {
    height: 40px;
  }
  
  .navbar-collapse {
    margin-top: var(--spacing-md);
    max-height: 70vh;
    overflow-y: auto;
  }
  
  .nav-link {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
  }
  
  .nav-link::after {
    display: none;
  }
  
  .mega-menu {
    position: relative;
    width: 100%;
    padding: var(--spacing-md);
    box-shadow: none;
    border: none;
    background-color: var(--bg-lighter);
  }
  
  .mega-menu .container {
    padding: 0;
  }
  
  .mega-menu .row {
    margin: 0;
  }
  
  .mega-menu .col-lg-3,
  .mega-menu .col-md-6 {
    width: 100%;
    padding: var(--spacing-sm) 0;
  }
  
  .mega-menu-title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-sm);
  }
  
  .mega-menu-list .dropdown-item {
    font-size: var(--font-size-xs);
    padding: 0.5rem 0.75rem;
  }
  
  .mega-menu-inline {
    flex-direction: column;
  }
  
  .mega-menu-inline .dropdown-item {
    width: 100%;
  }
  
  .dropdown-menu {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: var(--bg-lighter);
    padding: var(--spacing-sm) var(--spacing-md);
  }
  
  .dropdown-item {
    font-size: var(--font-size-xs);
    padding: 0.5rem 1rem;
  }
}

/* ========================================
   Extra Small Devices (<576px)
   超小屏幕设备 - 手机
   ======================================== */
@media (max-width: 575px) {
  .top-bar-section {
    padding: 0.5rem 0;
  }
  
  .top-bar-left {
    justify-content: start;
    gap: var(--spacing-xs);
    width: 100%;
  }
  
  .top-bar-link {
    font-size: var(--font-size-xs);
  }
  
  .top-bar-link span {
    font-size: 0.688rem;
  }
  
  .navbar {
    padding: 0.625rem 0;
  }
  
  .navbar-brand {
    margin-right: auto;
  }
  
  .navbar-logo {
    height: 36px;
  }
  
  .navbar-toggler {
    padding: 0.375rem 0.625rem;
  }
  
  .navbar-collapse {
    margin-top: var(--spacing-md);
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .navbar-nav {
    gap: 0;
  }
  
  .nav-link {
    padding: 0.75rem 0.75rem;
    font-size: var(--font-size-sm);
  }
  
  .nav-link::after {
    display: none;
  }
  
  .nav-link.dropdown-toggle::before {
    margin-left: auto;
  }
  
  .mega-menu {
    position: relative;
    width: 100%;
    padding: var(--spacing-sm);
    box-shadow: none;
    border: none;
    background-color: var(--bg-lighter);
    margin-top: 0;
  }
  
  .mega-menu .container {
    padding: 0;
  }
  
  .mega-menu .row {
    margin: 0;
  }
  
  .mega-menu .col-lg-3,
  .mega-menu .col-md-6,
  .mega-menu .col-lg-12 {
    width: 100%;
    padding: var(--spacing-xs) 0;
  }
  
  .mega-menu-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
  }
  
  .mega-menu-list {
    margin-bottom: var(--spacing-sm);
  }
  
  .mega-menu-list li {
    margin-bottom: 0.25rem;
  }
  
  .mega-menu-list .dropdown-item {
    font-size: var(--font-size-xs);
    padding: 0.5rem 0.625rem;
  }
  
  .mega-menu-list .dropdown-item:hover {
    padding-left: 0.875rem;
  }
  
  .mega-menu-inline {
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .mega-menu-inline .dropdown-item {
    width: 100%;
    font-size: var(--font-size-xs);
    padding: 0.5rem 0.75rem;
  }
  
  .dropdown-menu {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: var(--bg-lighter);
    padding: var(--spacing-sm);
    margin-top: 0;
  }
  
  .dropdown-item {
    font-size: var(--font-size-xs);
    padding: 0.5rem 0.75rem;
  }
  
  .dropdown-item:hover {
    padding-left: 1rem;
  }
}

/* ========================================
   Scrollbar Styling for Mobile Menu
   移动端菜单滚动条样式
   ======================================== */
@media (max-width: 991px) {
  .navbar-collapse::-webkit-scrollbar {
    width: 4px;
  }
    .navbar .dropdown-menu,
    .navbar .mega-menu {
      display: none !important;
    }

  .navbar-collapse::-webkit-scrollbar-track {
    background: var(--bg-lighter);
  }
  
  .navbar-collapse::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: var(--radius-full);
  }
  
  .navbar-collapse::-webkit-scrollbar-thumb:hover {
    background: var(--primary-dark);
  }
}


/* ========================================
   Very Small Devices (<430px)
   极小屏幕设备 - 小手机
   ======================================== */
@media (max-width: 429px) {
  .top-bar-left {
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-xs);
  }
  
  .top-bar-link {
    width: auto;
  }
}


/* ========================================
   Home Banner Responsive Styles
   首页 Banner 响应式样式
   ======================================== */

/* Medium Devices (≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991px) {
  .home-banner {
    height: 500px;
  }
  
  .banner-title {
    font-size: var(--font-size-4xl);
  }
  
  .banner-description {
    font-size: var(--font-size-lg);
  }
  
  .banner-arrow {
    width: 45px;
    height: 45px;
    font-size: 1.25rem;
  }
  
  .banner-arrow-prev {
    left: var(--spacing-lg);
  }
  
  .banner-arrow-next {
    right: var(--spacing-lg);
  }
}

/* Small Devices (≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767px) {
  .home-banner {
    height: 450px;
  }
  
  .banner-content {
    padding: var(--spacing-xl);
  }
  
  .banner-title {
    font-size: var(--font-size-3xl);
    margin-bottom: var(--spacing-md);
  }
  
  .banner-description {
    font-size: var(--font-size-base);
    margin-bottom: var(--spacing-xl);
  }
  
  .banner-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .banner-buttons .btn {
    width: 100%;
    min-width: auto;
  }
  
  .banner-arrow {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }
  
  .banner-arrow-prev {
    left: var(--spacing-md);
  }
  
  .banner-arrow-next {
    right: var(--spacing-md);
  }
  
  .banner-indicators {
    bottom: var(--spacing-xl);
  }
}

/* Extra Small Devices (<576px) */
@media (max-width: 575px) {
  .home-banner {
    height: 400px;
  }
  
  .banner-content {
    padding: var(--spacing-lg);
  }
  
  .banner-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
  }
  
  .banner-description {
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);
  }
  
  .banner-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .banner-buttons .btn {
    width: 100%;
    min-width: auto;
    padding: 0.75rem 1.25rem;
    font-size: var(--font-size-sm);
  }
  
  .banner-arrow {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  .banner-arrow-prev {
    left: var(--spacing-sm);
  }
  
  .banner-arrow-next {
    right: var(--spacing-sm);
  }
  
  .banner-indicators {
    bottom: var(--spacing-lg);
  }
  
  .banner-dot {
    width: 10px;
    height: 10px;
  }
  
  .banner-dot.active {
    width: 24px;
  }
}


/* ========================================
   Who We Are Section Responsive
   关于我们模块响应式
   ======================================== */

@media (max-width: 991px) {
  .home-who {
    padding: 30px 0;
  }

  .who-main-title {
    font-size: 36px;
  }

  .who-content-title {
    font-size: 28px;
  }

  .who-video {
    min-height: 350px;
  }

  .who-stats {
    gap: 16px;
  }

  .who-stat-number {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .home-who {
    padding: 30px 0;
  }

  .who-main-title {
    font-size: 32px;
  }

  .who-content-title {
    font-size: 24px;
    margin-bottom: 20px;
  }

  .who-text {
    font-size: 15px;
  }

  .who-video {
    min-height: 300px;
  }

  .who-video-play-btn {
    width: 70px;
    height: 70px;
  }

  .who-video-play-btn i {
    font-size: 28px;
  }

  .who-stats {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin: 32px 0;
    padding: 24px 0;
  }

  .who-stat-number {
    font-size: 28px;
  }

  .who-stat-label {
    font-size: 12px;
  }

  .who-content {
    padding: 0;
  }

  .who-actions {
    flex-direction: column;
  }

  .who-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 575px) {
  .home-who {
    padding: 30px 0;
  }

  .who-subtitle {
    font-size: 12px;
  }

  .who-main-title {
    font-size: 28px;
    margin: 12px 0 20px;
  }

  .who-title-divider {
    width: 60px;
    height: 3px;
  }

  .who-content-title {
    font-size: 22px;
  }

  .who-text {
    font-size: 14px;
    line-height: 1.7;
  }

  .who-video {
    min-height: 250px;
  }

  .who-video-play-btn {
    width: 60px;
    height: 60px;
  }

  .who-video-play-btn i {
    font-size: 24px;
  }

  .who-stats {
    grid-template-columns: 1fr;
    gap: 20px;
    margin: 28px 0;
  }

  .who-stat-number {
    font-size: 36px;
  }

  .who-stat-label {
    font-size: 13px;
  }

  .who-actions .btn {
    padding: 12px 24px;
    font-size: 14px;
  }

  .who-video-decoration {
    width: 150px;
    height: 150px;
    bottom: -20px;
    right: -20px;
  }
}


/* ========================================
   Products Section Responsive
   产品展示模块响应式
   ======================================== */

@media (max-width: 991px) {
  .home-products {
    padding: 30px 0;
  }

  .products-main-title {
    font-size: 36px;
  }

  .product-image-wrapper {
    height: 220px;
  }
}

@media (max-width: 767px) {
  .home-products {
    padding: 30px 0;
  }

  .products-main-title {
    font-size: 28px;
  }

  .products-subtitle {
    font-size: 15px;
  }

  .product-image-wrapper {
    height: 200px;
  }

  .product-name {
    font-size: 18px;
    min-height: auto;
  }

  .product-desc {
    font-size: 13px;
  }
}

@media (max-width: 575px) {
  .home-products {
    padding: 30px 0;
  }

  .products-main-title {
    font-size: 24px;
  }

  .products-title-divider {
    width: 60px;
    height: 3px;
  }

  .products-subtitle {
    font-size: 14px;
  }

  .product-card {
    margin-bottom: 20px;
  }

  .product-image-wrapper {
    height: 180px;
  }

  .product-package-icon {
    padding: 20px;
  }

  .package-svg {
    width: 80px;
    height: 48px;
  }

  .product-info {
    padding: 20px;
  }

  .product-name {
    font-size: 17px;
  }

  .products-view-all {
    width: 100%;
    justify-content: center;
  }
}


/* ========================================
   Home Case Section - Responsive Styles
   首页案例展示区域 - 响应式样式
   ======================================== */

/* Tablet - Large (≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199px) {
  .case-title {
    font-size: var(--font-size-3xl);
  }
  
  .case-featured .case-item-title {
    font-size: var(--font-size-2xl);
  }
  
  .case-item:not(.case-featured) .case-item-title {
    font-size: var(--font-size-lg);
  }
  
  .case-stat-number {
    font-size: var(--font-size-4xl);
  }
}

/* Extra Small Mobile (<430px) */
@media (max-width: 429px) {
  .case-title {
    font-size: var(--font-size-lg);
  }
  
  .case-featured .case-image-wrapper {
    min-height: 200px;
  }
  
  .case-image-wrapper {
    min-height: 220px;
  }
  
  .case-stat-number {
    font-size: var(--font-size-xl);
  }
  
  .case-stat-label {
    font-size: 0.5625rem;
  }
}


/* Tablet (≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991px) {
  .case-header {
    margin-bottom: var(--spacing-2xl);
  }
  
  .case-title {
    font-size: var(--font-size-3xl);
  }
  
  .case-description {
    font-size: var(--font-size-base);
  }
  
  .case-featured .case-image-wrapper {
    min-height: 300px;
  }
  
  .case-image-wrapper {
    min-height: 280px;
  }
  
  .case-item-title {
    font-size: var(--font-size-xl);
  }
  
  .case-featured .case-item-title {
    font-size: var(--font-size-2xl);
  }
  
  /* Statistics - 2x2 Grid */
  .case-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
  }
  
  .case-stat-item:nth-child(2)::after,
  .case-stat-item:nth-child(4)::after {
    display: none;
  }
  
  .case-stat-number {
    font-size: var(--font-size-4xl);
  }
  
  .case-stat-label {
    font-size: var(--font-size-sm);
  }
  
  .case-footer {
    margin-top: var(--spacing-2xl);
  }
}

/* Mobile - Large (≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767px) {
  .home-case {
    padding: var(--spacing-2xl) 0;
  }
  
  .case-header {
    margin-bottom: var(--spacing-xl);
  }
  
  .case-title {
    font-size: var(--font-size-2xl);
  }
  
  .case-description {
    font-size: var(--font-size-base);
  }
  
  .case-featured .case-image-wrapper {
    min-height: 260px;
  }
  
  .case-image-wrapper {
    min-height: 280px;
  }
  
  .case-overlay {
    padding: var(--spacing-lg);
  }
  
  .case-item-title {
    font-size: var(--font-size-xl);
  }
  
  .case-featured .case-item-title {
    font-size: var(--font-size-xl);
  }
  
  .case-excerpt {
    font-size: var(--font-size-sm);
  }
  
  /* Statistics - 2x2 Grid */
  .case-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
  }
  
  .case-stat-item:nth-child(2)::after,
  .case-stat-item:nth-child(4)::after {
    display: none;
  }
  
  .case-stat-number {
    font-size: var(--font-size-3xl);
  }
  
  .case-stat-label {
    font-size: var(--font-size-xs);
  }
  
  .case-footer {
    margin-top: var(--spacing-xl);
  }
}

/* Mobile - Small (<576px) */
@media (max-width: 575px) {
  .home-case {
    padding: var(--spacing-xl) 0;
  }
  
  .case-header {
    margin-bottom: var(--spacing-lg);
  }
  
  .case-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
  }
  
  .case-description {
    font-size: var(--font-size-sm);
  }
  
  .case-featured .case-image-wrapper {
    min-height: 220px;
  }
  
  .case-image-wrapper {
    min-height: 250px;
  }
  
  .case-overlay {
    padding: var(--spacing-md);
  }
  
  .case-item-title {
    font-size: var(--font-size-lg);
    margin-bottom: 0.375rem;
  }
  
  .case-featured .case-item-title {
    font-size: var(--font-size-lg);
  }
  
  .case-location {
    font-size: 0.75rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .case-excerpt {
    font-size: 0.8125rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .case-link {
    font-size: var(--font-size-sm);
  }
  
  /* Statistics - 2x2 Grid */
  .case-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border-radius: var(--radius-lg);
  }
  
  .case-stat-item:nth-child(2)::after,
  .case-stat-item:nth-child(4)::after {
    display: none;
  }
  
  .case-stat-number {
    font-size: var(--font-size-2xl);
    margin-bottom: 0.25rem;
  }
  
  .case-stat-label {
    font-size: 0.625rem;
    letter-spacing: 0.25px;
  }
  
  .case-footer {
    margin-top: var(--spacing-xl);
  }
  
  .case-footer .btn {
    width: 100%;
  }
}


/* ========================================
   Home Why Choose Us Section - Responsive Styles
   首页为什么选择我们区域 - 响应式样式
   ======================================== */

/* Tablet (≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991px) {
  .why-title {
    font-size: var(--font-size-3xl);
  }
  
  .why-intro {
    padding-right: 0;
    margin-bottom: var(--spacing-2xl);
  }
  
  .why-top-section {
    margin-bottom: var(--spacing-2xl);
  }
}

/* Mobile (≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767px) {
  .home-why {
    padding: var(--spacing-2xl) 0;
  }
  
  .why-intro {
    padding-right: 0;
    margin-bottom: var(--spacing-xl);
  }
  
  .why-title {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-md);
  }
  
  .why-intro-text {
    font-size: var(--font-size-sm);
  }
  
  .why-cta-btn {
    width: 100%;
    text-align: center;
  }
  
  .why-top-section {
    margin-bottom: var(--spacing-xl);
  }
  
  .why-services {
    gap: var(--spacing-md);
  }
  
  .why-service-icon {
    width: 45px;
    height: 45px;
    font-size: 1.25rem;
  }
  
  .why-service-title {
    font-size: var(--font-size-base);
  }
  
  .why-service-text {
    font-size: 0.8125rem;
  }
  
  .why-image-section {
    margin-bottom: var(--spacing-xl);
  }
  
  .why-image-caption h4 {
    font-size: var(--font-size-sm);
  }
  
  .why-image-caption p {
    font-size: 0.75rem;
  }
  
  .why-bottom-cta .btn {
    width: 100%;
  }
}

/* Mobile - Small (<576px) */
@media (max-width: 575px) {
  .home-why {
    padding: var(--spacing-xl) 0;
  }
  
  .why-intro {
    padding-right: 0;
    margin-bottom: var(--spacing-lg);
  }
  
  .why-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
  }
  
  .why-intro-text {
    font-size: 0.875rem;
    margin-bottom: var(--spacing-sm);
  }
  
  .why-cta-btn {
    width: 100%;
    text-align: center;
    padding: 0.875rem 2rem;
    font-size: var(--font-size-base);
  }
  
  .why-top-section {
    margin-bottom: var(--spacing-lg);
  }
  
  .why-services {
    gap: var(--spacing-md);
  }
  
  .why-service-item {
    gap: var(--spacing-sm);
  }
  
  .why-service-icon {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }
  
  .why-service-title {
    font-size: var(--font-size-base);
  }
  
  .why-service-text {
    font-size: 0.8125rem;
  }
  
  .why-service-badge {
    font-size: 0.625rem;
    padding: 0.2rem 0.5rem;
  }
  
  .why-image-section {
    margin-bottom: var(--spacing-lg);
  }
  
  .why-image-caption {
    padding: var(--spacing-md);
  }
  
  .why-image-caption h4 {
    font-size: var(--font-size-sm);
    margin-bottom: 0.25rem;
  }
  
  .why-image-caption p {
    font-size: 0.75rem;
  }
  
  .why-bottom-cta .btn {
    width: 100%;
    padding: 0.875rem 2rem;
    font-size: var(--font-size-base);
  }
}


/* ========================================
   Home Certificates Section Responsive
   首页证书展示区域响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .home-cert {
    padding: var(--spacing-2xl) 0;
  }
  
  .cert-header {
    margin-bottom: var(--spacing-2xl);
  }
  
  .cert-title {
    font-size: var(--font-size-3xl);
  }
  
  .cert-description {
    font-size: var(--font-size-base);
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  .home-cert {
    padding: var(--spacing-xl) 0;
  }
  
  .cert-header {
    margin-bottom: var(--spacing-xl);
  }
  
  .cert-title {
    font-size: var(--font-size-2xl);
  }
  
  .cert-description {
    font-size: var(--font-size-sm);
  }
  
  /* Lightbox adjustments for mobile */
  .cert-lightbox-content {
    max-width: 95%;
    max-height: 95%;
  }
  
  .cert-lightbox-image-wrapper {
    max-height: 60vh;
  }
  
  .cert-lightbox-image {
    max-height: 60vh;
  }
  
  .cert-lightbox-close {
    top: var(--spacing-md);
    right: var(--spacing-md);
    width: 40px;
    height: 40px;
  }
  
  .cert-lightbox-close i {
    font-size: 1.25rem;
  }
  
  .cert-lightbox-prev,
  .cert-lightbox-next {
    width: 40px;
    height: 40px;
  }
  
  .cert-lightbox-prev {
    left: var(--spacing-md);
  }
  
  .cert-lightbox-next {
    right: var(--spacing-md);
  }
  
  .cert-lightbox-prev i,
  .cert-lightbox-next i {
    font-size: 1.5rem;
  }
  
  .cert-lightbox-title {
    font-size: var(--font-size-xl);
  }
  
  .cert-lightbox-desc {
    font-size: var(--font-size-sm);
  }
}

/* Extra Small Mobile (< 576px) */
@media (max-width: 575px) {
  .cert-caption-title {
    font-size: var(--font-size-sm);
  }
  
  .cert-caption-desc {
    font-size: var(--font-size-xs);
  }
}


/* ========================================
   Home News Section Responsive
   首页新闻展示区域响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .home-news {
    padding: var(--spacing-2xl) 0;
  }
  
  .news-header {
    margin-bottom: var(--spacing-2xl);
  }
  
  .news-title {
    font-size: var(--font-size-3xl);
  }
  
  .news-description {
    font-size: var(--font-size-base);
  }
  
  .news-featured-title {
    font-size: var(--font-size-xl);
  }
  
  .news-footer {
    margin-top: var(--spacing-2xl);
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  .home-news {
    padding: var(--spacing-xl) 0;
  }
  
  .news-header {
    margin-bottom: var(--spacing-xl);
  }
  
  .news-title {
    font-size: var(--font-size-2xl);
  }
  
  .news-description {
    font-size: var(--font-size-sm);
  }
  
  .news-featured-content {
    padding: var(--spacing-md);
  }
  
  .news-featured-title {
    font-size: var(--font-size-lg);
  }
  
  .news-featured-excerpt {
    font-size: var(--font-size-sm);
  }
  
  .news-item-image-wrapper {
    width: 120px;
    height: 100px;
  }
  
  .news-item-content {
    padding: var(--spacing-sm);
    padding-left: 0;
  }
  
  .news-item-title {
    font-size: var(--font-size-base);
  }
  
  .news-item-excerpt {
    font-size: var(--font-size-xs);
  }
  
  .news-footer {
    margin-top: var(--spacing-xl);
  }
}

/* Extra Small Mobile (< 576px) */
@media (max-width: 575px) {
  .news-item-link {
    flex-direction: column;
  }
  
  .news-item-image-wrapper {
    width: 100%;
    height: 180px;
  }
  
  .news-item-content {
    padding: var(--spacing-md);
  }
  
  .news-meta {
    gap: var(--spacing-sm);
  }
  
  .news-date,
  .news-category {
    font-size: var(--font-size-xs);
  }
}


/* ========================================
   Home Help Center Section Responsive
   首页帮助中心区域响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .home-help {
    padding: var(--spacing-2xl) 0;
  }
  
  .help-header {
    margin-bottom: var(--spacing-2xl);
  }
  
  .help-title {
    font-size: var(--font-size-3xl);
  }
  
  .help-description {
    font-size: var(--font-size-base);
  }
  
  .help-section-title {
    font-size: var(--font-size-lg);
  }
  
  .help-footer {
    margin-top: var(--spacing-2xl);
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  .home-help {
    padding: var(--spacing-xl) 0;
  }
  
  .help-header {
    margin-bottom: var(--spacing-xl);
  }
  
  .help-title {
    font-size: var(--font-size-2xl);
  }
  
  .help-description {
    font-size: var(--font-size-sm);
  }
  
  .help-section-title {
    font-size: var(--font-size-base);
  }
  
  .help-section-title i {
    font-size: 1.25rem;
  }
  
  .help-faq-item {
    padding: var(--spacing-md);
  }
  
  .help-faq-icon {
    width: 40px;
    height: 40px;
  }
  
  .help-faq-icon i {
    font-size: 1.25rem;
  }
  
  .help-faq-question {
    font-size: var(--font-size-sm);
  }
  
  .help-faq-answer {
    font-size: var(--font-size-xs);
  }
  
  .help-video-info {
    padding: var(--spacing-sm);
  }
  
  .help-video-title {
    font-size: var(--font-size-sm);
  }
  
  .help-video-desc {
    font-size: var(--font-size-xs);
  }
  
  .help-footer {
    margin-top: var(--spacing-xl);
  }
}

/* Extra Small Mobile (< 576px) */
@media (max-width: 575px) {
  .help-video-overlay i {
    font-size: 3rem;
  }
}


/* ========================================
   Footer Responsive Styles
   页尾响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .site-footer {
    padding: var(--spacing-2xl) 0 0;
  }
  
  .footer-bottom {
    margin-top: var(--spacing-2xl);
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  .site-footer {
    padding: var(--spacing-xl) 0 0;
  }
  
  .footer-column {
    margin-bottom: var(--spacing-xl);
  }
  
  .footer-title {
    font-size: var(--font-size-base);
  }
  
  .footer-bottom {
    margin-top: var(--spacing-xl);
    text-align: center;
  }
  
  .footer-bottom-links {
    justify-content: center;
    margin-top: var(--spacing-sm);
  }
  
  .footer-copyright {
    text-align: center;
  }
}

/* Extra Small Mobile (< 576px) */
@media (max-width: 575px) {
  .footer-social {
    justify-content: flex-start;
  }
  
  .footer-social-link {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
  
  .footer-bottom-links {
    flex-direction: column;
    gap: var(--spacing-xs);
  }
  
  .footer-divider {
    display: none;
  }
}
/* ========================================
   Home Exhibition Display Section Responsive
   首页展会展示区域响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (max-width: 991px) {
  .home-display {
    padding: var(--spacing-2xl) 0;
  }
  
  .display-header {
    margin-bottom: var(--spacing-2xl);
  }
  
  .display-title {
    font-size: var(--font-size-3xl);
  }
  
  .display-description {
    font-size: var(--font-size-base);
  }
}

/* Mobile (576px - 767px) */
@media (max-width: 767px) {
  .home-display {
    padding: var(--spacing-xl) 0;
  }
  
  .display-header {
    margin-bottom: var(--spacing-xl);
  }
  
  .display-title {
    font-size: var(--font-size-2xl);
  }
  
  .display-description {
    font-size: var(--font-size-sm);
  }
  
  .display-content {
    padding: var(--spacing-md);
  }
  
  .display-event-title {
    font-size: var(--font-size-base);
  }
}

/* Extra Small Mobile (< 576px) */
@media (max-width: 575px) {
  .display-info li {
    font-size: var(--font-size-xs);
  }
}

/* Button text center alignment on small screens */
@media (max-width: 575px) {
  .help-footer .btn,
  .news-footer .btn {
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
  }
  
  .help-footer,
  .news-footer {
    display: flex;
    justify-content: center;
  }
}
/* Banner responsive heights */
@media (max-width: 991px) {
  .bg-dark[style*="height: 420px"] {
    height: 350px !important;
  }
}

@media (max-width: 767px) {
  .bg-dark[style*="height: 420px"] {
    height: 280px !important;
  }
  
  .display-4 {
    font-size: 2rem !important;
  }
}

@media (max-width: 575px) {
  .bg-dark[style*="height: 420px"] {
    height: 240px !important;
  }
  
  .display-4 {
    font-size: 1.75rem !important;
  }
}

/* ========================================
   Page Banner Responsive Styles
   页面横幅响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .page-banner {
    height: 350px;
  }
  
  .page-banner-title {
    font-size: 2.5rem;
  }
}

/* Small Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .page-banner {
    height: 280px;
  }
  
  .page-banner-title {
    font-size: 2rem;
  }
}

/* Mobile (< 576px) */
@media (max-width: 575px) {
  .page-banner {
    height: 240px;
  }
  
  .page-banner-title {
    font-size: 1.75rem;
  }
  
  .page-banner .breadcrumb {
    font-size: 0.875rem;
  }
}

/* ========================================
   Product Testimonials Responsive Styles
   产品客户好评响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .product-testimonials {
    padding: 3rem 0;
  }
  
  .testimonial-image-wrapper {
    height: 220px;
  }
  
  .product-benefit-card {
    padding: 1.5rem;
  }
  
  .benefit-icon-wrapper {
    width: 50px;
    height: 50px;
  }
  
  .benefit-icon-wrapper i {
    font-size: 1.25rem;
  }
}

/* Small Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .product-testimonials {
    padding: 2.5rem 0;
  }
  
  .testimonial-image-wrapper {
    height: 200px;
  }
  
  .testimonial-machine-name {
    font-size: var(--font-size-base);
  }
  
  .product-benefit-card {
    padding: 1.25rem;
  }
  
  .benefit-card-title {
    font-size: var(--font-size-lg);
  }
}

/* Mobile (< 576px) */
@media (max-width: 575px) {
  .product-testimonials {
    padding: 2rem 0;
  }
  
  .testimonial-image-wrapper {
    height: 180px;
  }
  
  .testimonial-overlay {
    padding: 1.5rem 1rem 1rem;
  }
  
  .testimonial-machine-name {
    font-size: var(--font-size-sm);
  }
  
  .testimonial-location {
    font-size: var(--font-size-xs);
  }
  
  .product-benefit-card {
    padding: 1rem;
  }
  
  .benefit-icon-wrapper {
    width: 45px;
    height: 45px;
  }
  
  .benefit-icon-wrapper i {
    font-size: 1.125rem;
  }
  
  .benefit-card-title {
    font-size: var(--font-size-base);
  }
  
  .benefit-card-list li {
    font-size: var(--font-size-sm);
  }
}

/* ========================================
   Video-Text Sync Responsive Styles
   视频文本同步响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .video-text-sync-section {
    padding: 3rem 0;
  }
  
  .process-text-container {
    height: 500px;
    padding: 1.5rem;
  }
  
  .process-text-item {
    padding: 1.5rem;
  }
  
  .step-heading {
    font-size: var(--font-size-xl);
  }
  
  .video-player-wrapper {
    position: static;
    padding: 1.5rem;
  }
  
  .production-video {
    min-height: 350px;
  }
}

/* Small Tablet & Mobile (< 992px) */
@media (max-width: 991px) {
  .video-text-sync-section .row {
    flex-direction: column-reverse;
  }
  
  .video-player-wrapper {
    margin-bottom: 2rem;
  }
}

/* Small Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .video-text-sync-section {
    padding: 2.5rem 0;
  }
  
  .process-text-container {
    height: 400px;
    padding: 1rem;
  }
  
  .process-text-item {
    padding: 1rem;
  }
  
  .step-heading {
    font-size: var(--font-size-lg);
  }
  
  .step-description {
    font-size: var(--font-size-sm);
  }
  
  .production-video {
    min-height: 300px;
  }
  
  .video-progress-indicator {
    bottom: 50px;
    padding: 0.75rem 1rem;
  }
  
  .step-name {
    font-size: var(--font-size-base);
  }
}

/* Mobile (< 576px) */
@media (max-width: 575px) {
  .video-text-sync-section {
    padding: 2rem 0;
  }
  
  .process-text-container {
    height: 350px;
    padding: 1rem;
  }
  
  .process-text-item {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .step-badge {
    font-size: 0.75rem;
    padding: 0.375rem 1rem;
  }
  
  .step-heading {
    font-size: var(--font-size-base);
  }
  
  .step-description {
    font-size: var(--font-size-sm);
  }
  
  .step-features li {
    font-size: var(--font-size-sm);
    padding-left: 1.5rem;
  }
  
  .video-player-wrapper {
    padding: 1rem;
  }
  
  .production-video {
    min-height: 250px;
  }
  
  .video-progress-indicator {
    bottom: 45px;
    left: 10px;
    right: 10px;
    padding: 0.5rem 0.75rem;
  }
  
  .current-step-display {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }
  
  .step-number {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }
  
  .step-name {
    font-size: var(--font-size-sm);
  }
  
  .video-timeline-markers {
    gap: 0.375rem;
  }
  
  .timeline-marker {
    font-size: 0.75rem;
    padding: 0.375rem 0.75rem;
  }
}

/* ========================================
   Product Catalog Responsive Styles
   产品目录响应式样式
   ======================================== */

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
  .product-catalog-section {
    padding: 3rem 0;
  }
  
  .category-tab {
    min-width: 150px;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
  }
  
  .product-video {
    min-height: 350px;
  }
  
  .main-image {
    height: 350px;
  }
}

/* Small Tablet (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
  .product-catalog-section {
    padding: 2.5rem 0;
  }
  
  .category-tab {
    min-width: 120px;
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
  }
  
  .category-tab span {
    display: none;
  }
  
  .category-tab i {
    font-size: 1.5rem;
  }
  
  .product-video {
    min-height: 300px;
  }
  
  .main-image {
    height: 300px;
  }
  
  .product-name {
    font-size: var(--font-size-2xl);
  }
}

/* Mobile (< 576px) */
@media (max-width: 575px) {
  .product-catalog-section {
    padding: 2rem 0;
  }
  
  .category-tabs-wrapper {
    padding: 1rem;
  }
  
  .category-tabs {
    gap: 0.5rem;
  }
  
  .category-tab {
    min-width: 70px;
    padding: 0.75rem 0.5rem;
    flex-direction: column;
    gap: 0.25rem;
  }
  
  .category-tab span {
    font-size: 0.625rem;
    text-align: center;
  }
  
  .category-tab i {
    font-size: 1.25rem;
  }
  
  .model-list-container {
    padding: 1rem;
    margin-bottom: 1rem;
  }
  
  .model-item {
    padding: 0.75rem;
    font-size: var(--font-size-sm);
  }
  
  .product-details-container {
    padding: 1rem;
  }
  
  .media-tab {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-sm);
  }
  
  .product-video {
    min-height: 250px;
  }
  
  .main-image {
    height: 250px;
  }
  
  .thumbnail-item {
    width: 70px;
    height: 70px;
  }
  
  .product-name {
    font-size: var(--font-size-xl);
  }
  
  .product-description {
    font-size: var(--font-size-sm);
  }
  
  .specifications-table .table th,
  .specifications-table .table td {
    padding: 0.75rem 0.5rem;
    font-size: var(--font-size-sm);
  }
}


/* ========================================
   FAQ Section Responsive
   常见问题模块响应式
   ======================================== */

@media (max-width: 991px) {
  .faq-section {
    padding: 3rem 0;
  }
  
  .faq-toc {
    padding: 2rem;
  }
  
  .faq-toc-title {
    font-size: var(--font-size-xl);
  }
  
  .faq-content {
    padding: 2rem;
  }
  
  .faq-question h4 {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 767px) {
  .faq-section {
    padding: 2rem 0;
  }
  
  .faq-toc {
    padding: 1.5rem;
  }
  
  .faq-toc-title {
    font-size: var(--font-size-lg);
  }
  
  .faq-toc-link {
    padding: 0.75rem 1rem;
    font-size: var(--font-size-sm);
  }
  
  .faq-toc-number {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
  }
  
  .faq-content {
    padding: 1.5rem;
  }
  
  .faq-item {
    padding: 1.5rem 0;
  }
  
  .faq-q-badge,
  .faq-a-badge {
    width: 40px;
    height: 40px;
    font-size: var(--font-size-sm);
  }
  
  .faq-question h4 {
    font-size: var(--font-size-base);
  }
  
  .faq-answer-content {
    font-size: var(--font-size-sm);
  }
}

@media (max-width: 575px) {
  .faq-toc {
    padding: 1rem;
  }
  
  .faq-toc-link {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .faq-content {
    padding: 1rem;
  }
  
  .faq-cta .p-5 {
    padding: 2rem !important;
  }
}


/* ========================================
   Product Detail Intro Responsive
   产品详情简介响应式
   ======================================== */

@media (max-width: 991px) {
  .product-detail-intro {
    padding: 3rem 0;
  }
  
  .product-video-container {
    position: relative;
    top: 0;
    margin-bottom: 3rem;
  }
  
  .product-title {
    font-size: var(--font-size-3xl);
  }
  
  .product-info-detail {
    padding: 2rem;
  }
  
  .product-quick-specs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .product-detail-intro {
    padding: 2rem 0;
  }
  
  .product-badge {
    top: 1rem;
    right: 1rem;
  }
  
  .badge-new,
  .badge-hot {
    padding: 0.375rem 0.75rem;
    font-size: 0.625rem;
  }
  
  .product-detail-video {
    max-height: 350px;
  }
  
  .product-info-detail {
    padding: 1.5rem;
  }
  
  .product-title {
    font-size: var(--font-size-2xl);
  }
  
  .product-short-desc p {
    font-size: var(--font-size-base);
  }
  
  .product-actions {
    flex-direction: column;
  }
  
  .product-actions .btn {
    width: 100%;
    min-width: auto;
  }
}

@media (max-width: 575px) {
  .product-quick-specs {
    padding: 1rem;
  }
  
  .spec-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
}


/* ========================================
   Product Detail Content Responsive
   产品详细内容响应式
   ======================================== */

/* Hide detail navigation on screens <= 1200px */
@media (max-width: 1200px) {
  .detail-nav-wrapper {
    display: none;
  }
  
  .detail-content-wrapper {
    padding-top: 2rem;
  }
  
  .detail-section {
    scroll-margin-top: 100px;
  }
}

/* Tablet adjustments */
@media (max-width: 991px) {
  .detail-section {
    padding: 2rem 0;
  }
  
  .detail-section-title {
    font-size: var(--font-size-2xl);
  }
  
  .feature-card {
    padding: 1.5rem;
  }
  
  .tech-label,
  .tech-value {
    padding: 1rem 1.5rem;
  }
  
  .advantage-item {
    padding: 1.5rem;
  }
  
  .gallery-image {
    height: 250px;
  }
  
  .inquiry-form-wrapper {
    padding: 2rem;
  }
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .detail-section {
    padding: 1.5rem 0;
  }
  
  .detail-section-title {
    font-size: var(--font-size-xl);
    margin-bottom: 1.5rem;
  }
  
  .feature-card {
    padding: 1.25rem;
  }
  
  .feature-icon {
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }
  
  .feature-title {
    font-size: var(--font-size-lg);
  }
  
  .tech-label {
    width: 50%;
    font-size: var(--font-size-sm);
  }
  
  .tech-label,
  .tech-value {
    padding: 0.875rem 1rem;
  }
  
  .advantage-item {
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
  }
  
  .advantage-number {
    width: 50px;
    height: 50px;
    font-size: var(--font-size-xl);
  }
  
  .advantage-title {
    font-size: var(--font-size-lg);
  }
  
  .gallery-image {
    height: 200px;
  }
  
  .inquiry-form-wrapper {
    padding: 1.5rem;
  }
}


/* ========================================
   Product List Page Responsive
   产品列表页面响应式
   ======================================== */

@media (max-width: 991px) {
  .category-list-top {
    padding: 2rem 0;
  }
  
  .category-intro {
    margin-bottom: 2rem;
  }
  
  .category-title {
    font-size: var(--font-size-3xl);
  }
  
  .category-description {
    font-size: var(--font-size-base);
  }
  
  .category-sidebar {
    position: static;
    margin-bottom: 2rem;
  }
  
  .product-list-header {
    flex-direction: column;
    gap: 1rem;
    align-items: flex-start;
  }
  
  .sort-options {
    width: 100%;
  }
  
  .sort-options .form-select {
    flex: 1;
  }
}

@media (max-width: 767px) {
  .category-list-top {
    padding: 1.5rem 0;
  }
  
  .category-intro {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  .category-title {
    font-size: var(--font-size-2xl);
  }
  
  .category-sidebar {
    padding: 1.25rem;
  }
  
  .sidebar-title {
    font-size: var(--font-size-lg);
  }
  
  .category-nav-link {
    padding: 0.75rem 0.875rem;
    font-size: var(--font-size-sm);
  }
  
  .product-list-header {
    padding: 1rem;
  }
  
  .product-list-image {
    height: 180px;
  }
  
  .product-list-body {
    padding: 1.25rem;
  }
  
  .product-list-title {
    font-size: var(--font-size-lg);
  }
  
  .product-pagination {
    margin-top: 2rem;
  }
  
  .page-link {
    padding: 0.5rem 0.75rem;
    font-size: var(--font-size-sm);
  }
}


/* ========================================
   Case List Page Responsive
   案例列表页面响应式
   ======================================== */

@media (max-width: 991px) {
  .case-main {
    padding: 2rem 0;
  }
  
  .case-content {
    padding: 1.5rem;
  }
  
  .case-title {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 767px) {
  .case-main {
    padding: 1.5rem 0;
  }
  
  .case-content {
    padding: 1.25rem;
  }
  
  .case-title {
    font-size: var(--font-size-base);
  }
  
  .case-description {
    font-size: var(--font-size-sm);
  }
  
  .case-highlights {
    padding: 1rem;
  }
  
  .case-country-badge {
    top: 1rem;
    left: 1rem;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
  }
}


/* ========================================
   Customer Feedback Responsive
   ======================================== */
@media (max-width: 991px) {
  .custom-feedback {
    padding: 3rem 0;
  }
  
  .feedback-title {
    font-size: var(--font-size-2xl);
  }
  
  .feedback-image-wrapper {
    height: 160px;
  }
}

@media (max-width: 767px) {
  .custom-feedback {
    padding: 2rem 0;
  }
  
  .feedback-title {
    font-size: var(--font-size-xl);
  }
  
  .feedback-subtitle {
    font-size: var(--font-size-xs);
  }
  
  .feedback-image-wrapper {
    height: 200px;
  }
  
  .feedback-customer-name {
    font-size: var(--font-size-sm);
  }
}


/* ========================================
   Single Case Detail Responsive
   ======================================== */
@media (max-width: 1199px) {
  .case-sidebar {
    position: static;
    margin-top: 2rem;
  }
}

@media (max-width: 991px) {
  .single-case-detail {
    padding: 2rem 0;
  }
  
  .case-article {
    padding: 2rem;
  }
  
  .case-article-title {
    font-size: var(--font-size-2xl);
  }
  
  .case-performance-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .case-article {
    padding: 1.5rem;
  }
  
  .case-article-title {
    font-size: var(--font-size-xl);
  }
  
  .case-article-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .case-share {
    width: 100%;
  }
  
  .case-share-buttons {
    flex-wrap: wrap;
  }
  
  .case-section-title {
    font-size: var(--font-size-xl);
  }
  
  .case-performance-grid {
    grid-template-columns: 1fr;
  }
  
  .case-toc-list {
    font-size: var(--font-size-sm);
  }
}


/* ========================================
   News List Responsive
   ======================================== */
@media (max-width: 991px) {
  .news-list {
    padding: 2rem 0;
  }
  
  .news-content {
    padding: 1.25rem 0 1.25rem 1.5rem;
  }
  
  .news-title {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 767px) {
  .news-list {
    padding: 1.5rem 0;
  }
  
  .news-item {
    margin-bottom: 1.5rem;
    padding-bottom: 1.5rem;
  }
  
  .news-thumbnail {
    margin-right: 0;
    margin-bottom: 1rem;
  }
  
  .news-content {
    padding: 0;
  }
  
  .news-title {
    font-size: var(--font-size-base);
  }
  
  .news-meta {
    gap: 1rem;
  }
  
  .news-excerpt {
    font-size: var(--font-size-sm);
  }
}


/* ========================================
   Page Service Responsive
   ======================================== */
@media (max-width: 1199px) {
  .service-timeline-track {
    top: 70px;
  }
  
  .service-timeline-icon {
    width: 70px;
    height: 70px;
  }
  
  .service-timeline-icon i {
    font-size: 1.75rem;
  }
  
  .service-timeline-content {
    padding: 1.5rem;
  }
}

@media (max-width: 991px) {
  .page-service {
    padding: 3rem 0;
  }
  
  .service-timeline {
    padding: 2rem 0;
  }
  
  .service-timeline-track {
    display: none;
  }
  
  .service-timeline .row {
    flex-direction: column;
  }
  
  .service-timeline-item {
    margin-bottom: 2rem;
  }
  
  .service-timeline-marker {
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 1rem;
  }
  
  .service-timeline-icon {
    width: 60px;
    height: 60px;
    margin-bottom: 0;
    margin-right: 1rem;
  }
  
  .service-timeline-icon i {
    font-size: 1.5rem;
  }
  
  .service-timeline-content {
    text-align: left;
  }
  
  .service-cta {
    padding: 2rem;
  }
}

@media (max-width: 767px) {
  .page-service {
    padding: 2rem 0;
  }
  
  .service-main-title {
    font-size: var(--font-size-2xl);
  }
  
  .service-subtitle {
    font-size: var(--font-size-base);
  }
  
  .service-timeline-icon {
    width: 50px;
    height: 50px;
  }
  
  .service-timeline-icon i {
    font-size: 1.25rem;
  }
  
  .service-timeline-content {
    padding: 1.25rem;
  }
  
  .service-title {
    font-size: var(--font-size-base);
  }
  
  .service-description {
    font-size: var(--font-size-xs);
  }
  
  .service-card {
    padding: 1.5rem;
  }
  
  .service-card-icon {
    width: 60px;
    height: 60px;
  }
  
  .service-card-icon i {
    font-size: 1.5rem;
  }
  
  .service-cta {
    padding: 1.5rem;
    text-align: center;
  }
  
  .service-cta-title {
    font-size: var(--font-size-xl);
  }
  
  .service-cta-text {
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
  }
}


/* ========================================
   Page About Detail Responsive
   ======================================== */
@media (max-width: 1199px) {
  .timeline-line {
    top: 55px;
  }
  
  .timeline-year {
    width: 70px;
    height: 70px;
    font-size: var(--font-size-base);
  }
}

@media (max-width: 991px) {
  .page-about-detail {
    padding: 2rem 0;
  }
  
  .about-intro,
  .about-timeline,
  .about-values,
  .about-advantages,
  .about-team {
    margin-bottom: 3rem;
  }
  
  .about-section-title {
    font-size: var(--font-size-2xl);
  }
  
  .about-intro-title {
    font-size: var(--font-size-2xl);
  }
  
  .about-intro-badge {
    bottom: 1rem;
    right: 1rem;
    padding: 1rem;
    min-width: 100px;
  }
  
  .about-badge-number {
    font-size: var(--font-size-2xl);
  }
  
  .timeline-line {
    display: none;
  }
  
  .timeline-item {
    margin-bottom: 2rem;
  }
  
  .team-image {
    height: 220px;
  }
  
  .about-cta {
    padding: 2rem;
  }
}

@media (max-width: 767px) {
  .about-intro-badge {
    position: static;
    margin-top: 1rem;
  }
  
  .about-intro-stats {
    gap: 1rem;
    justify-content: space-around;
  }
  
  .about-stat-number {
    font-size: var(--font-size-2xl);
  }
  
  .timeline-year {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-sm);
  }
  
  .timeline-content {
    padding: 1rem;
  }
  
  .value-card {
    padding: 1.5rem;
  }
  
  .value-icon {
    width: 60px;
    height: 60px;
  }
  
  .value-icon i {
    font-size: 1.5rem;
  }
  
  .team-image {
    height: 200px;
  }
  
  .about-cta {
    padding: 1.5rem;
    text-align: center;
  }
  
  .about-cta-title {
    font-size: var(--font-size-xl);
  }
  
  .about-cta-text {
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
  }
}


/* ========================================
   Page FAQ Responsive
   ======================================== */
@media (max-width: 991px) {
  .page-common-faq {
    padding: 3rem 0;
  }
  
  .faq-main-title {
    font-size: var(--font-size-2xl);
  }
  
  .faq-cta {
    padding: 2rem;
  }
}

@media (max-width: 767px) {
  .page-common-faq {
    padding: 2rem 0;
  }
  
  .faq-main-title {
    font-size: var(--font-size-xl);
  }
  
  .faq-subtitle {
    font-size: var(--font-size-sm);
  }
  
  .faq-question {
    padding: 1rem;
  }
  
  .faq-question-text {
    font-size: var(--font-size-base);
  }
  
  .faq-answer p {
    font-size: var(--font-size-sm);
    padding: 0 1rem 1rem;
  }
  
  .faq-cta {
    padding: 1.5rem;
    text-align: center;
  }
  
  .faq-cta-title {
    font-size: var(--font-size-xl);
  }
  
  .faq-cta-text {
    font-size: var(--font-size-sm);
    margin-bottom: 1.5rem;
  }
}


/* ========================================
   Single News Detail Responsive
   ======================================== */
@media (max-width: 1199px) {
  .news-sidebar {
    position: static;
    margin-top: 2rem;
  }
}

@media (max-width: 991px) {
  .single-news-detail {
    padding: 2rem 0;
  }
  
  .news-article {
    padding: 2rem;
  }
  
  .news-article-title {
    font-size: var(--font-size-2xl);
  }
  
  .news-article-content h2 {
    font-size: var(--font-size-xl);
  }
  
  .news-navigation {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .news-article {
    padding: 1.5rem;
  }
  
  .news-article-title {
    font-size: var(--font-size-xl);
  }
  
  .news-article-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .news-share {
    width: 100%;
  }
  
  .news-share-buttons {
    flex-wrap: wrap;
  }
  
  .news-article-content h2 {
    font-size: var(--font-size-lg);
  }
  
  .news-nav-item {
    padding: 1rem;
  }
  
  .news-nav-title {
    font-size: var(--font-size-sm);
  }
}


/* ========================================
   Page Contact Detail Responsive
   ======================================== */
@media (max-width: 991px) {
  .page-contact-detail {
    padding: 3rem 0;
  }
  
  .contact-main-title {
    font-size: var(--font-size-2xl);
  }
  
  .contact-info-wrapper {
    padding: 2rem;
    margin-bottom: 2rem;
  }
  
  .contact-form-wrapper {
    padding: 2rem;
  }
  
  .contact-map {
    margin-top: 3rem;
  }
}

@media (max-width: 767px) {
  .page-contact-detail {
    padding: 2rem 0;
  }
  
  .contact-main-title {
    font-size: var(--font-size-xl);
  }
  
  .contact-subtitle {
    font-size: var(--font-size-sm);
  }
  
  .contact-info-wrapper {
    padding: 1.5rem;
  }
  
  .contact-info-title {
    font-size: var(--font-size-xl);
  }
  
  .contact-info-list {
    gap: 1.5rem;
  }
  
  .contact-info-icon {
    width: 40px;
    height: 40px;
  }
  
  .contact-info-icon i {
    font-size: 1.25rem;
  }
  
  .contact-social-links {
    gap: 0.75rem;
  }
  
  .contact-social-link {
    width: 40px;
    height: 40px;
  }
  
  .contact-social-link i {
    font-size: 1rem;
  }
  
  .contact-form-wrapper {
    padding: 1.5rem;
  }
  
  .contact-map h3 {
    font-size: var(--font-size-xl);
  }
  
  .contact-map-wrapper iframe {
    height: 300px;
  }
}