/*--------------------------------------------------------------------- 
File Name: style.css
Description: Professional Engineering & Sourcing Identity for Intleva
---------------------------------------------------------------------*/

/* 1. 字体引入 - 精简了不必要的字重以提升加载速度 */
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800&display=swap');

/* 2. 外部插件样式引入 */
<!-- <link rel="stylesheet" href="/css/normalize.css"> -->;
@import url(icomoon.css);
@import url(font-awesome.min.css);
@import url(nice-select.css);

/*--------------------------------------------------------------------- 
基础重置 (Basic Reset)
---------------------------------------------------------------------*/
* {
    box-sizing: border-box !important;
    outline: none !important;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    color: #444444;
    font-size: 16px; /* 提升易读性 */
    font-family: 'Poppins', sans-serif;
    line-height: 1.7;
    font-weight: 400;
    overflow-x: hidden;
    background-color: #fff;
}

a {
    color: #323757;
    text-decoration: none !important;
    transition: all .3s ease-in-out;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
    color: #111111;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 15px;
}

p {
    margin-bottom: 15px;
    font-weight: 400;
}

img {
    max-width: 100%;
    height: auto;
}

/*--------------------------------------------------------------------- 
通用组件 (Common Components)
---------------------------------------------------------------------*/
.container {
    max-width: 1170px;
    margin: 0 auto;
}

/* 核心按钮样式优化：解决对齐与居中问题 */
.read_more {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 170px;
    height: 48px !important;
    background: #323757;
    color: #fff !important;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    border-radius: 4px;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.read_more:hover {
    background: #e8576f;
    box-shadow: 0 4px 12px rgba(232, 87, 111, 0.3);
    transform: translateY(-2px);
}

.titlepage {
    padding-bottom: 40px;
}

.titlepage h2 {
    font-size: 45px;
    color: #333333;
    text-transform: uppercase;
}

/*--------------------------------------------------------------------- 
导航与页眉 (Header & Navigation)
---------------------------------------------------------------------*/
.header {
    width: 100%;
    background: #fff;
}

.top_header {
    border-top: #323757 solid 15px;
    background: #fefefd;
    padding: 20px 0;
}

.header_midil {
    background: #323757;
    padding: 15px 0;
}

.navigation.navbar-dark .navbar-nav .nav-link {
    padding: 0px 20px;
    color: #fff;
    font-size: 16px;
    text-transform: uppercase;
}

.navigation.navbar-dark .navbar-nav .nav-link:hover,
.navigation.navbar-dark .navbar-nav .active > .nav-link {
    color: #e8576f;
}

/*--------------------------------------------------------------------- 
深色容器修正 (CTA Box & Dark Sections)
---------------------------------------------------------------------*/
/* 修复副标题不可见问题 */
.wedo, .schedule, .footer, .cta_box {
    background: #323757;
    color: #ffffff;
}

.cta_box {
    padding: 50px;
    border-radius: 10px;
    text-align: center;
    margin: 40px 0;
}

.cta_box h4, .cta_box h2 {
    color: #ffffff !important;
    margin-bottom: 20px;
}

/* 强制白色文字，解决对比度低看不见的问题 */
.cta_box p, .schedule p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto 25px auto;
}

.cta_box .read_more {
    background: #ffffff !important;
    color: #323757 !important;
}

/*--------------------------------------------------------------------- 
About 页面：技术分层 (Engineering DNA)
---------------------------------------------------------------------*/
.dna_box {
    margin: 35px 0 !important;
    padding: 15px 0 15px 25px !important;
    border-left: 5px solid #28a745 !important; /* 品牌绿 */
    background: linear-gradient(to right, rgba(40, 167, 69, 0.05), transparent);
}

.dna_box strong {
    display: block !important;
    font-size: 20px !important;
    color: #323757 !important;
    margin-bottom: 10px;
    font-weight: 700 !important;
    text-transform: uppercase;
}

.dna_box p {
    font-size: 16px !important;
    color: #555 !important;
    margin-bottom: 20px !important;
}

/*--------------------------------------------------------------------- 
页脚与版权 (Footer & Copyright)
---------------------------------------------------------------------*/
.footer {
    padding: 80px 0 40px 0;
    margin-top: 80px;
}

.hedingh3 h3 {
    color: #fff;
    font-size: 22px;
    border-left: 4px solid #e8576f;
    padding-left: 15px;
    margin-bottom: 25px;
}

.footer p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 15px;
}

.copyright {
    background: #2a2e4a !important;
    padding: 25px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.copyright p {
    color: #ffffff !important;
    margin: 0;
    font-size: 14px;
    opacity: 0.8;
}

/* 2. 修复 Quick Links 和列表文字看不见的问题 */
.footer p, 
.footer ul li, 
.footer ul li a {
    color: rgba(255, 255, 255, 0.8) !important; /* 浅白色，高对比度 */
    font-size: 15px;
    line-height: 2;
    text-decoration: none !important;
}

/* 3. 悬停效果：变成品牌粉红/红色 */
.footer ul li a:hover {
    color: #e8576f !important;
}

/* 4. 去掉列表默认的难看小圆点，并调整间距 */
.footer ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/*--------------------------------------------------------------------- 
辅助工具 (Utilities)
---------------------------------------------------------------------*/
.circle-img-container {
    width: 140px;
    height: 140px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid #e8576f;
}

.circle-img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text_align_center { text-align: center; }
.text_align_left { text-align: left; }
.text_align_right { text-align: right; }

/* 移动端适配调整 */
@media (max-width: 768px) {
    .titlepage h2 { font-size: 32px; }
    .top_header { height: auto; padding: 15px 0; }
    .cta_box { padding: 30px 15px; }
}
/* index.html 约第 47 行 */
.carousel-item {
    height: 500px;      /* 从 600px 调小到 500px 或更低 */
    min-height: 500px;
}
/* style.css 第 238 行 */
.full_bg {
    background: #f7f7f7;
    padding: 20px 0 !important; /* 将原来的 40px 减半 */
}
/* style.css 第 267 行 */
.agency figure img {
    width: 100%;
    max-width: 100%; /* 从 500px 改为 100% 让它更饱满 */
    height: auto;
    object-fit: contain; /* 保持比例 */
}
/* style.css */
#banner1 .carousel-control-prev {
    left: 2%; /* 从 4% 改为 2%，让按钮更靠近屏幕边缘 */
}

#banner1 .carousel-control-next {
    right: 2%; /* 同上 */
}
/* --- Workflow 视觉优化 (方案一) --- */

/* 容器基础样式 */
.workflow-container {
    margin-top: 30px;
    padding: 20px;
    background: rgba(248, 249, 250, 0.5); /* 极浅灰背景，增加层次感 */
    border-radius: 8px;
}

.workflow-title {
    font-size: 14px;
    font-weight: 700;
    color: #323757;
    text-transform: uppercase;
    margin-bottom: 20px;
    letter-spacing: 1px;
    border-left: 3px solid #28a745; /* 品牌绿装饰线 */
    padding-left: 10px;
}

/* 链式布局核心 */
.process-chain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: nowrap; /* 保持单行 */
}

/* 步骤节点 */
.process-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
}

/* 步骤编号 */
.step-num {
    width: 28px;
    height: 28px;
    background: #323757;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 8px;
    transition: all 0.3s ease;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #323757; /* 双圈效果 */
}

/* 步骤文字 */
.step-text {
    font-size: 13px;
    color: #444;
    font-weight: 500;
    white-space: nowrap;
}

/* 连接线 */
.process-connector {
    flex: 1;
    height: 2px;
    background: #e0e0e0;
    margin: 0 10px;
    margin-top: -22px; /* 向上偏移，对齐编号中心 */
    position: relative;
    z-index: 1;
}

/* 变体：贸易伙伴方案使用蓝色调 */
.variant-blue .step-num {
    background: #28a745; /* 也可以换成其他品牌色 */
    box-shadow: 0 0 0 1px #28a745;
}

.variant-blue .workflow-title {
    border-left-color: #323757;
}

/* 悬停交互效果 */
.process-step:hover .step-num {
    background: #e8576f; /* 悬停变为品牌粉红 */
    box-shadow: 0 0 0 1px #e8576f;
    transform: scale(1.1);
}

/* 移动端适配 */
@media (max-width: 768px) {
    .process-chain {
        flex-direction: column;
        align-items: flex-start;
    }
    .process-connector {
        width: 2px;
        height: 20px;
        margin: 5px 0 5px 13px; /* 改为垂直连接线 */
    }
    .process-step {
        flex-direction: row;
    }
    .step-num {
        margin-bottom: 0;
        margin-right: 15px;
    }
}
/* 确保卡片父级容器是 Flex 布局 */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* 针对你的服务卡片容器 (假设类名为 service-card，请根据实际 HTML 修改) */
/* --- 彻底修正：左侧流程靠左对齐标题 --- */
.service-card .workflow-container {
    /* 核心修改：强制取消左侧所有内边距，取消左侧所有外边距 */
    margin-left: 0 !important;
    padding-left: 0 !important;
    
    /* 结构修改：确保容器占满宽度 */
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* 让内部标题也靠左 */
}

/* 针对内部流程链的对齐和字号优化 */
.service-card .process-chain {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important; /* 5个节点时这个最稳 */
    padding-left: 0 !important;
    padding-right: 20px !important; /* 整体右侧留白，防止05节点太靠右 */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.service-card .process-step .step-text {
    /* 5个节点必须用小号字体，防止重叠 */
    font-size: 11px !important;
    word-break: break-all;
}
/* 让流程容器自动推到底部对齐 */
.workflow-container {
    margin-top: auto; /* 这一行非常关键：它会将流程块推到卡片的最底部 */
    padding-top: 25px;
}

/* 修正 5 个节点的文字排版，防止拥挤 */
.process-step .step-text {
    font-size: 11px !important;
    white-space: nowrap;
}

.process-chain {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.process-step {
    flex: 1;
    text-align: center;
}
.step-text {
    font-size: 11px !important; /* 5个点必须用小号字体，否则会重叠 */
}

/* --- 彻底修正：TOP 标签正圆 --- */
#backToTop {
    /* 核心修改：宽度 = 高度 */
    width: 48px !important;  /* 稍微放大一点，更显眼 */
    height: 48px !important;
    
    /* 核心修改：圆角必须是 50% */
    border-radius: 50% !important;
    
    /* Flex居中，确保图标和TOP文字始终在正中心 */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* 防止内部文字撑大 */
    padding: 0 !important; 
    line-height: normal !important;
}

/* 修正图标位置 */
#backToTop i {
    font-size: 18px !important;
    margin-bottom: 2px;
}

/* 修正下方“TOP”文字位置 */
#backToTop span {
    font-size: 10px !important;
    font-weight: bold;
    letter-spacing: 0.5px;
}
/* 确保父级行容器对齐 */
.engagement_models .row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch; /* 确保两个 col-md-6 等高 */
}

/* 修正卡片内部布局 */
.model_box {
    display: flex !important;
    flex-direction: column !important;
    height: 100%; /* 继承父级高度 */
    justify-content: flex-start; /* 顶部对齐内容 */
}

/* 核心对齐逻辑：将流程容器包裹在一个自动撑开的容器中 */
.workflow-container {
    margin-top: auto;    /* 这一行将容器推向底部基准 */
    margin-bottom: auto; /* 与上面配合，使容器在剩余空间内垂直居中 */
    padding: 20px 0;    /* 统一上下内边距 */
    min-height: 140px;  /* 设定一个统一的最小高度，确保中心线一致 */
    display: flex;
    flex-direction: column;
    justify-content: center; /* 确保内容在容器内部垂直居中 */
}

/* 统一标题样式，防止微小的高度差 */
.workflow-title {
    margin-top: 0 !important;
    margin-bottom: 15px !important;
    line-height: 1.2 !important;
}
/* ==========================================================================
   Intleva 全局布局修正版 (保留活动页红色 + 统一全站宽度)
   ========================================================================== */

/* 1. 统一全站大框架：确保所有页面（Home/About/Portfolio等）左右对齐线一致 */
.container, .container-width {
    max-width: 1400px !important;
    width: 92% !important;
    margin: 0 auto !important;
    padding-left: 15px;
    padding-right: 15px;
}

/* 2. 导航栏布局优化 */
.navigation.navbar {
    padding: 15px 0 !important; 
}

.nav-item .nav-link {
    font-size: 16px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: #ffffff !important; /* 默认文字为白色 */
    padding: 10px 18px !important;
    transition: 0.3s;
}

/* 3. 修正：保留活动页面（Active）为红色，悬停（Hover）为绿色 */
/* 这里的红色 #ff4f5a 是参考你截图中的色调，你可以按需微调 */
.nav-item.active .nav-link {
    color: #ff4f5a !important; 
    background: transparent !important;
}

.nav-item:hover .nav-link {
    color: #28a745 !important; /* 鼠标移上去时显示绿色，增加交互感 */
}

/* 4. 确保所有页面的板块在 1400px 下完美排列 */
.eng_advantage, .work, .wedo, .portfolio, footer {
    width: 100%;
}

.row {
    display: flex;
    flex-wrap: wrap;
}

/* 移动端适配 */
@media (max-width: 991px) {
    .container {
        width: 95% !important;
    }
    .nav-item .nav-link {
        padding: 10px 0 !important;
    }
}
/* ==========================================================================
   移动端导航栏(Header)与菜单外观彻底修正
   ========================================================================== */

@media (max-width: 991px) {
    /* 1. 强制蓝色条背景铺满，并增加高度防止白边 */
    .header_midil {
        background: #323757 !important; /* 统一使用你定义的蓝色 */
        padding: 12px 0 !important;    /* 增加上下间距，使蓝色条更厚实 */
        position: relative;
        z-index: 1000;
        border-bottom: 1px solid rgba(255,255,255,0.1); /* 微弱分割线 */
    }

    /* 2. 修正 MENU 文字颜色 */
    .mobile-menu-text {
        display: inline-block !important;
        color: #ffffff !important;
        font-size: 14px;
        margin-right: 8px;
        font-weight: 700;
        vertical-align: middle;
    }

    /* 3. 修正 Toggler 按钮：去除边框，确保垂直居中 */
    .navbar-toggler {
        border: none !important;
        background: transparent !important;
        display: flex !important;
        align-items: center;
        padding: 0 !important;
        outline: none !important;
    }

    /* 4. 彻底解决展开菜单的白底问题 */
    .navbar-collapse {
        background: #323757 !important; /* 确保下拉菜单背景也是蓝色 */
        margin-top: 10px;
        padding: 15px;
        border-radius: 0 0 8px 8px;
    }

    /* 5. 调整导航链接在移动端的样式 */
    .navigation.navbar-dark .navbar-nav .nav-link {
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        color: #ffffff !important;
    }

    /* 6. 解决全屏背景(full_bg)与导航栏的空隙 */
    .full_bg {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

/* ==========================================================================
   修正幻灯片(Carousel)在窄屏下的视觉断层
   ========================================================================== */
@media (max-width: 768px) {
    /* 确保 Banner 容器在移动端也有足够的蓝色保护色 */
    .carousel-item {
        background: #f8f9fa; /* 与页面背景色保持一致 */
    }
}
/* ==========================================================================
   Intleva 最终清理补丁：在移动端彻底移除 "GET A QUOTE" 按钮
   ========================================================================== */

@media (max-width: 991px) {
    /* 1. 隐藏所有可能出现的 Get a Quote 按钮容器 */
    /* 覆盖了 top_header, header_midil 以及 select_main 等常见存放位置 */
    .header .read_more, 
    .top_header .read_more,
    .header_midil .read_more,
    .select_main,
    .read_more_box {
        display: none !important;
    }

    /* 2. 优化蓝色条布局：确保 MENU 文字垂直居中 */
    .header_midil {
        background: #323757 !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important; /* 让 MENU 靠右对齐 */
        padding: 0 15px !important;
    }

    /* 3. 移除可能导致高度异常的占位符 */
    .mobile-menu-text {
        margin-bottom: 0 !important;
        line-height: normal !important;
    }
    
    /* 4. 确保导航图标位置稳固 */
    .navbar-toggler {
        margin-right: 0 !important;
        padding-right: 0 !important;
    }
}
<style>
/* ==========================================================================
   Intleva 全站导航栏终极一致性补丁 (V4 - 彻底锁定版)
   ========================================================================== */

/* --- 1. 网页端 (Desktop, >=992px) --- */
@media (min-width: 992px) {
    /* 锁定顶部白区，确保 Logo 垂直居中且不闪烁 */
    .top_header {
        height: 90px !important; 
        display: flex !important;
        align-items: center !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    /* 锁定蓝条，确保高度绝对统一 */
    .header_midil {
        height: 60px !important;
        min-height: 60px !important;
        display: flex !important;
        align-items: center !important;
        background: #323757 !important;
    }

    /* 锁定 Logo 图片：强制所有页面图片显示高度完全一致 */
    .logo img, .navbar-brand img {
        height: 60px !important; 
        width: auto !important;
        max-height: 60px !important;
        display: block !important;
        margin: 0 !important;
    }

    /* 锁定按钮大小：强制物理宽度和高度，不随文字变化 */
    .read_more,
    .header_midil .read_more,
    .top_header .read_more,
    .select_main .read_more {
        /* 精确物理尺寸 */
        width: 170px !important;      
        height: 42px !important;      
        min-width: 170px !important;  
        
        /* 内部对齐 */
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        
        /* 消除所有内外边距干扰 */
        padding: 0 !important;
        margin: 0 !important;
        
        /* 文字锁定 */
        font-size: 14px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }
}

/* --- 2. 手机端 (Mobile, <992px) --- */
@media (max-width: 991px) {
    /* 彻底清理按钮及其容器 */
    .read_more, .select_main, .read_more_box {
        display: none !important;
    }

    /* 锁定手机端 Logo 区域高度，消除白区跳动 */
    .top_header {
        height: 70px !important;
        min-height: 70px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        background: #ffffff !important;
    }

    /* 锁定手机端 Logo 图片：这是防止 Logo 跳动的关键 */
    .logo img, .navbar-brand img {
        height: 45px !important;      /* 强制物理高度 */
        width: auto !important;
        max-height: 45px !important;
        display: block !important;
        margin: 0 auto !important;
    }

    /* 锁定手机端蓝条高度 */
    .header_midil {
        height: 56px !important;
        min-height: 56px !important;
        background: #323757 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        padding: 0 15px !important;
    }

    .mobile-menu-text {
        line-height: 56px !important;
        margin: 0 10px 0 0 !important;
        color: #ffffff !important;
        font-size: 14px !important;
        display: inline-block !important;
    }
}

/* --- 3. 全局布局对齐（消除页面间距导致的位移） --- */
.full_bg, .inner_page, .about_container, #about, .dna_box, .titlepage {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    top: 0 !important;
}

/* 消除所有页面 header 的多余外边距 */
.header {
    margin: 0 !important;
    padding: 0 !important;
}
</style>

/* /* ==========================================================================
   Intleva 全站按钮尺寸与位置“死锁”补丁 (基于认可版本修正)
   ========================================================================== */

/* 1. 统一容器高度与对齐：这是防止位置跳动的核心 */
.top_header .col-md-9,
.top_header .col-sm-8 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-height: 90px !important; /* 强制白区高度一致，确保按钮垂直居中 */
}

.select_main {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
}

/* 2. 统一按钮物理尺寸与内部文字：解决大小不一的问题 */
.read_more,
.select_main .read_more,
.top_header .read_more {
    /* --- 尺寸死锁 --- */
    width: 165px !important;      /* 统一宽度 */
    height: 42px !important;     /* 统一高度 */
    min-width: 165px !important;  /* 固死宽度，不随文字变 */
    max-width: 165px !important;
    
    /* --- 文字死锁 --- */
    font-size: 14px !important;   /* 强制全站字号统一 */
    font-weight: 700 !important;  /* 强制粗细统一 */
    line-height: 1 !important;    /* 配合 flex 居中 */
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #ffffff !important;
    white-space: nowrap !important;
    
    /* --- 内部对齐 --- */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* --- 间距清理 --- */
    padding: 0 !important;
    margin: 0 !important;
    
    /* --- 视觉统一 --- */
    background: #333d56 !important;
    border-radius: 4px !important;
    border: none !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

/* 3. 手机端自动清理：保持简洁 */
@media (max-width: 991px) {
    .top_header .read_more,
    .select_main {
        display: none !important;
    }
}