/*=========================================================
                DIMENSIONAL STANDARDS HERO
=========================================================*/

.standards-hero{

    padding:100px 0;

    background:
    linear-gradient(
    135deg,
    #0B1F3A 0%,
    #163A63 100%);

    color:var(--white);

}

.standards-hero .container{

    max-width:1200px;

}

.standards-hero .breadcrumb{

    display:flex;

    align-items:center;

    gap:8px;

    margin-bottom:20px;

    font-size:14px;

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

}

.standards-hero .breadcrumb a{

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

    transition:var(--transition);

}

.standards-hero .breadcrumb a:hover{

    color:var(--accent);

}

.hero-subtitle{

    display:inline-block;

    margin-bottom:18px;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:14px;

    font-weight:600;

    color:#d9b38c;

}

.standards-hero h1{

    font-size:48px;

    color:var(--white);

    margin-bottom:20px;

}

.standards-hero p{

    max-width:760px;

    font-size:16px;

    line-height:1.8;

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

}

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

.standards-intro{

    padding:100px 0;

    background:var(--background);

}

.standards-intro .section-header{

    margin-bottom:60px;

}
/*=========================================================
                STANDARDS GRID
=========================================================*/

.standards-grid{

    display:grid;

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

    gap:30px;

}

/*================ CARD =================*/

.standard-card{

    background:var(--white);

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

    border-radius:var(--radius);

    padding:35px;

    text-decoration:none;

    color:inherit;

    display:flex;

    flex-direction:column;

    height:100%;

    box-shadow:var(--shadow);

    transition:var(--transition);

    position:relative;

    overflow:hidden;

}

.standard-card:hover{

    transform:translateY(-8px);

    border-color:var(--accent);

    box-shadow:var(--shadow-hover);

}

/* Accent Top Border */

.standard-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:var(--accent);

    transform:scaleX(0);

    transition:var(--transition);

}

.standard-card:hover::before{

    transform:scaleX(1);

}

/*================ COUNTRY BADGE =================*/

.standard-country{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:8px 16px;

    background:rgba(31,78,121,.08);

    color:var(--secondary);

    border-radius:50px;

    font-size:13px;

    font-weight:600;

    margin-bottom:25px;

}

/*================ TITLE =================*/

.standard-card h3{

    font-size:28px;

    color:var(--primary);

    margin-bottom:12px;

}

.standard-card>p{

    color:#64748B;

    line-height:1.7;

    margin-bottom:25px;

    min-height:55px;

}

/*================ FEATURES =================*/

.standard-card ul{

    list-style:none;

    margin:0;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:16px;

    flex:1;

}

.standard-card li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#475569;

    font-size:15px;

}

.standard-card li i{

    color:var(--accent);

    font-size:15px;

    flex-shrink:0;

}

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

.view-standard{

    margin-top:30px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding-top:25px;

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

    color:var(--secondary);

    font-weight:600;

    transition:var(--transition);

}

.standard-card:hover .view-standard{

    color:var(--accent);

}

.view-standard i{

    transition:var(--transition);

}

.standard-card:hover .view-standard i{

    transform:translateX(6px);

}
/*=========================================================
                WHY STANDARDS
=========================================================*/

.why-standards{

    padding:100px 0;

    background:var(--white);

}

/* Reuses .why-grid from homepage.css */

.why-standards .why-card{

    background:var(--background);

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

    border-radius:var(--radius);

    transition:var(--transition);

}

.why-standards .why-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-hover);

}

.why-standards .why-card i{

    color:var(--secondary);

}

.why-standards .why-card h3{

    color:var(--primary);

}

.why-standards .why-card p{

    color:#64748B;

    line-height:1.8;

}



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

.standards-cta{

    padding:100px 0;

    background:var(--primary);

    text-align:center;

    color:var(--white);

}

.standards-cta h2{

    font-size:40px;

    margin-bottom:20px;

    color:var(--white);

}

.standards-cta p{

    max-width:700px;

    margin:0 auto 35px;

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

    line-height:1.8;

}

.standards-cta .hero-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}



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

@media(max-width:992px){

    .standards-grid{

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

    }

}

@media(max-width:768px){

    .standards-hero{

        padding:80px 0;

    }

    .standards-hero h1{

        font-size:38px;

    }

    .standards-grid{

        grid-template-columns:1fr;

    }

    .standard-card{

        padding:30px;

    }

    .standard-card h3{

        font-size:24px;

    }

    .standards-cta h2{

        font-size:32px;

    }

    .hero-buttons{

        flex-direction:column;

        width:100%;

    }

    .hero-buttons .btn{

        width:100%;

    }

}

@media(max-width:576px){

    .standards-hero h1{

        font-size:30px;

    }

    .standards-intro,

    .why-standards,

    .standards-cta{

        padding:70px 0;

    }

    .standard-card{

        padding:25px;

    }

    .standard-country{

        font-size:12px;

        padding:6px 14px;

    }

    .standard-card h3{

        font-size:22px;

    }

    .view-standard{

        font-size:15px;

    }

}