/* ============================================= \r\n   Typography Classes \r\n============================================= */\r\n.d-flex { display: flex !important; }\r\n.align-items-center { align-items: center !important; }\r\n.align-items-start { align-items: flex-start !important; }\r\n.align-items-baseline { align-items: baseline !important; }\r\n.justify-content-center { justify-content: center !important; }\r\n.justify-content-between { justify-content: space-between !important; }\r\n.justify-content-end { justify-content: flex-end !important; }\r\n.flex-column { flex-direction: column !important; }\r\n.flex-grow-1 { flex-grow: 1 !important; }\r\n\r\n/* Spacing gaps */\r\n.gap-2 { gap: 0.5rem !important; }\r\n.gap-3 { gap: 1rem !important; }\r\n.gap-4 { gap: 1.5rem !important; }\r\n.gap-5 { gap: 3rem !important; }\r\n\r\n/* Margins */\r\n.m-0 { margin: 0 !important; }\r\n.mb-0 { margin-bottom: 0 !important; }\r\n.mb-1 { margin-bottom: 0.25rem !important; }\r\n.mb-2 { margin-bottom: 0.5rem !important; }\r\n.mb-3 { margin-bottom: 1rem !important; }\r\n.mb-4 { margin-bottom: 1.5rem !important; }\r\n.mb-5 { margin-bottom: 3rem !important; }\r\n.mt-ap { margin-top: auto !important; }\r\n.mt-auto { margin-top: auto !important; }\r\n.mt-2 { margin-top: 0.5rem !important; }\r\n.mt-3 { margin-top: 1rem !important; }\r\n.mt-4 { margin-top: 1.5rem !important; }\r\n.mt-5 { margin-top: 3rem !important; }\r\n.me-2 { margin-right: 0.5rem !important; }\r\n.me-3 { margin-right: 1rem !important; }\r\n.me-4 { margin-right: 1.5rem !important; }\r\n.ms-1 { margin-left: 0.25rem !important; }\r\n.ms-2 { margin-left: 0.5rem !important; }\r\n.ms-3 { margin-left: 1rem !important; }\r\n.me-auto { margin-right: auto !important; }\r\n\r\n/* Padding */\r\n.p-1 { padding: 0.25rem !important; }\r\n.p-2 { padding: 0.5rem !important; }\r\n.p-3 { padding: 1rem !important; }\r\n.p-4 { padding: 1.5rem !important; }\r\n.p-5 { padding: 3rem !important; }\r\n.pb-2 { padding-bottom: 0.5rem !important; }\r\n.pb-3 { padding-bottom: 1rem !important; }\r\n.pb-4 { padding-bottom: 1.5rem !important; }\r\n.pb-5 { padding-bottom: 3rem !important; }\r\n.pt-2 { padding-top: 0.5rem !important; }\r\n.pt-3 { padding-top: 1rem !important; }\r\n.pt-4 { padding-top: 1.5rem !important; }\r\n.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }\r\n.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }\r\n\r\n/* Utility */\r\n.w-100 { width: 100% !important; }\r\n.text-center { text-align: center !important; }\r\n.text-danger { color: #dc3545 !important; }\r\n.text-warning { color: #ffc107 !important; }\r\n.text-primary { color: var(--color-brand-blue) !important; }\r\n.text-muted { color: var(--color-text-muted) !important; }\r\n.text-dark { color: #212529 !important; }\r\n.position-relative { position: relative !important; }\r\n.h-100 { height: 100% !important; }\r\n.d-none { display: none !important; }\r\n\r\n.fs-1 { font-size: calc(1.375rem + 1.5vw) !important; }\r\n.fs-2 { font-size: calc(1.325rem + .9vw) !important; }\r\n.fs-3 { font-size: calc(1.3rem + .6vw) !important; }\r\n.fs-4 { font-size: calc(1.275rem + .3vw) !important; }\r\n.fs-5 { font-size: 1.25rem !important; }\r\n.fs-6 { font-size: 1rem !important; }\r\n.fw-bold { font-weight: 700 !important; }\r\n.fw-normal { font-weight: 400 !important; }\r\n\r\n@media (min-width: 576px) {\r\n  .d-sm-inline { display: inline !important; }\r\n}\r\n\r\n.text-white { color: var(--color-bg-white) !important; }\r\nh1 { font-size: clamp(3rem, 6vw, 5rem); font-weight: 900; letter-spacing: -2px; }\r\nh2 { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; letter-spacing: -1px; }\r\nh3 { font-size: 1.75rem; font-weight: 600; }\r\n.hero-subtitle { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--color-text-muted); max-width: 600px; margin-top: 1.5rem; }\r\nhtml { scroll-behavior: smooth; }\r\n\r\n/* ============================================= \r\n   Article Lists global styling \r\n============================================= */\r\n.article-body ul { margin: 1.5rem 0 2rem 1.5rem; padding: 0; list-style: none; }\r\n.article-body ul li { margin-bottom: 0.75rem; position: relative; padding-left: 1.7rem; line-height: 1.6; font-size: 1.05rem; color: var(--color-text-main); }\r\n.article-body ul li::before { content: '\\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--color-brand-blue); font-size: 0.9rem; }\r\n\r\n/* ============================================= \r\n   Premium Highlight Box & Section Title Styling\r\n============================================= */\r\n.premium-highlight-box {\r\n    background: linear-gradient(135deg, var(--color-brand-blue), #1a8ab4) !important;\r\n    border-radius: 16px;\r\n    padding: 2.5rem 3rem;\r\n    margin: 3rem 0;\r\n    position: relative;\r\n    overflow: hidden;\r\n    color: white;\r\n    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);\r\n    border-left: 6px solid #fff;\r\n}\r\n.premium-highlight-box::before { content: '\\f10e'; font-family: 'Font Awesome 5 Free'; font-weight: 900; position: absolute; top: -20px; right: -10px; font-size: 8rem; color: rgba(255, 255, 255, 0.08); transform: rotate(15deg); pointer-events: none; }\r\n.highlight-content { position: relative; z-index: 2; font-size: 1.4rem; font-weight: 700; line-height: 1.5; font-family: var(--font-heading); text-align: center; }\r\n\r\n/* Trending & Continue Reading Section Header Styling */\r\n.section-styled-header { display: flex; align-items: center; justify-content: center; margin: 3.5rem 0 2rem 0; width: 100%; }\r\n.section-styled-header i { font-size: 1.8rem; margin-right: 1rem; color: var(--color-brand-red); filter: drop-shadow(0 0 8px rgba(230,43,43,0.4)); }\r\n.section-styled-header h3 { margin: 0 !important; font-weight: 800; font-size: 1.8rem; letter-spacing: -0.5px; text-shadow: 0 2px 4px rgba(0,0,0,0.1); color: var(--color-brand-black); }\r\n\r\n/* ============================================= \r\n   CSS Grids (Replacing Bootstrap cols)\r\n============================================= */\r\n.row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; width: 100%; margin: 0; }\r\n.col-lg-4, .col-md-6, .col-md-12 { width: 100%; } /* Since Grid controls width, reset cols */\r\n.g-4 { gap: 1.5rem; }\r\n@media (max-width: 992px) { .row { grid-template-columns: repeat(2, 1fr); } }\r\n@media (max-width: 768px) { .row { grid-template-columns: 1fr; } }