* {
  box-sizing: border-box;
  }

body {
margin: 0;
background: #f7f8fc;
color: #171717;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.7;
}

/* =========================================
NAVBAR
========================================= */

.navbar {
padding: 15px 0;
}

.infohub-logo {
font-size: 27px;
font-weight: 800;
letter-spacing: -1px;
color: #111 !important;
}

.infohub-logo span {
color: #e63946;
}

/* Back Home Button */

.back-home-btn {
display: inline-flex;
align-items: center;
gap: 8px;

padding: 9px 17px;

border: 1px solid #dedede;
border-radius: 10px;

background: #fff;
color: #171717;

text-decoration: none;

font-size: 14px;
font-weight: 600;

transition: all 0.25s ease;

}

.back-home-btn:hover {
background: #111;
color: #fff;
border-color: #111;
}

/* =========================================
BLOG HEADER
========================================= */

.blog-header {
padding: 75px 0 55px;
background: #ffffff;
border-bottom: 1px solid #eeeeee;
}

.blog-category {
display: inline-block;

padding: 6px 14px;

border-radius: 50px;

background: #ffe9eb;
color: #d62839;

font-size: 13px;
font-weight: 700;

margin-bottom: 20px;

}

.blog-title {
max-width: 850px;
margin: 0 auto 20px;


font-size: clamp(34px, 5vw, 56px);

line-height: 1.12;
letter-spacing: -1.8px;

font-weight: 800;

color: #111;

}

.blog-intro {
max-width: 720px;


margin: 0 auto 20px;

font-size: 18px;

color: #666;


}

.blog-meta {
font-size: 14px;
color: #888;


display: flex;
justify-content: center;
align-items: center;
gap: 7px;


}

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

.blog-card {
margin: 45px 0 70px;

padding: 45px;

background: #fff;

border: 1px solid #e7e7e7;

border-radius: 18px;

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


}

/* =========================================
ARTICLE SECTIONS
========================================= */

.blog-section {
margin-bottom: 42px;
}

.blog-section h2,
.checklist-section h2 {
margin-bottom: 18px;

font-size: 28px;

line-height: 1.3;

font-weight: 750;

color: #111;

}

.blog-section h3 {
margin-top: 26px;
margin-bottom: 7px;

font-size: 19px;

font-weight: 700;

color: #222;

}

.blog-section p {
margin-bottom: 14px;

color: #4d4d4d;

font-size: 16px;

}

/* =========================================
INFOHUB TIP
========================================= */

.tip-box {
display: flex;
align-items: flex-start;
gap: 16px;

margin: 45px 0;

padding: 22px;

background: #f8f8f8;

border-left: 4px solid #e63946;

border-radius: 10px;

}

.tip-icon {
min-width: 42px;
height: 42px;

display: flex;
align-items: center;
justify-content: center;

background: #ffe9eb;

color: #e63946;

border-radius: 50%;

font-size: 18px;

}

.tip-box h4 {
margin: 0 0 5px;

font-size: 17px;
font-weight: 700;

}

.tip-box p {
margin: 0;

color: #555;

}

/* =========================================
CHECKLIST
========================================= */

.checklist-section {
margin-bottom: 45px;
}

.check-item {
height: 100%;

display: flex;
align-items: center;

gap: 10px;

padding: 13px 15px;

background: #fafafa;

border: 1px solid #e8e8e8;

border-radius: 9px;

color: #444;

font-size: 15px;

}

.check-item i {
color: #198754;
font-size: 16px;
}

/* =========================================
FINAL SECTION
========================================= */

.final-section {
padding-top: 15px;
border-top: 1px solid #eeeeee;
}

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

.article-footer {
padding-top: 25px;

border-top: 1px solid #eeeeee;

text-align: center;

}

.back-home-large {
display: inline-flex;
align-items: center;
gap: 9px;

padding: 12px 20px;

background: #111;
color: #fff;

border-radius: 10px;

text-decoration: none;

font-size: 15px;
font-weight: 600;

transition: all 0.25s ease;

}

.back-home-large:hover {
background: #e63946;
color: #fff;
}

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

.site-footer {
padding: 30px 0;

background: #fff;

border-top: 1px solid #e8e8e8;

text-align: center;

color: #888;

font-size: 14px;

}

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

@media (max-width: 768px) {

.blog-header {
    padding: 55px 0 40px;
}

.blog-card {
    padding: 30px 25px;
    margin-top: 30px;
}

.blog-title {
    letter-spacing: -1px;
}

.blog-intro {
    font-size: 16px;
}

}

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

@media (max-width: 576px) {

.navbar {
    padding: 12px 0;
}

.infohub-logo {
    font-size: 24px;
}

.back-home-btn {
    width: 100%;
    justify-content: center;
}

.blog-header {
    padding: 45px 0 35px;
}

.blog-title {
    font-size: 34px;
    line-height: 1.15;
}

.blog-intro {
    font-size: 15px;
    line-height: 1.6;
}

.blog-card {
    padding: 25px 18px;
    border-radius: 14px;
    margin: 25px 0 45px;
}

.blog-section h2,
.checklist-section h2 {
    font-size: 24px;
}

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

.blog-section p {
    font-size: 15px;
}

.tip-box {
    padding: 17px;
    gap: 12px;
}

.tip-icon {
    min-width: 36px;
    height: 36px;
    font-size: 15px;
}

.check-item {
    font-size: 14px;
}
}
/* =========================================
BLOG CONTENT - PROFESSIONAL STYLE
========================================= */

.blog-card {
background: #ffffff;
padding: 50px 55px;
margin: 50px 0 70px;

border: 1px solid #e8e8e8;
border-radius: 20px;

box-shadow:
    0 4px 10px rgba(0, 0, 0, 0.02),
    0 20px 50px rgba(0, 0, 0, 0.05);
}

/* =========================================
ARTICLE SECTION
========================================= */

.blog-section {
margin-bottom: 55px;
}

/* Section Heading */

.blog-section h2 {
position: relative;

margin: 0 0 20px;

padding-left: 17px;

font-size: 29px;
line-height: 1.3;

font-weight: 750;

letter-spacing: -0.5px;

color: #111111;

}

/* Red heading indicator */

.blog-section h2::before {
content: "";

position: absolute;

left: 0;
top: 4px;

width: 4px;
height: calc(100% - 8px);

background: #e63946;

border-radius: 10px;

}

/* =========================================
SUB HEADINGS
========================================= */

.blog-section h3 {
margin: 30px 0 8px;

font-size: 19px;

line-height: 1.4;

font-weight: 700;

color: #222222;

}

/* =========================================
PARAGRAPHS
========================================= */

.blog-section p {
max-width: 760px;

margin: 0 0 17px;

font-size: 16.5px;

line-height: 1.85;

color: #555555;

}

/* First paragraph after heading */

.blog-section h2 + p {
color: #3f3f3f;
}

/* =========================================
PASSPORT / IMPORTANT CONTENT
========================================= */

.blog-section h3 + p {
padding-left: 0;
}

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

.tip-box {
display: flex;

align-items: flex-start;

gap: 16px;

margin: 32px 0;

padding: 20px 22px;

background: #fff8f8;

border: 1px solid #f3d8da;

border-left: 4px solid #e63946;

border-radius: 12px;

}

/* Icon */

.tip-icon {
flex-shrink: 0;

width: 42px;
height: 42px;

display: flex;

align-items: center;
justify-content: center;

background: #ffe9eb;

color: #e63946;

border-radius: 50%;

font-size: 17px;

}

/* Tip heading */

.tip-box h4 {
margin: 0 0 5px;

font-size: 17px;

font-weight: 750;

color: #222222;

}

/* Tip paragraph */

.tip-box p {
margin: 0;
font-size: 15px;

line-height: 1.7;

color: #555555;

}

/* =========================================
VISUAL SEPARATION BETWEEN SECTIONS
========================================= */

.blog-section + .blog-section {
padding-top: 10px;
}

/* =========================================
DOCUMENT / CHECK LIST
========================================= */

.custom-list {
list-style: none;

margin: 25px 0;

padding: 0;

}

.custom-list li {
display: flex;

align-items: flex-start;

gap: 11px;

padding: 11px 14px;

margin-bottom: 8px;

background: #fafafa;

border: 1px solid #eeeeee;

border-radius: 9px;

color: #444444;

font-size: 15.5px;

line-height: 1.5;

transition: all 0.2s ease;

}

.custom-list li:hover {
background: #ffffff;

border-color: #dddddd;

transform: translateX(3px);

}

.custom-list li i {
flex-shrink: 0;

margin-top: 2px;

color: #198754;

font-size: 15px;

}

/* =========================================
QUICK CHECKLIST
========================================= */

.checklist-section {
margin-top: 20px;

margin-bottom: 55px;

}

.checklist-section h2 {
position: relative;

margin-bottom: 22px;

padding-left: 17px;

font-size: 29px;

font-weight: 750;

color: #111111;

}

.checklist-section h2::before {
content: "";

position: absolute;

left: 0;
top: 4px;

width: 4px;
height: calc(100% - 8px);

background: #e63946;

border-radius: 10px;

}

/* Checklist cards */

.check-item {
height: 100%;

display: flex;

align-items: center;

gap: 10px;

padding: 14px 16px;

background: #fafafa;

border: 1px solid #e9e9e9;

border-radius: 10px;

font-size: 15px;

color: #444444;

transition: all 0.2s ease;
}

.check-item:hover {
background: #ffffff;

border-color: #d9d9d9;

transform: translateY(-2px);

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

}

.check-item i {
flex-shrink: 0;

color: #198754;

font-size: 16px;
}
/* =========================================
FINAL SECTION
========================================= */

.final-section {
padding-top: 35px;

border-top: 1px solid #eeeeee;

}

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

.article-footer {
padding-top: 30px;

border-top: 1px solid #eeeeee;

text-align: center;

}

.back-home-large {
display: inline-flex;

align-items: center;
justify-content: center;

gap: 9px;

padding: 12px 21px;

background: #111111;

color: #ffffff;

border-radius: 10px;

text-decoration: none;

font-size: 15px;

font-weight: 600;

transition: all 0.25s ease;

}

.back-home-large:hover {
background: #e63946;

color: #ffffff;

transform: translateY(-2px);

}

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

@media (max-width: 991px) {

.blog-card {
    padding: 40px 35px;
}

.blog-section h2 {
    font-size: 27px;
}

}

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

@media (max-width: 576px) {

.blog-card {
    padding: 30px 20px;

    margin: 30px 0 50px;

    border-radius: 15px;
}

.blog-section {
    margin-bottom: 42px;
}

.blog-section h2,
.checklist-section h2 {
    font-size: 23px;

    padding-left: 13px;

    margin-bottom: 15px;
}

.blog-section h2::before,
.checklist-section h2::before {
    width: 3px;

    top: 3px;
}

.blog-section h3 {
    margin-top: 24px;

    font-size: 18px;
}

.blog-section p {
    font-size: 15px;

    line-height: 1.75;
}

.tip-box {
    gap: 12px;

    padding: 17px;

    margin: 28px 0;
}

.tip-icon {
    width: 36px;
    height: 36px;

    font-size: 15px;
}

.tip-box h4 {
    font-size: 16px;
}

.tip-box p {
    font-size: 14px;
}

.custom-list li {
    padding: 11px 12px;

    font-size: 14px;
}

}