.blog-hero{

    background: linear-gradient(90deg, #04427d, #04427d, #04427dde);

    color:#fff;

    padding:32px 2%;

    position:relative;

    overflow:hidden;

}

/*.blog-hero::before{*/

/*    content:"";*/

/*    position:absolute;*/

/*    inset:0;*/

/*    background:*/
/*    radial-gradient(circle at 20% 30%,rgba(255,255,255,.08),transparent 35%),*/
/*    radial-gradient(circle at 80% 20%,rgba(255,255,255,.08),transparent 30%),*/
/*    radial-gradient(circle at 50% 80%,rgba(255,255,255,.06),transparent 40%);*/

/*}*/

.category{

    display:inline-block;

    background:#eef6ef;

    color:#008b4f;

    padding:12px 30px;

    border-radius:50px;

    font-size:15px;

    font-weight:600;

    margin-bottom:35px;

}

.blog-hero h1{
    color: #fff;
    
        font-family: Sansita, sans-serif;

    font-size:40px;

    line-height:1.2;

    /*max-width:1050px;*/

    font-weight:700;

    margin-bottom:22px;

}

.author{

    display:flex;

    align-items:center;

    gap:15px;

    margin-bottom:40px;

}

.author img{

    width:40px;

    height:40px;

    border-radius:50%;

    object-fit:cover;

}

.author span{

    font-size:18px;

    font-weight:500;

}

.bottom-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    flex-wrap:wrap;

}

.meta{

    display:flex;

    gap:35px;

    flex-wrap:wrap;

}

.meta span{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:18px;

}

.share{

    display:flex;

    align-items:center;

    gap:18px;

}

.share span{

    font-size:20px;

}

.share a{

    width:40px;

    height:40px;

    border:2px solid rgba(255,255,255,.7);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    text-decoration:none;

    transition:.3s;

}

.share a:hover{

    background:#fff;

    color:#7a12ea;

}

/* Tablet */

@media(max-width:992px){

.blog-hero{

padding:60px 20px;

}

.blog-hero h1{

font-size:42px;

}

.author span{

font-size:20px;

}

}

/* Mobile */

@media(max-width:768px){

.category{

padding:10px 22px;

font-size:14px;

}

.blog-hero h1{

font-size:32px;

}

.author img{

width:50px;
height:50px;

}

.author span{

font-size:18px;

}

.bottom-row{

flex-direction:column;

align-items:flex-start;

}

.meta{

flex-direction:column;

gap:15px;

}

.share{

margin-top:10px;

}

.share a{

width:45px;
height:45px;

}

}

/* Small Mobile */

@media(max-width:480px){

.blog-hero{

padding:45px 18px;

}

.blog-hero h1{

font-size:26px;

line-height:1.4;

}

.meta span{

font-size:15px;

}

.share span{

display:none;

}

}



.blog-wrapper{
    

margin:auto;

padding:50px 2%;

display:grid;

grid-template-columns:320px 1fr;

gap:30px;

align-items:start;

}

/******** TOC ********/

.toc{
    position: sticky;
    top: 20px;

    align-self: start;

    background:#f6f0fb;
    padding:20px;
    border-radius:22px;

    max-height:calc(100vh - 40px);
    overflow-y:auto;
}

.toc h3{

font-size:20px;

margin-bottom:25px;

}

.toc ul{

list-style:none;
padding-left: 0px;

}

.toc li{

margin-bottom:10px;

}

.toc a{

display:block;

text-decoration:none;

font-size:16px;

color:#0c2d72;

font-weight:500;

padding-left:18px;

position:relative;

transition:.3s;

}

.toc a::before{

content:"▸";

position:absolute;

left:0;

}

.toc a:hover,
.toc a.active{

color:#6b17d7;

font-weight:600;

}

/******** CONTENT ********/

.blog-content{

background:#fff;

padding:0px;

border-radius:22px;

}

.blog-content section{

margin-bottom:80px;

scroll-margin-top:80px;

}

.blog-content h2{

font-size:1.5rem;

margin-bottom:25px;

}


.blog-content h3{

font-size:1.3rem;

margin-bottom:25px;

}

.blog-content p{

font-size:16px;

line-height:1.9;

color:#333;

}

.blog-content ul{

padding-left:25px;

}

.blog-content li{

font-size:18px;

line-height:1.8;

margin-bottom:18px;

}

/******** Scrollbar ********/

.toc::-webkit-scrollbar{

width:6px;

}

.toc::-webkit-scrollbar-thumb{

background:#999;

border-radius:50px;

}

/******** Tablet ********/

@media(max-width:992px){

.blog-wrapper{

grid-template-columns:1fr;

}

.toc{

position:relative;

top:0;

height:auto;

max-height:350px;

}

.blog-content h2{

font-size:38px;

}

}

/******** Mobile ********/

@media(max-width:768px){

.blog-wrapper{

padding:20px;

}

.toc{

padding:20px;

}

.toc h3{

font-size:28px;

}

.toc a{

font-size:17px;

}

.blog-content{

padding:25px;

}

.blog-content h2{

font-size:30px;

}

.blog-content p,
.blog-content li{

font-size:17px;

}

}