/* Mobile Spacing Fix - Specific file to handle mobile banner and content spacing */

/* High specificity selectors for mobile devices */
@media (max-width: 991px) {
  div.th-hero-wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  section.choose-area5.space.space-extra {
    --section-space-mobile: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
  }
  
  div.th-hero-wrapper + section.choose-area5.space.space-extra {
    margin-top: 0 !important;
  }
}

/* 最高优先级的覆盖样式 - 针对移动端banner区域 */
@media (max-width: 767.98px) {
  /* 强制覆盖所有可能影响高度的样式 */
  body div.th-hero-wrapper,
  body .th-hero-wrapper,
  .th-hero-wrapper {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  
  /* 主要目标：强制设置hero-inner的尺寸 - 修复为自适应宽度 */
  body div.hero-inner,
  body .hero-inner,
  .hero-inner {
    height: 192px !important; /* 强制设置为192px高度 */
    width: 100% !important; /* 改为100%宽度以自适应屏幕 */
    min-width: 390px !important; /* 最小宽度保持390px */
    max-width: 100% !important; /* 最大宽度为100% */
    min-height: 192px !important;
    max-height: 192px !important;
    margin: 0 auto !important; /* 居中对齐 */
    padding: 0 !important;
    position: relative !important; /* 改变定位方式以覆盖绝对定位 */
  }
  
  /* 特别针对内联样式的img元素 - 使用cover模式防止白边 */
  body div.hero-inner img[style*="height: 100%"],
  body .hero-inner img[style*="height: 100%"],
  .hero-inner img[style*="height: 100%"] {
    height: 100% !important;
    max-height: 192px !important; /* 限制图片最大高度 */
    object-fit: cover !important; /* 使用cover模式确保填充整个容器，防止白边 */
    width: 100% !important; /* 确保图片宽度也是100% */
    position: absolute !important; /* 保持绝对定位以覆盖整个容器 */
  }
  
  /* 调整内部元素的间距 */
  body .hero-inner .container,
  .hero-inner .container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  body .hero-inner .row,
  .hero-inner .row {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }
  
  body .hero-inner .col-lg-6,
  body .hero-inner .col-xxl-6,
  body .hero-inner .col-xl-5,
  body .hero-inner .col-lg-5,
  .hero-inner .col-lg-6,
  .hero-inner .col-xxl-6,
  .hero-inner .col-xl-5,
  .hero-inner .col-lg-5 {
    margin: 0 !important;
    padding: 0 !important;
    height: 100% !important;
  }
  
  /* 确保轮播相关的样式也被覆盖 */
  .th-hero-wrapper .hero-inner,
  .th-slider .hero-inner,
  .swiper-slide .hero-inner {
    height: 192px !important;
    width: 100% !important; /* 改为100%宽度以自适应屏幕 */
    min-width: 390px !important; /* 最小宽度保持390px */
    max-width: 100% !important; /* 最大宽度为100% */
    min-height: 192px !important;
    max-height: 192px !important;
  }
  
  /* 覆盖原始的100vh和600px最小高度 */
  .hero-inner[style*="height: 100vh"],
  .hero-inner[style*="min-height: 600px"],
  .hero-inner[style*="height: 500px"],
  .hero-inner[style*="min-height: 400px"] {
    height: 192px !important;
    width: 100% !important; /* 改为100%宽度以自适应屏幕 */
    min-width: 390px !important; /* 最小宽度保持390px */
    max-width: 100% !important; /* 最大宽度为100% */
    min-height: 192px !important;
    max-height: 192px !important;
  }
  
  /* 针对Swiper轮播的具体样式 */
  .swiper .hero-inner,
  .th-slider .hero-inner,
  .swiper-slide .hero-inner {
    height: 192px !important;
    width: 100% !important; /* 改为100%宽度以自适应屏幕 */
    min-width: 390px !important; /* 最小宽度保持390px */
    max-width: 100% !important; /* 最大宽度为100% */
    max-height: 192px !important;
  }
  
  /* 关键修改：进一步缩小Product Series标题与banner之间的间距 */
  section.choose-area5.space.space-extra {
    --section-space-mobile: 0px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* 直接针对Product Series标题区域进行间距调整 */
  .choose-area5 .title-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
    margin-bottom: 0 !important; /* 进一步缩小底部间距 */
  }
  
  /* 调整标题本身的边距 */
  .choose-area5 .title-area h2.sec-title,
  .choose-area5 .title-area .sub-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* 确保两部分紧贴 */
  body div.th-hero-wrapper + section.choose-area5.space.space-extra,
  .th-hero-wrapper + section.choose-area5.space.space-extra {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* Additional specific selectors */
  body .th-hero-wrapper,
  body .choose-area5.space.space-extra,
  .th-hero-wrapper,
  .choose-area5.space.space-extra {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Override any remaining spacing */
  body .th-hero-wrapper *,
  body .choose-area5.space.space-extra *,
  .th-hero-wrapper *,
  .choose-area5.space.space-extra * {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Target the specific section containing "Product Series" */
  body .choose-area5 .title-area h2.sec-title,
  body .choose-area5 .title-area .sub-title,
  .choose-area5 .title-area h2.sec-title,
  .choose-area5 .title-area .sub-title {
    margin-top: 0 !important;
  }
}

/* Extra specificity to ensure override */
@media (max-width: 767px) {
  body div.th-hero-wrapper,
  body section.choose-area5.space.space-extra,
  .th-hero-wrapper,
  section.choose-area5.space.space-extra {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body div.hero-inner,
  .hero-inner {
    height: 192px !important; /* 精确设置为192px高度 */
    width: 100% !important; /* 改为100%宽度以自适应屏幕 */
    min-width: 390px !important; /* 最小宽度保持390px */
    max-width: 100% !important; /* 最大宽度为100% */
    min-height: 192px !important;
    max-height: 192px !important;
  }
  
  /* 缩小banner和Product Series之间的间距 */
  body div.th-hero-wrapper + section.choose-area5.space.space-extra,
  .th-hero-wrapper + section.choose-area5.space.space-extra {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  /* 特别针对Product Series标题区域 */
  body .choose-area5 .title-area,
  .choose-area5 .title-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* 最高优先级的覆盖样式 */
@media (max-width: 575.98px) {
  body div.hero-inner,
  .hero-inner {
    height: 192px !important; /* 针对小屏幕保持192px高度 */
    width: 100% !important; /* 改为100%宽度以自适应屏幕 */
    min-width: 390px !important; /* 最小宽度保持390px */
    max-width: 100% !important; /* 最大宽度为100% */
    min-height: 192px !important;
    max-height: 192px !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }
  
  body .hero-inner .hero-style14,
  .hero-inner .hero-style14 {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  body .th-hero-wrapper,
  .th-hero-wrapper {
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* 最小化banner和Product Series之间的间距 */
  body .choose-area5.space.space-extra,
  .choose-area5.space.space-extra {
    margin-top: 0 !important;
    padding-top: 0 !important;
    --section-space-mobile: 0px !important;
  }
  
  /* 针对Product Series标题的特殊处理 */
  body .choose-area5 .title-area,
  .choose-area5 .title-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  
  body .choose-area5 .title-area h2.sec-title,
  .choose-area5 .title-area h2.sec-title {
    margin-top: 0 !important;
  }
  
  /* 最终确保没有额外间距 */
  body .th-hero-wrapper,
  body .th-hero-wrapper *,
  body .hero-inner,
  body .hero-inner *,
  .th-hero-wrapper,
  .th-hero-wrapper *,
  .hero-inner,
  .hero-inner * {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
}

/* 使用ID选择器增加特异性 */
@media (max-width: 767.98px) {
  #hero .hero-inner,
  .th-hero-wrapper .hero-inner {
    height: 192px !important;
    width: 100% !important; /* 改为100%宽度以自适应屏幕 */
    min-width: 390px !important; /* 最小宽度保持390px */
    max-width: 100% !important; /* 最大宽度为100% */
    min-height: 192px !important;
    max-height: 192px !important;
  }
  
  /* 特别针对两个区域间的连接 */
  #hero + .choose-area5,
  .th-hero-wrapper + .choose-area5 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* 针对390×192区域的特殊调整 - 修正为调整文字上方间距 */
@media (max-width: 767.98px) {
  /* 直接针对Product Series标题区域的容器 */
  .choose-area5 .title-area {
    margin-top: -4px !important; /* 调整文字上方间距 */
    padding-top: 0 !important;
    margin-bottom: 0 !important;
  }
  
  /* 针对包含标题的div元素 */
  .choose-area5 .title-area h2.sec-title,
  .choose-area5 .title-area .sub-title {
    margin-top: -4px !important; /* 标题本身也向上移动 */
    margin-bottom: 0 !important;
  }
  
  /* 针对整个section的调整 */
  section.choose-area5.space.space-extra {
    margin-top: -4px !important; /* 整个section向上移动 */
    padding-top: 0 !important;
    --section-space-mobile: 0px !important;
  }
}

/* 最终极的间距缩小方案 - 针对极端情况 */
@media (max-width: 767.98px) {
  /* 绝对确保无间距 */
  .th-hero-wrapper,
  #hero {
    margin-bottom: -2px !important; /* 负边距进一步缩小间距，现在是-2px */
  }
  
  .choose-area5.space.space-extra {
    margin-top: -2px !important; /* 负边距抵消可能的间距，现在是-2px */
    padding-top: 0 !important;
  }
  
  /* 针对可能的默认section间距 */
  .th-hero-wrapper + .choose-area5 {
    margin-top: -2px !important; /* 间距再缩小一半 */
  }
  
  /* 确保标题区域紧贴上方内容 */
  .choose-area5 .title-area {
    margin-top: -2px !important; /* 间距再缩小一半 */
    padding-top: 0 !important;
  }
}

/* 最终极的间距缩小方案 - 针对极端情况 */
@media (max-width: 767.98px) {
  /* 绝对确保无间距 */
  .th-hero-wrapper,
  #hero {
    margin-bottom: -2px !important; /* 负边距进一步缩小间距，现在是-2px */
  }
  
  .choose-area5.space.space-extra {
    margin-top: -2px !important; /* 负边距抵消可能的间距，现在是-2px */
    padding-top: 0 !important;
  }
  
  /* 针对可能的默认section间距 */
  .th-hero-wrapper + .choose-area5 {
    margin-top: -2px !important; /* 间距再缩小一半 */
  }
  
  /* 确保标题区域紧贴上方内容 */
  .choose-area5 .title-area {
    margin-top: -2px !important; /* 间距再缩小一半 */
    padding-top: 0 !important;
  }
}

/* Banner图片缩放修复 - 解决不同屏幕尺寸下白边问题 */
@media (max-width: 767.98px) {
  /* 针对hero-inner内的图片，使用cover来填充整个容器 */
  .hero-inner img[style*="object-fit: cover"] {
    object-fit: cover !important; /* 改为cover以确保填充整个容器 */
    width: 100% !important;
    height: 100% !important; /* 让高度占满容器 */
    object-position: center !important; /* 居中对齐 */
  }
  
  /* 确保图片容器适应内容 */
  .hero-inner {
    position: relative !important;
    overflow: hidden !important; /* 防止图片溢出 */
    display: flex !important; /* 使用flex布局确保内容居中 */
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* 针对使用内联样式的图片元素 */
  .hero-inner img[style*="width: 100%"][style*="height: 100%"][style*="object-fit: cover"] {
    object-fit: cover !important; /* 强制使用cover模式 */
    background-color: transparent !important; /* 确保背景透明 */
    width: 100% !important;
    height: 100% !important;
  }
  
  /* 针对不同屏幕尺寸优化 */
  .th-hero-wrapper {
    min-height: 250px !important; /* 设置合理的最小高度 */
    height: auto !important;
  }
  
  .hero-inner {
    min-height: 250px !important;
    height: auto !important;
    width: 100% !important;
  }
  
  /* 确保图片在容器中正确显示 */
  .hero-inner img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* 使用cover填充整个容器 */
    position: absolute !important; /* 使用绝对定位填充容器 */
    top: 0 !important;
    left: 0 !important;
  }
  
  /* 针对特定的轮播图样式 */
  .swiper-slide .hero-inner img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }
}

/* 针对400px以上屏幕尺寸的优化 - 使用cover模式但确保关键内容可见 */
@media (min-width: 400px) and (max-width: 767.98px) {
  .hero-inner {
    min-height: 280px !important;
    height: auto !important;
    overflow: hidden !important; /* 确保超出部分被隐藏 */
  }
  
  /* 使用最高特异性的选择器来覆盖内联样式 */
  .th-hero-wrapper .hero-inner img[style*="object-fit: cover"],
  .th-hero-wrapper .hero-inner img[style*="object-fit: contain"],
  .th-hero-wrapper .hero-inner img[style*="width: 100%"] {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    object-position: center !important;
    max-height: none !important;
  }
  
  /* 针对Swiper幻灯片中的图片 */
  .swiper-slide .hero-inner img[style*="object-fit: cover"],
  .swiper-slide .hero-inner img[style*="object-fit: contain"],
  .swiper-slide .hero-inner img[style*="width: 100%"] {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    object-position: center !important;
  }
  
  /* 针对所有英雄区域图片 */
  .hero-inner img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    object-position: center !important;
  }
  
  /* 确保图片完全填充容器 */
  .hero-inner img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/* 针对iPad及平板设备的优化 */
@media (min-width: 768px) and (max-width: 1024px) {
  .th-hero-wrapper {
    height: auto !important;
    min-height: 350px !important;
  }
  
  .hero-inner {
    height: auto !important;
    min-height: 350px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .hero-inner img {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
  }
  
  /* 确保图片在平板设备上居中显示 */
  .hero-inner img[style*="position: absolute"] {
    position: absolute !important;
    object-fit: cover !important;
  }
}

/* 调整卡片标题字体大小 */
.category-card.single2 .box-title {
  font-size: 22px !important; /* 从默认的24px稍微减小 */
}

/* 确保第二行卡片也应用相同的字体大小 */
.category-slider3-index-second .category-card.single2 .box-title {
  font-size: 22px !important;
}

/* PC端AI和机器学习优势展示区域整体框架宽度调整 */
@media (min-width: 1200px) {
  .category-slider3-index,
  .category-slider3-index-second,
  #categorySlider3Index,
  #categorySlider3IndexSecond {
    max-width: 96%; /* 整体框架稍微缩小 */
    margin: 0 auto; /* 居中对齐 */
  }
  
  /* ABOUT US区域容器宽度调整 */
  .about-area .container {
    max-width: 1250px !important; /* 从1300px再缩小一点 */
    width: 88% !important; /* 从90%再缩小一点 */
  }
  
  /* ABOUT US标题换行与小字区域保持一致 */
  .about-area .sec-title {
    white-space: normal !important; /* 允许正常换行 */
    max-width: none !important; /* 移除最大宽度限制 */
    word-break: break-word !important; /* 在单词内换行以适应容器 */
  }
  
  /* 特别针对带有滚动动画的标题 */
  .about-area .scroll-text-ani {
    white-space: normal !important;
    display: block !important;
  }
}

/* Data Solutions Section Styles for index.html */

/* WhatsApp图标在圆圈内垂直居中修复 */
.call-btn.style2 .icon-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 56px !important; /* 保持固定高度确保居中效果 */
  line-height: normal !important; /* 移除line-height影响 */
}

/* 针对数据解决方案区域与上方区域间距的修复 */
.contact-area3 {
  margin-top: 60px !important; /* 原为100px，减少到60px */
}
.contact-area3 {
  margin-top: 100px;
  margin-bottom: 80px;
}

/* 修复数据解决方案区域的小标题显示问题 */
.contact8-titlebox .sub-title.text-white.text-anime-style-2 {
  display: block !important;
  font-size: 20px !important;
  color: white !important;
  margin-bottom: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .02em !important;
}

.contact-area3 .container {
  max-width: 100%;
  padding: 0 15px;
}

@media (min-width: 1200px) {
  .contact-area3 .container {
    max-width: 100%;
    width: 85%;
  }
  
  .contact-area3 .col-lg-6:first-child {
    padding-right: 30px;
  }
  
  .contact-area3 .col-lg-6:last-child {
    padding-left: 30px;
  }
}

.contact8-titlebox .sec-title {
  font-size: 36px;
  line-height: 1.3;
  margin-bottom: 30px;
}

@media (max-width: 991px) {
  .contact8-titlebox .sec-title {
    font-size: 28px;
  }
}

@media (max-width: 767px) {
  .contact8-titlebox .sec-title {
    font-size: 24px;
  }
  
  .contact-area3 {
    margin-top: 60px;
    margin-bottom: 60px;
  }
}

.contact-form2 .form-control,
.contact-form2 .form-select {
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #ced4da; /* 恢复Bootstrap默认的灰色边框 */
  color: #333;
}

.contact-form2 .form-control:focus,
.contact-form2 .form-select:focus {
  border-color: #0B59DB; /* 使用网页中其他地方的主蓝色 */
  box-shadow: none; /* 移除阴影效果，只保留细线边框 */
}

.contact-form2 .form-control::placeholder {
  color: #666;
}

.contact-info_link a {
  color: #0B59DB;
  font-weight: 600;
  text-decoration: none;
}



/* 在更大屏幕上保持相同缩放比例，而不是进一步缩小 */
@media (min-width: 1400px) {
  .category-slider3-index,
  .category-slider3-index-second,
  #categorySlider3Index,
  #categorySlider3IndexSecond {
    max-width: 96%; /* 保持与1200px屏幕相同的缩放比例 */
    margin: 0 auto;
  }
  
  /* ABOUT US区域在超大屏幕上宽度调整 */
  .about-area .container {
    max-width: 1450px !important; /* 从1500px再缩小一点 */
    width: 82% !important; /* 从85%再缩小一点 */
  }
  
  /* ABOUT US标题换行与小字区域保持一致 */
  .about-area .sec-title {
    white-space: normal !important; /* 允许正常换行 */
    max-width: none !important; /* 移除最大宽度限制 */
    word-break: break-word !important; /* 在单词内换行以适应容器 */
  }
  
  /* 特别针对带有滚动动画的标题 */
  .about-area .scroll-text-ani {
    white-space: normal !important;
    display: block !important;
  }
}