/* ===========================
BLOG HERO
=========================== */

.blog-hero{
background:#133E87;
padding:100px 0;
text-align:center;
position:relative;
overflow:hidden;
}

.blog-hero::before{
content:'';
position:absolute;
width:400px;
height:400px;
border-radius:50%;
background:rgba(255,255,255,.05);
top:-200px;
left:-150px;
}

.blog-category{
display:inline-block;
background:rgba(255,255,255,.12);
color:#fff;
padding:10px 24px;
border-radius:50px;
margin-bottom:20px;
}

.blog-hero h1{
    font-size:50px;
    font-weight:700;
    line-height:1.2;
    color:#ffffff;
}

.blog-hero h1 span{
    color:#F97707;
    display:block;
}

/* .blog-hero h1{
color:#fff;
font-size:55px;
max-width:900px;
margin:auto;
line-height:1.2;
} */

.blog-hero p{
color:rgba(255,255,255,.85);
max-width:750px;
margin:20px auto 0;
}

/* ===========================
BLOG DETAILS
=========================== */

.blog-details{
padding:100px 0;
}

.blog-image img{
width:100%;
border-radius:25px;
margin-bottom:40px;
}

.blog-content{
max-width:900px;
margin:auto;
}

.blog-content p{
font-size:17px;
line-height:1.9;
color:#555;
margin-bottom:20px;
}

.blog-content h2{
color:#133E87;
margin-top:40px;
margin-bottom:20px;
}

.blog-content ul{
padding-left:20px;
}

.blog-content li{
margin-bottom:10px;
}

.blog-content blockquote{
background:#f8f9fa;
border-left:5px solid #F97707;
padding:25px;
border-radius:10px;
margin:30px 0;
font-style:italic;
}

/* ===========================
RESPONSIVE
=========================== */

@media(max-width:767px){


.blog-hero{
    padding:70px 0;
}

.blog-hero h1{
    font-size:32px;
}

.blog-content p{
    font-size:15px;
}

.blog-content h2{
    font-size:24px;
}


}