.manufacturing-image-hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    overflow: hidden;

    background-image:
        url("https://img.magnific.com/free-photo/petroleum-gas-container-ship-oil-refinery-background-energy-nautical-transportation_1127-3250.jpg?t=st=1789110158~exp=1789113758~hmac=c986c1cc9e1e6efed99d09c1fffc83c68860b6623200f3d19e2c98b9399e3f52&w=1480");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}


/* Blog card excerpt - maximum 3 lines */

.blog-grid .blog-excerpt{
    display:-webkit-box;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;

    line-clamp:3;

    overflow:hidden;
}

/* Overlay */

.manufacturing-image-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgb(0 0 0 / 88%) 0%,
            rgb(1 9 30 / 76%) 38%,
            rgb(4 19 54 / 42%) 68%,
            rgba(4, 18, 60, 0.30) 100%
        );

    z-index: 1;
}


/* Blue / purple glow */

.manufacturing-image-overlay::after {
    content: "";
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(77, 120, 255, 0.18),
            transparent 34%
        ),
        radial-gradient(
            circle at 90% 25%,
            rgba(155, 0, 245, 0.14),
            transparent 30%
        );

    pointer-events: none;
}


/* Container */

.manufacturing-image-container {
    position: relative;
    z-index: 3;

    width: min(
        1240px,
        calc(100% - 48px)
    );

    margin: 0 auto;
}


/* Left content */

.manufacturing-image-content {
    max-width: 680px;
}


/* Eyebrow */

.manufacturing-image-content
.jizai-eyebrow {
    color: #79a0ff;
    margin-bottom: 22px;
}


/* Eyebrow line */

.manufacturing-image-content
.jizai-eyebrow::before {
    background: #5d83ff;
}


/* Heading */

.manufacturing-image-content h1 {
    margin: 0;
    max-width: 600px;

    font-size: clamp(46px, 3vw, 68px);

    font-weight: 600;

    color: #ffffff;
}


.manufacturing-image-content h1 span {
    color: #6f92ff;
}


/* Description */

.manufacturing-image-content p {
    max-width: 620px;

    margin: 28px 0 0;

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

    font-size: 16px;

    line-height: 1.75;
}


/* Buttons */

.manufacturing-image-actions {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-top: 34px;

    flex-wrap: wrap;
}


/* Secondary button */

.manufacturing-image-demo {
    display: inline-flex;

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

    min-height: 52px;

    padding: 0 26px;

    border-radius: 12px;

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

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

    color: #ffffff;

    font-weight: 600;

    backdrop-filter: blur(10px);

    transition:
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}


.manufacturing-image-demo:hover {
    color: #ffffff;

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

    border-color: rgba(255,255,255,.5);

    transform: translateY(-2px);
}


/* Bottom fade */

.manufacturing-image-hero::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 100px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(4,18,60,.20)
        );

    pointer-events: none;

    z-index: 2;
}
.blog-insights-page{overflow:hidden}

.blog-insights-hero{
    position:relative;
    padding:125px 0 115px;
    background:
        radial-gradient(circle at 18% 35%,rgba(73,111,255,.10),transparent 30%),
        radial-gradient(circle at 82% 30%,rgba(151,40,255,.09),transparent 32%),
        linear-gradient(135deg,#f8faff 0%,#fff 52%,#faf8ff 100%);
    overflow:hidden;
}
.blog-insights-hero::before{
    content:"";
    position:absolute;
    width:520px;height:520px;border-radius:50%;
    border:1px solid rgba(73,111,255,.07);
    right:-180px;top:-180px;
}
.blog-insights-hero-inner{
    max-width:950px;margin:0 auto;text-align:center;
    position:relative;z-index:2;
}
.blog-insights-hero .jizai-eyebrow{margin-bottom:18px}
.blog-insights-hero-title{
    margin:0 auto;max-width:900px;
    font-size:clamp(42px,5vw,72px);
    line-height:1.04;letter-spacing:-2.8px;
    font-weight:800;color:#071b63;
}
.blog-insights-hero-title span{color:#4d78ff}
.blog-insights-hero-copy{
    max-width:720px;margin:25px auto 0;
    font-size:16px;line-height:1.8;color:#607397;
}
.blog-insights-hero-actions{
    margin-top:32px;display:flex;justify-content:center;
    gap:12px;flex-wrap:wrap;
}

.blog-directory{
    padding:60px 0 60px;
    background:#f5f8fc;
}
.blog-directory-head{max-width:100%;text-align:center;margin-bottom:48px}
.blog-directory-head h2{
    margin:12px 0 14px;color:#071b63;
    font-size:clamp(30px,2vw,46px);font-weight:600;
}
.blog-directory-head p{
    max-width:100%;margin:0;color:#667895;
    font-size:14px;line-height:1.8;
    text-align:center;
}

.blog-filters{
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    margin-bottom: 42px;
    justify-content: center;
}
.blog-filter{
    border:1px solid #dfe6f2;background:#fff;color:#30456d;
    padding:10px 18px;border-radius:999px;font-family:inherit;
    font-size:12px;font-weight:600;cursor:pointer;
    transition:.25s ease;
}
.blog-filter:hover{
    transform:translateY(-2px);border-color:#aebeff;color:#416cff;
}
.blog-filter.active{background:#071b63;border-color:#071b63;color:#fff}

.blog-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
}
.blog-card{
    display:block;overflow:hidden;text-decoration:none;color:inherit;
    border:1px solid #e1e7f1;border-radius:18px;background:#fff;
    transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.blog-card:hover{
    transform:translateY(-8px);border-color:#d1dafa;
    box-shadow:0 22px 55px rgba(18,39,89,.10),0 5px 18px rgba(91,62,191,.06);
}
.blog-image{
    position:relative;height:210px;overflow:hidden;background:#edf2ff;
}
.blog-image img{
    width:100%;height:100%;object-fit:cover;display:block;
    transition:transform .6s ease;
}
.blog-card:hover .blog-image img{transform:scale(1.06)}
.blog-image::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(5,20,70,0) 45%,rgba(5,20,70,.18) 100%);
    pointer-events:none;
}
.blog-category{
    position:absolute;left:16px;top:16px;z-index:2;
    padding:7px 11px;border:1px solid rgba(255,255,255,.35);
    border-radius:999px;background:rgba(255,255,255,.92);
    color:#163270;font-size:10px;line-height:1;font-weight:700;
    backdrop-filter:blur(8px);
}
.blog-content{padding:22px 21px 23px}
.blog-meta{
    display:flex;justify-content:space-between;align-items:center;
    margin-bottom:9px;color:#8090aa;font-size:10px;font-weight:600;
}
.blog-content h3{
    margin:0 0 10px;color:#071b63;font-size:17px;
    line-height:1.3;letter-spacing:-.3px;font-weight:700;
}
.blog-excerpt{
    margin:0;color:#6b7b98;font-size:12px;line-height:1.7;
}
.blog-read{
    display:flex;align-items:center;justify-content:space-between;
    margin-top:20px;padding-top:15px;border-top:1px solid #edf0f6;
    color:#436fff;font-size:11px;font-weight:700;
}
.blog-read span{display:inline-block;transition:transform .25s ease}
.blog-card:hover .blog-read span{transform:translateX(5px)}

.blog-featured{margin-top:75px}
.blog-featured-card{
    display:grid;grid-template-columns:1.05fr 1fr;min-height:390px;
    overflow:hidden;border-radius:22px;
    background:
      radial-gradient(circle at 85% 10%,rgba(139,36,255,.34),transparent 35%),
      linear-gradient(120deg,#06163e 0%,#081d58 52%,#27116e 100%);
    box-shadow:0 25px 65px rgba(7,27,99,.15);
}
.blog-featured-image{position:relative;min-height:390px;overflow:hidden}
.blog-featured-image img{width:100%;height:100%;object-fit:cover;opacity:.86}
.blog-featured-image::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(90deg,rgba(5,20,60,0),rgba(5,20,60,.18));
}
.blog-featured-content{
    padding:60px 55px;display:flex;flex-direction:column;justify-content:center;
}
.blog-featured-content .jizai-eyebrow{color:#8eaaff}
.blog-featured-content h2{
    margin:12px 0 17px;color:#fff;font-size:clamp(27px,1vw,42px);font-weight:500;
}
.blog-featured-content p{
    max-width:520px;margin:0;color:rgba(255,255,255,.72);
    font-size:13px;line-height:1.8;
}
.blog-featured-link{
    display:inline-flex;align-items:center;gap:8px;width:max-content;
    margin-top:27px;padding:12px 18px;border-radius:9px;
    background: linear-gradient(
    135deg,
    #00E5FF 0%,
    #0085FF 35%,
    #2536FF 58%,
    #8A00FF 78%,
    #F000FF 100%
);
    color:#fff;text-decoration:none;font-size:12px;font-weight:500;
    transition:transform .25s ease,box-shadow .25s ease;
}
.blog-featured-link:hover{
    color:#fff;transform:translateY(-2px);
    box-shadow:0 12px 28px rgba(135,0,235,.28);
}

.blog-cta{
    padding:60px 0;background:#fff;
}
.blog-cta-box{
    position:relative;overflow:hidden;padding:62px 65px;border-radius:22px;
    background:
      radial-gradient(circle at 90% 10%,rgba(139,30,255,.35),transparent 32%),
      linear-gradient(110deg,#061638,#071d59 55%,#351078);
}
.blog-cta-box::after{
    content:"";position:absolute;width:350px;height:350px;
    right:-150px;top:-170px;border:1px solid rgba(255,255,255,.10);
    border-radius:50%;
}
.blog-cta-content{position:relative;z-index:2;max-width:720px}
.blog-cta-content .jizai-eyebrow{color:#9bb4ff}
.blog-cta-content h2{
    margin:12px 0 15px;color:#fff;font-size:clamp(28px,1vw,43px);font-weight:500;
}
.blog-cta-content p{
    margin:0;max-width:600px;color:rgba(255,255,255,.72);
    font-size:13px;line-height:1.8;
}

@media(max-width:1199px){
    .blog-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:991px){
    .blog-insights-hero{padding:95px 0 85px}
    .blog-grid{grid-template-columns:repeat(2,1fr)}
    .blog-featured-card{grid-template-columns:1fr}
    .blog-featured-image{min-height:300px}
    .blog-featured-content{padding:45px 35px}
}
@media(max-width:767px){
    .manufacturing-image-content h1 {
          font-size: clamp(35px, 3vw, 68px);
  }
  .manufacturing-image-hero {
      min-height: 300px;
  }
    
    
    .blog-insights-hero{padding:75px 0 70px}
    .blog-insights-hero-title{font-size:40px;letter-spacing:-1.5px}
    .blog-insights-hero-copy{font-size:13px}
    .blog-directory{padding:75px 0}
    .blog-grid{grid-template-columns:1fr;gap:18px}
    .blog-image{height:220px}
    .blog-filters{margin-bottom:30px}
    .blog-featured{margin-top:50px}
    .blog-featured-content{padding:35px 25px}
    .blog-cta{padding:70px 0}
    .blog-cta-box{padding:40px 25px;border-radius:17px}
}