/* =========================
   ZOK Precision Website CSS
   ========================= */


*{
    box-sizing:border-box;
}


body{

    margin:0;

    font-family:
    "Inter",
    "Microsoft YaHei",
    Arial,
    sans-serif;

    color:#222;

    line-height:1.7;

    background:#fff;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}





/* =========================
   HEADER
   ========================= */


header{

    height:90px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 8%;

    background:#fff;

    border-bottom:1px solid #e5e5e5;

}


.logo{

    height:90px;

    display:flex;

    align-items:center;

}


.logo img{

    height:70px;

    width:auto;

    object-fit:contain;
}



nav a{

    margin-left:35px;

    font-size:15px;

    color:#333;

    transition:.3s;

}



nav a:hover{

    color:#d46b25;

}






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


.hero{

    display:flex;

    align-items:center;

    gap:70px;

    padding:100px 8%;

    background:#f5f5f5;

}


.hero-text{

    width:48%;

}


.hero-img{

    width:52%;

    height:450px;

    object-fit:cover;

}



.hero h1{

    font-size:52px;

    line-height:1.2;

    margin:0 0 20px;

    color:#111;

}



.hero h2{

    font-size:34px;

    line-height:1.4;

    margin:0 0 25px;

    text-align:left;

}



.hero p{

    font-size:18px;

    color:#555;

}



.hero-img{

    width:55%;

    height:430px;

    object-fit:cover;

}






/* =========================
   BUTTON
   ========================= */


.btn{

    display:inline-block;

    margin-top:25px;

    padding:12px 35px;

    background:#d46b25;

    color:#fff;

    font-size:16px;

    transition:.3s;

}



.btn:hover{

    background:#b8561b;

}







/* =========================
   SECTION
   ========================= */


section{

    padding:70px 8%;

}



section h2{

    text-align:center;

    font-size:34px;

    margin:0 0 45px;

    color:#111;

}



.intro{

    max-width:900px;

    margin:auto;

    text-align:center;

    color:#555;

    font-size:17px;

}






/* =========================
   STATS
   ========================= */


.stats{

    display:grid;

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

    background:#111;

    color:#fff;

    padding:45px 8%;

    text-align:center;

}



.stats h3{

    font-size:28px;

    margin:0 0 10px;

}



.stats p{

    color:#aaa;

    margin:0;

    font-size:15px;

}







/* =========================
   CARDS
   ========================= */


.cards{

    display:grid;

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

    gap:30px;

}



.cards div{

    border:1px solid #ddd;

    background:#fff;

    padding:30px;

    transition:.3s;

}



.cards div:hover{

    transform:translateY(-5px);

}



.cards img,
.cards video{

    width:100%;

    height:230px;

    object-fit:cover;

    margin-bottom:20px;

}



.cards h3{

    font-size:22px;

    margin-top:10px;

}



.cards p{

    color:#666;

}







/* =========================
   GRAY SECTION
   ========================= */


.gray{

    background:#f5f5f5;

}








/* =========================
   CAPABILITY PAGE
   ========================= */


.capability-block{

    display:flex;

    align-items:center;

    gap:60px;

}



.capability-block>div{

    width:50%;

}



.capability-block img{

    width:50%;

    height:380px;

    object-fit:cover;

}



.capability-block h2{

    text-align:left;

    margin-bottom:25px;

}








/* =========================
   CASE PAGE
   ========================= */


.case-item{

    display:flex;

    gap:60px;

    align-items:center;

}



.case-item>div{

    width:50%;

}



.case-item img{

    width:50%;

    height:420px;

    object-fit:cover;

}



.case-item h2{

    text-align:left;

    margin-bottom:25px;

}



.case-item h3{

    font-size:18px;

    margin-bottom:5px;

    color:#d46b25;

}



.case-item p{

    color:#555;

}








/* =========================
   CONTACT
   ========================= */


.contact-box{

    max-width:650px;

    margin:auto;

    border:1px solid #ddd;

    padding:40px;

    text-align:center;

}



.contact-box h3{

    margin-top:25px;

    color:#d46b25;

}



.contact-box p{

    font-size:18px;

}







/* =========================
   DARK SECTION
   ========================= */


.dark{

    background:#111;

    color:#fff;

    text-align:center;

}



.dark h2{

    color:#fff;

}



.dark p{

    color:#ddd;

}






/* =========================
   FOOTER
   ========================= */


footer{

    background:#000;

    color:#aaa;

    text-align:center;

    padding:35px;

}






/* =========================
   MOBILE
   ========================= */


@media(max-width:900px){



header{

    padding:0 5%;

}



nav a{

    margin-left:12px;

    font-size:13px;

}



.hero{

    display:block;

    padding:50px 5%;

}



.hero-text{

    width:100%;

}



.hero h1{

    font-size:38px;

}



.hero h2{

    font-size:25px;

}



.hero-img{

    width:100%;

    height:300px;

    margin-top:35px;

}



.stats{

    display:block;

}



.stats div{

    margin-bottom:25px;

}



.cards{

    grid-template-columns:1fr;

}



.capability-block,

.case-item{

    display:block;

}



.capability-block>div,

.capability-block img,

.case-item>div,

.case-item img{

    width:100%;

}



.capability-block img,

.case-item img{

    height:300px;

    margin-top:30px;

}



section{

    padding:50px 5%;

}



}