/* Product Category & Detail Page Styles */

/* ==============================================
   Page Title / Banner Section (Detail Page)
   ============================================== */
.page-title.detail-banner {
  position: sticky;
  /* Sticky positioning */
  top: calc(500px - 100vh);
  /* Sticky effect: Scrolls until 500px visible, then sticks */
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f4f5f8;
  text-align: center;
  padding-top: 100px;
  /* Offset for fixed header */
  padding-bottom: 0;
  box-sizing: border-box;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  z-index: 1;
  /* Lower z-index so content slides over it */
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: center top;
}

/* 
   .shrunk class is removed/disabled as height change conflicts with sticky behavior.
   The sticky positioning achieves the visual "stop moving" effect.
*/


/* Ensure content slides over the fixed banner */
.product-detail-section {
  position: relative;
  z-index: 2;
  /* Higher z-index than banner */
  background-color: #fff;
  /* Opaque background to cover banner */
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Fix for Header Conflict on Detail Page */
/* Ensure header-lower is transparent when scrolled class is active, overriding fixed-header white bg */
.main-header.scrolled .header-lower {
  background: transparent !important;
  box-shadow: none !important;
}

/* Adjust text size/position when shrunk - DISABLED per user request "size unchanged" */
/* 
.page-title.detail-banner.shrunk h1 {
    font-size: 40px; 
    margin-bottom: 0;
}

.page-title.detail-banner.shrunk .bread-crumb {
    display: none; 
}
*/

.page-title.detail-banner::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* Overlay */
  z-index: 1;
}

.page-title.detail-banner .auto-container {
  position: relative;
  z-index: 6;
  width: 100%;
  /* Initial state: Centered in 100vh */
}

.page-title.detail-banner h1 {
  color: #fff;
  font-size: 64px;
  font-weight: 700;
  margin-bottom: 15px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  /* transition: opacity 0.5s ease; REMOVED for JS control */
}

.banner-h1-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ==============================================
   Secondary Title Animation
   ============================================== */
.secondary-title {
  /* opacity: 0;  Controlled by JS */
  /* transform: translateY(20px); Controlled by JS */
  /* transition: all 0.6s ease-out; REMOVED for JS control */
  visibility: hidden; 
  will-change: opacity, transform; /* Optimization */
}

/* Scroll Down Hint Styles */
.scroll-down-hint {
  position: absolute;
  bottom: 30px;
  /* Fixed at 100px from bottom */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  z-index: 10;
  /* Ensure it's above other elements */
  /* animation: fadeIn 1s ease-in-out 1s forwards; Removed for JS control */
}

.scroll-down-hint .mouse {
  width: 30px;
  height: 50px;
  border: 2px solid #fff;
  border-radius: 20px;
  position: relative;
  margin-bottom: 10px;
}

.scroll-down-hint .wheel {
  width: 4px;
  height: 8px;
  background: #fff;
  border-radius: 2px;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollWheel 2s infinite;
}

.scroll-down-hint .arrows {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.scroll-down-hint .arrows span {
  display: block;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  margin: -3px 0;
  animation: scrollArrow 2s infinite;
}

.scroll-down-hint .arrows .arrow-one {
  animation-delay: 0s;
}

.scroll-down-hint .arrows .arrow-two {
  animation-delay: 0.2s;
}

.scroll-down-hint .arrows .arrow-three {
  animation-delay: 0.4s;
}

@keyframes scrollWheel {
  0% {
    opacity: 1;
    top: 8px;
  }
  100% {
    opacity: 0;
    top: 25px;
  }
}

@keyframes scrollArrow {
  0% {
    opacity: 0;
    transform: rotate(45deg) translate(-5px, -5px);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: rotate(45deg) translate(5px, 5px);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 0.8; }
}


/* ==============================================
   Page Title (Default / Category Page)
   ============================================== */
/* Styles moved to components/page-title.css */

/* ==============================================
   Breadcrumbs
   ============================================== */
/* Styles moved to components/page-title.css */

/* ==============================================
   Swiper & Product Layout
   ============================================== */

.product-upper-box {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 60px;
}

/* Image Column Styles (Swiper) */
.shop-detail .inner-box {
  position: relative;
}

.shop-detail .image-box {
  position: relative;
  margin-bottom: 30px;
}

.shop-detail .image-box .image {
  position: relative;
  margin: 0;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.shop-detail .image-box .image img {
  width: 100%;
  display: block;
  transition: all 500ms ease;
}

.shop-detail .content-carousel {
  margin-bottom: 20px;
}

.shop-detail .thumbs-carousel {
  cursor: pointer;
}

.shop-detail .thumbs-carousel .swiper-slide {
  opacity: 0.5;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
}

.shop-detail .thumbs-carousel .swiper-slide-thumb-active {
  opacity: 1;
  border-color: #1a1e66;
}

.shop-detail .swiper-button-next,
.shop-detail .swiper-button-prev {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.shop-detail .swiper-button-next:after,
.shop-detail .swiper-button-prev:after {
  font-size: 16px;
  font-weight: 700;
}

.shop-detail .swiper-button-next:hover,
.shop-detail .swiper-button-prev:hover {
  background: #1a1e66;
}

/* Info Column Styles */
.product-info-box h2 {
  font-size: 36px;
  font-weight: 700;
  color: #1a1e66;
  margin-bottom: 15px;
}

.product-price {
  font-size: 24px;
  color: #337ab7;
  font-weight: 700;
  margin-bottom: 20px;
}

.product-desc {
  color: #666;
  line-height: 1.8;
  margin-bottom: 30px;
}

.product-meta {
  margin-bottom: 30px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 20px 0;
}

.product-meta li {
  list-style: none;
  margin-bottom: 10px;
  color: #666;
}

.product-meta li strong {
  color: #1a1e66;
  margin-right: 10px;
}

/* ==============================================
   Sliding Tabs
   ============================================== */
.product-tabs {
  margin-top: 0;
  overflow: hidden;
  /* Prevent overflow during slide */
}

.nav-tabs {
  /* border-bottom: 2px solid #eee; */
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  /* overflow-x: auto; */
  -webkit-overflow-scrolling: touch;
}

.nav-tabs .nav-link {
  border: none;
  border-bottom: 3px solid var(--border-light);
  color: #666;
  font-size: 18px;
  font-weight: 600;
  padding: 15px 25px;
  transition: all 0.3s ease;
  cursor: pointer;
  white-space: nowrap;
  background: transparent;
}

.nav-tabs .nav-link:hover {
  color: #1a1e66;
}

.nav-tabs .nav-link.active {
  color: #1a1e66;
  background: transparent;
  border-bottom: 3px solid #1a1e66 !important;
  margin-bottom: -2px;
  /* Overlap container border */
}

/* Tab Content Slider */
.tab-content {
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Hide non-active slides */
  transition: height 0.3s ease;
  /* Smooth height adjustment */
  padding: 40px 0;
  height: auto !important
}

/* Wrapper for sliding effect (will be added/controlled by JS, 
   but we can style the panes to be flex items if we wrap them) */
/* Actually, let's assume JS will wrap them or we style tab-content as flex */
.tab-content-wrapper {
  display: flex;
  width: 300%;
  /* 3 tabs * 100% */
  transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.tab-pane {
  width: 33.333% !important;
  /* 1/3 of wrapper */
  display: block !important;
  /* Override Bootstrap's display:none */
  opacity: 1 !important;
  /* Override Bootstrap's fade */
  flex-shrink: 0;
  padding: 50px 1em 0 1em !important;
  box-sizing: border-box;
  background: transparent !important
}

/* Hide original Bootstrap fade classes effects */
.tab-pane.fade {
  opacity: 1;
  transition: none;
}

.tab-pane h3 {
  font-size: 24px;
  color: #1a1e66;
  margin-bottom: 20px;
}

.tab-pane p {
  color: #666;
  line-height: 1.8;
  margin-bottom: 20px;
}

/* Specs Table */
.specs-table {
  width: 100%;
  border-collapse: collapse;
}

.specs-table th,
.specs-table td {
  padding: 15px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.specs-table th {
  width: 30%;
  color: #1a1e66;
  font-weight: 700;
  background: #f9f9f9;
}

.specs-table td {
  color: #666;
}

/* ==============================================
   Product Category / Grid Styles
   ============================================== */
.products-grid-section {
  padding: 100px 0;
}

.process-2-box {
  margin-bottom: 30px;
  height: 100%;
}

.product-card-wrapper {
  margin-bottom: 30px;
}

/* ==============================================
   Product Image Swiper
   ============================================== */
.productSwiper {
  width: 100%;
  /* 占满父容器 */
  height: 500px;
  /* User request: 700px height */
  /* aspect-ratio: 1/1; Removed to allow custom height */
  max-width: 100%;
  /* Responsive safety */
  border-radius: 20px;
  overflow: hidden;
  margin-top:60px !important;
  margin-bottom: 20px;
}

.productSwiper .swiper-slide {
  width: 100%;
  height: 100%;
}

.productSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Thumbs Swiper */
.thumbsSwiper {
  width: 630px;
  /* 占满父容器 */
  height: 100px;
  /* Adjust as needed */
  max-width: 100%;
  box-sizing: border-box;
  padding: 10px 0;  position: relative; /* 确保容器定位正常 */

  margin-left: auto; 
  max-width: 100%;   
  margin-left: auto !important;

}

.thumbsSwiper .swiper-slide {
  width: 150px !important;
  /* User request: 150px width */
  height: 100%;
  opacity: 0.4;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}

.thumbsSwiper .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #1a1e66;
  /* Active border */
}

.thumbsSwiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Custom Navigation */
.productSwiper .swiper-button-next,
.productSwiper .swiper-button-prev {
  color: #fff;
  width: 44px;
  height: 44px;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(5px);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.productSwiper .swiper-button-next:after,
.productSwiper .swiper-button-prev:after {
  font-size: 18px;
  font-weight: 700;
}

.productSwiper .swiper-button-next:hover,
.productSwiper .swiper-button-prev:hover {
  background: #1a1e66;
  color: #fff;
}

/* ==============================================
   Mobile Optimization
   ============================================== */
@media (max-width: 768px) {
  .thumbsSwiper {
    display: none !important;
  }

  .productSwiper {
    display: none !important;
  }
}

/* ==============================================
   Lightbox Modal Styles
   ============================================== */
.lightbox-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.9);
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s;
}

.lightbox-content {
  margin: auto;
  display: block;
  width: auto;
  max-width: 90%;
  max-height: 90%;
  border-radius: 5px;
  animation: zoomIn 0.3s;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 10000;
}

.lightbox-close:hover,
.lightbox-close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

@keyframes zoomIn {
  from {
    transform: scale(0)
  }

  to {
    transform: scale(1)
  }
}

@keyframes fadeIn {
  from {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

/* ==============================================
   Responsive
   ============================================== */
@media only screen and (max-width: 767px) {

  /* Prevent horizontal scroll on mobile */
  body,
  html {
    overflow-x: hidden;
  }

  .page-wrapper {
    overflow-x: hidden;
  }

  /* Hide scrollbar for nav-tabs but allow scrolling */
  .nav-tabs {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
  }

  .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  .page-title h1 {
    font-size: 36px;
  }

  .product-info-box h2 {
    font-size: 28px;
  }

  .nav-tabs .nav-link {
    padding: 10px 15px;
    font-size: 16px;
  }

  .specs-table th,
  .specs-table td {
    padding: 10px;
    display: block;
    width: 100%;
  }

  .specs-table th {
    background: #eee;
  }
}

.in-product-section {
  --primary: var(--primary-black);
  --secondary: var(--secondary-grey);
  --border: var(--border-light);
  --theme: var(--main-color);
  --black: var(--primary-black);
  --black-2: var(--black-soft);
  --white: var(--white-color);
  --white-2: var(--grey-light);
  --action: var(--main-color);
  position: relative;
  width: 100%;
}

.in-product-section {
  --primary: var(--primary-black);
  --secondary: var(--secondary-grey);
  --border: var(--border-light);
  --theme: var(--main-color);
  --black: var(--primary-black);
  --black-2: var(--black-soft);
  --white: var(--white-color);
  --white-2: var(--grey-light);
  --action: var(--main-color);
}

.in-product-section {
  --font_inter: var(--font-body);
  --font_generalsanssemibold: var(--font-heading);
  --font_generalsansmedium: var(--font-heading);
  --font_generalsansitalic: var(--font-body);
  --font_awesome: "Font Awesome 6 pro";
}

.in-product-section * {
  margin: 0;
  padding: 0;
}

.in-product-section {
  /* font-family: var(--font_inter); */
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--secondary);
}

.in-product-section {
  scroll-behavior: smooth;
}

.in-product-section h1,
.in-product-section h2,
.in-product-section h3,
.in-product-section h4,
.in-product-section h5,
.in-product-section h6 {
  padding: 0;
  margin: 0;
  color: var(--primary);
  line-height: 1.22;
  font-family: var(--font_generalsanssemibold);
  font-weight: 600;
}

.in-product-section ul,
.in-product-section ol {
  padding: 0;
  margin: 0;
}

.in-product-section a {
  text-decoration: none;
  transition: all 0.3s;
  color: inherit;
}

.in-product-section a:hover {
  color: var(--primary);
}

.in-product-section button {
  background-color: transparent;
  border: 0;
}

.in-product-section p {
  padding: 0;
  margin: 0;
}

.in-product-section strong {
  font-weight: 500;
}

.in-product-section video,
.in-product-section iframe,
.in-product-section img {
  margin: 0;
  padding: 0;
}

.in-product-section img {
  max-width: 100%;
}

@media only screen and (max-width: 767px) {
  .in-product-section br {
    display: none;
  }
}

.in-product-section main {
  display: inline-block;
  width: 100%;
}

.in-product-section h1 {
  font-size: 48px;
}

.in-product-section h2 {
  font-size: 36px;
}

.in-product-section h3 {
  font-size: 32px;
}

.in-product-section h4 {
  font-size: 24px;
}

.in-product-section h5 {
  font-size: 20px;
}

.in-product-section h6 {
  font-size: 18px;
}

/* animation css */
.in-product-section .t_parallax_image {
  overflow: hidden;
}

@keyframes t-Bubble {
  0% {
    scale: 1;
  }

  50% {
    scale: 1.5;
  }

  100% {
    scale: 1;
  }
}

@keyframes t-Zoom {
  0% {
    scale: 1;
  }

  50% {
    scale: 0.5;
  }

  100% {
    scale: 1;
  }
}

@keyframes t-Zoom_2 {
  0% {
    scale: 1;
  }

  50% {
    scale: 0.9;
  }

  100% {
    scale: 1;
  }
}

@keyframes t-SlideBottom {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(50px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes t-reveal {
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes t-fadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes t-spinner {
  to {
    transform: rotateZ(360deg);
  }
}

@keyframes t-characters {

  0%,
  75%,
  100% {
    opacity: 0;
    transform: rotateY(-90deg);
  }

  25%,
  50% {
    opacity: 1;
    transform: rotateY(0deg);
  }
}

@keyframes t-sheen {
  50% {
    transform: translateY(-20px);
    color: var(--primary);
  }
}

@keyframes t-slide {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-100%);
  }
}

/* common css */
/* common css */
/* Scrollbar styling */
.in-product-section ::-webkit-scrollbar {
  width: 5px;
}

.in-product-section ::-webkit-scrollbar-track {
  background: #d6d6d6;
}

.in-product-section ::-webkit-scrollbar-thumb {
  background: #888;
}

.in-product-section ::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Utility classes for positioning */
.in-product-section .rr-pos-rel {
  position: relative;
}

.in-product-section .rr-pos-abs {
  position: absolute;
}

.in-product-section .rr-ov-hidden {
  overflow: hidden;
}

.in-product-section .rr-container-1350 {
  max-width: 1350px;
  margin: 0 auto;
}

.in-product-section .rr-container-1410 {
  max-width: 1410px;
  margin: 0 auto;
}

/* Background color classes */
.in-product-section .rr-bg-primary {
  background-color: var(--primary);
  /* Primary background color */
}

.in-product-section .rr-bg-white {
  background-color: var(--white);
  /* White background color */
}

.in-product-section .rr-bg-black {
  background-color: var(--black);
}

.in-product-section .dark .rr-bg-black {
  background-color: #171717;
}

.in-product-section .rr-bg-light-gray {
  background-color: #F0F0F0;
}

.in-product-section .dark .rr-bg-light-gray {
  background-color: #212121;
}

.in-product-section .rr-bg-light {
  background-color: #F8F2EF;
}

.in-product-section .dark .rr-bg-light {
  background-color: #111111;
  --primary: #F8F2EF;
}

.in-product-section .rr-text-white {
  color: var(--white);
}

.in-product-section .rr-text-primary {
  color: var(--primary);
}

.in-product-section .text-gray {
  color: #555555;
}

.in-product-section .dark .text-gray {
  color: #999999;
}

.in-product-section .rr-light {
  color: #F8F2EF;
}


/* Parallax view styling */
.in-product-section .parallax-view {
  overflow: hidden;
}

.in-product-section .section-title {  
  font-size: 1.6em;
  line-height: 1;
  font-weight: 800 !important;
  padding: 8px 20px;
  position: relative;
  border-radius: 50px;
  color: var(--theme) !important;
  display: inline-flex;
  border: 1px solid var(--theme);
  text-transform: uppercase;
  background-color: var(--white);
}

@media (min-width: 1400px) {
  .in-product-section .section-title {
    left: -20px;
  }
}

.in-product-section .about-process-group {
  position: relative;
  z-index: 1;
}

.in-product-section .about-process-group-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  background-color: var(--custom-color-67);
  z-index: -1;
}

.in-product-section .about-process-group-bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.in-product-section .about-process-group-bg .area-shape-1 {
  width: 28%;
  position: absolute;
  top: 180px;
  left: -200px;
  z-index: -1;
}

.in-product-section .about-process-group-bg .area-shape-1 img {
  animation: t-SlideBottom 6s infinite;
}

.in-product-section .about-process-group-bg .area-shape-2 {
  width: 100;
  position: absolute;
  bottom: 35px;
  right: 0;
}

.in-product-section .about-process-group-bg .area-shape-2 img {
  animation: t-SlideBottom 6s infinite;
}

/* in-product area style  */
.in-product-section .in-product-area-inner {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start; /* 顶部对齐 */
  margin-bottom: 100px;
}

.in-product-section .in-product-thumb-wrapper {
  flex: 0 0 50%;
  width: 50%;
  min-width: 660px; /* 用户硬性要求：最小 660px */
  padding-right: 30px; /* 视觉间距 */
  box-sizing: border-box;
  margin-left: 0;
  max-width: none;
}

.in-product-section .in-product-content {
  flex: 0 0 50%;
  width: 50%;
  padding-left: 30px; /* 视觉间距 */
  box-sizing: border-box;
  text-align: left; /* 内容左对齐 */
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Flex 子元素左对齐 */
}

/* 响应式：当屏幕不足以容纳两个 50% (考虑 min-width 660px) 时换行 */
@media (max-width: 1350px) {
  .in-product-section .in-product-thumb-wrapper,
  .in-product-section .in-product-content {
    flex: 0 0 100%;
    width: 100%;
    padding: 0;
  }
  
  .in-product-section .in-product-thumb-wrapper {
    margin-bottom: 50px;
    /* 在小屏幕下取消 660px 强制限制，避免横向滚动，除非用户坚持 */
    /* min-width: 100%; */ 
  }
}

/* Remove old Grid Media Queries */

/* Section spacing with responsive padding */
.in-product-section .section-spacing {
  padding-top: 120px;
  padding-bottom: 0;
}

@media only screen and (max-width: 1919px) {
  .in-product-section .section-spacing {
    padding-top: 100px;
    padding-bottom: 0;
  }
}

@media only screen and (max-width: 1399px) {
  .in-product-section .section-spacing {
    padding-top: 80px;
    padding-bottom: 0;
  }
}

@media only screen and (max-width: 1199px) {
  .in-product-section .section-spacing {
    padding-top: 60px;
    padding-bottom: 0;
  }
}

.in-product-section .section-spacing-top {
  padding-top: 50px;
  transition: padding-top 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.in-product-section .section-spacing-top.padding-collapsed {
  padding-top: 0 !important;
}

@media only screen and (max-width: 1919px) {
  .in-product-section .section-spacing-top {
    padding-top: 50px;
  }
}

@media only screen and (max-width: 1399px) {
  .in-product-section .section-spacing-top {
    padding-top: 30px;
  }
}

@media only screen and (max-width: 1199px) {
  .in-product-section .section-spacing-top {
    padding-top: 20px;
  }
}

.in-product-section .section-spacing-bottom {
  padding-bottom: 120px;
}

@media only screen and (max-width: 1919px) {
  .in-product-section .section-spacing-bottom {
    padding-bottom: 100px;
  }
}

@media only screen and (max-width: 1399px) {
  .in-product-section .section-spacing-bottom {
    padding-bottom: 80px;
  }
}

@media only screen and (max-width: 1199px) {
  .in-product-section .section-spacing-bottom {
    padding-bottom: 60px;
  }
}

/* Container styling with full HD support */
.in-product-section .container {
  --bs-gutter-x: 30px;
}

@media (min-width: 1600px) {
  .in-product-section .container.full-hd {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
  }
}

.in-product-section .in-product-thumb-wrapper {
  /* Previously defined in .in-product-area-inner block */
}

.in-product-section .in-product-thumb-wrapper .main-img {
  border-radius: 9px;
  margin-bottom: 16px;
  overflow: hidden;
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-thumb-wrapper .main-img {
    margin-left: 25px;
  }
}

.in-product-section .in-product-thumb-wrapper .main-img img {
  width: 100%;
}

.in-product-section .in-product-thumb-wrapper .info-text {
  background-color: var(--theme);
  padding: 30px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  position: absolute;
  bottom: 75px;
  left: 0;
}

@media only screen and (max-width: 767px) {
  .in-product-section .in-product-thumb-wrapper .info-text {
    bottom: 25px;
    margin-right: 20px;
  }
}

.in-product-section .in-product-thumb-wrapper .info-text:before {
  position: absolute;
  content: "";
  width: 25px;
  height: 25px;
  background-color: #002366;
  top: 99%;
  left: 51px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-thumb-wrapper .info-text:before {
    left: 11px;
    width: 15px;
    height: 15px;
  }
}

.in-product-section .in-product-thumb-wrapper .info-text .number {
  font-family: var(--font_inter);
  font-weight: 700;
  font-size: 44px;
  line-height: 0.91;
  color: var(--white);
}

.in-product-section .in-product-thumb-wrapper .info-text .text {
  font-size: 16px;
  line-height: 20px;
  font-weight: 700;
  color: var(--white);
  text-transform: uppercase;
  margin-left: 15px;
  padding-left: 16px;
  position: relative;
}

.in-product-section .in-product-thumb-wrapper .info-text .text:before {
  position: absolute;
  content: "";
  width: 1px;
  height: 30px;
  background-color: var(--white);
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-content {
    padding: 20px;
  }
}

.in-product-section .in-product-content .title-wrapper {
  margin-top: 19px;
}

.in-product-section .in-product-content .text-wrapper {
  margin-top: 15px;
}

.in-product-section .in-product-content .feature-list {
  margin-top: 24px;
}

.in-product-section .in-product-content .feature-list ul {
  /* -moz-column-count: 2;
  column-count: 2; */
  display: inline-block;
  -moz-column-gap: 94px;
  column-gap: 94px;
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-content .feature-list ul {
    -moz-column-gap: 44px;
    column-gap: 44px;
  }
}

@media (max-width: 575px) {
  .in-product-section .in-product-content .feature-list ul {
    -moz-column-count: auto;
    column-count: auto;
  }
}

.in-product-section .in-product-content .feature-list li {
  font-weight: 500;
  font-size: 16px;
  line-height: 32px;
  color: var(--primary);
  display: flex;
  gap: 15px;
  align-items: center;
}

.in-product-section .in-product-content .feature-list li i {
  color: var(--theme);
}

.in-product-section .in-product-content .btn-wrapper {
  margin-top: 28px;
  border-top: 1px solid var(--border);
  padding-top: 40px;
  display: flex;
  gap: 20px 47px;
  align-items: center;
}

@media (max-width: 575px) {
  .in-product-section .in-product-content .btn-wrapper {
    flex-direction: column;
    align-items: flex-start;
  }
}

.in-product-section .in-product-content .review-box {
  display: flex;
  gap: 20px;
  align-items: center;
}

.in-product-section .in-product-content .review-box .clients {
  display: flex;
}

.in-product-section .in-product-content .review-box .clients img {
  width: 70px;
  height: 70px;
  border: 5px solid var(--white);
  border-radius: 100%;
  box-shadow: 0px 9px 18px 0px var(--custom-color-104);
}

.in-product-section .in-product-content .review-box .clients img:not(:first-child) {
  margin-left: -27px;
}

.in-product-section .in-product-content .review-box .number {
  font-weight: 700;
  font-size: 24px;
  line-height: 29px;
  color: var(--black);
  display: inline-block;
}

.in-product-section .in-product-content .review-box .text {
  font-weight: 400;
  font-size: 16px;
  line-height: 19px;
  margin-top: 5px;
  color: var(--theme);
}

/* process css */
/* in-product-process area style  */
.in-product-section .in-product-process-header {
  text-align: center;
}

.in-product-section .in-product-process-header .title-wrapper {
  margin-top: 19px;
}

.in-product-section .in-product-process-wrapper-box {
  margin-top: 59px;
}

/* Product Card Description Height Fix */
.in-product-section .in-product-process-box .content p {
  min-height: 85px;
  /* Approx 3 lines (26px line-height * 3) */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 1919px) {
  .in-product-section .in-product-process-wrapper-box {
    margin-top: 49px;
  }
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-process-wrapper-box {
    margin-top: 39px;
  }
}

.in-product-section .in-product-process-wrapper {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(4, 1fr);
}

@media only screen and (max-width: 991px) {
  .in-product-section .in-product-process-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .in-product-section .in-product-process-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}

.in-product-section .in-product-process-box {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  padding: 30px 30px;
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-process-box {
    padding: 20px 15px;
  }
}

.in-product-section .in-product-process-box .number {
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  color: var(--theme);
  padding: 8px 20px;
  display: inline-block;
  border: 1px solid var(--border);
  border-radius: 30px;
}

.in-product-section .in-product-process-box .content {
  margin-top: 18px;
}

.in-product-section .in-product-process-box .title {
  font-family: var(--font_inter);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.45;
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-process-box .title {
    font-size: 20px;
  }
}

.in-product-section .in-product-process-box .thumb {
  margin-top: 24px;
  border-radius: 10px;
  overflow: hidden;
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-process-box .thumb {
    margin-top: 14px;
  }
}

.in-product-section .in-product-process-box .thumb img {
  width: 100%;
}

.in-product-section .in-product-process-box .btn-wrapper {
  margin-top: 30px;
}

@media only screen and (max-width: 1199px) {
  .in-product-section .in-product-process-box .btn-wrapper {
    margin-top: 20px;
  }
}

/* ==============================================
   Mobile Optimization (Added)
   ============================================== */
@media (max-width: 768px) {

  /* Hide Thumbs */
  .thumbsSwiper {
    display: none !important;
  }

  /* Show only first slide in main swiper */
  .productSwiper .swiper-slide:not(:first-child) {
    display: none !important;
  }

  /* Disable flex layout to prevent stacking issues if JS is disabled/not init */
  .productSwiper .swiper-wrapper {
    display: block !important;
    transform: none !important;
  }

  .productSwiper {
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
  }

  .productSwiper .swiper-slide {
    width: 100% !important;
    height: auto !important;
    opacity: 1 !important;
    display: block !important;
    /* Ensure the first one is block */
  }

  /* Hide navigation buttons */
  .productSwiper .swiper-button-next,
  .productSwiper .swiper-button-prev {
    display: none !important;
  }
}

.value-proposition {
  padding: 80px 0;
  background: #f9f9f9;
  font-family: 'Inter', sans-serif;
}


.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-bottom: 60px;
}

.feature-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  transition: 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-card i {
  color: #004098;
  font-size: 2rem;
  margin-bottom: 20px;
}

.feature-card h3 {
  font-size: 1.25rem;
  margin-bottom: 15px;
  color: #333;
}

.feature-card p {
  font-size: 0.95rem;
  color: #666;
  line-height: 1.6;
}

.spec-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 让内部所有元素水平居中 */
  justify-content: center;
  width: 100%;
  /* 占满全屏宽度以实现居中参考 */
  background-color: transparent !important;
  padding: 40px 20px;
}

/* 新增或修改一个包装类，让边框跟着表格走 */
.spec-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* 内部标题和表格靠左对齐 */
  border-left: 5px solid #004098;
  border-right: 5px solid #004098;
  padding: 20px 40px;
  border-radius: 15px;
  background-color: transparent !important;
  max-width: 900px;
  width: fit-content;
  /* 关键：宽度根据内容自适应 */
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table {
  width: 100%;
  /* 表格宽度 */
  max-width: 800px;
  /* 设置一个最大宽度，防止在大屏上拉得太开 */
  margin: 0 auto;
  /* 备用居中方案 */
  /* 新增：表格整体背景透明 */
  background-color: transparent !important;
}

.spec-table th,
.spec-table td {
  padding: 15px;
  /* 修改：移除底部边框（或设为透明） */
  border-bottom: none;
  /* 也可以用 border-bottom: 1px solid transparent; */
  text-align: left;
  /* 新增：单元格背景透明 */
  background-color: transparent !important;
}

.spec-table th {
  /* 修改：将原有背景色改为透明 */
  background: transparent !important;
  color: #002D62;
}

.spec-table td strong {
  color: #004098;
}

/* --- General Variables --- */
:root {
  --primary-blue: #004098;
  --dark-text: #1a1a1a;
  --light-text: #666666;
  --bg-light: #f8f9fa;
  --card-bg: #ffffff;
}

/* --- PART 1: Intro Section Styles --- */
.product-hero-intro {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 40px auto;
  /* Spacing below */
  padding: 0 20px;
}

.hero-title {
  font-size: 2.2rem;
  color: var(--dark-text);
  margin-bottom: 10px;
  font-weight: 700;
}

.hero-subtitle {
  font-size: 1.4rem;
  color: var(--primary-blue);
  margin-bottom: 20px;
  font-weight: 500;
}

.highlight-text {
  font-weight: 800;
  text-decoration: underline;
  text-decoration-color: rgba(0, 64, 152, 0.3);
}

.hero-description {
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--light-text);
}

/* --- PART 2: Deep Dive Grid Styles --- */
.product-deep-dive {
  padding: 60px 0;
}

.section-header {
  text-align: center;
  margin-bottom: 50px;
}

.section-header h3 {
  font-size: 2rem;
  color: var(--dark-text);
  margin-bottom: 10px;
}
/*********/
.details-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}
.detail-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    position: relative;
    overflow: hidden;
}

.detail-card::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    background: rgba(0, 64, 152, 0.04);
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 0;
}

.detail-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
  border-bottom: 4px solid var(--primary-blue);
  /* Blue underline on hover */
}
/* 图片容器样式start */
.card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 10px;
    margin: 15px 0 20px 0;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 保证图片不变形 */
    transition: transform 0.5s ease;
}

.detail-card:hover .card-image img {
    transform: scale(1.1); /* 悬停时图片轻微放大 */
}

/* 图片容器样式end */
.icon-box {
  width: 60px;
  height: 60px;
  background: rgba(0, 64, 152, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.icon-box i {
  font-size: 24px;
  color: var(--primary-blue);
}

.detail-card h4 {
  font-size: 1.4rem;
  color: var(--dark-text);
  margin-bottom: 10px;
  font-weight: 700;
}

.card-intro {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 20px;
  min-height: 45px;
  /* Alignment fix */
}

.spec-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.spec-list li {
  font-size: 0.9rem;
  color: var(--light-text);
  margin-bottom: 10px;
  position: relative;
  padding-left: 15px;
  line-height: 1.5;
}

.spec-list li::before {
  content: "\2022";
  color: var(--primary-blue);
  font-weight: bold;
  position: absolute;
  left: 0;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .hero-title {
    font-size: 1.8rem;
  }

  .hero-subtitle {
    font-size: 1.2rem;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  /* Stack cards on mobile */
}

.video-wrapper {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中（如果父级有高度） */
  width: 100%;
  /* 占据满宽 */
  padding: 20px 0;
  /* 留一点上下间距 */
}

/* 2. iframe：设置自适应比例 */
.video-wrapper iframe {
  width: 80%;
  /* 你可以根据需要调整视频占屏幕的宽度，如 100% 或 80% */
  max-width: 800px;
  /* 设置最大宽度，防止在大屏幕上显得太大 */
  aspect-ratio: 16 / 9;
  /* 关键：自动锁定视频比例，不再需要手动算高度 */
  height: auto;
  /* 高度随比例自动计算 */
  border-radius: 10px;
  /* 可选：加个圆角好看些 */
}
/* ==============================================
   Loading Screen Styles (Integrated)
   ============================================== */
.loader-wrap {
    position: fixed;
    z-index: 9999;
    height: 100vh;
    width: 100vw;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.loader-wrap .layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.loader-wrap .layer-blue {
    z-index: 1;
}
.loader-wrap .layer-black {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-wrap svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 115vh;
}
.loader-wrap .layer-black svg path {
    fill: #0c1923; /* Deep Blue/Black */
}
/* Loading Text */
.loader-wrap .loader-wrap-heading .load-text {
    font-family: 'Montserrat', 'Microsoft YaHei', sans-serif;
    font-size: 40px;
    font-weight: 800;
    text-transform: uppercase;
    color: #ffffff;
    z-index: 20;
    letter-spacing: 1px;
    position: relative;
    text-align: center;
    padding: 0 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
@media only screen and (max-width: 767px) {
    .loader-wrap .loader-wrap-heading .load-text {
        font-size: 20px;
        letter-spacing: 0px;
    }
}
.load-text span {
    animation: loading 1s infinite alternate;
    display: inline-block;
    opacity: 1;
}
@keyframes loading {
    0% { opacity: 1; }
    100% { opacity: 0.3; }
}
.loading_i {
    font-weight: 100;
    font-style: italic;
}


/* ==============================================
   Secondary Title Animation
   ============================================== */
.secondary-title {
  color: val(--primary-blue);
  font-size: 70px !important;
  font-weight: 700;
  transition: all 0.6s ease-in;
  visibility: hidden; /* Prevent interaction when hidden but keep layout space if needed, 
                         but wait, user said "occupy space". 
                         Opacity 0 occupies space. Visibility hidden also occupies space. 
                         Display none does not. */
  visibility: visible; /* We want it to occupy space always? 
                          User said "need placeholder". 
                          If I use opacity:0, it occupies space. */
}

/* Custom Product Card Styles */
.process-2-box.no-border {
    border: none !important;
    box-shadow: none !important;
}

.btn-normal-white-blue {
    background-color: #fff;
    color: var(--main-color);
    border: 1px solid #e5e5e5;
    padding: 10px 25px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 14px;
    text-decoration: none;
}

.btn-normal-white-blue:hover {
    background-color: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
}

.btn-normal-white-blue i {
    margin-left: 10px;
}

/* Business Style Product Card */
.process-2-box.business-card {
    border: 1px solid #e5e5e5 !important; /* Light grey border */
    border-radius: 10px;
    background: #fff;
    padding: 20px;
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.process-2-box.business-card:hover {
    border-color: var(--main-color) !important; /* Blue on hover */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05) !important;
    transform: translateY(-2px);
}

.process-2-box.business-card .content {
    margin-top: 15px;
    flex-grow: 1;
}

.process-2-box.business-card .title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--black-color);
    transition: color 0.3s ease;
    line-height:1.2em;
}

.process-2-box.business-card:hover .title {
    color: var(--main-color);
}

/* Updated Business Card Styles */
.process-2-box.business-card .thumb {
    height: 180px;
    width: 100%;
    overflow: hidden;
    border-radius: 4px;
    margin-bottom: 20px;
}

.process-2-box.business-card .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensure image covers the area without distortion */
    transition: transform 0.5s ease;
}

.process-2-box.business-card .btn-wrapper {
    margin-top: auto;
    width: 100%;
}

.process-2-box.business-card .general-btn-box {
    width: 100%;
}

.process-2-box.business-card .theme-btn {
    width: 100%; /* Full width */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure inner text is centered */
.process-2-box.business-card .theme-btn .btn-wrap {
    width: 100%;
    text-align: center;
}

/* Product Description Style for Category Page */
.process-2-box.business-card .desc {
    font-size: 14px;
    color: #666;
    min-height: 60px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card Background Layer Styles */
.process-2-box.business-card {
    position: relative;
    overflow: hidden;
    z-index: 1; /* Create stacking context */
    background: transparent !important; /* Remove white bg to let layer show, or keep white and layer on top? */
    /* User said "background color changed to background image". 
       So we should probably remove the solid white background or make the layer cover it. 
       If we want "grayscale transparent", usually means the image is faint on white/light bg. 
       Let's keep white bg on card, and put the layer absolute with low opacity. 
    */
    background-color: #fff !important; 
}

.process-2-box.business-card .card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: grayscale(100%);
    opacity: 0; /* Very faint as requested "transparent" */
    z-index: -1; /* Behind content */
    pointer-events: none;
    transition: all 0.5s ease;
}

.process-2-box.business-card:hover .card-bg {
    opacity: 0.1; /* Slightly more visible on hover? Optional */
    transform: scale(1.1); /* Subtle zoom effect */
}
.consit_portfolio_area .auto-container{
  width: 1440px;
  padding: 0 15px;
}

/* Portfolio Area Styles */
.consit_portfolio_area {
    padding: 100px 0;
    background-color: #F9FBFE;
}

@media (max-width: 991px) {
    .consit_portfolio_area {
        padding: 20px 0; /* Reduced padding on mobile */
    }
}

/* Mobile Optimization for Product Grid */
@media (max-width: 991px) {
    /* Ensure container fits screen */
    .auto-container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Ensure product items stack and fit */
    .product-item {
        width: 100% !important; /* Force full width on mobile */
        padding-left: 0 !important; /* Reset col padding if needed, or keep 15px */
        padding-right: 0 !important;
        margin-bottom: 30px;
    }
    
    /* Reset card width constraints */
    .process-2-box.business-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto;
    }
    
    /* Adjust toolbar for mobile */
    .product-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    
    .product-toolbar .toolbar-left,
    .product-toolbar .toolbar-right {
        width: 100%;
        margin-bottom: 10px;
    }
    
    .product-toolbar .search-box {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
    
    .product-toolbar .search-box input {
        width: 100%;
    }
    
    .product-toolbar .sort-box {
        width: 100%;
    }
    
    .product-toolbar .sort-box select {
        width: 100%;
    }
}