/*==================================================
MECHANICAL TESTING PAGE
==================================================*/

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

.service-hero{

    background:linear-gradient(135deg,#214f99,#173b72);

    padding:140px 0;

    color:#fff;

}

.service-hero .page-hero-content{

    max-width:760px;

}

.service-hero span{

    display:inline-block;

    padding:10px 20px;

    background:rgba(255,255,255,.12);

    border:1px solid rgba(255,255,255,.15);

    border-radius:50px;

    color:#8fd04f;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.service-hero h1{

    color:#fff;

    font-size:64px;

    margin-bottom:25px;

}

.service-hero p{

    color:rgba(255,255,255,.88);

    font-size:20px;

    line-height:1.9;

}


/*=========================================
INTRODUCTION
=========================================*/

.service-introduction{

    padding:110px 0;

}

.service-intro-grid{

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:70px;

    align-items:center;

}

.service-intro-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 30px 60px rgba(0,0,0,.12);

}

.service-intro-content h2{

    margin:20px 0;

    font-size:44px;

}

.service-intro-content p{

    color:#666;

    margin-bottom:22px;

    line-height:1.9;

}


/*=========================================
SERVICE GRID
=========================================*/

.service-listing{

    padding:110px 0;

    background:#f8fbff;

}

.service-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.service-card{

    display:block;

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:35px;

    transition:.35s;

    color:inherit;

}

.service-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

    box-shadow:0 20px 45px rgba(0,0,0,.08);

}

.service-card h3{

    font-size:24px;

    margin-bottom:18px;

    color:var(--dark);

}

.service-card p{

    color:#666;

    line-height:1.8;

}


/*=========================================
WHY CHOOSE
=========================================*/

.why-service{

    padding:110px 0;

}

.why-grid{

    display:grid;

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

    gap:30px;

}

.why-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:35px;

    transition:.35s;

}

.why-card:hover{

    background:var(--primary);

    transform:translateY(-10px);

}

.why-card:hover h3,

.why-card:hover p{

    color:#fff;

}

.why-card h3{

    margin-bottom:15px;

    font-size:24px;

}

.why-card p{

    color:#666;

}


/*=========================================
STANDARDS
=========================================*/

.testing-standards{

    padding:110px 0;

    background:#f8fbff;

}

.standards-wrapper{

    display:grid;

    grid-template-columns:45% 55%;

    gap:60px;

    align-items:center;

}

.standards-list{

    display:grid;

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

    gap:20px;

}

.standard-item{

    background:#fff;

    border-left:5px solid var(--primary);

    padding:25px;

    border-radius:10px;

    font-weight:600;

    box-shadow:0 10px 25px rgba(0,0,0,.05);

}


/*=========================================
RELATED SERVICES
=========================================*/

.related-services{

    padding:110px 0;

}


/*=========================================
CTA
=========================================*/

.service-cta{

    padding:110px 0;

}

.service-cta .cta-wrapper{

    background:linear-gradient(135deg,#214f99,#173b72);

    border-radius:24px;

    padding:70px;

}

.service-cta h2{

    color:#fff;

}

.service-cta p{

    color:rgba(255,255,255,.9);

}


/*=========================================
RESPONSIVE
=========================================*/

@media(max-width:1200px){

.service-grid{

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

}

}

@media(max-width:991px){

.service-intro-grid{

grid-template-columns:1fr;

}

.standards-wrapper{

grid-template-columns:1fr;

}

.why-grid{

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

}

.service-hero h1{

font-size:48px;

}

}

@media(max-width:767px){

.service-grid{

grid-template-columns:1fr;

}

.why-grid{

grid-template-columns:1fr;

}

.standards-list{

grid-template-columns:1fr;

}

.service-hero{

padding:90px 0;

}

.service-hero h1{

font-size:36px;

}

.service-intro-content h2{

font-size:32px;

}

}