/*==================================================
BLOG / KNOWLEDGE CENTER
==================================================*/

body{
    padding-top:104px;
    background:#f7f8fb;
}

/* HERO */

.blog-hero{
    position:relative;
    padding:150px 0 120px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 82% 25%,
            rgba(149,193,31,.16),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #10192b 0%,
            #1b2547 58%,
            #30356f 100%
        );
}

.blog-hero-content{
    max-width:820px;
}

.blog-tag{
    display:inline-block;
    margin-bottom:20px;

    color:#95c11f;

    font-size:11px;
    font-weight:800;
    letter-spacing:2.5px;
    text-transform:uppercase;
}

.blog-hero h1{
    margin:0 0 25px;

    color:#fff;

    font-size:64px;
    line-height:1.05;
    letter-spacing:-2.5px;
}

.blog-hero h1 span{
    display:block;
    color:#95c11f;
}

.blog-hero p{
    max-width:700px;

    margin:0;

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

    font-size:17px;
    line-height:30px;
}

.blog-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;

    margin-top:35px;
    padding:14px 26px;

    border-radius:30px;

    background:#95c11f;

    color:#fff !important;

    font-size:11px;
    font-weight:800;

    text-decoration:none;
    text-transform:uppercase;

    transition:.3s ease;
}

.blog-btn:hover{
    transform:translateY(-3px);
    background:#7fa817;
}


/* FEATURED */

.featured-blog{
    padding:100px 0 80px;
    background:#fff;
}

.featured-card{
    display:grid;
    grid-template-columns:1.05fr .95fr;

    overflow:hidden;

    border-radius:28px;

    background:#172033;

    box-shadow:
        0 28px 70px rgba(23,32,51,.14);
}

.featured-image{
    position:relative;
    min-height:430px;

    background:
        linear-gradient(
            rgba(15,24,43,.12),
            rgba(15,24,43,.35)
        ),
        url("../images/blog/1.jpg")
        center / cover no-repeat;
}

.featured-label{
    position:absolute;
    left:25px;
    top:25px;

    padding:9px 14px;

    border-radius:20px;

    background:#95c11f;
    color:#fff;

    font-size:9px;
    font-weight:800;
    letter-spacing:1.2px;
}

.featured-content{
    padding:55px 50px;

    display:flex;
    flex-direction:column;
    justify-content:center;
}

.featured-content > span{
    margin-bottom:15px;

    color:#95c11f;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
}

.featured-content h2{
    margin:0 0 20px;

    color:#fff;

    font-size:36px;
    line-height:1.2;
}

.featured-content p{
    margin:0 0 28px;

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

    font-size:15px;
    line-height:28px;
}

.featured-content a{
    align-self:flex-start;

    color:#95c11f;

    font-size:11px;
    font-weight:800;

    text-transform:uppercase;
    text-decoration:none;
}


/* CATEGORIES */

.blog-categories{
    padding:80px 0;
    background:#f7f8fb;
}

.blog-categories h2{
    margin:0 0 35px;

    color:#172033;

    font-size:36px;
    text-align:center;
}

.category-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:12px;
}

.category-grid span{
    padding:12px 18px;

    border-radius:25px;

    background:#fff;

    border:1px solid #e2e6eb;

    color:#5f6877;

    font-size:10px;
    font-weight:800;

    text-transform:uppercase;

    box-shadow:
        0 8px 22px rgba(23,32,51,.05);

    transition:.3s;
}

.category-grid span:hover{
    background:#95c11f;
    border-color:#95c11f;
    color:#fff;

    transform:translateY(-3px);
}


/* ARTICLES */

.article-section{
    padding:100px 0 120px;
    background:#fff;
}

.article-section > .container > h2{
    margin:0 0 45px;

    color:#172033;

    font-size:42px;
    text-align:center;
}

.article-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:26px;
}

.blog-card{
    overflow:hidden;

    border-radius:24px;

    background:#fff;

    border:1px solid #e6e9ee;

    box-shadow:
        0 18px 45px rgba(23,32,51,.08);

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}

.blog-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 28px 65px rgba(23,32,51,.14);
}

.blog-card-image{
    position:relative;
    height:230px;

    background:#172033;
}

.blog-category{
    position:absolute;
    left:18px;
    top:18px;

    padding:8px 12px;

    border-radius:18px;

    background:#95c11f;

    color:#fff;

    font-size:8px;
    font-weight:800;

    letter-spacing:1px;
}

.blog-card-content{
    padding:28px 26px 30px;
}

.blog-meta{
    display:block;
    margin-bottom:11px;

    color:#95c11f;

    font-size:9px;
    font-weight:800;

    letter-spacing:1.2px;
}

.blog-card-content h3{
    margin:0 0 14px;

    color:#172033;

    font-size:21px;
    line-height:1.35;
}

.blog-card-content p{
    margin:0 0 22px;

    color:#687080;

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

.blog-card-content a{
    color:#172033;

    font-size:10px;
    font-weight:800;

    text-decoration:none;
    text-transform:uppercase;
}

.blog-card-content a i{
    margin-left:6px;
    color:#95c11f;
}


/* TEMP BACKGROUNDS */

.pharma-bg{
    background:
        linear-gradient(rgba(23,32,51,.30),rgba(23,32,51,.45)),
        url("../images/blog/1.jpg")
        center / cover no-repeat;
}

.turnkey-bg{
    background:
        linear-gradient(rgba(23,32,51,.28),rgba(23,32,51,.48)),
        url("../images/blog/4.jpg")
        center / cover no-repeat;
}

.cleanroom-bg{
    background:
        linear-gradient(rgba(23,32,51,.25),rgba(23,32,51,.48)),
        url("../images/blog/2.jpg")
        center / cover no-repeat;
}

.hvac-bg{
    background:
        linear-gradient(rgba(23,32,51,.25),rgba(23,32,51,.48)),
        url("../images/blog/3.jpg")
        center / cover no-repeat;
}

.water-bg{
    background:
        linear-gradient(rgba(23,32,51,.25),rgba(23,32,51,.48)),
        url("../images/blog/5.jpg")
        center / cover no-repeat;
}

.regulatory-bg{
    background:
        linear-gradient(rgba(23,32,51,.25),rgba(23,32,51,.48)),
        url("../images/blog/6.jpg")
        center / cover no-repeat;
}


/* NEWSLETTER */

.blog-newsletter{
    padding:100px 0;
    background:#f7f8fb;
}

.newsletter-box{
    position:relative;

    display:grid;
    grid-template-columns:1fr 430px;
    gap:60px;
    align-items:center;

    padding:55px 60px;

    border-radius:30px;

    overflow:hidden;

    background:
        linear-gradient(
            125deg,
            #111a2c,
            #30366f
        );

    box-shadow:
        0 30px 80px rgba(23,32,51,.15);
}

.newsletter-box::after{
    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-160px;
    top:-180px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(149,193,31,.20),
            transparent 70%
        );
}

.newsletter-box > *{
    position:relative;
    z-index:2;
}

.newsletter-box > div:first-child > span{
    display:block;
    margin-bottom:12px;

    color:#95c11f;

    font-size:10px;
    font-weight:800;

    letter-spacing:2px;
}

.newsletter-box h2{
    margin:0 0 15px;

    color:#fff;

    font-size:36px;
}

.newsletter-box p{
    margin:0;

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

    font-size:14px;
    line-height:26px;
}

.newsletter-form{
    display:flex;
    gap:10px;
}

.newsletter-form input{
    flex:1;

    min-height:48px;

    padding:0 18px;

    border:0;
    border-radius:25px;

    outline:none;

    background:#fff;

    color:#333;

    font-size:13px;
}

.newsletter-form button{
    min-height:48px;

    padding:0 24px;

    border:0;
    border-radius:25px;

    background:#95c11f;

    color:#fff;

    font-size:10px;
    font-weight:800;

    cursor:pointer;
}


/* RESPONSIVE */

@media only screen and (max-width:1000px){

    .featured-card{
        grid-template-columns:1fr;
    }

    .article-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .newsletter-box{
        grid-template-columns:1fr;
    }

}

@media only screen and (max-width:650px){

    body{
        padding-top:86px;
    }

    .blog-hero{
        padding:100px 20px 85px;
    }

    .blog-hero h1{
        font-size:42px;
        letter-spacing:-1px;
    }

    .featured-blog,
    .article-section,
    .blog-newsletter{
        padding-left:18px;
        padding-right:18px;
    }

    .featured-content{
        padding:35px 28px;
    }

    .featured-content h2{
        font-size:28px;
    }

    .article-grid{
        grid-template-columns:1fr;
    }

    .newsletter-box{
        padding:40px 25px;
    }

    .newsletter-form{
        flex-direction:column;
    }
}

/*==================================================
BLOG SEARCH + FILTER
==================================================*/

.blog-tools{
    margin-bottom:45px;
}

.blog-search{
    max-width:480px;
    margin:0 auto 28px;
}

.blog-search input{
    width:100%;
    box-sizing:border-box;

    min-height:50px;

    padding:0 22px;

    border:1px solid #e1e5eb;
    border-radius:28px;

    background:#fff;

    box-shadow:
        0 10px 28px rgba(23,32,51,.06);

    color:#333;

    font-size:14px;

    outline:none;
}

.blog-search input:focus{
    border-color:#95c11f;

    box-shadow:
        0 10px 28px rgba(23,32,51,.07),
        0 0 0 4px rgba(149,193,31,.10);
}

.blog-filter{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;

    gap:10px;
}

.blog-filter-btn{
    min-height:40px;

    padding:0 17px;

    border:1px solid #e1e5eb;
    border-radius:22px;

    background:#fff;

    color:#657080;

    font-size:9px;
    font-weight:800;

    letter-spacing:.6px;

    text-transform:uppercase;

    cursor:pointer;

    transition:.3s;
}

.blog-filter-btn:hover,
.blog-filter-btn.active{
    border-color:#95c11f;
    background:#95c11f;
    color:#fff;
}

/*==================================================
BLOG ARTICLE DETAILS
==================================================*/

.article-hero{
    position:relative;
    padding:150px 0 95px;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(149,193,31,.15),
            transparent 32%
        ),
        linear-gradient(
            125deg,
            #10192b 0%,
            #1b2547 58%,
            #30356f 100%
        );
}

.article-hero .container{
    max-width:1050px;
}

.article-category{
    display:inline-block;
    margin-bottom:20px;

    padding:8px 14px;

    border-radius:20px;

    background:rgba(149,193,31,.13);
    border:1px solid rgba(149,193,31,.28);

    color:#b8df4a;

    font-size:10px;
    font-weight:800;
    letter-spacing:1.5px;
    text-transform:uppercase;
}

.article-hero h1{
    max-width:900px;
    margin:0 0 30px;

    color:#ffffff;

    font-size:56px;
    line-height:1.08;
    letter-spacing:-2px;
}

.article-meta{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
}

.article-meta span{
    color:rgba(255,255,255,.60);

    font-size:11px;
    font-weight:600;
}

.article-meta i{
    margin-right:7px;
    color:#95c11f;
}


/*==================================================
ARTICLE BODY
==================================================*/

.article-content{
    padding:95px 0 120px;
    background:#f7f8fb;
}

.article-body{
    max-width:850px;
    margin:0 auto;

    padding:55px 60px;

    border:1px solid #e4e8ee;
    border-radius:28px;

    background:#ffffff;

    box-shadow:
        0 25px 70px rgba(23,32,51,.08);
}

.article-body h2{
    margin:45px 0 18px;

    color:#172033;

    font-size:31px;
    line-height:1.25;
}

.article-body h2:first-child{
    margin-top:0;
}

.article-body p{
    margin:0 0 22px;

    color:#606a78;

    font-size:16px;
    line-height:30px;
}

.article-body ul{
    margin:25px 0 35px;
    padding:0;
}

.article-body ul li{
    position:relative;

    margin-bottom:13px;
    padding-left:25px;

    color:#606a78;

    font-size:15px;
    line-height:25px;

    list-style:none;
}

.article-body ul li::before{
    content:"";

    position:absolute;
    left:0;
    top:9px;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#95c11f;
}

.article-body blockquote{
    position:relative;

    margin:40px 0;

    padding:28px 32px 28px 38px;

    border-left:4px solid #95c11f;
    border-radius:0 20px 20px 0;

    background:#f3f6eb;

    color:#394351;

    font-size:18px;
    line-height:31px;
    font-style:italic;
}


/*==================================================
ARTICLE END CTA
==================================================*/

.article-body::after{
    content:"TradeStone Consultancy • Pharmaceutical Engineering & Turnkey Expertise";

    display:block;

    margin-top:55px;
    padding-top:24px;

    border-top:1px solid #e5e8ed;

    color:#9299a4;

    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
}


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

@media only screen and (max-width:650px){

    .article-hero{
        padding:105px 20px 75px;
    }

    .article-hero h1{
        font-size:38px;
        letter-spacing:-1px;
    }

    .article-meta{
        flex-direction:column;
        gap:10px;
    }

    .article-content{
        padding:65px 16px 85px;
    }

    .article-body{
        padding:35px 24px;
    }

    .article-body h2{
        font-size:26px;
    }

    .article-body p{
        font-size:15px;
        line-height:28px;
    }
}

#readingProgress{
    position:fixed;
    top:0;
    left:0;

    width:0%;
    height:4px;

    background:#95c11f;

    z-index:99999;

    transition:width .1s linear;
}