/*==================================================
        INDIVIDUAL MATERIAL PAGE
        FERROBEND ENGINEERING DATABASE

        UNIVERSAL MATERIAL PAGE CSS
        PRODUCT THEME VERSION
==================================================*/


/*==================================================
                    ROOT VARIABLES
==================================================*/

:root{

    --primary:#0B1F3A;

    --primary-dark:#071426;

    --secondary:#1F4E79;

    --secondary-light:#EAF2F8;

    --accent:#B87333;

    --accent-light:#F7EBDD;

    --background:#F4F7FA;

    --white:#FFFFFF;

    --text:#000206;

    --gray:#64748B;

    --gray-dark:#475569;

    --border:#DCE5ED;

    --success:#1F9D72;

    --warning:#D99A28;

    --danger:#C94C4C;


    --radius:18px;

    --radius-small:12px;


    --shadow:

        0 12px 30px
        rgba(11,31,58,.08);


    --shadow-hover:

        0 22px 45px
        rgba(11,31,58,.15);


    --transition:

        .35s ease;

}


/*==================================================
                    GLOBAL
==================================================*/

.material-hero,
.material-breadcrumb-section,
.material-id,
.material-overview-section,
.chemical-composition-section,
.physical-properties-section,
.mechanical-properties-section,
.gasket-material-section,
.material-specification-section,
.faq-section,
.engineering-cta{

    padding:25px 0;

}


.container{

    width:90%;

    max-width:1320px;

    margin:auto;

}


img{

    max-width:100%;

    display:block;

}


a{

    text-decoration:none;

}


button,
input{

    font-family:inherit;

}


/*==================================================
                UNIVERSAL MATERIAL SECTIONS
==================================================*/

/*
    This allows future individual material pages
    to use additional sections without requiring
    new CSS each time.
*/

section[class*="section"]{

    position:relative;

}


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

.material-hero{

    position:relative;

    min-height:580px;

    display:flex;

    align-items:center;

    overflow:hidden;

    background:

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

    color:var(--white);

}


/*==================================================
            HERO BACKGROUND EFFECT
==================================================*/

.material-hero::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    top:-350px;

    right:-180px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(31,78,121,.55),
            rgba(31,78,121,.05)
        );

    pointer-events:none;

    animation:

        floatOrb
        8s ease-in-out infinite;

}


.material-hero::after{

    content:"";

    position:absolute;

    width:480px;

    height:480px;

    bottom:-300px;

    left:-150px;

    border-radius:50%;

    background:

        radial-gradient(
            circle,
            rgba(184,115,51,.25),
            rgba(184,115,51,.02)
        );

    pointer-events:none;

}


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

.material-hero .container{

    position:relative;

    z-index:2;

}


.material-hero-content{

    max-width:850px;

    animation:

        materialHeroReveal
        .9s ease both;

}


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

.hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin:0 0 20px;

    padding:9px 17px;

    border:

        1px solid
        rgba(217,179,140,.35);

    border-radius:50px;

    background:

        rgba(184,115,51,.08);

    color:#E2BE98;

    font-size:12px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}


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

.material-hero h1{

    margin:0 0 22px;

    max-width:900px;

    font-size:

        clamp(
            40px,
            5vw,
            64px
        );

    line-height:1.15;

    color:var(--white);

    font-weight:700;

}


.material-hero-content > p:not(.hero-tag){

    max-width:800px;

    margin:0 0 32px;

    color:

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

    font-size:17px;

    line-height:1.9;

}


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

.hero-buttons{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:15px;

}


.hero-buttons .btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:52px;

    padding:14px 28px;

    border-radius:50px;

    font-weight:700;

    transition:var(--transition);

}


.primary-btn{

    background:

        linear-gradient(
            135deg,
            #B87333,
            #9E5D28
        );

    color:var(--white);

    box-shadow:

        0 10px 25px
        rgba(184,115,51,.22);

}


.primary-btn:hover{

    transform:

        translateY(-3px);

    box-shadow:

        0 16px 32px
        rgba(184,115,51,.35);

}


.secondary-btn{

    color:var(--white);

    border:

        1px solid
        rgba(255,255,255,.55);

    background:

        rgba(255,255,255,.04);

}


.secondary-btn:hover{

    background:var(--white);

    color:var(--primary);

    transform:

        translateY(-3px);

}


/*==================================================
                    BREADCRUMB
==================================================*/

.material-breadcrumb-section{

    padding:22px 0;

    background:

        linear-gradient(
            90deg,
            #EEF3F8,
            #F8FAFC
        );

    border-bottom:

        1px solid
        var(--border);

}


.breadcrumb{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:9px;

    font-size:14px;

}


.breadcrumb a{

    color:var(--secondary);

    font-weight:600;

    transition:var(--transition);

}


.breadcrumb a:hover{

    color:var(--accent);

}


.breadcrumb span{

    color:#94A3B8;

}


.breadcrumb strong{

    color:var(--primary);

    font-weight:700;

}


/*==================================================
                MATERIAL IDENTIFICATION
==================================================*/

.material-id{

    padding:45px 0;

    background:var(--background);

}


.material-id-card{

    padding:28px;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    position:relative;

    overflow:hidden;

}


.material-id-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:

        linear-gradient(
            90deg,
            var(--accent),
            var(--secondary),
            var(--accent)
        );

}


.material-id-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(210px,1fr)
        );

    gap:18px;

}


.id-box{

    position:relative;

    padding:25px;

    min-height:125px;

    border:

        1px solid
        var(--border);

    border-radius:15px;

    background:

        linear-gradient(
            145deg,
            #FFFFFF,
            #F1F6FA
        );

    overflow:hidden;

    transition:var(--transition);

}


.id-box::before{

    content:"";

    position:absolute;

    width:90px;

    height:90px;

    right:-35px;

    bottom:-35px;

    border-radius:50%;

    background:

        rgba(31,78,121,.07);

}


.id-box:hover{

    transform:

        translateY(-6px);

    border-color:

        rgba(31,78,121,.25);

    box-shadow:var(--shadow);

}


.id-box span{

    display:block;

    margin-bottom:9px;

    color:var(--gray);

    font-size:12px;

    font-weight:700;

    letter-spacing:.8px;

    text-transform:uppercase;

}


.id-box h3{

    position:relative;

    z-index:2;

    margin:0;

    color:var(--primary);

    font-size:19px;

    line-height:1.45;

}


/*==================================================
                MAIN CONTENT SECTIONS
==================================================*/

.material-overview-section,
.mechanical-properties-section,
.material-specification-section{

    background:var(--white);

}


.chemical-composition-section,
.physical-properties-section,
.gasket-material-section,
.faq-section{

    background:

        linear-gradient(
            135deg,
            #F4F7FA,
            #EEF3F8
        );

}


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

.section-header{

    max-width:800px;

    margin:

        0 auto 42px;

    text-align:center;

}


.section-tag{

    display:inline-block;

    margin:0 0 12px;

    padding:7px 15px;

    border-radius:50px;

    background:

        rgba(184,115,51,.10);

    color:var(--accent);

    font-size:12px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.section-header h2{

    margin:0 0 15px;

    color:var(--primary);

    font-size:

        clamp(
            30px,
            3.5vw,
            46px
        );

    line-height:1.25;

    font-weight:700;

}


.section-header h2::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin:17px auto 0;

    border-radius:20px;

    background:

        linear-gradient(
            90deg,
            var(--accent),
            var(--secondary)
        );

}


.section-header > p:last-child{

    margin:20px auto 0;

    max-width:750px;

    color:var(--gray);

    font-size:16px;

    line-height:1.85;

}


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

.content-card{

    position:relative;

    padding:38px;

    background:

        linear-gradient(
            145deg,
            #FFFFFF,
            #F7FAFC
        );

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

}


.content-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:5px;

    height:100%;

    background:

        linear-gradient(
            180deg,
            var(--accent),
            var(--secondary)
        );

}


.content-card p{

    position:relative;

    margin:0;

    color:var(--gray-dark);

    font-size:16px;

    line-height:1.95;

}


/*==================================================
            UNIVERSAL ENGINEERING TABLE
==================================================*/

.table-responsive{

    width:100%;

    overflow-x:auto;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    border:

        1px solid
        var(--border);

    background:var(--white);

}


.material-table{

    width:100%;

    min-width:720px;

    border-collapse:collapse;

    background:var(--white);

}


.material-table th{

    padding:18px 22px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:var(--white);

    text-align:center;

    font-size:14px;

    font-weight:700;

    letter-spacing:.2px;

}


.material-table td{

    padding:16px 22px;

    color:var(--gray-dark);

    border-bottom:

        1px solid
        var(--border);

    line-height:1.7;

    vertical-align:top;

}


.material-table tbody tr{

    transition:var(--transition);

}


.material-table tbody tr:nth-child(even){

    background:#F7FAFC;

}


.material-table tbody tr:hover{

    background:#EAF2F8;

}


.material-table td:first-child{

    color:var(--primary);

    font-weight:700;

}


.material-table tbody tr:last-child td{

    border-bottom:none;

}


/*==================================================
                    PROPERTY GRID
==================================================*/

.property-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(250px,1fr)
        );

    gap:22px;

}


.property-card{

    position:relative;

    padding:30px;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    overflow:hidden;

    transition:var(--transition);

}


.property-card::after{

    content:"";

    position:absolute;

    width:130px;

    height:130px;

    right:-60px;

    bottom:-60px;

    border-radius:50%;

    background:

        rgba(31,78,121,.06);

}


.property-card:hover{

    transform:

        translateY(-8px);

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

}


.property-card i{

    position:relative;

    z-index:2;

    width:65px;

    height:65px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    border-radius:16px;

    background:

        linear-gradient(
            135deg,
            rgba(31,78,121,.12),
            rgba(31,78,121,.05)
        );

    color:var(--secondary);

    font-size:25px;

}


.property-card h3{

    position:relative;

    z-index:2;

    margin:0 0 12px;

    color:var(--primary);

    font-size:21px;

}


.property-card p{

    position:relative;

    z-index:2;

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


/*==================================================
                APPLICATION GRID
==================================================*/

.application-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(350px,1fr)
        );

    gap:22px;

}


.application-card{

    display:flex;

    align-items:flex-start;

    gap:18px;

    padding:28px;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.application-card:hover{

    transform:

        translateY(-7px);

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

    border-color:

        rgba(31,78,121,.25);

}


.application-card i{

    width:60px;

    height:60px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:

        linear-gradient(
            135deg,
            rgba(31,78,121,.12),
            rgba(31,78,121,.04)
        );

    color:var(--secondary);

    font-size:23px;

}


.application-card h3{

    margin:2px 0 10px;

    color:var(--primary);

    font-size:20px;

}


.application-card p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


/*==================================================
                PROPERTY / FEATURE GRIDS
                UNIVERSAL SUPPORT
==================================================*/

.temperature-grid,
.corrosion-grid,
.standard-grid,
.industry-grid,
.compatibility-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(260px,1fr)
        );

    gap:22px;

}


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

.temperature-card{

    padding:30px;

    text-align:center;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.temperature-card:hover{

    transform:

        translateY(-8px);

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

}


.temperature-card i{

    display:block;

    margin-bottom:17px;

    color:var(--accent);

    font-size:38px;

}


.temperature-card h3{

    margin:0 0 10px;

    color:var(--primary);

    font-size:20px;

}


.temperature-card h4{

    margin:0 0 12px;

    color:var(--secondary);

    font-size:30px;

}


.temperature-card p{

    margin:0;

    color:var(--gray);

    line-height:1.7;

}


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

.corrosion-card{

    padding:30px;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.corrosion-card:hover{

    transform:

        translateY(-7px);

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

}


.corrosion-card h3{

    margin:0 0 16px;

    color:var(--primary);

}


.corrosion-card p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


.corrosion-rating{

    display:inline-block;

    margin-bottom:16px;

    padding:7px 15px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

}


.rating-excellent{

    background:#E6F4EE;

    color:#16704F;

}


.rating-good{

    background:#E7F1F8;

    color:#1F4E79;

}


.rating-fair{

    background:#FFF4DD;

    color:#8A641C;

}


.rating-poor{

    background:#FBE8E8;

    color:#963E3E;

}


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

.standard-card{

    padding:28px;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.standard-card:hover{

    transform:

        translateY(-7px);

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

}


.standard-card h3{

    margin:0 0 12px;

    color:var(--secondary);

}


.standard-card p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


/*==================================================
                EQUIVALENT GRADE CARDS
==================================================*/

.grade-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(180px,1fr)
        );

    gap:18px;

}


.grade-card{

    padding:26px;

    text-align:center;

    background:

        linear-gradient(
            145deg,
            #FFFFFF,
            #F3F7FA
        );

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.grade-card:hover{

    transform:

        translateY(-7px);

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

}


.grade-card span{

    display:block;

    margin-bottom:9px;

    color:var(--text);

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}


.grade-card h3{

    margin:0;

    color:var(--secondary);

    font-size:21px;

}


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

.industry-card{

    padding:30px;

    text-align:center;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.industry-card:hover{

    transform:

        translateY(-8px);

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

}


.industry-card i{

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:

        0 auto 18px;

    border-radius:50%;

    background:

        rgba(31,78,121,.10);

    color:var(--secondary);

    font-size:27px;

}


.industry-card h3{

    margin:0 0 12px;

    color:var(--primary);

}


.industry-card p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


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

.compatibility-card{

    padding:28px;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.compatibility-card:hover{

    transform:

        translateY(-7px);

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

}


.compatibility-card h3{

    margin:0 0 18px;

    color:var(--secondary);

}


.compatibility-card ul{

    margin:0;

    padding:0;

    list-style:none;

}


.compatibility-card li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    padding:12px 0;

    border-bottom:

        1px solid
        var(--border);

    color:var(--gray);

}


.compatibility-card li:last-child{

    border-bottom:none;

}


.compatibility-card i{

    color:var(--success);

}


/*==================================================
                    ADVANTAGES
==================================================*/

.advantages-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(300px,1fr)
        );

    gap:22px;

}


.advantage-box{

    position:relative;

    padding:30px;

    background:

        linear-gradient(
            145deg,
            #FFFFFF,
            #F2F8F5
        );

    border:

        1px solid
        #D8E9E0;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.advantage-box:hover{

    transform:

        translateY(-7px);

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

}


.advantage-box i{

    margin-bottom:17px;

    color:var(--success);

    font-size:32px;

}


.advantage-box h3{

    margin:0 0 12px;

    color:var(--primary);

}


.advantage-box p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


/*==================================================
                    LIMITATIONS
==================================================*/

.limitations-grid{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(300px,1fr)
        );

    gap:22px;

}


.limitation-box{

    padding:30px;

    background:

        linear-gradient(
            145deg,
            #FFFFFF,
            #FCF5F5
        );

    border:

        1px solid
        #F0DADA;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.limitation-box:hover{

    transform:

        translateY(-7px);

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

}


.limitation-box i{

    margin-bottom:17px;

    color:var(--danger);

    font-size:32px;

}


.limitation-box h3{

    margin:0 0 12px;

    color:var(--primary);

}


.limitation-box p{

    margin:0;

    color:var(--gray);

    line-height:1.8;

}


/*==================================================
                FABRICATION / WELDING
==================================================*/

.fabrication-card{

    padding:38px;

    background:

        linear-gradient(
            145deg,
            #FFFFFF,
            #F5F8FB
        );

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.fabrication-card:hover{

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

}


.fabrication-card h3{

    margin:0 0 16px;

    color:var(--secondary);

}


.fabrication-card p{

    margin:0 0 16px;

    color:var(--gray);

    line-height:1.9;

}


.fabrication-card ul{

    margin:0;

    padding-left:22px;

}


.fabrication-card li{

    margin-bottom:10px;

    color:var(--gray);

    line-height:1.8;

}


/*==================================================
                    HEAT TREATMENT
==================================================*/

.heat-treatment{

    position:relative;

    padding:42px;

    overflow:hidden;

    border-radius:20px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:var(--white);

    box-shadow:var(--shadow);

}


.heat-treatment::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

    right:-100px;

    top:-130px;

    border-radius:50%;

    background:

        rgba(184,115,51,.16);

}


.heat-treatment h2{

    position:relative;

    z-index:2;

    margin:0 0 16px;

    color:var(--white);

}


.heat-treatment p{

    position:relative;

    z-index:2;

    margin:0;

    max-width:900px;

    color:

        rgba(255,255,255,.84);

    line-height:1.9;

}


/*==================================================
                COMPARISON TABLE
==================================================*/

.comparison-table{

    width:100%;

    overflow-x:auto;

    border-radius:var(--radius);

}


.comparison-table table{

    width:100%;

    min-width:720px;

    border-collapse:collapse;

    overflow:hidden;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

}


.comparison-table th{

    padding:18px 20px;

    background:

        linear-gradient(
            135deg,
            var(--primary),
            var(--secondary)
        );

    color:var(--white);

    text-align:left;

}


.comparison-table td{

    padding:16px 20px;

    color:var(--gray-dark);

    border-bottom:

        1px solid
        var(--border);

}


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

    background:#F7FAFC;

}


.comparison-table tr:hover{

    background:#EAF2F8;

}


/*==================================================
                        FAQ
==================================================*/

.faq-list{

    display:grid;

    grid-template-columns:

        repeat(
            auto-fit,
            minmax(450px,1fr)
        );

    gap:20px;

}


.faq-item{

    position:relative;

    padding:28px;

    background:var(--white);

    border:

        1px solid
        var(--border);

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.faq-item::before{

    content:"";

    position:absolute;

    left:0;

    top:22px;

    bottom:22px;

    width:4px;

    border-radius:10px;

    background:

        linear-gradient(
            180deg,
            var(--accent),
            var(--secondary)
        );

}


.faq-item:hover{

    transform:

        translateY(-6px);

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

}


.faq-item h3{

    margin:

        0 0 14px 14px;

    color:var(--primary);

    font-size:19px;

    line-height:1.5;

}


.faq-item p{

    margin-left:14px;

    margin-bottom:0;

    color:var(--gray);

    line-height:1.85;

}


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

.engineering-cta{

    position:relative;

    padding:95px 0;

    overflow:hidden;

    background:

        linear-gradient(
            135deg,
            #071426,
            #0B1F3A,
            #163A63
        );

    color:var(--white);

    text-align:center;

}


.engineering-cta::before{

    content:"";

    position:absolute;

    width:550px;

    height:550px;

    right:-250px;

    top:-250px;

    border-radius:50%;

    background:

        rgba(31,78,121,.40);

}


.engineering-cta::after{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    left:-160px;

    bottom:-180px;

    border-radius:50%;

    background:

        rgba(184,115,51,.15);

}


.cta-content{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:auto;

}


.cta-content h2{

    margin:0 0 18px;

    color:var(--white);

    font-size:

        clamp(
            32px,
            4vw,
            48px
        );

    line-height:1.25;

}


.cta-content p{

    margin:0 auto 30px;

    max-width:760px;

    color:

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

    font-size:17px;

    line-height:1.9;

}


.cta-content .hero-buttons{

    justify-content:center;

}


/*==================================================
                    ANIMATIONS
==================================================*/

.material-hero-content{

    animation:

        materialHeroReveal
        .9s ease both;

}


.content-card,
.table-responsive,
.property-card,
.application-card,
.temperature-card,
.corrosion-card,
.standard-card,
.grade-card,
.industry-card,
.compatibility-card,
.advantage-box,
.limitation-box,
.fabrication-card,
.faq-item,
.heat-treatment{

    animation:

        fadeUpSoft
        .7s ease both;

}


/*==================================================
                    KEYFRAMES
==================================================*/

@keyframes materialHeroReveal{

    from{

        opacity:0;

        transform:

            translateY(25px);

    }


    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


@keyframes fadeUpSoft{

    from{

        opacity:0;

        transform:

            translateY(18px);

    }


    to{

        opacity:1;

        transform:

            translateY(0);

    }

}


@keyframes floatOrb{

    0%{

        transform:

            translate(0,0);

    }


    50%{

        transform:

            translate(-25px,30px);

    }


    100%{

        transform:

            translate(0,0);

    }

}


/*==================================================
                STAGGER ANIMATIONS
==================================================*/

.property-card:nth-child(2),
.application-card:nth-child(2),
.id-box:nth-child(2),
.faq-item:nth-child(2){

    animation-delay:.08s;

}


.property-card:nth-child(3),
.application-card:nth-child(3),
.id-box:nth-child(3),
.faq-item:nth-child(3){

    animation-delay:.16s;

}


.property-card:nth-child(4),
.application-card:nth-child(4),
.id-box:nth-child(4),
.faq-item:nth-child(4){

    animation-delay:.24s;

}


.property-card:nth-child(5),
.application-card:nth-child(5),
.faq-item:nth-child(5){

    animation-delay:.32s;

}


/*==================================================
                    GLOBAL HOVER
==================================================*/

.content-card,
.property-card,
.application-card,
.temperature-card,
.corrosion-card,
.standard-card,
.grade-card,
.industry-card,
.compatibility-card,
.advantage-box,
.limitation-box,
.fabrication-card,
.faq-item,
.id-box{

    will-change:

        transform;

}


/*==================================================
                    SCROLLBAR
==================================================*/

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#EAF0F5;

}


::-webkit-scrollbar-thumb{

    background:

        linear-gradient(
            var(--secondary),
            var(--primary)
        );

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--accent);

}


/*==================================================
                TEXT SELECTION
==================================================*/

::selection{

    background:var(--accent);

    color:var(--white);

}


/*==================================================
                REDUCED MOTION
==================================================*/

@media (prefers-reduced-motion: reduce){

    *{

        animation-duration:.01ms !important;

        animation-iteration-count:1 !important;

        transition-duration:.01ms !important;

    }

}



/* =========================================================
   STAINLESS STEEL 304 AS GASKET MATERIAL
   FAQ-STYLE 2 × 2 BOX GRID
   ========================================================= */

.application-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}


/* =========================================================
   BOX
   ========================================================= */

.application-faq-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;

    padding: 22px 20px;

    background: #ffffff;
    border: 1px solid rgba(20, 50, 80, 0.10);
    border-radius: 12px;

    box-shadow: 0 8px 24px rgba(20, 50, 80, 0.08);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.application-faq-item:hover {
    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(20, 50, 80, 0.12);

    border-color: rgba(20, 50, 80, 0.16);
}


/* =========================================================
   ICON
   ========================================================= */

.application-faq-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

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

    border-radius: 50%;

    background: #eef4f9;

    font-size: 17px;
}


/* =========================================================
   CONTENT
   ========================================================= */

.application-faq-content {
    flex: 1;
    min-width: 0;
}


.application-faq-content h3 {
    margin: 2px 0 8px;

    font-size: 16px;
    line-height: 1.3;
    font-weight: 600;
}


.application-faq-content p {
    margin: 0;

    font-size: 13px;
    line-height: 1.7;
}