/* base.css - 公共样式 */

/* 全局样式 */
html {
    scroll-behavior: smooth;
}
body {
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
}

/* 内容容器 */
.content-container {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px;
}

/* 背景样式 */
.hero-bg {
    background-image: url('../img/hero-bg.png');
    background-size: cover;
    background-position: center;
    height: 850px;
}
.about-bg {
    background-image: url('../img/about-bg.png');
    background-size: cover;
    background-position: center;
    height: 800px;
}
.contact-bg {
    background-image: url('../img/contact-bg.png');
    background-size: cover;
    background-position: center;
    height: 580px;
}

/* 导航栏样式 */
.nav-bg {
    background-color: #0a2463;
    height: 80px;
}
.navbar-nav .nav-link {
    font-size: 18px;
    font-weight: bold;
}

/* 侧边栏样式 */
.news-sidebar {
    background-color: #8cad9a;
}
.products-sidebar {
    background-color: #b8c5d6;
}

/* 页脚样式 */
.footer-bg {
    background-color: #0a2463;
}

/* Logo点样式 */
.sgm-logo-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(to right, #3b82f6, #f97316);
}

/* 按钮样式 */
.btn-learn-more {
    background-color: white;
    color: #0a2463;
    padding: 8px 24px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: background-color 0.3s;
}
.btn-learn-more:hover {
    background-color: #e0e7ff;
    color: #0a2463;
}

/* 内容背景样式 */
.about-content {
    background-color: rgba(140, 173, 154, 0.2);
}

/* 图片样式 */
.news-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
}
.product-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
}




.pagination {
  display: inline-block;
  padding-left: 0;
  margin: 18px 0;
  border-radius: 3px;
}
.pagination > li {
  display: inline;
}
.pagination > li > a,
.pagination > li > span {
  position: relative;
  float: left;
  padding: 6px 12px;
  line-height: 1.42857143;
  text-decoration: none;
  color: #444c69;
  background-color: #fff;
  border: 1px solid #ddd;
  margin-left: -1px;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  margin-left: 0;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
  border-bottom-right-radius: 3px;
  border-top-right-radius: 3px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
  z-index: 2;
  color: #262a3b;
  background-color: #eeeeee;
  border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
  z-index: 3;
  color: #fff;
  background-color: #444c69;
  border-color: #444c69;
  cursor: default;
}
.pagination > .disabled > span,
.pagination > .disabled > span:hover,
.pagination > .disabled > span:focus,
.pagination > .disabled > a,
.pagination > .disabled > a:hover,
.pagination > .disabled > a:focus {
  color: #777777;
  background-color: #fff;
  border-color: #ddd;
  cursor: not-allowed;
}
.pagination-lg > li > a,
.pagination-lg > li > span {
  padding: 10px 16px;
  font-size: 16px;
  line-height: 1.3333333;
}
.pagination-lg > li:first-child > a,
.pagination-lg > li:first-child > span {
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}
.pagination-lg > li:last-child > a,
.pagination-lg > li:last-child > span {
  border-bottom-right-radius: 5px;
  border-top-right-radius: 5px;
}
.pagination-sm > li > a,
.pagination-sm > li > span {
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
}
.pagination-sm > li:first-child > a,
.pagination-sm > li:first-child > span {
  border-bottom-left-radius: 2px;
  border-top-left-radius: 2px;
}
.pagination-sm > li:last-child > a,
.pagination-sm > li:last-child > span {
  border-bottom-right-radius: 2px;
  border-top-right-radius: 2px;
}

    /* 分页样式 */
            .pagination-container {
                display: flex;
                justify-content: center;
                margin-top: 3rem;
            }
            
            .pager {
                display: flex;
                list-style: none;
                padding: 0;
                margin: 0;
            }
            
            .pager li {
                margin: 0 5px;
            }
            
            .pager li a {
                display: block;
                padding: 8px 16px;
                text-decoration: none;
                color: #0a2463;
                border: 1px solid #ddd;
                border-radius: 4px;
                transition: all 0.3s ease;
            }
            
            .pager li a:hover {
                background-color: #f0f0f0;
                color: #22d3ee;
                border-color: #22d3ee;
            }
            
            .pager li.disabled span {
                display: block;
                padding: 8px 16px;
                color: #999;
                border: 1px solid #ddd;
                border-radius: 4px;
                cursor: not-allowed;
            }