/* ==========================================================
   ILOVEIMAGETOOL BLOG
   Premium Reading Experience
   Part 1A
   Layout • Container • Reading Width
   ========================================================== */

/* ------------------------------
   Design Variables
--------------------------------*/

:root{

--blog-max-width:920px;
--blog-content-width:100%;

--blog-radius:22px;
--blog-radius-small:16px;

--blog-shadow:
0 10px 35px rgba(16,24,40,.08);

--blog-shadow-hover:
0 20px 60px rgba(16,24,40,.12);

--blog-border:#e8edf4;

--blog-bg:#ffffff;

--blog-page:#f8fafc;

--blog-heading:#111827;

--blog-text:#374151;

--blog-light:#6b7280;

--blog-link:#2563eb;

--blog-link-hover:#1d4ed8;

--blog-spacing:22px;

--blog-transition:.30s ease;

}


/* -----------------------------------
   Blog Page Background
------------------------------------*/

body.blog-page{

background:var(--blog-page);

}


/* -----------------------------------
   Main Content
------------------------------------*/

.main-content1{

background:var(--blog-page);

padding:40px 0 70px;

}


/* -----------------------------------
   Reading Container
------------------------------------*/

.container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:0 12px;
    box-sizing:border-box;
}

/* -----------------------------------
   Blog Card
------------------------------------*/

.blog-single{
    width:100%;
    max-width:920px;
    margin:0 auto;
    padding:0;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #ececec;
    box-shadow:0 6px 24px rgba(0,0,0,.06);
    position:relative;
    box-sizing:border-box;
}

.blog-single:hover{
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

/* -----------------------------------
   Reading Area
------------------------------------*/

.blog-single__content{
    width:100%;
    max-width:none;
    margin:0;
    padding:20px 22px 40px;
    box-sizing:border-box;
}


/* -----------------------------------
   Better Reading Width
------------------------------------*/

.blog-single>*{

width:100%;

}


/* -----------------------------------
   Remove Global Width Conflicts
------------------------------------*/

.blog-single .container{

width:100%;

max-width:none;

padding:0;

margin:0;

}


/* -----------------------------------
   Better Spacing Between Sections
------------------------------------*/

.blog-single section{

margin:70px 0;

}


/* -----------------------------------
   Images Never Overflow
------------------------------------*/

.blog-single img{

display:block;

max-width:100%;

height:auto;

}


/* -----------------------------------
   Embedded Elements
------------------------------------*/

.blog-single iframe,

.blog-single video,

.blog-single canvas,

.blog-single svg{

max-width:100%;

display:block;

}


/* -----------------------------------
   Selection Color
------------------------------------*/

.blog-single ::selection{

background:#dbeafe;

color:#111827;

}


/* -----------------------------------
   Smooth Scroll
------------------------------------*/

html{

scroll-behavior:smooth;

}


/* -----------------------------------
   Horizontal Overflow Protection
------------------------------------*/

.blog-single{

overflow-wrap:break-word;

word-wrap:break-word;

}


/* -----------------------------------
   Utility
------------------------------------*/

.blog-hidden{

display:none!important;

}


/* -----------------------------------
   Anchor Offset
------------------------------------*/

.blog-single h2,

.blog-single h3,

.blog-single h4{

scroll-margin-top:120px;

}

/* ==========================================================
   PART 1B
   PREMIUM HERO BANNER
========================================================== */
/* ==========================================
   Featured Image Wrapper
========================================== */

.blog-single__image{
    position: relative;
    width: 100%;
    margin: 0;
    padding: 20px;
    background: #fff;
    border-radius: 18px;
    overflow: visible;
    box-sizing: border-box;
}

/* Featured Image */

.blog-single__image img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    object-fit:contain;
    border-radius:18px;
}

/* Loading State */

.blog-single__image img[loading="lazy"]{

background:#f5f7fb;

}


/* Responsive Images */

.blog-single__content img{

display:block;

max-width:100%;

height:auto;

margin:40px auto;

border-radius:18px;

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

transition:
transform .35s ease,
box-shadow .35s ease;

}


.blog-single__content img:hover{

transform:translateY(-3px);

box-shadow:
0 20px 45px rgba(0,0,0,.12);

}


/* Figure */

.blog-single figure{

margin:50px 0;

}


.blog-single figure img{

margin-bottom:18px;

}


.blog-single figcaption{

text-align:center;

font-size:15px;

line-height:1.7;

color:#6b7280;

max-width:760px;

margin:auto;

}


/* Embedded Videos */

.blog-single iframe,

.blog-single video{

display:block;

width:100%;

aspect-ratio:16/9;

border:none;

border-radius:18px;

overflow:hidden;

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

margin:45px auto;

}


/* Image Alignment */

.blog-single img.aligncenter{

margin-left:auto;

margin-right:auto;

}


.blog-single img.alignleft{

float:left;

margin:
0 30px 20px 0;

max-width:45%;

}


.blog-single img.alignright{

float:right;

margin:
0 0 20px 30px;

max-width:45%;

}


/* Clear Floats */

.blog-single::after{

content:"";

display:block;

clear:both;

}


/* Image Grid */

.blog-image-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(260px,1fr));

gap:20px;

margin:45px 0;

}


.blog-image-grid img{

margin:0;

height:100%;

aspect-ratio:1/1;

object-fit:cover;

}


/* Hero Shadow */

.blog-single__image{

box-shadow:
0 8px 30px rgba(15,23,42,.05);

}


/* Desktop */

@media(min-width:1200px){

.blog-single__image img{

max-height:560px;

}

}


/* Tablet */

@media(max-width:991px){

.blog-single__image{

border-radius:20px 20px 0 0;

}

.blog-single__image img{

aspect-ratio:16/9;

}

}


/* Mobile */

@media(max-width:768px){

.blog-single__image{

border-radius:16px 16px 0 0;

}

.blog-single__image img{

aspect-ratio:16/10;

}

.blog-single__content img{

margin:28px auto;

border-radius:14px;

}

.blog-single iframe,

.blog-single video{

border-radius:14px;

margin:30px auto;

}

.blog-single img.alignleft,

.blog-single img.alignright{

float:none;

max-width:100%;

margin:25px auto;

}

}


/* Small Mobile */

@media(max-width:480px){

.blog-single__image{

border-radius:14px 14px 0 0;

}

.blog-single__image img{

aspect-ratio:4/3;

}

}

/* ==========================================================
   PART 1C
   PREMIUM ARTICLE HEADER
========================================================== */

/* ----------------------------------
   Article Header
-----------------------------------*/

.blog-single__header{
    width:100%;
    max-width:none;
    margin:0;
    padding:28px 22px 18px;
    background:#fff;
    box-sizing:border-box;
}


/* ----------------------------------
   Category Badge (Optional)
-----------------------------------*/

.blog-category{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 16px;

margin-bottom:22px;

background:#eef6ff;

border:1px solid #d8e9ff;

border-radius:50px;

font-size:13px;

font-weight:700;

letter-spacing:.4px;

text-transform:uppercase;

color:#2563eb;

}


/* ----------------------------------
   Main Title
-----------------------------------*/

.blog-single__title{

font-family:'Inter',sans-serif;

font-size:clamp(2.2rem,4vw,3.5rem);

font-weight:800;

line-height:1.18;

letter-spacing:-0.03em;

color:#111827;

margin:0 0 22px;

text-wrap:balance;

}


/* ----------------------------------
   Subtitle / Excerpt
-----------------------------------*/

.blog-single__excerpt{

font-size:1.28rem;

line-height:1.8;

color:#4b5563;

margin-bottom:35px;


}


/* ----------------------------------
   Meta Row
-----------------------------------*/

.blog-single__meta{

display:flex;

align-items:center;

justify-content:space-between;

gap:24px;

flex-wrap:wrap;

padding-top:24px;

border-top:1px solid #edf2f7;

}


/* Left Side */

.blog-meta-left{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}


/* Right Side */

.blog-meta-right{

display:flex;

align-items:center;

gap:18px;

flex-wrap:wrap;

}


/* ----------------------------------
   Author Avatar
-----------------------------------*/

.blog-author-avatar{

width:52px;

height:52px;

border-radius:50%;

overflow:hidden;

flex-shrink:0;

background:#eef2f7;

border:2px solid #fff;

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

}


.blog-author-avatar img{

width:100%;

height:100%;

object-fit:cover;

}


/* ----------------------------------
   Author Info
-----------------------------------*/

.blog-author{

display:flex;

align-items:center;

gap:14px;

}


.blog-author-info{

display:flex;

flex-direction:column;

}


.blog-author-name{

font-size:16px;

font-weight:700;

color:#111827;

line-height:1.2;

}


.blog-author-role{

font-size:14px;

color:#6b7280;

margin-top:3px;

}


/* ----------------------------------
   Date
-----------------------------------*/

.blog-date{

display:flex;

align-items:center;

gap:7px;

font-size:15px;

font-weight:500;

color:#6b7280;

}


/* ----------------------------------
   Reading Time
-----------------------------------*/

.blog-reading-time{

display:flex;

align-items:center;

gap:7px;

font-size:15px;

font-weight:500;

color:#6b7280;

}


/* ----------------------------------
   Updated Date
-----------------------------------*/

.blog-updated{

display:flex;

align-items:center;

gap:7px;

font-size:14px;

color:#6b7280;

}


/* ----------------------------------
   Dot Separator
-----------------------------------*/

.blog-dot{

width:5px;

height:5px;

border-radius:50%;

background:#cbd5e1;

}


/* ----------------------------------
   Share Buttons
-----------------------------------*/

.blog-share{

display:flex;

align-items:center;

gap:10px;

}


.blog-share a{

width:40px;

height:40px;

display:flex;

align-items:center;

justify-content:center;

border-radius:50%;

background:#f8fafc;

border:1px solid #e5e7eb;

color:#4b5563;

text-decoration:none;

transition:all .25s ease;

}


.blog-share a:hover{

background:#2563eb;

border-color:#2563eb;

color:#fff;

transform:translateY(-2px);

}


/* ----------------------------------
   Divider
-----------------------------------*/

.blog-divider{

width:100%;

height:1px;

background:#eef2f7;

margin:35px 0;

}


/* ----------------------------------
   Mobile
-----------------------------------*/

@media(max-width:768px){

.blog-single__header{

padding:30px 16px 18px;

.blog-single{
    margin:12px auto;
}

.blog-single__content{
    padding:16px;
}

.blog-single__header{
    padding:20px 16px;
}

}

.blog-single__title{

font-size:2rem;

line-height:1.25;

margin-bottom:18px;

}

.blog-single__excerpt{

font-size:1.05rem;

line-height:1.7;

margin-bottom:24px;

}

.blog-single__meta{

gap:18px;

}

.blog-author-avatar{

width:46px;

height:46px;

}

.blog-author-name{

font-size:15px;

}

.blog-author-role,

.blog-date,

.blog-reading-time,

.blog-updated{

font-size:13px;

}

.blog-share{

width:100%;

justify-content:flex-start;

}

}


/* ----------------------------------
   Small Phones
-----------------------------------*/

@media(max-width:480px){

.blog-single__header{

padding:24px 12px 16px;

}

.blog-single__title{

font-size:1.75rem;

}

.blog-single__excerpt{

font-size:1rem;

}

.blog-single__meta{

flex-direction:column;

align-items:flex-start;

}

.blog-meta-left,

.blog-meta-right{

width:100%;

}

}

/* ==========================================================
   PART 1D
   PREMIUM TYPOGRAPHY
   Medium • HubSpot • Canva Style
========================================================== */

/* ----------------------------------
   Article Content Wrapper
-----------------------------------*/

.blog-single__content{

font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

font-size:19px;

font-weight:400;

line-height:1.95;

color:#374151;

letter-spacing:.01em;

text-rendering:optimizeLegibility;

-webkit-font-smoothing:antialiased;

-moz-osx-font-smoothing:grayscale;

}


/* ----------------------------------
   Paragraph
-----------------------------------*/

.blog-single__content p{

margin:0 0 28px;

color:#374151;

word-break:normal;

overflow-wrap:break-word;

}


/* Last paragraph */

.blog-single__content p:last-child{

margin-bottom:0;

}


/* ----------------------------------
   Strong
-----------------------------------*/

.blog-single__content strong{

font-weight:700;

color:#111827;

}


/* ----------------------------------
   Bold
-----------------------------------*/

.blog-single__content b{

font-weight:700;

color:#111827;

}


/* ----------------------------------
   Italic
-----------------------------------*/

.blog-single__content em{

font-style:italic;

color:#4b5563;

}


/* ----------------------------------
   Small
-----------------------------------*/

.blog-single__content small{

font-size:.92rem;

color:#6b7280;

}


/* ----------------------------------
   Highlight
-----------------------------------*/

.blog-single__content mark{

background:#FEF3C7;

padding:2px 6px;

border-radius:5px;

}


/* ----------------------------------
   Links
-----------------------------------*/

.blog-single__content a{

color:#2563eb;

text-decoration:none;

font-weight:500;

transition:all .25s ease;

border-bottom:1px solid transparent;

}


.blog-single__content a:hover{

color:#1d4ed8;

border-color:#1d4ed8;

}


/* ----------------------------------
   Horizontal Rule
-----------------------------------*/

.blog-single__content hr{

border:none;

height:1px;

background:#E5E7EB;

margin:55px 0;

}


/* ----------------------------------
   H2
-----------------------------------*/

.blog-single__content h2{

font-size:2.25rem;

font-weight:800;

line-height:1.28;

letter-spacing:-.03em;

color:#111827;

margin:70px 0 26px;

position:relative;

padding-bottom:14px;

}


.blog-single__content h2::after{

content:"";

position:absolute;

left:0;

bottom:0;

width:70px;

height:4px;

border-radius:30px;

background:#2563eb;

}


/* ----------------------------------
   H3
-----------------------------------*/

.blog-single__content h3{

font-size:1.75rem;

font-weight:700;

line-height:1.35;

color:#111827;

margin:55px 0 20px;

}


/* ----------------------------------
   H4
-----------------------------------*/

.blog-single__content h4{

font-size:1.35rem;

font-weight:700;

margin:40px 0 16px;

color:#111827;

}


/* ----------------------------------
   H5
-----------------------------------*/

.blog-single__content h5{

font-size:1.15rem;

font-weight:700;

margin:28px 0 12px;

color:#111827;

}


/* ----------------------------------
   H6
-----------------------------------*/

.blog-single__content h6{

font-size:1rem;

font-weight:700;

margin:22px 0 10px;

text-transform:uppercase;

letter-spacing:.06em;

color:#6B7280;

}


/* ----------------------------------
   Lead Paragraph
-----------------------------------*/

.blog-single__content>.lead{

font-size:1.32rem;

line-height:1.85;

color:#4B5563;

font-weight:400;

margin-bottom:42px;

}


/* ----------------------------------
   Drop Cap
-----------------------------------*/

.blog-single__content>.dropcap:first-letter{

float:left;

font-size:4.4rem;

line-height:1;

padding-right:12px;

padding-top:8px;

font-weight:800;

color:#2563eb;

}


/* ----------------------------------
   Text Alignment
-----------------------------------*/

.blog-single__content .text-center{

text-align:center;

}

.blog-single__content .text-right{

text-align:right;

}

.blog-single__content .text-left{

text-align:left;

}


/* ----------------------------------
   Reading Width
-----------------------------------*/

.blog-single__content>*{

max-width:100%;

}


/* ----------------------------------
   Block Spacing
-----------------------------------*/

.blog-single__content>*+*{

margin-top:0;

}


/* ----------------------------------
   Accessibility
-----------------------------------*/

.blog-single__content a:focus{

outline:3px solid rgba(37,99,235,.2);

outline-offset:4px;

border-radius:4px;

}


/* ----------------------------------
   Mobile
-----------------------------------*/

@media(max-width:768px){

.blog-single__content{

font-size:17px;

line-height:1.85;

}

.blog-single__content p{

margin-bottom:22px;

}

.blog-single__content h2{

font-size:1.8rem;

margin:45px 0 18px;

padding-bottom:10px;

}

.blog-single__content h2::after{

width:55px;

height:3px;

}

.blog-single__content h3{

font-size:1.45rem;

margin:36px 0 16px;

}

.blog-single__content h4{

font-size:1.2rem;

}

.blog-single__content .lead{

font-size:1.12rem;

}

}


/* ----------------------------------
   Small Phones
-----------------------------------*/

@media(max-width:480px){

.blog-single__content{

font-size:16px;

line-height:1.82;

}

.blog-single__content h2{

font-size:1.55rem;

}

.blog-single__content h3{

font-size:1.3rem;

}

}

/* ==========================================================
   PART 2A
   PREMIUM LISTS
   Medium • HubSpot • Canva Style
==========================================================*/

/*---------------------------------------------------
  Default Lists
---------------------------------------------------*/

.blog-single__content ul,
.blog-single__content ol{

margin:32px 0;

padding-left:34px;

}


.blog-single__content li{

margin-bottom:16px;

line-height:1.9;

color:#374151;

padding-left:4px;

}


.blog-single__content li:last-child{

margin-bottom:0;

}


/*---------------------------------------------------
  Better Bullets
---------------------------------------------------*/

.blog-single__content ul{

list-style:none;

padding-left:0;

}


.blog-single__content ul li{

position:relative;

padding-left:34px;

}


.blog-single__content ul li::before{

content:"";

position:absolute;

left:0;

top:.78em;

width:10px;

height:10px;

border-radius:50%;

background:#2563eb;

box-shadow:

0 0 0 5px rgba(37,99,235,.10);

}


/*---------------------------------------------------
  Ordered Lists
---------------------------------------------------*/

.blog-single__content ol{

counter-reset:item;

list-style:none;

padding-left:0;

}


.blog-single__content ol>li{

counter-increment:item;

position:relative;

padding-left:58px;

min-height:42px;

}


.blog-single__content ol>li::before{

content:counter(item);

position:absolute;

left:0;

top:0;

width:36px;

height:36px;

border-radius:50%;

background:#2563eb;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:15px;

font-weight:700;

box-shadow:

0 8px 18px rgba(37,99,235,.22);

}


/*---------------------------------------------------
 Nested Lists
---------------------------------------------------*/

.blog-single__content li ul,

.blog-single__content li ol{

margin-top:18px;

margin-bottom:8px;

}


.blog-single__content li li{

font-size:.97em;

}


/*---------------------------------------------------
 Check List
---------------------------------------------------*/

.blog-checklist{

list-style:none;

padding:0;

margin:40px 0;

}


.blog-checklist li{

position:relative;

padding:18px 18px 18px 58px;

margin-bottom:14px;

background:#F8FAFC;

border:1px solid #E5E7EB;

border-radius:14px;

transition:.25s ease;

}


.blog-checklist li:hover{

background:#fff;

transform:translateY(-2px);

box-shadow:

0 12px 28px rgba(15,23,42,.08);

}


.blog-checklist li::before{

content:"✓";

position:absolute;

left:18px;

top:18px;

width:28px;

height:28px;

border-radius:50%;

background:#16A34A;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-weight:700;

}


/*---------------------------------------------------
 Pros List
---------------------------------------------------*/

.blog-pros{

list-style:none;

padding:0;

margin:40px 0;

}


.blog-pros li{

padding:16px 18px 16px 56px;

margin-bottom:14px;

background:#ECFDF5;

border-left:5px solid #10B981;

border-radius:12px;

position:relative;

}


.blog-pros li::before{

content:"✔";

position:absolute;

left:18px;

top:16px;

font-size:18px;

color:#10B981;

font-weight:700;

}


/*---------------------------------------------------
 Cons List
---------------------------------------------------*/

.blog-cons{

list-style:none;

padding:0;

margin:40px 0;

}


.blog-cons li{

padding:16px 18px 16px 56px;

margin-bottom:14px;

background:#FEF2F2;

border-left:5px solid #EF4444;

border-radius:12px;

position:relative;

}


.blog-cons li::before{

content:"✕";

position:absolute;

left:18px;

top:16px;

font-size:18px;

font-weight:700;

color:#EF4444;

}


/*---------------------------------------------------
 Feature List
---------------------------------------------------*/

.feature-list{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(250px,1fr));

gap:18px;

margin:45px 0;

padding:0;

list-style:none;

}


.feature-list li{

background:#fff;

border:1px solid #E5E7EB;

border-radius:16px;

padding:24px;

transition:.25s;

box-shadow:

0 6px 18px rgba(15,23,42,.05);

}


.feature-list li:hover{

transform:translateY(-4px);

box-shadow:

0 16px 35px rgba(15,23,42,.10);

}


/*---------------------------------------------------
 Icon List
---------------------------------------------------*/

.icon-list{

list-style:none;

padding:0;

margin:40px 0;

}


.icon-list li{

display:flex;

align-items:flex-start;

gap:16px;

padding:14px 0;

}


.icon-list i{

width:36px;

height:36px;

border-radius:50%;

background:#EFF6FF;

display:flex;

align-items:center;

justify-content:center;

color:#2563EB;

flex-shrink:0;

}


/*---------------------------------------------------
 Divider Between Items
---------------------------------------------------*/

.blog-list-divider li{

border-bottom:1px solid #EEF2F7;

padding-bottom:18px;

margin-bottom:18px;

}


.blog-list-divider li:last-child{

border-bottom:none;

margin-bottom:0;

}


/*---------------------------------------------------
 Mobile
---------------------------------------------------*/

@media(max-width:768px){

.blog-single__content ul,

.blog-single__content ol{

margin:24px 0;

}


.blog-single__content li{

margin-bottom:14px;

line-height:1.8;

}


.blog-single__content ul li{

padding-left:28px;

}


.blog-single__content ol>li{

padding-left:50px;

}


.blog-single__content ol>li::before{

width:32px;

height:32px;

font-size:14px;

}


.feature-list{

grid-template-columns:1fr;

gap:14px;

}

.blog-checklist li,

.blog-pros li,

.blog-cons li{

padding:16px 16px 16px 52px;

}

}

/* ==========================================================
   PART 2B
   PREMIUM TABLES
   HubSpot • Medium • Canva Style
==========================================================*/

/*---------------------------------------------------
  Table Wrapper
---------------------------------------------------*/

.blog-table{

width:100%;

overflow-x:auto;

margin:50px 0;

border-radius:18px;

border:1px solid #E5E7EB;

background:#fff;

box-shadow:0 8px 28px rgba(15,23,42,.06);

-webkit-overflow-scrolling:touch;

}

.blog-table::-webkit-scrollbar{

height:8px;

}

.blog-table::-webkit-scrollbar-thumb{

background:#CBD5E1;

border-radius:12px;

}

/*---------------------------------------------------
  Default Table
---------------------------------------------------*/

.blog-single__content table{

width:100%;

min-width:700px;

border-collapse:collapse;

border-spacing:0;

font-size:16px;

background:#fff;

}

/*---------------------------------------------------
  Caption
---------------------------------------------------*/

.blog-single__content caption{

padding:18px;

font-size:18px;

font-weight:700;

text-align:left;

color:#111827;

}

/*---------------------------------------------------
  Header
---------------------------------------------------*/

.blog-single__content thead{

background:linear-gradient(135deg,#2563EB,#1D4ED8);

color:#fff;

}

.blog-single__content thead th{

padding:18px 20px;

font-size:15px;

font-weight:700;

text-align:left;

white-space:nowrap;

letter-spacing:.02em;

}

/*---------------------------------------------------
  Sticky Header
---------------------------------------------------*/

.blog-single__content thead th{

position:sticky;

top:0;

z-index:2;

}

/*---------------------------------------------------
  Table Body
---------------------------------------------------*/

.blog-single__content tbody td{

padding:18px 20px;

vertical-align:top;

line-height:1.8;

color:#374151;

border-bottom:1px solid #EEF2F7;

}

/*---------------------------------------------------
  Zebra Rows
---------------------------------------------------*/

.blog-single__content tbody tr:nth-child(even){

background:#F8FAFC;

}

/*---------------------------------------------------
  Hover
---------------------------------------------------*/

.blog-single__content tbody tr:hover{

background:#EFF6FF;

transition:.25s ease;

}

/*---------------------------------------------------
  Last Row
---------------------------------------------------*/

.blog-single__content tbody tr:last-child td{

border-bottom:none;

}

/*---------------------------------------------------
  Borders
---------------------------------------------------*/

.blog-single__content td,

.blog-single__content th{

border-right:1px solid #EEF2F7;

}

.blog-single__content td:last-child,

.blog-single__content th:last-child{

border-right:none;

}

/*---------------------------------------------------
  First Column Bold
---------------------------------------------------*/

.blog-single__content tbody td:first-child{

font-weight:600;

color:#111827;

}

/*---------------------------------------------------
  Comparison Table
---------------------------------------------------*/

.comparison-table{

margin:55px 0;

overflow:auto;

border-radius:18px;

border:1px solid #E5E7EB;

box-shadow:0 10px 28px rgba(15,23,42,.08);

}

.comparison-table table{

margin:0;

}

/*---------------------------------------------------
  Pricing Table
---------------------------------------------------*/

.pricing-table{

margin:60px 0;

}

.pricing-table td{

text-align:center;

}

.pricing-table th{

text-align:center;

}

/*---------------------------------------------------
  Highlight Column
---------------------------------------------------*/

.table-highlight{

background:#DBEAFE !important;

font-weight:700;

}

/*---------------------------------------------------
  Success
---------------------------------------------------*/

.table-success{

background:#ECFDF5 !important;

color:#166534;

}

/*---------------------------------------------------
  Warning
---------------------------------------------------*/

.table-warning{

background:#FEF3C7 !important;

color:#92400E;

}

/*---------------------------------------------------
  Danger
---------------------------------------------------*/

.table-danger{

background:#FEF2F2 !important;

color:#991B1B;

}

/*---------------------------------------------------
  Table Badge
---------------------------------------------------*/

.table-badge{

display:inline-flex;

align-items:center;

padding:6px 12px;

border-radius:30px;

font-size:13px;

font-weight:700;

background:#EFF6FF;

color:#2563EB;

}

/*---------------------------------------------------
  Check Icon
---------------------------------------------------*/

.table-check{

color:#16A34A;

font-size:20px;

font-weight:700;

}

/*---------------------------------------------------
  Cross Icon
---------------------------------------------------*/

.table-cross{

color:#DC2626;

font-size:20px;

font-weight:700;

}

/*---------------------------------------------------
  Table Note
---------------------------------------------------*/

.table-note{

margin-top:16px;

font-size:14px;

color:#6B7280;

font-style:italic;

}

/*---------------------------------------------------
  Responsive
---------------------------------------------------*/

@media(max-width:991px){

.blog-single__content table{

min-width:650px;

font-size:15px;

}

.blog-single__content thead th,

.blog-single__content tbody td{

padding:16px;

}

}

@media(max-width:768px){

.blog-table{

margin:35px 0;

border-radius:14px;

}

.blog-single__content table{

min-width:600px;

font-size:14px;

}

.blog-single__content thead th{

padding:14px;

font-size:14px;

}

.blog-single__content tbody td{

padding:14px;

line-height:1.7;

}

.table-badge{

font-size:12px;

padding:5px 10px;

}

}

@media(max-width:480px){

.blog-single__content table{

min-width:560px;

}

.blog-single__content thead th,

.blog-single__content tbody td{

padding:12px;

font-size:13px;

}

}

/* ==========================================================
   PART 2C
   PREMIUM CODE BLOCKS
   VS Code • GitHub • HubSpot Style
==========================================================*/

/*---------------------------------------------------
  Preformatted Code
---------------------------------------------------*/

.blog-single__content pre{

position:relative;

overflow-x:auto;

margin:42px 0;

padding:24px 28px;

background:#0F172A;

color:#E2E8F0;

border-radius:18px;

border:1px solid #1E293B;

font-size:15px;

line-height:1.8;

font-family:

"Fira Code",

"JetBrains Mono",

Consolas,

monospace;

box-shadow:

0 14px 40px rgba(15,23,42,.18);

-webkit-overflow-scrolling:touch;

}


/*---------------------------------------------------
  Scrollbar
---------------------------------------------------*/

.blog-single__content pre::-webkit-scrollbar{

height:10px;

}

.blog-single__content pre::-webkit-scrollbar-thumb{

background:#475569;

border-radius:12px;

}

.blog-single__content pre::-webkit-scrollbar-track{

background:#1E293B;

}


/*---------------------------------------------------
  Code Inside PRE
---------------------------------------------------*/

.blog-single__content pre code{

display:block;

background:none;

padding:0;

margin:0;

color:inherit;

font-size:inherit;

line-height:inherit;

white-space:pre;

word-break:normal;

}


/*---------------------------------------------------
  Inline Code
---------------------------------------------------*/

.blog-single__content code{

display:inline-block;

padding:3px 8px;

margin:0 2px;

background:#EFF6FF;

border:1px solid #DBEAFE;

border-radius:6px;

font-size:.93em;

font-family:

"Fira Code",

Consolas,

monospace;

color:#2563EB;

}


/*---------------------------------------------------
  Remove Inline Style in PRE
---------------------------------------------------*/

.blog-single__content pre code{

border:none;

background:none;

padding:0;

color:#E2E8F0;

}


/*---------------------------------------------------
  Keyboard Keys
---------------------------------------------------*/

.blog-single__content kbd{

display:inline-flex;

align-items:center;

justify-content:center;

padding:5px 10px;

margin:0 2px;

background:#F8FAFC;

border:1px solid #CBD5E1;

border-bottom:3px solid #94A3B8;

border-radius:6px;

font-size:13px;

font-weight:700;

font-family:inherit;

color:#111827;

}


/*---------------------------------------------------
  Samp
---------------------------------------------------*/

.blog-single__content samp{

font-family:

"JetBrains Mono",

monospace;

color:#DC2626;

}


/*---------------------------------------------------
  Variable
---------------------------------------------------*/

.blog-single__content var{

font-style:italic;

color:#7C3AED;

}


/*---------------------------------------------------
  Terminal Window
---------------------------------------------------*/

.terminal{

margin:42px 0;

border-radius:18px;

overflow:hidden;

border:1px solid #1E293B;

box-shadow:

0 14px 40px rgba(15,23,42,.18);

}


.terminal-header{

display:flex;

align-items:center;

gap:8px;

padding:14px 18px;

background:#1E293B;

}


.terminal-dot{

width:12px;

height:12px;

border-radius:50%;

}


.terminal-dot.red{

background:#EF4444;

}

.terminal-dot.yellow{

background:#F59E0B;

}

.terminal-dot.green{

background:#10B981;

}


.terminal-body{

padding:24px;

background:#020617;

color:#E2E8F0;

font-family:

"Fira Code",

Consolas,

monospace;

line-height:1.8;

overflow-x:auto;

}


/*---------------------------------------------------
  File Name Badge
---------------------------------------------------*/

.code-title{

display:flex;

align-items:center;

justify-content:space-between;

padding:12px 18px;

background:#111827;

color:#F9FAFB;

font-size:14px;

font-weight:600;

border-radius:

18px 18px 0 0;

}


/*---------------------------------------------------
  Copy Button
---------------------------------------------------*/

.copy-code{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 14px;

background:#2563EB;

color:#fff;

border:none;

border-radius:8px;

cursor:pointer;

font-size:13px;

font-weight:600;

transition:.25s ease;

}


.copy-code:hover{

background:#1D4ED8;

transform:translateY(-2px);

}


/*---------------------------------------------------
  Output Block
---------------------------------------------------*/

.code-output{

margin-top:18px;

padding:18px;

background:#F8FAFC;

border-left:4px solid #10B981;

border-radius:10px;

font-size:15px;

color:#374151;

}


/*---------------------------------------------------
  Warning Block
---------------------------------------------------*/

.code-warning{

margin-top:18px;

padding:18px;

background:#FEF2F2;

border-left:4px solid #EF4444;

border-radius:10px;

color:#991B1B;

}


/*---------------------------------------------------
  Info Block
---------------------------------------------------*/

.code-info{

margin-top:18px;

padding:18px;

background:#EFF6FF;

border-left:4px solid #2563EB;

border-radius:10px;

color:#1E40AF;

}


/*---------------------------------------------------
  Mobile
---------------------------------------------------*/

@media(max-width:768px){

.blog-single__content pre{

padding:18px;

font-size:13px;

margin:30px 0;

border-radius:14px;

}

.blog-single__content code{

font-size:13px;

}

.code-title{

padding:10px 14px;

font-size:13px;

}

.copy-code{

padding:7px 12px;

font-size:12px;

}

.terminal-body{

padding:18px;

font-size:13px;

}

}

/* ==========================================================
   PART 2D
   PREMIUM BLOCKQUOTES & CALLOUT BOXES
   Medium • HubSpot • Canva Style
==========================================================*/

/*---------------------------------------------------
  Premium Blockquote
---------------------------------------------------*/

.blog-single__content blockquote{

position:relative;

margin:55px 0;

padding:36px 42px;

background:linear-gradient(135deg,#F8FAFC,#FFFFFF);

border-left:6px solid #2563EB;

border-radius:18px;

box-shadow:

0 10px 30px rgba(15,23,42,.06);

font-size:1.28rem;

font-style:italic;

font-weight:500;

line-height:1.9;

color:#1F2937;

overflow:hidden;

}


/* Decorative Quote */

.blog-single__content blockquote::before{

content:"“";

position:absolute;

top:-15px;

left:18px;

font-size:100px;

font-weight:700;

line-height:1;

color:#DBEAFE;

opacity:.9;

}


/* Quote Footer */

.blog-single__content blockquote cite{

display:block;

margin-top:25px;

font-size:15px;

font-style:normal;

font-weight:600;

color:#6B7280;

}


/*---------------------------------------------------
  Universal Callout
---------------------------------------------------*/

.blog-callout{

position:relative;

margin:45px 0;

padding:28px 30px;

border-radius:18px;

border:1px solid #E5E7EB;

background:#fff;

box-shadow:

0 10px 25px rgba(15,23,42,.05);

}


/* Title */

.blog-callout-title{

display:flex;

align-items:center;

gap:12px;

margin-bottom:15px;

font-size:20px;

font-weight:700;

color:#111827;

}


.blog-callout-title i{

font-size:22px;

}


/* Paragraph */

.blog-callout p:last-child{

margin-bottom:0;

}


/*---------------------------------------------------
  INFO BOX
---------------------------------------------------*/

.blog-info{

background:#EFF6FF;

border-left:5px solid #2563EB;

}


.blog-info .blog-callout-title{

color:#1D4ED8;

}


/*---------------------------------------------------
  SUCCESS BOX
---------------------------------------------------*/

.blog-success{

background:#ECFDF5;

border-left:5px solid #10B981;

}


.blog-success .blog-callout-title{

color:#047857;

}


/*---------------------------------------------------
  WARNING BOX
---------------------------------------------------*/

.blog-warning{

background:#FFFBEB;

border-left:5px solid #F59E0B;

}


.blog-warning .blog-callout-title{

color:#B45309;

}


/*---------------------------------------------------
  ERROR BOX
---------------------------------------------------*/

.blog-danger{

background:#FEF2F2;

border-left:5px solid #EF4444;

}


.blog-danger .blog-callout-title{

color:#B91C1C;

}


/*---------------------------------------------------
  TIP BOX
---------------------------------------------------*/

.blog-tip{

background:#F0FDF4;

border-left:5px solid #22C55E;

}


.blog-tip .blog-callout-title{

color:#15803D;

}


/*---------------------------------------------------
  NOTE BOX
---------------------------------------------------*/

.blog-note{

background:#F8FAFC;

border-left:5px solid #64748B;

}


.blog-note .blog-callout-title{

color:#334155;

}


/*---------------------------------------------------
  AI SUMMARY BOX
---------------------------------------------------*/

.ai-summary{

margin:55px 0;

padding:34px;

border-radius:12px;

background:

linear-gradient(135deg,

#EEF6FF,

#F8FBFF);

border:1px solid #BFDBFE;

box-shadow:

0 12px 35px rgba(37,99,235,.08);

}


.ai-summary h3{

margin-top:0;

margin-bottom:18px;

font-size:24px;

font-weight:800;

color:#1D4ED8;

}


.ai-summary p:last-child{

margin-bottom:0;

}


/*---------------------------------------------------
  KEY TAKEAWAYS
---------------------------------------------------*/

.key-takeaways{

margin:60px 0;

padding:35px;

border-radius:12px;

background:

linear-gradient(135deg,

#F8FAFC,

#FFFFFF);

border:1px solid #E5E7EB;

box-shadow:

0 10px 30px rgba(15,23,42,.06);

}


.key-takeaways h3{

margin-top:0;

margin-bottom:25px;

font-size:24px;

font-weight:800;

}


.key-takeaways ul{

margin:0;

padding:0;

list-style:none;

}


.key-takeaways li{

position:relative;

padding-left:36px;

margin-bottom:18px;

}


.key-takeaways li:last-child{

margin-bottom:0;

}


.key-takeaways li::before{

content:"✓";

position:absolute;

left:0;

top:2px;

width:24px;

height:24px;

border-radius:50%;

background:#2563EB;

color:#fff;

display:flex;

align-items:center;

justify-content:center;

font-size:13px;

font-weight:700;

}


/*---------------------------------------------------
  PRO TIP
---------------------------------------------------*/

.pro-tip{

margin:45px 0;

padding:26px 30px;

border-radius:18px;

background:

linear-gradient(135deg,

#FEFCE8,

#FFFFFF);

border:1px solid #FDE68A;

position:relative;

}


.pro-tip::before{

content:"💡";

position:absolute;

top:-18px;

left:28px;

font-size:34px;

}


/*---------------------------------------------------
  IMPORTANT
---------------------------------------------------*/

.important-box{

margin:45px 0;

padding:30px;

border-radius:18px;

background:#111827;

color:#fff;

}


.important-box h3,

.important-box h4,

.important-box p{

color:#fff;

}


.important-box p:last-child{

margin-bottom:0;

}


/*---------------------------------------------------
  Quote Highlight
---------------------------------------------------*/

.quote-highlight{

display:block;

padding:35px;

margin:50px 0;

text-align:center;

font-size:2rem;

font-weight:700;

line-height:1.6;

color:#111827;

}


/*---------------------------------------------------
  Mobile
---------------------------------------------------*/

@media(max-width:768px){

.blog-single__content blockquote{

padding:24px;

margin:35px 0;

font-size:1.1rem;

border-radius:14px;

}

.blog-single__content blockquote::before{

font-size:72px;

top:-10px;

left:12px;

}

.blog-callout,

.ai-summary,

.key-takeaways,

.pro-tip,

.important-box{

padding:22px;

border-radius:14px;

margin:30px 0;

}

.blog-callout-title{

font-size:18px;

}

.quote-highlight{

font-size:1.5rem;

padding:24px;

}

}

@media(max-width:480px){

.blog-single__content blockquote{

font-size:1rem;

line-height:1.8;

}

.ai-summary h3,

.key-takeaways h3{

font-size:20px;

}

.blog-callout-title{

font-size:17px;

}

}



@media (max-width:768px){

.blog-single__image img{
    width:100% !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
    aspect-ratio:auto !important;
}

}