.navbar { background-color: #ffffff; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
.navbar-brand { color: #002B5B !important; font-weight: 700; }
.btn-primary { background-color: #002B5B; border: none; }
.btn-primary:hover { background-color: #01417e; }
.btn-warning { background-color: #FFB703; border: none; color: #000; }
.btn-warning:hover { background-color: #ffa600; color: #fff; }
/*footer { background-color: #002B5B; color: #fff; }*/
/*h1, h2, h3, h4, h5 { color: #002B5B; }*/
/*.hero { background: url('/images/hero-bg.jpg') center/cover no-repeat; background-color: #002B5B; color: #fff; }*/
/*.hero-overlay { background: rgba(0, 43, 91, 0.7); padding: 100px 0; }*/
/*.card { border: none; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }*/
/*.card-title { color: #002B5B; }*/

.navbar .dropdown:hover > .dropdown-menu {
display: block;
margin-top: 0;
}

/* 去除 Bootstrap 点击箭头偏移 */
.navbar .dropdown-toggle::after {
  margin-left: 0.3em;
}

/* 二级菜单样式 */
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
  display: none;
  position: absolute;
}

.dropdown-submenu:hover > .dropdown-menu {
  display: block;
}

/* 下拉菜单对齐与美化 */
.dropdown-menu a {
  white-space: nowrap;
}

.navbar-brand img {
  object-fit: contain;
}

/* 使菜单 hover 更平滑 */
.navbar .dropdown-menu {
  transition: all 0.15s ease;
}
:root {
    --primary-blue: #007bff;
    --dark-blue: #0d6efd;
    --gray: #6c757d;
    --light-gray: #f8f9fa;
    --white: #ffffff;
    --my-blue:#063e7f;

}


/* 移动端下，当导航栏折叠时，固定顶部仍需确保内容不被遮挡 */
@media (max-width: 991.98px) {
    body {
        padding-top: 56px; /* 移动端折叠时高度较小 */
    }
}  
body { font-family: 'Roboto', sans-serif; }

.hero { background: linear-gradient(135deg, var(--my-blue), var(--dark-blue)); color: var(--white); padding: 80px 0; }
.hero h1 { font-size: 3.5rem; font-weight: 700; }
.counter { font-size: 3rem; font-weight: bold; color: var(--primary-blue); }
.hot-products { background-color: var(--light-gray); }
.product-card { transition: transform 0.3s; }
.product-card:hover { transform: translateY(-10px); }
/*.hot-products { background-color: var(--light-gray); }*/
.animation { transition: transform 0.3s; }
.animation:hover {transform: translateY(-10px);}
.certifications img { height: 200px; margin: 0 15px; }
.blog-carousel .carousel-inner { overflow: visible; }
.blog-carousel .carousel-item { display: flex; transition: transform 0.6s ease; }
.blog-carousel .card { min-width: 350px; max-width: 350px; margin: 0 15px; flex: 0 0 auto; }
.blog-carousel img { height: 200px; object-fit: cover; }
.cta-section { background-color: var(--primary-blue); color: var(--white); }
.footer { background-color: #1c1c1c; color: #ccc; padding: 40px 0; }
.footer a { color: #ccc; text-decoration: none; }
.footer a:hover { color: white; }
/*productlist*/
.category-card { transition: transform 0.3s; height: 100%; }
.category-card:hover { transform: translateY(-10px); }
.category-card img { height: 300px; object-fit: cover; }
.comparison-table th { background-color: var(--light-gray); }
footer { background-color: #343a40; color: var(--white); }
/* Responsive Multi-Item Carousel for Blog */
@media (max-width: 767.98px) {
/* Mobile: Show 1 item */
#blogCarousel .carousel-inner .carousel-item > div {
    display: none;
}
#blogCarousel .carousel-inner .carousel-item > div:first-child {
    display: block;
}
}

#blogCarousel .carousel-inner .carousel-item.active,
#blogCarousel .carousel-inner .carousel-item-next,
#blogCarousel .carousel-inner .carousel-item-prev {
display: flex;
}
    /* 侧边栏基础样式 */
.float-inquiry-sidebar {
    position: fixed;
    top: 50%;
    right: 0;
    width: 320px;
    max-width: 90vw;
    background: #ffffff;
    box-shadow: -6px 0 25px rgba(0,0,0,0.15);
    border-radius: 12px 0 0 12px;
    padding: 30px 24px;
    z-index: 1050;
    transform: translateY(-50%) translateX(100%); /* 默认完全隐藏在右边 */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 显示状态：微微露出，hover 时完全展开 */
.float-inquiry-sidebar.show {
    transform: translateY(-50%) translateX(-20px);
}

.float-inquiry-sidebar.show:hover {
    transform: translateY(-50%) translateX(0);
}

/* 移动端全屏 */
@media (max-width: 991.98px) {
    .float-inquiry-sidebar {
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        border-radius: 0;
        padding: 60px 20px 20px;
        transform: translateX(100%);
    }
    .float-inquiry-sidebar.show {
        transform: translateX(0);
    }
}

/* 触发按钮（右下角） */
.float-inquiry-trigger {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1040;
}

        /* 右侧侧边栏：经典 sticky 效果（滚动时固定在顶部以下） */
    .sidebar-sticky {
        position: sticky;
        top: 20px; /* 距离视口顶部100px开始固定（可调整） */
        align-self: flex-start; /* 关键：防止在flex容器中拉伸 */
    }

    /* 移动端取消sticky */
    @media (max-width: 991.98px) {
        .sidebar-sticky {
            position: static;
            top: auto;
        }
    }

    .newsletter-sidebar { background: var(--light-gray); border-radius: 12px; padding: 30px; margin-bottom: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

    /* 1. 缩略图样式 */
.thumbnail-item {
    display: block;
    width: 70px; /* 确保缩略图固定宽度 */
    transition: border-color 0.3s;
    cursor: pointer;
    border-radius: 5px;
    opacity: 0.7;
}
.thumbnail-item:hover, .thumbnail-item.active {
    border-color: #007bff !important; /* Primary color */
    opacity: 1;
}

/* 2. 询盘框样式 */
.inquiry-box {
    background-color: #f8f9fa !important;
    border-left: 5px solid #007bff; /* Primary color emphasis */
}

/* 3. 图片放大镜容器样式 */
.main-image-container {
    width: 100%;
    padding-bottom: 100%; /* 创建一个正方形容器 */
    position: relative;
    overflow: hidden;
    border: 1px solid #dee2e6;
    border-radius: 8px;
}

#main-product-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 确保图片在容器内完整显示 */
    transition: transform 0.1s ease-out; /* 快速的平移过渡 */
    position: absolute;
    top: 0;
    left: 0;
    cursor: zoom-in;
}

/* 放大状态的 CSS 类，通过 JS 添加 */
.magnified {
    transform: scale(2.0); /* 放大 2 倍 */
    transform-origin: center center; /* 初始原点在中心 */
    cursor: zoom-out;
}


/* 4. Tab 栏美化 */
.nav-tabs .nav-link.active {
    background-color: #007bff;
    color: white;
    border-color: #007bff;
}
.nav-tabs .nav-link {
     color: #495057;
}

/*product*/
.cta-sticky { position: sticky; top: 100px; }
.related-product-card { transition: transform 0.3s; }
.related-product-card:hover { transform: translateY(-10px); }
.related-blog-card img { height: 200px; object-fit: cover; }

/*news*/
.article-content { max-width: 800px; margin: 0 auto; }
.article-content img { max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.1); }

.product-cta { background: linear-gradient(135deg, var(--primary-blue), #0d6efd); color: #fff; border-radius: 12px; padding: 40px; }

.toc { background: var(--light-gray); border-radius: 12px; padding: 20px; }
.toc ul { list-style: none; padding-left: 0; }
.toc li { margin-bottom: 10px; }
.toc a { text-decoration: none; color: #495057; }
.toc a:hover { color: var(--primary-blue); }

/*about us*/
.timeline { position: relative; padding-left: 30px; border-left: 3px solid var(--primary-blue); }
.timeline-item { margin-bottom: 40px; position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -38px; top: 0; width: 15px; height: 15px; background: var(--primary-blue); border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 3px var(--primary-blue); }
.factory-gallery img { height: 300px; object-fit: cover; border-radius: 12px; }
.team-img { height: 250px; object-fit: cover; border-radius: 50%; }
.stats-card { background: var(--light-gray); border-radius: 12px; padding: 30px; text-align: center; }
.stats-number { font-size: 3rem; font-weight: bold; color: var(--primary-blue); }
.map-placeholder { height: 400px; background: #ddd; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.cert-badge img { height: 80px; margin: 15px; }
.hero-about { 
    background: linear-gradient(135deg, #0056b3 0%, #003087 50%, #0d6efd 100%);
    position: relative; overflow: hidden;
}
.hero-about::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(255,255,255,0.12) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(40,167,69,0.15) 0%, transparent 50%);
    pointer-events: none;
}
.section-img { object-fit: cover; width: 100%; height: 420px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }

/*轮播图*/
/* 卡片 */
.card-img-top {
  height: 180px;
  object-fit: cover;
}

/* 箭头通用 */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.5);
  color: #fff;
  font-size: 28px;
  line-height: 44px;
  text-align: center;
  cursor: pointer;
  z-index: 10;
  transition: all .2s ease;
}

.carousel-arrow:hover {
  background: rgba(0,0,0,0.8);
}

/* 左右位置 */
.carousel-prev {
  left: -22px;
}

.carousel-next {
  right: -22px;
}

/* 移动端优化 */
@media (max-width: 767px) {
  .carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 36px;
  }

  .carousel-prev {
    left: -10px;
  }

  .carousel-next {
    right: -10px;
  }
}