/* =====================================
   HERO
===================================== */

.driver-hero{

    position:relative;

    width:100%;

    height:720px;

    background:url("/new/img/driver/hero-bg.jpg") center center no-repeat;

    background-size:cover;

}


.hero{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.hero-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.38);

}

.driver-hero .hero-wrap{

    position:relative;
    z-index:2;

    width:100%;
    height:100%;

    display:flex;
    align-items:center;

}

.driver-hero .hero-text{
    position:relative;
    width:100%;
    max-width:1200px;
    text-align:center;
    margin:0 auto;
	margin-top:20%;
    z-index:10;
    color:#fff;

}

.driver-hero .hero-small{

    display:block;

    color:#42A5FF;

    font-size:15px;

    letter-spacing:4px;

    font-weight:700;

    margin-bottom:22px;

}

.driver-hero h1{

    font-size:76px;

    line-height:1.05;

    font-weight:700;

    margin-bottom:35px;

}

.driver-hero p{

    max-width:1200px;

    font-size:22px;

    line-height:1.8;

}

/* =====================================
   DRIVER MONITORING FEATURES
===================================== */

.driver-feature{

    width:100%;

    padding:110px 0 0;

    background:#fff;

}

.driver-feature-wrap{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    width:100%;

    border-top:1px solid #d9d9d9;

    border-bottom:1px solid #d9d9d9;

}

.feature-box{

    min-height:410px;

    padding:70px 40px;

    text-align:center;

    border-right:1px solid #d9d9d9;

}

.feature-box:first-child{

    border-left:1px solid #d9d9d9;

}

.feature-box h3{

    font-size:22px;

    font-weight:700;

    color:#111;

    line-height:1.25;

    margin-bottom:35px;

}

.feature-box p{

    font-size:16px;

    color:#7f7f7f;

    line-height:2;

}


/* =====================================
   REPRESENTATIVE FORWARD SAFETY SOLUTION
===================================== */

.driver-solution{

    padding:120px 0 0;

    background:#fff;

}

.driver-solution h2{

    text-align:center;

    font-size:60px;

    font-weight:700;

    margin-bottom:80px;

}

.driver-solution-wrap{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    border-top:1px solid #d8d8d8;

    border-bottom:1px solid #d8d8d8;

}

.solution-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:55px 35px;

    border-right:1px solid #d8d8d8;

}

.solution-box:first-child{

    border-left:1px solid #d8d8d8;

}

.solution-box h3{

    font-size:22px;

    margin-bottom:30px;

    font-weight:700;

}

.solution-box figure{

    height:280px;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:30px;

}

.solution-box img{

    max-width:100%;
    max-height:100%;

}

.solution-box h4{

    font-size:30px;

    margin-bottom:15px;

    font-weight:700;

}

.solution-box strong{

    display:block;

    min-height:55px;

    font-size:18px;

    line-height:1.45;

    margin-bottom:20px;

}

.solution-box p{

    flex:1;

    color:#777;

    line-height:1.8;

    margin-bottom:30px;

}

.solution-box .btn-basic{

    display:inline-block;

    width:170px;

    padding:14px 0;

    background:#00569d;

    color:#fff;

    font-size:15px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;
	border-radius: 0px;

}

.solution-box .btn-basic:hover{

    background:#003f75;

}

/* =====================================
   WHAT DRIVER MONITORING DETECTS
===================================== */

.driver-detect{

    background:#fff;

}

.driver-detect-hero{

    position:relative;

    height:624px;

    background:url("/new/img/driver/detect-bg.jpg") center center no-repeat;

    background-size:cover;

}

.driver-detect-mask{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.18);

}

.driver-detect-title{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    max-width:90%;

    text-align:center;

    color:#fff;

}

.driver-detect-title h2{

    font-size:74px;

    line-height:1.1;

    margin-bottom:35px;

}

.driver-detect-title p{

    width:900px;

    max-width:100%;

    margin:0 auto;

    font-size:22px;

    line-height:1.7;

}


/* Grid */

.driver-detect-wrap{

    display:grid;

    grid-template-columns:repeat(7,1fr);

    border-top:1px solid #ddd;

    border-bottom:1px solid #ddd;

}

.detect-item{

    text-align:center;

    padding:55px 28px;

    border-right:1px solid #ddd;

}

.detect-item:first-child{

    border-left:1px solid #ddd;

}

.detect-item img{

    width:88px;

    margin-bottom:35px;

}

.detect-item h3{

    font-size:22px;

    margin-bottom:20px;

    font-weight:700;

}

.detect-item p{

    font-size:15px;

    color:#8b8b8b;

    line-height:1.9;

}


/* =====================================
   TECHNOLOGY ARCHITECTURE
===================================== */

.driver-tech{

    padding:120px 0;

    background:#fff;

}


.driver-tech-hero{

    position:relative;
margin-top:120px;
    width:100%;

    height:624px;

    background:url("/new/img/driver/technology-bg.jpg") center center no-repeat;

    background-size:cover;

}

.driver-tech-mask{

    position:absolute;

    inset:0;

    background:rgba(0,0,0,.22);

}

.driver-tech-title{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%);

    width:960px;

    max-width:90%;

    text-align:center;

    color:#fff;

    z-index:2;

}

.driver-tech-title h2{

    font-size:70px;

    font-weight:700;

    margin-bottom:30px;

    line-height:1.1;

}

.driver-tech-title p{

    width:100%;

    max-width:100%;

    margin:0 auto;

    font-size:24px;

    line-height:1.8;

}


/* =====================================
   TECHNOLOGY ARCHITECTURE
===================================== */

.driver-technology{
margin-top:120px;
    width:100%;

}

.technology-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    min-height:480px;

}

.technology-row.reverse .technology-image{

    order:2;

}

.technology-row.reverse .technology-content{

    order:1;

}

.technology-image{

    overflow:hidden;

}

.technology-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.technology-content{

    display:flex;

    align-items:center;

    background:#fff;

}

.technology-inner{
    padding:40px;
    margin:0 auto;

}

.technology-inner h3{

    font-size:46px;

    line-height:1.15;

    color:#00569d;

    margin-bottom:35px;

}

.technology-inner p{

    font-size:22px;

    color:#7b7b7b;

    line-height:2;

}


/* =====================================
   Real-World Driving Scenario
===================================== */

.driver-real-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-real-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-real-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Real-World Driving Scenario
===================================== */

.driver-long-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-long-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-long-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Commercial Vehicle Operation
===================================== */

.driver-commercial-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-commercial-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-commercial-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   High-Vibration and Heavy-Duty Environments
===================================== */

.driver-high-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-high-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-high-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Connected Fleet Environments
===================================== */

.driver-connected-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-connected-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-connected-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Consumer & Low-Cost Fleet Use
===================================== */

.driver-consumer-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-consumer-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-consumer-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}





















@media (max-width:768px){

.driver-hero{

    height:420px;

}

.driver-hero .hero-text{
    width:100%;

}

.driver-hero h1{

    font-size:clamp(38px,11vw,64px);

    line-height:1.05;

    margin-bottom:18px;

}

.driver-hero p{

    width:100%;

    font-size:clamp(16px,4.0vw,20px);

    line-height:1.4;

}

.driver-hero .hero-small{

    font-size:13px;

    letter-spacing:2px;

}

}

@media (max-width:768px){

.driver-solution{

    padding-top:80px;

}

.driver-solution h2{

    font-size:40px;

    margin-bottom:50px;

}

.driver-solution-wrap{

    grid-template-columns:1fr;

}

.solution-box{

    padding:45px 30px;

    border-left:1px solid #d8d8d8;

    border-right:1px solid #d8d8d8;

    border-bottom:1px solid #d8d8d8;

}

.solution-box figure{

    height:220px;

}

.solution-box h3{

    font-size:22px;

}

.solution-box h4{

    font-size:28px;

}

.solution-box strong{

    min-height:auto;

    font-size:17px;

}

.solution-box p{

    flex:none;

    font-size:16px;

    margin-bottom:25px;

}

.solution-box .btn-basic{

    width:180px;

}

}

@media(max-width:768px){

.driver-detect-hero{

    height:320px;

}

.driver-detect-title{

    width:92%;

}

.driver-detect-title h2{
        font-size: 38px;
        line-height: 1.2;
        margin-bottom: 20px;

}

.driver-detect-title p{
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.2;
        margin: 20px auto 0;
}

.driver-detect-wrap{

    grid-template-columns:1fr;

}

.detect-item{

    padding:45px 30px;

    border-left:1px solid #ddd;

    border-right:1px solid #ddd;

    border-bottom:1px solid #ddd;

}

.detect-item img{

    width:72px;

}

.detect-item h3{

    font-size:24px;

}

.detect-item p{

    font-size:16px;

}

}

@media(max-width:768px){

.driver-tech{
    padding:80px 0;
}

.driver-tech-hero{
    margin-top:80px;
    height:320px;
}

.driver-tech-title h2{
        font-size: 38px;
        line-height: 1.2;
        margin-bottom: 20px;
}
.driver-tech-title p{
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.2;
        margin: 20px auto 0;
}

}

@media(max-width:768px){

.technology-row{
margin-top:40px;
    grid-template-columns:1fr;

    min-height:auto;

}

.technology-row.reverse .technology-image,
.technology-row.reverse .technology-content{

    order:unset;

}

.technology-image{

    height:260px;

}

.technology-content{
    padding:30px;

}

.technology-inner{

    width:100%;
    padding: 0px;
    margin: 0 auto;	

}

.technology-inner h3{

    font-size:34px;

}

.technology-inner p{

    font-size:16px;

}

}

/* =====================================
   Commercial Vehicle Operation
===================================== */

.driver-real-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-real-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-real-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Long-Hour Driving
===================================== */

.driver-long-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-long-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-long-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Commercial Vehicle Operation
===================================== */

.driver-commercial-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-commercial-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-commercial-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   High-Vibration and Heavy-Duty Environments
===================================== */

.driver-high-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-high-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-high-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Consumer & Low-Cost Fleet Use
===================================== */

.driver-consumer-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-consumer-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-consumer-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:760px;
    margin:0 auto;

    line-height:1.9;
    font-size:18px;

}

/* =====================================
   Connected Fleet Environments
===================================== */

.driver-connected-hero{

    position:relative;
    height:620px;

    background:url("/new/img/driver/driver-connected-bg.jpg") center center no-repeat;
    background-size:cover;

}


.tech-mask{

    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);

}

.driver-connected-hero .innerV{

    position:relative;
    z-index:2;

    height:620px;

    display:flex;
    justify-content:center;
    align-items:center;

}

.tech-hero-text{

    width:900px;
    color:#fff;
    text-align:center;

}

.tech-hero-text h2{

    font-size:64px;
    margin-bottom:35px;

}

.tech-hero-text p{

    width:100%;
    margin:0 auto;

    line-height:1.9;
    font-size:22px;

}

/* ===== Mobile Optimization Patch ===== */
@media (max-width:768px){

.driver-feature{padding:80px 0 0;}
.driver-feature-wrap{grid-template-columns:1fr;}
.feature-box{
 min-height:auto;
 padding:40px 24px;
 border-left:1px solid #d9d9d9;
 border-bottom:1px solid #d9d9d9;
}
.feature-box h3{font-size:24px;margin-bottom:20px;}
.feature-box p{font-size:16px;line-height:1.8;}

.driver-real-hero,
.driver-long-hero,
.driver-commercial-hero,
.driver-high-hero,
.driver-connected-hero,
.driver-consumer-hero{
 height:360px;
}

.driver-real-hero .innerV,
.driver-long-hero .innerV,
.driver-commercial-hero .innerV,
.driver-high-hero .innerV,
.driver-connected-hero .innerV,
.driver-consumer-hero .innerV{
 height:360px;
 padding:0 20px;
}

.tech-hero-text{
 width:100%;
}

.tech-hero-text h2{
 font-size:38px;
 margin-bottom:18px;
 line-height:1.2;
}

.tech-hero-text p{
        width: 100%;
        max-width: 100%;
        font-size: 16px;
        line-height: 1.2;
        margin: 20px auto 0;
}

}