/*------------------------------------*\
    
    Posts CSS
 
    Posts.................Post content for loop on blog homepage, category, search page, archives, etc.
    Sidebar...............Sidebar elements.

\*------------------------------------*/
.page-template-default .seo-page-header {
    border-bottom: 0px;
    box-shadow: none;
}
.masthead-page-header.none-template {
    background-repeat: no-repeat; background-size: 100% 100%;
}

.masthead-page-header .seo-breadcrumb {margin-bottom: var(--spacing-s-3);}
.masthead-page-header .seo-breadcrumb ul.seo-breadcrumb-list {list-style: none; display: flex; margin: 0px; padding: 0px;font-family: var(--font-inter);align-items: flex-start; gap: var(--spacing-s-05);}
.masthead-page-header .seo-breadcrumb ul.seo-breadcrumb-list li {text-indent: initial!important;}
.masthead-page-header .seo-breadcrumb ul.seo-breadcrumb-list li a {font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 20px; letter-spacing: 0.87px; text-transform: uppercase;margin-left: var(--spacing-s-05);}
.masthead-page-header  .header-hr { height: 1px;  background-color: var(--color-palette-tertiary-medium-purple); }
.masthead-page-header .seo-breadcrumb ul.seo-breadcrumb-list li+li:before { content: "/"; display: inline-block; vertical-align: middle; margin-right: 0; margin-left: 0; color: var(--text-colors-text-secondary); font-size: 18.5px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: 0.87px; text-transform: uppercase; }

.masthead-page-header .seo-breadcrumb ul.seo-breadcrumb-list .breadcrumb_last {display: none;}

.masthead-page-header .post-excerpt, .masthead-page-header .post-excerpt > * {color: var(--color-palette-secondary-black); font-family: var(--font-instrument); font-size: 22px; font-style: normal; font-weight: 400; line-height: 140%; letter-spacing: 0.088px;}

.masthead-page-header .post-title {margin-bottom: var(--spacing-s-4);}
.masthead-page-header .post-excerpt {margin-bottom: var(--spacing-s-3);}
.masthead-page-header .post-extras-wrapper {
    margin-top: var(--spacing-s-3);
}
.masthead-page-header .post-author {
    margin-bottom: var(--spacing-s-1);
}

.blog-info-left-keyword-stuffing-slanted-purple-bg-template.masthead-page-header .seo-breadcrumb ul.seo-breadcrumb-list li+li:before,
.masthead-page-header.purple-bg-left-blog-info-right-image-template .seo-breadcrumb ul.seo-breadcrumb-list li+li:before {
    color: white!important;
}
/*Blog info on the left / Image on the Right / Purple BG*/
.masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-page-header-content {
    display: flex;
    gap: var(--spacing-s-15);
    max-width: 2000px;
    margin-left: auto;
    margin-right: auto;    

}

.masthead-page-header.none-template {   
    padding-bottom: 0px;
    padding-top: 0px;
}

.masthead-page-header.purple-bg-left-blog-info-right-image-template {   
    padding-bottom: 0px;
    padding-top: 0px;
    background-color: #2D0F6C;

}
.masthead-page-header.purple-bg-left-blog-info-right-image-template .left-content{
    display: flex;
    justify-content: center;
    align-items: center;    
    max-width: 781px;
    margin-left: auto;
    padding-left: 24px;
}

.masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-info-wrapper .post-title,
.masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-info-wrapper .post-excerpt {
    color: white;
}
.masthead-page-header.purple-bg-left-blog-info-right-image-template  .seo-breadcrumb ul.seo-breadcrumb-list li a {
    color: white;
}
.masthead-page-header.purple-bg-left-blog-info-right-image-template  .seo-breadcrumb ul.seo-breadcrumb-list li a:hover {
    -webkit-text-decoration-color: white;
    text-decoration-color: white;
    
}
.masthead-page-header.purple-bg-left-blog-info-right-image-template .right-content {
    display: flex;
    justify-content: right;
    flex-direction: column;
    position: relative;
}

.masthead-page-header.purple-bg-left-blog-info-right-image-template .right-content .bg-image {
    width: 100%;
    height: auto;
}

.masthead-page-header.purple-bg-left-blog-info-right-image-template .desktop-shape{
    position: absolute;
    height: 100%;
    width: auto;
    z-index: 2;
}
.masthead-page-header.purple-bg-left-blog-info-right-image-template .mobile-shape {
    position: absolute;
    z-index: 2;
}
.masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-info-wrapper {
    color: white;
}

.masthead-page-header.purple-bg-left-blog-info-right-image-template .quick-strategy-form {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.masthead-page-header.purple-bg-left-blog-info-right-image-template .quick-strategy-form .form-group:first-child {
    flex: 1;
}
.masthead-page-header.purple-bg-left-blog-info-right-image-template .quick-strategy-form .form-group:first-child input {
    width: 100%;
}
.masthead-page-header.purple-bg-left-blog-info-right-image-template .header-hr {
    margin-bottom: var(--spacing-s-3);
}

.floating-blocks-container {
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 9;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    justify-content: center;
}
.floating-blocks-container .floating-block {
    border-radius: var(--Corner-Radius-m, 16px);
    background: var(--Color-Palette-Secondary-White, #FFF);
    box-shadow: 0px 2px 12px 0px rgba(120, 122, 128, 0.15);
    padding: var(--Spacing-s4, 32px);
    display: flex;
    max-width: 440px;
    width: 100%;
    height: 118px;
    padding: var(--Spacing-s4, 32px);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--Spacing-s3, 24px);

}

.floating-blocks-container .floating-block .stat-value {
    color: var(--Color-Palette-Primary-Purple, #7F1BFF);
    font-size: 35px;
    font-style: normal;
    font-weight: 700;
    line-height: 42px; /* 120% */
    letter-spacing: 1.4px;
    margin-bottom: 0px;
}
.floating-blocks-container .floating-block .stat-label {
    margin-bottom: 0px;
}

.floating-block.stat-block {
    align-items: flex-start;
    gap: 8px;
}
.floating-blocks-container .floating-block img {
    height: auto!important;
}
@media (min-width: 992px) {
    .floating-blocks-container {
        height: 100%;
        position: absolute;
    }
    .masthead-info-content .floating-blocks-container {
        display: none;
    }
}

@media screen and (max-width: 1332px) and (min-width: 992px) {
    .floating-blocks-container {
        justify-content: flex-end;
        padding-right: 24px;
        padding-bottom: 60px;
        padding-top: 60px;
    }
    .floating-blocks-container .floating-block {
        height: auto;
        padding: 12px;
        border-radius: 8px!important;
    }
}
@media (max-width: 991px) {
   .masthead-page-header.purple-bg-left-blog-info-right-image-template .floating-blocks-container {
        margin-bottom: 32px;
        flex-direction: row;
        margin-top: 32px;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .floating-blocks-container .floating-block {
        padding: 12px;
        height: auto;
        border-radius: 8px;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .right-content .floating-blocks-container {
        display: none;
    }
}

@media (max-width: 440px) {
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .floating-blocks-container {
        flex-direction: column;
    }
}

@media (max-width: 700px) {
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .quick-strategy-form  {
        flex-direction: column;
    }

    .masthead-page-header.purple-bg-left-blog-info-right-image-template .quick-strategy-form .form-group button {
        width: 100%;
    }

}

.mb-header-bg {
    position: absolute;
    bottom: -2px;
}

@media screen and (min-width: 1025px) {
    .masthead-page-header.default-template {
        background-image: url(/wp-content/themes/seofx/assets/img/article/header-bg.png); 
    }
}
@media (min-width: 1500px) {
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-info-wrapper .masthead-info-content {
        max-width: 750px;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-info-wrapper {
        position: absolute;
        left: 0px;
        width: 100%;
    }
}
@media (max-width: 1499px) {
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-info-wrapper .container {
        padding-left: 0px;
        padding-right: 0px;
    }
}
@media (min-width: 1685px) {
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .mobile-shape {
        display: none;
    }

    .masthead-page-header.purple-bg-left-blog-info-right-image-template .right-content {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .masthead-page-header.purple-bg-left-blog-info-right-image-template .right-content .bg-image:not(.hidden-image) {
        position: absolute;
        top: 0px;
        object-fit: cover;
        height: 100%;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .right-content .bg-image.hidden-image {
        visibility: hidden;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .desktop-shape {
        top: 0px;
    }

}
@media (max-width: 1684px) {
    .masthead-page-header.purple-bg-left-blog-info-right-image-template {
        border-bottom: 5px solid #2D0F6C;
    }    
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .desktop-shape {
        display: none;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .bg-image  {
        width: 99%;
        position: relative;
        z-index: 1;
        left: 1%;
        bottom: 1%;
    }    
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .right-content .bg-image.hidden-image {
        display: none;
    }
}
@media (min-width: 992px) {
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-info-wrapper {
        padding: 60px 0;
    }
}

@media (max-width: 991px) {
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-page-header-content {
        flex-direction: column;   
        gap: 32px;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .masthead-info-wrapper {
        padding-right: 24px;
        padding-bottom: 32px;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .left-content {
        order: 1;
        max-width: 100%;
    }
    .masthead-page-header.purple-bg-left-blog-info-right-image-template .mobile-shape {
        width: 100%;
        object-fit: cover;
        height: 100%;
    }
    
}
@media (max-width: 1200px) {
    .masthead-page-header.header-bg1 {background-size: 78%;}
    .masthead-page-header.header-bg4 {background-size: 36%;}
}
@media (min-width: 1025px) {
    .hide-desktop {
        display: none;
    }
    .mb-header-bg {
        display: none;
    }
}
@media (max-width: 1024px) {
    .masthead-page-header .post-title,
    .masthead-page-header .post-excerpt {max-width: 100%!important;}
    .masthead-page-header.header-bg1,
    .masthead-page-header.header-bg2,
    .masthead-page-header.header-bg3,
    .masthead-page-header.header-bg4 {background-image: none;}
    .masthead-page-header .post-excerpt, .masthead-page-header .post-excerpt > * {font-size: 18px; line-height: 27px;}
    .masthead-page-header .seo-breadcrumb {margin-bottom: var(--spacing-s-1-5);}
    .masthead-page-header.default-template {
       background-image: url(/wp-content/themes/seofx/assets/img/article/header-bg-mb-v2.png); 
    }
}

@media (max-width: 767px) {
    .masthead-page-header .post-extras-wrapper ul {flex-wrap: wrap;}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper {max-width: 100%; width: 100%;}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper .author-block {margin-bottom: var(--spacing-s-1-5);}
}

@media (max-width: 400px) {
    .masthead-page-header .seo-breadcrumb ul.seo-breadcrumb-list {justify-content: flex-start;width: 100%;flex-wrap: wrap;}
    .masthead-page-header .seo-breadcrumb ul.seo-breadcrumb-list li {text-indent: initial!important;}
    .masthead-page-header .post-title,
    .masthead-page-header .post-excerpt {text-align: left;}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper {padding-right: 0px;}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper .author-block {max-width: 100%; margin-top: 60px;margin-bottom: var(--spacing-s-2);}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper .author-block .content {flex-direction: column; padding-left: 8.5%;}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper .author-block .content .author-image-wrapper {width: 100%;}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper .author-block .content .author-image-wrapper img {left: 50%; transform: translate(-50%, 0%);}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper .author-block .content .author-info {padding-left: 0px; width: 100%;}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper .author-block .content .author-info .name {justify-content: center; width: 100%;text-indent: initial;}
    .masthead-page-header .post-extras-wrapper ul li.author-block-wrapper .author-block .content .author-info .title {width: 100%; justify-content: center; display: flex;text-indent: initial;}
    .masthead-page-header .post-extras-wrapper ul li.published-date,
    .masthead-page-header .post-extras-wrapper ul li.read-time {text-indent: initial;width: 100%; border-right: 0px; text-align: center; padding-left: 8.5%; padding-right: 8.5%;}

}
