/* Main Color Scheme */
:root {
    --primary-color: #1D3C66;    /* 深蓝色 - 与logo背景一致 */
    --secondary-color: #2d5a8f;  /* 稍亮的蓝色 */
    --accent-color: #ffd700;     /* 金色作为强调色，与logo的金色一致 */
    --accent-blue: #4a9eff;      /* 亮蓝色，与logo的蓝色一致 */
    --text-dark: #1e293b;
    --text-light: #ffffff;
    --bg-light: #f8fafc;         /* 浅色背景 */
    --bg-white: #ffffff;         /* 白色背景 */
    --shadow: 0 4px 6px rgba(29, 60, 102, 0.1);
    --gradient-primary: linear-gradient(135deg, #1D3C66 0%, #2d5a8f 100%);
    --gradient-secondary: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    --gold-gradient: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    --blue-gradient: linear-gradient(135deg, #4a9eff 0%, #2d5a8f 100%);
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 为所有 lead 类添加微软雅黑字体 */
.lead {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
    font-weight: 500; /* 增加字体粗细，让文字不那么细 */
}

/* 通用移动端导航栏间距解决方案 */
@media (max-width: 991.98px) {
    body {
        padding-top: 0; /* 重置body的padding-top */
    }
    
    /* 确保hero-section在所有移动设备上都有足够的顶部间距 */
    .hero-section {
        position: relative;
        z-index: 1;
    }
    
    /* 移动端carousel-content优化 */
    .carousel-content {
        padding-top: 2rem;
    }
    
    /* 移动端carousel-indicators优化，避免与hero-stats重叠 */
    .carousel-indicators {
        bottom: 20px;
        z-index: 10;
    }
    
    .carousel-indicators button {
        width: 10px;
        height: 10px;
        margin: 0 4px;
    }
    
/* 移动端hero-stats通用优化 */
.hero-stats {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    margin-top: 1.5rem;
    width: 100%;
    max-height: none;
    overflow: visible;
    margin-bottom: 80px; /* 为carousel-indicators留出更多空间 */
    padding-bottom: 1rem;
}
    
    .stat-item {
        width: 100%;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
        text-align: center;
    }
    
    /* 确保移动端carousel有足够的高度显示所有内容 */
    .carousel-item .row.align-items-center {
        min-height: 100vh; /* 改为100vh，避免过度覆盖 */
        align-items: flex-start !important;
        padding-top: 2rem;
        padding-bottom: 3rem; /* 增加底部间距 */
    }
    
    /* 移动端hero-content布局优化 */
    .carousel-item .col-lg-6:last-child {
        margin-top: 1rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }
    
    /* 移动端hero-stats容器优化 */
    .carousel-item .col-lg-6:last-child .hero-stats {
        flex: 1;
        justify-content: flex-start;
        min-height: auto;
        max-height: none;
    }
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
    font-weight: 400;
    background-color: var(--bg-light);
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 600;
    line-height: 1.3;
}

/* Navigation */
.navbar {
    background: transparent !important;
    box-shadow: none;
    transition: all 0.4s ease;
    padding: 2rem 0; /* 增加导航栏内边距，为更大的logo留出空间 */
    transform: translateY(0);
    opacity: 1;
}

/* 非首页的导航栏默认显示深色背景 */
body:not(.home-page) .navbar {
    background: var(--gradient-primary) !important;
    box-shadow: 0 2px 20px rgba(29, 60, 102, 0.15);
}

/* 非首页页面的主要内容区域需要足够的顶部间距 */
body:not(.home-page) section:first-of-type {
    margin-top: 160px !important;
}

/* 确保所有section都有正确的显示 */
section {
    position: relative;
    z-index: 2; /* 确保在轮播区域之上 */
}



/* 确保轮播区域不会覆盖其他内容 */
.hero-section {
    z-index: 1;
}

/* 确保轮播内容在正确的层级 */
.carousel {
    z-index: 1;
}

.carousel-item {
    z-index: 1;
}

/* 确保其他section在轮播之上 */
section:not(.hero-section) {
    position: relative;
    z-index: 2;
}

/* 确保轮播区域有明确的高度限制 */
.hero-section {
    min-height: 100vh;
    height: auto;
    overflow: visible;
    position: relative;
    z-index: 1;
    isolation: isolate; /* 创建新的层叠上下文 */
}

/* 确保轮播背景不会超出容器 */
.carousel-background {
    min-height: 100vh;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* 确保背景在正确的层级 */
}

/* 确保轮播覆盖层不会超出容器 */
.carousel-overlay {
    min-height: 100vh;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* 确保覆盖层在正确的层级 */
}

/* 确保轮播内容在正确的层级 */
.carousel-content {
    z-index: 2;
    position: relative;
    min-height: 100vh; /* 最小高度为100vh */
    height: auto; /* 自适应高度 */
    overflow: visible; /* 允许内容溢出以显示完整统计数据 */
}

/* 确保其他section在轮播之上 */
section:not(.hero-section) {
    position: relative;
    z-index: 10;
    background: var(--bg-white); /* 确保有背景色 */
}

/* 特别确保关键section的显示 */
#about, #services, #customize, #culture {
    position: relative;
    z-index: 20;
    background: var(--bg-white);
}

/* 确保所有section都有正确的背景和层级 */
section:not(.hero-section) {
    background: var(--bg-white);
    position: relative;
    z-index: 15;
}

/* 确保轮播区域不会影响其他内容 */
.hero-section {
    z-index: 1;
    isolation: isolate;
    contain: layout; /* 防止布局影响其他元素 */
}





.navbar.scrolled {
    background: var(--gradient-primary) !important;
    box-shadow: 0 2px 20px rgba(29, 60, 102, 0.15);
    padding: 1rem 0; /* 滚动时保持合适的高度 */
}

/* 菜单栏滚动隐藏效果 */
.navbar.navbar-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none; /* 隐藏时禁用交互 */
}

.navbar.navbar-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto; /* 显示时启用交互 */
}

/* 平滑的过渡动画 - 使用更精细的贝塞尔曲线 */
.navbar {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                background 0.4s ease,
                padding 0.4s ease,
                box-shadow 0.4s ease;
    will-change: transform, opacity; /* 优化性能 */
}

/* 确保在移动端滚动时导航栏也有正确的背景 */
@media (max-width: 991.98px) {
    .navbar.scrolled {
        background: var(--gradient-primary) !important;
        box-shadow: 0 2px 20px rgba(29, 60, 102, 0.15);
    }
    
    /* 移动端导航栏优化 */
    .navbar {
        padding: 1.5rem 0; /* 移动端增加padding适应更大logo */
    }
    
    .navbar-brand img {
        height: 80px !important; /* 移动端logo大小 */
    }
    
    /* 移动端hero-section增加上边距，避免被导航栏遮盖 */
    .hero-section {
        padding-top: 120px !important; /* 适应更大的logo和导航栏 */
        margin-top: 0;
    }
    
    /* 移动端hero-title优化 */
    .hero-title {
        font-size: 2rem;
        margin-top: 1rem;
    }
    
    /* 移动端hero-subtitle优化 */
    .hero-subtitle {
        font-size: 1rem;
        margin-top: 1rem;
    }
}

.navbar-brand {
    font-weight: 700;
    font-size: 2.2rem; /* 增大logo字体大小 */
    color: var(--text-light) !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.navbar-brand img {
    height: 120px !important; /* 进一步增大logo图片高度，让logo更显眼 */
    width: auto;
}

.navbar-nav .nav-link {
    color: var(--text-light) !important;
    margin: 0 15px;
    font-weight: 500;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent-color); /* 使用金色下划线 */
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    width: 100%;
}

/* 为Service下拉菜单去掉下划线 */
.nav-item.dropdown .nav-link::after {
    display: none;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--accent-color) !important; /* 悬停时使用金色 */
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 下拉菜单样式 */
.dropdown {
    position: relative;
}

.dropdown-menu {
    background: var(--gradient-primary);
    border: none;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(29, 60, 102, 0.3);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    min-width: 200px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    transition-delay: 0.1s;
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
}

/* 悬停时显示下拉菜单 */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.dropdown-item {
    color: var(--text-light) !important;
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent-color) !important;
    transform: translateX(5px);
    padding-left: 2rem;
}

.dropdown-item:active {
    background: rgba(255, 255, 255, 0.2);
}

/* 下拉箭头样式 */
.dropdown-toggle::after {
    border-top: 0.3em solid var(--text-light);
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    margin-left: 0.5em;
    transition: all 0.3s ease;
}

.dropdown-toggle:hover::after {
    border-top-color: var(--accent-color);
}

/* 移动端下拉菜单样式 */
@media (max-width: 991.98px) {
    .dropdown-menu {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin-top: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: block !important;
    }
    
    .dropdown-item {
        color: var(--text-light) !important;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }
    
    .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.2);
        transform: none;
        padding-left: 1rem;
    }
}

/* 服务区域跳转效果 */
#services {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
}

/* 各个服务模块跳转效果 */
#ocean-freight {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
}

#air-freight {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
}

#rail-freight {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
}

#warehouse {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
}

#lcl-services {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
}

/* Customize区域跳转效果 */
#customize {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
}

/* Culture区域跳转效果 */
#culture {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
}

/* 服务卡片跳转高亮效果 */
.service-card {
    scroll-margin-top: 100px; /* 为固定导航栏留出空间 */
    transition: all 0.3s ease;
}

.service-card:target {
    animation: serviceCardHighlight 2s ease-out;
}

@keyframes serviceCardHighlight {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(29, 60, 102, 0.1);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 8px 25px rgba(29, 60, 102, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 4px 6px rgba(29, 60, 102, 0.1);
    }
}

/* 平滑滚动到服务区域 */
html {
    scroll-behavior: smooth;
}



/* 响应式导航栏样式 */
.navbar-toggler {
    border: none;
    padding: 0.25rem 0.5rem;
    background: transparent;
}

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.navbar.scrolled .navbar-toggler-icon {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.2));
}

/* 手机端导航栏样式 */
@media (max-width: 991.98px) {
    .navbar {
        padding: 0.5rem 0; /* 减少移动端导航栏的内边距 */
        background: var(--gradient-primary) !important; /* 移动端设置深色背景 */
        box-shadow: 0 2px 20px rgba(29, 60, 102, 0.2); /* 添加阴影 */
    }
    
    /* 确保非首页在移动端也有正确的背景色 */
    body:not(.home-page) .navbar {
        background: var(--gradient-primary) !important;
        box-shadow: 0 2px 20px rgba(29, 60, 102, 0.2);
    }
    
    /* 移动端非首页页面的主要内容区域需要足够的顶部间距 */
    body:not(.home-page) section:first-of-type {
        margin-top: 120px !important; /* 移动端导航栏较小，可以减少间距 */
    }
    
    .navbar-collapse {
        background: var(--gradient-primary);
        margin-top: 0.5rem; /* 减少折叠菜单的上边距 */
        padding: 0.75rem;
        border-radius: 8px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    .navbar-nav {
        text-align: center;
    }
    
    .navbar-nav .nav-link {
        margin: 0.3rem 0; /* 减少链接之间的间距 */
        padding: 0.6rem 0.8rem;
        border-radius: 6px;
        transition: all 0.3s ease;
    }
    
    .navbar-nav .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
        transform: translateX(5px);
    }
    
    .navbar-nav .nav-link::after {
        display: none;
    }
    
    .navbar-brand {
        font-size: 1.5rem;
    }
    
    /* 移动端hero-section增加上边距，避免被导航栏遮盖 */
    .hero-section {
        padding-top: 80px !important;
    }
    
    /* 确保移动端所有section都能正常显示 */
    .hero-section,
    .key-highlights,
    .data-stats,
    .about-section,
    .services-section,
    .client-cases,
    .contact-section {
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* 中等屏幕适配 */
@media (max-width: 991.98px) and (min-width: 576px) {
    .hero-stats {
        gap: 0.8rem;
        margin-top: 2rem;
        align-items: center;
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        max-height: none;
        overflow: visible;
        margin-bottom: 80px; /* 确保足够空间 */
        padding-bottom: 1rem;
    }
    
    .stat-item {
        padding: 0.6rem;
        max-width: 240px;
        width: 100%;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }
    
    .stat-number {
        font-size: 1.5rem;
        margin-bottom: 0.25rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
        line-height: 1.3;
    }
    
    /* 确保中等屏幕所有section都能正常显示 */
    .services-section,
    .about-section,
    .contact-section {
        overflow: visible;
        position: relative;
        z-index: 1;
    }
    
    /* 中等屏幕section间距调整 */
    .services-section,
    .about-section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }
}

/* 超小屏幕适配 */
@media (max-width: 575.98px) {
    /* 超小屏幕各个服务模块跳转偏移 */
    #ocean-freight,
    #air-freight,
    #rail-freight,
    #warehouse,
    #lcl-services {
        scroll-margin-top: 140px; /* 超小屏幕导航栏高度进一步调整 */
    }

    .hero-section {
        padding-top: 140px !important; /* 超小屏幕适应更大的logo和导航栏 */
    }
    
    /* 超小屏幕导航栏进一步优化 */
    .navbar {
        padding: 1.2rem 0; /* 超小屏幕增加padding适应logo */
    }
    
    .navbar-brand img {
        height: 65px !important; /* 超小屏幕logo大小 */
    }
    
    .navbar-brand {
        font-size: 1.3rem;
    }
    
    .navbar-collapse {
        margin-top: 0.5rem;
        padding: 0.75rem;
    }
    
    .navbar-nav .nav-link {
        font-size: 0.9rem;
        padding: 0.6rem 0.8rem;
    }
    
    /* 超小屏幕carousel高度优化 */
    .carousel-item .row.align-items-center {
        min-height: 140vh; /* 进一步增加高度确保有足够空间显示所有内容 */
        padding-top: 1rem;
        padding-bottom: 2rem; /* 增加底部间距 */
    }
    
    /* 超小屏幕carousel-indicators进一步优化 */
    .carousel-indicators {
        bottom: 15px;
    }
    
    .carousel-indicators button {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }
    
    /* 超小屏幕hero-stats进一步优化 */
    .hero-stats {
        margin-top: 1rem;
        gap: 0.4rem;
        margin-bottom: 90px; /* 为carousel-indicators留出更多空间 */
        padding-bottom: 1.5rem;
        flex: 1;
        justify-content: flex-start;
    }
    
    .stat-item {
        padding: 0.4rem;
        margin-bottom: 0.3rem;
        flex-shrink: 0; /* 防止统计项被压缩 */
    }
    
    /* 超小屏幕的统计组件优化 */
    .hero-stats {
        gap: 0.5rem;
        margin-top: 1.5rem;
        align-items: center;
        width: 100%;
        flex-direction: column;
        justify-content: flex-start;
        max-height: none;
        overflow: visible;
        margin-bottom: 90px; /* 确保足够空间 */
        padding-bottom: 1.5rem;
    }
    
    .stat-item {
        padding: 0.5rem;
        max-width: 200px;
        border-radius: 8px;
        width: 100%;
        margin-bottom: 0.5rem;
        flex-shrink: 0;
    }
    
    .stat-number {
        font-size: 1.3rem;
        margin-bottom: 0.2rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    /* 确保手机端所有section都能正常显示 */
    .hero-section,
    .key-highlights,
    .data-stats,
    .services-section,
    .about-section,
    .client-cases,
    .contact-section {
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 手机端section间距调整 */
    .services-section,
    .about-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* 手机端卡片布局优化 */
    .service-card,
    .industry-card,
    .tech-card {
        margin-bottom: 1rem;
        height: auto;
        min-height: auto;
    }
    
    /* 手机端图片卡片优化 */
    .about-image-card {
        height: auto;
        min-height: 200px;
        margin-bottom: 1rem;
    }

    /* 手机端服务卡片进一步优化 */
    .service-card {
        margin-bottom: 1.5rem;
    }

    .service-image-container,
    .lcl-image-container {
        height: 200px !important;
        min-height: 200px !important;
        max-height: 200px !important;
        width: calc(100% - 10px) !important;
        min-width: calc(100% - 10px) !important;
        max-width: calc(100% - 10px) !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        position: relative;
        border-radius: 12px;
        margin-left: 10px;
    }

    .service-main-title,
    .lcl-title {
        font-size: 1.3rem;
    }

    .service-text,
    .lcl-text {
        font-size: 0.95rem;
    }

    .service-content,
    .lcl-content {
        padding: 1rem;
    }

    .detail-section {
        padding: 0.6rem;
        margin-bottom: 0.8rem;
    }

    .detail-title {
        font-size: 0.85rem;
    }

    .advantages-title {
        font-size: 0.95rem;
    }

    .advantage-tag {
        font-size: 0.75rem;
        padding: 0.3rem 0.6rem;
    }
}



/* 横屏模式下的导航栏优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .navbar-collapse {
        max-height: 80vh;
        overflow-y: auto;
    }
    
    /* 横屏模式下的统计组件优化 */
    .hero-stats {
        flex-direction: row;
        gap: 0.8rem;
        margin-top: 1.5rem;
        align-items: center;
        width: 100%;
        margin-bottom: 70px; /* 横屏模式也需要空间 */
        padding-bottom: 1rem;
    }
    
    .stat-item {
        flex: 1;
        max-width: none;
        padding: 0.6rem;
        width: 100%;
    }
    
    .stat-number {
        font-size: 1.2rem;
    }
    
    .stat-label {
        font-size: 0.65rem;
    }
}

/* Hero Section */
.hero-section {
    position: relative;
    overflow: visible; /* 允许内容溢出以显示完整统计数据 */
    min-height: 100vh; /* 最小高度为100vh */
    height: auto; /* 自动高度适应内容 */
    z-index: 1; /* 确保正确的层级 */
}

/* Carousel Background */
.carousel-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh; /* 最小高度为100vh */
    height: 100%; /* 自适应高度 */
    animation: backgroundZoom 20s ease-in-out infinite alternate;
    overflow: hidden; /* 防止背景溢出 */
}

@keyframes backgroundZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(29, 60, 102, 0.8) 0%, rgba(45, 90, 143, 0.9) 100%);
    z-index: 1;
    pointer-events: none; /* 确保覆盖层不会阻止内容交互 */
    min-height: 100vh; /* 最小高度为100vh */
    height: 100%; /* 自适应高度 */
}

.carousel-content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100vh; /* 最小高度为100vh */
    height: auto; /* 自适应高度 */
    overflow: visible; /* 允许内容溢出以显示完整统计数据 */
}

/* Carousel Controls */
.carousel-control-prev,
.carousel-control-next {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.3s ease;
    z-index: 5; /* 确保控制按钮在正确的层级 */
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-50%) scale(1.1);
}

.carousel-control-prev {
    left: 30px;
}

.carousel-control-next {
    right: 30px;
}

/* Carousel Indicators */
.carousel-indicators {
    bottom: 30px;
    z-index: 5; /* 确保指示器在正确的层级 */
}

.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin: 0 6px;
    transition: all 0.3s ease;
}

.carousel-indicators button.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    transform: scale(1.2);
}

.carousel-indicators button:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* Carousel Progress Bar */
.carousel-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.2);
    z-index: 5; /* 确保进度条在正确的层级 */
}

.progress-bar {
    height: 100%;
    background: var(--accent-color);
    width: 0%;
    transition: width 0.1s linear;
    animation: progressAnimation 20s linear infinite;
}

@keyframes progressAnimation {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 1.2rem;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 1.5rem;
    opacity: 0.9;
    line-height: 1.5;
    animation: fadeInUp 1s ease-out 0.3s both;
}

.hero-buttons {
    animation: fadeInUp 1s ease-out 0.6s both;
}

.hero-stats {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2.5rem; /* 为导航栏留出更多空间 */
    animation: fadeInRight 1s ease-out 0.9s both;
    align-items: center; /* 居中对齐 */
    width: 100%; /* 确保宽度100% */
}

/* Carousel Item Animations */
.carousel-item.active .hero-title {
    animation: slideInLeft 1s ease-out;
}

.carousel-item.active .hero-subtitle {
    animation: slideInLeft 1s ease-out 0.3s both;
}

.carousel-item.active .hero-buttons {
    animation: slideInLeft 1s ease-out 0.6s both;
}

.carousel-item.active .hero-stats {
    animation: slideInRight 1s ease-out 0.9s both;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.stat-item {
    text-align: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    padding: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, background 0.3s ease;
    width: 100%; /* 确保宽度100% */
    max-width: 280px; /* 设置最大宽度 */
}

.stat-item:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.15);
}

/* 数字滚动动画样式 */
.stat-number {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.25rem;
    transition: all 0.3s ease;
}

.stat-number.animate {
    animation: numberCountUp 2s ease-out forwards;
}

.stat-number.final {
    animation: none;
    transform: scale(1.05);
}

/* 数字滚动动画关键帧 */
@keyframes numberCountUp {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }
    20% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    80% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(0) scale(1.05);
    }
}

/* 数字滚动时的闪烁效果 */
.stat-number.scrolling {
    animation: numberScrolling 0.1s ease-in-out infinite alternate;
}

@keyframes numberScrolling {
    0% {
        opacity: 0.7;
        transform: scale(0.95);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* 数据统计部分的数字样式 */
.data-stats .stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    display: block;
}

.data-stats .stat-number.animate {
    animation: dataStatsCountUp 2s ease-out forwards;
}

@keyframes dataStatsCountUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.7);
    }
    25% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    75% {
        transform: translateY(0) scale(1);
    }
    100% {
        transform: translateY(0) scale(1.1);
    }
}

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

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.carousel-item {
    min-height: 100vh;
    height: auto;
}

.carousel-item img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.carousel-caption {
    background: rgba(0, 51, 102, 0.8);
    padding: 2rem;
    border-radius: 10px;
    max-width: 600px;
    margin: 0 auto;
}

.carousel-caption h1 {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.carousel-caption p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
}

.btn-primary {
    background: var(--accent-color); /* 使用金色背景 */
    border-color: var(--accent-color);
    padding: 15px 35px;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color); /* 深蓝色文字 */
}

.btn-primary:hover {
    background: #e6c200; /* 深一点的金色 */
    border-color: #e6c200;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.btn-outline-primary {
    border: 2px solid var(--accent-color);
    color: var(--accent-color);
    background: transparent;
    padding: 15px 35px;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.btn-outline-primary:hover {
    background: var(--accent-color);
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3);
}

.btn-outline-light {
    border: 2px solid var(--text-light);
    color: var(--text-light);
    padding: 15px 35px;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 8px;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: transparent;
}

.btn-outline-light:hover {
    background: var(--text-light);
    color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

/* Highlights Section */
.highlights-section {
    background-color: var(--bg-light);
}

.highlight-card {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: 10px;
    box-shadow: var(--shadow);
    transition: transform 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(29, 60, 102, 0.1);
}

.highlight-card:hover {
    transform: translateY(-5px);
    border-color: var(--accent-color);
}

.icon-wrapper {
    width: 80px;
    height: 80px;
    background: var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.icon-wrapper i {
    font-size: 2rem;
    color: var(--text-light);
}

/* Section Titles */
.section-title {
    color: var(--primary-color);
    font-weight: bold;
    margin-bottom: 2rem;
    position: relative;
    line-height: 1.3;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* 长标题优化 */
.section-title:contains("—") {
    font-size: 2.2rem;
}

/* 响应式标题优化 */
@media (max-width: 991.98px) {
    .section-title {
        font-size: 2rem;
        max-width: 100%;
        padding: 0 1rem;
    }
    
    .section-title:contains("—") {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .section-title {
        font-size: 1.6rem;
        line-height: 1.4;
    }
    
    .section-title:contains("—") {
        font-size: 1.4rem;
    }
}

@media (max-width: 576px) {
    .section-title {
        font-size: 1.3rem;
        line-height: 1.5;
        padding: 0 0.5rem;
    }
    
    .section-title:contains("—") {
        font-size: 1.2rem;
    }
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: var(--accent-color); /* 使用金色下划线 */
}

/* About Section */
.about-section {
    background-color: var(--bg-light);
}

.about-feature {
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-white);
    border-radius: 12px;
    border-left: 4px solid var(--accent-color); /* 使用金色左边框 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(29, 60, 102, 0.1);
}

.about-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.about-feature h5 {
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.about-feature i {
    color: var(--accent-color); /* 使用金色图标 */
    font-size: 1.2rem;
}

.about-feature p {
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
    margin-bottom: 0;
}

/* About section main image */
.about-section .img-fluid {
    width: 100%;
    height: 500px; /* 增大About部分主图片高度 */
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(29, 60, 102, 0.15);
}

/* About content alignment */
.about-content {
    padding-top: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 500px; /* 与图片高度保持一致 */
}

.about-content .lead {
    margin-bottom: 2rem;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--text-dark);
    font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Hiragino Sans GB", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 确保About section的行高度一致 */
.about-section .row.align-items-start {
    align-items: stretch !important;
}

.about-section .col-lg-6:first-child {
    display: flex;
    align-items: stretch;
}

.about-section .col-lg-6:first-child img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Services Section */
.services-section {
    background-color: var(--bg-light);
}

.service-card {
    background: var(--bg-white);
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(29, 60, 102, 0.1);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid rgba(29, 60, 102, 0.05);
    overflow: hidden;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

/* 统一服务卡片左右布局样式 */
.service-card .row {
    height: 100%;
    align-items: stretch !important;
}

.service-card .col-lg-5,
.service-card .col-lg-7 {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.service-card .col-lg-5 {
    padding: 0;
    justify-content: center;
    align-items: center;
}

.service-card .col-lg-7 {
    padding: 2rem;
    justify-content: center;
}

/* 统一图片容器样式 */
.service-image-container,
.lcl-image-container {
    height: 400px !important;
    min-height: 400px !important;
    max-height: 400px !important;
    width: calc(100% - 15px) !important;
    min-width: calc(100% - 15px) !important;
    max-width: calc(100% - 15px) !important;
    overflow: hidden;
    border-radius: 12px;
    position: relative;
    margin-left: 15px;
}

.service-image-container img,
.lcl-image-container img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.4s ease;
}

.service-image-container:hover img,
.lcl-image-container:hover img {
    transform: scale(1.05);
}

.service-icon {
    width: 80px;
    height: 80px;
    background: var(--gold-gradient); /* 使用金色渐变 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.service-card:hover .service-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
}

.service-icon i {
    font-size: 2rem;
    color: var(--primary-color); /* 深蓝色图标 */
}

/* 优化服务卡片文字排版样式 */
.service-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 1rem;
}

.service-header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.service-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--gold-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0 auto 0 0; /* 确保图标在左侧，垂直居中 */
}

.service-title-section {
    flex: 1;
}

.service-main-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.2;
}

.service-description {
    margin-bottom: 1.5rem;
}

.service-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
    font-weight: 500;
}

.service-text strong {
    color: var(--primary-color);
    font-weight: 700;
}

.service-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.detail-section {
    margin-bottom: 1.2rem;
    padding: 1rem;
    background: rgba(29, 60, 102, 0.02);
    border-radius: 8px;
    border-left: 3px solid var(--accent-color);
}

.detail-section:last-child {
    margin-bottom: 0;
}

.detail-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.detail-title i {
    color: var(--accent-color);
    font-size: 1.1rem;
}

.detail-section p {
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dark);
    margin: 0;
}

/* LCL Services 特殊样式 */
.lcl-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 2rem;
}

.lcl-header {
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
}

.lcl-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: var(--gold-gradient);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    margin: 0 auto 0 0; /* 确保图标在左侧，垂直居中 */
}

.lcl-title-section {
    flex: 1;
}

.lcl-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.2;
}

.lcl-description {
    margin-bottom: 1.5rem;
    border-left: 4px solid var(--accent-color);
    padding-left: 1.5rem;
    background: linear-gradient(90deg, rgba(255, 215, 0, 0.03) 0%, transparent 100%);
    padding: 1.5rem;
    border-radius: 0 8px 8px 0;
}

.lcl-text {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-dark);
    font-weight: 500;
    margin: 0;
}

.lcl-text strong {
    color: var(--primary-color);
    font-weight: 700;
}

.lcl-advantages {
    flex: 1;
    margin-top: 1rem;
    margin-left: -10px;
}

.advantages-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid var(--accent-color);
    padding-bottom: 0.5rem;
    display: inline-block;
}

.advantage-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* 在service-details中的advantage-tags样式调整 */
.service-details .advantage-tags {
    margin-top: 0.5rem;
    gap: 0.5rem;
}

.advantage-tag {
    background: var(--accent-color);
    color: var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.advantage-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
}

.advantage-tag i {
    font-size: 0.9rem;
}

/* Rail Freight 特殊样式 */
.route-list p {
    margin: 0 0 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-dark);
}

.route-list p:last-child {
    margin-bottom: 0;
}

.route-list strong {
    color: var(--primary-color);
    font-weight: 600;
}

/* Sustainability Section */
.sustainability-section {
    background-color: var(--bg-light);
}

.eco-features {
    margin-top: 2rem;
}

.eco-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(29, 60, 102, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(29, 60, 102, 0.1);
}

.eco-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.eco-feature i {
    font-size: 1.8rem;
    margin-right: 1rem;
    min-width: 40px;
    margin-top: 0.2rem;
    color: var(--accent-color); /* 使用金色图标 */
}

.eco-feature h6 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.eco-feature p {
    color: var(--text-dark);
    margin: 0;
    line-height: 1.5;
}

/* Sustainability section images */
.sustainability-section .img-fluid {
    width: 100%;
    height: 300px; /* 统一Sustainability部分图片高度 */
    object-fit: cover;
    border-radius: 15px;
}

/* Industries Section */
.industries-section {
    background-color: var(--bg-light);
}

.industry-card {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(29, 60, 102, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid rgba(29, 60, 102, 0.05);
}

.industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.industry-card:hover {
    transform: translateY(-5px);
}

.industry-icon {
    width: 80px;
    height: 80px;
    background: var(--blue-gradient); /* 使用蓝色渐变 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.industry-card:hover .industry-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(74, 158, 255, 0.3);
}

.industry-icon i {
    font-size: 2rem;
    color: white;
}

/* Technology Section */
.tech-card {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(29, 60, 102, 0.1);
    text-align: center;
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid rgba(29, 60, 102, 0.05);
}

.tech-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.tech-icon {
    width: 80px;
    height: 80px;
    background: var(--gold-gradient); /* 使用金色渐变 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: all 0.3s ease;
}

.tech-card:hover .tech-icon {
    transform: scale(1.1);
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3);
}

.tech-icon i {
    font-size: 2rem;
    color: var(--primary-color); /* 深蓝色图标 */
}

/* Technology section images */
.technology-section .img-fluid {
    width: 100%;
    height: 250px; /* 统一Technology部分图片高度 */
    object-fit: cover;
    border-radius: 15px;
}

/* Contact Section */
.contact-section {
    background-color: var(--bg-light);
}

.contact-info {
    margin-bottom: 2rem;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 2rem;
}

.contact-item i {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-right: 1rem;
    margin-top: 0.25rem;
}

.contact-item h5 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
}

.contact-form .form-control {
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px;
    transition: border-color 0.3s ease;
}

.contact-form .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 204, 102, 0.25);
}

/* Footer */
.footer {
    background-color: #1E3C68;
    color: var(--text-light);
}

/* Footer容器铺满全宽 - 强制覆盖Bootstrap默认样式 */
footer.bg-dark .container,
footer .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

/* 确保footer内的container不受其他样式影响 */
footer .container {
    box-sizing: border-box !important;
}

/* Footer响应式内边距 */
@media (max-width: 576px) {
    footer.bg-dark .container,
    footer .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

@media (min-width: 1200px) {
    footer.bg-dark .container,
    footer .container {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
}

/* Footer Logo */
.footer-logo {
    height: 60px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
    /* 确保logo完整显示，不被压缩 */
    flex-shrink: 0;
    /* 保持原始长宽比 */
    object-position: center;
}

/* Logo容器样式 */
.footer .d-flex.align-items-center {
    flex-shrink: 0;
    min-width: fit-content;
    /* 确保logo容器有足够空间 */
    padding: 0.5rem 0;
}

/* 确保footer logo容器不被压缩 */
.footer .col-lg-4:first-child {
    min-width: 0;
    flex: 1;
}

/* Footer Logo Responsive */
@media (max-width: 768px) {
    .footer-logo {
        height: 50px;
        width: auto;
        max-width: 150px;
    }
}

@media (max-width: 576px) {
    .footer-logo {
        height: 45px;
        width: auto;
        max-width: 120px;
    }
}

/* 确保footer背景色正确显示 */
footer.bg-dark {
    background-color: #1E3C68 !important;
}

/* Footer Social Media Icons */
.social-media-icons {
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 使用更具体的选择器确保优先级 */
footer .social-media-icons .social-icon-link .social-icon {
    width: 36px !important;
    height: 36px !important;
    max-width: 36px !important;
    max-height: 36px !important;
}

.social-icon-link {
    display: inline-block;
    transition: transform 0.3s ease;
}

.social-icon-link:hover {
    transform: translateY(-2px);
}

.social-icon {
    width: 12px !important;
    height: 12px !important;
    object-fit: contain;
    transition: transform 0.3s ease;
    /* 确保图片完整显示，保持原始长宽比 */
    max-width: 12px !important;
    max-height: 12px !important;
}

.social-icon-link:hover .social-icon {
    transform: scale(1.1);
}

/* 确保图标容器有足够空间 */
.social-icon-link {
    min-width: 16px !important;
    min-height: 16px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.footer h5, .footer h6 {
    color: var(--accent-color);
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-color);
}

.social-links {
    margin-top: 1rem;
}

.social-link {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--accent-color);
    color: white;
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: #00b359;
    transform: translateY(-2px);
}

.payment-methods i {
    font-size: 2rem;
    margin-right: 1rem;
    color: var(--accent-color);
}

.shipping-partners span {
    display: inline-block;
    background: var(--accent-color);
    color: white;
    padding: 5px 15px;
    border-radius: 20px;
    margin: 5px;
    font-size: 0.9rem;
}

/* Image Cards and Overlays */
.about-image-card,
.sustainability-image-card {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 280px; /* 统一高度 */
}

.about-image-card:hover,
.sustainability-image-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

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

.about-image-card:hover img,
.sustainability-image-card:hover img {
    transform: scale(1.05);
}

.image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: white;
    padding: 20px;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.about-image-card:hover .image-overlay,
.sustainability-image-card:hover .image-overlay,
.about-image-card.visible .image-overlay,
.sustainability-image-card.visible .image-overlay {
    transform: translateY(0);
}

.image-overlay h6 {
    margin: 0 0 5px 0;
    font-weight: 600;
    font-size: 1.1rem;
}

.image-overlay p {
    margin: 0;
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Service Cards with Images */
.service-card .service-image {
    height: 250px; /* 统一服务卡片图片高度 */
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    margin-bottom: 20px;
}

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

.service-card:hover .service-image img {
    transform: scale(1.1);
}

/* Industry Cards with Images */
.industry-card .industry-image {
    height: 200px; /* 统一行业卡片图片高度 */
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    margin-bottom: 15px;
}

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

.industry-card:hover .industry-image img {
    transform: scale(1.1);
}

/* Technology Cards with Images */
.tech-card .tech-image {
    height: 220px; /* 统一技术卡片图片高度 */
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    margin-bottom: 20px;
}

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

.tech-card:hover .tech-image img {
    transform: scale(1.1);
}

/* Image Gallery Styles */
.row.g-3 img,
.row.g-4 img {
    width: 100%;
    height: 200px; /* 统一画廊图片高度 */
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.row.g-3 img:hover,
.row.g-4 img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Enhanced Card Hover Effects */
.service-card:hover,
.industry-card:hover,
.tech-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Responsive Image Adjustments */
@media (max-width: 768px) {
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }
    
    .section-title {
        text-align: center;
    }
    
    .section-title::after {
        left: 50%;
        transform: translateX(-50%);
        width: 60px;
    }
    
    .hero-stats {
        margin-top: 2rem;
        flex-direction: row;
        justify-content: space-around;
    }
    
    .stat-item {
        flex: 1;
        margin: 0 0.5rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-label {
        font-size: 0.8rem;
    }
    

    
    .carousel-control-prev,
    .carousel-control-next {
        width: 50px;
        height: 50px;
    }
    
    .carousel-control-prev {
        left: 15px;
    }
    
    .carousel-control-next {
        right: 15px;
    }
    
    .highlight-card,
    .service-card,
    .industry-card {
        margin-bottom: 2rem;
    }

    .service-card .service-image,
    .industry-card .industry-image,
    .tech-card .tech-image {
        height: 120px;
    }

    /* 服务卡片响应式优化 */
    .service-card {
        margin-bottom: 2rem;
    }

    .service-card .row {
        flex-direction: column;
        height: auto;
    }

    .service-card .col-lg-5,
    .service-card .col-lg-7 {
        width: 100%;
        height: auto;
        padding: 0;
        justify-content: center;
        align-items: center;
    }

    .service-card .col-lg-7 {
        padding: 1.5rem;
        justify-content: flex-start;
        align-items: stretch;
    }

    .service-image-container,
    .lcl-image-container {
        height: 250px !important;
        min-height: 250px !important;
        max-height: 250px !important;
        width: calc(100% - 12px) !important;
        min-width: calc(100% - 12px) !important;
        max-width: calc(100% - 12px) !important;
        border-radius: 12px;
        margin-bottom: 0;
        display: flex !important;
        align-items: center;
        margin-left: 12px;
        justify-content: center;
        overflow: hidden;
        position: relative;
    }

    .service-content,
    .lcl-content {
        padding: 1.5rem;
        height: auto;
    }

    .service-main-title,
    .lcl-title {
        font-size: 1.5rem;
    }

    .service-text,
    .lcl-text {
        font-size: 1rem;
    }

    .detail-section {
        padding: 0.8rem;
        margin-bottom: 1rem;
    }

    .detail-title {
        font-size: 0.9rem;
    }

    .advantages-title {
        font-size: 1rem;
    }

    .advantage-tags {
        flex-direction: column;
        gap: 0.5rem;
    }

    .advantage-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .about-image-card .image-overlay,
    .sustainability-image-card .image-overlay {
        padding: 15px;
    }
    
    .image-overlay h6 {
        font-size: 1rem;
    }
    
    .image-overlay p {
        font-size: 0.8rem;
    }
    
    /* 移动端图片尺寸调整 */
    .about-image-card,
    .sustainability-image-card {
        height: 200px;
    }
    
    .about-section .img-fluid,
    .sustainability-section .img-fluid,
    .technology-section .img-fluid {
        height: 250px;
    }
    
    .case-image {
        height: 200px;
    }
    
    .row.g-3 img,
    .row.g-4 img {
        height: 150px;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .btn-primary,
    .btn-outline-light {
        padding: 12px 25px;
        font-size: 0.9rem;
    }
    
    .hero-stats {
        flex-direction: column;
        gap: 1rem;
    }
    
    .stat-item {
        margin: 0;
    }
    
    .stat-number {
        font-size: 1.8rem;
    }
    
    .stat-label {
        font-size: 0.75rem;
    }
    

    
    .navbar-brand {
        font-size: 1.5rem;
    }
}

/* Contact Section Styles */
#contact {
    background: var(--gradient-primary);
    position: relative;
    overflow: hidden;
}

#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
}

.contact-info-card,
.contact-form-card {
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.contact-info-card:hover,
.contact-form-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    border-color: var(--accent-color); /* 使用金色边框 */
}

/* 优化调整后的contact布局 */
#contact .row.justify-content-center {
    max-width: 1200px;
    margin: 0 auto;
}

#contact .contact-info-card {
    min-height: 400px;
    display: flex;
    flex-direction: column;
}

#contact .contact-info-card h4 {
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 1rem;
}

#contact .contact-feature {
    padding: 1.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

#contact .contact-feature:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color); /* 使用金色边框 */
}

.contact-info-card h4,
.contact-form-card h4 {
    color: white;
    font-weight: 600;
    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
    padding-bottom: 15px;
}

.contact-info-card h6 {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--accent-color); /* 使用金色标题 */
}

.contact-info-card p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

.contact-form-card .form-control,
.contact-form-card .form-select {
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: white !important;
    transition: all 0.3s ease;
}

.contact-form-card .form-control::placeholder,
.contact-form-card .form-select {
    color: rgba(255, 255, 255, 0.7) !important;
}

.contact-form-card .form-control:focus,
.contact-form-card .form-select:focus {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: var(--accent-color) !important; /* 使用金色边框 */
    box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.25) !important;
}

.contact-form-card .btn-warning {
    background: var(--gold-gradient); /* 使用金色渐变 */
    border: none;
    color: var(--primary-color);
    font-weight: 600;
    transition: all 0.3s ease;
}

.contact-form-card .btn-warning:hover {
    background: linear-gradient(45deg, #e6c200, #ffd700);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
}

.contact-feature {
    padding: 20px;
    transition: all 0.3s ease;
}

.contact-feature:hover {
    transform: translateY(-5px);
}

.contact-icon {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: all 0.3s ease;
}

.contact-feature:hover .contact-icon {
    background: rgba(255, 215, 0, 0.2); /* 使用金色背景 */
    transform: scale(1.1);
}

.contact-feature h6 {
    color: white;
    font-weight: 600;
    margin-bottom: 10px;
}

.contact-feature p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
}

/* Footer */
.footer {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.footer h5, .footer h6 {
    color: var(--accent-color); /* 使用金色标题 */
    margin-bottom: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
}

.footer-links li {
    margin-bottom: 0.5rem;
}

.footer-links a {
    color: var(--text-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--accent-color); /* 悬停时使用金色 */
}

.social-links {
    margin-top: 1rem;
}

.social-link {
    display: inline-block;
    width: 40px;
    height: 40px;
    background: var(--accent-color); /* 使用金色背景 */
    color: var(--primary-color);
    text-align: center;
    line-height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: #e6c200;
    transform: translateY(-2px);
}

.payment-methods i {
    font-size: 2rem;
    margin-right: 1rem;
    color: var(--accent-color); /* 使用金色图标 */
}

.shipping-partners span {
    display: inline-block;
    background: var(--accent-color); /* 使用金色背景 */
    color: var(--primary-color);
    padding: 5px 15px;
    border-radius: 20px;
    margin: 5px;
    font-size: 0.9rem;
}

/* 超小手机设备 (320px以下) */
@media (max-width: 320px) {
    .hero-title {
        font-size: 1.8rem;
    }
    
    .hero-subtitle {
        font-size: 0.8rem;
    }
    
    .section-title {
        font-size: 1.4rem;
    }
    
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .about-image-card,
    .sustainability-image-card {
        height: 160px;
    }
    
    .service-card .service-image,
    .industry-card .industry-image,
    .tech-card .tech-image {
        height: 100px;
    }
    
    .case-image {
        height: 140px;
    }
    
    .row.g-3 img,
    .row.g-4 img {
        height: 100px;
    }
}

/* 横屏手机优化 */
@media (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        min-height: 100vh;
    }
    
    .hero-title {
        font-size: 2.2rem;
    }
    
    .hero-subtitle {
        font-size: 1rem;
    }
    
    .hero-stats {
        margin-top: 1rem;
    }
    
    .stat-item {
        padding: 8px 6px;
    }
    
    .stat-number {
        font-size: 1.6rem;
    }
    
    .stat-label {
        font-size: 0.7rem;
    }
}

/* 高分辨率屏幕优化 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .carousel-background {
        background-size: cover;
        background-position: center;
    }
    
    .image-overlay {
        backdrop-filter: blur(15px);
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .highlight-card:hover,
    .service-card:hover,
    .industry-card:hover,
    .tech-card:hover,
    .case-card:hover {
        transform: none;
    }
    
    .about-image-card:hover .image-overlay,
    .sustainability-image-card:hover .image-overlay {
        opacity: 1;
    }
    
    .service-card:hover .service-image img,
    .industry-card:hover .industry-image img,
    .tech-card:hover .tech-image img,
    .case-card:hover .case-image img {
        transform: none;
    }
    
    .navbar-nav .nav-link:hover::after {
        width: 0;
    }
    
    .navbar-nav .nav-link.active::after {
        width: 100%;
    }
}

/* 打印样式优化 */
@media print {
    .navbar,
    .carousel-control-prev,
    .carousel-control-next,
    .carousel-indicators,
    .carousel-progress,
    .btn {
        display: none !important;
    }
    
    .hero-section {
        min-height: auto;
        page-break-after: always;
    }
    
    .section-title::after {
        display: none;
    }
    
    .highlight-card,
    .service-card,
    .industry-card,
    .tech-card,
    .case-card {
        break-inside: avoid;
        margin-bottom: 1rem;
    }
}

/* 响应式菜单栏动画优化 */
@media (max-width: 991.98px) {
    .navbar {
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    background 0.3s ease,
                    padding 0.3s ease,
                    box-shadow 0.3s ease;
    }
    
    /* 移动端菜单栏动画稍微快一些 */
    .navbar.navbar-hidden {
        transform: translateY(-100%);
        opacity: 0;
    }
    
    .navbar.navbar-visible {
        transform: translateY(0);
        opacity: 1;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .navbar {
        transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    opacity 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    background 0.3s ease,
                    padding 0.3s ease,
                    box-shadow 0.3s ease;
    }
    
    /* 触摸设备上的section显示优化 */
    section {
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    .services-section,
    .about-section,
    .contact-section,
    .client-cases {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 触摸设备carousel优化 */
    .carousel-indicators {
        bottom: 25px;
        z-index: 15;
    }
    
    .carousel-indicators button {
        width: 12px;
        height: 12px;
        margin: 0 5px;
        cursor: pointer;
    }
    
    /* 触摸设备hero-stats优化 */
    .hero-stats {
        margin-bottom: 85px; /* 为carousel-indicators留出更多空间 */
        padding-bottom: 1.5rem;
        flex: 1;
        justify-content: flex-start;
        min-height: auto;
        max-height: none;
    }
    
    /* 触摸设备stat-item优化 */
    .hero-stats .stat-item {
        flex-shrink: 0;
        margin-bottom: 0.5rem;
    }
    
    /* LCL服务优势标签样式 */
    .lcl-advantages {
        margin-top: 1rem;
        margin-left: -10px;
    }
    
    .advantage-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .advantage-tag {
        background: var(--accent-color);
        color: var(--primary-color);
        padding: 0.3rem 0.8rem;
        border-radius: 20px;
        font-size: 0.85rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
        transition: all 0.3s ease;
    }
    
    .advantage-tag:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 8px rgba(255, 215, 0, 0.4);
    }
    
    /* 语言切换按钮样式 */
    .language-switch {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        padding: 0.5rem 1rem !important;
        margin-left: 1rem;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .language-switch:hover {
        background: rgba(255, 255, 255, 0.2);
        border-color: var(--accent-color);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.3);
    }
    
    .language-switch i {
        color: var(--accent-color);
    }
    
    /* 移动端语言切换按钮优化 */
    @media (max-width: 991.98px) {
        .language-switch {
            margin-left: 0;
            margin-top: 0.5rem;
            text-align: center;
        }
    }
    
    /* LCL Services 特色卡片样式 */
    .lcl-featured {
        border: 3px solid var(--accent-color) !important;
        box-shadow: 0 8px 30px rgba(255, 215, 0, 0.3) !important;
        transform: scale(1.02);
        transition: all 0.3s ease;
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.05) 0%, rgba(255, 215, 0, 0.1) 100%);
    }
    
    .lcl-featured:hover {
        transform: scale(1.03);
        box-shadow: 0 12px 40px rgba(255, 215, 0, 0.4) !important;
    }
    
    .lcl-featured .service-icon {
        background: var(--gold-gradient) !important;
        transform: scale(1.1);
        box-shadow: 0 5px 20px rgba(255, 215, 0, 0.4);
    }
    
         .lcl-featured .service-icon i {
         color: var(--primary-color) !important;
         font-size: 2.2rem !important;
     }
     
     .lcl-featured h4 {
         color: var(--primary-color);
         font-size: 1.8rem;
         font-weight: 700;
         margin-bottom: 1rem;
     }
     
     .lcl-featured p {
         font-size: 1.1rem;
         line-height: 1.6;
         color: var(--text-dark);
         margin-bottom: 1.5rem;
     }
     
     /* LCL Services 左右布局样式 */
     .lcl-image-container {
         position: relative;
         overflow: hidden;
         border-radius: 12px;
         box-shadow: 0 8px 25px rgba(29, 60, 102, 0.15);
         height: 400px !important; /* 统一高度为400px */
         min-height: 400px !important; /* 设置最小高度 */
         max-height: 400px !important; /* 设置最大高度限制 */
         width: 100% !important; /* 确保宽度100% */
         min-width: 100% !important;
         max-width: 100% !important;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0 !important; /* 防止被压缩 */
         flex: 1 !important; /* 弹性填充 */
     }
     
     /* 强制覆盖Bootstrap的行高限制，让左右两侧高度一致 */
     .lcl-featured .row {
         align-items: stretch !important; /* 强制拉伸对齐 */
         min-height: auto !important; /* 自动适应内容高度 */
         height: auto !important; /* 自动高度 */
         display: flex !important;
     }
     
     /* 确保左右两列高度一致 */
     .lcl-featured .col-lg-5,
     .lcl-featured .col-lg-7 {
         height: auto !important; /* 自动高度，适应内容 */
         display: flex !important;
         flex-direction: column !important;
         align-items: stretch !important; /* 拉伸对齐 */
     }
     
     /* 左侧图片列 - 强制与右侧等高 */
     .lcl-featured .col-lg-5 {
         justify-content: stretch !important; /* 拉伸填充 */
         flex: 1 !important; /* 弹性填充 */
     }
     
     /* 右侧文字列 - 作为高度参考 */
     .lcl-featured .col-lg-7 {
         justify-content: flex-start !important; /* 从顶部开始排列 */
         flex: 1 !important; /* 弹性填充 */
     }
     
     .lcl-image-container img {
         transition: transform 0.3s ease;
         width: 100% !important; /* 强制宽度100% */
         height: 100% !important; /* 强制高度100% */
         object-fit: cover !important; /* 保持图片比例，填充整个容器 */
         object-position: center !important; /* 图片居中显示，允许任意裁剪 */
         flex-shrink: 0 !important; /* 防止图片被压缩 */
     }
     
     .lcl-image-container:hover img {
         transform: scale(1.05);
     }
     
     .lcl-content {
         padding-left: 2.5rem;
         height: auto !important; /* 自动高度，适应内容 */
         display: flex !important;
         flex-direction: column !important;
         justify-content: flex-start !important; /* 从顶部开始排列 */
         flex: 1 !important; /* 弹性填充 */
     }
     
     .lcl-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-bottom: 1.5rem;
}
     
     .lcl-icon {
         background: var(--gold-gradient) !important;
         width: 60px;
         height: 60px;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         box-shadow: 0 6px 20px rgba(255, 215, 0, 0.5);
         flex-shrink: 0;
         transition: all 0.3s ease;
         margin: 0 auto 0 0; /* 确保图标在左侧，垂直居中 */
     }
     
     .lcl-icon:hover {
         transform: scale(1.1);
         box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
     }
     
     .lcl-title-section {
         flex: 1;
     }
     
     .lcl-title {
         color: var(--primary-color);
         font-size: 2.5rem;
         font-weight: 800;
         margin: 0 0 0.5rem 0;
         text-transform: uppercase;
         letter-spacing: 2px;
         line-height: 1.2;
     }
     
     .lcl-subtitle {
         color: var(--secondary-color);
         font-size: 1.1rem;
         font-weight: 500;
         font-style: italic;
         margin: 0;
         opacity: 0.8;
     }
     
     .lcl-description {
         border-left: 5px solid var(--accent-color);
         padding-left: 2rem;
         margin-left: 0.5rem;
         background: linear-gradient(90deg, rgba(255, 215, 0, 0.05) 0%, transparent 100%);
         padding: 1.5rem 2rem;
         border-radius: 0 8px 8px 0;
     }
     
     .description-highlight {
         position: relative;
     }
     
     .lcl-text {
         font-size: 1.3rem;
         line-height: 1.8;
         color: var(--text-dark);
         margin: 0;
         font-weight: 500;
     }
     
     .lcl-text strong {
         color: var(--primary-color);
         font-weight: 700;
     }
     
     .lcl-text em {
         color: var(--secondary-color);
         font-style: italic;
         font-weight: 600;
     }
     
     .advantages-title {
         color: var(--primary-color);
         font-size: 1.4rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1px;
         border-bottom: 3px solid var(--accent-color);
         padding-bottom: 0.8rem;
         display: inline-block;
         margin-bottom: 1.5rem;
     }
     
     .advantages-title i {
         animation: starTwinkle 2s ease-in-out infinite;
     }
     
     @keyframes starTwinkle {
         0%, 100% { opacity: 1; transform: scale(1); }
         50% { opacity: 0.7; transform: scale(1.1); }
     }
    
    /* LCL优势标签样式优化 */
    .lcl-advantages {
        margin-top: 1rem;
        margin-left: -10px;
    }

    /* 移动端service-details中的advantage-tags样式 */
    .service-details .advantage-tags {
        flex-direction: column;
        gap: 0.5rem;
        margin-top: 0.5rem;
    }
    
    .lcl-advantages h6 {
        font-size: 1rem;
        font-weight: 600;
        margin-bottom: 0.8rem;
    }
    
    .advantage-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 3rem;
    }
    
         .advantage-tag {
         background: linear-gradient(135deg, var(--accent-color) 0%, #ffed4e 100%);
         color: var(--primary-color);
         padding: 0.6rem 1.2rem;
         border-radius: 25px;
         font-size: 0.9rem;
         font-weight: 700;
         text-transform: uppercase;
         letter-spacing: 1px;
         box-shadow: 0 4px 12px rgba(255, 215, 0, 0.4);
         transition: all 0.3s ease;
         border: 2px solid transparent;
         display: inline-flex;
         align-items: center;
         gap: 0.5rem;
     }
     
     .advantage-tag:hover {
         transform: translateY(-3px) scale(1.05);
         box-shadow: 0 8px 20px rgba(255, 215, 0, 0.6);
         border-color: var(--primary-color);
         background: linear-gradient(135deg, #ffed4e 0%, var(--accent-color) 100%);
     }
     
     .advantage-tag i {
         font-size: 1rem;
         color: var(--primary-color);
     }
    
         /* 移动端LCL特色卡片优化 */
     @media (max-width: 991.98px) {
         .lcl-featured {
             transform: none;
             margin-bottom: 2rem;
         }
         
         .lcl-featured:hover {
             transform: none;
         }
         
         .lcl-featured h4 {
             font-size: 1.6rem;
         }
         
         .lcl-featured p {
             font-size: 1rem;
         }
         
         .advantage-tags {
             flex-direction: column;
             gap: 1.5rem;
         }
         
         .advantage-tag {
             font-size: 0.8rem;
             padding: 0.3rem 0.6rem;
         }
         
         /* 移动端LCL左右布局优化 */
         .lcl-featured .row {
             flex-direction: column;
         }
         
         .lcl-featured .col-lg-5,
         .lcl-featured .col-lg-7 {
             width: 100%;
             margin-bottom: 1.5rem;
         }
         
                 .lcl-image-container {
            height: 300px !important; /* 移动端固定高度 */
            min-height: 300px !important; /* 移动端最小高度 */
            max-height: 300px !important;
            width: 100% !important;
            min-width: 100% !important;
            max-width: 100% !important;
            flex-shrink: 0 !important;
            position: relative !important;
            display: flex !important;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* 移动端图片样式 */
        .lcl-image-container img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            object-position: center !important;
        }
         
         /* 移动端自动行高 */
         .lcl-featured .row {
             min-height: auto !important;
         }
         
         /* 移动端列高度一致 */
         .lcl-featured .col-lg-5,
         .lcl-featured .col-lg-7 {
             height: auto !important; /* 移动端自动高度 */
         }
         
         .lcl-content {
             text-align: center;
         }
     }
}

/* 高刷新率屏幕优化 */
@media (min-resolution: 120dpi) {
    .navbar {
        transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                    opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                    background 0.4s ease,
                    padding 0.4s ease,
                    box-shadow 0.4s ease;
    }
}

/* 响应式数字动画优化 */
@media (max-width: 768px) {
    .stat-number.animate {
        animation: numberCountUp 1.5s ease-out forwards;
    }
    
    .data-stats .stat-number.animate {
        
    /* 移动端hero-stats完整显示优化 */
    .hero-stats {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.8rem !important;
        margin-top: 1.5rem !important;
        width: 100% !important;
        max-height: none !important;
        overflow: visible !important;
        margin-bottom: 90px !important; /* 为carousel-indicators留出更多空间 */
        padding-bottom: 1.5rem !important;
    }
    
    .hero-stats .stat-item {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0.5rem !important;
        flex-shrink: 0 !important;
        text-align: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* 确保第三个统计项可见 */
    .hero-stats .stat-item:nth-child(3) {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        margin-bottom: 0 !important;
    }
    
    /* 移动端LCL服务优化 */
    .advantage-tags {
        flex-direction: column;
        gap: 1.5rem;
    }
    
    .advantage-tag {
        font-size: 0.8rem;
        padding: 0.25rem 0.6rem;
    }
        animation: dataStatsCountUp 1.5s ease-out forwards;
    }
    
    /* 移动端数字稍微小一些 */
    .stat-number {
        font-size: 2rem;
    }
    
    .data-stats .stat-number {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .stat-number.animate {
        animation: numberCountUp 1.2s ease-out forwards;
    }
    
    .data-stats .stat-number.animate {
        animation: dataStatsCountUp 1.2s ease-out forwards;
    }
    
    /* 小屏幕设备数字更小 */
    .stat-number {
        font-size: 1.8rem;
    }
    
    .data-stats .stat-number {
        font-size: 2.2rem;
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .stat-number.animate {
        animation: numberCountUp 1.5s ease-out forwards;
    }
    
    .data-stats .stat-number.animate {
        animation: dataStatsCountUp 1.5s ease-out forwards;
    }
}

/* 高刷新率屏幕优化 */
@media (min-resolution: 120dpi) {
    .stat-number.scrolling {
        animation: numberScrolling 0.05s ease-in-out infinite alternate;
    }
}

/* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
    .stat-number.animate,
    .data-stats .stat-number.animate {
        animation: none;
        opacity: 1;
        transform: none;
    }
    
    .stat-number.scrolling {
        animation: none;
    }
}

/* Key Highlights Section - 慕枫设计理念：巅峰体验 */
.key-highlights {
    background: var(--gradient-secondary);
    position: relative;
    overflow: hidden;
}

.key-highlights::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="dots" width="20" height="20" patternUnits="userSpaceOnUse"><circle cx="10" cy="10" r="1" fill="%231D3C66" opacity="0.3"/></pattern></defs><rect width="100" height="100" fill="url(%23dots)"/></svg>');
    opacity: 0.5;
}

.highlight-card {
    background: var(--bg-white);
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); /* 默认显示悬浮后的阴影 */
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--accent-color); /* 默认显示金色边框 */
    transform: translateY(-8px); /* 默认向上位移，模拟悬浮效果 */
}

.highlight-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.2), transparent);
    transition: left 0.5s;
}

.highlight-card:hover::before {
    left: 100%;
}

.highlight-card:hover {
    transform: translateY(-15px) scale(1.02); /* 悬浮时进一步向上和放大 */
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2); /* 悬浮时阴影更深 */
    border-color: var(--accent-color);
}

.highlight-icon {
    position: relative;
    z-index: 2;
    width: 80px;
    height: 80px;
    background: var(--gold-gradient); /* 默认显示金色渐变背景 */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 5px 20px rgba(255, 215, 0, 0.3); /* 默认显示阴影 */
}

.highlight-icon i {
    color: var(--primary-color) !important; /* 强制使用深蓝色图标 */
    font-size: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* 移除渐变文本效果，直接使用深蓝色 */
    background: none;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    background-clip: unset;
}

.highlight-card h5 {
    color: var(--primary-color);
    font-weight: 600;
    position: relative;
    z-index: 2;
    flex-shrink: 0;
}

.highlight-card p {
    position: relative;
    z-index: 2;
    line-height: 1.6;
    flex-grow: 1;
    margin-bottom: 1rem;
}

.highlight-card .btn {
    position: relative;
    z-index: 2;
    border-radius: 25px;
    padding: 8px 20px;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid var(--accent-color);
    margin-top: auto;
    align-self: center;
    background: var(--accent-color); /* 默认显示金色背景 */
    color: var(--primary-color); /* 默认显示深蓝色文字 */
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3); /* 默认显示阴影 */
}

.highlight-card .btn:hover {
    background: #e6c200; /* 悬浮时使用深一点的金色 */
    color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4); /* 悬浮时阴影更深 */
}

/* Data Statistics Section - 数据展示增强视觉冲击力 */
.data-stats {
    background: #234775 !important;
    position: relative;
    overflow: hidden;
}

.data-stats::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.2)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.4;
}

.stat-item {
    position: relative;
    z-index: 2;
    padding: 30px 20px;
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-10px);
}

.stat-number {
    font-size: 3.5rem;
    font-weight: 700;
    color: var(--accent-color); /* 使用金色数字 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 10px;
    display: block;
}

.stat-label {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: white;
}

.stat-description {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
    font-style: italic;
}

/* Client Cases Section - 客户案例展示 */
.client-cases {
    background: var(--gradient-secondary);
}

.case-card {
    background: var(--bg-white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(29, 60, 102, 0.1);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border: 1px solid rgba(29, 60, 102, 0.05);
}

.case-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
    border-color: var(--accent-color);
}

.case-image {
    height: 250px; /* 统一客户案例图片高度 */
    overflow: hidden;
    position: relative;
}

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

.case-card:hover .case-image img {
    transform: scale(1.1);
}

.case-content {
    position: relative;
}

.case-category .badge {
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 15px;
}

.case-card h5 {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 15px;
}

.case-card p {
    line-height: 1.6;
    margin-bottom: 20px;
}

.case-results {
    border-top: 1px solid #e2e8f0;
    padding-top: 15px;
}

.result-item {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 0.9rem;
}

.result-item i {
    margin-right: 8px;
    flex-shrink: 0;
    color: var(--accent-color); /* 使用金色图标 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .highlight-card {
        margin-bottom: 20px;
        padding: 1.5rem;
    }
    
    .highlight-card:hover {
        transform: translateY(-5px) scale(1.01);
    }
    
    .highlight-card .btn {
        margin-top: 1rem;
    }
    
    .case-card {
        margin-bottom: 20px;
    }
    
    .case-card:hover {
        transform: translateY(-5px);
    }
    
    .stat-number {
        font-size: 2.5rem;
    }
    
    .stat-item {
        padding: 20px 15px;
    }
    
    .stat-label {
        font-size: 1rem;
    }
    
    .stat-description {
        font-size: 0.8rem;
    }
}

@media (max-width: 576px) {
    .highlight-card {
        padding: 1rem;
    }
    
    .highlight-card .btn {
        margin-top: 0.8rem;
        padding: 6px 16px;
        font-size: 0.85rem;
    }
    
    .highlight-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 1rem;
    }
    
    .highlight-icon i {
        font-size: 1.5rem;
    }
    
    .data-stats .stat-item {
        padding: 15px 10px;
        margin-bottom: 1rem;
    }
    
    .data-stats .stat-number {
        font-size: 2rem;
        margin-bottom: 8px;
    }
    
    .data-stats .stat-label {
        font-size: 0.9rem;
        margin-bottom: 5px;
    }
    
    .data-stats .stat-description {
        font-size: 0.75rem;
    }
}

/* 超小屏幕的数据统计优化 */
@media (max-width: 480px) {
    .data-stats .stat-item {
        padding: 12px 8px;
        margin-bottom: 0.8rem;
    }
    
    .data-stats .stat-number {
        font-size: 1.8rem;
        margin-bottom: 6px;
    }
    
    .data-stats .stat-label {
        font-size: 0.8rem;
        margin-bottom: 4px;
    }
    
    .data-stats .stat-description {
        font-size: 0.7rem;
        line-height: 1.2;
    }
    
    /* 确保在小屏幕上每行显示2个统计项 */
    .data-stats .col-lg-3.col-md-6 {
        width: 50%;
    }
}

/* 额外的移动端优化 */
@media (max-width: 991.98px) {
    /* 移动端各个服务模块跳转偏移 */
    #ocean-freight,
    #air-freight,
    #rail-freight,
    #warehouse,
    #lcl-services {
        scroll-margin-top: 120px; /* 移动端导航栏高度调整 */
    }

    /* 确保所有section在移动端都能正常显示 */
    section {
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* 移动端图片显示优化 */
    .about-image-card,
    .sustainability-image-card {
        height: auto !important;
        min-height: 200px !important;
        margin-bottom: 1rem !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 移动端图片画廊优化 */
    .row.g-3 img,
    .row.g-4 img {
        height: 150px !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* 移动端about section优化 */
    .about-section {
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
        overflow: visible !important;
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* 移动端about section中的图片行优化 */
    .about-section .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .about-section .col-lg-4 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 1rem !important;
    }
}

@media (max-width: 575.98px) {
    /* 超小屏幕额外优化 */
    .about-section .row.g-4 {
        margin: 0 !important;
    }
    
    .about-section .col-lg-4 {
        padding: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .about-image-card,
    .sustainability-image-card {
        min-height: 150px !important;
        margin-bottom: 0.5rem !important;
    }
    
    .row.g-3 img,
    .row.g-4 img {
        height: 120px !important;
        margin-bottom: 0.5rem !important;
    }
}

/* Culture Section Styles */
.culture-section {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    position: relative;
}

/* 新的Culture Cards布局样式 */
.culture-card-section {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 10px 40px rgba(29, 60, 102, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.culture-card-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(29, 60, 102, 0.15);
}

.culture-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 8px 25px rgba(29, 60, 102, 0.2);
}

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

.culture-card-section:hover .culture-image-container img {
    transform: scale(1.05);
}

.culture-image-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(29, 60, 102, 0.8));
    color: white;
    padding: 2rem 1.5rem 1.5rem;
    text-align: center;
}

.overlay-title {
    margin: 0;
    font-weight: 600;
    font-size: 1.2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.culture-content-card {
    padding: 0 1rem;
}

.culture-card-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.culture-subtitle {
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.2rem;
}

.culture-description {
    color: var(--text-dark);
    line-height: 1.7;
    font-size: 1rem;
    margin-bottom: 0;
}

.culture-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="%23e2e8f0" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}

.culture-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(29, 60, 102, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.culture-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gradient-primary);
}

.culture-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(29, 60, 102, 0.2);
}

.culture-header {
    margin-bottom: 1.5rem;
    text-align: center;
}

.culture-title {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.4;
    margin: 0;
}

.culture-content {
    color: var(--text-dark);
}

.culture-subtitle {
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.value-item {
    margin-bottom: 1.5rem;
}

.value-item:last-child {
    margin-bottom: 0;
}

.value-item h6 {
    color: var(--secondary-color);
    font-weight: 600;
    margin-bottom: 0.75rem;
    font-size: 1rem;
}

.value-item ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.value-item li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.6;
    color: var(--text-dark);
}

.value-item li:last-child {
    margin-bottom: 0;
}

.value-item li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
    font-size: 1.2rem;
}

.culture-slogan {
    margin-top: 3rem;
    padding: 2rem;
    background: var(--gradient-primary);
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.culture-slogan::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="slogan-pattern" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="0.5" fill="%23ffffff" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23slogan-pattern)"/></svg>');
    opacity: 0.3;
}

.slogan-container {
    position: relative;
    z-index: 2;
}

.slogan-text {
    color: var(--text-light);
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    line-height: 1.2;
}

/* Culture模块主标题特殊样式 */
.culture-section .section-title {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary-color);
    text-shadow: 0 2px 4px rgba(29, 60, 102, 0.1);
    margin-bottom: 3rem;
}

.slogan-subtitle {
    color: var(--accent-color);
    font-weight: 500;
    font-size: 1.1rem;
    margin: 0;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Culture Section Responsive */
@media (max-width: 991.98px) {
    .culture-card-section {
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .culture-image-container img {
        height: 300px;
    }
    
    .culture-card-title {
        font-size: 1.3rem;
        margin-bottom: 1.25rem;
    }
    
    .culture-subtitle {
        font-size: 1.1rem;
    }
    
    .slogan-text {
        font-size: 1.5rem;
    }
    
    .slogan-subtitle {
        font-size: 1rem;
    }
    
    .culture-section .section-title {
        font-size: 2rem;
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 768px) {
    .culture-section {
        padding: 2rem 0;
    }
    
    .culture-card-section {
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .culture-image-container img {
        height: 250px;
    }
    
    .culture-card-title {
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }
    
    .culture-subtitle {
        font-size: 1rem;
    }
    
    .culture-description {
        font-size: 0.9rem;
    }
    
    .value-item h6 {
        font-size: 0.9rem;
    }
    
    .value-item li {
        font-size: 0.85rem;
        padding-left: 1.25rem;
    }
    
    .slogan-text {
        font-size: 1.25rem;
    }
    
    .slogan-subtitle {
        font-size: 0.9rem;
    }
    
    .culture-section .section-title {
        font-size: 1.6rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 576px) {
    .culture-section {
        padding: 1.5rem 0;
    }
    
    .culture-card-section {
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .culture-image-container img {
        height: 200px;
    }
    
    .culture-card-title {
        font-size: 1rem;
        margin-bottom: 0.75rem;
        line-height: 1.3;
    }
    
    .culture-subtitle {
        font-size: 0.9rem;
    }
    
    .culture-description {
        font-size: 0.85rem;
    }
    
    .value-item h6 {
        font-size: 0.85rem;
    }
    
    .value-item li {
        font-size: 0.8rem;
        padding-left: 1rem;
        line-height: 1.5;
    }
    
    .culture-slogan {
        margin-top: 2rem;
        padding: 1.5rem;
    }
    
    .slogan-text {
        font-size: 1.1rem;
    }
    
    .slogan-subtitle {
        font-size: 0.85rem;
    }
    
    .culture-section .section-title {
        font-size: 1.3rem;
        margin-bottom: 1.5rem;
        line-height: 1.4;
    }
    
    /* 移动端图片和内容布局优化 */
    .culture-card-section .row {
        flex-direction: column;
    }
    
    .culture-card-section .col-lg-6:first-child {
        margin-bottom: 1.5rem;
    }
    
    .culture-content-card {
        padding: 0;
    }
    
    .overlay-title {
        font-size: 1rem;
        padding: 1.5rem 1rem 1rem;
    }
}

/* Customize Section Styles */
.customize-section {
    background: var(--bg-light);
}

.customize-intro {
    margin-bottom: 3rem;
}

.customize-intro .lead {
    color: var(--text-dark);
    font-size: 1.2rem;
    line-height: 1.8;
}

.customize-card {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: 15px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;
    height: 100%;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
}

.customize-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(29, 60, 102, 0.15);
    border-color: var(--primary-color);
}

.customize-card.featured {
    background: var(--gradient-primary);
    color: var(--text-light);
    border: none;
}

.customize-card.featured h5,
.customize-card.featured p {
    color: var(--text-light);
}

.customize-icon {
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    color: var(--text-light);
    font-size: 1.5rem;
}

.customize-card.featured .customize-icon {
    background: var(--gold-gradient);
    color: var(--text-dark);
}

.customize-card h5 {
    color: var(--primary-color);
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.1rem;
}

.customize-card p {
    color: var(--text-dark);
    line-height: 1.6;
    margin: 0;
    font-size: 0.95rem;
}

.customize-card.featured h5 {
    color: var(--text-light);
}

.customize-card.featured p {
    color: var(--text-light);
    opacity: 0.95;
}

/* Customize Section Responsive */
@media (max-width: 991.98px) {
    .customize-section {
        padding: 3rem 0;
    }
    
    .customize-card {
        padding: 1.5rem;
        margin-bottom: 1rem;
    }
    
    .customize-icon {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
        margin-bottom: 1rem;
    }
    
    .customize-card h5 {
        font-size: 1rem;
    }
    
    .customize-card p {
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .customize-section {
        padding: 2rem 0;
    }
    
    .customize-intro .lead {
        font-size: 1.1rem;
        line-height: 1.6;
    }
    
    .customize-card {
        padding: 1.25rem;
    }
    
    .customize-icon {
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    
    .customize-card h5 {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }
    
    .customize-card p {
        font-size: 0.85rem;
        line-height: 1.5;
    }
}

/* 确保关键section始终可见 */
.about-section,
.services-section,
.client-cases {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    transform: translateY(0) !important;
}

/* 强制覆盖任何可能的隐藏样式 */
.about-section *,
.services-section *,
.client-cases * {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 确保section内容在动画完成后保持可见 */
.about-section.animated,
.services-section.animated,
.client-cases.animated {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}