.elementor-103 .elementor-element.elementor-element-a45388d{--display:grid;--e-con-grid-template-columns:repeat(1, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--justify-items:stretch;--align-items:stretch;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-103 .elementor-element.elementor-element-a45388d.e-con{--align-self:stretch;--flex-grow:1;--flex-shrink:1;}.elementor-103 .elementor-element.elementor-element-5e18460{width:var( --container-widget-width, 100% );max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-103 .elementor-element.elementor-element-5e18460.elementor-element{--align-self:stretch;--flex-grow:1;--flex-shrink:1;}.elementor-103 .elementor-element.elementor-element-a1b6b09{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-103 .elementor-element.elementor-element-2709b96{width:var( --container-widget-width, 100% );max-width:100%;--container-widget-width:100%;--container-widget-flex-grow:0;}.elementor-103 .elementor-element.elementor-element-2709b96.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-posts{grid-template-columns:repeat(1, minmax(0, 1fr));grid-column-gap:40px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-thumb .thumbnail-container{height:300px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-postblock-content{text-align:left;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-readmore.icon-position-before i, .elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-readmore.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-readmore.icon-position-after i, .elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-readmore.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-readmore{color:var( --e-global-color-primary );}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-readmore svg{fill:var( --e-global-color-primary );}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-readmore:hover{color:var( --e-global-color-primary );}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-readmore:hover svg{fill:var( --e-global-color-primary );}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-comment.icon-position-before i, .elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-comment.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-comment.icon-position-after i, .elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-comment.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-author.icon-position-before i, .elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-author.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-author.icon-position-after i, .elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-author.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-date.icon-position-before i, .elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-date.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-date.icon-position-after i, .elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-meta-date.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-post-meta-bottom{justify-content:space-between;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jeg_empty_module{text-align:left;}.elementor-103 .elementor-element.elementor-element-b41921e{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-posts{grid-template-columns:repeat(3, minmax(0, 1fr));grid-column-gap:40px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-thumb .thumbnail-container{height:300px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-postblock-content{text-align:left;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-readmore.icon-position-before i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-readmore.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-readmore.icon-position-after i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-readmore.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-comment.icon-position-before i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-comment.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-comment.icon-position-after i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-comment.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-author.icon-position-before i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-author.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-author.icon-position-after i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-author.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-date.icon-position-before i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-date.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-date.icon-position-after i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-meta-date.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-block-pagination .jkit-pagination-button{width:100%;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-block-pagination .jkit-pagination-button.icon-position-before i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-block-pagination .jkit-pagination-button.icon-position-before svg{margin-right:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-block-pagination .jkit-pagination-button.icon-position-after i, .elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-block-pagination .jkit-pagination-button.icon-position-after svg{margin-left:5px;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-block-pagination{text-align:center;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-block-pagination .jkit-pagination-button.jkit-block-nextprev .disabled{opacity:50%;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-post-meta-bottom{justify-content:space-between;}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jeg_empty_module{text-align:left;}:root{--page-title-display:none;}@media(max-width:1024px){.elementor-103 .elementor-element.elementor-element-a45388d{--grid-auto-flow:row;}.elementor-103 .elementor-element.elementor-element-2709b96 .jeg-elementor-kit.jkit-postblock .jkit-posts{grid-template-columns:repeat(1, minmax(0, 1fr));}.elementor-103 .elementor-element.elementor-element-3903f9b .jeg-elementor-kit.jkit-postblock .jkit-posts{grid-template-columns:repeat(1, minmax(0, 1fr));}}@media(max-width:767px){.elementor-103 .elementor-element.elementor-element-a45388d{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}
/* Start custom CSS for jkit_post_block, class: .elementor-element-2709b96 *//* ===== FEATURED POST BLOCK STYLING ===== */
.featured-post-block .jkit-post {
    display: flex;
    flex-direction: row-reverse;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

.featured-post-block .jkit-thumb {
    width: 50%;
    min-height: 400px;
    position: relative;
    overflow: hidden;
}

.featured-post-block .jkit-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.featured-post-block .jkit-postblock-content {
    width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-post-block .jkit-post-title {
    font-size: 28px;
    font-weight: 800;
    color: #1F2937;
    margin-bottom: 15px;
}

.featured-post-block .jkit-post-excerpt {
    font-size: 16px;
    color: #6B7280;
    line-height: 1.7;
    margin-bottom: 25px;
}

.featured-post-block .jkit-meta-readmore .jkit-readmore {
    background: #DC143C;
    color: #ffffff !important;
    padding: 14px 28px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: background 0.3s ease;
}

.featured-post-block .jkit-meta-readmore .jkit-readmore:hover {
    background: #B8102F;
}

.featured-post-block .jkit-meta-readmore .jkit-readmore svg {
    fill: #ffffff;
}

/* Hide comment count on featured */
.featured-post-block .jkit-meta-comment {
    display: none;
}

/* HIDE the original category badge completely */
.featured-post-block .jkit-post-category {
    display: none !important;
}

/* Featured badge via CSS */
.featured-post-block .jkit-thumb::before {
    content: "★ FEATURED";
    position: absolute;
    top: 20px;
    left: 20px;
    background: #DC143C;
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    z-index: 10;
}

/* Responsive */
@media (max-width: 768px) {
    .featured-post-block .jkit-post {
        flex-direction: column;
    }
    
    .featured-post-block .jkit-thumb,
    .featured-post-block .jkit-postblock-content {
        width: 100%;
    }
    
    .featured-post-block .jkit-thumb {
        min-height: 250px;
    }
}/* End custom CSS */

/* Start custom CSS for jkit_post_block, class: .elementor-element-3903f9b *//* ===== GRID POST CARDS - COMPLETE STYLING ===== */

/* White card background */
.jkit-postblock:not(.featured-post-block) article.jkit-post {
    background: #ffffff !important;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.jkit-postblock:not(.featured-post-block) article.jkit-post:hover {
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    transform: translateY(-5px);
}

/* Image container positioning */
.jkit-postblock:not(.featured-post-block) .jkit-thumb {
    position: relative;
}

/* Category badge - TOP LEFT of image */
.jkit-postblock:not(.featured-post-block) .jkit-post-category {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    bottom: auto !important;
    right: auto !important;
    z-index: 10;
}

.jkit-postblock:not(.featured-post-block) .jkit-post-category span a {
    background: #DC143C !important;
    color: #ffffff !important;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    display: inline-block;
}

/* Content area padding */
.jkit-postblock:not(.featured-post-block) .jkit-postblock-content {
    padding: 25px !important;
    background: #ffffff !important;
}

/* Date styling with red dot */
.jkit-postblock:not(.featured-post-block) .jkit-meta-date svg {
    display: none !important;
}

.jkit-postblock:not(.featured-post-block) .jkit-meta-date::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #DC143C;
    border-radius: 50%;
    margin-right: 8px;
}

/* Read More styling */
.jkit-postblock:not(.featured-post-block) .jkit-readmore {
    background: none !important;
    border: none !important;
    color: #DC143C !important;
    padding: 0 !important;
    font-weight: 600 !important;
}

.jkit-postblock:not(.featured-post-block) .jkit-readmore:hover {
    color: #B8102F !important;
}

.jkit-postblock:not(.featured-post-block) .jkit-readmore svg {
    fill: #DC143C !important;
}

/* Hide comment count */
.jkit-postblock:not(.featured-post-block) .jkit-meta-comment {
    display: none !important;
}

/* Hide shape dividers */
.elementor-shape {
    display: none !important;
}
/* Remove white background from category badge */

.jkit-postblock:not(.featured-post-block) .jkit-post-category {

    background: transparent !important;

    background-color: transparent !important;

    padding: 0 !important;

    max-width: none !important;

}

.jkit-postblock:not(.featured-post-block) .jkit-post-category.position-center {

    background: transparent !important;

    padding: 0 !important;

}

/* Position category badge top left */

.jkit-postblock:not(.featured-post-block) .jkit-post-category.position-center {

    left: 15px !important;

    top: 15px !important;

    bottom: auto !important;

    transform: none !important;

    -webkit-transform: none !important;

    text-align: left !important;

}/* End custom CSS */
/* Start custom CSS */<style>
    /* Force breakout from any Elementor container */
    .blog-hero {
        width: 100vw !important;
        position: relative !important;
        left: 50% !important;
        right: 50% !important;
        margin-left: -50vw !important;
        margin-right: -50vw !important;
    }

    :root {
        --primary-dark: #333F50;
        --primary-red: #DC143C;
        --text-dark: #1F2937;
        --bg-light: #F8FAFC;
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    .blog-hero {
        background: linear-gradient(135deg, var(--primary-dark) 0%, #2A3441 100%);
        padding: 80px 20px 120px;
        overflow: hidden;
    }

    .blog-hero::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: var(--bg-light);
        clip-path: polygon(0 100%, 100% 100%, 100% 0, 0 100%);
    }

    .blog-hero::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        opacity: 0.5;
        pointer-events: none;
    }

    .hero-content {
        max-width: 1200px;
        margin: 0 auto;
        position: relative;
        z-index: 1;
        text-align: center;
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: var(--primary-red);
        color: white;
        padding: 8px 20px;
        border-radius: 50px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 24px;
        animation: fadeInDown 0.6s ease-out;
    }

    .hero-badge svg {
        width: 16px;
        height: 16px;
    }

    .hero-title {
        color: white;
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 800;
        margin-bottom: 16px;
        animation: fadeInUp 0.6s ease-out 0.1s both;
    }

    .hero-subtitle {
        color: rgba(255, 255, 255, 0.8);
        font-size: 1.125rem;
        max-width: 600px;
        margin: 0 auto 32px;
        animation: fadeInUp 0.6s ease-out 0.2s both;
    }

    .hero-breadcrumb {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        animation: fadeInUp 0.6s ease-out 0.3s both;
    }

    .hero-breadcrumb a {
        color: rgba(255, 255, 255, 0.8);
        text-decoration: none;
        transition: color 0.2s;
    }

    .hero-breadcrumb a:hover {
        color: white;
    }

    .hero-breadcrumb svg {
        width: 14px;
        height: 14px;
    }

    @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(30px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInDown {
        from { opacity: 0; transform: translateY(-20px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (max-width: 768px) {
        .blog-hero { padding: 60px 20px 100px; }
        .hero-title { font-size: 2rem; }
    }
</style>

<section class="blog-hero">
    <div class="hero-content">
        <div class="hero-badge">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 18.657A8 8 0 016.343 7.343S7 9 9 10c0-2 .5-5 2.986-7C14 5 16.09 5.777 17.656 7.343A7.975 7.975 0 0120 13a7.975 7.975 0 01-2.343 5.657z" />
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.879 16.121A3 3 0 1012.015 11L11 14H9c0 .768.293 1.536.879 2.121z" />
            </svg>
            Fire Safety News
        </div>
        <h1 class="hero-title">News & Insights</h1>
        <p class="hero-subtitle">Stay informed with the latest fire safety regulations, industry updates, and expert guidance from our team.</p>
        <div class="hero-breadcrumb">
            <a href="/">Home</a>
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
            </svg>
            <span>Blog</span>
        </div>
    </div>
</section>/* End custom CSS */