/*==================================================
COATING THICKNESS TEST PAGE
==================================================*/


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

.coating-hero{

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

    padding:140px 0;

    color:#fff;

}

.coating-hero .page-hero-content{

    max-width:760px;

}

.coating-hero span{

    display:inline-block;

    padding:10px 20px;

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

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

    border-radius:50px;

    color:#8fd04f;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.coating-hero h1{

    color:#fff;

    font-size:64px;

    margin-bottom:25px;

}

.coating-hero p{

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

    font-size:20px;

    line-height:1.9;

}


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

.coating-introduction{

    padding:110px 0;

}

.intro-grid{

    display:grid;

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

    gap:70px;

    align-items:center;

}

.intro-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 25px 50px rgba(0,0,0,.12);

}

.intro-content h2{

    font-size:44px;

    margin:18px 0;

}

.intro-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:22px;

}


/*=========================================
TESTING METHODS
=========================================*/

.coating-methods{

    padding:110px 0;

    background:#f8fbff;

}

.properties-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.property-card{

    background:#fff;

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

    border-radius:18px;

    padding:35px;

    transition:.35s;

}

.property-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

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

}

.property-card h3{

    color:var(--primary);

    font-size:22px;

    margin-bottom:15px;

}

.property-card p{

    color:#666;

    line-height:1.8;

}


/*=========================================
WHY IT MATTERS
=========================================*/

.importance-section{

    padding:110px 0;

}

.importance-grid{

    display:grid;

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

    gap:70px;

    align-items:center;

}

.importance-image img{

    width:100%;

    border-radius:20px;

}

.importance-content h2{

    margin:18px 0;

}

.importance-content p{

    color:#666;

    line-height:1.9;

    margin-bottom:20px;

}

.service-check-list{

    list-style:none;

    padding:0;

    margin-top:30px;

}

.service-check-list li{

    position:relative;

    padding-left:30px;

    margin-bottom:16px;

    font-weight:600;

}

.service-check-list li::before{

    content:"✓";

    position:absolute;

    left:0;

    color:var(--secondary);

    font-weight:700;

}


/*=========================================
BENEFITS
=========================================*/

.why-coating{

    padding:110px 0;

    background:#f8fbff;

}

.help-grid{

    display:grid;

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

    gap:30px;

}

.help-card{

    background:#fff;

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

    border-radius:18px;

    padding:35px;

    transition:.35s;

}

.help-card:hover{

    transform:translateY(-10px);

    border-color:var(--primary);

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

}

.help-card h3{

    color:var(--primary);

    margin-bottom:15px;

}

.help-card p{

    color:#666;

    line-height:1.8;

}


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

.standards-section{

    padding:110px 0;

}

.standards-table{

    margin-top:60px;

    overflow-x:auto;

    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.standards-table table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

}

.standards-table th{

    background:var(--primary);

    color:#fff;

    padding:20px;

    text-align:left;

}

.standards-table td{

    padding:18px 20px;

    border-bottom:1px solid #ececec;

    vertical-align:top;

    line-height:1.8;

}

.standards-table tr:nth-child(even){

    background:#f8fbff;

}


/*=========================================
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,.88);

}


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

@media(max-width:1200px){

.properties-grid{

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

}

.help-grid{

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

}

}

@media(max-width:991px){

.intro-grid,

.importance-grid{

grid-template-columns:1fr;

}

.coating-hero h1{

font-size:48px;

}

.intro-content h2{

font-size:36px;

}

}

@media(max-width:767px){

.properties-grid,

.help-grid{

grid-template-columns:1fr;

}

.coating-hero{

padding:90px 0;

}

.coating-hero h1{

font-size:36px;

}

.intro-content h2{

font-size:30px;

}

.standards-table th,

.standards-table td{

padding:14px;

font-size:14px;

}

}