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

.blog-details{
    padding:80px 0;
    background:var(--bg);
}

.blog-single{
    background:#fff;
    padding:40px;
    border-radius:24px;
    border:1px solid var(--border);
    box-shadow:0 10px 35px rgba(0,0,0,.05);
}

.blog-single img{
    width:100%;
    border-radius:20px;
}

.blog-single h2{
    font-size:2rem;
    font-weight:700;
    color:var(--dark);
    margin:30px 0 20px;
}

.blog-single h3{
    font-size:1.45rem;
    font-weight:600;
    color:var(--dark);
    margin:35px 0 15px;
}

.blog-single p{
    color:var(--text);
    font-size:17px;
    line-height:1.9;
    margin-bottom:20px;
}

.blog-meta{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:25px;
    color:var(--text);
    font-size:14px;
}

.blog-meta i{
    color:var(--primary);
    margin-right:6px;
}

/*==============================
BLOCKQUOTE
==============================*/

.blog-single blockquote{

margin:35px 0;

padding:30px;

border-left:5px solid var(--primary);

background:#EAF6FD;

border-radius:15px;

font-size:22px;

font-weight:600;

color:var(--dark);

line-height:1.7;

}

/*==============================
TAGS
==============================*/

.blog-tags{

margin-top:40px;

display:flex;

flex-wrap:wrap;

gap:12px;

}

.blog-tags a{

text-decoration:none;

padding:10px 18px;

border-radius:30px;

background:#EAF6FD;

color:var(--primary);

font-size:14px;

font-weight:600;

transition:.3s;

}

.blog-tags a:hover{

background:var(--primary);

color:#fff;

}

/*==============================
SHARE
==============================*/

.share-box{

margin-top:50px;

padding:30px;

border:1px solid var(--border);

border-radius:20px;

background:#fff;

}

.share-box h5{

font-size:22px;

margin-bottom:20px;

color:var(--dark);

}

/*==============================
AUTHOR
==============================*/

.author-box{

margin-top:40px;

display:flex;

gap:25px;

align-items:center;

padding:30px;

background:#fff;

border-radius:20px;

border:1px solid var(--border);

}

.author-box img{

width:90px;

height:90px;

border-radius:50%;

object-fit:cover;

}

.author-box h4{

margin-bottom:10px;

font-size:24px;

color:var(--dark);

}

.author-box p{

margin:0;

line-height:1.8;

}

/*==============================
RELATED POSTS
==============================*/

.related-posts{

margin-top:60px;

}

.related-posts h3{

margin-bottom:30px;

font-size:32px;

font-weight:700;

color:var(--dark);

}

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

@media(max-width:991px){

.blog-details{

padding:60px 0;

}

.blog-single{

padding:30px;

}

.related-posts{

margin-top:45px;

}

}

@media(max-width:767px){

.blog-single{

padding:22px;

}

.blog-single h2{

font-size:1.7rem;

}

.blog-single h3{

font-size:1.3rem;

}

.blog-single p{

font-size:16px;

}

.blog-single blockquote{

font-size:18px;

padding:22px;

}

.author-box{

flex-direction:column;

text-align:center;

}

.author-box img{

width:80px;

height:80px;

}

.related-posts h3{

font-size:28px;

}

}

@media(max-width:576px){

.blog-details{

padding:50px 0;

}

.blog-meta{

gap:12px;

font-size:13px;

}

.blog-tags{

gap:10px;

}

.blog-tags a{

font-size:13px;

padding:8px 14px;

}

.share-box{

padding:22px;

}

.author-box{

padding:22px;

}

}