/*=========================================================
VICOHI BLOG CSS
PART 1
(Layout + Hero + Typography)
Safe for Common Navbar & Footer
=========================================================*/

/*==========================
ROOT
==========================*/

:root{

--primary:#062B70;
--secondary:#1960C7;
--accent:#08B8A3;

--bg:#F6F9FC;
--white:#ffffff;

--text:#27364B;
--light-text:#64748B;

--border:#E5ECF5;

--radius:18px;

--shadow:0 12px 35px rgba(6,43,112,.08);

--transition:.35s ease;

}

/*==========================
BLOG WRAPPER
==========================*/

.blog-content{

max-width:1180px;

margin:50px auto 80px;

padding:0 22px;

font-family:Inter,Segoe UI,Arial,sans-serif;

color:var(--text);

}

/*==========================
TYPOGRAPHY
==========================*/

.blog-content h1{

font-size:clamp(2.4rem,5vw,3.8rem);

font-weight:800;

line-height:1.15;

color:var(--primary);

margin-bottom:25px;

letter-spacing:-1px;

}

.blog-content h2{

font-size:2rem;

font-weight:800;

color:var(--primary);

margin:70px 0 20px;

line-height:1.25;

position:relative;

}

.blog-content h2::after{

content:"";

display:block;

width:75px;

height:5px;

margin-top:12px;

border-radius:50px;

background:linear-gradient(90deg,var(--accent),var(--secondary));

}

.blog-content h3{

font-size:1.35rem;

font-weight:700;

color:var(--primary);

margin:40px 0 15px;

}

.blog-content p{

font-size:17px;

line-height:1.9;

margin:18px 0;

color:var(--text);

}

.blog-content strong{

color:var(--primary);

}

.blog-content a{

color:var(--secondary);

text-decoration:none;

transition:var(--transition);

font-weight:600;

}

.blog-content a:hover{

color:var(--accent);

}

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

.blog-content .hero-section{

display:grid;

grid-template-columns:1.15fr .85fr;

gap:55px;

align-items:center;

background:linear-gradient(135deg,#062B70,#1960C7);

padding:70px;

border-radius:26px;

margin-bottom:60px;

overflow:hidden;

position:relative;

}

.blog-content .hero-section::before{

content:"";

position:absolute;

width:420px;

height:420px;

right:-140px;

top:-170px;

background:rgba(255,255,255,.06);

border-radius:50%;

}

.blog-content .hero-content{

position:relative;

z-index:2;

}

.blog-content .blog-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

background:rgba(255,255,255,.16);

border:1px solid rgba(255,255,255,.22);

border-radius:999px;

font-size:14px;

font-weight:600;

color:#fff;

margin-bottom:22px;

backdrop-filter:blur(8px);

}

.blog-content .hero-section h1{

color:#fff;

margin:0 0 25px;

}

.blog-content .hero-subtitle{

font-size:18px;

line-height:1.9;

color:#EAF6FF;

margin-bottom:35px;

}

.blog-content .hero-subtitle strong{

color:#fff;

}

.blog-content .hero-actions{

display:flex;

gap:16px;

flex-wrap:wrap;

}

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

.blog-content .cta-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

background:var(--accent);

color:#fff;

font-weight:700;

border-radius:999px;

transition:var(--transition);

box-shadow:0 12px 30px rgba(8,184,163,.30);

}

.blog-content .cta-btn:hover{

transform:translateY(-3px);

background:#11c9b3;

color:#fff;

}

.blog-content .secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border:2px solid rgba(255,255,255,.35);

border-radius:999px;

font-weight:700;

color:#fff;

transition:var(--transition);

}

.blog-content .secondary-btn:hover{

background:#fff;

color:var(--primary);

}

/*==========================
HERO IMAGE
==========================*/

.blog-content .hero-image{

position:relative;

z-index:2;

text-align:center;

}

.blog-content .hero-image img{

width:100%;

max-width:500px;

display:block;

margin:auto;

border-radius:20px;

background:#fff;

padding:12px;

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

}

/*==========================
CONTENT IMAGE
==========================*/

.blog-content img{

display:block;

width:100%;

max-width:980px;

margin:45px auto;

border-radius:20px;

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.blog-content img:hover{

transform:translateY(-5px);

}

/*==========================
LISTS
==========================*/

.blog-content ul,
.blog-content ol{

padding-left:24px;

margin:20px 0;

}

.blog-content li{

margin-bottom:12px;

line-height:1.8;

}

/*==========================
SECTION SPACING
==========================*/

.blog-content>section{

margin-bottom:70px;

}

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

@media(max-width:992px){

.blog-content{

padding:0 18px;

}

.blog-content .hero-section{

grid-template-columns:1fr;

padding:50px;

text-align:center;

}

.blog-content .hero-actions{

justify-content:center;

}

}

@media(max-width:768px){

.blog-content{

margin:30px auto 60px;

padding:0 16px;

}

.blog-content h1{

font-size:2.2rem;

}

.blog-content h2{

font-size:1.7rem;

}

.blog-content h3{

font-size:1.2rem;

}

.blog-content p{

font-size:16px;

line-height:1.8;

}

.blog-content .hero-section{

padding:35px 24px;

border-radius:20px;

gap:30px;

}

.blog-content .hero-actions{

flex-direction:column;

}

.blog-content .cta-btn,
.blog-content .secondary-btn{

width:100%;

}

}
/*=========================================================
VICOHI BLOG CSS
PART 2
(Cards • Feature Boxes • Tables • Tool Cards)
Safe for Common Navbar & Footer
=========================================================*/

/*==========================
FEATURE / TOOL / TIP BOXES
==========================*/

.blog-content .feature-box,
.blog-content .tool-box,
.blog-content .tip-box,
.blog-content .step-box,
.blog-content .highlight-box{

background:#fff;

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

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

border-radius:20px;

padding:32px;

margin:35px 0;

box-shadow:var(--shadow);

transition:var(--transition);

}

.blog-content .feature-box:hover,
.blog-content .tool-box:hover,
.blog-content .tip-box:hover,
.blog-content .step-box:hover,
.blog-content .highlight-box:hover{

transform:translateY(-6px);

box-shadow:0 18px 40px rgba(6,43,112,.12);

}

.blog-content .feature-box h3,
.blog-content .tool-box h3,
.blog-content .tip-box h3,
.blog-content .step-box h3,
.blog-content .highlight-box h3{

margin-top:0;

margin-bottom:18px;

}

.blog-content .tip-box{

background:linear-gradient(135deg,#F3FFFD,#F8FBFF);

}

.blog-content .tip-box strong{

color:var(--accent);

}

/*==========================
BUTTON DEMO
==========================*/

.blog-content .button-demo{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

border-radius:50px;

font-weight:700;

margin:20px 0;

box-shadow:0 14px 30px rgba(25,96,199,.25);

}

/*==========================
FEATURE GRID
==========================*/

.blog-content .feature-grid{

display:grid;

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

gap:28px;

margin:40px 0;

}

/*==========================
CARD
==========================*/

.blog-content .card{

background:#fff;

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

border-radius:20px;

padding:30px;

box-shadow:var(--shadow);

transition:var(--transition);

}

.blog-content .card:hover{

transform:translateY(-7px);

box-shadow:0 20px 40px rgba(6,43,112,.12);

}

.blog-content .card h3{

margin-top:0;

margin-bottom:15px;

}

.blog-content .card p{

margin-bottom:0;

}

/*==========================
USE CASE GRID
==========================*/

.blog-content .usecase-grid{

display:grid;

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

gap:24px;

margin:40px 0;

}

.blog-content .usecase{

background:#fff;

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

border-radius:18px;

padding:26px;

box-shadow:0 8px 22px rgba(6,43,112,.06);

transition:var(--transition);

}

.blog-content .usecase:hover{

transform:translateY(-6px);

border-color:var(--accent);

}

.blog-content .usecase h3{

margin-top:0;

margin-bottom:12px;

}

.blog-content .usecase p{

margin:0;

}

/*==========================
RELATED TOOLS
==========================*/

.blog-content .related-tools{

display:grid;

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

gap:28px;

margin:40px 0;

}

.blog-content .tool-card{

background:#fff;

padding:30px;

border-radius:20px;

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

box-shadow:var(--shadow);

transition:var(--transition);

}

.blog-content .tool-card:hover{

transform:translateY(-8px);

box-shadow:0 20px 40px rgba(6,43,112,.12);

}

.blog-content .tool-card h3{

margin-top:0;

margin-bottom:14px;

}

.blog-content .tool-card p{

margin-bottom:18px;

}

.blog-content .tool-card a{

font-weight:700;

}

/*==========================
TABLES
==========================*/

.blog-content .feature-table,
.blog-content .comparison-table{

width:100%;

border-collapse:collapse;

margin:40px 0;

background:#fff;

border-radius:18px;

overflow:hidden;

box-shadow:var(--shadow);

}

.blog-content .feature-table thead,
.blog-content .comparison-table thead{

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

}

.blog-content .feature-table th,
.blog-content .comparison-table th{

padding:18px;

font-size:16px;

text-align:left;

font-weight:700;

}

.blog-content .feature-table td,
.blog-content .comparison-table td{

padding:18px;

border-bottom:1px solid #EDF2F8;

font-size:15px;

}

.blog-content .feature-table tbody tr:hover,
.blog-content .comparison-table tbody tr:hover{

background:#F7FBFF;

}

.blog-content .feature-table tbody tr:last-child td,
.blog-content .comparison-table tbody tr:last-child td{

border-bottom:none;

}

/*==========================
BENEFITS
==========================*/

.blog-content .benefits-list{

display:grid;

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

gap:16px;

padding:0;

margin:35px 0;

list-style:none;

}

.blog-content .benefits-list li{

background:#fff;

padding:18px 20px;

border-radius:15px;

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

box-shadow:0 8px 20px rgba(6,43,112,.05);

margin:0;

transition:var(--transition);

}

.blog-content .benefits-list li:hover{

transform:translateY(-5px);

border-color:var(--accent);

}

.blog-content .benefits-list li::before{

content:"✓";

display:inline-flex;

align-items:center;

justify-content:center;

width:22px;

height:22px;

margin-right:10px;

background:var(--accent);

color:#fff;

font-size:13px;

font-weight:700;

border-radius:50%;

}

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

@media(max-width:768px){

.blog-content .feature-grid,
.blog-content .related-tools,
.blog-content .usecase-grid,
.blog-content .benefits-list{

grid-template-columns:1fr;

}

.blog-content .feature-box,
.blog-content .tool-box,
.blog-content .tip-box,
.blog-content .step-box,
.blog-content .highlight-box,
.blog-content .card,
.blog-content .tool-card,
.blog-content .usecase{

padding:22px;

}

.blog-content .feature-table,
.blog-content .comparison-table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

/*=========================================================
VICOHI BLOG CSS
PART 3
(FAQ • CTA • Author • Conclusion • Animations)
Safe for Common Navbar & Footer
=========================================================*/

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

.blog-content .faq{

background:#fff;

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

border-radius:18px;

padding:28px 30px;

margin:22px 0;

box-shadow:var(--shadow);

transition:var(--transition);

}

.blog-content .faq:hover{

transform:translateY(-5px);

border-color:var(--accent);

box-shadow:0 18px 40px rgba(6,43,112,.10);

}

.blog-content .faq h3{

margin:0 0 14px;

font-size:20px;

color:var(--primary);

line-height:1.5;

}

.blog-content .faq p{

margin:0;

color:var(--text);

line-height:1.9;

}

/*==========================
CTA SECTION
==========================*/

.blog-content .cta-section{

margin:80px 0;

padding:70px 50px;

border-radius:26px;

background:linear-gradient(135deg,#062B70,#1960C7);

text-align:center;

box-shadow:0 20px 50px rgba(6,43,112,.18);

}

.blog-content .cta-section h2{

color:#fff;

margin-top:0;

}

.blog-content .cta-section h2::after{

margin-left:auto;

margin-right:auto;

background:var(--accent);

}

.blog-content .cta-section p{

color:#EAF6FF;

max-width:760px;

margin:20px auto 35px;

}

.blog-content .cta-section .btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 38px;

background:#08B8A3;

color:#fff;

border-radius:999px;

font-weight:700;

transition:var(--transition);

box-shadow:0 15px 35px rgba(8,184,163,.25);

}

.blog-content .cta-section .btn-primary:hover{

background:#fff;

color:var(--primary);

transform:translateY(-4px);

}

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

.blog-content .author-box{

background:linear-gradient(135deg,#ffffff,#F8FBFF);

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

border-radius:24px;

padding:45px;

margin:80px 0;

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

}

.blog-content .author-box::before{

content:"";

position:absolute;

width:220px;

height:220px;

right:-80px;

top:-80px;

background:rgba(8,184,163,.06);

border-radius:50%;

}

.blog-content .author-box>*{

position:relative;

z-index:2;

}

.blog-content .author-box h2{

margin-top:0;

}

.blog-content .author-box p:last-child{

margin-bottom:0;

}

/*==========================
CONCLUSION
==========================*/

.blog-content .conclusion{

background:#fff;

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

border-radius:24px;

padding:50px;

margin:80px 0 40px;

box-shadow:var(--shadow);

}

.blog-content .conclusion h2{

margin-top:0;

}

.blog-content .conclusion .btn-primary{

display:inline-flex;

align-items:center;

justify-content:center;

padding:16px 36px;

border-radius:999px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-weight:700;

transition:var(--transition);

box-shadow:0 15px 35px rgba(25,96,199,.20);

}

.blog-content .conclusion .btn-primary:hover{

background:linear-gradient(135deg,var(--accent),var(--secondary));

transform:translateY(-4px);

}

/*==========================
ANIMATIONS
==========================*/

.blog-content .feature-box,
.blog-content .tool-box,
.blog-content .tip-box,
.blog-content .step-box,
.blog-content .highlight-box,
.blog-content .card,
.blog-content .tool-card,
.blog-content .usecase,
.blog-content .faq,
.blog-content .author-box,
.blog-content .conclusion,
.blog-content .cta-section{

animation:fadeUp .7s ease both;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/*==========================
IMAGE EFFECT
==========================*/

.blog-content img{

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

}

.blog-content img:hover{

transform:scale(1.02);

box-shadow:0 22px 45px rgba(6,43,112,.15);

}

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

.blog-content ::selection{

background:var(--accent);

color:#fff;

}

/*==========================
SPACING FIX
==========================*/

.blog-content>*:first-child{

margin-top:0;

}

.blog-content>*:last-child{

margin-bottom:0;

}

.blog-content .feature-box ul,
.blog-content .tool-box ul,
.blog-content .highlight-box ul,
.blog-content .step-box ol{

margin-bottom:0;

}

/*==========================
MOBILE
==========================*/

@media(max-width:768px){

.blog-content .faq{

padding:20px;

}

.blog-content .faq h3{

font-size:18px;

}

.blog-content .author-box{

padding:28px 24px;

margin:60px 0;

}

.blog-content .conclusion{

padding:30px 24px;

margin:60px 0;

}

.blog-content .cta-section{

padding:50px 24px;

margin:60px 0;

}

.blog-content .cta-section .btn-primary,
.blog-content .conclusion .btn-primary{

width:100%;

}

}

@media(max-width:480px){

.blog-content .faq{

padding:18px;

}

.blog-content .faq h3{

font-size:17px;

}

.blog-content .author-box,
.blog-content .conclusion{

padding:22px 18px;

}

.blog-content .cta-section{

padding:40px 18px;

}

}
/*=========================================================
VICOHI BLOG CSS
PART 4
(Final Polish • Mobile • Accessibility • Performance)
Navbar/Footer Completely Safe
=========================================================*/

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

html{

scroll-behavior:smooth;

}

/*==========================
FOCUS STATES
==========================*/

.blog-content a:focus,
.blog-content button:focus{

outline:3px solid rgba(8,184,163,.35);

outline-offset:4px;

border-radius:8px;

}

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

.blog-content code{

background:#EEF5FC;

padding:3px 8px;

border-radius:6px;

color:#062B70;

font-size:.95em;

}

.blog-content pre{

background:#0F172A;

color:#fff;

padding:22px;

border-radius:16px;

overflow:auto;

margin:30px 0;

}

.blog-content pre code{

background:none;

padding:0;

color:#fff;

}

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

.blog-content blockquote{

margin:35px 0;

padding:25px 30px;

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

background:#F8FCFF;

border-radius:0 18px 18px 0;

font-style:italic;

color:#475569;

}

/*==========================
HR
==========================*/

.blog-content hr{

border:none;

height:1px;

background:#E5ECF5;

margin:55px 0;

}

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

.blog-content .feature-table,
.blog-content .comparison-table{

display:table;

}

.blog-content .table-wrapper{

overflow-x:auto;

border-radius:18px;

}

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

.blog-content img{

height:auto;

object-fit:cover;

}

/*==========================
LONG WORD FIX
==========================*/

.blog-content p,
.blog-content li,
.blog-content td,
.blog-content th{

word-wrap:break-word;

overflow-wrap:break-word;

}

/*==========================
BUTTON ACTIVE
==========================*/

.blog-content .cta-btn:active,
.blog-content .secondary-btn:active,
.blog-content .btn-primary:active{

transform:scale(.98);

}

/*==========================
CARD BORDER ANIMATION
==========================*/

.blog-content .card,
.blog-content .tool-card,
.blog-content .feature-box,
.blog-content .tool-box,
.blog-content .usecase,
.blog-content .faq{

position:relative;

overflow:hidden;

}

.blog-content .card::before,
.blog-content .tool-card::before,
.blog-content .feature-box::before,
.blog-content .tool-box::before,
.blog-content .usecase::before,
.blog-content .faq::before{

content:"";

position:absolute;

left:0;

top:0;

height:4px;

width:0;

background:linear-gradient(90deg,#08B8A3,#1960C7);

transition:.4s;

}

.blog-content .card:hover::before,
.blog-content .tool-card:hover::before,
.blog-content .feature-box:hover::before,
.blog-content .tool-box:hover::before,
.blog-content .usecase:hover::before,
.blog-content .faq:hover::before{

width:100%;

}

/*==========================
IMAGE CAPTION
==========================*/

.blog-content figcaption{

text-align:center;

font-size:14px;

margin-top:-18px;

margin-bottom:30px;

color:#64748B;

}

/*==========================
PRINT
==========================*/

@media print{

.blog-content .hero-section{

background:#fff !important;

color:#000;

box-shadow:none;

}

.blog-content .cta-btn,
.blog-content .secondary-btn,
.blog-content .btn-primary{

display:none;

}

}

/*==========================
TABLET
==========================*/

@media(max-width:992px){

.blog-content{

max-width:100%;

}

.blog-content .hero-image img{

max-width:420px;

}

}

/*==========================
MOBILE
==========================*/

@media(max-width:768px){

.blog-content{

padding:0 16px;

margin:25px auto 50px;

}

.blog-content img{

margin:30px auto;

border-radius:16px;

}

.blog-content .feature-table,
.blog-content .comparison-table{

display:block;

overflow-x:auto;

white-space:nowrap;

-webkit-overflow-scrolling:touch;

}

.blog-content .feature-table th,
.blog-content .feature-table td,
.blog-content .comparison-table th,
.blog-content .comparison-table td{

padding:14px;

font-size:14px;

}

.blog-content blockquote{

padding:18px;

}

}

/*==========================
SMALL MOBILE
==========================*/

@media(max-width:480px){

.blog-content{

padding:0 14px;

}

.blog-content h1{

font-size:32px;

}

.blog-content h2{

font-size:26px;

}

.blog-content p{

font-size:15px;

}

.blog-content li{

font-size:15px;

}

.blog-content .blog-badge{

font-size:12px;

padding:8px 14px;

}

.blog-content .hero-image img{

padding:8px;

}

}

/*==========================
REDUCED MOTION
==========================*/

@media(prefers-reduced-motion:reduce){

.blog-content *{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}

/*=========================================================
IMPORTANT
This CSS NEVER targets:

body
header
nav
footer
.container
section
a
ul
img

Everything is scoped inside:

.blog-content

So Navbar & Footer Components remain unaffected.
=========================================================*/