@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
    --container-width: 1440px;
    --container-padding: 60px;
    --container: min(calc(100% - var(--container-padding) * 2), var(--container-width));
    --container-spacing: max(calc((100% - var(--container-width)) / 2), var(--container-padding));
    --container-spacing-minus: max(calc((-100% + var(--container-width)) / 2), var(--container-padding));
    --container-fluid-spacing: 54px;
}

/******************************
TYPOGRAPHY
******************************/
:is(.blog-card, .blog-details-wrap) h1{
    font-family: "Playfair Display", serif;
    font-size: 77px;
    font-weight: 700;
    line-height: 1.2;
}
:is(.blog-card, .blog-details-wrap) h2{
    font-family: "Playfair Display", serif;
    font-size: 48px;
    font-weight: 400;
    line-height: 1.2;
}
:is(.blog-card, .blog-details-wrap) h3{
    font-family: "Playfair Display", serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
}
:is(.blog-card, .blog-details-wrap) h5{
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
}
:is(.blog-card, .blog-details-wrap) h6{
    font-family: "Playfair Display", serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}
@container body (max-width: 1280px) {
    :is(.blog-card, .blog-details-wrap) h1{
        font-size: 55px;
    }
    :is(.blog-card, .blog-details-wrap) h3{
        font-size: 24px;
    }
    :is(.blog-card, .blog-details-wrap) h5{
        font-size: 18px;
    }
    :is(.blog-card, .blog-details-wrap) h6{
        font-size: 16px;
    }
}
@container body (max-width: 767px) {
    :is(.blog-card, .blog-details-wrap) h1{
        font-size: 40px;
    }
    :is(.blog-card, .blog-details-wrap) h3{
        font-size: 22px;
    }
    :is(.blog-card, .blog-details-wrap) h5{
        font-size: 16px;
    }
    :is(.blog-card, .blog-details-wrap) h6{
        font-size: 14px;
    }
}
@container body (max-width: 525px) {
    :is(.blog-card, .blog-details-wrap) h1{
        font-size: 30px;
    }
    :is(.blog-card, .blog-details-wrap) h3{
        font-size: 22px;
    }
    :is(.blog-card, .blog-details-wrap) h5{
        font-size: 16px;
    }
    :is(.blog-card, .blog-details-wrap) h6{
        font-size: 14px;
    }
}
/******************************
BLOG LISTING PAGE
******************************/
body:has(.blogs-display-list){
    background-color: var(--blog-listing-outer-background-colour) !important;
}
.blogs-display-list{
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 2fr));
    grid-gap: 35px;
}
.nt_page-layout-content .blogs-display-list{
    padding-left: 0;
}
.blogs-display-list li{
    all: unset;
}
.blogs-display-list *{
    margin: 0;
    padding: 0;
}
/******************************
FILTER
******************************/
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form > div){
    /* background-color: #fff; */
    display: flex;
    align-items: center;
    padding: 6px;
    margin-bottom: 30px;
    grid-gap: 15px 15px;
}
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form)  .form-actions{
    display: flex;
    align-items: center;
    grid-gap: 15px 15px;
}
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) .form-item{
    max-width: 290px;
}
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) .form-item label{
    display: none;
}
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) input:not([type="submit"], [type="button"], [type="radio"], [type="checkbox"]){
    width: 100%;
    font-size: 12px;
    color: #000;
    border: 1px solid var(--blog-listing-filter-selected-colour);
    border-radius: 0;
    outline: 0;
    padding: 13px 15px;
    min-height: auto;
}
body:has(.version-3) :is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) input:not([type="submit"], [type="button"], [type="radio"], [type="checkbox"]),
.formWidgetBody:has(.version-3) :is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) input:not([type="submit"], [type="button"], [type="radio"], [type="checkbox"]){
    border-radius: 40px;
}
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) input:not([type="submit"], [type="button"], [type="radio"], [type="checkbox"])::placeholder{
    color: #000;
}
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) :is(.button, .form-submit){
    min-width: 100px;
    justify-content: center;
    font-size: 12px;
    color: var(--blog-listing-filter-selected-text-colour);
    font-weight: 400;
    border: 1px solid var(--blog-listing-filter-selected-colour);
    border-radius: 0;
    outline: 0;
    padding: 10px 15px;
    height: auto;
    min-height: auto;
    background-color: var(--blog-listing-filter-selected-colour);
    margin: 0;
    text-align: center;
    transition: all 0.3s;
}
body:has(.version-3) :is(.filter-for-shared-blogslist) :is(.button, .form-submit),
.formWidgetBody:has(.version-3) :is(#wpc-entity-view-blog-filter-form) :is(.button, .form-submit){
    border-radius: 40px;
}
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) :is(.button, .form-submit):hover{
    font-weight: 400;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--blog-listing-filter-selected-hover-colour);
    color: var(--blog-listing-filter-selected-hover-text-colour);
    background-color: var(--blog-listing-filter-selected-hover-colour);
}
:is(.filter-for-shared-blogslist, #wpc-entity-view-blog-filter-form) .captcha {
    display: none;
}
/******************************
CARD
******************************/
:root{
    --blog-bg-color:#FCFAFA;
    --blog-secondary-color:var(--blog-secondary-colour);
    --blog-date-color: var(--blog-secondary-colour);
    --blog-title-color:var(--blog-primary-colour);
    --blog-text-color:#101010;
    --blog-light-bg:#EFEFEF;
    --blog-btn-color:var(--blog-primary-colour);
}
.blog-card{
    font-family: "Inter", sans-serif;
    background-color: var(--blog-listing-background-colour, #FCFAFA);
    color: var(--blog-text-color);
    position: relative;
    height: 100%;
}
.blog-card figure{
    background-color: transparent;
}
.blog-card figure img{
    width: 100%;
    aspect-ratio: 490/470;
    object-fit: cover;
}
.blog-card .blog-card-text{
    padding-block: 25px 40px;
    padding-inline: 20px 50px;
}
.blog-card h3{
    color: var(--blog-listing-title-colour);
}
.blog-card h3 a{
    text-decoration: none;
    color: var(--blog-listing-title-colour);
    transition: all 0.3s;
    outline: 0;
}
.blog-card h3,
.blog-card h3 a:hover{
    color: var(--blog-listing-title-hover-colour);
}
.blog-card .date{
    font-size: 9px;
    font-weight: 400;
    color: var(--blog-listing-date-colour, #0482A0)  ;
    line-height: 1;
    margin-bottom: 5px;
}
.blog-card .summary{
    margin-top: 13px;
    color: var(--blog-listing-summary-text-colour);
}
.blog-card .summary p{
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    color: var(--blog-listing-summary-text-colour);
}
.blog-card .blog-btn-wrap{
    display: none;
}
/*VERSION 1*/
.blogs-display-list:has(.blog-card.version-1){
    display: block;
    columns: 2; 
    column-gap: 35px;
}
.blogs-display-list:has(.blog-card.version-1) li{
    display: block;
   break-inside: avoid;     /* modern browsers */
  page-break-inside: avoid;/* older Firefox */
  -webkit-column-break-inside: avoid; /* Safari/Chrome */
  margin-bottom: 35px;
}

.blog-card.version-1 figure img{
    aspect-ratio: 524/586;
}
.blogs-display-list:has(.blog-card.version-1) li:nth-child(3n+2) .blog-card.version-1 figure img,
.blogs-display-list:has(.blog-card.version-1) li:nth-child(3n+3) .blog-card.version-1 figure img{
    aspect-ratio: 524/317;
}
.blog-card.version-1 .blog-card-text h3{
    font-size: 22px;
}
/*VERSION 2*/
.blog-card.version-2{
    background-color: transparent;
}
.blog-card.version-2 .blog-card-text{
    padding-inline: 0;
}
/*VERSION 3*/
.blog-card.version-3{
    --blog-radius:40px;
    background-color: var(--blog-listing-background-colour);
    padding: 25px 25px 0;
    border-top-right-radius: var(--blog-radius);
    border-bottom-left-radius: var(--blog-radius);
}
.blog-card.version-3 figure img{
    border-radius: var(--blog-radius);
    border-top-left-radius: 0;
}
.blog-card.version-3 .blog-card-text{
    padding-inline: 5px 90px;
}
.blog-card.version-3 .blog-btn-wrap {
    width: 85px;
    height: 85px;
    display: flex;
    justify-content: center;
    background-color: #fff;
    padding-top: 7px;
    padding-left: 7px;
    position: absolute;
    right: 0;
    bottom: 0;
}
.blog-card.version-3 .blog-btn-wrap::after{
    content: '';
    display: block;
    position: absolute;
    top: 7px;
    left: 7px;
    right: 0;
    bottom: 0;
    background-color: var(--blog-listing-background-colour);
    border-radius: 50px;
    border-top-left-radius: 0;
}
.blog-card.version-3 .blog-btn-wrap span:nth-child(1){
    position: absolute;
    top: -50px;
    right: 0;
    width: 50px;
    height: 50px;
    background: inherit;
}
.blog-card.version-3 .blog-btn-wrap span:nth-child(1)::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-color: var(--blog-listing-background-colour);
    border-bottom-right-radius: var(--blog-radius);
}
.blog-card.version-3 .blog-btn-wrap span:nth-child(2){
    position: absolute;
    left: -50px;
    bottom: 0;
    width: 50px;
    height: 50px;
    background: inherit;
}
.blog-card.version-3 .blog-btn-wrap span:nth-child(2)::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    background-color: var(--blog-listing-background-colour);
    border-bottom-right-radius: var(--blog-radius);
}
.blog-card.version-3 .blog-btn-wrap a{
    width: 50px;
    height: 50px;
    margin: auto;
    display: inline-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #fff;
    background-color: var(--blog-listing-button-colour, #223C4E);
    border: 1px solid var(--blog-listing-button-colour, #223C4E);
    border-radius: 50%;
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.blog-card.version-3 .blog-btn-wrap a:hover{
    background-color: var(--blog-listing-button-hover-colour);
    border: 1px solid var(--blog-listing-button-colour, #223C4E);
    color: var(#fff, #0482A0);
}
/* VERSION 4 */
.blog-card.version-4{
    background-color: #fff;
    padding: 25px 25px 0;
}
.blog-card.version-4 .blog-card-text{
    padding-inline: 5px 90px;
}
.blog-card.version-4 .blog-btn-wrap {
    width: 85px;
    height: 85px;
    display: flex;
    justify-content: center;
    background-color: #efefef;
    padding-top: 15px;
    padding-left: 15px;
    position: absolute;
    right: 0;
    bottom: 0;
}
.blog-card.version-4 .blog-btn-wrap a{
    width: 100%;
    height: 100%;
    margin: auto;
    display: inline-flex;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    color: #fff;
    background-color: var(--blog-btn-color, #223C4E);
    border: 1px solid var(--blog-btn-color, #223C4E);
    text-decoration: none;
    position: relative;
    z-index: 1;
    transition: all 0.3s;
}
.blog-card.version-4 .blog-btn-wrap a:hover{
    background-color: #fff;
    color: var(--blog-btn-color, #0482A0);
}
/******************************
CONTAINER
******************************/
/* .blogs-display-list:has(.blog-card.version-1){
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 35px;
    -moz-column-gap: 35px;
    column-gap: 35px;
    -webkit-column-fill: auto;
    -moz-column-fill: auto;
    column-fill: auto;
}
.blogs-display-list:has(.blog-card.version-1) li{
    break-inside: avoid-column;
} */

/* VERSION 2 */
body:has(.blog-card) .page-wrapper{
    background-color: transparent !important;
}
/* VERSION 4 */
body:has(.blog-card.version-4) .page-wrapper{
    background-color: transparent;
    padding: 15px;
}
/******************************
BLOG DETAILS
******************************/
body:has(.blog-details-wrap){
    background-color: var(--blog-detail-outer-background-colour) !important;
}
body:has(.blog-details-wrap.version-3){
    background-color: var(--blog-detail-background-colour) !important;
}
body:has(.blog-details-wrap) .page-wrapper{
    background-color: transparent !important;
}
body:is(.user-logged-in) .layout-main-wrapper:has(.blog-details-wrap){
    padding: 0;
}
.blog-details-wrap{
    font-family: "Inter", sans-serif;
    color: var(--blog-text-color);
}
.blog-details-wrap *{
    margin: 0;
}
.layout-main .main-content .container:has(.blog-details-wrap){
    max-width: unset;
    padding-inline: 0;
}
.blog-details-wrap p{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.64;
}
.blog-details-wrap h1{
    color: var(--blog-detail-title-colour, #101010);
}
.blog-details-wrap .blog-summary-text :is(h2, h3, h4, h5, h6, p){
    color: var(--blog-detail-summary-text-colour);  
}
.blog-details-summary-text :is(h2, h3, h4, h5, h6, p){
    color: var(--blog-detail-details-summary-text-colour);
}
/*article*/
.blog-details-wrap article{
    background-color: var(--blog-detail-body-background-colour);
    padding: 25px;
}
.blog-details-wrap article > :where(h1,h2,h3,h4,h6,h6):not(:last-child){
    margin-block: 0 15px;
}
.blog-details-wrap article > *:not(:last-child, h1,h2,h3,h4,h6,h6){
    margin-bottom: 15px;
}
.blog-details-wrap article :is(p, li){
    color: var(--blog-detail-text-colour);
}
.blog-details-wrap article :is(p, li) a{
    color: var(--blog-detail-link-colour);
}
.blog-details-wrap article :is(p, li) a:hover{
    color: var(--blog-detail-link-hover-colour);
}
.blog-details-wrap article blockquote{
    padding: 5px 0 5px 17px;
    border-left: 2px solid var(--blog-secondary-color);
    color: var(--blog-detail-paragrah-text-colour);
}
.blog-details-wrap article blockquote p{
    color: var(--blog-detail-paragrah-text-colour);
    font-weight: 500;
}
/*blog publish info*/
.blog-publish-info{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 37px;
}
.blog-publish-info > div{
    max-width: 106px;
    flex: 1;
    padding-top: 9px;
    border-top: 1px solid var(--blog-detail-details-line-colour);
}
.blog-publish-info :where(span, b){
    display: block;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--blog-detail-details-text-colour);
}
/******************************
BLOG AUTHOR CARD
******************************/
.blog-author-card{
    background-color: var(--blog-detail-author-background-colour);
    padding: 15px;
}
.blog-author-card img{
    width: 100%;
}
.blog-author-card .blog-author-info{
    padding-top: 18px;
}
.blog-author-card .blog-author-info h6{
    margin-bottom: 10px;
    color: var(--blog-detail-author-title-colour);
}
.blog-author-card .blog-author-info h6 a{
    color: var(--blog-detail-author-title-colour);
}
.blog-author-card .blog-author-info h6:hover,
.blog-author-card .blog-author-info h6 a:hover{
    color: var(--blog-detail-author-title-hover-colour);
}
.blog-author-card .blog-author-info p{
    font-size: 11px;
    line-height: 1.6;
    font-weight: 300;
    color: var(--blog-detail-author-summary-text-colour);
}
/*hr*/
.blog-author-card.blog-author-card-hr{
    display: flex;
    grid-gap: 30px;
}
.blog-author-card.blog-author-card-hr .blog-author-image{
    width: 100%;
    max-width: 158px;
    background-color: #fff;
}
.blog-author-card.blog-author-card-hr .blog-author-info{
    padding-top: 0;
}
/*rounded*/
.blog-author-card.blog-author-card-hr.rounded{
    border-radius: 45px;
    border-top-left-radius: 0;
}
.blog-author-card.blog-author-card-hr.rounded .blog-author-image{
    border-radius: 45px;
    border-top-left-radius: 0;
    overflow: hidden;
}
/*social links*/
.blog-social-links{
    display: flex;
    flex-wrap: wrap;
    grid-gap: 15px 20px;
}
.blog-social-links a{
    font-size: 18px;
    color: var(--blog-detail-author-social-media-colour);
    text-decoration: unset;
    transition: all 0.3s;
}
.blog-social-links a:hover{
    color: var(--blog-detail-author-social-media-hover-colour);
}
/**/
.blog-author-card .blog-social-links{
    margin-top: 27px;
}
.blog-author-card.blog-author-card-hr .blog-social-links{
    padding-top: 20px;
    border-top: 1px solid var(--blog-secondary-color);
}
@container body (max-width: 767px) {
    .blog-author-card.blog-author-card-hr .blog-author-image{
        width: 100px;
    }
    .blog-author-card.blog-author-card-hr.rounded .blog-author-image{
        border-radius: 30px;
        border-top-left-radius: 0;
    }
}
/******************************
BLOG DETAILS : V1
******************************/
.blog-details-wrap.version-1 .blog-details-header{
    display: flex;
    flex-wrap: wrap;
    padding-left: var(--container-spacing);
}
.blog-details-wrap.version-1 .blog-details-header .blog-block-left{
    width: 50%;
    padding-block: 119px 50px;
    padding-right: 100px;
}
.blog-details-wrap.version-1 .blog-details-header .blog-block-left h1{
    margin-bottom: 30px;
}
.blog-details-wrap.version-1 .blog-details-header .blog-block-right{
    width: 50%;
}
.blog-details-wrap.version-1 .blog-details-header .blog-block-right img{
    width: 100%;
}
/*row2*/
.blog-details-wrap.version-1 .blog-details-row2{
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    padding-left: var(--container-spacing);
}
.blog-details-wrap.version-1 .blog-details-row2 .blog-block-left{
    width: 50%;
}
.blog-details-wrap.version-1 .blog-details-row2 .blog-block-right{
    width: 50%;
    padding-right: max(calc((100vw - var(--container-width)) / 2), var(--container-padding));
}
/*body*/
.blog-details-wrap.version-1 .blog-details-body{
    margin-top: 62px;
    padding-inline: var(--container-spacing);
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    grid-gap: 15px 16px;
}
.blog-details-wrap.version-1 .blog-details-body article{
    width: calc(100% - 240px - 16px);
}
.blog-details-wrap.version-1 .blog-author-card{
    width: 240px;
}
/******************************
BLOG DETAILS : V2
******************************/
.blog-details-wrap.version-2 .blog-details-header{
    padding-block: 40px;
    position: relative;
    padding-inline: var(--container-spacing);
    text-align: center;
    color: #fff;
}
.blog-details-wrap.version-2 .blog-details-header figure{
    margin-top: 43px;
}
.blog-details-wrap.version-2 .blog-details-header figure img{
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}
.blog-details-wrap.version-2 .blog-details-header .publish-date{
    font-size: 12px;
    color: var(--blog-date-color);
}
.blog-details-wrap.version-2 .blog-details-header::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: var(--blog-title-color);
    z-index: -1;
}
/*body*/
.blog-details-wrap.version-2 .blog-details-body{
    padding-block: 43px 0;
    padding-inline: var(--container-spacing);
    display: flex;
    align-items: flex-start;
    grid-gap: 30px 60px;
}
.blog-details-wrap.version-2 .blog-details-body article{
    padding: 0;
    background-color: transparent;
}
.blog-details-wrap.version-2 .blog-author-card{
    padding: 18px 0;
    max-width: 154px;
    background-color: transparent;
    text-align: center;
    border-block: 1px solid var(--blog-secondary-color);
}
.blog-details-wrap.version-2 .blog-author-card .blog-author-image img{
    max-width: 78px;
    margin-inline: auto;
    aspect-ratio: 1;
    border-radius: 50%;
}
.blog-social-links a {
    font-size: 14px;
}
.blog-details-wrap.version-2 .blog-social-links {
    margin-top: 12px;
    justify-content: center;
    grid-gap: 10px 15px;
}
/******************************
BLOG DETAILS : V3
******************************/
.blog-details-wrap.version-3 .blog-details-header{
    position: relative;
    padding-inline: var(--container-spacing);
    padding-top: 45px;
    position: relative;
}
.blog-details-wrap.version-3 .blog-details-header::after{
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--blog-detail-outer-background-fade-colour);
    opacity: 0.25;
    z-index: -1;
}
.blog-details-wrap.version-3 .blog-details-header > img{
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    object-fit: cover;
    z-index: -1;
}
.blog-details-wrap.version-3 .blog-details-header figure{
    background-color: transparent !important;
    grid-area: 1 / 1;
}
.blog-details-wrap.version-3 .blog-details-header figure img{
    width: 100%;
    max-height: 600px;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 45px;
    border-top-right-radius: 45px;
}
.blog-details-wrap.version-3 .blog-details-header .blog-details-header-top{
    position: relative;
    display: grid;
}
.blog-details-wrap.version-3 .blog-details-header-text{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* position: absolute;
    inset: 0; */
    z-index: 1;
    padding-block: 20px;
    padding-inline: 55px;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 20%, var(--blog-detail-title-fade-colour, #000) 100%);
    color: #fff;
    grid-area: 1 / 1;
}
.blog-details-wrap.version-3 .blog-details-header-text .blog-publish-info{
    margin-top: 16px;
    grid-gap: 5px;
}
.blog-details-wrap.version-3 .blog-details-header-text .blog-publish-info :where(span, b){
    color: var(--blog-detail-date-and-author-colour);
}
.blog-details-wrap.version-3 .blog-details-header-bottom{
    width: var(--container);
    margin-inline: auto;
    background-color: var(--blog-detail-summary-background-colour);
    padding-block: 30px;
    padding-inline: 55px;
    border-bottom-left-radius: 45px;
    border-bottom-right-radius: 45px;
    color: var(--blog-detail-summary-text-colour);
}
.blog-details-wrap.version-3 .blog-details-body{
    padding-block: 37px 0;
    padding-inline: calc(var(--container-spacing) + 55px);
}
.blog-details-wrap.version-3 .blog-details-body article{
    padding: 0;
    background-color: transparent;
}
.blog-details-wrap.version-3 .blog-author-card{
    margin-top: 53px;
}
@container body (max-width: 767px) {
    .blog-details-wrap.version-3 .blog-details-header-text{
        padding-inline: 15px;   
    }
    .blog-details-wrap.version-3 .blog-details-body{
        padding-inline: calc(var(--container-spacing) + 15px);
    }
}
/******************************
BLOG DETAILS : V4
******************************/
.blog-details-wrap.version-4 .blog-details-header{
    padding-inline: var(--container-spacing);
    display: flex;
    flex-wrap: wrap;
    position: relative;
    padding-block: 35px;
    background-color: #F8F8F8;
}
.blog-details-wrap.version-4 .blog-publish-info{
    grid-gap: 5px;
}
.blog-details-wrap.version-4 .blog-publish-info :where(span, b){
    color: var(--blog-text-color);
}
.blog-details-wrap.version-4 .blog-details-header::after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--container-spacing) + (100% - var(--container-spacing) * 2) / 4);
    height: 100%;
    background-color: var(--blog-secondary-color);
    opacity: 0.18;
}
.blog-details-wrap.version-4 .blog-details-header > *{
    position: relative;
    z-index: 1;
}
.blog-details-wrap.version-4 .blog-details-header figure{
    width: 50%;
    background-color: transparent;
}
.blog-details-wrap.version-4 .blog-details-header figure img{
    width: 100%;
}
.blog-details-wrap.version-4 .blog-details-header .blog-details-header-text{
    width: 50%;
    padding-top: 50px;
    padding-left: 48px;
}
.blog-details-wrap.version-4 .blog-details-header-text h1{
    margin-bottom: 36px;
}
.blog-details-wrap.version-4 .blog-details-body{
    padding-block: 51px 0;
    padding-inline: var(--container-spacing);
}
.blog-details-wrap.version-4 .blog-details-body article{
    padding: 0;
    background-color: transparent;
}
.blog-details-wrap.version-4 .blog-author-card{
    margin-top: 30px;
}
/*rounded*/
.blog-details-wrap.version-4.version-4-rounded .blog-details-header figure img{
    border-radius: 50vw;
    aspect-ratio: 1 / 1.1;
}
.blog-details-wrap.version-4.version-4-rounded .blog-author-card img{
    border-radius: 50%;
}