/* 自定义字体 */
      body {
        font-family: "Inter", sans-serif;
      }
      a {text-decoration: none;-ms-transition: all 0.5s;-webkit-transition: all 0.5s;transition: all 0.5s;}
dl, ol, ul {
    margin-top: 0;
    margin-bottom: 0;
}
dd {
  margin-bottom: 0;
  margin-left: 0;
}

      /* 自定义品牌颜色 - Bootstrap 默认颜色不够匹配 */
      :root {
        --primary-yellow: #fbbf24;
        --primary-orange: #f59e0b;
        --brand-blue: #003366;
        --footer-blue: #0a2540;
      }

      .text-brand-blue {
        color: var(--brand-blue);
      }
      .bg-brand-blue {
        background-color: var(--brand-blue);
      }
      .bg-footer-blue {
        background-color: var(--footer-blue);
      }

      .btn-primary-yellow {
        background-color: var(--primary-yellow);
        color: white;
        border: none;
        font-weight: bold;
        width: 260px;
        margin-left: 10%;
      }
      .btn-primary-yellow:hover {
        background-color: var(--primary-orange);
        color: white;
      }

      .btn-brand-blue {
        background-color: var(--brand-blue);
        color: white;
        font-weight: 500;
      }
      .btn-brand-blue:hover {
        background-color: #002244; /* Darker shade */
        color: white;
      }

      /* Hero 背景 */
      .hero-bg {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.3),
            rgba(0, 0, 0, 0.3)
          ),
          url("/static/images/industrial_use/banner.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        min-height: 720px;
      }
.hero-bg h1{width: 600px !important; text-align: left !important; margin-left: 10% !important; margin-top:30px;}
.hero-bg p{width: 650 !importantpx; padding-left: 10% !important; text-align: left !important;}
      /* 表单背景 */
      .form-bg {
        background-image: linear-gradient(
            rgba(0, 0, 0, 0.3),
            rgba(0, 0, 0, 0.3)
          ),
          url("/static/images/industrial_use/form.jpg");
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }

      /* 图片 Hover 放大效果 */
      .hover-scale img {
        transition: transform 0.3s ease;
      }
      .hover-scale:hover img {
        transform: scale(1.05);
      }

      /* 链接 Hover 效果 */
      .nav-link:hover,
      .footer-link:hover {
        color: var(--primary-orange) !important;
      }

      /* 复杂网格布局 CSS (Bootstrap Grid 难以直接实现跨行跨列) */
      .custom-grid-cases {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: .3rem;
      }
      @media (min-width: 768px) {
        .custom-grid-cases {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      .row-span-2 {
        grid-row: span 2;
      }
      .col-span-full {
        grid-column: 1 / -1;
      }

      /* 图片填充辅助类 */
      .img-cover {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      
      /* 1. 处理 Factory Display 的容器高度 */
.factory-grid-container {
    height: auto; /* 手机端：高度自动撑开，防止内容溢出 */
}

/* 2. 处理手机端图片的高度 */
/* 因为父容器高度变为 auto，内部的 h-50/h-100 会失效，我们需要给图片一个基础高度 */
@media (max-width: 767.98px) {
    .factory-grid-container .img-cover {
        height: 200px; /* 手机上每张图的高度，可根据需要调整 */
        width: 100%;
        object-fit: cover;
    }
    /* 修正手机端的间距 */
    .factory-grid-container .col-6, 
    .factory-grid-container .col-12 {
        margin-bottom: 0.25rem;
    }
}

/* 3. 桌面端 (md及以上)：恢复 500px 的马赛克布局 */
@media (min-width: 768px) {
    .factory-grid-container {
        height: 500px; /* 只有在大屏时才锁定高度 */
    }
    .factory-grid-container .img-cover {
        height: 100%; /* 桌面端图片跟随父容器高度 */
    }
}