.elementor-1586 .elementor-element.elementor-element-242221c{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--margin-top:-142px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-1586 .elementor-element.elementor-element-242221c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-1586 .elementor-element.elementor-element-d9261a9{--display:flex;--min-height:348px;--justify-content:center;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--flex-wrap:wrap;--margin-top:196px;--margin-bottom:065px;--margin-left:200px;--margin-right:200px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-1586 .elementor-element.elementor-element-d9261a9.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );color:var( --e-global-color-primary );}.elementor-1586 .elementor-element.elementor-element-e3589d5{text-align:center;}.elementor-1586 .elementor-element.elementor-element-e3589d5 .elementor-heading-title{color:#000000;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1586 .elementor-element.elementor-element-7e01ab0{text-align:center;font-family:var( --e-global-typography-ed416e5-font-family ), Sans-serif;font-size:var( --e-global-typography-ed416e5-font-size );font-weight:var( --e-global-typography-ed416e5-font-weight );line-height:var( --e-global-typography-ed416e5-line-height );color:#000000;}.elementor-1586 .elementor-element.elementor-element-b57be32{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:20px 61px;--row-gap:20px;--column-gap:61px;--padding-top:0px;--padding-bottom:160px;--padding-left:64px;--padding-right:64px;overflow:visible;}.elementor-1586 .elementor-element.elementor-element-24fc19c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-1586 .elementor-element.elementor-element-7e1f1e7{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}@media(max-width:1024px){.elementor-1586 .elementor-element.elementor-element-242221c{--margin-top:-107px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:032px;--padding-right:032px;}.elementor-1586 .elementor-element.elementor-element-d9261a9{--min-height:340px;--margin-top:146px;--margin-bottom:40px;--margin-left:0px;--margin-right:0px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-1586 .elementor-element.elementor-element-7e01ab0{font-size:var( --e-global-typography-ed416e5-font-size );line-height:var( --e-global-typography-ed416e5-line-height );}.elementor-1586 .elementor-element.elementor-element-b57be32{--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:32px;--padding-right:32px;}}@media(max-width:767px){.elementor-1586 .elementor-element.elementor-element-242221c{--margin-top:-107px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:120px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1586 .elementor-element.elementor-element-d9261a9{--width:350px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:024px;--padding-right:024px;}.elementor-widget-heading .elementor-heading-title{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-widget-text-editor{font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-1586 .elementor-element.elementor-element-7e01ab0{font-size:var( --e-global-typography-ed416e5-font-size );line-height:var( --e-global-typography-ed416e5-line-height );}.elementor-1586 .elementor-element.elementor-element-b57be32{--padding-top:0px;--padding-bottom:0px;--padding-left:24px;--padding-right:24px;}}@media(min-width:768px){.elementor-1586 .elementor-element.elementor-element-d9261a9{--width:820px;}.elementor-1586 .elementor-element.elementor-element-b57be32{--content-width:1312px;}.elementor-1586 .elementor-element.elementor-element-24fc19c{--width:248px;}.elementor-1586 .elementor-element.elementor-element-7e1f1e7{--width:1003px;}}@media(max-width:1024px) and (min-width:768px){.elementor-1586 .elementor-element.elementor-element-d9261a9{--width:720px;}}/* Start custom CSS for html, class: .elementor-element-01ab192 *//* REMOVE HOVER / ACTIVE COLOR */
.blog-filter-trigger,
.blog-filter-trigger:hover,
.blog-filter-trigger:focus,
.blog-filter-trigger:active{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* remove pink text/icon hover */
.blog-filter-trigger:hover span,
.blog-filter-trigger:focus span{
    color:#111 !important;
}

.blog-filter-trigger img{
    transition:none !important;
}

/* --------------------------
DESKTOP DEFAULT
HIDE EVERYTHING
-------------------------- */
.blog-mobile-toolbar,
.blog-filter-overlay,
.blog-filter-drawer {
    display: none;
}


/* ===================================================
TABLET + MOBILE ONLY
=================================================== */

@media (max-width: 1024px) {

    /* --------------------------
    MOBILE / TABLET HEADER
    -------------------------- */
    .blog-mobile-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-bottom: 24px;
    }

    .blog-mobile-title {
        margin: 0;

        font-size: 22px;
        font-weight: 600;
        color: #111;
    }

    .blog-filter-trigger {
        display: flex;
        align-items: center;
        gap: 8px;

        border: none;
        background: transparent;

        cursor: pointer;

        font-size: 14px;
        font-weight: 500;
        color: #111;

        padding: 0;
    }

    .blog-filter-icon{
        width:18px;
        height:18px;
        object-fit:contain;
        display:block;
    }


    /* --------------------------
    OVERLAY
    -------------------------- */
    .blog-filter-overlay {
        display: block;

        position: fixed;
        inset: 0;

        background: rgba(0,0,0,.35);

        opacity: 0;
        visibility: hidden;

        transition: .3s ease;

        z-index: 9998;
    }

    .blog-filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* --------------------------
    DRAWER
    RIGHT SIDE
    -------------------------- */
    .blog-filter-drawer {

        display: flex;
        flex-direction: column;

        position: fixed;

        top: 0;
        right: 0;

        width: 390px;
        max-width: 100%;
        height: 100%;

        background: #fff;

        transform: translateX(100%);
        transition: transform .35s ease;

        z-index: 9999;

        overflow: hidden;
    }

    .blog-filter-drawer.active {
        transform: translateX(0);
    }


    /* --------------------------
    HEADER
    -------------------------- */
    .blog-filter-drawer__header {

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

        padding: 24px 20px;

        border-bottom: 1px solid #eee;

        flex-shrink: 0;
    }

    .blog-filter-drawer__header h3 {
        margin: 0;

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

    .blog-filter-close {

        border: none;
        background: transparent;

        cursor: pointer;

        font-size: 22px;
        color: #111;
    }


    /* --------------------------
    BODY
    -------------------------- */
    .blog-filter-drawer__body {
        flex: 1;
        overflow: hidden;
    }

    .blog-filter-scroll {
        height: 100%;
        overflow-y: auto;

        padding: 20px;

        -webkit-overflow-scrolling: touch;
    }


   /* ==========================================
SELECTED FILTERS
CASE STUDY STYLE
========================================== */

.selected-filters{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-bottom:28px;
}

.selected-filter-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;

    width:fit-content;
    min-height:44px;

    padding:0 14px;

    border:1px solid #D9D9D9;
    border-radius:12px;

    background:#F8F8F8;

    font-size:14px;
    font-weight:400;
    color:#111;

    white-space:nowrap;
}

/* REMOVE BUTTON */
.remove-filter{
    display:flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;

    border:none !important;
    background:transparent !important;

    padding:0;
    margin:0;

    cursor:pointer;

    color:#111 !important;
    font-size:18px;
    line-height:1;

    box-shadow:none !important;
    outline:none !important;
}

/* remove ugly hover */
.remove-filter:hover,
.remove-filter:focus,
.remove-filter:active{
    background:transparent !important;
    color:#111 !important;
    border:none !important;
    box-shadow:none !important;
}
    /* --------------------------
    FOOTER
    STICKY BUTTON
    -------------------------- */
    .blog-filter-drawer__footer {

        position: sticky;
        bottom: 0;

        background: #fff;

        padding: 16px 20px;

        border-top: 1px solid #eee;

        flex-shrink: 0;
    }

    .blog-show-results {

        width: 100%;
        height: 52px;

        border: none;
        border-radius: 12px;

        background: #0098B5;
        color: #fff;

        font-size: 15px;
        font-weight: 600;

        cursor: pointer;
    }
}


/* ==========================================
MOBILE BLOG CARD
FULL WIDTH LIKE DESIGN
========================================== */

@media (max-width:767px){

    /* grid */
    .blog-grid{
        display:grid;
        grid-template-columns:1fr !important;
        gap:24px;
    }

    /* full width */
    .blog-card-link{
        width:100%;
        display:block;
    }

    .blog-card{
        width:100% !important;

        display:flex;
        flex-direction:column;

        border-radius:20px;
        overflow:hidden;

        background:#fff;
    }

    /* image top */
    .blog-image{
        width:100%;
        order:1;
    }

    .blog-thumb{
        width:100%;
        height:240px !important;

        object-fit:cover;
        object-position:center;

        display:block;
    }

    /* content */
    .blog-content{
        width:100%;
        order:2;

        padding:20px;
    }

    /* category */
    .blog-category{
        display:block;

        margin-bottom:12px;

        font-size:12px;
        font-weight:600;
        letter-spacing:.8px;
        text-transform:uppercase;

        color:#0098B5;
    }

    /* title */
    .blog-title{
        font-family:'Urbanist',
        sans-serif;

        font-size:18px !important;
        font-weight:500 !important;
        line-height:28px !important;

        color:#111;

        margin-bottom:12px;
    }

    /* description */
    .blog-description{
        font-family:'Urbanist',
        sans-serif;

        font-size:16px !important;
        font-weight:500;
        line-height:24px !important;

        color:#666;

        margin-bottom:20px;
    }

    /* footer */
    .blog-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;

        margin-top:auto;
    }

    /* meta */
    .blog-meta{
        display:flex;
        align-items:center;
        gap:12px;
        flex-wrap:wrap;
    }

    .blog-meta span{
        font-size:13px;
        color:#0098B5;
    }

    /* arrow */
    .blog-arrow{
        font-size:24px;
        color:#444;
    }
}

/* ===================================================
BODY LOCK
=================================================== */

body.blog-filter-open {
    overflow: hidden;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-89ee1d5 *//* REMOVE HOVER / ACTIVE COLOR */
.blog-filter-trigger,
.blog-filter-trigger:hover,
.blog-filter-trigger:focus,
.blog-filter-trigger:active{
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

/* remove pink text/icon hover */
.blog-filter-trigger:hover span,
.blog-filter-trigger:focus span{
    color:#111 !important;
}

.blog-filter-trigger img{
    transition:none !important;
}

/* --------------------------
DESKTOP DEFAULT
HIDE EVERYTHING
-------------------------- */
.blog-mobile-toolbar,
.blog-filter-overlay,
.blog-filter-drawer {
    display: none;
}


/* ===================================================
TABLET + MOBILE ONLY
=================================================== */

@media (max-width: 1024px) {

    /* --------------------------
    MOBILE / TABLET HEADER
    -------------------------- */
    .blog-mobile-toolbar {
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-bottom: 24px;
    }

    .blog-mobile-title {
        margin: 0;

        font-size: 22px;
        font-weight: 600;
        color: #111;
    }

    .blog-filter-trigger {
        display: flex;
        align-items: center;
        gap: 8px;

        border: none;
        background: transparent;

        cursor: pointer;

        font-size: 14px;
        font-weight: 500;
        color: #111;

        padding: 0;
    }

    .blog-filter-icon{
        width:18px;
        height:18px;
        object-fit:contain;
        display:block;
    }


    /* --------------------------
    OVERLAY
    -------------------------- */
    .blog-filter-overlay {
        display: block;

        position: fixed;
        inset: 0;

        background: rgba(0,0,0,.35);

        opacity: 0;
        visibility: hidden;

        transition: .3s ease;

        z-index: 9998;
    }

    .blog-filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* --------------------------
    DRAWER
    RIGHT SIDE
    -------------------------- */
    .blog-filter-drawer {

        display: flex;
        flex-direction: column;

        position: fixed;

        top: 0;
        right: 0;

        width: 390px;
        max-width: 100%;
        height: 100%;

        background: #fff;

        transform: translateX(100%);
        transition: transform .35s ease;

        z-index: 9999;

        overflow: hidden;
    }

    .blog-filter-drawer.active {
        transform: translateX(0);
    }


    /* --------------------------
    HEADER
    -------------------------- */
    .blog-filter-drawer__header {

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

        padding: 24px 20px;

        border-bottom: 1px solid #eee;

        flex-shrink: 0;
    }

    .blog-filter-drawer__header h3 {
        margin: 0;

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

    .blog-filter-close {

        border: none;
        background: transparent;

        cursor: pointer;

        font-size: 22px;
        color: #111;
    }


    /* --------------------------
    BODY
    -------------------------- */
    .blog-filter-drawer__body {
        flex: 1;
        overflow: hidden;
    }

    .blog-filter-scroll {
        height: 100%;
        overflow-y: auto;

        padding: 20px;

        -webkit-overflow-scrolling: touch;
    }


   /* ==========================================
SELECTED FILTERS
CASE STUDY STYLE
========================================== */

.selected-filters{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-bottom:28px;
}

.selected-filter-tag{
    display:inline-flex;
    align-items:center;
    gap:10px;

    width:fit-content;
    min-height:44px;

    padding:0 14px;

    border:1px solid #D9D9D9;
    border-radius:12px;

    background:#F8F8F8;

    font-size:14px;
    font-weight:400;
    color:#111;

    white-space:nowrap;
}

/* REMOVE BUTTON */
.remove-filter{
    display:flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;

    border:none !important;
    background:transparent !important;

    padding:0;
    margin:0;

    cursor:pointer;

    color:#111 !important;
    font-size:18px;
    line-height:1;

    box-shadow:none !important;
    outline:none !important;
}

/* remove ugly hover */
.remove-filter:hover,
.remove-filter:focus,
.remove-filter:active{
    background:transparent !important;
    color:#111 !important;
    border:none !important;
    box-shadow:none !important;
}
    /* --------------------------
    FOOTER
    STICKY BUTTON
    -------------------------- */
    .blog-filter-drawer__footer {

        position: sticky;
        bottom: 0;

        background: #fff;

        padding: 16px 20px;

        border-top: 1px solid #eee;

        flex-shrink: 0;
    }

    .blog-show-results {

        width: 100%;
        height: 52px;

        border: none;
        border-radius: 12px;

        background: #0098B5;
        color: #fff;

        font-size: 15px;
        font-weight: 600;

        cursor: pointer;
    }
}


/* ==========================================
MOBILE BLOG CARD
FULL WIDTH LIKE DESIGN
========================================== */

@media (max-width:767px){

    /* grid */
    .blog-grid{
        display:grid;
        grid-template-columns:1fr !important;
        gap:24px;
    }

    /* full width */
    .blog-card-link{
        width:100%;
        display:block;
    }

    .blog-card{
        width:100% !important;

        display:flex;
        flex-direction:column;

        border-radius:20px;
        overflow:hidden;

        background:#fff;
    }

    /* image top */
    .blog-image{
        width:100%;
        order:1;
    }

    .blog-thumb{
        width:100%;
        height:240px !important;

        object-fit:cover;
        object-position:center;

        display:block;
    }

    /* content */
    .blog-content{
        width:100%;
        order:2;

        padding:20px;
    }

    /* category */
    .blog-category{
        display:block;

        margin-bottom:12px;

        font-size:12px;
        font-weight:600;
        letter-spacing:.8px;
        text-transform:uppercase;

        color:#0098B5;
    }

    /* title */
    .blog-title{
        font-family:'Urbanist',
        sans-serif;

        font-size:18px !important;
        font-weight:500 !important;
        line-height:28px !important;

        color:#111;

        margin-bottom:12px;
    }

    /* description */
    .blog-description{
        font-family:'Urbanist',
        sans-serif;

        font-size:16px !important;
        font-weight:500;
        line-height:24px !important;

        color:#666;

        margin-bottom:20px;
    }

    /* footer */
    .blog-footer{
        display:flex;
        justify-content:space-between;
        align-items:center;

        margin-top:auto;
    }

    /* meta */
    .blog-meta{
        display:flex;
        align-items:center;
        gap:12px;
        flex-wrap:wrap;
    }

    .blog-meta span{
        font-size:13px;
        color:#0098B5;
    }

    /* arrow */
    .blog-arrow{
        font-size:24px;
        color:#444;
    }
}

/* ===================================================
BODY LOCK
=================================================== */

body.blog-filter-open {
    overflow: hidden;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b57be32 *//* ==========================
DESKTOP >1024
SHOW SIDEBAR
========================== */

@media(min-width:1025px){

    .filter-trigger{
        display:none;
    }

    .filter-overlay{
        display:none;
    }

    #filter-drawer{
        display:block !important;
        position:relative !important;
        left:0 !important;
        width:280px;
        height:auto;
        background:transparent;
        padding:0;
        box-shadow:none;
    }

    .blog-layout{
        display:flex;
        gap:40px;
        align-items:flex-start;
    }

}

/* ==========================
TABLET + MOBILE
HIDE SIDEBAR
========================== */

@media(max-width:1024px){

    .filter-trigger{
        display:flex;
    }

    /* REMOVE LEFT SPACE */
    .blog-sidebar{
        width:0 !important;
        overflow:hidden;
    }

    #filter-drawer{
        position:fixed !important;

        top:0;
        left:-360px;

        width:340px;
        height:100vh;

        background:#fff;

        z-index:9999;

        overflow-y:auto;

        transition:.35s ease;

        padding:24px;

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

    #filter-drawer.active{
        left:0;
    }

}

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

@media(max-width:767px){

    #filter-drawer{
        width:100%;
        left:-100%;
    }

}
/* ==========================
TOP BAR
========================== */

.top-filter-bar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:40px;
}

.blog-page-title{
    margin:0;
    font-size:42px;
    font-weight:700;
}

.filter-trigger{
    display:none;
    align-items:center;
    gap:8px;

    background:none;
    border:none;

    cursor:pointer;
}

/* ==========================
DRAWER
========================== */

.filter-drawer{
    width:280px;
}

.filter-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.35);

    opacity:0;
    visibility:hidden;

    transition:.3s ease;

    z-index:9998;
}

.filter-overlay.active{
    opacity:1;
    visibility:visible;
}

/* ==========================
DESKTOP
========================== */

@media(min-width:1025px){

    .filter-trigger{
        display:none;
    }

    .close-filter,
    .show-results{
        display:none;
    }

}

/* ==========================
TABLET
========================== */

@media(max-width:1024px){

    .filter-trigger{
        display:flex;
    }

    .filter-drawer{

        position:fixed;

        top:0;
        left:-360px;

        width:340px;
        height:100vh;

        background:#fff;

        z-index:9999;

        overflow-y:auto;

        transition:.35s ease;

        padding:24px;
    }

    .filter-drawer.active{
        left:0;
    }

}

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

@media(max-width:767px){

    .filter-drawer{
        width:100%;
        left:-100%;
    }

    .blog-page-title{
        font-size:28px;
    }

}

/* =========================================
BLOG LAYOUT
========================================= */

.blog-layout{
    display:flex;
    gap:40px;
    align-items:flex-start;
}

/* =========================================
SIDEBAR
========================================= */

.blog-sidebar{
    width:280px;
    flex-shrink:0;
}

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

.blog-filter-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:28px;
}

/* TITLE */

.filter-title{
    font-size:18px;
    font-weight:700;
    color:#111111;

    margin:0;
}

/* CLEAR BUTTON */

#clear-filters{
    background:none;
    border:none;

    font-size:14px;
    font-weight:500;

    color:#068D9D !important;

    cursor:pointer;

    transition:.3s ease;
}


/* =========================================
COUNT
========================================= */

.count{
    opacity:.7;
    font-weight:500;
}

/* =========================================
FILTER ITEM SPACING
========================================= */

.filter-item{
    display:flex;
    align-items:flex-start;

    gap:12px;

    margin-bottom:24px;

    cursor:pointer;
}

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

.blog-content-area{
    flex:1;
}

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

.blog-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;

    
}

/* =========================================
CARD LINK
========================================= */

.blog-card-link{
    text-decoration:none;
    display:block;
    height:100%;
}

/* =========================================
BLOG CARD
========================================= */

.blog-card{
    background:#ffffff;
    border-radius:16px;
    overflow:hidden;
    border:1px solid #ececec;

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

    display:flex;
    flex-direction:column;
    height:100%;

    cursor:pointer;
}

.blog-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

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

.blog-image{
    position:relative;
    overflow:hidden;
}

.blog-thumb{
    width:100%;
    height:272px !important;
    object-fit:cover;
    display:block;

    transition:transform .5s ease;
}

.blog-card:hover .blog-thumb{
    transform:scale(1.06);
}

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

.blog-content{
    padding:20px;
    display:flex;
    flex-direction:column;
    flex:1;
}

/* =========================================
CATEGORY
========================================= */

.blog-category{
    font-size:11px;
    font-weight:500;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#068D9D !important;

    display:inline-block;
}

/* =========================================
TITLE
========================================= */

.blog-title{
    font-size:24px;
    line-height:1.4;
    font-weight:600;
    color:#111111;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* =========================================
DESCRIPTION
========================================= */

.blog-description{
    font-size:15px;
    line-height:1.8;
    color:#666666;

    margin-bottom:24px;

    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;

    flex-grow:1;
}

/* =========================================
FOOTER
========================================= */

.blog-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;

    border-top:1px solid #f1f1f1;

    padding-top:18px;
    margin-top:auto;
}

/* =========================================
META
========================================= */

.blog-meta{
    display:flex;
    align-items:center;
    gap:12px;
    flex-wrap:wrap;
}

/* META ITEM */

.blog-meta span{
    display:flex;
    align-items:center;
    gap:6px;

    font-size:13px;
    color:#068D9D;
    line-height:1;
}

/* META ICON */

.blog-meta img{
    width:15px;
    height:15px;
    object-fit:contain;
}

/* =========================================
ARROW
========================================= */

.blog-arrow{
    width:24px;
    height:24px;
    
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:18px;
    color:#068D9D;

    transition:all .3s ease;
}

/*.blog-card:hover .blog-arrow{*/
/*    background:#068D9D;*/
/*    border-color:#00a896;*/
/*    color:#ffffff;*/

/*    transform:translateX(5px);*/
/*}*/

/* ==========================================
TOPBAR (MOBILE/TABLET ONLY)
========================================== */

.mobile-filter-topbar{
    display:none;
    justify-content:space-between;
    align-items:center;
    margin-bottom:24px;
}

.blog-page-title{
    font-size:28px;
    font-weight:700;
    margin:0;
}

.filter-trigger{
    display:flex;
    align-items:center;
    gap:8px;

    background:none;
    border:none;

    font-size:15px;
    cursor:pointer;
}

/* ==========================================
SEARCH
========================================== */

.drawer-search{
    margin-bottom:24px;
}

#category-search{
    width:100%;
    height:50px;
    border:1px solid #ddd;
    border-radius:12px;
    padding:0 16px;
}

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

#close-filters{
    background:none;
    border:none;
    font-size:22px;
    cursor:pointer;
}

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

.filter-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.35);

    opacity:0;
    visibility:hidden;

    transition:.3s ease;
    z-index:9998;
}

.filter-overlay.active{
    opacity:1;
    visibility:visible;
}

/* ==========================================
DESKTOP >1024
Sidebar visible
========================================== */

@media(min-width:1025px){

    .mobile-filter-topbar,
    #close-filters,
    .show-results-btn,
    .filter-overlay{
        display:none !important;
    }

    #filter-drawer{
        position:relative;
        width:280px;
        left:0;
        top:0;
        height:auto;
        background:transparent;
        padding:0;
        box-shadow:none;
    }

}

/* ==========================================
TABLET <1024
Drawer Mode
========================================== */

@media(max-width:1024px){

    .mobile-filter-topbar{
        display:flex;
    }

    #filter-drawer{
        position:fixed;

        top:0;
        left:-360px;

        width:340px;
        height:100vh;

        background:#fff;

        z-index:9999;

        overflow-y:auto;

        padding:24px;

        transition:.35s ease;

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

    #filter-drawer.active{
        left:0;
    }

}

/* ==========================================
MOBILE <767
Full Width Drawer
========================================== */

@media(max-width:767px){

    #filter-drawer{
        width:100%;
        left:-100%;
    }

    .blog-page-title{
        font-size:24px;
    }

}/* End custom CSS */