/* ======================================================
   Content Sections
====================================================== */

/* No bottom margin: the space below a section is owned by whatever contains it
 * (Elementor section padding, or the template's own rhythm), so carrying it here
 * stacked a second gap on top of that. */
.cme-section{
    margin:0;
}

.cme-section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:35px;
    gap:20px;
}

.cme-section-title{
    font-family: Onest, sans-serif;
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
    line-height: 1.1;
    font-weight: 800;
    color: var(--ies-navy, #11294b);
    margin: 0;
}

/* Section / card buttons: theme ies-buttons.css (.ies-btn--outline / --text-icon) */

/* ======================================================
   Grid
====================================================== */

.cme-cards{
    display:grid;
    grid-template-columns:repeat(var(--cme-columns, 3), minmax(0,1fr));
    gap:30px;
}

/* ======================================================
   Card
====================================================== */

.cme-equal-height .cme-card,
.cme-card{

    display:flex;
    flex-direction:column;

    background:#fff;
    border: 1px solid rgba(17, 41, 75, 0.08);
    border-radius:20px;

    overflow:hidden;

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

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

    height:100%;

}

.cme-card:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(0,0,0,.12);

}

/* ======================================================
   Image
====================================================== */

.cme-card-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.4s;

}

.cme-card:hover img{

    transform:scale(1.05);

}
.cme-card-image{

    display:block;
    aspect-ratio:var(--cme-image-ratio,16/10);
    overflow:hidden;

}
/* ======================================================
   Body
====================================================== */

.cme-equal-height .cme-card-body,
.cme-card-body{

    display:flex;
    flex-direction:column;
    flex:1 1 auto;
    padding:30px;
    gap: 0;

}

/* Match blog single related-card typography */
.cme-card-category{
    display:block;
    margin: 0 0 10px;
    font-family: Onest, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.16px;
    text-transform: none;
    color: var(--ies-primary-dark, #4D4285);
}

.cme-category-dot{
    display: none;
}

.cme-card-title{
    margin: 0 0 20px;
    font-family: Onest, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--ies-navy-text, #11294B);
}

.cme-card-title a{
    font-family: Onest, sans-serif;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%;
    color: var(--ies-navy-text, #11294B);
    text-decoration: none;
}

.cme-card-title a:hover,
.cme-card-title a:focus-visible{
    color: var(--ies-primary, #5D43DE);
}

.cme-card-date{
    display: block;
    margin: 0;
    font-family: Onest, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--ies-navy, #11294b);
}

.cme-card-excerpt{
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(17, 41, 75, 0.75);
}

.cme-equal-height .cme-card-footer,
.cme-card-footer{
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-top: 30px;
}

.cme-reading-time{
    font-size: 13px;
    font-weight: 500;
    color: rgba(17, 41, 75, 0.65);
    letter-spacing: 0;
}


/* ======================================================
   Tablet
====================================================== */

@media(max-width:1024px){

   /*  .cme-cards{

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

    } */

}

/* ======================================================
   Mobile
====================================================== */

@media(max-width:767px){

    .cme-section{

        margin:45px 0 0;

    }
    .cme-section-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .cme-section-title{

        font-size:28px;

    }

   /*  .cme-cards{

        grid-template-columns:1fr;

    } */

    .cme-card-body{

        padding:22px;

    }

    .cme-card-title{

        font-size:22px;

    }

}
.cme-dot-circle{
    border-radius:50%;
}

.cme-dot-square{
    border-radius:0;
}

.cme-dot-rounded{
    border-radius:4px;
}

.cme-dot-diamond{
    transform:rotate(45deg);
}
/*=========================================
= Toolbar
=========================================*/

.cme-toolbar{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-bottom: var(--ies-section-py);
    flex-wrap:wrap;
}

.cme-search{
    flex:0 0 300px;
    width:300px;
    max-width:300px;
}

.cme-category-filter{
    flex:0 0 220px;
    width:220px;
}
/*=========================================
= Search
=========================================*/

.cme-search-input{
    width:100%;
    height:48px;
    padding:0 16px;
    border:1px solid var(--ies-primary-lighter, #D2D1F1);
    border-radius: var(--ies-input-radius, 10px);
    box-sizing:border-box;
    box-shadow: none;
    outline: none;
    background-color: #fff;
    color: var(--ies-navy, #11294B);
    font-family: var(--ies-font-body, Onest, sans-serif);
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
}

.cme-search-input:focus{
    border-color: var(--ies-primary, #5D43DE);
    box-shadow: none;
}
/*=========================================
= Category Filter
=========================================*/

.cme-category-select{
    width:100%;
    height:48px;
    padding:0 36px 0 16px;
    border:1px solid var(--ies-primary-lighter, #D2D1F1);
    border-radius: var(--ies-input-radius, 10px);
    box-sizing:border-box;
    box-shadow: none;
    outline: none;
    background-color: #fff;
    color: var(--ies-navy, #11294B);
    font-family: var(--ies-font-body, Onest, sans-serif);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: var(--ies-nav-chevron-down);
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 7px;
    transition: border-color 0.2s ease;
}

.cme-category-select:focus{
    border-color: var(--ies-primary, #5D43DE);
    box-shadow: none;
}

@media(max-width:1024px){

    .cme-search,
    .cme-category-filter{

        width:100%;

        max-width:100%;

    }

}
@media(max-width:767px){

    .cme-toolbar{
        flex-direction:column;
        align-items:stretch;
    }

    
}
/*=========================================
= Pagination
=========================================*/

.cme-pagination{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    margin-top:50px;
    flex-wrap:wrap;
}

.cme-pagination a,
.cme-pagination span{
    width:42px;
    height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--ies-navy, #11294B);
    font-family: var(--ies-font-body, Onest, sans-serif);
    font-size:15px;
    font-weight:600;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
    box-sizing:border-box;
}

.cme-pagination a:hover,
.cme-pagination a:focus,
.cme-pagination .current{
    background: var(--ies-navy, #11294B);
    color: var(--ies-white, #fff);
    text-decoration: none;
}

.cme-pagination .dots{
    border:none;
    background:transparent;
    color: var(--ies-navy, #11294B);
    width:auto;
    padding:0 5px;
}

.cme-pagination .prev,
.cme-pagination .next{
    font-size:18px;
    font-weight:700;
}
@media(max-width:767px){

    .cme-pagination{

        gap:8px;

        margin-top:35px;

    }

    .cme-pagination a,
    .cme-pagination span{

        width:36px;

        height:36px;

        font-size:14px;

    }

}
/*=========================================
= Section Button Icon
=========================================*/

.cme-section-link{

    display:inline-flex;

    align-items:center;

    gap:8px;

}

.cme-section-btn-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:16px;

    height:16px;

}
.cme-toolbar .cme-search,.cme-toolbar .cme-category-filter {
    width: 37.5%;
    max-width: 100%;
    flex: 0 0 37.5%;
}

.cme-toolbar {
    gap: 40px;
}
.cme-toolbar .cme-search input.cme-search-input[type=search] {
	color: var(--ies-navy, #11294B);
    border-radius: var(--ies-input-radius, 10px);
    background-color: #fff;
    padding: 12px 16px;
    box-shadow: none;
    border: 1px solid var(--ies-primary-lighter, #D2D1F1);
}
.cme-toolbar .cme-search input.cme-search-input[type=search]::placeholder {
    color: var(--ies-navy, #11294B);
}

.cme-toolbar .cme-category-select {
    border-radius: var(--ies-input-radius, 10px);
    padding: 12px 36px 12px 12px;
    box-shadow: none;
}
.cme-section-btn-icon svg{

    width:16px;

    height:16px;

    fill:currentColor;

}

/*blog mobile css 24-07-2026 sratr*/
.cme-equal-height .cme-card {
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.153327) !important;
}
.cme-posts-wrapper a.cme-card-image {
    position: relative;
    height: 216px;
    overflow: hidden;
}
.cme-posts-wrapper a.cme-card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    object-fit: cover;
	height:100%;
}
.cme-posts-wrapper .cme-card:hover {
    transform: unset;
}
.blog-filter-content .cme-equal-height .cme-card-footer .cme-card-btn {
    padding: 0;
}
.cme-section .cme-card-body {
    row-gap: 0;
}
.cme-section .cme-pagination a {
    text-decoration: none;
}
@media(max-width:991px){
.cme-cards {
    column-gap: 15px;
}
}
@media(max-width:767px){
	.cme-search,
    .cme-category-filter{
        width:100%;
        max-width:100%;
        flex:0 0 100%;
    }
	.cme-section .cme-cards {
		row-gap: 20px;
	}
	.cme-toolbar .cme-search, .cme-toolbar .cme-category-filter {
    width: 100%;
    flex: 1;
	}

	.cme-toolbar {
		row-gap: 20px;
	}
.cme-cards {
    grid-template-columns: 1fr;
}
}
/*blog mobile css 24-07-2026 end*/
.cme-section-header{
margin-bottom:0;
}

.ies-category {
    text-transform: uppercase;
}

.button-wrapper .text-link {
    margin: 0;
}

.button-wrapper {
    gap: 20px;
    flex-wrap: wrap;
}
cme-section-header {
    margin-bottom: 0;
}
.resource-blog-section .cme-section-header {
    margin-bottom: 30px;
}

body {
-webkit-font-smoothing: antialiased;
}
.blog-w-o-filter-content .cme-section-header {
    margin-bottom: 30px;
}

.ies-tabber-layout:has(.ies-top-tabber) {
    margin: 0 -20px;
}

/* Beat Elementor widget + Customizer overrides (blog cards → related-card look) */
.elementor .cme-equal-height .cme-card,
.elementor .cme-card,
.cme-equal-height .cme-card {
    border-radius: 20px !important;
    border: 1px solid rgba(17, 41, 75, 0.08);
    background: #fff;
}

.elementor .cme-card-body,
.elementor .cme-section .cme-card-body {
    border-radius: 0 0 20px 20px !important;
    padding: 30px !important;
}

.elementor .cme-card-category {
    margin: 0 0 10px !important;
    font-family: Onest, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    letter-spacing: 0.16px !important;
    text-transform: none !important;
    color: var(--ies-primary-dark, #4D4285) !important;
}

.elementor .cme-card-title,
.elementor .cme-card-title a {
    font-family: Onest, sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 120% !important;
    color: var(--ies-navy-text, #11294B) !important;
    text-decoration: none !important;
}

.elementor .cme-card-title a:hover,
.elementor .cme-card-title a:focus-visible {
    color: var(--ies-primary, #5D43DE) !important;
}

.elementor .cme-card-date,
.cme-card .cme-card-date {
    font-family: Onest, sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: var(--ies-navy, #11294b) !important;
}

.elementor .cme-equal-height .cme-card-footer {
    margin-top: auto !important;
    padding-top: 30px !important;
}