/*==========================================
        PRODUCTS PAGE
==========================================*/

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

.products-hero{
    position:relative;
    background:url("../images/spiral-gasket.jpg") center center/cover no-repeat;
    min-height:650px;
    display:flex;
    align-items:center;
    overflow:hidden;
}

.hero-overlay{
    position:absolute;
    inset:0;
    background:
    linear-gradient(
       135deg,
    #0b1f3a 0%,
    #163A63 100%
    );
}

.hero-content{
    position:relative;
    z-index:2;
    max-width:720px;
    color:#fff;
    padding:120px 0;
}

.hero-tag{

    display:inline-block;

    padding:10px 22px;

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

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

    border-radius:50px;

    font-size:14px;

    letter-spacing:2px;

    font-weight:600;

    margin-bottom:25px;

}

.hero-content h1{

    font-size:58px;

    line-height:1.15;

    margin-bottom:25px;

    font-weight:700;

}

.hero-content p{

    font-size:18px;

    line-height:1.9;

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

    margin-bottom:40px;

}

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/*====================
    STATISTICS
=====================*/

.product-stats{

    margin-top:-70px;

    position:relative;

    z-index:5;

}

.stats-grid{

    display:grid;

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

    gap:25px;

}

.stat-box{

    background:#fff;

    border-radius:18px;

    padding:35px;

    text-align:center;

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

    transition:.35s;

}

.stat-box:hover{

    transform:translateY(-10px);

}

.stat-box h2{

    font-size:46px;

    color:var(--primary);

    margin-bottom:10px;

}

.stat-box span{

    color:#666;

    font-weight:600;

}

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

.products-section{

    padding:120px 0;

    background:#f7f9fc;

}

.section-title{

    text-align:center;

    max-width:780px;

    margin:auto auto 70px;

}

.section-title span{

    display:inline-block;

    color:var(--accent);

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:15px;

    text-transform:uppercase;

}

.section-title h2{

    font-size:44px;

    color:var(--dark);

    margin-bottom:20px;

}

.section-title p{

    color:#666;

    line-height:1.9;

}

/*======================
    PRODUCT GRID
=======================*/

.products-grid{

    display:grid;

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

    gap:35px;

}

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

.product-card{

    background:#fff;

    border-radius:18px;

    overflow:hidden;

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

    transition:.4s;

    display:flex;

    flex-direction:column;

    height:100%;

}

.product-card:hover{

    transform:translateY(-12px);

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

}

/*======================
    IMAGE
=======================*/

.product-image{

    overflow:hidden;

    height: 350px;

}

.product-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.product-card:hover .product-image img{

    transform:scale(1.08);

}

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

.product-content{

    padding:30px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.product-label{

    display:inline-block;

    background:#eef5ff;

    color:var(--primary);

    padding:8px 16px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

    width:max-content;

}

.product-content h3{

    font-size:24px;

    color:var(--dark);

    margin-bottom:18px;

    line-height:1.4;

}

.product-content p{

    color:#666;

    line-height:1.8;

    margin-bottom:25px;

}

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

.product-content ul{

    list-style:none;

    padding:0;

    margin:0 0 30px;

}

.product-content ul li{

    margin-bottom:12px;

    color:#444;

    font-size:15px;

}

.product-content ul li i{

    color:#1abc9c;

    margin-right:10px;

}

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

.product-btn{

    margin-top:auto;

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:var(--primary);

    font-weight:700;

    text-decoration:none;

    transition:.3s;

}

.product-btn i{

    transition:.3s;

}

.product-btn:hover{

    color:var(--accent);

}

.product-btn:hover i{

    transform:translateX(8px);

}
/*==========================================
        WHY FERROBEND
==========================================*/

.why-ferrobend{
    padding:120px 0;
    background:#ffffff;
}

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:30px;
}

.why-card{
    background:#fff;
    border-radius:18px;
    padding:45px 30px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #edf1f5;
}

.why-card:hover{
    transform:translateY(-12px);
    box-shadow:0 25px 55px rgba(0,0,0,.12);
}

.why-card i{
    width:75px;
    height:75px;
    line-height:75px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--primary),#0b74ff);
    color:#fff;
    font-size:28px;
    margin-bottom:25px;
}

.why-card h3{
    font-size:24px;
    color:var(--dark);
    margin-bottom:18px;
}

.why-card p{
    color:#666;
    line-height:1.8;
}

/*==========================================
      PRODUCT SELECTION GUIDE
==========================================*/

.comparison-section{
    padding:120px 0;
    background:#f7f9fc;
}

.comparison-table{
    overflow-x:auto;
}

.comparison-table table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.comparison-table thead{
    background:linear-gradient(135deg,var(--primary),#0b74ff);
    color:#fff;
}

.comparison-table th{
    padding:22px;
    font-size:16px;
    text-align:left;
}

.comparison-table td{
    padding:20px 22px;
    border-bottom:1px solid #edf1f5;
    color:#555;
}

.comparison-table tbody tr{
    transition:.3s;
}

.comparison-table tbody tr:hover{
    background:#f5f9ff;
}

.comparison-table tbody tr:last-child td{
    border-bottom:none;
}

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

.contact-cta{
    padding:110px 0;
    background:linear-gradient(135deg,#0b1f3a,#124b82);
    color:#fff;
    text-align:center;
}

.contact-cta h2{
    font-size:46px;
    margin-bottom:20px;
}

.contact-cta p{
    max-width:700px;
    margin:auto;
    opacity:.9;
    line-height:1.9;
    margin-bottom:35px;
}

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

.product-card,
.stat-box,
.why-card{
    animation:fadeUp .8s ease;
}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(35px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/*==========================================
            REACH US
==========================================*/

.reach-us{
    padding:120px 0;
    background:#fff;
}

.reach-wrapper{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:60px;
    align-items:center;
}

.reach-content h2{
    font-size:42px;
    color:var(--dark);
    margin:18px 0 20px;
    line-height:1.3;
}

.reach-content p{
    color:#666;
    line-height:1.8;
    margin-bottom:35px;
}

.reach-info{
    display:flex;
    flex-direction:column;
    gap:20px;
    margin-bottom:35px;
}

.info-box{
    display:flex;
    align-items:center;
    gap:18px;
    padding:18px 22px;
    border-radius:14px;
    background:#f8fafc;
    transition:.3s;
}

.info-box:hover{
    background:#eef5ff;
}

.info-box i{
    width:55px;
    height:55px;
    border-radius:50%;
    background:var(--primary);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}

.info-box h4{
    margin-bottom:5px;
    color:var(--dark);
}

.info-box p{
    margin:0;
}

.reach-buttons{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.reach-image img{
    width:100%;
    border-radius:20px;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

@media(max-width:992px){

.reach-wrapper{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.reach-content h2{
    font-size:32px;
}

.reach-buttons{
    flex-direction:column;
}

}

/* =========================================================
   FERROBEND THEME NORMALIZATION
   Product page aligned with homepage/material theme.
========================================================= */

:root {
    --primary: #0B1F3A;
    --secondary: #1F4E79;
    --accent: #B87333;
    --background: #F8FAFC;
    --text: #1E293B;
    --border: #E2E8F0;
    --white: #FFFFFF;
    --shadow: 0 15px 35px rgba(11,31,58,0.08);
    --shadow-hover: 0 25px 50px rgba(11,31,58,0.15);
    --radius: 16px;
    --transition: 0.35s ease;
    --dark: #0B1F3A;
    --light: #F8FAFC;
    --primary-dark: #071426;
}

.products-hero {
    background: linear-gradient(135deg,#0B1F3A 0%,#163A63 100%);
}

.products-hero .hero-overlay {
    background: linear-gradient(135deg,rgba(11,31,58,.22),rgba(22,58,99,.12));
}

.products-hero::before,
.products-hero::after {
    content:"";
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.products-hero::before {
    width:620px;height:620px;
    top:-320px;right:-190px;
    background:rgba(31,78,121,.22);
}

.products-hero::after {
    width:380px;height:380px;
    bottom:-240px;left:-160px;
    background:rgba(184,115,51,.08);
}

/* Hero breadcrumb */
.products-hero .breadcrumb {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
    margin-bottom:24px;
    font-size:14px;
}
.products-hero .breadcrumb a {
    color:rgba(255,255,255,.82);
    font-weight:500;
    transition:var(--transition);
}
.products-hero .breadcrumb a:hover { color:var(--accent); }
.products-hero .breadcrumb span { color:rgba(255,255,255,.45); }
.products-hero .breadcrumb strong { color:var(--white);font-weight:600; }

.products-hero .hero-tag {
    background:transparent;
    border:0;
    padding:0;
    border-radius:0;
    color:#D9B38C;
}

.products-hero .hero-content h1 { color:var(--white); }
.products-hero .hero-content p { color:rgba(255,255,255,.85); }

.products-hero .primary-btn,
.contact-cta .primary-btn {
    background:var(--accent);
    color:var(--white);
}
.products-hero .primary-btn:hover,
.contact-cta .primary-btn:hover {
    background:#965A27;
}

.products-hero .secondary-btn {
    background:transparent;
    color:var(--white);
    border:1px solid rgba(255,255,255,.9);
}
.products-hero .secondary-btn:hover {
    background:var(--white);
    color:var(--primary);
}

.products-section,
.comparison-section { background:var(--background); }
.why-ferrobend,
.reach-us { background:var(--white); }

.stat-box,
.product-card,
.why-card,
.info-box {
    border-color:var(--border);
    box-shadow:var(--shadow);
}

.stat-box:hover,
.product-card:hover,
.why-card:hover {
    box-shadow:var(--shadow-hover);
}

.product-label {
    background:rgba(31,78,121,.08);
    color:var(--secondary);
}

.product-content h3,
.why-card h3,
.reach-content h2,
.info-box h4,
.section-title h2 { color:var(--primary); }

.product-content p,
.why-card p,
.reach-content p,
.info-box p,
.section-title p { color:#64748B; }

.product-content ul li { color:#475569; }
.product-content ul li i { color:var(--accent); }
.product-btn { color:var(--secondary); }
.product-btn:hover { color:var(--accent); }

.why-card i {
    background:rgba(31,78,121,.10);
    color:var(--secondary);
}

.comparison-table table { border:1px solid var(--border); }
.comparison-table thead { background:var(--primary); }
.comparison-table td { border-bottom-color:var(--border);color:#475569; }
.comparison-table tbody tr:hover { background:#F7FAFD; }

.contact-cta {
    background:var(--primary);
    color:var(--white);
}
.contact-cta h2 { color:var(--white); }
.contact-cta p { color:rgba(255,255,255,.8); }

.info-box { background:var(--background); }
.info-box:hover { background:var(--white); }
.info-box i { background:var(--secondary); }

/* Subtle enhanced motion */
.products-hero .hero-content { animation:productsHeroReveal .75s ease both; }
@keyframes productsHeroReveal {
    from { opacity:0; transform:translateY(20px); }
    to { opacity:1; transform:translateY(0); }
}
.product-card,
.stat-box,
.why-card { animation:fadeUpSoft .65s ease both; }
.product-card:nth-child(2){animation-delay:.05s}
.product-card:nth-child(3){animation-delay:.10s}
.product-card:nth-child(4){animation-delay:.15s}
.product-card:nth-child(5){animation-delay:.20s}
.product-card:nth-child(6){animation-delay:.25s}
@keyframes fadeUpSoft {
    from { opacity:0; transform:translateY(16px); }
    to { opacity:1; transform:translateY(0); }
}
.product-card:hover .product-image img { transform:scale(1.035); }

@media (prefers-reduced-motion: reduce) {
    .products-hero .hero-content,
    .product-card,
    .stat-box,
    .why-card { animation:none !important; transition:none !important; }
    .product-image img { transition:none !important; }
}