/**
CSS: Custom Blog Styles
**/

/* BLOG-SPECIFIC STYLES */
[data-theme*="blog"] h1 {font-size:3.5rem;margin-bottom:3.75rem;}
[data-theme*="blog"] h2 {font-size:2rem;margin-bottom:2rem;}
[data-theme*="blog"] h2:not(:first-child) {padding-top:4.5rem;}
[data-theme*="blog"] h3 {font-size:1.5rem;margin-bottom:1.25rem;}

@media only screen and (max-width: 768px) {
    [data-theme*="blog"] h2:not(:first-child) {padding-top:2.5rem;}
    [data-theme*="blog"] h2 {margin-bottom:1.5rem;}
}
/* BLOG-SPECIFIC STYLES */
.blog-header {
    background: #282561!important;
}


.bg-blog-gradient:before {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, #ffffff 0%, #e7e9f9 100% );
    transform: translate3d(0px, -95px, 0) scale(1);
    filter: blur(95px);
    opacity: var(0.7);
    transition: opacity 0.3s;
    border-radius: inherit;
}

/* 
* Prevents issues when the parent creates a 
* stacking context. (For example, using the transform
* property )
*/
.bg-blog-gradient::after {
    content: "";
    z-index: -1;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: inherit;
    border-radius: inherit;
}
.rank-math-breadcrumb a {
    font-family: "Nunito Sans", sans-serif!important;
}
.rank-math-breadcrumb a:hover {
    color: #d9daf3!important;
}