/* 全局样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
header {
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
}

.logo h1 {
    color: #c00;
    font-size: 24px;
    font-weight: bold;
}

nav ul {
    display: flex;
    list-style: none;
}

nav ul li {
    margin-left: 30px;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-size: 18px;
    font-weight: bold;
    transition: color 0.3s;
    padding: 10px 0;
    position: relative;
}

nav ul li a:hover,
nav ul li a.active {
    color: #c00;
}

nav ul li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: #c00;
    transition: width 0.3s;
}

nav ul li a:hover::after,
nav ul li a.active::after {
    width: 100%;
}

/* 主要内容样式 */
main {
    margin-top: 80px;
}

/* 页面头部 */
.page-header {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 80px 0;
}

.page-header h1 {
    font-size: 42px;
    margin-bottom: 20px;
}

.page-header p {
    font-size: 20px;
    max-width: 800px;
    margin: 0 auto;
}

/* 首页横幅 */
.hero {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
    background-size: cover;
    background-position: center;
    color: #fff;
    text-align: center;
    padding: 100px 0;
}

.hero h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.hero p {
    font-size: 18px;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* 按钮样式 */
.btn {
    display: inline-block;
    background-color: #c00;
    color: #fff;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s;
}

.btn:hover {
    background-color: #a00;
}

/* 关于我们 */
.intro {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.intro h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: #c00;
}

.intro-content {
    display: flex;
    gap: 40px;
    align-items: center;
}

.intro-text {
    flex: 1;
}

.intro-text p {
    margin-bottom: 20px;
    font-size: 16px;
}

.intro-image {
    flex: 1;
    text-align: center;
}

.intro-image img {
    max-width: 100%;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 新闻动态 */
.news {
    padding: 80px 0;
}

.news h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: #c00;
}

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

.news-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.news-item:hover {
    transform: translateY(-5px);
}

.news-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.date {
    color: #999;
    font-size: 14px;
    margin-bottom: 15px;
}

.news-item p {
    color: #666;
}

.read-more {
    color: #c00;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    margin-top: 15px;
}

.read-more:hover {
    text-decoration: underline;
}

.text-center {
    text-align: center;
}

/* 新闻页面样式 */
.news-content {
    padding: 40px 0;
}

.news-content .news-list {
    grid-template-columns: 1fr;
}

.news-content .news-item {
    padding: 30px;
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.pagination a {
    display: inline-block;
    padding: 10px 15px;
    margin: 0 5px;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.pagination a.active,
.pagination a:hover {
    background-color: #c00;
    color: #fff;
    border-color: #c00;
}

/* 业务范围 */
.services {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.services h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: #c00;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.service-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: transform 0.3s;
}

.service-item:hover {
    transform: translateY(-5px);
}

.service-item h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #c00;
}

.service-item p {
    color: #666;
}

/* 成功案例 */
.cases {
    padding: 80px 0;
}

.cases h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: #c00;
}

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

.case-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
    cursor: pointer;
}

.case-item:hover {
    transform: translateY(-5px);
}

.case-item img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.case-item h3 {
    font-size: 20px;
    padding: 20px 20px 0;
    color: #333;
}

.case-item p {
    color: #666;
    padding: 10px 20px 20px;
}

/* 人才发展 */
.careers {
    padding: 80px 0;
    background-color: #f9f9f9;
}

.careers h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 50px;
    color: #c00;
}

.careers-content {
    gap: 40px;
}

.careers-text {
    flex: 1;
}

.careers-text p {
    margin-bottom: 20px;
    font-size: 16px;
}

.careers-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.stat-item {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

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

.stat-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 15px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.team-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c00"><path d="M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7ZM12 13C16.4183 13 20 15.2386 20 18V21H4V18C4 15.2386 7.58172 13 12 13ZM18 7C18 10.3137 15.3137 13 12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7ZM22 18C22 14.134 18.4183 11 12 11C5.58172 11 2 14.134 2 18V22H22V18Z"/></svg>');
}

.education-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c00"><path d="M22 11.0001V9.00012C22 7.15926 21.136 5.47243 19.728 4.56701L12.848 0.139405C12.3088 -0.205533 11.6912 -0.205533 11.152 0.139405L4.272 4.56701C2.864 5.47243 2 7.15926 2 9.00012V11.0001C2 14.0001 3.5 16.0001 6 18.0001C8.5 20.0001 11 22.0001 12 22.0001C13 22.0001 15.5 20.0001 18 18.0001C20.5 16.0001 22 14.0001 22 11.0001ZM12 20.0001C10.6 18.6001 5 14.0001 4 11.0001V9.00012C4 7.79012 4.656 6.69012 5.728 6.00012L12 2.00012L18.272 6.00012C19.344 6.69012 20 7.79012 20 9.00012V11.0001C19 14.0001 13.4 18.6001 12 20.0001ZM13 12.0001H16L12 16.0001L8 12.0001H11V8.00012H13V12.0001Z"/></svg>');
}

.age-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c00"><path d="M12 2C13.1046 2 14 2.89543 14 4V5H20C20.5523 5 21 5.44772 21 6C21 6.55228 20.5523 7 20 7H19V9H20C20.5523 9 21 9.44772 21 10C21 10.5523 20.5523 11 20 11H19V13H20C20.5523 13 21 13.4477 21 14C21 14.5523 20.5523 15 20 15H19V17H20C20.5523 17 21 17.4477 21 18C21 18.5523 20.5523 19 20 19H14V20C14 21.1046 13.1046 22 12 22C10.8954 22 10 21.1046 10 20V19H4C3.44772 19 3 18.5523 3 18C3 17.4477 3.44772 17 4 17H5V15H4C3.44772 15 3 14.5523 3 14C3 13.4477 3.44772 13 4 13H5V11H4C3.44772 11 3 10.5523 3 10C3 9.44772 3.44772 9 4 9H10V4C10 2.89543 10.8954 2 12 2ZM12 4H12.01V4.01H12V4ZM7 7V9H9V7H7ZM7 11V13H9V11H7ZM7 15V17H9V15H7ZM15 7V9H17V7H15ZM15 11V13H17V11H15ZM15 15V17H17V15H15Z"/></svg>');
}

.number {
    display: block;
    font-size: 36px;
    font-weight: bold;
    color: #c00;
    margin-bottom: 5px;
}

.label {
    font-size: 16px;
    color: #666;
}

/* 人才发展特色 */
.careers-features {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;
    gap: 30px;
}

.feature-item {
    flex: 1;
    text-align: center;
    padding: 30px 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s, box-shadow 0.3s;
}

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

.feature-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.growth-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c00"><path d="M5 20H19V22H5V20ZM8.5 2.78L16.22 11.5L20 8L22 9.5L17.5 15L16.06 13.35L9.5 19.5L2 13.5L3.5 12L8.5 15.5L8.5 2.78Z"/></svg>');
}

.training-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c00"><path d="M12 3L1 9L12 15L21 10.09V17H23V9M5 13.09V18.5L12 22L19 18.5V13.09L12 17L5 13.09Z"/></svg>');
}

.benefits-icon {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23c00"><path d="M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM13 12H16L12 16L8 12H11V8H13V12Z"/></svg>');
}

.feature-item h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #333;
}

.feature-item p {
    color: #666;
    font-size: 16px;
    line-height: 1.5;
}

/* 产品页面样式 */
.products-content {
    padding: 50px 0;
}

.product-categories {
    margin-bottom: 40px;
}

.product-categories ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
}

.product-categories ul li {
    margin-right: 20px;
    margin-bottom: 10px;
}

.product-categories ul li a {
    text-decoration: none;
    color: #333;
    padding: 8px 15px;
    border-radius: 20px;
    background-color: #f0f0f0;
    transition: all 0.3s;
}

.product-categories ul li a:hover,
.product-categories ul li.active a {
    background-color: #c00;
    color: #fff;
}

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

.product-item {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.product-item:hover {
    transform: translateY(-5px);
}

.product-image img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-info {
    padding: 20px;
}

.product-info h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.product-desc {
    color: #666;
    margin-bottom: 20px;
}

/* 服务页面样式 */
.services-content {
    padding: 50px 0;
}

.services-intro {
    text-align: center;
    margin-bottom: 50px;
}

.services-intro h2 {
    font-size: 32px;
    color: #c00;
    margin-bottom: 20px;
}

.services-intro p {
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
    color: #666;
}

.services-content .services-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    margin-bottom: 50px;
}

.services-content .service-item {
    text-align: left;
}

.services-content .service-item ul {
    list-style: none;
    margin-top: 15px;
}

.services-content .service-item ul li {
    padding: 5px 0 5px 20px;
    position: relative;
    color: #666;
}

.services-content .service-item ul li::before {
    content: '✓';
    color: #c00;
    position: absolute;
    left: 0;
}

.service-process {
    background-color: #f9f9f9;
    padding: 50px;
    border-radius: 8px;
}

.service-process h2 {
    text-align: center;
    font-size: 32px;
    color: #c00;
    margin-bottom: 40px;
}

.process-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.step {
    display: flex;
    flex: 1;
    min-width: 200px;
    max-width: 250px;
}

.step-number {
    background-color: #c00;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.step-content p {
    color: #666;
}

/* 知识库页面样式 */
.knowledge-content {
    padding: 50px 0;
}

.knowledge-search {
    display: flex;
    max-width: 500px;
    margin: 0 auto 50px;
}

.knowledge-search input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 16px;
}

.knowledge-search button {
    background-color: #c00;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: bold;
}

.knowledge-categories h2,
.latest-knowledge h2 {
    text-align: center;
    font-size: 32px;
    color: #c00;
    margin-bottom: 30px;
}

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

.category-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.category-item h3 {
    font-size: 20px;
    margin-bottom: 15px;
    color: #c00;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.category-item ul {
    list-style: none;
}

.category-item ul li {
    padding: 8px 0;
    border-bottom: 1px solid #f5f5f5;
}

.category-item ul li:last-child {
    border-bottom: none;
}

.category-item ul li a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.category-item ul li a:hover {
    color: #c00;
}

.knowledge-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(550px, 1fr));
    gap: 30px;
}

.knowledge-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.knowledge-item h3 {
    font-size: 20px;
    margin-bottom: 10px;
    color: #333;
}

.knowledge-item .date {
    color: #999;
    font-size: 14px;
    margin-bottom: 15px;
}

.knowledge-item p {
    color: #666;
}

/* FAQ页面样式 */
.faq-content {
    padding: 50px 0;
}

.faq-search {
    display: flex;
    max-width: 500px;
    margin: 0 auto 30px;
}

.faq-search input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px;
    font-size: 16px;
}

.faq-search button {
    background-color: #c00;
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    font-weight: bold;
}

.faq-categories {
    margin-bottom: 40px;
}

.faq-categories ul {
    display: flex;
    list-style: none;
    flex-wrap: wrap;
    justify-content: center;
}

.faq-categories ul li {
    margin: 0 10px 10px;
}

.faq-categories ul li a {
    text-decoration: none;
    color: #333;
    padding: 8px 15px;
    border-radius: 20px;
    background-color: #f0f0f0;
    transition: all 0.3s;
}

.faq-categories ul li a:hover,
.faq-categories ul li.active a {
    background-color: #c00;
    color: #fff;
}

.faq-item {
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.faq-question {
    padding: 20px;
    background-color: #f9f9f9;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-question h3 {
    font-size: 18px;
    color: #333;
    margin: 0;
}

.toggle {
    font-size: 24px;
    color: #c00;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s, padding 0.3s;
}

.faq-answer p,
.faq-answer ul,
.faq-answer ol {
    margin-bottom: 15px;
    color: #666;
}

.faq-answer ul,
.faq-answer ol {
    padding-left: 20px;
}

.faq-answer li {
    margin-bottom: 8px;
}

.faq-contact {
    text-align: center;
    background-color: #f9f9f9;
    padding: 50px;
    border-radius: 8px;
    margin-top: 50px;
}

.faq-contact h2 {
    font-size: 32px;
    color: #c00;
    margin-bottom: 20px;
}

.faq-contact p {
    font-size: 18px;
    color: #666;
    margin-bottom: 10px;
}

/* 联系方式页面样式 */
.contact-content {
    padding: 50px 0;
}

.contact-intro {
    text-align: center;
    margin-bottom: 50px;
}

.contact-intro h2 {
    font-size: 32px;
    color: #c00;
    margin-bottom: 20px;
}

.contact-intro p {
    font-size: 18px;
    color: #666;
    max-width: 800px;
    margin: 0 auto;
}

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

.department-item {
    background-color: #fff;
    border-radius: 8px;
    padding: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.department-item h3 {
    font-size: 24px;
    color: #c00;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.contact-person {
    margin-bottom: 15px;
}

.contact-person p:first-child {
    font-weight: bold;
    font-size: 18px;
    color: #333;
    margin-bottom: 5px;
}

.contact-person p:last-child {
    color: #666;
}

.contact-note {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 8px;
}

.contact-note h3 {
    font-size: 24px;
    color: #c00;
    margin-bottom: 20px;
    text-align: center;
}

.contact-note ul {
    list-style: none;
    max-width: 800px;
    margin: 0 auto;
}

.contact-note ul li {
    padding: 10px 0 10px 30px;
    position: relative;
    color: #666;
}

.contact-note ul li::before {
    content: '•';
    color: #c00;
    font-size: 24px;
    position: absolute;
    left: 0;
    top: 5px;
}

/* 页脚 */
footer {
    background-color: #333;
    color: #fff;
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
    margin-bottom: 30px;
}

.footer-section h3 {
    font-size: 20px;
    margin-bottom: 20px;
    color: #fff;
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section ul li a:hover {
    color: #fff;
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #555;
    color: #ccc;
    font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
    header .container {
        flex-direction: column;
        padding: 10px;
    }

    .logo {
        margin-bottom: 10px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    nav ul li {
        margin: 5px 10px;
    }

    main {
        margin-top: 120px;
    }

    .hero {
        padding: 60px 0;
    }

    .hero h2 {
        font-size: 28px;
    }

    .page-header h1 {
        font-size: 32px;
    }

    .page-header p {
        font-size: 18px;
    }

    .intro-content,
    .careers-content {
        flex-direction: column;
    }

    .intro-image {
        order: -1;
        margin-bottom: 30px;
    }

    .service-process {
        padding: 30px 15px;
    }

    .process-steps {
        flex-direction: column;
    }

    .step {
        max-width: 100%;
    }

    .faq-contact {
        padding: 30px 15px;
    }

    .contact-note {
        padding: 30px 15px;
    }

    .careers-features {
        flex-direction: column;
    }

    .careers-stats {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .stat-item {
        flex: 1;
        min-width: 120px;
        max-width: 45%;
    }
}