/*======================================
    GOOGLE FONT
======================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/*======================================
    RESET
======================================*/

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#f5f7fb;
color:#333;
line-height:1.8;
overflow-x:hidden;
}

/*======================================
    COMMON CONTAINER
======================================*/

.container,
.blog-container{
width:100%;
max-width:1100px;
margin:auto;
padding:20px;
}

/*======================================
    BACK BUTTON
======================================*/

.back-container{
max-width:1100px;
margin:20px auto;
padding:0 20px;
}

.back-btn{
display:inline-flex;
align-items:center;
gap:8px;
padding:11px 22px;
background:#0d6efd;
color:#fff;
text-decoration:none;
font-weight:600;
border-radius:50px;
transition:.3s;
box-shadow:0 8px 20px rgba(13,110,253,.25);
}

.back-btn:hover{
background:#0b5ed7;
transform:translateY(-3px);
}

/*======================================
    HERO SECTION
======================================*/

.hero{
background:linear-gradient(135deg,#0d6efd,#3b82f6);
color:#fff;
padding:80px 20px;
text-align:center;
}

.hero-content{
max-width:850px;
margin:auto;
}

.category{
display:inline-block;
padding:8px 18px;
border-radius:50px;
background:rgba(255,255,255,.18);
font-size:14px;
font-weight:600;
margin-bottom:20px;
}

.hero h1{
font-size:42px;
font-weight:700;
line-height:1.3;
margin-bottom:20px;
}

.hero-text{
font-size:18px;
opacity:.95;
max-width:760px;
margin:auto;
}

.blog-info{
display:flex;
justify-content:center;
gap:25px;
margin-top:25px;
flex-wrap:wrap;
font-size:15px;
}

/*======================================
    FEATURE IMAGE
======================================*/

.feature-image{
max-width:1000px;
margin:40px auto;
padding:0 20px;
}

.feature-image img{
width:100%;
display:block;
border-radius:20px;
box-shadow:0 15px 40px rgba(0,0,0,.15);
transition:.4s;
}

.feature-image img:hover{
transform:scale(1.02);
}

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

.blog-content{
background:#fff;
padding:40px;
border-radius:20px;
box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.intro{
font-size:18px;
margin-bottom:35px;
color:#555;
}

.blog-content h2{
font-size:32px;
margin:45px 0 18px;
color:#0d6efd;
}

.blog-content h3{
font-size:22px;
margin-bottom:12px;
color:#222;
}

.blog-content p{
font-size:17px;
color:#555;
margin-bottom:18px;
}

.blog-content ul,
.blog-content ol{
padding-left:22px;
margin:20px 0;
}

.blog-content li{
margin-bottom:12px;
}/*======================================
    TABLE OF CONTENTS
======================================*/

.toc{
background:#eef5ff;
padding:25px;
border-left:5px solid #0d6efd;
border-radius:16px;
margin:40px 0;
}

.toc h2{
margin:0 0 15px;
color:#0d6efd;
font-size:28px;
}

.toc ul{
list-style:none;
padding:0;
margin:0;
}

.toc li{
margin:12px 0;
}

.toc a{
display:block;
padding:10px 15px;
background:#fff;
border-radius:10px;
text-decoration:none;
color:#333;
font-weight:500;
transition:.3s;
}

.toc a:hover{
background:#0d6efd;
color:#fff;
transform:translateX(5px);
}

/*======================================
    COMMON BOX
======================================*/

.tip-box,
.info-box,
.success-box,
.warning-box,
.highlight-box,
.quote-box{
padding:25px;
border-radius:16px;
margin:35px 0;
box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.tip-box h3,
.info-box h3,
.success-box h3,
.warning-box h3,
.highlight-box h3,
.quote-box h3{
margin-bottom:12px;
}

/*======================================
    TIP BOX
======================================*/

.tip-box{
background:#eaf7ea;
border-left:6px solid #28a745;
}

.tip-box h3{
color:#198754;
}

/*======================================
    INFO BOX
======================================*/

.info-box{
background:#eef7ff;
border-left:6px solid #0d6efd;
}

.info-box h3{
color:#0d6efd;
}

/*======================================
    SUCCESS BOX
======================================*/

.success-box{
background:#ecfff4;
border-left:6px solid #20c997;
}

.success-box h3{
color:#198754;
}

/*======================================
    WARNING BOX
======================================*/

.warning-box{
background:#fff8e6;
border-left:6px solid #f4b400;
}

.warning-box h3{
color:#b77900;
}

/*======================================
    HIGHLIGHT BOX
======================================*/

.highlight-box{
background:#fff4e5;
border-left:6px solid #ff7a00;
}

.highlight-box h3{
color:#d35400;
}

/*======================================
    QUOTE BOX
======================================*/

.quote-box{
background:linear-gradient(135deg,#0d6efd,#2563eb);
color:#fff;
text-align:center;
}

.quote-box h3{
color:#fff;
}

.quote-box p{
color:#fff;
font-size:19px;
font-style:italic;
margin:0;
}

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

blockquote{
background:#f8f9fa;
border-left:5px solid #0d6efd;
padding:20px;
margin:30px 0;
font-style:italic;
border-radius:12px;
}

/*======================================
    HORIZONTAL LINE
======================================*/

hr{
border:none;
height:2px;
background:#e5e7eb;
margin:45px 0;
}/*======================================
    TABLE WRAPPER
======================================*/

.table-wrapper{
overflow-x:auto;
margin:35px 0;
border-radius:16px;
}

/*======================================
    TABLE
======================================*/

table{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:16px;
overflow:hidden;
box-shadow:0 8px 25px rgba(0,0,0,.08);
}

thead{
background:#0d6efd;
color:#fff;
}

th,
td{
padding:16px;
text-align:center;
border-bottom:1px solid #e5e7eb;
}

th{
font-size:17px;
font-weight:600;
}

td{
font-size:16px;
color:#444;
}

tbody tr:nth-child(even){
background:#f8f9fa;
}

tbody tr:hover{
background:#eef5ff;
transition:.3s;
}

/*======================================
    QUICK TIPS
======================================*/

.quick-tips{
background:#eef8ff;
border-left:6px solid #0d6efd;
padding:30px;
margin:40px 0;
border-radius:16px;
}

.quick-tips h2{
margin-top:0;
margin-bottom:18px;
color:#0d6efd;
}

.quick-tips ul{
margin:0;
padding-left:22px;
}

.quick-tips li{
margin-bottom:12px;
}

/*======================================
    FAQ
======================================*/

.faq-section{
margin:60px 0;
}

.faq-item{
background:#fff;
padding:25px;
margin-bottom:20px;
border-radius:16px;
box-shadow:0 8px 20px rgba(0,0,0,.06);
transition:.3s;
}

.faq-item:hover{
transform:translateY(-4px);
}

.faq-item h3{
color:#0d6efd;
margin-bottom:10px;
}

.faq-item p{
margin-bottom:0;
}

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

.related-posts{
margin:60px 0;
}

.related-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:25px;
margin-top:30px;
}

.related-card{
display:block;
background:#fff;
padding:25px;
border-radius:18px;
text-decoration:none;
color:#333;
box-shadow:0 8px 20px rgba(0,0,0,.08);
transition:.3s;
}

.related-card:hover{
transform:translateY(-6px);
box-shadow:0 12px 30px rgba(0,0,0,.12);
}

.related-card h3{
color:#0d6efd;
margin-bottom:12px;
font-size:20px;
}

.related-card p{
margin:0;
color:#555;
}

/*======================================
    BUTTONS
======================================*/

.btn{
display:inline-block;
padding:12px 24px;
background:#0d6efd;
color:#fff;
text-decoration:none;
border:none;
border-radius:50px;
font-weight:600;
cursor:pointer;
transition:.3s;
}

.btn:hover{
background:#0b5ed7;
transform:translateY(-3px);
}

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

.share-section{
text-align:center;
margin:60px 0;
}

.share-buttons{
display:flex;
justify-content:center;
flex-wrap:wrap;
gap:15px;
margin-top:20px;
}

.share-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
background:#0d6efd;
color:#fff;
text-decoration:none;
font-weight:600;
border-radius:50px;
transition:.3s;
min-width:150px;
}

.share-btn:hover{
background:#0b5ed7;
transform:translateY(-3px);
}/*======================================
    LINKS
======================================*/

.blog-content a{
color:#0d6efd;
text-decoration:none;
font-weight:600;
transition:.3s;
}

.blog-content a:hover{
color:#0b5ed7;
text-decoration:underline;
}

/*======================================
    IMAGES
======================================*/

.blog-content img{
max-width:100%;
height:auto;
display:block;
margin:30px auto;
border-radius:16px;
box-shadow:0 10px 25px rgba(0,0,0,.12);
transition:.3s;
}

.blog-content img:hover{
transform:scale(1.02);
}

/*======================================
    CODE BLOCK
======================================*/

pre{
background:#1e293b;
color:#fff;
padding:20px;
border-radius:12px;
overflow-x:auto;
margin:25px 0;
}

code{
font-family:Consolas,monospace;
font-size:15px;
}

/*======================================
    FOOTER
======================================*/

#footer,
footer{
margin-top:70px;
}

/*======================================
    SCROLLBAR
======================================*/

::-webkit-scrollbar{
width:8px;
height:8px;
}

::-webkit-scrollbar-track{
background:#f1f1f1;
}

::-webkit-scrollbar-thumb{
background:#0d6efd;
border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
background:#0b5ed7;
}

/*======================================
    TEXT SELECTION
======================================*/

::selection{
background:#0d6efd;
color:#fff;
}

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

@media(max-width:992px){

.hero{
padding:60px 20px;
}

.hero h1{
font-size:34px;
}

.blog-content{
padding:30px;
}

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

}

/* Tablet */

@media(max-width:768px){

.back-btn{
padding:10px 18px;
font-size:15px;
}

.hero{
padding:50px 18px;
}

.hero h1{
font-size:28px;
}

.hero-text{
font-size:16px;
}

.blog-info{
flex-direction:column;
gap:10px;
}

.blog-container{
padding:15px;
}

.blog-content{
padding:22px;
border-radius:16px;
}

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

.blog-content h3{
font-size:20px;
}

.blog-content p,
.blog-content li{
font-size:16px;
}

.toc,
.tip-box,
.info-box,
.warning-box,
.success-box,
.highlight-box,
.quote-box,
.quick-tips,
.faq-item{
padding:20px;
}

.related-grid{
grid-template-columns:1fr;
}

.share-buttons{
flex-direction:column;
align-items:center;
}

.share-btn{
width:220px;
}

}

/* Mobile */

@media(max-width:480px){

.hero h1{
font-size:24px;
}

.hero-text{
font-size:15px;
}

.category{
font-size:13px;
padding:7px 15px;
}

.blog-content{
padding:18px;
}

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

.blog-content h3{
font-size:18px;
}

.blog-content p,
.blog-content li,
.intro{
font-size:15px;
line-height:1.8;
}

.toc h2{
font-size:22px;
}

.back-btn{
font-size:14px;
padding:9px 16px;
}

table{
min-width:600px;
}

}