body {  
    font-family: Arial, sans-serif;  
}  
  
header {  
    display: flex;  
    justify-content: space-between;  
    align-items: center;  
    padding: 10px 20px;  
    background-color: #fff;  
    border-bottom: 1px solid #ddd;  
}  
  
.logo {  
    display: flex;  
    align-items: center;  
}  
  
.logo img {  
    height: 40px;  
    margin-right: 10px; /* 调整图片和文字之间的间距 */  
}  
  
.logo-text {  
    font-size: 18px; /* 根据需要调整文字大小 */  
    color: #000; /* 根据需要调整文字颜色 */  
}  
  
.right-section {  
    display: flex;  
    align-items: center;  
}  
  
.language-switcher {  
    margin-right: 10px; /* 调整间距使其靠近按钮 */  
}  
  
.premium-button {  
    background-color: #007bff;  
    color: #fff;  
    border: none;  
    padding: 10px 20px;  
    cursor: pointer;  
}  
  
main {  
    padding: 20px;  
}  
  
.hero {  
    display: flex;  
    align-items: center;  
    justify-content: center; /* 居中 */  
    text-align: center;  
    background: linear-gradient(135deg, #007bff, #1e90ff); /* 蓝色背景渐变 */  
    border-radius: 20px;  
    padding: 80px 20px; /* 增加padding来提高整体高度 */  
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);  
    max-width: 1400px; /* 再次增加宽度 */  
    width: 100%;  
    margin: 0 auto; /* 居中 */  
}  
  
.hero-content {  
    max-width: 500px; /* 调整内容区的最大宽度 */  
}  
  
.hero-content h1 {  
    color: #ffffff; /* 将标题颜色改为白色 */  
    margin-bottom: 20px;  
}  
  
.hero-content p {  
    color: #ffffff; /* 将段落文字颜色改为白色 */  
    margin-bottom: 20px;  
}  
  
.hero-content button {  
    padding: 10px 20px;  
    background-color: #6A0DAD;  
    color: #ffffff;  
    border: none;  
    border-radius: 25px;  
    cursor: pointer;  
    font-weight: bold;  
}  
  
.hero-images {  
    position: relative;  
    width: 300px;  
    height: 200px;  
}  
  
.hero-images img {  
    position: absolute;  
    width: 100%;  
    height: auto;  
    border-radius: 15px;  
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);  
}  
  
.hero-images img:first-child {  
    top:-30px;
    width: 120%; /* 增加第一张图片的宽度 */  
    height: 120%;  
}  
  
.hero-images img:nth-child(2) {  
    top: 140px;  
    left: 50px;  
    z-index: 1;  
}  

  
.tools {  
    padding: 20px;  
}  
  
.tool-list {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 20px;  
}  
  
.tool {  
    background-color: #fff;  
    border: 1px solid #ddd;  
    border-radius: 8px;  
    padding: 20px;  
    width: calc(33% - 20px);  
    height: 200px; /* 调整卡片高度 */  
    box-sizing: border-box;  
    text-decoration: none;  
    color: inherit;  
    position: relative; /* 确保图标定位相对于卡片 */  
    transition: transform 0.3s, box-shadow 0.3s;  
}  
  
.tool:hover {  
    transform: translateY(-5px);  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
}  
  
.icon {  
    position: absolute; /* 保持绝对定位 */  
    bottom: 50px; /* 距离底部10px */  
    right: 50px; /* 距离右侧10px */  
    width: 40px; /* 图标大小 */  
    height: 40px; /* 图标大小 */  
}  
  
/* 新增样式规则，使卡片内标题文字变为浅蓝色 */  
.tool h3 {  
    color: #727ee4; /* 浅蓝色 */  
}  




.testimonials {  
    padding: 20px;  
}  
  
.tabs {  
    display: flex;  
    gap: 10px;  
    justify-content: center;  
    margin-bottom: 20px;  
}  
  
.tab {  
    background-color: #f0f0f0;  
    border: none;  
    padding: 10px 20px;  
    cursor: pointer;  
    transition: background-color 0.3s;  
}  
  
.tab.active, .tab:hover {  
    background-color: #007bff;  
    color: #fff;  
}  
  
.tab-content {  
    display: flex;  
    justify-content: center;  
}  
  
.tab-pane {  
    display: none;  
    width: 100%;  
}  
  
.tab-pane.active {  
    display: flex;  
    justify-content: center;  
}  
  
.testimonial {  
    display: flex;  
    background-color: #f9f9f9;  
    border: 1px solid #ddd;  
    border-radius: 8px;  
    padding: 20px;  
    gap: 20px;  
    width: 80%;  
}  
  
.testimonial img {  
    border-radius: 50%;  
    width: 80px;  
    height: 80px;  
    object-fit: cover;  
}  
  
footer {  
    text-align: center;  
    padding: 20px;  
    background-color: #f0f0f0;  
}  
  
.social-icons a img {  
    height: 24px;  
    margin: 0 10px;  
}  
  
/* New Styles for Overview Section */  
.overview {  
    padding: 20px;  
}  
  
.overview-cards {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 20px;  
    justify-content: space-around;  
}  
  
.overview-card {  
    background-color: #fff;  
    border: 1px solid #ddd;  
    border-radius: 8px;  
    padding: 20px;  
    width: calc(33% - 20px);  
    box-sizing: border-box;  
    text-align: center;  
}  
  
.overview-card img {  
    max-width: 100%;  
    height: auto;  
    border-radius: 8px;  
}  
  
.overview-card h3 {  
    margin-top: 10px;  
    margin-bottom: 10px;  
}  
  
.overview-card p {  
    margin: 0;  
}  


.beian {
    font-size: 12px;
    color: #666;
    margin-top: 10px;
}

.beian a {
    color: #666;
    text-decoration: none;
    margin: 0 10px;
}

.beian a:hover {
    color: #333;
}

.beian img {
    vertical-align: middle;
    margin-right: 5px;
    height: 16px;
}