/* ===== 最外层最大宽度并居中 ===== */
.header {
    background-color: #e6e9ed !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.header .navbar-brand img.logo-transparent {
    display: none !important;
}

.header .navbar-brand img.logo-normal {
    display: block !important;
}

.header .nav-item .nav-link {
    color: #333 !important;
}

.header .nav-item .nav-link:hover {
    color: #0045E1 !important;
}

#video-card {
    background-color: #e6e9ed;
    /* Light background for depth */
}

.outer-frame {
    width: 100%;
    /* 宽度为100%，会受到父容器宽度的影响 */
    max-width: 800px;
    /* 设置最大宽度为800px */
    margin: 0 auto;
    /* 水平居中 */
    padding: 20px;
    /* Increased padding */
    box-sizing: border-box;
    /* 计算宽度时包括内边距和边框 */
    background-color: #fff;
    /* White background for the card */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    /* Soft shadow for lift */
    border-radius: 12px;
    /* Rounded corners */
}

.outer-frame2 {
    display: flex;
    /* 使用Flex布局 */
    flex-wrap: wrap;
    /* 允许换行 */
    gap: 20px;
    /* 设置视频块之间的间距 */
    justify-content: space-between;
    /* 水平排列并分配空间 */
    max-width: 800px;
    /* 设置最大宽度为800px */
    margin: 0 auto;
    /* 居中容器 */
}

.cards-wrapper,
.sticky-boundary {
    display: flex;
    /* 使用Flex布局 */
    flex-wrap: wrap;
    /* 子元素可以换行 */
    gap: 1px;
    /* 设置子元素间隔 */
}

.left {
    flex: 1 1 100%;
    /* 设置子元素占65%的宽度 */
    box-sizing: border-box;
    /* 计算宽度时包括内边距和边框 */
}

.left img,
.left .video-card video {
    width: 100%;
    /* 设置图片和视频宽度为100% */
    height: auto;
    /* 高度自适应 */
    display: block;
    /* 设置为块级元素 */
    margin-bottom: 2px;
    /* 设置下边距 */
}

#video-card .video-card {
    padding-top: 0;
    /* 视频卡片顶部内边距为0 */
    aspect-ratio: auto;
    /* 宽高比自动调整 */
}

#video-card .video-card video {
    position: static;
    /* 设置视频的定位为静态 */
    width: 100%;
    /* 设置视频宽度为100% */
    height: auto;
    /* 高度自动调整 */
    object-fit: initial;
    /* 让视频内容按原比例显示 */
}

#video-card-other .video-card {
    padding-top: 0;
    /* 视频卡片顶部内边距为0 */
    aspect-ratio: auto;
    /* 宽高比自动调整 */
}

#video-card-other .video-card video {
    position: static;
    /* 设置视频的定位为静态 */
    width: 100%;
    /* 设置视频宽度为100% */
    height: auto;
    /* 高度自动调整 */
    object-fit: initial;
    /* 让视频内容按原比例显示 */
}

/* 绿色卡片样式 */
.green-card {
    position: absolute;
    /* 设置为绝对定位，方便控制位置 */
    top: 0;
    /* 初始值由 JS 控制 */
    right: 0;
    /* 靠右显示 */
    width: 35%;
    /* 绿色卡片宽度为黄色卡片宽度的35% */
    max-width: 250px;
    /* 最大宽度为250px */
    min-height: 150px;
    /* 设置最小高度为150px（可根据需要调整） */
    background-color: rgba(255, 255, 255, 0.5);
    /* 半透明的白色背景 */
    backdrop-filter: blur(4px);
    /* 背景模糊效果 */
    -webkit-backdrop-filter: blur(4px);
    /* 兼容Safari的背景模糊效果 */
    border-radius: 8px;
    /* 设置圆角 */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    /* 添加阴影效果 */
    padding: 10px;
    /* 内边距为10px */
    z-index: 10;
    /* 设置层级，确保它显示在上层 */
    display: flex;
    /* 使用Flex布局 */
    flex-direction: column;
    /* 垂直排列子元素 */
    justify-content: flex-start;
    /* 从上到下对齐子元素 */
    align-items: flex-start;
    /* 左对齐子元素 */
    font-size: 16px;
    /* 固定字体大小 */
    line-height: 1.2;
    /* 行高 */
    color: #000;
    /* 文字颜色为黑色 */
    overflow: hidden;
    /* 隐藏溢出的内容 */
    word-break: break-word;
    /* 文字超出时换行 */
    transition: top 0.2s ease-out;
    /* 动画效果，使卡片位置平滑过渡 */
}

/* 绿色卡片段落样式 */
.green-card p {
    font-size: 14px;
    /* 固定字体大小 */
    color: #000;
    /* 文字颜色为黑色 */
    line-height: 1.1;
    /* 缩小行间距 */
}

/* 绿色卡片标题样式 */
.green-card h4 {
    font-size: 18px;
    /* 固定字体大小 */
    color: #1d358f;
    /* 文字颜色为蓝色 */
    margin-bottom: 8px;
    /* 下方间距 */
    line-height: 1.1;
    /* 缩小行间距 */
}

/* 播放按钮样式 */
.video-play-button {
    display: inline-flex;
    /* 行内Flex布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    width: 56px;
    /* 设置按钮宽度 */
    height: 56px;
    /* 设置按钮高度 */
    background: rgba(29, 53, 143, 0.1);
    /* 背景色 */
    color: #1d358f;
    /* 字体颜色 */
    font-size: 24px;
    /* 字体大小 */
    border-radius: 50%;
    /* 圆形按钮 */
    cursor: pointer;
    /* 鼠标悬停时为指针 */
    transition: background-color 0.3s;
    /* 背景颜色过渡效果 */
    text-decoration: none;
    /* 去除下划线 */
}

.video-play-button:hover {
    background: rgba(29, 53, 143, 0.2);
    /* 悬停时改变背景颜色 */
}

/* 播放按钮叠加层 */
.play-overlay {
    position: absolute;
    /* 绝对定位 */
    top: 50%;
    /* 垂直居中 */
    left: 50%;
    /* 水平居中 */
    transform: translate(-50%, -50%);
    /* 完全居中 */
    width: 80px;
    /* 设置宽度 */
    height: 80px;
    /* 设置高度 */
    background: rgba(0, 0, 0, 0.6);
    /* 半透明背景 */
    border-radius: 50%;
    /* 圆形 */
    display: flex;
    /* 使用Flex布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
    cursor: pointer;
    /* 鼠标悬停时为指针 */
    z-index: 2;
    /* 设置层级 */
    animation: breath 2s ease-in-out infinite;
    /* 呼吸动画效果 */
    transition: background 0.2s;
    /* 背景颜色过渡 */
}

.play-overlay:hover {
    background: rgba(0, 0, 0, 0.8);
    /* 悬停时背景颜色变深 */
}

.play-overlay i {
    font-size: 36px;
    /* 图标字体大小 */
    color: #fff;
    /* 字体颜色为白色 */
    pointer-events: none;
    /* 禁用鼠标事件 */
}

@keyframes breath {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        /* 初始状态，正常大小 */
        opacity: 1;
        /* 完全不透明 */
    }

    50% {
        transform: translate(-50%, -50%) scale(1.1);
        /* 放大效果 */
        opacity: 0.7;
        /* 半透明 */
    }
}


.team-area .video-card video {
    position: absolute;
    /* 绝对定位 */
    top: 0;
    /* 顶部对齐 */
    left: 0;
    /* 左对齐 */
    width: 100%;
    /* 宽度100% */
    height: 100%;
    /* 高度100% */
    object-fit: cover;
    /* 填充容器并保持比例 */
}




/* 移动端样式 */
.image-block {
    position: relative;
    /* 设置相对定位 */
}

@media (max-width: 768px) {
    .green-card {
        position: absolute;
        /* 绝对定位 */
        top: 0;
        /* 初始值由 JS 控制 */
        right: 0;
        /* 靠右显示 */
        width: 35%;
        /* 绿色卡片宽度为left容器宽度的35% */
        min-height: auto;
        /* 高度自适应文本内容 */
        background-color: rgba(255, 255, 255, 0.5);
        /* 半透明白色背景 */
        backdrop-filter: blur(4px);
        /* 背景模糊效果 */
        -webkit-backdrop-filter: blur(4px);
        /* 兼容Safari的背景模糊效果 */
        border-radius: 8px;
        /* 设置圆角 */
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        /* 添加阴影效果 */
        padding: 10px;
        /* 内边距为10px */
        z-index: 10;
        /* 设置层级，确保它显示在上层 */
        display: flex;
        /* 使用Flex布局 */
        flex-direction: column;
        /* 垂直排列子元素 */
        justify-content: flex-start;
        /* 从上到下对齐子元素 */
        align-items: flex-start;
        /* 左对齐子元素 */
        font-size: 16px;
        /* 固定字体大小 */
        line-height: 1.2;
        /* 行高 */
        color: #000;
        /* 文字颜色为黑色 */
        overflow: hidden;
        /* 隐藏溢出的内容 */
        word-break: break-word;
        /* 文字换行 */
        transition: top 0.2s ease-out;
        /* 动画效果，使卡片位置平滑过渡 */
    }
}

/* 绿色卡片标题样式 */
.green-card h4 {
    font-size: 1.2rem;
    /* 字体大小为视口宽度的3.2% */
    color: #1d358f;
    /* 文字颜色为蓝色 */
    margin-bottom: 8px;
    /* 下方间距 */
}

/* 绿色卡片段落样式 */
.green-card p {
    text-indent: -1.2em;
    /* 设置文本首行缩进 */
    padding-left: 1.2em;
    /* 设置左侧内边距 */
    margin-bottom: 0.6em;
    /* 设置下方间距 */
    font-size: 0.9rem;
    /* 字体大小为视口宽度的2.3% */
    color: #000;
    /* 文字颜色为黑色 */
}

.image-block {
    position: relative;
    min-height: 80vh;
    /* 为绿色卡片预留足够的空间 */
}

/* 红色字体样式 */
.red-text {
    color: red;
    /* 设置文字为红色 */
    font-size: 14px;
    /* 让红色文字大小和其他文字一致 */
}

/* 让视频封面保持正确比例 */
/* 针对0.mp4的视频卡片 */
.video-card.video-card-0 {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 保持16:9比例 */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 针对其他视频的卡片 */
.video-card.video-card-other {
    position: relative;
    width: 100%;
    padding-top: 125%;
    /* 保持16:9比例 */
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    background-color: rgba(255, 255, 255, 0.5);
    /* 其他卡片可能有不同的背景 */
}

/* 设置封面视频的显示效果 */
.video-card video {
    position: absolute;
    /* 设置为绝对定位 */
    top: 0;
    left: 0;
    width: 100%;
    /* 宽度100% */
    height: 100%;
    /* 高度100% */
    object-fit: cover;
    /* 保持视频比例，填充整个容器 */
}

/* 针对手机端的样式调整，确保视频封面不拉伸 */
@media (max-width: 768px) {

    /* 针对0.mp4的视频卡片 */
    .video-card.video-card-0 {
        position: relative;
        width: 100%;
        padding-top: 56.25%;
        /* 保持16:9比例 */
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    }

    /* 针对其他视频的卡片 */
    .video-card.video-card-other {
        position: relative;
        width: 100%;
        padding-top: 125%;
        /* 保持16:9比例 */
        overflow: hidden;
        border-radius: 10px;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
        background-color: rgba(255, 255, 255, 0.5);
        /* 其他卡片可能有不同的背景 */
    }
}

/* 绿色卡片段落样式 */
.green-card p {
    font-size: 14px;
    /* 固定字体大小 */
    color: #6c6969;
    /* 设置灰色文字 */
    line-height: 1.1;
    /* 缩小行间距 */
}

/* 针对手机端的文字颜色调整 */
@media (max-width: 768px) {
    .green-card p {
        color: #7a7878;
        /* 手机端使用更浅的灰色 */
    }
}

/* 外部容器设置为flex布局，四个视频块水平排列 */
.video-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* 每个视频项占50%宽度，移动端时占100% */
.video-item {
    flex: 1 1 45%;
    /* 50% - 10px gap */
    box-sizing: border-box;
    position: relative;
}

/* 确保视频卡片按比例显示 */
.video-card,
.video-card-other {
    position: relative;
    width: 100%;
    /* 设置宽度为100% */
    padding-top: 125%;
    /* 16:9比例 */
    overflow: hidden;
}

.video-card video,
.video-card-other video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 保持视频比例，填充整个容器 */
}

/* 视频播放按钮叠加样式 */
.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 20px;
    border-radius: 50%;
    cursor: pointer;
}

.play-overlay i {
    font-size: 36px;
}

/* 文字内容部分 */
.video-text {
    text-align: center;
    padding-top: 10px;
}

.video-text h6 {
    font-size: 18px;
    margin-bottom: 5px;
}

.video-text span {
    font-size: 14px;
    color: #666;
}

/* 移动端响应式调整 */
@media (max-width: 768px) {

    .video-card,
    .video-card-other {
        padding-top: 125%;
        /* 16:9比例 */
    }

    .video-card video,
    .video-card-other video {
        object-fit: contain;
        /* 在手机端使用 contain 来防止拉伸 */
    }
}



.team-item {
    width: calc(50% - 10px);
    aspect-ratio: 3/4.5;
    /* 直接设置宽高比 */
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    text-align: center;
    margin-bottom: 20px;
}



.play-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    /* Frosted glass background */
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
    transition: all 0.3s ease;
    animation: pulse-border 2s infinite;
}

.play-overlay:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%) scale(1.1);
}

@keyframes pulse-border {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.play-overlay i {
    font-size: 36px;
    color: #fff;
}

@media (max-width: 768px) {
    .video-play-button {
        width: 20px !important;
        /* 设置按钮宽度 */
        height: 20px !important;
        /* 设置按钮高度 */
        font-size: 18px !important;
        /* 调整图标字体大小 */
    }

    .play-overlay {
        width: 30px !important;
        /* 设置 overlay 宽度 */
        height: 30px !important;
        /* 设置 overlay 高度 */
    }

    .play-overlay i {
        font-size: 24px !important;
        /* 调整图标大小 */
    }
}

/* —— 覆盖之前的 padding-top hack —— */
.video-card.video-card-0 {
    padding-top: 0;
    /* 取消之前的 56.25% 填充 */
    aspect-ratio: 16/9;
    /* 16:9 原生比例 */
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* —— 视频全铺满容器 —— */
.video-card.video-card-0 video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* —— 手机端改成 contain，防止裁剪封面 —— */
@media (max-width: 768px) {
    .video-card.video-card-0 video {
        object-fit: contain;
        background: #000;
        /* 防止留白透到底层 */
    }
}

/* 1. 默认是横向 16:9 */
.video-card.video-card-0 {
    aspect-ratio: 16/9;
}

/* 2. 播放时加上 playing 类，切换成纵向 9:16 */
.video-card.video-card-0.playing {
    aspect-ratio: 3/4;
}

/* —— 默认状态：只显示封面，容器横向 16:9 —— */
.video-card.video-card-0 {
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    /* 横向比例 */
    overflow: hidden;
}

.video-card.video-card-0 .video-poster {
    position: absolute;
    inset: 0;
    /* top/right/bottom/left = 0 */
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 封面铺满 */
}

.video-card.video-card-0 video {
    display: none;
    /* 隐藏视频 */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 视频播放时再切换 */
}

/* —— 播放时：显示视频，隐藏封面，切为竖版 9:16 —— */
.video-card.video-card-0.playing {
    aspect-ratio: 3/4;
}

.video-card.video-card-0.playing .video-poster {
    display: none;
}

.video-card.video-card-0.playing video {
    display: block;
    object-fit: cover;
    /* 也可以用 contain，看你需要是否裁剪 */
}

/* —— 手机端 play 时同样用 cover，未播放时封面即可 —— */
@media (max-width: 768px) {
    .video-card.video-card-0.playing video {
        object-fit: contain;
        background: #000;
    }
}

/* === Gallery 样式 === */
/* 调整 user-generated photographs 标题的上下间距 */
.custom-gallery .gallery-header {
    margin: 10px 0 10px;
    /* 上 40px、左右 0、下 10px，根据需要再微调 */
}

.gallery-header {
    text-align: center;
    margin-bottom: 50px;
}

.gallery-header h4 {
    font-size: 1.5rem;
    color: #333;
}




.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s;
}

.gallery-item:hover img {
    transform: scale(1.1);
    /* 鼠标悬停时，放大效果 */
}

/* === Lightbox 样式 === */
#lightbox-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

#lightbox-overlay img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease;
    /* Smooth zoom transition */
    cursor: zoom-in;
    /* Indicate clickable to zoom */
}

#lightbox-overlay img.zoomed {
    transform: scale(2);
    /* 2x magnification */
    cursor: zoom-out;
}

#lightbox-overlay.lightbox-visible {
    opacity: 1;
    visibility: visible;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

/* —— 自定义画廊 无限滚动 样式 —— */
.custom-gallery .gallery-scroll {
    display: flex;
    gap: 10px;
    /* 与下方 gap=10px 保持一致 */
    overflow: hidden;
    /* 隐藏超出部分 */
}

.custom-gallery .gallery-item {
    flex: 0 0 auto;
    /* 固定不伸缩 */
    width: 200px;
    /* 固定宽度 */
    aspect-ratio: 3 / 4;
    /* 3:4 高宽比 */
}

.custom-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 裁剪填满 */
}

/* —— 立体圆角画廊项 —— */
.custom-gallery .gallery-scroll {
    perspective: 1000px;
    /* 激活 3D 环境 */
}

.custom-gallery .gallery-item {
    overflow: hidden;
    /* 裁剪圆角和内容 */
    border-radius: 12px;
    /* 圆角半径 */
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.12),
        0 8px 16px rgba(0, 0, 0, 0.08);
    /* 基础立体阴影 */
    transform-style: preserve-3d;
    /* 保持 3D 效果 */
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
    /* 平滑动画 */
    background-color: #fff;
    /* 防止图片圆角外漏底色 */
}

.custom-gallery .gallery-item:hover {
    transform: translateY(-8px) rotateX(2deg);
    /* 浮起并轻微翻转 */
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.2),
        0 16px 32px rgba(0, 0, 0, 0.16);
    /* 加深阴影 */
}

.custom-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    /* 同步圆角 */
    display: block;
}



/* 客户 Logo 无限跑马灯（CSS-only） */
.clients-marquee {
    overflow: hidden;
    position: relative;
}

.clients-marquee .marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    /* Ensure width fits content for correct translateX percentage */
    animation: marquee 80s linear infinite;
}

.clients-marquee img {
    flex-shrink: 0;
    height: 100px;
    width: auto;
    display: block;
    margin-right: 10px;
    /* use margin instead of gap for seamless loop */
}

/* 跑马灯关键帧：从 0 到 -50% */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ==== 微调 “user-generated photographs” 上下空隙 ==== */
section.custom-gallery .gallery-header {
    margin-top: 0px;
    /* 调整标题离上面内容的距离 */
    margin-bottom: 50px;
    /* 调整标题离下面画廊的距离 */
}

/* 如果你只想控制 h4 本身的上下间距，也可以： */
section.custom-gallery .gallery-header h4 {
    margin: 0 0 0.5em;
    /* 上 0，下 0.5em，根据需要微调 */
}