/* ---------- HERO ---------- */

.blog-hero {

    position: relative;

    overflow: hidden;

}



.blog-hero .about-slider {

    position: relative;

    min-height: 520px;

    background-position: center center !important;

    background-size: cover !important;

    background-repeat: no-repeat !important;

}



.blog-hero .about-slider::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .62) 46%, rgba(0, 0, 0, .18) 100%);

    z-index: 1;

}



.blog-hero .container {

    position: relative;

    z-index: 2;

}



.blog-hero .slider-content {

    max-width: 760px;

}



.blog-hero .hero-subtitle {

    display: inline-block;

    margin-bottom: 14px;

    color: #fff;

    font-size: 14px;

    font-weight: 700;

    letter-spacing: 3px;

    text-transform: uppercase;

}



.blog-hero .title {

    margin: 0 0 18px;

    color: #fff;

    font-size: 64px;

    line-height: 1.05;

    font-weight: 800;

}



.blog-hero .hero-text {

    max-width: 720px;

    margin: 0;

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

    font-size: 18px;

    line-height: 1.75;

    font-weight: 400;

}



/* ---------- BLOG SECTION ---------- */

.delta-blog-section {

    padding: 0px 0 30px;

    background: #fff;

    overflow: visible !important;

}



.delta-blog-section > .container {

    overflow: visible !important;

}



.blog-section-heading {

    max-width: 760px;

    margin: 0 auto 52px;

    text-align: center;

}



.blog-section-heading .section-kicker {

    display: inline-block;

    margin-bottom: 12px;

    color: #e31e24;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 2.2px;

    text-transform: uppercase;

}



.blog-section-heading h2 {

    margin: 0 0 14px;

    color: #111;

    font-size: 42px;

    line-height: 1.15;

    font-weight: 800;

}



.blog-section-heading h2 span {

    color: #e31e24;

}



.blog-section-heading p {

    margin: 0;

    color: #666;

    font-size: 16px;

    line-height: 1.75;

}



.blog-layout {

    display: grid;

    grid-template-columns: 260px minmax(0, 1fr);

    gap: 38px;

    align-items: start;

    position: relative;

    overflow: visible !important;

}



/* ---------- FILTER ---------- */

.blog-filter-panel {

    position: -webkit-sticky;

    position: sticky;

    top: 120px;

    align-self: start;

    height: fit-content;

    z-index: 20;

}



.blog-filter-sticky {

    position: relative;

    top: auto;

    width: 100%;

    border: 1px solid #ececec;

    border-radius: 12px;

    background: #fafafa;

    overflow: hidden;

    box-shadow: 0 10px 35px rgba(0, 0, 0, .05);

}



.filter-title-row {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    padding: 20px 22px;

    background: #111;

    color: #fff;

    font-size: 17px;

    font-weight: 800;

}



.filter-title-row i {

    color: #e31e24;

}



.blog-filter-list {

    padding: 10px;

}



.blog-filter-btn {

    width: 100%;

    min-height: 46px;

    padding: 10px 12px;

    border: 0;

    border-bottom: 1px solid #ececec;

    background: transparent;

    color: #3c3c3c;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 15px;

    text-align: left;

    font-size: 14px;

    font-weight: 600;

    cursor: pointer;

    transition: all .25s ease;

}



.blog-filter-btn:last-child {

    border-bottom: 0;

}



.blog-filter-btn:hover,

.blog-filter-btn.active {

    padding-left: 16px;

    color: #e31e24;

    background: #fff;

}



.filter-count {

    min-width: 28px;

    height: 26px;

    padding: 0 7px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #efefef;

    color: #777;

    font-size: 11px;

    font-weight: 800;

    transition: all .25s ease;

}



.blog-filter-btn.active .filter-count,

.blog-filter-btn:hover .filter-count {

    background: #e31e24;

    color: #fff;

}



.blog-content-area {

    min-width: 0;

    position: relative;

    overflow: visible;

}



/* ---------- BLOG GRID ---------- */

.blog-grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 30px;

}



.blog-card {

    min-width: 0;

    border: 1px solid #ededed;

    border-radius: 12px;

    overflow: hidden;

    background: #fff;

    box-shadow: 0 8px 30px rgba(0, 0, 0, .055);

    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;

}



.blog-card:hover {

    transform: translateY(-6px);

    border-color: rgba(227, 30, 36, .22);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .09);

}



.blog-card.is-hidden {

    display: none;

}



.blog-card.is-revealing {

    animation: blogReveal .45s ease both;

}



@keyframes blogReveal {

    from {

        opacity: 0;

        transform: translateY(18px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.blog-card-image {

    position: relative;

    display: block;

    height: 255px;

    overflow: hidden;

    background: #eee;

}



.blog-card-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .23) 100%);

    pointer-events: none;

}



.blog-card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1);

    transition: transform .55s cubic-bezier(.2, .7, .2, 1);

}



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

    transform: scale(1.065);

}



.blog-category-badge {

    position: absolute;

    left: 18px;

    bottom: 18px;

    z-index: 2;

    padding: 8px 12px;

    border-radius: 5px;

    background: #e31e24;

    color: #fff;

    font-size: 11px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .6px;

    text-transform: uppercase;

}



.blog-card-content {

    padding: 24px 24px 26px;

}



.blog-meta {

    margin-bottom: 13px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px 16px;

    color: #868686;

    font-size: 12px;

    line-height: 1.4;

}



.blog-meta span {

    display: inline-flex;

    align-items: center;

    gap: 6px;

}



.blog-meta i {

    color: #e31e24;

}



.blog-card-content h3 {

    margin: 0 0 12px;

    font-size: 22px;

    line-height: 1.35;

    font-weight: 800;

}



.blog-card-content h3 a {

    color: #151515;

    text-decoration: none;

    transition: color .25s ease;

}



.blog-card-content h3 a:hover {

    color: #e31e24;

}



.blog-card-content p {

    margin: 0 0 20px;

    color: #666;

    font-size: 14px;

    line-height: 1.75;

}



.blog-read-more {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #e31e24;

    font-size: 13px;

    font-weight: 800;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: .5px;

}



.blog-read-more i {

    font-size: 11px;

    transition: transform .25s ease;

}



.blog-read-more:hover {

    color: #111;

}



.blog-read-more:hover i {

    transform: translateX(4px);

}



/* ---------- LOAD MORE ---------- */

.blog-load-more-wrap {

    display: flex;

    justify-content: center;

    margin-top: 48px;

}



.blog-load-more {

    min-width: 158px;

    height: 50px;

    padding: 0 27px;

    border: 1px solid #e31e24;

    border-radius: 6px;

    background: #e31e24;

    color: #fff;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    font-size: 14px;

    font-weight: 800;

    cursor: pointer;

    transition: all .3s ease;

}



.blog-load-more:hover,

.blog-load-more:focus-visible {

    background: #111;

    border-color: #111;

    transform: translateY(-2px);

}



.blog-load-more i {

    font-size: 12px;

    transition: transform .3s ease;

}



.blog-load-more:hover i {

    transform: translateY(2px);

}



.blog-empty-state {

    padding: 60px 20px;

    text-align: center;

    border: 1px dashed #ddd;

    border-radius: 12px;

    background: #fafafa;

}



.blog-empty-state i {

    margin-bottom: 15px;

    color: #e31e24;

    font-size: 38px;

}



.blog-empty-state h3 {

    margin-bottom: 8px;

    color: #111;

    font-size: 22px;

}



.blog-empty-state p {

    margin: 0;

    color: #777;

}



/* ---------- RESULTS-STYLE CTA ---------- */

.results-cta {

    position: relative;

    overflow: hidden;

    padding: 88px 0;

    background: var(--tj-color-theme-primary, #e50914);

}



.results-cta::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(120deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0) 60%);

    pointer-events: none;

}



.results-cta-shape {

    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 50%;

}



.results-cta-shape-one {

    width: 420px;

    height: 420px;

    top: -230px;

    right: -100px;

}



.results-cta-shape-two {

    width: 280px;

    height: 280px;

    bottom: -190px;

    left: -60px;

}



.results-cta-content {

    position: relative;

    z-index: 2;

    max-width: 850px;

    margin: 0 auto;

    text-align: center;

}



.results-cta-kicker {

    margin: 0 0 13px;

    color: #fff3b8;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 2.1px;

}



.results-cta h2 {

    margin: 0;

    color: #fff;

    font-size: clamp(32px, 4vw, 48px);

    font-weight: 800;

    line-height: 1.2;

}



.results-cta-content > p:not(.results-cta-kicker) {

    max-width: 760px;

    margin: 20px auto 0;

    color: rgba(255, 255, 255, 0.88);

    font-size: 16px;

    font-weight: 500;

    line-height: 1.8;

}



.results-cta-actions {

    display: flex;

    justify-content: center;

    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;

}



.results-cta-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 52px;

    padding: 14px 24px;

    border: 1px solid #fff;

    border-radius: 8px;

    font-size: 14px;

    font-weight: 700;

    text-decoration: none;

    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;

}



.results-cta-btn:hover {

    transform: translateY(-2px);

    text-decoration: none;

}



.results-cta-btn-light {

    background: #fff;

    color: #111;

}



.results-cta-btn-light:hover {

    background: #111;

    border-color: #111;

    color: #fff;

}



.results-cta-btn-outline {

    background: transparent;

    color: #fff;

}



.results-cta-btn-outline:hover {

    background: #fff;

    color: #111;

}



/* ---------- RESPONSIVE ---------- */

@media (max-width: 1199px) {

    .blog-layout {

        grid-template-columns: 230px minmax(0, 1fr);

        gap: 28px;

    }



    .blog-filter-panel {

        top: 105px;

    }



    .blog-card-image {

        height: 225px;

    }



    .blog-card-content h3 {

        font-size: 20px;

    }

}



@media (max-width: 991px) {

    .blog-hero .about-slider {

        min-height: 500px;

    }



    .blog-hero .title {

        font-size: 52px;

    }



    .delta-blog-section {

        padding: 30px 0 85px;

    }



    .blog-layout {

        grid-template-columns: 1fr;

    }



    .blog-filter-panel {

        position: relative;

        top: auto;

        width: 100%;

        z-index: auto;

    }



    .blog-filter-sticky {

        position: relative;

        top: auto;

    }



    .blog-filter-list {

        display: grid;

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

        gap: 8px;

    }



    .blog-filter-btn {

        border: 1px solid #e7e7e7;

        border-radius: 6px;

        background: #fff;

    }



    .blog-filter-btn:last-child {

        border-bottom: 1px solid #e7e7e7;

    }



}



@media (max-width: 767px) {

    .blog-hero .about-slider {

        min-height: 450px;

    }



    .blog-hero .about-slider::before {

        background: linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .64) 68%, rgba(0, 0, 0, .34) 100%);

    }



    .blog-hero .title {

        font-size: 40px;

    }



    .blog-hero .hero-text {

        font-size: 15px;

        line-height: 1.7;

    }



    .delta-blog-section {

        padding: 30px 0 30px;

    }



    .blog-section-heading {

        margin-bottom: 38px;

    }



    .blog-section-heading h2 {

        font-size: 32px;

    }



    .blog-filter-list {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .blog-grid {

        grid-template-columns: 1fr;

        gap: 24px;

    }



    .blog-card-image {

        height: 255px;

    }



    .results-cta {

        padding: 62px 0;

    }



    .results-cta-content > p:not(.results-cta-kicker) {

        font-size: 14px;

        line-height: 1.7;

    }



    .results-cta-actions {

        flex-direction: column;

        align-items: stretch;

        max-width: 330px;

        margin-left: auto;

        margin-right: auto;

    }



}



@media (max-width: 480px) {

    .blog-hero .about-slider {

        min-height: 420px;

    }



    .blog-hero .title {

        font-size: 35px;

    }



    .blog-filter-list {

        grid-template-columns: 1fr;

    }



    .blog-card-image {

        height: 225px;

    }



    .blog-card-content {

        padding: 21px 19px 23px;

    }



    .blog-card-content h3 {

        font-size: 20px;

    }

}





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

    .blog-card,

    .blog-card-image img,

    .blog-load-more,

    .results-cta-btn {

        transition: none;

    }



    .blog-card.is-revealing {

        animation: none;

    }

}

/* =========================================================
   MOBILE BLOG HEADING + FILTER DRAWER
   Existing desktop/current styles remain unchanged.
   ========================================================= */

.blog-mobile-heading-bar,
.blog-mobile-filter-close,
.blog-mobile-filter-overlay {
    display: none;
}

@media (max-width: 767px) {

    /* =========================================================
       MOBILE BLOG HEADING + FILTER ICON
       ========================================================= */

    .delta-blog-section .blog-mobile-heading-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;

        width: 100%;

        margin: 0 0 18px;
        padding: 0 4px;
    }

    .delta-blog-section .blog-mobile-heading-bar h2 {
        margin: 0;

        color: #111;

        font-size: 28px;
        line-height: 1.2;
        font-weight: 800;
    }


    /* Filter icon beside Blogs */

    .delta-blog-section .blog-mobile-filter-trigger {
        position: static !important;

        width: 44px;
        height: 44px;

        padding: 0;
        margin: 0;

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

        border: 0;
        border-radius: 8px;

        background: #111;
        color: #e31e24;

        font-size: 19px;
        line-height: 1;

        cursor: pointer;
    }

    .delta-blog-section .blog-mobile-filter-trigger:hover,
    .delta-blog-section .blog-mobile-filter-trigger:focus {
        background: #111;
        color: #e31e24;
        outline: none;
    }


    /* =========================================================
       RIGHT SIDE FILTER DRAWER
       ========================================================= */

    .delta-blog-section .blog-filter-panel {
        position: fixed !important;

        /*
         * IMPORTANT:
         * JavaScript will set this variable to the exact
         * Y position of the filter icon.
         */
        top: var(--filter-drawer-top, 0px) !important;

        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;

        width: 320px !important;
        max-width: 88vw !important;

        height: calc(100vh - var(--filter-drawer-top, 0px)) !important;

        margin: 0 !important;
        padding: 0 !important;

        z-index: 10001 !important;

        background: #fff;

        /* CLOSED */
        transform: translate3d(100%, 0, 0);

        visibility: hidden;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;

        border-radius: 14px 0 0 0;

        box-shadow: -12px 0 35px rgba(0, 0, 0, 0.20);

        transition:
            transform 0.35s ease,
            visibility 0.35s ease;
    }


    /* OPEN */

    .delta-blog-section.mobile-filter-open
    .blog-filter-panel {
        transform: translate3d(0, 0, 0);

        visibility: visible;
    }


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

    .delta-blog-section .blog-filter-sticky {
        position: relative !important;

        top: auto !important;

        width: 100%;
        min-height: 100%;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow: none !important;

        background: #fff;
    }


    /* =========================================================
       FILTER HEADER
       ========================================================= */

    .delta-blog-section .filter-title-row {
        position: relative;

        min-height: 82px;

        padding: 20px 62px 20px 22px;

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

        background: #111;
        color: #fff;

        border-radius: 14px 0 0 0;

        font-size: 20px;
        font-weight: 800;
    }

    .delta-blog-section .filter-title-row span {
        color: #fff;
    }


    /* Hide the second sliders icon inside drawer */

    .delta-blog-section .filter-title-row > i {
        display: none !important;
    }


    /* =========================================================
       CLOSE X
       ========================================================= */

    .delta-blog-section .blog-mobile-filter-close {
        position: absolute;

        top: 20px;
        right: 14px;

        z-index: 10005;

        width: 38px;
        height: 38px;

        padding: 0;

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

        border: 0;
        border-radius: 50%;

        background: transparent;
        color: #e31e24;

        font-size: 22px;
        line-height: 1;

        cursor: pointer;
    }

    .delta-blog-section .blog-mobile-filter-close:hover,
    .delta-blog-section .blog-mobile-filter-close:focus {
        background: transparent;
        color: #ff3338;
        outline: none;
    }


    /* =========================================================
       FILTER LIST
       ========================================================= */

    .delta-blog-section .blog-filter-list {
        display: block !important;

        width: 100%;

        padding: 14px 12px 25px;

        background: #fff;
    }


    .delta-blog-section .blog-filter-btn {
        width: 100%;

        min-height: 58px;

        margin: 0 0 10px;
        padding: 10px 15px;

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

        border: 1px solid #e7e7e7 !important;
        border-radius: 8px;

        background: #fff;
    }

    .delta-blog-section .blog-filter-btn:last-child {
        margin-bottom: 0;
    }


    /* =========================================================
       OVERLAY
       ========================================================= */

    .delta-blog-section .blog-mobile-filter-overlay {
        position: fixed;

        inset: 0;

        display: block;

        width: 100%;
        height: 100%;

        background: rgba(0, 0, 0, 0.45);

        z-index: 10000;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transition:
            opacity 0.35s ease,
            visibility 0.35s ease;
    }


    .delta-blog-section.mobile-filter-open
    .blog-mobile-filter-overlay {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .delta-blog-section .blog-mobile-heading-bar h2 {
        font-size: 25px;
    }

    .delta-blog-section .blog-mobile-filter-trigger {
        width: 42px;
        height: 42px;
    }

    .delta-blog-section .blog-filter-panel {
        width: 320px !important;
        max-width: 88vw !important;
    }
}