/* ============================================
   Hero Section with Video Background
   ============================================ */
.hero {
    position: relative;
    width: 100%;
    height: calc(56.25vw);
    /* 16:9 aspect ratio: 9/16 = 0.5625 */
    min-height: 600px;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: #000000;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    /* Prevent interaction with video controls */
}

/* Video mask to hide browser default controls */
.video-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.8s ease;
    transform: scale(1.1);
    /* Scale up to cover edges without affecting layout/scroll */
}

.video-mask.hidden {
    opacity: 0;
}

/* Ensure content is above mask */
.hero-content {
    position: relative;
    z-index: 2;
}

/* Hide all browser default video controls */
.hero-video::-webkit-media-controls {
    display: none !important;
    opacity: 0 !important;
}

.hero-video::-webkit-media-controls-enclosure {
    display: none !important;
}

.hero-video::-webkit-media-controls-panel {
    display: none !important;
}

.hero-video::-webkit-media-controls-play-button {
    display: none !important;
}

.hero-video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

.hero-video::-webkit-media-controls-overlay-play-button {
    display: none !important;
    opacity: 0 !important;
}

/* For other browsers */
.hero-video::--webkit-media-controls-overlay-enclosure {
    display: none !important;
}

/* Video overlay for better text readability */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: white;
    max-width: 100%;
    padding: 0 50px;
}

.hero-content h1 {
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(32px, 4vw + 1.5rem, 100px);
    font-weight: 700;
    line-height: 1.2;
    color: white;
    text-align: center;
    margin-bottom: 0;
    letter-spacing: 1.2px;
    animation: fadeInUp 1s ease;
    width: 100%;
}

.hero-content p {
    font-size: 18px;
    font-weight: 300;
    margin-top: 15px;
    opacity: 0;
    letter-spacing: 0.5px;
    animation: fadeInUp 1.2s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Container
   ============================================ */
.container {
    /* Fluid padding: 20px (mobile) → 160px (desktop) */
    padding: 0 clamp(20px, 8vw, 160px);
}

/* ============================================
   About Section - Fluid Typography
   ============================================ */
.about {
    background-color: var(--primary-orange);
    /* Fluid padding: 60px → 120px */
    padding: clamp(60px, 10vh, 120px) 0;
}

.about h1 {
    font-family: 'Alibaba PuHuiTi Bold', 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: white;
    font-size: clamp(18px, 2vw + 1.5rem, 65px);
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    /* Fluid margin: 8px → 20px */
    margin: 0 0 clamp(8px, 1.25vw, 20px) 0;
    letter-spacing: 0.3px;
}

.about p {
    font-family: 'Alibaba PuHuiTi Regular', 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: white;
    font-size: clamp(16px, 1.5vw + 1rem, 40px);
    font-weight: 400;
    /* Fluid line-height for better readability */
    line-height: clamp(1.3, 1.3 + 0.3vw, 1.5);
    text-align: justify;
    margin: 0;
    letter-spacing: 0.3px;
}

.about-link {
    font-family: 'Alibaba PuHuiTi Light', 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: white;
    text-decoration: none;
    font-size: clamp(15px, 1vw + 0.8rem, 30px);
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: clamp(20px, 3vw, 40px);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.about-link span {
    transition: text-decoration 0.3s ease;
}

.about-link:hover span {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
}

.about-link i {
    font-size: 0.9em;
}

/* ============================================
   Project & Honor Section
   ============================================ */
.project-honor {
    background-color: black;
    padding: clamp(60px, 10vh, 120px) 0;
    position: relative;
    overflow: hidden;
}

.section-title,
.services-title,
.partners-title,
.news-title {
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: white;
    font-size: clamp(30px, 3vw + 2rem, 100px);
    text-align: center;
    margin: 0 0 clamp(40px, 6vh, 80px) 0;
    letter-spacing: 1px;
}

/* Map Container */
/* Map Container */
.map-container {
    width: 100%;
    max-width: 100%;
    margin: 0 auto clamp(40px, 6vh, 60px);
    position: relative;
}

.map-image {
    width: 100%;
    height: auto;
    display: block;
    opacity: 0.9;
}

/* Bottom Container: Stats + Honors */
.stats-honors-container {
    width: 100%;
    padding: 0 clamp(20px, 3vw, 50px);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 3vw, 50px);
}

/* Statistics Section */
.stats-section {
    padding-right: clamp(40px, 4vw, 70px);
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    gap: clamp(20px, 3vw, 30px) clamp(40px, 6vw, 150px);
    align-items: start;
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: clamp(2px, 1vw, 6px);
}

.stat-number {
    color: white;
    font-size: clamp(20px, 5vw, 90px);
    font-weight: 600;
    line-height: 1;
    margin-bottom: 0;
}

.stat-label {
    color: white;
    font-size: clamp(6px, 1.5vw, 32px);
    font-weight: 200;
    line-height: 1;
    white-space: nowrap;
}

/* Honors Section */
.honors-section {
    display: flex;
    gap: clamp(15px, 2vw, 30px);
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
}

.honor-item {
    display: flex;
    align-items: flex-end;
    gap: clamp(2px, 1vw, 10px);
}

.honor-image-wrapper {
    width: clamp(60px, 8vw, 200px);
    height: clamp(60px, 8vw, 200px);
    border-radius: 8px;
    padding: 1px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.honor-image-wrapper img {
    display: block;
    object-fit: contain;
}

.honor-image1 {
    width: 100%;
    height: 100%;
}

.honor-image2 {
    width: auto;
    height: 100%;
}

.honor-image3 {
    width: 100%;
    height: auto;
}

.honor-count {
    color: white;
    font-size: clamp(12px, 2.5vw, 56px);
    font-weight: 700;
    padding: 0;
    padding-bottom: 2px;
    letter-spacing: 0.1px;
    line-height: 1;
    flex-shrink: 0;
}


/* ============================================
   Responsive Design
   ============================================ */
@media (max-width: 1024px) {
    .hero-content h1 {
        font-size: 60px;
    }
}

@media (max-width: 1500px) {

    /* Project & Honor - medium screen adjustments */
    .stats-honors-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        overflow: visible;
        gap: clamp(30px, 5vw, 60px);
    }

    .stats-section {
        float: none;
        width: 100%;
        justify-content: center;
        gap: clamp(15px, 4vw, 40px);
        margin-bottom: 25px;
        border-right: none;
        padding-right: 0;
    }

    .honors-section {
        float: none;
        width: 100%;
        justify-content: center;
        gap: clamp(15px, 2vw, 30px);

    }

    .stat-item {
        align-items: center;
        text-align: center;
    }

    .honor-item {
        flex-shrink: 0;
    }
}

@media (max-width: 768px) {
    .logo-text {
        font-size: 9px;
    }

    /* Mobile hero: use fixed height */
    .video-mask {
        display: none !important;
    }

    .hero {
        width: 100%;
        height: auto !important;
        min-height: unset !important;
        max-height: none !important;
        aspect-ratio: 16 / 9;
    }

    .hero-content h1 {
        font-size: clamp(24px, 6vw, 40px) !important;
        line-height: 1.2;
        margin-top: 50px;
    }

    .hero-content p {
        font-size: 16px;
    }

    .hero-content {
        padding: 0 30px;
    }

    .nav-menu a {
        font-size: 36px;
    }

    .nav-close {
        right: 30px;
    }

    .about h1 {
        font-size: 24px;
        font-weight: 600;
        line-height: 1.1;
        margin-bottom: 20px;
    }

    /* About section - text alignment adjustment for tablet */
    .about p {
        text-align: justify;
        font-size: 20px;
    }

    /* Project & Honor - mobile tablet adjustments */
    .stats-honors-container {
        flex-direction: column;
        gap: 40px;
    }

    .stats-section {
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px;
        width: 100%;
        overflow-x: visible;
    }

    .stat-item {
        flex: 0 0 40%;
        /* 2 items per row */
        min-width: 110px;
    }



    .honors-section .honor-count {
        margin: 0;
        /* Reset margins */
        text-align: left;
    }

    /* Increase font size for mobile stats (2x2 grid) */
    .stat-number {
        font-size: 32px;
    }

    .stat-label {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 32px;
    }

    /* About section - text alignment adjustment for mobile */
    .about p {
        text-align: left;
    }

    /* Project & Honor - mobile adjustments */
    .stats-section {
        gap: 15px;
    }
}

/* Extra small screens - no font overrides needed (handled by clamp) */
/* ============================================
   Development Cases Section
   ============================================ */
.development-cases {
    width: 100%;
    overflow: hidden;
}

.projects-grid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.project-item {
    position: relative;
    width: 50%;
    /* 4 items per row by default */
    aspect-ratio: 16 / 9;
    /* Standard video/image aspect ratio */
    overflow: hidden;
    cursor: pointer;
}

.project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    /* Semi-transparent black mask */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    /* Hidden by default */
    transition: opacity 0.3s ease;
    padding: 20px;
    text-align: center;
}

.project-title {
    color: white;
    font-family: 'Alibaba PuHuiTi', sans-serif;
    font-size: clamp(20px, 2.5vw + 0.5rem, 40px);
    margin-bottom: 10px;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.project-title a {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.project-title a:hover {
    color: #FF6B35;
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
}

.project-subtitle {
    color: #ffffff;
    font-family: 'Alibaba PuHuiTi', sans-serif;
    font-size: clamp(14px, 1.25vw + 0.25rem, 20px);
    text-transform: uppercase;
    letter-spacing: 1px;
    transform: translateY(20px);
    transition: transform 0.3s ease 0.1s;
    /* Delay for cascade effect */
}

.project-badge {
    position: absolute;
    top: 40px;
    left: 100px;
    width: 60px;
    /* Badge size */
    height: auto;
    z-index: 5;
    /* Above image, below overlay if overlay is z-index 10 */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
    object-fit: contain;
}

/* Hover Effects */
.project-item:hover .project-overlay {
    opacity: 1;
}

.project-item:hover .project-image {
    transform: scale(1.05);
    /* Subtle zoom */
}

.project-item:hover .project-title,
.project-item:hover .project-subtitle {
    transform: translateY(0);
}

/* ============================================
   Projects Responsive
   ============================================ */

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .project-item {
        width: 50%;
    }
}

/* Mobile: 1 column */
@media (max-width: 768px) {

    .honors-section {
        float: none;
        /* 移除浮动 */
        width: 100%;
        /* 占满容器宽度 */
        justify-content: center;
        /* 居中显示 */
        gap: clamp(15px, 2vw, 30px);
        /* 进一步增加间距 */
        padding-right: 0;
        /* 移除右侧padding */
        padding-left: 0;
        /* 移除左侧padding */
    }

    .honor-item {
        /* 进一步放大图标 */
        height: clamp(50px, 15vw, 90px);
        padding: 0px;

    }

    .honor-count {
        font-size: clamp(16px, 4.5vw, 24px);
        /* 进一步放大字体 */
        right: clamp(-32px, -7vw, -26px);
        /* 调整数字位置 */
    }

    .project-item {
        width: 100%;
    }

    /* .project-title font-size handled by clamp in main rules */

    .project-badge {
        width: 30px;
        top: 10px;
        left: 20px;
    }
}

/* ============================================
   View More Bar
   ============================================ */
.view-more-bar {
    display: flex;
    justify-content: center;
    /* Centered text */
    align-items: center;
    background-color: var(--primary-orange);
    /* Matches About Us background */
    color: white !important;
    text-decoration: none;
    height: clamp(50px, 6vw, 85px);
    /* Fluid height */
    font-family: 'Alibaba PuHuiTi Light', 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(15px, 1vw + 0.8rem, 30px);
    /* Fluid font size */
    font-weight: 300;
    text-transform: uppercase;
    width: 100%;
    margin-top: 0;
    transition: background-color 0.3s ease;
}

.view-more-bar span {
    transition: text-decoration 0.3s ease;
}

.view-more-bar:hover span {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
}

.view-more-bar:hover {
    color: white !important;
}

.view-more-bar i {
    margin-left: 10px;
}

/* ============================================
   Services Section
   ============================================ */
.services {
    position: relative;
    background-image: url('../images/1k/service_bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Fluid Padding */
    padding: clamp(60px, 170vh, 140px) 0;
    text-align: center;
    color: white;
}

/* Dark Overlay Removed as per user request (bg image is already blurred) */
/* .services::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1;
} */

.services .container {
    position: relative;
    z-index: 2;
    /* Ensure content is above overlay */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.services-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-left: 20px;
    text-align: left;
    display: inline-block;
}

.services-list li {
    /* Fluid Font Size: Increased to 24px to 40px */
    font-family: 'Alibaba PuHuiTi', sans-serif;
    font-size: clamp(24px, 2.5vw + 0.5rem, 40px);
    margin-bottom: clamp(15px, 2vw, 30px);
    display: flex;
    align-items: flex-start;
    /* 改为顶部对齐，防止圆点被拉伸 */
    line-height: 1.4;
    /* 增加行高，让多行文本更易读 */
}

/* Custom Bullet Points to match design (white dots) */
.services-list li::before {
    content: '';
    display: inline-block;
    width: clamp(16px, 1.8vw, 30px);
    /* Increased size */
    height: clamp(16px, 1.8vw, 30px);
    /* Increased size */
    min-width: clamp(16px, 1.8vw, 30px);
    /* 防止圆点被压缩 */
    min-height: clamp(16px, 1.8vw, 30px);
    /* 防止圆点被压缩 */
    background-color: white;
    border-radius: 50%;
    margin-right: 20px;
    margin-top: 0.4em;
    /* 微调圆点位置，使其与第一行文字对齐 */
    flex-shrink: 0;
    /* 防止圆点在空间不足时被压缩 */
    /* Increased spacing */
}

.services-list li a {
    color: white;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

.services-list li a:hover {
    color: var(--primary-orange);
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
}

/* ============================================
   Partners & Clients Section
   ============================================ */
.partners {
    background-color: var(--primary-orange);
    /* Fluid Padding: Match Services section style */
    padding: clamp(50px, 10vh, 100px) 0;
    text-align: center;
    color: white;
}

.partners-title {
    color: black;
    /* Black title as per design reference */
}

/* Top Partner Logo Container */
.partner-top {
    margin: 0px auto;
    margin-bottom: clamp(30px, 5vw, 60px);
    display: flex;
    max-width: 310px;
    width: auto;
    padding: 5px 0;
    justify-content: center;
    border: 1px #FF6B35 solid;
}

.partner-logo-top {
    /* Fluid widths for the top logo */
    width: clamp(200px, 20vw, 278px);
    height: auto;
    object-fit: contain;
    /* Make it black (assuming logos are colored, ref image shows black/dark logos) */
    /* If logos are already correct color, remove filter. Ref image logos look black. */
    /* Check image color: China Railway is typically blue. Ref shows black. */
    filter: brightness(0);
}

/* Partners Grid */
.partners-grid {
    width: 100%;
    display: grid;
    /* Desktop: 4 columns */
    grid-template-columns: repeat(4, 1fr);
    /* Fluid spacing */
    gap: clamp(20px, 2vw + 0.5rem, 30px);
    justify-items: center;
    align-items: center;
}

/* Partner Logo Wrapper - 固定容器框架 */
.partner-logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 calc(50% - 1rem);
    width: 100%;
    height: 90px;
    border: 1px #FF6B35 solid;
}

.partner-logo {
    /* 图片在容器内自适应 */
    max-width: 100%;
    object-fit: contain;
    /* Black styling */
    filter: brightness(0);
    overflow: clip;
    transition: transform 0.3s ease, filter 0.3s ease;
    display: inline-block;
    vertical-align: middle;
    /* 不设置 width/height，让 HTML 属性可以生效 */
}

/* .partner-logo-wrapper:hover {
    border: 1px black solid;
} */

/* Top logo special styling if needed on hover */
/* .partner-top:hover {
    border: 1px black solid;
} */

/* ============================================
   Partners Responsive
   ============================================ */
/* Desktop: 强制忽略 HTML width 属性 */
@media (min-width: 769px) {
    .partner-logo {
        width: auto !important;
        height: auto !important;
    }
}

@media (max-width: 1024px) {
    .partners-grid {
        grid-template-columns: repeat(3, 1fr);
        /* 3 cols on tablet */
    }
}

@media (max-width: 768px) {

    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;

    }

    .partner-logo-wrapper {
        /* 移动端：更小的容器框架 */
        max-width: 100%;
        width: 100%;
        height: auto;
        padding: 10px 0;
    }

    .partner-logo {
        /* 移动端：不设置 width，让 HTML width 属性生效 */
        max-width: 100%;
    }

    .section-title,
    .services-title,
    .partners-title,
    .news-title {
        font-size: 30px;
    }


}

/* ============================================
   Latest News Section
   ============================================ */
.latest-news {
    background-color: black;
    color: white;
    padding: clamp(60px, 10vh, 120px) 0;
    text-align: center;
    overflow: hidden;
}

.news-main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 3-Column Layout: Left Arrow | Carousel | Right Arrow */
.news-layout {
    display: flex;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
    gap: 20px;
}

/* Arrow Containers */
.news-control-left,
.news-control-right {
    flex: 0 0 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Carousel Wrapper (Middle) */
.news-carousel-wrapper {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    /* Ensure only valid area is visible */
}

.news-carousel {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out;
}

.news-slide {
    flex: 0 0 calc(50% - 20px);
    margin: 0 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.news-image {
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    margin-bottom: 20px;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.news-slide:hover .news-image img {
    transform: scale(1.05);
}

.news-content {
    color: white;
}

.news-date {
    display: block;
    font-family: "Alibaba PuHuiTi Regular", sans-serif;
    font-size: clamp(14px, 1.25vw + 0.25rem, 20px);
    color: #fff;
    margin-bottom: 10px;
    font-weight: normal;
    /* 55 Regular equivalent */
}

.news-headline {
    font-family: 'Alibaba PuHuiTi', sans-serif;
    font-size: clamp(20px, 2vw + 1rem, 30px);
    font-weight: 600;
    line-height: 1.4;
    margin: 0;
}

.news-headline a {
    color: white;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

.news-headline a:hover {
    color: var(--primary-orange);
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
}


/* Slider Logic Adjustments */
.news-carousel-wrapper {
    flex-grow: 1;
    overflow: hidden;
    position: relative;
    /* Ensure only valid area is visible */
    z-index: 1;
}

/* Ensure arrows are above */
.news-control-left,
.news-control-right {
    z-index: 2;
    position: relative;
    /* Helps with stacking context */
}

/* Controls - Static Buttons now */
.carousel-btn {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    width: 60px;
    /* Slightly larger targets */
    height: 60px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    /* Remove absolute positioning */
    position: static;
    transform: none;
    border-radius: 50%;
    /* Optional: round buttons? User didn't specify, but often looks better. let's keep square-ish if style dictates, or maybe standard square */
}

.carousel-btn:hover {
    background-color: var(--primary-orange);
}

/* View More Link */
.news-view-more {
    color: white;
    text-decoration: none;
    font-family: 'Alibaba PuHuiTi Light', 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(15px, 1vw + 0.8rem, 30px);
    font-weight: 300;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    margin-top: 20px;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.news-view-more span {
    transition: text-decoration 0.3s ease;
}

.news-view-more:hover span {
    text-decoration: underline;
    text-underline-offset: 10px;
    text-decoration-thickness: 2px;
}

.news-view-more:hover {
    color: #FF6B35 !important;
}

.news-view-more i {
    margin-left: 10px;
}

/* Responsive */
@media (max-width: 768px) {

    .news-slide {
        flex: 0 0 100%;
        margin: 0;
        /* Removing margin to ensure 100% width fits perfectly */
        padding: 0 10px;
        /* Optional: internal padding if content shouldn't touch edges, but user wants full image? Let's keep small padding inside or 0. User said "full width image".
        Actually user image shows it taking full width. Let's use 0 padding for image, or allow small padding? 
        If margins are gone, 100% flex means it matches the container.
        JS translate 100% will match. */
        padding: 0;
    }

    .news-image {
        /* If we want full width image, padding 0 on slide. */
        margin-bottom: 20px;
    }

    .news-content {
        padding: 0 15px;
        /* Add padding to text content so it doesn't touch screen edges */
    }

    .news-layout {
        /* Mobile: Relative for floating buttons */
        position: relative;
        display: block;
        padding: 0;
        gap: 0;
    }

    .news-carousel-wrapper {
        width: 100%;
        /* Ensure full width */
    }

    .news-control-left,
    .news-control-right {
        /* Floating Arrows on Mobile */
        position: absolute;
        /* Image is 3:2 Aspect Ratio. Width = 100vw (if no padding). Center = 100vw * 0.333 */
        top: calc(100vw * 0.333);
        transform: translateY(-50%);
        z-index: 10;
        width: auto;
        height: auto;
        display: block;
    }

    .news-control-left {
        left: 10px;
    }

    .news-control-right {
        right: 10px;
    }

    .carousel-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
        background-color: rgba(0, 0, 0, 0.5);
        /* Semi-transparent for floating */
    }
}

/* ============================================
   Hero Content & Video Button
   ============================================ */

/* Video Play Button (for WeChat fallback) */
.video-play-btn {
    display: none !important;
    /* Completely hidden - user wants pure black background */
}

.video-play-btn.show {
    display: none !important;
}

.video-play-btn i {
    margin-left: 5px;
    /* Optical centering for play icon */
}



/* ============================================
   Map Lightbox (Mobile)
   ============================================ */
.lightbox {
    display: none;
    /* Hidden by default */
    position: fixed;
    z-index: 10001;
    /* Above header */
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: #000000;
}

.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {
        transform: scale(0)
    }

    to {
        transform: scale(1)
    }
}

.lightbox-close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #FF6B35;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 10005;
    /* Ensure above the image */
}

.lightbox-close:hover,
.lightbox-close:focus {
    color: var(--primary-orange);
    text-decoration: none;
    cursor: pointer;
}

/* Mobile adjustments for lightbox */
/* Mobile adjustments for lightbox */
@media (max-width: 768px) {
    .lightbox-content {
        width: 100%;
        height: auto;
        object-fit: contain;
        /* Standard centered image by default */
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        margin: auto;
        max-width: 100%;
    }

    /* Rotated State */
    .lightbox-content.rotated {
        width: 100vh;
        height: 100vw;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg);
        max-width: none;
    }

    .lightbox {
        display: none;
        padding-top: 0;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        /* Flex centering for default view */
        justify-content: center;
        overflow: hidden;
    }

    /* When active, use flex to center */
    .lightbox.active {
        display: flex;
    }
}

.lightbox-rotate {
    position: absolute;
    top: 70px;
    /* Below close button (15px + 40px size + gap) */
    right: 35px;
    color: #FF6B35;
    font-size: 26px;
    font-weight: bold;
    transition: 0.3s;
    z-index: 10005;
    cursor: pointer;
    display: none;
    /* Only show on mobile if needed, or always? User said "Mobile map" context. Let's show always or mobile only? CSS is mobile driven mostly. */
}

.lightbox-rotate:hover {
    color: var(--primary-orange);
}

@media (max-width: 768px) {
    .lightbox-rotate {
        display: block;
    }
}