/* --- 全局字体与重置 --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Oswald', 'Arial Narrow', sans-serif;
    /* 选用紧凑字体 */
}

body {
    background-color: #0c4da2;
    /* 防止图片加载失败时的底色 */
    color: white;
}

/* --- 1. 顶部大背景包裹层 (Top Wrapper) --- */
.top-wrapper {
    position: relative;
    width: 100%;
    /* 关键点：这里放置第一张背景图（港口/吊车） */
    /* 请替换 url() 为你的实际背景图片路径 */
    background-image: url('bg-cranes-dark.jpg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding-bottom: 0;
    /* 下方紧贴 */
}

/* 给背景加一个深色遮罩，让白色文字更清晰 */
.top-wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 27, 42, 0.7);
    /* 深蓝半透明遮罩 */
    z-index: 0;
}

/* 确保内容在遮罩之上 */
header,
.hero-container,
.services-bar {
    position: relative;
    z-index: 2;
}

/* --- 导航栏 --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.logo-box {
    padding: 5px 15px;
    font-weight: 700;
    font-style: italic;
    font-size: 1.2rem;
}

nav a {
    color: white;
    text-decoration: none;
    margin: 0 15px;
    font-weight: bold;
    font-style: italic;
    font-size: 0.9rem;
}

.cta-btn {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-style: italic;
}

/* --- Hero Section --- */
.hero-container {
    display: flex;
    justify-content: space-between;
    padding: 60px 50px 0 50px;
    /* 底部留白给卡车 */
    min-height: 500px;
}

.hero-text {
    width: 45%;
    padding-top: 50px;
}

.hero-text h1 {
    font-size: 5rem;
    /* 超大标题 */
    line-height: 0.9;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-shadow: 2px 2px 0px #000;
}

.hero-text p {
    font-size: 1.1rem;
    line-height: 1.4;
    margin-bottom: 30px;
    max-width: 450px;
}

.btn-group button {
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    text-transform: uppercase;
    margin-right: 15px;
}

.btn-yellow {
    background-color: #ffee00;
    border: none;
    color: black;
}

.btn-outline {
    background: transparent;
    border: 2px solid white;
    color: white;
}

/* --- 卡车定位 --- */
.hero-truck {
    width: 50%;
    position: relative;
    /* 让卡车看起来像是停在底部边缘 */
    display: flex;
    align-items: flex-end;
}

.hero-truck img {
    width: 120%;
    /* 放大一点，制造冲出画面的感觉 */
    max-width: 800px;
    margin-left: -100px;
    /* 向左位移一点 */
    margin-bottom: -50px;
    /* 让轮子稍微压在下面的区域 */
    transform: rotate(-2deg);
    /* 轻微角度增加动感 */
}

/* --- 黄色服务条 --- */
.services-bar {
    margin-top: 50px;
    /* 移除左右padding，让黄色条满宽 */
    width: 100%;
}

.service-item {
    background-color: #ffee00;
    color: black;
    padding: 15px 50px;
    border-bottom: 1px solid black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 800;
    font-style: italic;
    font-size: 1.2rem;
    cursor: pointer;
    transition: background 0.3s;
}

.service-item:hover {
    background-color: #ffdb00;
}

.service-item i {
    margin-right: 10px;
}

.service-wrapper {
    width: 100%;
}

.service-details {
    max-height: 0;
    overflow: hidden;
    background-color: #e6d600;
    /* Slightly darker/different yellow */
    transition: max-height 0.3s ease-out;
    padding: 0 50px;
}

.service-details.active {
    padding: 20px 50px;
    /* Add padding when open */
    border-bottom: 1px solid black;
}

.service-details p {
    color: black;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 5px;
    font-size: 1.1rem;
    text-transform: uppercase;
}

.service-item.active i.fa-plus {
    transform: rotate(45deg);
    /* Rotate plus to x */
    transition: transform 0.3s;
}

/* --- 2. 中间部分背景 (BG2 - 蓝图区域) --- */
.process-section {
    position: relative;
    /* 这里是你的第二张背景图：蓝图线条背景 */
    background-color: #122543;
    background-image: url('bg2.png');
    padding: 80px 50px;
    border-top: 2px solid rgba(255, 255, 255, 0.1);
}

.process-map-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    min-height: 400px;
    /* 这里可以用 Grid 布局来摆放你的流程节点 */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.process-step {
    border: 1px solid white;
    padding: 5px 10px;
    font-size: 0.8rem;
    font-style: italic;
    text-transform: uppercase;
    background: rgba(18, 37, 67, 0.9);
    z-index: 2;
}

.map-overlay-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.3);
    font-size: 1.5rem;
    font-style: italic;
}

/* --- 3. 底部跑马灯 --- */
.stats-marquee {
    background-color: #0c4da2;
    /* 亮蓝色 */
    padding: 20px 0;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-text {
    font-size: 3.5rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    /* 简单的文字阴影模拟立体感 */
    text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.2);
}

.marquee-track {
    display: flex;
    width: max-content;
    will-change: transform;
}

.marquee-text {
    flex-shrink: 0;
    padding: 0 40px;
    /* Add spacing between repeated groups */

    color: #ffee00;
    margin: 0 20px;
}

/* --- 4. 特性网格 --- */
.features-section {
    background-color: #0c4da2;
    /* 延续亮蓝色 */
    padding: 50px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.card {
    background-color: #ffee00;
    color: black;
    padding: 30px;
    text-align: center;
    border: 2px solid black;
    /* 增加边框让它更像原来的风格 */
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.2);
    /* 增加硬阴影 */
}

.card h3 {
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

/* 响应式微调 */
@media (max-width: 900px) {
    .hero-container {
        flex-direction: column;
    }

    .hero-text {
        width: 100%;
        text-align: center;
    }

    .hero-truck {
        width: 100%;
        justify-content: center;
        margin-top: 30px;
    }

    .hero-truck img {
        margin-left: 0;
        width: 100%;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }
}


/* --- Footer 整体样式 --- */
.main-footer {
    background-color: #000000;
    /* 纯黑背景 */
    color: #ffffff;
    padding: 60px 50px 20px 50px;
    font-size: 0.9rem;
    border-top: 1px solid #333;
    /* 顶部微弱分割线 */
}

/* 顶部四列布局 */
.footer-top {
    display: grid;
    /* 定义四列宽度：订阅栏较宽，其他自适应 */
    grid-template-columns: 1.5fr 0.5fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #333;
    /* 底部横条分割线 */
}

.footer-col h3 {
    font-size: 1.4rem;
    font-weight: 800;
    font-style: italic;
    line-height: 1.2;
    margin-bottom: 25px;
    text-transform: uppercase;
}

.footer-col h4 {
    color: #fff;
    font-weight: 700;
    font-style: italic;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 1rem;
}

/* --- 订阅表单样式 --- */
.subscribe-form {
    display: flex;
    flex-direction: column;
    max-width: 300px;
}

.subscribe-form input {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #666;
    /* 只有下划线 */
    color: white;
    padding: 10px 0;
    margin-bottom: 20px;
    font-size: 1rem;
    outline: none;
}

.subscribe-form input::placeholder {
    color: #888;
    font-style: italic;
}

.subscribe-form button {
    background-color: transparent;
    border: 2px solid white;
    /* 线框按钮 */
    color: white;
    padding: 8px 20px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    width: fit-content;
    cursor: pointer;
    transition: all 0.3s ease;
}

.subscribe-form button:hover {
    background-color: white;
    color: black;
}

/* --- 链接列表样式 --- */
.links-col ul {
    list-style: none;
}

.links-col li {
    margin-bottom: 15px;
}

.links-col a {
    color: white;
    text-decoration: none;
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    font-size: 0.9rem;
}

.links-col a:hover {
    color: #ffee00;
    /* 悬停变黄 */
}

/* --- 地址栏样式 --- */
.address-block {
    margin-bottom: 30px;
}

.address-block p {
    color: #ccc;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 2px;
}

/* --- 地图与调度栏 --- */
.map-box {
    width: 100%;
    height: 100px;
    background-color: #222;
    border: 1px solid #444;
    margin-bottom: 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

/* --- 底部横条 (Copyright) --- */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    /* 左右对齐 */
    align-items: center;
    padding-top: 20px;
}

.footer-logo {
    font-weight: bold;
    font-style: italic;
}

.logo-icon {
    /* 模拟那个小Logo图标 */
    display: inline-block;
    border: 2px solid white;
    padding: 2px 5px;
    font-size: 0.8rem;
}

.copyright {
    color: #666;
    font-size: 0.75rem;
    margin-left: 20px;
    flex-grow: 1;
    /* 让版权信息靠左占据空间 */
}

.social-icons {
    display: flex;
    gap: 10px;
}

.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid white;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.social-icons a:hover {
    background-color: #ffee00;
    border-color: #ffee00;
    color: black;
}

/* --- 响应式适配 (移动端变单列) --- */
@media (max-width: 900px) {
    .footer-top {
        grid-template-columns: 1fr 1fr;
        /* 平板两列 */
    }
}

@media (max-width: 600px) {
    .footer-top {
        grid-template-columns: 1fr;
        /* 手机单列 */
        gap: 30px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
    }

    .copyright {
        margin-left: 0;
    }
}

/* --- 弹窗 (Modal) 样式 --- */
.modal-overlay {
    display: none;
    /* 默认隐藏 */
    position: fixed;
    z-index: 1000;
    /* 保证在最上层 */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    /* 深色半透明背景 */
    backdrop-filter: blur(5px);
    /* 背景模糊效果 */
}

.modal-content {
    background-color: #ffee00;
    /* 标志性的黄色背景 */
    color: black;
    margin: 10% auto;
    /* 距顶部10%，水平居中 */
    padding: 40px;
    border: 3px solid black;
    /* 硬朗的黑边框 */
    width: 90%;
    max-width: 500px;
    position: relative;
    box-shadow: 10px 10px 0px rgba(0, 0, 0, 0.5);
    /* 硬阴影 */
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }

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

/* 关闭按钮 */
.close-modal {
    position: absolute;
    top: 10px;
    right: 20px;
    color: black;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
}

.close-modal:hover {
    color: #444;
}

/* 弹窗标题 */
.modal-header {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: 2px solid black;
    padding-bottom: 20px;
}

.modal-header h2 {
    font-size: 2.5rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 5px;
}

.modal-header p {
    font-size: 1.1rem;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
}

/* 表单样式 */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.required {
    color: red;
}

/* 自定义下拉菜单样式 */
.select-wrapper {
    position: relative;
}

.select-wrapper select {
    width: 100%;
    padding: 15px;
    font-size: 1rem;
    background-color: white;
    border: 2px solid black;
    appearance: none;
    /* 移除浏览器默认箭头 */
    -webkit-appearance: none;
    border-radius: 0;
    /* 直角 */
    font-weight: bold;
    font-family: 'Oswald', sans-serif;
    cursor: pointer;
}

.select-wrapper select:focus {
    outline: none;
    border-color: #000;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.2);
}

/* 自定义箭头图标 */
.select-wrapper i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 1.2rem;
}

.submit-btn {
    width: 100%;
    padding: 15px;
    background-color: black;
    color: white;
    font-size: 1.2rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    border: 2px solid black;
    cursor: pointer;
    transition: all 0.2s;
}

.submit-btn:hover {
    background-color: white;
    color: black;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3);
}

/* =========================================
   Custom Cursor Styles
   ========================================= */
body {
    /* Set custom cursor for the whole page */
    cursor: url('point.svg') 0 0, auto;
}

/* Maintain custom cursor or specific interaction state on clickable elements */
a,
button,
.btn-yellow,
.service-item,
.accordion-item,
.cta-btn,
.btn-outline,
.btn-outline-black,
.btn-mini-yellow,
.submit-btn,
.close-modal {
    cursor: url('point.svg') 0 0, pointer;
}

/* =========================================
   Services 页面样式 (修复版)
   ========================================= */

/* 1. 外层背景区 (可选，如果需要页面两侧留白) */
.services-section-bg {
    width: 100%;
    padding: 50px 20px;
    /* 上下给点空间，左右留白 */
    background-color: #fff;
    /* 或者保持跟 body 一致 */
    display: flex;
    justify-content: center;
}

/* 2. 核心容器 (你要求的 container 包着) */
.services-wrapper {
    width: 100%;
    max-width: 1200px;
    /* 限制最大宽度，不再无限拉伸 */
    margin: 0 auto;
    /* 居中 */
    border: 2px solid black;
    /* 最外层的大黑框 */
    background-color: white;
    /* 确保背景是白的，让文字显形 */
}

/* 3. 每一行 */
.service-row {
    display: flex;
    width: 100%;
    /* 移除固定高度 min-height，改用 stretch 让高度自适应内容，但保持对齐 */
    align-items: stretch;
    border-bottom: 2px solid black;
    /* 行与行之间的分割线 */
}

/* 最后一行去掉底部边框，防止双重边框 */
.service-row:last-child {
    border-bottom: none;
}

/* 4. 图片列与文字列的通用设置 */
.service-img,
.service-text {
    flex: 1;
    /* 均分空间 */
    width: 50%;
    /* 强制 50% 宽度，这是修复图片过大的关键！ */
    position: relative;
}

/* --- 图片区域 --- */
.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 关键：裁剪图片以填满区域，不变形 */
    display: block;
    /* 消除图片底部的微小空隙 */
    min-height: 400px;
    /* 保证图片区至少有这么高 */
}

/* --- 文字区域 --- */
.service-text {
    padding: 40px 50px;
    /* 内部留白 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 垂直居中 */
    color: black;
    /* 确保文字是黑色的 */
}

/* --- 棋盘布局逻辑 (Zig-Zag) --- */

/* 奇数行 (默认): 图左 | 文右 */
/* 需要给中间加一条分割线。我们在“图片”的右边加线 */
.service-row .service-img {
    border-right: 2px solid black;
    border-left: none;
}

/* 偶数行 (反转): 文左 | 图右 */
.service-row:nth-child(even) {
    flex-direction: row-reverse;
    /* 反转排列顺序 */
}

/* 反转后，因为图片跑到了右边，我们需要调整分割线位置 */
.service-row:nth-child(even) .service-img {
    border-right: none;
    /* 去掉右边线 */
    border-left: 2px solid black;
    /* 加上左边线 */
}

/* --- 文字排版修复 --- */
.service-text h2 {
    font-size: 3rem;
    /* 调大标题 */
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1;
}

.service-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 100%;
}

/* --- 移动端适配 --- */
@media (max-width: 900px) {

    .service-row,
    .service-row:nth-child(even) {
        flex-direction: column;
        /* 手机上变为垂直排列 */
    }

    .service-img,
    .service-text {
        width: 100%;
        /* 满宽 */
        flex: auto;
    }

    .service-img {
        height: 300px;
        /* 手机上图片高度 */
        border-right: none !important;
        border-left: none !important;
        border-bottom: 2px solid black;
        /* 手机上分割线改为横向 */
    }

    .service-text {
        padding: 30px 20px;
        text-align: center;
    }

    .services-wrapper {
        border-width: 2px;
        /* 保持边框 */
    }
}

.service-text h2 {
    font-size: 3.5rem;
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 25px;
    line-height: 0.9;
}

.service-text p {
    font-size: 1.1rem;
    line-height: 1.5;
    margin-bottom: 40px;
    max-width: 500px;
    /* 限制文字宽度，保持阅读舒适 */
}

/* --- 按钮组 --- */
.btn-group {
    display: flex;
    gap: 20px;
}

/* 这里的按钮复用你之前的样式，但我加了一个黑色描边的变体 */
.btn-outline-black {
    background: transparent;
    border: 2px solid black;
    color: black;
    padding: 12px 25px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.3s;
}

.btn-outline-black:hover {
    background-color: black;
    color: white;
}

/* =========================================
   Cases (成功案例) 区域样式
   ========================================= */

.cases-section {
    background-color: black;
    /* 深色背景 */
    color: white;
    padding: 50px;
    border-top: 2px solid white;
}

.cases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.cases-header h3 {
    font-size: 2rem;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.cases-nav {
    font-size: 1.5rem;
    font-style: italic;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 20px;
}

.cases-nav i {
    cursor: pointer;
}

/* Grid 布局放4个卡片 */
.cases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4列等宽 */
    gap: 20px;
}

.case-card {
    background-color: white;
    color: black;
    border: 1px solid #333;
}

/* 卡片上方的图片/Logo区域 */
.case-img-box {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.case-img-box img {
    max-width: 80%;
    max-height: 80%;
}

/* 为不同的品牌设置特定的背景色 (模拟原图效果) */
.amazon-bg {
    background-color: #232f3e;
}

.walmart-bg {
    background-color: #0071ce;
}

.ntg-bg {
    background-color: #000;
}

.fedex-bg {
    background-color: #fff;
}

/* FedEx原图是照片，这里用白色或直接放图 */
.fedex-bg img {
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 卡片下方的文字信息 */
.case-info {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 220px;
    /* 固定高度确保对齐 */
    justify-content: space-between;
}

.case-info h4 {
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.case-info p {
    font-size: 1.1rem;
    /* 中间的粗体大字 */
    font-weight: 900;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 15px;
}

.btn-mini-yellow {
    background-color: #ffee00;
    border: 2px solid black;
    color: black;
    padding: 8px 15px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 0.8rem;
    width: 100%;
}

.btn-mini-yellow:hover {
    background-color: #ffdb00;
}

/* =========================================
   响应式适配 (手机端)
   ========================================= */
@media (max-width: 900px) {

    /* 强制每一行都变成垂直排列 */
    .service-row,
    .service-row:nth-child(even) {
        flex-direction: column;
        height: auto;
    }

    .service-img,
    .service-text {
        width: 100%;
        border-right: none !important;
        border-left: none !important;
    }

    .service-img {
        height: 300px;
        /* 手机上图片定高 */
    }

    .service-text {
        padding: 40px 20px;
        text-align: center;
    }

    .btn-group {
        justify-content: center;
    }

    /* 案例卡片变单列或双列 */
    .cases-grid {
        grid-template-columns: 1fr;
        /* 手机上一列 */
    }

    .cases-header {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }
}


/* =========================================
   Services Page Header (黄色导航栏专用样式)
   ========================================= */

/* 覆盖默认的 header 样式 */
.yellow-header {
    background-color: #ffee00;
    /* 黄色背景 */
    color: black;
    border-bottom: 2px solid black;
    /* 黑色底边框 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 50px;
}

/* 覆盖 logo 边框颜色 */
.yellow-header .logo-box {
    color: black;
}

/* 覆盖导航链接颜色 */
.yellow-header nav a {
    color: black;
    /* 选中的链接加上黑色背景块效果 (如图所示) */
}

.yellow-header nav a.active {
    background-color: black;
    color: white;
    padding: 5px 10px;
}

.yellow-header nav a:hover {
    color: #444;
}

/* 黑色实心按钮 (右上角) */
.cta-btn-black {
    background-color: black;
    color: white;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    font-style: italic;
    text-transform: uppercase;
    cursor: pointer;
    font-size: 1rem;
}

.cta-btn-black:hover {
    background-color: #333;
}

/* 针对 Amazon/Walmart 背景色的补充 */
.amazon-bg {
    background-color: #232f3e;
}

.walmart-bg {
    background-color: #0071ce;
}

.ntg-bg {
    background-color: #000;
}

.fedex-bg {
    background-color: #fff;
}

/* 确保 Footer 在任何页面都是黑色 */
footer.main-footer {
    background-color: black;
    color: white;
    border-top: none;
}



/* =========================================
   About Page Styles
   ========================================= */

body.about-page,
body.contact-page {
    background-color: black;
    color: white;
}

/* --- Hero Section --- */
.about-hero {
    position: relative;
    padding: 80px 50px;
    border-bottom: 1px solid #333;
}

.sub-title {
    font-style: italic;
    font-weight: 900;
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.hero-content-about h1 {
    font-size: 4rem;
    font-style: italic;
    line-height: 0.9;
    text-transform: uppercase;
    margin-bottom: 40px;
}

.yellow-text {
    color: #ffee00;
}

/* 勾选列表 */
.checkbox-list {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.check-item {
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.check-item i {
    color: #ffee00;
    /* 黄色勾选框 */
    font-size: 1.3rem;
}

/* --- 黄色多边形 (使用 Clip-path 绘制) --- */
.polygon-shape {
    position: absolute;
    background-color: #ffee00;
    z-index: 1;
}

.top-right-shape {
    top: 50px;
    right: 50px;
    width: 200px;
    height: 200px;
    /* 模拟图中那个像箭头一样的形状 */
    clip-path: polygon(0 0, 100% 0, 100% 60%, 20% 100%);
}

/* --- Structure Section (左右布局) --- */
.structure-section {
    display: flex;
    padding: 80px 50px;
    position: relative;
    border-bottom: 1px solid #333;
    gap: 50px;
}

.structure-left {
    flex: 1;
    position: relative;
}

.structure-left h2 {
    font-size: 2.5rem;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 20px;
}

.bottom-left-shape {
    bottom: -80px;
    /* 溢出一点到边界 */
    left: 0;
    width: 150px;
    height: 150px;
    clip-path: polygon(20% 0%, 100% 20%, 80% 100%, 0% 80%);
}

.structure-right {
    flex: 1;
}

/* 手风琴列表 */
.accordion-item {
    border: 1px solid white;
    padding: 15px 20px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s;
}

.accordion-item:hover {
    background-color: #333;
}

.acc-num {
    font-size: 1.5rem;
    font-weight: 900;
    font-style: italic;
    color: #ffee00;
    margin-right: 20px;
}

.acc-title {
    flex-grow: 1;
    font-weight: 900;
    font-style: italic;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.acc-icon {
    font-size: 1.5rem;
    color: #ffee00;
}

/* --- Contacts Locations (地图盒子) --- */
.contacts-locations {
    padding: 50px;
}

.section-heading {
    font-size: 2rem;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 30px;
}

.locations-grid {
    display: flex;
    gap: 30px;
}

.location-box {
    border: 2px solid #ffee00;
    position: relative;
    overflow: hidden;
}

/* 左边的宽盒子 */
.box-wide {
    flex: 1.5;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* 文字沉底 */
    padding: 30px;
    background-color: #111;
}

/* 右边的高盒子 */
.box-tall {
    flex: 1;
    height: 300px;
    display: flex;
    flex-direction: column;
}

.loc-text-top {
    padding: 30px;
    background-color: black;
    flex: 1;
}

.loc-text-top h3,
.loc-info-overlay h3 {
    color: #ffee00;
    font-style: italic;
    text-transform: uppercase;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.loc-map-bottom {
    flex: 1;
    background-color: #222;
    /* 模拟地图颜色 */
    position: relative;
    border-top: 2px solid #ffee00;
    overflow: hidden;
}

/* 地图上的图钉 */
.map-pin-icon,
.map-pin-centered {
    color: #ffee00;
    font-size: 2rem;
    position: absolute;
}

.map-pin-icon {
    top: 20px;
    right: 20px;
}

.map-pin-centered {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* --- Hiring Section --- */
.hiring-section {
    padding: 50px;
}

.hiring-container {
    border: 1px solid white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    /* 内部无padding，靠内容撑开 */
    background-color: black;
    overflow: hidden;
}

.hiring-text {
    padding: 60px;
    flex: 1;
}

.hiring-text h2 {
    font-size: 2.5rem;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 30px;
}

.hiring-img {
    flex: 1;
    height: 350px;
    position: relative;
}

.hiring-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 包含图片，显示完整船只 */
    object-position: bottom right;
}

/* --- Bottom Form Section --- */
.bottom-form-section {
    display: flex;
    padding: 80px 50px;
    border-top: 1px solid #333;
    gap: 50px;
}

.form-left-col {
    flex: 0.8;
    position: relative;
}

.form-left-col h2 {
    font-size: 2.5rem;
    font-style: italic;
    text-transform: uppercase;
    line-height: 1;
}

.bottom-triangle {
    bottom: 0;
    left: 0;
    width: 150px;
    height: 150px;
    clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

.form-right-col {
    flex: 1.2;
}

/* 深色表单样式 */
.dark-form label {
    display: block;
    color: #ccc;
    font-size: 0.8rem;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.dark-form .form-group {
    margin-bottom: 15px;
}

.input-wrapper-dark input,
.select-wrapper-dark select {
    width: 100%;
    background-color: transparent;
    border: 1px solid white;
    color: white;
    padding: 12px;
    font-family: inherit;
    font-size: 1rem;
}

.select-wrapper-dark {
    position: relative;
}

.select-wrapper-dark i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    pointer-events: none;
}

.form-sub-heading {
    font-style: italic;
    text-transform: uppercase;
    margin: 30px 0 20px 0;
    font-size: 1.5rem;
}

.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.form-submit-btn {
    width: auto;
    padding: 10px 40px;
}

/* --- 响应式适配 (About Page) --- */
@media (max-width: 900px) {

    .structure-section,
    .contacts-locations .locations-grid,
    .hiring-container,
    .bottom-form-section {
        flex-direction: column;
    }

    .form-grid-2 {
        grid-template-columns: 1fr;
    }

    .hero-content-about h1 {
        font-size: 2.5rem;
    }

    .top-right-shape,
    .bottom-left-shape {
        display: none;
        /* 手机上隐藏装饰图形，避免遮挡 */
    }

    .hiring-img {
        display: none;
        /* 手机上为了排版整洁，可以隐藏大图 */
    }
}


/* =========================================
   Careers Page Styles
   ========================================= */

body.careers-page {
    background-color: black;
    color: white;
}

/* --- Hero Section --- */
.careers-hero {
    position: relative;
    height: 60vh;
    /* 占据屏幕高度的 60% */
    min-height: 400px;
    background-image: url('img-team-bg.jpg');
    /* 替换为团队或卡车合影 */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom: 2px solid #ffee00;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    /* 深色遮罩 */
}

.hero-content-center {
    position: relative;
    z-index: 2;
    padding: 20px;
}

.careers-hero h1 {
    font-size: 4rem;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
    margin-bottom: 20px;
}

.careers-hero p {
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto 30px auto;
    color: #ccc;
}

.hero-shape-bottom {
    bottom: 0;
    right: 10%;
    width: 100px;
    height: 50px;
    background-color: #ffee00;
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

/* --- Benefits Grid --- */
.benefits-section {
    padding: 80px 50px;
    background-color: #111;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 3rem;
    font-style: italic;
    font-weight: 900;
    text-transform: uppercase;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
}

.benefit-card {
    border: 1px solid #333;
    padding: 30px;
    text-align: center;
    transition: 0.3s;
}

.benefit-card:hover {
    border-color: #ffee00;
    transform: translateY(-5px);
}

.benefit-card i {
    font-size: 3rem;
    color: #ffee00;
    margin-bottom: 20px;
}

.benefit-card h3 {
    font-size: 1.2rem;
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 10px;
    font-weight: 800;
}

.benefit-card p {
    color: #aaa;
    font-size: 0.9rem;
    line-height: 1.4;
}

/* --- Job Board (List View) --- */
.jobs-section {
    padding: 80px 50px;
    background-color: black;
}

.jobs-container {
    max-width: 1000px;
    margin: 0 auto;
}

.section-title-left {
    font-size: 2.5rem;
    font-style: italic;
    font-weight: 900;
    border-bottom: 2px solid white;
    padding-bottom: 20px;
    margin-bottom: 40px;
}

.job-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #333;
    padding: 25px 0;
    transition: 0.2s;
}

.job-row:hover {
    background-color: #111;
    padding-left: 20px;
    /* 悬停时稍微右移效果 */
    padding-right: 20px;
}

.job-info h3 {
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 900;
    color: white;
    margin-bottom: 5px;
}

.job-loc,
.job-type {
    color: #888;
    margin-right: 15px;
    font-size: 0.9rem;
    font-weight: bold;
}

.job-loc i {
    color: #ffee00;
}

.btn-outline-white {
    background: transparent;
    border: 2px solid white;
    color: white;
    padding: 8px 25px;
    font-weight: bold;
    font-style: italic;
    cursor: pointer;
    text-transform: uppercase;
    transition: 0.3s;
}

.btn-outline-white:hover {
    background-color: white;
    color: black;
}

/* --- Application Form Section --- */
.application-section {
    padding: 80px 50px;
    border-top: 1px solid #333;
    background-color: #050505;
}

.app-container {
    display: flex;
    max-width: 1200px;
    margin: 0 auto;
    gap: 60px;
}

.app-left {
    flex: 1;
}

.app-left h2 {
    font-size: 3rem;
    font-style: italic;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1;
}

.app-left p {
    color: #ccc;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.recruiter-img-box img {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    filter: grayscale(100%);
    /* 黑白风格图片 */
    border: 2px solid #333;
}

.app-right {
    flex: 1;
    background-color: #111;
    padding: 40px;
    border: 1px solid #333;
}

.careers-form h3 {
    font-style: italic;
    text-transform: uppercase;
    margin-bottom: 30px;
    border-bottom: 1px solid #333;
    padding-bottom: 15px;
}

/* 文件上传按钮美化 */
.file-upload-wrapper {
    position: relative;
    overflow: hidden;
    display: inline-block;
    width: 100%;
}

.file-upload-wrapper input[type=file] {
    font-size: 100px;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.file-label {
    background: transparent;
    border: 1px dashed #666;
    color: #ccc;
    padding: 15px;
    display: block;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    font-style: italic;
    transition: 0.3s;
}

.file-upload-wrapper:hover .file-label {
    border-color: #ffee00;
    color: #ffee00;
}

/* --- 响应式 --- */
@media (max-width: 900px) {
    .benefits-grid {
        grid-template-columns: 1fr 1fr;
        /* 平板两列 */
    }

    .app-container {
        flex-direction: column;
    }

    .job-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .job-action {
        width: 100%;
    }

    .btn-outline-white {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .benefits-grid {
        grid-template-columns: 1fr;
        /* 手机单列 */
    }

    .careers-hero h1 {
        font-size: 2.5rem;
    }
}