/* ===========================================
   ORIONSOFT BLOG CSS
=========================================== */

.blog-hero{

background:linear-gradient(135deg,#0d47a1,#1565ff);

padding:90px 20px;

text-align:center;

color:#fff;

}

.blog-hero h1{

font-size:52px;

font-weight:700;

margin-bottom:20px;

}

.blog-hero p{

max-width:850px;

margin:auto;

font-size:18px;

line-height:30px;

opacity:.95;

}

.blog-page{

padding:70px 0;

background:#f7f9fc;

}

.blog-wrapper{

display:grid;

grid-template-columns:2fr 1fr;

gap:35px;

align-items:start;

}

.blog-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:30px;

}

.blog-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 15px 40px rgba(0,0,0,.08);

transition:.35s;

}

.blog-card:hover{

transform:translateY(-10px);

box-shadow:0 25px 45px rgba(0,0,0,.15);

}

.blog-image{

height:250px;

overflow:hidden;

}

.blog-image img{

width:100%;

height:100%;

object-fit: contain;

transition:.4s;

}

.blog-card:hover img{

transform:scale(1.08);

}

.blog-content{

padding:28px;

}

.blog-meta{

display:flex;

justify-content:space-between;

margin-bottom:18px;

font-size:14px;

color:#666;

}

.blog-content h3{

font-size:25px;

margin-bottom:15px;

line-height:35px;

}

.blog-content h3 a{

text-decoration:none;

color:#222;

transition:.3s;

}

.blog-content h3 a:hover{

color:#1565ff;

}

.blog-content p{

color:#666;

line-height:28px;

margin-bottom:25px;

}

.blog-footer{

display:flex;

justify-content:space-between;

align-items:center;

border-top:1px solid #eee;

padding-top:18px;

}

.read-btn{

background:#1565ff;

color:#fff;

padding:11px 18px;

border-radius:8px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.read-btn:hover{

background:#0d47a1;

}

.no-blog{

background:#fff;

padding:60px;

text-align:center;

border-radius:15px;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}
/* ===========================================
   SIDEBAR
=========================================== */

.blog-right{

position:sticky;

top:100px;

}

.sidebar-box{

background:#fff;

padding:28px;

border-radius:18px;

margin-bottom:30px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.sidebar-box h3{

font-size:24px;

margin-bottom:22px;

color:#1565ff;

position:relative;

padding-bottom:12px;

}

.sidebar-box h3::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:70px;

height:4px;

background:#1565ff;

border-radius:30px;

}

/* Search */

.sidebar-box form{

display:flex;

flex-direction:column;

gap:12px;

}

.sidebar-box input{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:8px;

font-size:15px;

transition:.3s;

}

.sidebar-box input:focus{

outline:none;

border-color:#1565ff;

box-shadow:0 0 10px rgba(21,101,255,.18);

}

.sidebar-box button{

padding:14px;

background:#1565ff;

color:#fff;

border:none;

border-radius:8px;

cursor:pointer;

font-weight:600;

transition:.3s;

}

.sidebar-box button:hover{

background:#0d47a1;

}

/* Categories */

.category-list{

list-style:none;

padding:0;

margin:0;

}

.category-list li{

border-bottom:1px solid #eee;

}

.category-list li:last-child{

border-bottom:none;

}

.category-list a{

display:block;

padding:14px 0;

text-decoration:none;

color:#444;

font-weight:500;

transition:.3s;

}

.category-list a:hover{

padding-left:10px;

color:#1565ff;

}

/* Latest Posts */

.latest-post{

margin-bottom:18px;

padding-bottom:18px;

border-bottom:1px solid #eee;

}

.latest-post:last-child{

border-bottom:none;

margin-bottom:0;

padding-bottom:0;

}

.latest-post a{

display:flex;

gap:14px;

text-decoration:none;

align-items:center;

}

.latest-post img{

width:90px;

height:70px;

object-fit: contain;

border-radius:10px;

}

.latest-post h4{

font-size:16px;

line-height:24px;

margin-bottom:6px;

color:#222;

transition:.3s;

}

.latest-post a:hover h4{

color:#1565ff;

}

.latest-post small{

color:#888;

}

/* Newsletter */

.newsletter{

background:linear-gradient(135deg,#1565ff,#0d47a1);

color:#fff;

}

.newsletter h3{

color:#fff;

}

.newsletter h3::after{

background:#fff;

}

.newsletter p{

line-height:28px;

margin-bottom:18px;

}

.newsletter input{

background:#fff;

}

.newsletter button{

background:#fff;

color:#1565ff;

font-weight:700;

}

.newsletter button:hover{

background:#f4f4f4;

}

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

@media(max-width:992px){

.blog-wrapper{

grid-template-columns:1fr;

}

.blog-right{

position:relative;

top:0;

}

}

@media(max-width:768px){

.blog-hero{

padding:60px 20px;

}

.blog-hero h1{

font-size:36px;

line-height:46px;

}

.blog-hero p{

font-size:16px;

line-height:28px;

}

.blog-page{

padding:40px 0;

}

.blog-grid{

grid-template-columns:1fr;

gap:22px;

}

.blog-content{

padding:22px;

}

.blog-content h3{

font-size:22px;

line-height:30px;

}

.blog-footer{

flex-direction:column;

align-items:flex-start;

gap:15px;

}

.read-btn{

width:100%;

text-align:center;

}

.sidebar-box{

padding:22px;

}

.latest-post a{

flex-direction:column;

align-items:flex-start;

}

.latest-post img{

width:100%;

height:180px;

}

}

@media(max-width:480px){

.blog-hero h1{

font-size:30px;

}

.blog-hero p{

font-size:15px;

}

.blog-content{

padding:18px;

}

.blog-content h3{

font-size:20px;

}

.sidebar-box h3{

font-size:20px;

}

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

.blog-details{

padding:70px 0;

background:#f7f9fc;

}

.details-wrapper{

display:grid;

grid-template-columns:2fr 1fr;

gap:40px;

align-items:start;

}

.details-left{

background:#fff;

padding:35px;

border-radius:18px;

box-shadow:0 10px 35px rgba(0,0,0,.08);

}

.details-right{

position:sticky;

top:100px;

}

.blog-category{

display:inline-block;

background:#1565ff;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:14px;

margin-bottom:20px;

font-weight:600;

}

.blog-title{

font-size:42px;

line-height:58px;

margin-bottom:20px;

color:#222;

}

.blog-info{

display:flex;

gap:30px;

flex-wrap:wrap;

margin-bottom:30px;

font-size:15px;

color:#666;

}

.blog-info span{

display:flex;

align-items:center;

gap:8px;

}

.featured-image{

margin-bottom:30px;

overflow:hidden;

border-radius:18px;

}

.featured-image img{

width:100%;

display:block;

border-radius:18px;

transition:.4s;

}

.featured-image:hover img{

transform:scale(1.03);

}

.blog-summary{

background:#eef5ff;

padding:25px;

border-left:5px solid #1565ff;

border-radius:12px;

margin-bottom:35px;

}

.blog-summary p{

font-size:18px;

line-height:34px;

color:#444;

}

.blog-content-area{

font-size:18px;

line-height:34px;

color:#444;

}

.blog-content-area h2{

margin:40px 0 20px;

font-size:34px;

color:#1565ff;

}

.blog-content-area h3{

margin:35px 0 18px;

font-size:28px;

color:#222;

}

.blog-content-area p{

margin-bottom:22px;

}

.blog-content-area img{

max-width:100%;

border-radius:15px;

margin:25px 0;

}

.blog-content-area ul{

padding-left:25px;

margin-bottom:25px;

}

.blog-content-area li{

margin-bottom:10px;

}

.blog-content-area table{

width:100%;

border-collapse:collapse;

margin:25px 0;

}

.blog-content-area table th{

background:#1565ff;

color:#fff;

padding:15px;

}

.blog-content-area table td{

padding:15px;

border:1px solid #ddd;

}
/* ==========================================
   SHARE BOX
========================================== */

.share-box{

margin:40px 0;

padding:25px;

background:#fff;

border:1px solid #eee;

border-radius:15px;

}

.share-box h4{

margin-bottom:18px;

font-size:22px;

color:#222;

}

.share-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.share-buttons a{

padding:12px 20px;

border-radius:8px;

text-decoration:none;

color:#fff;

font-weight:600;

transition:.3s;

}

.facebook{

background:#1877f2;

}

.linkedin{

background:#0a66c2;

}

.twitter{

background:#111;

}

.share-buttons a:hover{

transform:translateY(-3px);

opacity:.9;

}

/* ==========================================
   SIDEBAR
========================================== */

.details-right .sidebar-box{

background:#fff;

padding:25px;

border-radius:15px;

margin-bottom:30px;

box-shadow:0 10px 30px rgba(0,0,0,.08);

}

.details-right .sidebar-box h3{

margin-bottom:18px;

color:#1565ff;

font-size:22px;

}

.details-right .sidebar-box input{

width:100%;

padding:14px;

border:1px solid #ddd;

border-radius:8px;

margin-bottom:12px;

}

.details-right .sidebar-box button{

width:100%;

padding:14px;

background:#1565ff;

color:#fff;

border:none;

border-radius:8px;

cursor:pointer;

transition:.3s;

}

.details-right .sidebar-box button:hover{

background:#0d47a1;

}

/* ==========================================
   LATEST POSTS
========================================== */

.latest-post{

display:flex;

gap:15px;

margin-bottom:18px;

padding-bottom:18px;

border-bottom:1px solid #eee;

}

.latest-post:last-child{

border-bottom:none;

margin-bottom:0;

padding-bottom:0;

}

.latest-post img{

width:90px;

height:75px;

object-fit: contain;

border-radius:10px;

}

.latest-post h4{

font-size:15px;

line-height:22px;

margin-bottom:5px;

color:#222;

transition:.3s;

}

.latest-post a{

display:flex;

gap:15px;

text-decoration:none;

}

.latest-post a:hover h4{

color:#1565ff;

}

.latest-post small{

color:#888;

}

/* ==========================================
   CATEGORY
========================================== */

.category-list{

list-style:none;

padding:0;

margin:0;

}

.category-list li{

border-bottom:1px solid #eee;

}

.category-list li:last-child{

border-bottom:none;

}

.category-list a{

display:block;

padding:12px 0;

text-decoration:none;

color:#444;

transition:.3s;

}

.category-list a:hover{

padding-left:10px;

color:#1565ff;

}

/* ==========================================
   NEWSLETTER
========================================== */

.newsletter{

background:linear-gradient(135deg,#1565ff,#0d47a1);

color:#fff;

}

.newsletter h3{

color:#fff !important;

}

.newsletter p{

line-height:28px;

margin-bottom:18px;

}

.newsletter input{

background:#fff;

}

.newsletter button{

background:#fff !important;

color:#1565ff !important;

font-weight:700;

}

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

@media(max-width:992px){

.details-wrapper{

grid-template-columns:1fr;

}

.details-right{

position:relative;

top:0;

}

}

@media(max-width:768px){

.blog-title{

font-size:30px;

line-height:42px;

}

.blog-info{

gap:15px;

font-size:14px;

}

.details-left{

padding:20px;

}

.share-buttons{

flex-direction:column;

}

.share-buttons a{

text-align:center;

}

.latest-post{

flex-direction:column;

}

.latest-post img{

width:100%;

height:180px;

}

.blog-content-area{

font-size:16px;

line-height:30px;

}

.blog-content-area h2{

font-size:28px;

}

.blog-content-area h3{

font-size:24px;

}

}

@media(max-width:480px){

.blog-details{

padding:40px 0;

}

.blog-title{

font-size:24px;

line-height:34px;

}

.blog-summary{

padding:18px;

}

.blog-summary p{

font-size:16px;

line-height:28px;

}

.details-left{

padding:15px;

}

}
/*=========================
Pagination
==========================*/

.pagination{

display:flex;

justify-content:center;

align-items:center;

gap:12px;

margin-top:50px;

flex-wrap:wrap;

}

.pagination a{

padding:12px 18px;

background:#fff;

color:#1565ff;

text-decoration:none;

border-radius:8px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

transition:.3s;

}

.pagination a:hover{

background:#1565ff;

color:#fff;

}

.pagination .active{

background:#1565ff;

color:#fff;

}
/* ==========================================
ARTICLE STATS
========================================== */

.article-stats{

display:flex;

gap:20px;

margin:35px 0;

flex-wrap:wrap;

}

.article-stats div{

background:#fff;

padding:16px 25px;

border-radius:12px;

box-shadow:0 8px 25px rgba(0,0,0,.08);

font-size:16px;

font-weight:600;

color:#333;

transition:.3s;

}

.article-stats div:hover{

transform:translateY(-5px);

}

/* ==========================================
TABLE OF CONTENTS
========================================== */

.toc{

background:#f8fbff;

border-left:5px solid #1565ff;

padding:25px;

border-radius:15px;

margin:35px 0;

}

.toc h3{

margin-bottom:18px;

color:#1565ff;

font-size:24px;

}

.toc ul{

list-style:none;

padding:0;

margin:0;

}

.toc li{

margin:12px 0;

}

.toc a{

text-decoration:none;

color:#333;

font-weight:600;

transition:.3s;

}

.toc a:hover{

padding-left:10px;

color:#1565ff;

}

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

.author-box{

display:flex;

gap:25px;

align-items:center;

background:linear-gradient(135deg,#1565ff,#0d47a1);

padding:35px;

border-radius:20px;

margin:60px 0;

color:#fff;

}

.author-icon{

width:90px;

height:90px;

border-radius:50%;

background:#fff;

color:#1565ff;

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

flex-shrink:0;

}

.author-box h3{

font-size:28px;

margin-bottom:15px;

}

.author-box p{

line-height:30px;

margin-bottom:20px;

opacity:.95;

}

.author-box .read-btn{

background:#fff;

color:#1565ff;

font-weight:700;

}

/* ==========================================
RELATED BLOGS
========================================== */

.related-blogs{

margin-top:60px;

}

.related-blogs h2{

font-size:34px;

margin-bottom:30px;

color:#222;

}

.related-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}

.related-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

}

.related-card:hover{

transform:translateY(-8px);

}

.related-card img{

width:100%;

height:210px;

object-fit: contain;

}

.related-card h4{

padding:20px;

font-size:20px;

line-height:30px;

color:#222;

}

.related-card a{

text-decoration:none;

}

/* ==========================================
SMOOTH SCROLL
========================================== */

html{

scroll-behavior:smooth;

}
@media(max-width:992px){

.related-grid{

grid-template-columns:1fr 1fr;

}

.author-box{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.article-stats{

flex-direction:column;

}

.toc{

padding:18px;

}

.author-box{

padding:25px;

}

.author-box h3{

font-size:24px;

}

.related-grid{

grid-template-columns:1fr;

}

.related-card img{

height:220px;

}

}

@media(max-width:480px){

.author-icon{

width:70px;

height:70px;

font-size:34px;

}

.related-blogs h2{

font-size:28px;

}

.toc h3{

font-size:20px;

}

}
/*=========================
Blog Navigation
==========================*/

.blog-navigation{

display:flex;

justify-content:space-between;

gap:20px;

margin-top:60px;

flex-wrap:wrap;

}

.blog-navigation a{

flex:1;

background:#fff;

padding:25px;

border-radius:15px;

text-decoration:none;

color:#222;

box-shadow:0 10px 25px rgba(0,0,0,.08);

transition:.3s;

}

.blog-navigation a:hover{

background:#1565ff;

color:#fff;

}

.whatsapp{

background:#25D366;

}

.copy-link{

background:#444;

color:#fff;

border:none;

padding:12px 20px;

border-radius:8px;

cursor:pointer;

font-weight:600;

}

.copy-link:hover{

background:#222;

}

@media(max-width:768px){

.blog-navigation{

flex-direction:column;

}

}
/*==================================================
BLOG DETAILS PREMIUM
==================================================*/

.blog-details{

padding:80px 0;

background:#f6f8fc;

}

.details-wrapper{

display:grid;

grid-template-columns:2fr 380px;

gap:40px;

align-items:start;

}

.details-left{

background:#fff;

padding:40px;

border-radius:20px;

box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.blog-category{

display:inline-block;

background:#1565ff;

color:#fff;

padding:8px 18px;

border-radius:30px;

font-size:14px;

font-weight:600;

margin-bottom:20px;

}

.blog-title{

font-size:46px;

line-height:60px;

margin:20px 0;

font-weight:700;

color:#1d1d1d;

}

.blog-info{

display:flex;

flex-wrap:wrap;

gap:25px;

margin-bottom:35px;

color:#777;

font-size:15px;

}

.meta-item{

display:flex;

align-items:center;

gap:8px;

}

.featured-image{

margin-bottom:35px;

overflow:hidden;

border-radius:18px;

}

.featured-image img{

width:100%;

display:block;

transition:.4s;

}

.featured-image:hover img{

transform:scale(1.05);

}

.blog-summary{

background:#eef5ff;

border-left:5px solid #1565ff;

padding:25px;

border-radius:12px;

margin-bottom:35px;

}

.blog-summary p{

font-size:18px;

line-height:32px;

color:#444;

}

.article-stats{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:20px;

margin-bottom:40px;

}

.stat-card{

background:#fff;

padding:22px;

border-radius:15px;

text-align:center;

box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.stat-card h3{

font-size:32px;

color:#1565ff;

margin-bottom:10px;

}

.stat-card p{

color:#666;

font-size:15px;

}
/*==================================================
TABLE OF CONTENTS
==================================================*/

.toc{

background:#ffffff;

border:1px solid #e5e7eb;

border-left:5px solid #1565ff;

padding:25px;

border-radius:15px;

margin:40px 0;

box-shadow:0 10px 25px rgba(0,0,0,.05);

}

.toc h3{

font-size:24px;

margin-bottom:18px;

color:#1565ff;

}

.toc ul{

list-style:none;

padding:0;

margin:0;

}

.toc li{

margin:12px 0;

}

.toc a{

display:block;

text-decoration:none;

color:#333;

padding:10px 15px;

border-radius:8px;

transition:.3s;

font-weight:600;

}

.toc a:hover{

background:#1565ff;

color:#fff;

padding-left:20px;

}

/*==================================================
BLOG CONTENT
==================================================*/

.blog-content-area{

margin-top:45px;

font-size:18px;

line-height:34px;

color:#444;

}

.blog-content-area h2{

font-size:36px;

margin:50px 0 20px;

color:#1565ff;

}

.blog-content-area h3{

font-size:28px;

margin:40px 0 18px;

color:#222;

}

.blog-content-area h4{

font-size:24px;

margin:30px 0 15px;

}

.blog-content-area p{

margin-bottom:22px;

}

.blog-content-area img{

max-width:100%;

border-radius:15px;

margin:35px 0;

box-shadow:0 10px 25px rgba(0,0,0,.12);

}

.blog-content-area ul,

.blog-content-area ol{

padding-left:30px;

margin-bottom:25px;

}

.blog-content-area li{

margin-bottom:10px;

}

.blog-content-area blockquote{

padding:25px;

background:#eef5ff;

border-left:5px solid #1565ff;

border-radius:10px;

margin:35px 0;

font-style:italic;

}

.blog-content-area pre{

background:#111827;

color:#fff;

padding:20px;

overflow:auto;

border-radius:10px;

margin:30px 0;

}

.blog-content-area code{

background:#f4f4f4;

padding:3px 8px;

border-radius:5px;

}

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

.author-box{

display:flex;

gap:25px;

align-items:center;

background:linear-gradient(135deg,#1565ff,#0d47a1);

padding:35px;

border-radius:20px;

margin:60px 0;

color:#fff;

}

.author-icon{

width:90px;

height:90px;

border-radius:50%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

font-size:42px;

color:#1565ff;

flex-shrink:0;

}

.author-content h3{

font-size:28px;

margin-bottom:15px;

}

.author-content p{

line-height:30px;

margin-bottom:20px;

opacity:.95;

}

.author-content .read-btn{

background:#fff;

color:#1565ff;

}
/*==================================================
SHARE BOX
==================================================*/

.share-box{

margin:60px 0;

padding:30px;

background:#fff;

border-radius:20px;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.share-box h3{

font-size:28px;

margin-bottom:25px;

color:#222;

}

.share-buttons{

display:flex;

flex-wrap:wrap;

gap:15px;

}

.share-buttons a,
.copy-link{

padding:14px 22px;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

border:none;

cursor:pointer;

font-size:15px;

}

.facebook{

background:#1877F2;

color:#fff;

}

.linkedin{

background:#0A66C2;

color:#fff;

}

.twitter{

background:#111827;

color:#fff;

}

.whatsapp{

background:#25D366;

color:#fff;

}

.copy-link{

background:#555;

color:#fff;

}

.share-buttons a:hover,
.copy-link:hover{

transform:translateY(-4px);

opacity:.9;

}

/*==================================================
RELATED ARTICLES
==================================================*/

.related-blogs{

margin-top:70px;

}

.related-blogs h2{

font-size:36px;

margin-bottom:30px;

}

.related-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:25px;

}

.related-card{

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.35s;

}

.related-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(0,0,0,.15);

}

.related-card img{

width:100%;

height:220px;

object-fit: contain;

transition:.4s;

}

.related-card:hover img{

transform:scale(1.05);

}

.related-card h4{

padding:20px;

font-size:20px;

line-height:30px;

color:#222;

}

.related-card a{

text-decoration:none;

}

/*==================================================
PREVIOUS / NEXT
==================================================*/

.blog-navigation{

display:flex;

justify-content:space-between;

gap:25px;

margin-top:60px;

}

.blog-navigation a{

flex:1;

padding:25px;

background:#fff;

border-radius:18px;

text-decoration:none;

color:#222;

box-shadow:0 12px 30px rgba(0,0,0,.08);

transition:.3s;

}

.blog-navigation a span{

display:block;

font-size:14px;

color:#777;

margin-bottom:10px;

}

.blog-navigation a strong{

display:block;

font-size:18px;

line-height:28px;

}

.blog-navigation a:hover{

background:#1565ff;

color:#fff;

}

.blog-navigation a:hover span{

color:#fff;

}

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

@media(max-width:1200px){

.details-wrapper{

grid-template-columns:1fr;

}

.details-right{

position:relative;

top:0;

}

}

@media(max-width:992px){

.related-grid{

grid-template-columns:1fr 1fr;

}

.article-stats{

grid-template-columns:repeat(2,1fr);

}

.author-box{

flex-direction:column;

text-align:center;

}

}

@media(max-width:768px){

.blog-title{

font-size:30px;

line-height:42px;

}

.blog-info{

gap:15px;

}

.article-stats{

grid-template-columns:1fr;

}

.share-buttons{

flex-direction:column;

}

.share-buttons a,
.copy-link{

width:100%;

text-align:center;

}

.related-grid{

grid-template-columns:1fr;

}

.blog-navigation{

flex-direction:column;

}

.details-left{

padding:22px;

}

.details-right{

margin-top:35px;

}

}

@media(max-width:480px){

.blog-title{

font-size:26px;

line-height:36px;

}

.blog-summary{

padding:18px;

}

.author-box{

padding:25px;

}

.author-icon{

width:70px;

height:70px;

font-size:34px;

}

.related-card img{

height:180px;

}

.share-box{

padding:20px;

}

}