.custom-quote {
    width: 60%;
    margin: 20px auto;
    text-align: center;
    font-style: italic;
    position: relative;
    padding: 20px;
    font-size: 18px; /* Adjust the font size as necessary */
    line-height: 1.6; /* Adjust line height for better readability */
}

.custom-quote::before, .custom-quote::after {
    content: "“"; /* Left double quote */
    font-size: 60px; /* Large size for the quotation marks */
    position: absolute;
    color: #ccc; /* Light color for the quotes, adjust as needed */
}

.custom-quote::after {
    content: "”"; /* Right double quote */
}

.custom-quote::before {
    top: 0;
    left: 10px; /* Adjust for alignment */
}

.custom-quote::after {
    bottom: 0;
    right: 10px; /* Adjust for alignment */
}

.quote-author {
    display: block;
    text-align: right;
    width: 100%;
    margin-top: 10px; /* Space between the quote and the author */
    font-style: normal; /* Overrides the italic style if needed */
    font-size: 16px; /* Smaller font size for the author citation */
    color: #666; /* A subtler color, but can be adjusted as needed */
}

.news-content {
    width: 60%;        /* Set the width of the section to 60% of its parent container */
    margin: 0 auto;    /* Center the section horizontally */
    text-align: left;  /* Align the text to the left within the section */
}

.intro-content {
    width: 60%;        /* Set the width of the section to 60% of its parent container */
    margin: 0 auto;    /* Center the section horizontally */
    text-align: left;  /* Align the text to the left within the section */
}

.image-container-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 100px; /* Space between the two images */
}

.image-box-1 {
    text-align: center; /* Centers the image and the caption within the div */
}

.index-image {
    height: 250px; /* Maintain uniform image height */
}

.news1-image {
    height: 200px; /* Maintain uniform image height */
}

.content-container {
    display: grid;
    grid-template-columns: 1fr auto; /* 文字内容占用剩余空间，图片占用自身宽度 */
    align-items: start; /* 对齐到容器的顶部 */
    gap: 20px; /* 两元素之间的间隔 */
    width: 60%;
    margin: 0 auto; /* 居中显示整个容器 */
}

.news2-content {
    text-align: left; /* 文字左对齐 */
}

.image-container-2 {
    width: auto; /* 图片容器宽度为自动，依图片大小而定 */
}

.news2-image {
    height: 500px; /* 图片高度设置为300px */
    width: auto; /* 宽度自适应，保持图片比例 */
}

@media (max-width: 768px) {
    .content-container {
        grid-template-columns: 1fr; /* 响应式设计，在较小屏幕上改为单列布局 */
    }

    .image-container-2 {
        order: -1; /* 在较小屏幕上图片显示在文本上方 */
    }
}

.additional-image {
    width: 300px; /* 设置图片宽度 */
    display: block; /* 使图片独占一行 */
    margin: 10px auto; /* 在图片的上下添加空间 */
    
}

.image-caption {
    margin-top: 8px;
    font-size: 14px;
    text-align: center; /* Adds a small space between the image and the caption */
}

.page-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 10%;
    margin: 20px auto; /* 与页面其余内容保持一致的水平居中和宽度 */
    padding: 10px 0; /* 稍微添加一些垂直填充 */
}

.nav-link {
    text-decoration: none; /* 移除链接下划线 */
    font-size: 18px; /* 设置适当的字体大小 */
    color: #000; /* 字体颜色，根据需要调整 */
}

footer {
    width: 60%;
    max-width: 100%; /* 确保不超过页面宽度的60% */
    margin: 20px auto; /* 上下间距20px，居中显示 */
    padding: 10px 0; /* 添加一些内填充 */
    text-align: left; /* 设置文字从左侧开始 */
    box-sizing: border-box; /* 包括内填充和边框在内的总宽度 */
}

footer p {
    margin: 0; /* 移除段落默认的外边距 */
}

footer a {
    text-decoration: none; /* 去掉超链接的下划线 */
    color: #1a0dab; /* 设置链接颜色，可调整为符合网站风格的颜色 */
}