/* ========================================
   BLOG PAGE STYLES
   ======================================== */


.bc-arrow {
    color: #ffffff;
    display: block;
}

/* ===== MAIN LAYOUT ===== */
.main-wrap {
    max-width: 1500px;
    margin: 0 auto;
    padding: 36px 90px 40px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 25px;
}

.content-col {
    min-width: 0;
    background: #fff;
    border: 1px solid #eef0f4;
    border-radius: 16px;
    padding: 28px 30px 32px;
    box-sizing: border-box;
}

/* ===== ARTICLE HEADER ===== */
.article-header {
    margin: 0 0 20px 0;
}

.category-badge {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 50px;
    background: rgba(0, 37, 148, 0.08);
    color: var(--gbp-primary-color);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-family: 'Poppins', sans-serif;
}

.article-title {
    font-size: 36px;
    line-height: 1.15;
    font-weight: 700;
    color: var(--gbp-primary-color);
    margin-bottom: 18px;
    max-width: 850px;
    font-family: 'Yantramanav', sans-serif;
}

/* ===== ARTICLE BYLINE ===== */
.article-byline {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 0;
    margin-bottom: 26px;
    border-top: 1px solid #eceef3;
    border-bottom: 1px solid #eceef3;
    font-family: 'Poppins', sans-serif;
}

.avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, #333, #555);
}

.byline-info {
    margin-right: 6px;
}

.byline-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

.byline-name a {
    color: #0b1049;
    text-decoration: none;
}

.byline-role {
    font-size: 12.5px;
    color: var(--secondary-color);
    font-weight: 500;
    margin-top: 2px;
}

.byline-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-left: auto;
    padding-left: 18px;
    border-left: 1px solid #eceef3;
}

.meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #64748b;
    font-family: 'Roboto', sans-serif;
}

.meta-icon {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--secondary-color);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

@media (max-width: 640px) {
    .byline-meta {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
        width: 100%;
        gap: 14px;
    }
}

/* ===== INLINE SHARE BUTTON (inside byline) ===== */
.share-inline {
    position: relative;
    display: inline-flex;
}

.share-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    background: #fff;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Roboto', sans-serif;
    transition: all 0.2s ease;
}

.share-inline-btn-icon {
    flex-shrink: 0;
}

.share-inline-btn:hover,
.share-inline:hover .share-inline-btn {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
    background: rgba(192, 0, 99, 0.06);
}

.share-inline-flyout {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    display: flex;
    gap: 8px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 50px;
    padding: 8px 10px;
    box-shadow: 0 8px 24px rgba(2, 0, 102, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all 0.2s ease;
    z-index: 20;
}

.share-inline:hover .share-inline-flyout,
.share-inline:focus-within .share-inline-flyout {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-inline-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f1f3fa;
    color: #5B6475;
    transition: all 0.2s ease;
}

.share-inline-icon svg {
    width: 15px;
    height: 15px;
}

.share-inline-icon:hover { color: #fff; }
.share-inline-icon.fb:hover { background: #1877f2; }
.share-inline-icon.wa:hover { background: #25d366; }
.share-inline-icon.ig:hover { background: radial-gradient(circle at 30% 110%, #fdf497, #fd5949, #d6249f, #285AEB); }
.share-inline-icon.x:hover  { background: #000; }
.share-inline-icon.li:hover { background: #0a66c2; }

/* ===== HERO ===== */
.hero {
    line-height: 0;
    margin: 0;
    max-width: 850px;
}

.hero-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    object-fit: cover;
}

/* ===== TABLE OF CONTENTS ===== */
.article-toc {
    margin-bottom: 28px;
}

.toc-toggle {
    width: 100%;
    border: none;
    cursor: pointer;
    text-align: left;
}

.toc-toggle-icon {
    color: var(--secondary-color);
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.toc-toggle[aria-expanded="true"] .toc-toggle-icon {
    transform: rotate(180deg);
}

.toc-list {
    list-style: none;
    padding: 0 24px 0;
    margin: 0;
    /*max-height: 0;*/
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.toc-list.toc-open {
    max-height: 600px;
    padding: 2px 24px 22px;
}

.toc-list li {
    border: none !important;
}

.toc-list li + li {
    margin-top: 2px;
}

.toc-list li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    font-size: 13.5px;
    font-weight: 600;
    color: #3d4257;
    text-decoration: none;
    transition: all 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

/*.toc-list li a::before {*/
/*    content: "+";*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    width: 19px;*/
/*    height: 19px;*/
/*    flex: none;*/
/*    border: 1.5px solid var(--secondary-color);*/
/*    color: var(--secondary-color);*/
/*    border-radius: 50%;*/
/*    font-size: 11px;*/
/*    font-weight: 700;*/
/*    line-height: 1;*/
/*}*/

.toc-list li a:hover {
    color: var(--secondary-color);
}

/* ===== ARTICLE BODY ===== */
.article-body {
    margin-top: 0;
}

.article-body h2 {
    margin: auto;
    color: var(--gbp-primary-color);
    font-size: 32px;
    line-height: 1.2;
    font-family: var(--gbp-heading-font);
    font-weight: 600;
    margin-top: 40px;
    margin-bottom: 16px;
    padding-top: 24px;
    border-top: 1px solid #e2e8f0;
}

.article-body h2:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.article-body h3 {
    font-size: 15px;
    line-height: 1.5;
    color: var(--gbp-primary-color);
    margin: 0;
    font-weight: 600;
    font-family: 'Yantramanav', sans-serif;
}

.article-body p {
    font-size: 15px;
    line-height: 1.8;
    color: #5B6475;
    margin-bottom: 14px;
    font-family: 'Roboto', sans-serif;
}

.article-body ul {
    margin: 0 0 16px 0;
    padding-left: 0;
    list-style: none;
}

.article-body ul.icon-list {
    display: grid;
    gap: 10px;
}

.article-body ul.icon-list li {
    position: relative;
    padding-left: 28px;
    display: flex;
    align-items: flex-start;
    font-size: 15px;
    line-height: 1.7;
    color: #5B6475;
    margin-bottom: 8px;
    font-family: 'Roboto', sans-serif;
}

.article-body ul.icon-list li .li-check {
    position: absolute;
    left: 0;
    top: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(192, 0, 99, 0.08);
    flex-shrink: 0;
    fill: none;
    stroke: var(--secondary-color);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.callout {
    font-weight: 500;
    color: var(--primary-color) !important;
}

/* ===== COMPARISON TABLE (custom, no Bootstrap dependency) ===== */
.table-wrap {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;
}

.compare-table thead th {
    background: #f8f9fc;
    color: var(--primary-color);
    font-weight: 600;
    text-align: left;
    padding: 14px 18px;
    font-family: 'Yantramanav', sans-serif;
    border-bottom: 1px solid #e2e8f0;
}

.compare-table tbody td {
    padding: 14px 18px;
    color: #5B6475;
    border-bottom: 1px solid #eef0f4;
}

.compare-table tbody tr:last-child td {
    border-bottom: none;
}

.compare-table tbody tr:hover td {
    background: #fbf7f9;
}

.compare-table tbody td:first-child {
    font-weight: 600;
    color: var(--primary-color);
}

/* Responsive: stack the table into cards below 640px */
@media (max-width: 640px) {
    .table-wrap {
        border: none;
    }

    .compare-table thead {
        display: none;
    }

    .compare-table,
    .compare-table tbody,
    .compare-table tr,
    .compare-table td {
        display: block;
        width: 100%;
    }

    .compare-table tr {
        margin-bottom: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        overflow: hidden;
    }

    .compare-table tbody td {
        padding: 10px 16px;
        border-bottom: 1px solid #eef0f4;
    }

    .compare-table tbody tr:last-child {
        margin-bottom: 0;
    }

    .compare-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        color: var(--secondary-color);
        margin-bottom: 4px;
    }

    .compare-table tbody td:first-child {
        background: #f8f9fc;
    }
}

/* ===== FAQ ===== */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 18px;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--primary-color);
    font-size: 15px;
    list-style: none;
    font-family: 'Yantramanav', sans-serif;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: "+";
    float: right;
    color: var(--secondary-color);
    font-weight: 600;
    font-size: 18px;
}

.faq-item[open] summary::after {
    content: "\2013";
}

.faq-body {
    margin-top: 10px;
}

.faq-body p {
    margin-bottom: 10px;
    font-family: 'Roboto', sans-serif;
    color: #5B6475;
}

.faq-body p:last-child {
    margin-bottom: 0;
}

/* ===== SHARE ROW (bottom of article) ===== */
.share-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    margin-top: 34px;
    background: #f8f7fc;
    border: 1px solid #eceef3;
    border-radius: 14px;
}

.share-label {
    font-size: 14.5px;
    font-weight: 700;
    color: #0b1049;
    font-family: 'Poppins', sans-serif;
}

.share-icons {
    display: flex;
    gap: 10px;
}

.share-icon {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #eceef3;
    transition: all 0.25s ease;
}

.share-icon svg {
    width: 17px;
    height: 17px;
    fill: var(--secondary-color);
    transition: fill 0.25s ease;
}

.share-icon:hover {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(192, 0, 99, 0.25);
}

.share-icon:hover svg {
    fill: #ffffff;
}

@media (max-width: 640px) {
    .share-row {
        flex-wrap: wrap;
        padding: 18px;
    }

    .nav-next1 {
        text-align: left;
    }
    .nav-next1 .nav-label1 {
        justify-content: flex-start;
    }
    .d-none{
        display:none !important;
    }

}


/* ========================================
   SIDEBAR
   ======================================== */

.sidebar-col {
    position: sticky;
    top: 75px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    align-self: start;
}

.side-card {
    background: #ffffff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(2, 0, 102, 0.06);
    border: 1px solid #eceef3;
}

.side-card-head {
    background: #ffffff;
    color: #0b1049;
    padding: 20px 24px 14px;
    font-weight: 700;
    font-size: 17px;
    font-family: 'Yantramanav', sans-serif;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.side-card-smoke {
    background: whitesmoke;
}

.side-card-smoke .side-card-head {
    background: whitesmoke;
}

.icon-btn {
    position: relative;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(192, 0, 99, 0.08);
    color: var(--secondary-color);
    text-decoration: none;
    transition: all 0.2s ease;
}

.icon-btn svg {
    flex-shrink: 0;
}

.icon-btn:hover {
    background: var(--secondary-color);
    color: #fff;
}

.icon-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    top: 50%;
    right: calc(100% + 10px);
    transform: translateY(-50%) translateX(4px);
    background: #0b1049;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    pointer-events: none;
}

.icon-btn:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateY(-50%) translateX(0);
}

.author-box {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 24px 14px;
}

.author-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
}

.author-name {
    font-weight: 700;
    color: #0b1049;
    font-size: 15px;
    font-family: 'Poppins', sans-serif;
}

.author-role {
    font-size: 12.5px;
    color: var(--secondary-color);
    font-weight: 500;
    margin-top: 2px;
    font-family: 'Poppins', sans-serif;
}

.author-desc {
    font-size: 13.5px;
    line-height: 1.75;
    color: #6b7280;
    padding: 0 24px 22px;
    margin: 0;
    font-family: 'Roboto', sans-serif;
}

.cta-dark {
    background: #08076f;
    border: none;
    border-radius: 18px;
    padding: 20px 18px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(2, 0, 102, 0.12);
    color: #ffffff;
}

.cta-main {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cta-icon-wrap {
    width: 62px;
    height: 62px;
    min-width: 62px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(192, 0, 99, 0.7);
    outline: 1px dotted var(--secondary-color);
    outline-offset: 6px;
}

.cta-icon {
    width: 29px;
    height: 29px;
}

.cta-copy {
    min-width: 0;
}

.cta-copy h3 {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 7px;
    
}

.cta-copy p {
    /*color: var(--secondary-color);*/
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0;
    
}

.cta-btn {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 17px;
    padding: 8px 14px 8px 9px;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--secondary-color) 0%, #ff2178 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    transition: transform .2s ease, filter .2s ease;
    box-sizing: border-box;
}

.cta-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

.cta-btn-icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-btn-icon svg {
    width: 19px;
    height: 19px;
}

.cta-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #ffffff;
}

.cta-shield {
    width: 32px;
    height: 32px;
    color: var(--secondary-color);
    flex-shrink: 0;
}

.cta-trust div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cta-trust strong,
.cta-trust span {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.cta-trust strong {
    font-size: 12px;
    font-weight: 700;
}

.cta-trust span {
    font-size: 11.5px;
    font-weight: 500;
}

.sidebar-col .cta-expert {
    width: 100%;
    box-sizing: border-box;
}

.sidebar-col .cta-expert .cta-copy h3 {
    margin-bottom: 7px;
}

.sidebar-col .cta-expert .cta-copy p {
    margin-bottom: 0;
}

.recent-posts-list {
    list-style: none;
    padding: 6px 16px 8px;
    margin: 0;
}

.recent-posts-scroll {
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-color) #f1f3fa;
}

.recent-posts-scroll::-webkit-scrollbar {
    width: 6px;
}

.recent-posts-scroll::-webkit-scrollbar-track {
    background: #f1f3fa;
    border-radius: 10px;
}

.recent-posts-scroll::-webkit-scrollbar-thumb {
    background: var(--secondary-color);
    border-radius: 10px;
}

.recent-posts-list li {
    border: none !important;
}

.recent-post-link {
    display: flex;
    gap: 12px;
    padding: 8px;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.2s ease;
}

.recent-post-link:hover {
    background: #fdeaf1;
}

.recent-post-img {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #e9ecf3;
}

.recent-post-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.recent-post-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: #0b1049;
    line-height: 1.45;
    transition: color 0.2s ease;
    font-family: 'Poppins', sans-serif;
}

.recent-post-link:hover .recent-post-title {
    color: var(--secondary-color);
}

.recent-post-date {
    font-size: 0.76rem;
    color: #8993a4;
    font-family: 'Roboto', sans-serif;
}

/* ========================================
   FULL-WIDTH CTA
   ======================================== */
.full-cta-section {
    max-width: 1500px;
    margin: 34px auto 20px;
    padding: 0 40px;
}

.full-cta-inner {
    display: flex;
    align-items: center;
    gap: 34px;
    width: 100%;
    box-sizing: border-box;
    background: var(--primary-color);
    border-radius: 18px;
    padding: 28px 32px;
    color: #ffffff;
}

.full-cta-main {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: 1 1 auto;
    min-width: 0;
}

.full-cta-icon-wrap {
    width: 86px;
    height: 86px;
    min-width: 86px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px rgba(192, 0, 99, .75);
    outline: 1px dotted var(--secondary-color);
    outline-offset: 7px;
}

.full-cta-icon {
    width: 38px;
    height: 38px;
}

.full-cta-copy {
    min-width: 0;
}

.full-cta-copy h3 {
    color: #ffffff;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 9px;
    font-family: 'Yantramanav', sans-serif;
}

.full-cta-copy p {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 400;
    margin: 0;
    max-width: 700px;
    font-family: 'Roboto', sans-serif;
}

.full-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 0 0 300px;
    min-height: 66px;
    padding: 10px 18px 10px 12px;
    border-radius: 11px;
    background: linear-gradient(100deg, #d00068 0%, #ff1674 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    transition: transform .2s ease, filter .2s ease;
    box-sizing: border-box;
    white-space: nowrap;
}

.full-cta-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.full-cta-btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.full-cta-btn-icon svg {
    width: 23px;
    height: 23px;
}

.full-cta-trust {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    min-width: 150px;
}

.full-cta-shield {
    width: 38px;
    height: 38px;
    color: var(--secondary-color);
    flex-shrink: 0;
}

.full-cta-trust div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.full-cta-trust strong,
.full-cta-trust span {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.full-cta-trust strong {
    font-size: 13px;
    font-weight: 700;
}

.full-cta-trust span {
    font-size: 12px;
    font-weight: 500;
}

@media (max-width: 1180px) {
    .full-cta-inner {
        gap: 24px;
        padding: 26px 28px;
    }
    .full-cta-icon-wrap {
        width: 76px;
        height: 76px;
        min-width: 76px;
    }
    .full-cta-copy h3 {
        font-size: 22px;
    }
    .full-cta-btn {
        flex-basis: 265px;
        font-size: 14px;
    }
}

@media (max-width: 900px) {
    .full-cta-inner {
        flex-wrap: wrap;
    }
    .full-cta-main {
        width: 100%;
    }
    .full-cta-btn {
        flex: 1 1 280px;
    }
    .full-cta-trust {
        flex: 0 0 auto;
    }
}

@media (max-width: 640px) {
    .full-cta-section {
        padding: 0 16px;
        margin-top: 24px;
    }
    .full-cta-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 22px;
        padding: 24px 20px;
        border-radius: 14px;
    }
    .full-cta-main {
        align-items: center;
        gap: 16px;
    }
    .full-cta-icon-wrap {
        width: 62px;
        height: 62px;
        min-width: 62px;
        outline-offset: 5px;
    }
    .full-cta-icon {
        width: 29px;
        height: 29px;
    }
    .full-cta-copy h3 {
        font-size: 18px;
        line-height: 1.3;
        margin-bottom: 7px;
    }
    .full-cta-copy p {
        font-size: 12.5px;
        line-height: 1.55;
    }
    .full-cta-btn {
        width: 100%;
        flex: none;
        min-height: 58px;
        font-size: 13.5px;
    }
    .full-cta-btn-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
    .full-cta-btn-icon svg {
        width: 19px;
        height: 19px;
    }
    .full-cta-trust {
        justify-content: center;
    }
    .full-cta-shield {
        width: 32px;
        height: 32px;
    }
}

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

@media (max-width: 1180px) {
    .main-wrap {
        grid-template-columns: minmax(0, 1fr) 300px;
        gap: 24px;
        padding: 36px 50px 80px;
    }
}

@media (max-width: 960px) {
    .main-wrap {
        grid-template-columns: 1fr;
        padding: 28px 24px 60px;
    }
    .sidebar-col {
        position: static;
    }
}

@media (max-width: 768px) {
    .content-col {
        padding: 22px 20px 28px;
        border-radius: 12px;
    }
    .side-card-head {
        font-size: 14px;
        padding: 12px 16px;
    }
    .toc-list li a {
        font-size: 12.5px;
        padding: 6px 10px;
    }
    .recent-post-title {
        font-size: 0.83rem;
    }
    .article-title {
        font-size: 28px;
    }
}

@media (max-width: 576px) {
    .content-col {
        padding: 18px 16px 24px;
        border-radius: 10px;
    }
    .cta-dark { padding: 18px 16px; border-radius: 14px; }
    .cta-icon-wrap { width: 56px; height: 56px; min-width: 56px; }
    .cta-icon { width: 26px; height: 26px; }
    .cta-copy h3 { font-size: 15px; }
    .cta-copy p { font-size: 13px; }
    .cta-btn { margin-top: 17px; }
    .sidebar-col .cta-expert .cta-copy h3 {
        font-size: 15px;
        line-height: 1.35;
    }
    .sidebar-col .cta-expert .cta-copy p {
        font-size: 12.5px;
        line-height: 1.45;
    }
    .main-wrap {
        padding: 20px 16px 40px;
    }
    .article-title {
        font-size: 22px;
    }
    .article-body h2 {
        font-size: 24px;
    }
    .sidebar-col {
        gap: 14px;
    }
    .side-card {
        border-radius: 8px;
    }
    .byline-meta {
        gap: 10px;
    }
}


  /* ============================================================
           BLOG CONTENT STYLES
           ============================================================ */
        
        /* Use CSS variables from your theme if available, otherwise fallback */
        :root {
            --gbp-body-font: 'Roboto', sans-serif;
            --gbp-heading-font: 'Yantramanav', sans-serif;
            --gbp-primary-font: 'Poppins', sans-serif;
        }

  /* ============================================================
   MAIN BLOG BODY CONTAINER
   ============================================================ */
.blog-body {
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.8 !important;
    color: #333333 !important;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
/* ============================================================
   HEADINGS
   ============================================================ */
.blog-body h1,
.blog-body h2,
.blog-body h3,
.blog-body h4,
.blog-body h5,
.blog-body h6 {
    font-family: var(--gbp-heading-font, 'Yantramanav', sans-serif) !important;
    font-weight: 700 !important;
    color: var(--primary-color) !important;
    margin-top: 1.8em;
    margin-bottom: 0.5em;
    line-height: 1.3 !important;
    clear: both;
}

.blog-body h1 { 
    font-size: 36px !important;
    margin-top: 32px;
    margin-bottom: 16px; 
}

.blog-body h2 { 
    font-size: 26px !important;
    margin-top: 16px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f2f7;
}

.blog-body h3 { 
    font-size: 23px !important;
    margin-top: 14px;
    margin-bottom: 10px;
}

.blog-body h4 { 
    font-size: 20px !important;
    margin-top: 12px;
    margin-bottom: 8px;
}

.blog-body h5 {    
    font-size: 18px !important;
    margin-top: 10px;
    margin-bottom: 8px; 
}

.blog-body h6 {     
    font-size: 17px !important;
    margin-top: 10px;
    margin-bottom: 8px;
}

/* First heading in content should have less top margin */
.blog-body h1:first-child,
.blog-body h2:first-child,
.blog-body h3:first-child {
    margin-top: 0 !important;
}

/* ============================================================
   PARAGRAPHS
   ============================================================ */
.blog-body p {
    margin-bottom: 8px;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #333333 !important;
}

/* ============================================================
   LISTS
   ============================================================ */
.blog-body ul,
.blog-body ol {
    padding-left: 26px;
    margin-bottom: 18px;
    margin-top: 0;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
}

.blog-body ul li,
.blog-body ol li {
    margin-bottom: 0.4em;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    padding-left: 5px;
}

/* Unordered Lists - Disc */
.blog-body ul {
    list-style-type: disc !important;
}

.blog-body ul ul {
    list-style-type: circle !important;
    margin-bottom: 0.3em;
}

.blog-body ul ul ul {
    list-style-type: square !important;
}

/* Ordered Lists - Decimal */
.blog-body ol {
    list-style-type: decimal !important;
}

.blog-body ol ol {
    list-style-type: lower-alpha !important;
}

.blog-body ol ol ol {
    list-style-type: lower-roman !important;
}

/* ============================================================
   BLOCKQUOTES
   ============================================================ */
.blog-body blockquote {
    margin: 1.8em 0;
    padding: 0.8em 1.8em;
    border-left: 4px solid var(--secondary-color);
    background: #f8f9ff;
    font-style: italic;
    color: #555555 !important;
    border-radius: 4px 0 0 4px;
}

.blog-body blockquote p {
    margin-bottom: 0.5em;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
}

.blog-body blockquote p:last-child {
    margin-bottom: 0;
}

.blog-body blockquote cite {
    display: block;
    margin-top: 0.5em;
    font-style: normal;
    font-weight: 600 !important;
    color: var(--primary-color) !important;
}

/* ============================================================
   IMAGES & FIGURES
   ============================================================ */
.blog-body img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    display: block;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.blog-body figure {
    margin: 1.5em 0;
    text-align: center;
}

.blog-body figure img {
    margin: 0 auto;
}

.blog-body figcaption {
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 0.9rem !important;
    color: #777777 !important;
    margin-top: 0.5em;
    font-style: italic;
    text-align: center;
}

/* Image alignment helpers */
.blog-body .alignleft {
    float: left;
    margin-right: 1.5em;
    margin-bottom: 1em;
}

.blog-body .alignright {
    float: right;
    margin-left: 1.5em;
    margin-bottom: 1em;
}

.blog-body .aligncenter {
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   LINKS
   ============================================================ */
.blog-body a {
    color: var(--secondary-color) !important;
    text-decoration: none;
    transition: color 0.2s ease;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
}

.blog-body a:hover {
    color: var(--primary-color) !important;
    /*text-decoration: underline;*/
}

/* ============================================================
   TABLES - RESPONSIVE LIKE BOOTSTRAP
   ============================================================ */

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

.blog-body .table-wrap {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin: 26px 0;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    position: relative;
}

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

.blog-body .table-wrap::-webkit-scrollbar {
    height: 8px;
}

.blog-body .table-wrap::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

.blog-body .table-wrap::-webkit-scrollbar-thumb {
    background: #b9bdc8;
    border-radius: 10px;
}

.blog-body .table-wrap::-webkit-scrollbar-thumb:hover {
    background: #8f94a3;
}

/* Firefox */
.blog-body .table-wrap {
    scrollbar-width: auto;
}

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

.blog-body .table-wrap table {
    width: max-content;
    min-width: 100%;
    max-width: none !important;
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 15px !important;
}

/*
|--------------------------------------------------------------------------
| Direct tables
| Fallback if JS wrapper hasn't executed yet
|--------------------------------------------------------------------------
*/

.blog-body > table {
    display: block;
    width: 100%;
    max-width: 100% !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 15px !important;
}

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

.blog-body .table-wrap th,
.blog-body .table-wrap td {
    border: 1px solid #dee2e6;
    padding: 11px 14px;
    text-align: left;
    vertical-align: top;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #333333 !important;
    word-break: normal;
    overflow-wrap: break-word;
}

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

.blog-body .table-wrap thead th {
    background: #f0f2f7 !important;
    color: var(--primary-color) !important;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| If the table has th but no thead
|--------------------------------------------------------------------------
*/

.blog-body .table-wrap tr:first-child th {
    background: #f0f2f7 !important;
    color: var(--primary-color) !important;
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 15px !important;
}

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

.blog-body .table-wrap tbody tr:nth-child(even) {
    background: #fafbfd;
}

.blog-body .table-wrap tbody tr:hover {
    background: #f5f6fc;
}

/* ============================================================
   TABLE SPECIAL CLASSES
   ============================================================ */

.blog-body .table-wrap .table-striped tbody tr:nth-of-type(odd) {
    background: #f8f9ff;
}

.blog-body .table-wrap .table-bordered {
    border: 2px solid #dee2e6;
}

.blog-body .table-wrap .table-bordered th,
.blog-body .table-wrap .table-bordered td {
    border: 1px solid #dee2e6;
}

/* ============================================================
   PRE / CODE
   ============================================================ */
.blog-body pre {
    background: #f4f4f4;
    padding: 16px 18px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: monospace !important;
    font-size: 0.9rem !important;
    margin: 1.5em 0;
    border: 1px solid #e9ecef;
    line-height: 1.6 !important;
}

.blog-body code {
    background: #f0f0f0;
    padding: 0.2em 0.5em;
    border-radius: 4px;
    font-family: monospace !important;
    font-size: 0.9em !important;
    color: var(--secondary-color) !important;
}

.blog-body pre code {
    background: transparent;
    padding: 0;
    font-size: inherit !important;
    color: inherit !important;
}

/* ============================================================
   HORIZONTAL RULE
   ============================================================ */
.blog-body hr {
    border: none;
    border-top: 2px solid #e9ecef;
    margin: 2.5em 0;
    clear: both;
}

/* ============================================================
   SPACING & MARGIN CONTROL
   ============================================================ */
.blog-body > *:first-child {
    margin-top: 0 !important;
}

.blog-body > *:last-child {
    margin-bottom: 0 !important;
}

/* Remove extra spacing from empty paragraphs */
.blog-body p:empty {
    display: none;
}

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

/* Tablet */
@media (max-width: 992px) {
    .blog-body {
        font-size: 14px !important;
    }

    .blog-body h1 { font-size: 34px !important; }
    .blog-body h2 { font-size: 24px !important; }
    .blog-body h3 { font-size: 22px !important; }
    .blog-body h4 { font-size: 20px !important; }
    .blog-body h5 { font-size: 18px !important; }
    .blog-body h6 { font-size: 16px !important; }

    /* Tablet - Heading Span Overrides */
    .blog-body h1,
    .blog-body h1 span {
        font-size: 34px !important;
    }
    
    .blog-body h2,
    .blog-body h2 span {
        font-size: 24px !important;
    }
    
    .blog-body h3,
    .blog-body h3 span {
        font-size: 22px !important;
    }
    
    .blog-body h4,
    .blog-body h4 span {
        font-size: 20px !important;
    }
    
    .blog-body h5,
    .blog-body h5 span {
        font-size: 18px !important;
    }
    
    .blog-body h6,
    .blog-body h6 span {
        font-size: 16px !important;
    }

    .blog-body p {
        font-size: 14px !important;
    }

    /* Tablet - Paragraph Span Overrides */
    .blog-body p,
    .blog-body p span {
        font-size: 14px !important;
    }

    .blog-body .table-wrap table {
        min-width: 550px;
        font-size: 14px !important;
    }

    .blog-body table {
        min-width: 550px;
        font-size: 14px !important;
    }

    .blog-body .table-wrap th,
    .blog-body .table-wrap td {
        font-size: 14px !important;
    }

    /* Tablet - Table Span Overrides */
    .blog-body .table-wrap th,
    .blog-body .table-wrap th span,
    .blog-body .table-wrap td,
    .blog-body .table-wrap td span {
        font-size: 14px !important;
    }

    /* Tablet - Links Span Overrides */
    .blog-body a,
    .blog-body a span {
        font-size: 14px !important;
    }

    /* Tablet - List Span Overrides */
    .blog-body li,
    .blog-body li span {
        font-size: 14px !important;
    }

    /* Tablet - Blockquote Span Overrides */
    .blog-body blockquote p,
    .blog-body blockquote p span {
        font-size: 14px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .blog-body {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .blog-body h1 { font-size: 32px !important; }
    .blog-body h2 { font-size: 22px !important; }
    .blog-body h3 { font-size: 19px !important; }
    .blog-body h4 { font-size: 17px !important; }
    .blog-body h5 { font-size: 15px !important; }
    .blog-body h6 { font-size: 14px !important; }
    
    /* Mobile - Heading Span Overrides */
    .blog-body h1,
    .blog-body h1 span {
        font-size: 32px !important;
    }
    
    .blog-body h2,
    .blog-body h2 span {
        font-size: 22px !important;
    }
    
    .blog-body h3,
    .blog-body h3 span {
        font-size: 19px !important;
    }
    
    .blog-body h4,
    .blog-body h4 span {
        font-size: 17px !important;
    }
    
    .blog-body h5,
    .blog-body h5 span {
        font-size: 15px !important;
    }
    
    .blog-body h6,
    .blog-body h6 span {
        font-size: 14px !important;
    }
    
    .blog-body p {
        font-size: 14px !important;
        line-height: 1.7 !important;
    }

    /* Mobile - Paragraph Span Overrides */
    .blog-body p,
    .blog-body p span {
        font-size: 15px !important;
        line-height: 1.7 !important;
    }

    .blog-body ul,
    .blog-body ol {
        padding-left: 1.5em;
        font-size: 15px !important;
    }

    .blog-body ul li,
    .blog-body ol li {
        font-size: 15px !important;
    }

    /* Mobile - List Span Overrides */
    .blog-body li,
    .blog-body li span {
        font-size: 15px !important;
    }
    
    .blog-body .table-wrap {
        margin: 22px 0;
        border-radius: 6px;
    }
    
    .blog-body .table-wrap table {
        min-width: max-content;
        font-size: 14px !important;
    }
    
    .blog-body .table-wrap th,
    .blog-body .table-wrap td {
        padding: 8px 10px;
        font-size: 14px !important;
    }
    
    .blog-body .table-wrap thead th {
        font-size: 14px !important;
    }

    /* Mobile - Table Span Overrides */
    .blog-body .table-wrap th,
    .blog-body .table-wrap th span,
    .blog-body .table-wrap td,
    .blog-body .table-wrap td span {
        font-size: 14px !important;
    }

    .blog-body blockquote {
        padding: 0.6em 1.2em;
        margin: 1.2em 0;
    }

    .blog-body blockquote p {
        font-size: 15px !important;
    }

    /* Mobile - Blockquote Span Overrides */
    .blog-body blockquote p,
    .blog-body blockquote p span {
        font-size: 15px !important;
    }

    .blog-body .table-wrap table {
        min-width: 450px;
        font-size: 0.85rem !important;
    }

    .blog-body table {
        min-width: 450px;
        font-size: 0.85rem !important;
    }

    .blog-body table th,
    .blog-body table td {
        padding: 6px 10px;
        font-size: 14px !important;
    }

    .blog-body .alignleft,
    .blog-body .alignright {
        float: none;
        margin-left: auto;
        margin-right: auto;
        display: block;
        text-align: center;
    }

    .blog-body a {
        font-size: 15px !important;
    }

    /* Mobile - Links Span Overrides */
    .blog-body a,
    .blog-body a span {
        font-size: 15px !important;
    }
}

/* Small Mobile */
@media (max-width: 480px) {
    .blog-body {
        font-size: 14px !important;
    }

    .blog-body h1 { font-size: 28px !important; }
    .blog-body h2 { font-size: 20px !important; }
    .blog-body h3 { font-size: 18px !important; }
    .blog-body h4 { font-size: 16px !important; }
    .blog-body h5 { font-size: 15px !important; }
    .blog-body h6 { font-size: 14px !important; }

    /* Small Mobile - Heading Span Overrides */
    .blog-body h1,
    .blog-body h1 span {
        font-size: 28px !important;
    }
    
    .blog-body h2,
    .blog-body h2 span {
        font-size: 20px !important;
    }
    
    .blog-body h3,
    .blog-body h3 span {
        font-size: 18px !important;
    }
    
    .blog-body h4,
    .blog-body h4 span {
        font-size: 16px !important;
    }
    
    .blog-body h5,
    .blog-body h5 span {
        font-size: 15px !important;
    }
    
    .blog-body h6,
    .blog-body h6 span {
        font-size: 14px !important;
    }

    .blog-body p {
        font-size: 14px !important;
    }

    /* Small Mobile - Paragraph Span Overrides */
    .blog-body p,
    .blog-body p span {
        font-size: 14px !important;
    }

    .blog-body ul,
    .blog-body ol {
        font-size: 14px !important;
    }

    .blog-body ul li,
    .blog-body ol li {
        font-size: 14px !important;
    }

    /* Small Mobile - List Span Overrides */
    .blog-body li,
    .blog-body li span {
        font-size: 14px !important;
    }

    .blog-body .table-wrap table {
        min-width: 320px;
        font-size: 0.8rem !important;
    }

    .blog-body table {
        min-width: 320px;
        font-size: 0.8rem !important;
    }

    .blog-body table th,
    .blog-body table td {
        padding: 4px 8px;
        font-size: 13px !important;
    }

    .blog-body .table-wrap th,
    .blog-body .table-wrap td {
        font-size: 13px !important;
    }

    /* Small Mobile - Table Span Overrides */
    .blog-body .table-wrap th,
    .blog-body .table-wrap th span,
    .blog-body .table-wrap td,
    .blog-body .table-wrap td span {
        font-size: 13px !important;
    }

    .blog-body a {
        font-size: 14px !important;
    }

    /* Small Mobile - Links Span Overrides */
    .blog-body a,
    .blog-body a span {
        font-size: 14px !important;
    }

    .blog-body blockquote p {
        font-size: 14px !important;
    }

    /* Small Mobile - Blockquote Span Overrides */
    .blog-body blockquote p,
    .blog-body blockquote p span {
        font-size: 14px !important;
    }
}

/* ============================================================
   TOC SMOOTH SCROLL
   ============================================================ */
.toc-list a {
    scroll-behavior: smooth;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {
    .blog-body {
        font-size: 12pt !important;
        color: #000 !important;
    }

    .blog-body a {
        color: #000 !important;
        text-decoration: underline;
        font-size: 12pt !important;
    }

    /* Print - Links Span Overrides */
    .blog-body a,
    .blog-body a span {
        font-size: 12pt !important;
    }

    .blog-body img {
        max-width: 100%;
        box-shadow: none;
    }

    .blog-body table {
        border: 1px solid #000;
        font-size: 12pt !important;
    }

    .blog-body table th,
    .blog-body table td {
        border: 1px solid #000;
        padding: 4px 8px;
        font-size: 12pt !important;
    }

    /* Print - Table Span Overrides */
    .blog-body table th,
    .blog-body table th span,
    .blog-body table td,
    .blog-body table td span {
        font-size: 12pt !important;
    }

    .blog-body .table-wrap {
        border: 1px solid #000;
        overflow: visible;
    }

    .blog-body .table-wrap table {
        min-width: auto;
        font-size: 12pt !important;
    }

    .blog-body .table-wrap th,
    .blog-body .table-wrap td {
        font-size: 12pt !important;
    }

    /* Print - Table Wrap Span Overrides */
    .blog-body .table-wrap th,
    .blog-body .table-wrap th span,
    .blog-body .table-wrap td,
    .blog-body .table-wrap td span {
        font-size: 12pt !important;
    }

    .blog-body h1 { font-size: 24pt !important; }
    .blog-body h2 { font-size: 20pt !important; }
    .blog-body h3 { font-size: 18pt !important; }
    .blog-body h4 { font-size: 16pt !important; }
    .blog-body h5 { font-size: 14pt !important; }
    .blog-body h6 { font-size: 13pt !important; }

    /* Print - Heading Span Overrides */
    .blog-body h1,
    .blog-body h1 span { font-size: 24pt !important; }
    .blog-body h2,
    .blog-body h2 span { font-size: 20pt !important; }
    .blog-body h3,
    .blog-body h3 span { font-size: 18pt !important; }
    .blog-body h4,
    .blog-body h4 span { font-size: 16pt !important; }
    .blog-body h5,
    .blog-body h5 span { font-size: 14pt !important; }
    .blog-body h6,
    .blog-body h6 span { font-size: 13pt !important; }

    .blog-body p {
        font-size: 12pt !important;
    }

    /* Print - Paragraph Span Overrides */
    .blog-body p,
    .blog-body p span {
        font-size: 12pt !important;
    }
}



/* ============================================================
   OVERRIDE GOOGLE DOCS / CKEDITOR INLINE FORMATTING
   ============================================================ */

/* Remove Google Docs font formatting from all content */
.blog-body span {
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
}

/* Headings - force all nested spans to follow heading style */
.blog-body h1,
.blog-body h1 span {
    font-family: var(--gbp-heading-font, 'Yantramanav', sans-serif) !important;
    font-size: 36px !important;
    color: var(--primary-color) !important;
    line-height: 1.3 !important;
}

.blog-body h2,
.blog-body h2 span {
    font-family: var(--gbp-heading-font, 'Yantramanav', sans-serif) !important;
    font-size: 26px !important;
    color: var(--primary-color) !important;
    line-height: 1.3 !important;
}

.blog-body h3,
.blog-body h3 span {
    font-family: var(--gbp-heading-font, 'Yantramanav', sans-serif) !important;
    font-size: 22px !important;
    color: var(--primary-color) !important;
    line-height: 1.3 !important;
}

.blog-body h4,
.blog-body h4 span {
    font-family: var(--gbp-heading-font, 'Yantramanav', sans-serif) !important;
    font-size: 20px !important;
    color: var(--primary-color) !important;
    line-height: 1.3 !important;
}

.blog-body h5,
.blog-body h5 span {
    font-family: var(--gbp-heading-font, 'Yantramanav', sans-serif) !important;
    font-size: 18px !important;
    color: var(--primary-color) !important;
    line-height: 1.3 !important;
}

.blog-body h6,
.blog-body h6 span {
    font-family: var(--gbp-heading-font, 'Yantramanav', sans-serif) !important;
    font-size: 17px !important;
    color: var(--primary-color) !important;
    line-height: 1.3 !important;
}

/* Paragraphs - force nested Google Docs spans */
.blog-body p,
.blog-body p span {
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
    color: #333333 !important;
    line-height: 1.6 !important;
}

/* Links - force nested spans inside links */
.blog-body a,
.blog-body a span {
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
    color: var(--primary-color) !important;
}

/* Lists */
.blog-body li,
.blog-body li span {
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    font-size: 16px !important;
    color: #333333 !important;
    line-height: 1.6 !important;
}

/* Blockquotes */
.blog-body blockquote,
.blog-body blockquote span {
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    color: #555555 !important;
}

.blog-body blockquote p,
.blog-body blockquote p span {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #555555 !important;
}

/* Tables */
.blog-body table,
.blog-body table span,
.blog-body th,
.blog-body th span,
.blog-body td,
.blog-body td span {
    font-family: var(--gbp-body-font, 'Roboto', sans-serif) !important;
    color: #333333 !important;
}

.blog-body th,
.blog-body th span {
    font-size: 15px !important;
    font-weight: 700 !important;
}

.blog-body td,
.blog-body td span {
    font-size: 15px !important;
}

/* ============================================================
   PAGE OVERFLOW FIX - IMPORTANT FOR RESPONSIVE TABLES
   ============================================================ */
/*html,*/
/*body {*/
/*    max-width: 100%;*/
/*    overflow-x: hidden;*/
/*}*/

/*.main-wrap {*/
/*    max-width: 100%;*/
/*}*/

.content-col {
    max-width: 100%;
}

/* Force table wrapper to work properly */
.blog-body .table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.blog-body .table-wrap table {
    width: max-content !important;
    min-width: 100% !important;
    max-width: none !important;
}

/* Mobile specific fix for table scroll */
@media (max-width: 768px) {
    .blog-body .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    .blog-body .table-wrap table {
        min-width: 500px !important;
        width: auto !important;
    }
}
        /* ============================================================
           TOC STYLES
           ============================================================ */
        .article-toc {
            margin: 20px 0 30px 0;
        }

        .article-toc .side-card-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            padding: 12px 18px;
            background: #f0f2f7;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-family: var(--gbp-primary-font, 'Poppins', sans-serif);
            font-size: 16px;
            font-weight: 600;
            color: var(--primary-color);
            text-align: left;
            transition: background 0.2s;
        }

        .article-toc .side-card-head:hover {
            background: #e5e8f0;
        }

        .toc-toggle-icon {
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }

        /* TOC collapsed by default */
        .article-toc.toc-collapsed .toc-toggle-icon {
            transform: rotate(-90deg);
        }

        /* TOC content hidden by default (collapsed state) */
        .article-toc .toc-list {
            list-style: none;
            padding: 12px 18px 16px 18px;
            margin: 0;
            background: #fafbfd;
            border-radius: 0 0 8px 8px;
            border: 1px solid #e9ecef;
            border-top: none;
            display: none; /* Hidden by default */
        }

        /* When NOT collapsed, show the TOC */
        .article-toc:not(.toc-collapsed) .toc-list {
            display: block;
        }

        .article-toc .toc-list li {
            margin: 0;
            padding: 0;
            line-height: 1.5;
            position: relative;
        }

        .article-toc .toc-list li a {
            display: block;
            padding: 6px 0 6px 30px;
            color: #333;
            font-family: var(--gbp-primary-font, 'Poppins', sans-serif);
            font-size: 14px;
            text-decoration: none;
            border-bottom: 1px solid #f0f2f7;
            transition: color 0.2s, padding-left 0.2s;
            position: relative;
        }

        .article-toc .toc-list li a:hover {
            color: var(--secondary-color);
            padding-left: 36px;
        }

        .article-toc .toc-list li:last-child a {
            border-bottom: none;
        }

        /* TOC numbering styles - show numbers */
        .toc-list .toc-number {
            position: absolute;
            left: 0;
            top: 6px;
            color: var(--primary-color);
            font-weight: 600;
            font-size: 13px;
        }

        .article-toc .toc-list li a:hover .toc-number {
            color: var(--secondary-color);
        }

        /* Nested TOC styles */
        .article-toc .toc-list .toc-sublist {
            list-style: none;
            padding-left: 0;
            margin: 0;
        }

        .article-toc .toc-list .toc-sublist li a {
            font-size: 13px;
            color: #555;
            padding: 4px 0 4px 40px;
            border-bottom: none;
        }

        .article-toc .toc-list .toc-sublist li a .toc-number {
            left: 10px;
            font-size: 12px;
            color: #666;
        }

        .article-toc .toc-list .toc-sublist li a:hover {
            color: var(--secondary-color);
            padding-left: 46px;
        }

        .article-toc .toc-list .toc-sublist li a:hover .toc-number {
            color: var(--secondary-color);
        }

        /* Third level */
        .article-toc .toc-list .toc-sublist .toc-sublist li a {
            padding-left: 55px;
            font-size: 12px;
        }

        .article-toc .toc-list .toc-sublist .toc-sublist li a .toc-number {
            left: 25px;
            font-size: 11px;
        }

        .article-toc .toc-list .toc-sublist .toc-sublist li a:hover {
            padding-left: 61px;
        }

        /* Heading scroll offset */
        .blog-body h2,
        .blog-body h3,
        .blog-body h4,
        .blog-body h5 {
            scroll-margin-top: 100px;
        }

 
        /* Mobile: sidebar should not be sticky */
        @media (max-width: 992px) {
            .main-wrap {
                flex-direction: column;
            }
            
      
        }
        
        /*//popular*/
          /* ==========================================================
   POPULAR BLOGS SECTION
   ========================================================== */

/* Section wrapper */
.ainosof-solutions-section {
    width: 100%;
    padding: 25px 0 35px;
    background: #ffffff;
    overflow: hidden;
}

/* Container */
.container-fluid {
    width: calc(100% - 80px);
    max-width: 1500px;
    margin: 0 auto;
}

/* ==========================================================
   HEADER - CENTERED (Using your existing classes)
   ========================================================== */

.ainosof-section-header {
    width: 100%;
    text-align: center;
    margin-bottom: 28px;
}

.ainosof-section-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 13px;
    border-radius: 50px;
    background: rgba(192, 0, 99, 0.07);
    border: 1px solid rgba(192, 0, 99, 0.13);
    color: var(--secondary-color);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ainosof-section-subtitle svg {
    width: 11px;
    height: 11px;
}

.ainosof-section-title {
    margin: 8px 0 5px;
    color: var(--primary-color);
    font-size: clamp(24px, 2.5vw, 32px);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.5px;
}

.ainosof-section-title span {
    color: var(--secondary-color);
}

.ainosof-section-desc {
    max-width: 680px;
    margin: 5px auto 0;
    color: #62627a;
    font-size: 13px;
    line-height: 1.6;
}

/* ==========================================================
   CAROUSEL WRAPPER - ARROWS ON SIDES
   ========================================================== */

.aiw-popular-carousel-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    /*gap: 14px;*/
    position: relative;
}

.aiw-popular-carousel {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.aiw-popular-track {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 3px 0;
}

.aiw-popular-track::-webkit-scrollbar {
    display: none;
}

/* ==========================================================
   POPULAR CARD - 4 CARDS VISIBLE
   ========================================================== */

.aiw-popular-track .aiw-popular-card {
    flex: 0 0 calc((100% - 48px) / 4);
    min-width: 0;
    margin: 0;
    scroll-snap-align: start;
}

/* ==========================================================
   ARROWS
   ========================================================== */

.aiw-popular-arrow {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(2, 0, 102, .13);
    border-radius: 50%;
    background: #ffffff;
    color: var(--primary-color);
    cursor: pointer;
    box-shadow: 0 5px 16px rgba(2, 0, 102, .08);
    transition: all .25s ease;
    z-index: 5;
}

.aiw-popular-arrow svg {
    width: 13px;
    height: 13px;
}

.aiw-popular-arrow:not(:disabled):hover {
    color: #ffffff;
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: scale(1.06);
    box-shadow: 0 7px 20px rgba(192, 0, 99, .20);
}

.aiw-popular-arrow:disabled {
    opacity: .3;
    cursor: default;
    box-shadow: none;
}

/* ==========================================================
   VIEW ALL
   ========================================================== */

.blog-ain-view-all-wrapper {
    width: 100%;
    margin: 18px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-ain-view-all-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 16px;
    color: var(--primary-color);
    background: rgba(2, 0, 102, 0.04);
    border: 1px solid rgba(2, 0, 102, 0.10);
    border-radius: 50px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 750;
    transition: all 0.25s ease;
}

.blog-ain-view-all-link svg {
    width: 10px;
    height: 10px;
    transition: transform 0.25s ease;
}

.blog-ain-view-all-link:hover {
    color: #ffffff;
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(192, 0, 99, 0.17);
}

.blog-ain-view-all-link:hover svg {
    transform: translateX(3px);
}

/* ==========================================================
   TABLET - 2 CARDS VISIBLE
   ========================================================== */

@media (max-width: 900px) {
    .ainosof-solutions-section {
        padding: 20px 0 30px;
    }

    .container-fluid {
        width: calc(100% - 36px);
    }

    .ainosof-section-header {
        margin-bottom: 22px;
    }

    .ainosof-section-title {
        font-size: 26px;
    }

    .ainosof-section-desc {
        font-size: 12px;
    }

    .aiw-popular-carousel-wrapper {
        gap: 10px;
    }

    .aiw-popular-arrow {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .aiw-popular-track {
        gap: 13px;
    }

    .aiw-popular-track .aiw-popular-card {
        flex-basis: calc((100% - 13px) / 2);
    }
}

/* ==========================================================
   MOBILE - 1 CARD VISIBLE, ARROWS HIDDEN
   ========================================================== */

@media (max-width: 600px) {
    .ainosof-solutions-section {
        padding: 15px 0 25px;
    }

    .container-fluid {
        width: calc(100% - 24px);
    }

    .ainosof-section-header {
        margin-bottom: 18px;
    }

    .ainosof-section-subtitle {
        padding: 5px 10px;
        font-size: 8px;
    }

    .ainosof-section-title {
        font-size: 21px;
    }

    .ainosof-section-desc {
        font-size: 10px;
        line-height: 1.55;
    }

    .aiw-popular-carousel-wrapper {
        gap: 0;
    }

    /* HIDE ARROWS ON MOBILE */
    .aiw-popular-arrow {
        display: none;
    }

    .aiw-popular-track {
        gap: 10px;
    }

    .aiw-popular-track .aiw-popular-card {
        flex-basis: 90%;
    }

    .blog-ain-view-all-wrapper {
        margin-top: 14px;
    }

    .blog-ain-view-all-link {
        padding: 7px 13px;
        font-size: 9px;
    }
}

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

@media (max-width: 400px) {
    .container-fluid {
        width: calc(100% - 16px);
    }

    .ainosof-section-title {
        font-size: 19px;
    }

    .ainosof-section-desc {
        font-size: 9px;
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .aiw-popular-track {
        scroll-behavior: auto;
    }

    .aiw-popular-track *,
    .aiw-popular-track *::before,
    .aiw-popular-track *::after {
        transition-duration: .01ms !important;
    }
}
.ain-pop{
    width: calc(100% - 16px);
    margin:0 auto;
}


.aiw-article-card {
    background: #ffffff;
    border: 1px solid rgba(225, 29, 72, 0.12);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.aiw-article-card:hover {
    transform: translateY(-6px);
    /*border-color: var(--secondary-color);*/
    box-shadow: 0 12px 24px rgba(225, 29, 72, 0.2);
}

.aiw-article-card:hover h3 a {
    color: var(--primary-color);
}

.aiw-article-card:hover .aiw-card-thumb-large {
    transform: scale(1.05);
}

.aiw-card-large {
    display: flex;
    flex-direction: column;
}

.aiw-card-thumb-large {
    width: 100%;
    height: 190px;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.aiw-article-body {
    padding: 12px;
}

.aiw-article-body .aiw-cat-tag {
    display: inline-block;
    background: rgba(192, 0, 99, 0.1);
    color: var(--secondary-color);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.aiw-article-body h3 a {
    text-decoration: none;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 550;
    line-height: 1.3;
    transition: color 0.3s ease;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.aiw-article-body h4 {
    font-weight: 400;
    color: #555555;
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 6px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.aiw-article-meta-row {
    margin-top: 10px;
    font-size: 11px;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.aiw-article-meta-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.aiw-article-author {
    display: flex;
    align-items: center;
    gap: 6px;
}

.aiw-article-author img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
}


/* Read More link + arrow — used on ALL cards now */
.aiw-read-more-link {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 700;
    color: var(--secondary-color);
    text-decoration: none;
    flex-shrink: 0;
    padding: 5px 12px;
    border-radius: 30px;
    border: 1px solid transparent;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.aiw-read-more-link i {
    font-size: 10px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.aiw-read-more-link:hover {
    color: #ffffff;
    background: linear-gradient(135deg, var(--secondary-color), var(--primary-color));
    border-color: transparent;
    text-decoration: underline;
    text-underline-offset: 3px;
    box-shadow: 0 6px 16px rgba(192, 0, 99, 0.35);
    transform: translateY(-2px);
}

.aiw-read-more-link:hover i {
    transform: translateX(5px);
}
.article-svg{
    width:16px;
    height:16px;
    vertical-align:sub;
}
.related-blogs{
    max-width:1500px;
    margin:0 auto;
    margin-bottom:20px;
}
/* =========================================================
   SHARE MODAL
========================================================= */

.share-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(8, 8, 30, 0.58);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

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

    z-index: 99999;
    padding: 20px;
}

.share-modal-overlay.active {
    display: flex;
}


/* =========================================================
   MODAL
========================================================= */

.share-modal {
    position: relative;

    width: 100%;
    max-width: 430px;

    background: #ffffff;

    border-radius: 20px;

    padding: 28px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.22);

    animation: shareModalIn 0.25s ease;
}

@keyframes shareModalIn {

    from {
        opacity: 0;
        transform: translateY(15px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}


/* =========================================================
   CLOSE BUTTON
========================================================= */

.share-modal-close {
    position: absolute;

    top: 14px;
    right: 14px;

    width: 32px;
    height: 32px;

    border: 0;
    border-radius: 50%;

    background: #f3f3f6;
    color: #333;

    cursor: pointer;

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

    font-size: 14px;

    transition: all 0.2s ease;
}

.share-modal-close:hover {
    background: #020066;
    color: #ffffff;
    transform: rotate(90deg);
}


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

.share-modal-header {
    display: flex;
    align-items: center;

    gap: 14px;

    padding-right: 35px;
}


/* Share Icon */

.share-modal-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 14px;

    background: #020066;
    color: #ffffff;

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

    font-size: 19px;

    box-shadow:
        0 7px 18px rgba(2, 0, 102, 0.18);
}


/* Title */

.share-modal-title {
    min-width: 0;
}

.share-modal h3 {
    margin: 0;

    color: #020066;

    font-size: 21px;
    line-height: 1.2;

    font-weight: 700;
}

.share-modal p {
    color: #777;

    font-size: 12px;
    line-height: 1.4;
}


/* =========================================================
   DIVIDER
========================================================= */

.share-modal-divider {
    height: 1px;

    background: #eeeeF3;

    margin:12px 0 12px;
}


/* =========================================================
   SOCIAL OPTIONS
========================================================= */

.share-modal-options {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    column-gap: 10px;
    row-gap: 18px;
}


/* Individual Option */

.share-option {

    border: 0;
    background: transparent;

    padding: 4px;

    text-decoration: none;

    color: #333;

    cursor: pointer;

    display: flex;
    flex-direction: column;

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

    gap: 7px;

    transition: transform 0.2s ease;
}

.share-option:hover {
    transform: translateY(-3px);
}


/* =========================================================
   SOCIAL ICON
========================================================= */

.share-option-icon {

    width: 48px;
    height: 48px;

    border-radius: 50%;

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

    font-size: 18px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.share-option:hover .share-option-icon {

    transform: scale(1.07);

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


/* =========================================================
   COPY
========================================================= */

.share-option-icon.copy {
    background: #eeeefa;
    color: #020066;
}


/* WhatsApp */

.share-option-icon.whatsapp {
    background: #e9f8ee;
    color: #168c45;
}


/* Facebook */

.share-option-icon.facebook {
    background: #edf2ff;
    color: #1877f2;
}


/* X */

.share-option-icon.x {
    background: #f2f2f2;
    color: #000000;
}


/* LinkedIn */

.share-option-icon.linkedin {
    background: #e9f4ff;
    color: #0a66c2;
}


/* Instagram */

.share-option-icon.instagram {
    background: #fcecf5;
    color: #c00063;
}


/* =========================================================
   OPTION NAME
========================================================= */

.share-option-name {

    font-size: 11px;

    font-weight: 600;

    color: #333;

    line-height: 1.2;

    text-align: center;
}


/* =========================================================
   COPY URL BOX
========================================================= */

.share-copy-box {

    display: flex;

    width: 100%;

    margin-top: 22px;

    border: 1px solid #dedee6;

    border-radius: 10px;

    overflow: hidden;

    background: #fafafa;
}


.share-copy-box input {

    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    background: transparent;

    padding: 11px 12px;

    font-size: 11px;

    color: #666;

    text-overflow: ellipsis;
}


.share-copy-box button {

    flex: 0 0 auto;

    border: 0;

    background: #020066;
    color: #ffffff;

    padding: 0 17px;

    font-size: 12px;

    font-weight: 600;

    cursor: pointer;

    transition: background 0.2s ease;
}

.share-copy-box button:hover {
    background: #c00063;
}
.share-option-icon svg{
    width:20px;
    height:20px;
}


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

@media (max-width: 500px) {

    .share-modal {

        max-width: 370px;

        padding: 24px 20px;

        border-radius: 18px;
    }


    .share-modal-header {

        gap: 12px;

        padding-right: 30px;
    }


    .share-modal-icon {

        width: 44px;
        height: 44px;

        flex-basis: 44px;

        border-radius: 12px;

        font-size: 17px;
    }


    .share-modal h3 {
        font-size: 19px;
    }


    .share-modal p {
        font-size: 11px;
    }


    .share-option-icon {

        width: 44px;
        height: 44px;

        font-size: 17px;
    }

}


@media (max-width: 360px) {

    .share-modal {

        padding: 22px 16px;
    }


    .share-modal-options {

        column-gap: 5px;
        row-gap: 15px;
    }


    .share-option-icon {

        width: 41px;
        height: 41px;
    }

}

/* ============================================================
   COMPACT ARTICLE NAVIGATION
   ============================================================ */

.compact-article-navigation {
    /*margin-top: 46px;*/
    padding-top: 26px;
    /*border-top: 1px solid #e8eaf0;*/
    font-family: 'Poppins', sans-serif;
}


/* ============================================================
   HEADING
   ============================================================ */

.compact-nav-heading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin-bottom: 20px;

    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.3px;

    color: #777b8d;
}

.compact-nav-line {
    width: 38px;
    height: 1px;
    background: #dfe2e9;
}

.compact-nav-heading-text {
    white-space: nowrap;
}


/* ============================================================
   MAIN WRAPPER
   ============================================================ */

.compact-nav-wrapper {
    display: grid;

    grid-template-columns: minmax(0, 1fr) 105px minmax(0, 1fr);

    align-items: center;

    min-height: 104px;

    padding: 14px 16px;

    border: 1px solid #e5e7ed;
    border-radius: 16px;

    background: #ffffff;

    box-shadow: 0 8px 25px rgba(18, 24, 58, 0.045);
}


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

.compact-nav-card {
    position: relative;

    display: flex;
    align-items: center;

    min-width: 0;
    height: 76px;

    padding: 0 12px;

    text-decoration: none !important;

    border-radius: 12px;

    background: #ffffff;

    transition:
        background 0.25s ease,
        transform 0.25s ease;
        gap:8px;
}

.compact-nav-card:hover {
    background: #fafaff;
}


/* ============================================================
   PREVIOUS / NEXT ALIGNMENT
   ============================================================ */

.compact-nav-previous {
    justify-content: flex-start;
}

.compact-nav-next {
    justify-content: flex-end;
}


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

.compact-nav-image-wrap {
    position: relative;

    width: 104px;
    height: 72px;

    flex-shrink: 0;

    border-radius: 10px;

    overflow: visible;
}

.compact-nav-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 10px;

    transition:
        transform 0.3s ease,
        filter 0.3s ease;
}

.compact-nav-card:hover .compact-nav-image {
    transform: scale(1.035);
    filter: brightness(0.94);
}


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

.compact-nav-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 0 22px 17px;
}


/* Previous content */

.compact-nav-previous .compact-nav-content {
    text-align: left;
    align-items: flex-start;
}


/* Next content */

.compact-nav-next .compact-nav-content {
    text-align: right;
    align-items: flex-end;
}


/* ============================================================
   LABEL
   ============================================================ */

.compact-nav-label {
    display: block;

    margin-bottom: 5px;

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

    line-height: 1.2;

    color: var(--secondary-color);

    text-transform: uppercase;
    letter-spacing: 0.9px;
}


/* ============================================================
   ARTICLE TITLE
   ============================================================ */

.compact-nav-title {
    display: -webkit-box;

    max-width: 270px;

    overflow: hidden;

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

    line-height: 1.45;

    color: #171b4d;

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    transition: color 0.25s ease;
}

.compact-nav-card:hover .compact-nav-title {
    color: var(--secondary-color);
}


/* ============================================================
   ARROW BUTTON
   ============================================================ */

.compact-nav-arrow {
    position: absolute;

    top: 50%;

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

    width: 30px;
    height: 30px;

    border-radius: 50%;

    background: #ffffff;

    border: 1px solid #e5e7ed;

    color: var(--secondary-color);

    font-size: 12px;

    box-shadow: 0 5px 15px rgba(18, 24, 58, 0.12);

    transform: translateY(-50%);

    z-index: 2;

    transition:
        background 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.25s ease;
}


/* Previous arrow */

.compact-nav-previous .compact-nav-arrow {
    right: -28px;
}


/* Next arrow */

.compact-nav-next .compact-nav-arrow {
    left: -28px;
}


/* ============================================================
   ARROW HOVER
   ============================================================ */

.compact-nav-previous:hover .compact-nav-arrow {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;

    transform: translate(-3px, -50%);
}

.compact-nav-next:hover .compact-nav-arrow {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: #ffffff;

    transform: translate(3px, -50%);
}


/* ============================================================
   CENTER CONTINUE AREA
   ============================================================ */

.compact-nav-center {
    position: relative;

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

    height: 76px;

    /*margin: 0 8px;*/

    border-left: 1px solid #eceef3;
    border-right: 1px solid #eceef3;
}


/* Small decorative dots */

.compact-nav-center::before,
.compact-nav-center::after {
    content: "";

    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

    background: var(--secondary-color);
}

.compact-nav-center::before {
    top: 16px;
}

.compact-nav-center::after {
    bottom: 16px;

    opacity: 0.35;
}


/* ============================================================
   CENTER ICON
   ============================================================ */

.compact-nav-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    margin-bottom: 5px;

    border-radius: 50%;

    background: #faf1f7;

    color: var(--secondary-color);

    font-size: 13px;
}

.compact-nav-center-icon svg {
    width: 14px;
    height: 14px;
}


/* ============================================================
   CENTER TEXT
   ============================================================ */

.compact-nav-center-text {
    font-size: 8px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.8px;

    color: #777b8d;
}


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

@media (max-width: 900px) {

    .compact-nav-wrapper {
        grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr);

        padding: 12px;
    }

    .compact-nav-image-wrap {
        width: 88px;
        height: 66px;
    }

    .compact-nav-content {
        padding: 0 13px;
    }

    .compact-nav-title {
        font-size: 12px;
    }

    .compact-nav-center {
        margin: 0 4px;
    }
}


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

@media (max-width: 700px) {

    .compact-article-navigation {
        margin-top: 38px;
        padding-top: 22px;
    }

    .compact-nav-heading {
        margin-bottom: 17px;
    }

    .compact-nav-wrapper {
        display: flex;
        flex-direction: column;

        gap: 0;

        padding: 10px;
    }

    .compact-nav-card {
        width: 100%;
        height: 78px;

        padding: 5px 8px;
    }

    .compact-nav-previous {
        justify-content: flex-start;
    }

    .compact-nav-next {
        justify-content: flex-start;
    }

    .compact-nav-next .compact-nav-content {
        order: 1;

        text-align: left;
        align-items: flex-start;
    }

    .compact-nav-next .compact-nav-image-wrap {
        order: 2;
    }

    .compact-nav-image-wrap {
        width: 92px;
        height: 66px;
    }

    .compact-nav-content {
        padding: 0 14px;
    }

    .compact-nav-title {
        max-width: 100%;

        font-size: 12.5px;
    }

    .compact-nav-center {
        width: 100%;
        height: 38px;

        margin: 4px 0;

        border-top: 1px solid #eceef3;
        border-bottom: 1px solid #eceef3;

        border-left: 0;
        border-right: 0;

        flex-direction: row;

        gap: 7px;
    }

    .compact-nav-center::before,
    .compact-nav-center::after {
        display: none;
    }

    .compact-nav-center-icon {
        width: 25px;
        height: 25px;

        margin-bottom: 0;

        font-size: 10px;
    }

    .compact-nav-center-text {
        font-size: 8px;
    }

    .compact-nav-previous .compact-nav-arrow {
        right: -10px;
    }

    .compact-nav-next .compact-nav-arrow {
        left: -10px;
    }
}


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

@media (max-width: 480px) {

    .compact-nav-heading {
        font-size: 9.5px;
        letter-spacing: 1px;
        gap: 9px;
    }

    .compact-nav-line {
        width: 25px;
    }

    .compact-nav-card {
        height: 72px;
    }

    .compact-nav-image-wrap {
        width: 82px;
        height: 60px;
    }

    .compact-nav-content {
        padding: 0 11px;
    }

    .compact-nav-label {
        font-size: 8px;
        margin-bottom: 4px;
    }

    .compact-nav-title {
        font-size: 11.5px;
        line-height: 1.4;
    }

    .compact-nav-arrow {
        width: 27px;
        height: 27px;

        font-size: 10px;
    }
}

/* ============================================================
   RELATED TAGS
============================================================ */

.aiw-related-tags {
    margin-bottom: 35px;

}


/* ------------------------------------------------------------
   HEADING
------------------------------------------------------------ */

.aiw-related-tags-heading {
    display: flex;
    align-items: left;
    gap: 14px;
    margin-bottom: 18px;
}

.aiw-related-tags-heading h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #222;
    white-space: nowrap;
    letter-spacing: -0.2px;
}

.aiw-related-tags-line {
    height: 1px;
    flex: 1;
    background: #e6e6e6;
}


/* ------------------------------------------------------------
   TAG LIST
------------------------------------------------------------ */

.aiw-related-tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 10px;
    align-items: center;
}


/* ------------------------------------------------------------
   TAG / PILL
------------------------------------------------------------ */

.aiw-related-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 8px 13px;

    border: 1px solid #e1e4ea;
    border-radius: 999px;

    background: #fff;

    color: #344054;
    text-decoration: none;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Tag icon */

.aiw-related-tag-icon {
    font-size: 10px;
    color: #020066;
}


/* Hover */

.aiw-related-tag:hover {
    background: #f5f7ff;
    border-color: #020066;
    color: #020066;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(2, 0, 102, 0.08);
}

.aiw-related-tag:hover .aiw-related-tag-icon {
    color: #020066;
}


/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */

@media (max-width: 600px) {

    .aiw-related-tags {
        margin-top: 28px;
        margin-bottom: 28px;
        padding-top: 18px;
    }

    .aiw-related-tags-heading {
        gap: 10px;
        margin-bottom: 15px;
    }

    .aiw-related-tags-heading h3 {
        font-size: 16px;
    }

    .aiw-related-tags-list {
        gap: 8px;
    }

    .aiw-related-tag {
        padding: 7px 11px;
        font-size: 12px;
    }

}