.post-meta li {
    display: inline-block;
    font-size: 0.8rem;
    list-style: none;
    padding-left: 1rem;
}

.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
}

figure {
    margin: 0;
    padding: 0;
}

figure img {
    width: 100%;
    max-width: 100%;
    height: auto !important;
    border: 0;
    box-shadow: 0 0 0 0.05rem rgba(8, 60, 130, 0.06), 0 0 1.25rem rgba(30, 34, 40, 0.04);
    border-top-left-radius: var(--bs-card-border-radius);
    border-top-right-radius: var(--bs-card-border-radius);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.card {
    --bs-card-spacer-y: 2rem;
    --bs-card-spacer-x: 2rem;
    --bs-card-title-spacer-y: 0.5rem;
    --bs-card-title-color: #343f52;
    --bs-card-subtitle-color: ;
    --bs-card-border-width: 1px;
    --bs-card-border-color: rgba(164, 174, 198, 0.2);
    --bs-card-border-radius: 0.4rem;
    --bs-card-box-shadow: ;
    --bs-card-inner-border-radius: 0.4rem;
    --bs-card-cap-padding-y: 0.9rem;
    --bs-card-cap-padding-x: 2rem;
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: ;
    --bs-card-height: ;
    --bs-card-color: ;
    --bs-card-bg: var(--bs-white);
    --bs-card-img-overlay-padding: 1rem;
    --bs-card-group-margin: 0.75rem;
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: var(--bs-card-height);
    word-wrap: break-word;
    background-color: var(--bs-card-bg);
    background-clip: border-box;
    border-radius: var(--bs-card-border-radius);
    box-shadow: 0 0 0 0.05rem rgba(8, 60, 130, 0.06), 0rem 0rem 1.25rem rgba(30, 34, 40, 0.04);
    border: 0;
    color: inherit;
}

.social .uil-twitter {
    color: #5daed5;
}

.social .uil-twitter:hover {
    color: #5daed5;
}

.social .uil-facebook-f {
    color: #4470cf;
}

.social .uil-instagram {
    color: #d53581;
}

.social .uil-linkedin {
    color: #0A66C2;
}

.social .uil-whatsapp {
    color: #25D366;
}

.nav.social a {
    background-color: #e0e9fa;
    text-decoration: none;
}

.nav.social a:hover {
    background-color: #e0e9fa;
}

.overlay a {
    position: relative;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    cursor: pointer !important;
}

.overlay-1 figcaption {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0.75rem 1rem;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    opacity: 0;
    text-align: center;
    z-index: 5;
    pointer-events: none;
}

.overlay-1 .from-top {
    position: absolute;
    padding: 0.75rem 1rem;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-80%);
    box-sizing: border-box;
}

.overlay * {
    color: var(--bs-white) !important;
    transition: all 0.4s ease;
}

.overlay span.bg {
    position: relative;
    display: block;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3;
    cursor: pointer !important;
    opacity: 0;
    z-index: 4;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(30, 34, 40, 0.6);
}

.link-dark {
    color: var(--bs-card-color) !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    line-height: 1.35;
}

a.link-dark:hover {

    color: var(--primary-color) !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
}

.post-content {
    position: relative;
}

.read-more {
    color: black;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    line-height: 1.35;
}

a.read-more:hover {
    color: var(--bs-card-color) !important;
    transition: all 0.2s ease-in-out;
    text-decoration: none;
    line-height: 1.35;
}

.read-more i {
    padding-left: 1rem;
}

.post-meta i {
    padding-right: 1.2rem;
}

a.page-link {
    text-decoration: none;
}

a:focus,
a:active {
    outline: none !important;
    box-shadow: none !important;
}

.pagination {
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    --bs-pagination-font-size: 0.65rem;
    --bs-pagination-color: #343f52;
    --bs-pagination-bg: var(--bs-white);
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: rgba(164, 174, 198, 0.2);
    --bs-pagination-border-radius: 0.4rem;
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-hover-bg: var(--bs-white);
    --bs-pagination-hover-border-color: rgba(164, 174, 198, 0.2);
    --bs-pagination-focus-color: var(--bs-primary);
    --bs-pagination-focus-bg: var(--bs-white);
    --bs-pagination-focus-box-shadow: unset;
    --bs-pagination-active-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-white);
    --bs-pagination-active-border-color: rgba(164, 174, 198, 0.2);
    --bs-pagination-disabled-color: #959ca9;
    --bs-pagination-disabled-bg: var(--bs-white);
    --bs-pagination-disabled-border-color: rgba(164, 174, 198, 0.2);
    display: flex;
    padding-left: 0;
    list-style: none;
}

.pagination li {
    display: list-item;
    unicode-bidi: isolate;
    --bs-pagination-padding-x: 0;
    --bs-pagination-padding-y: 0;
    --bs-pagination-font-size: 0.65rem;
    --bs-pagination-color: #343f52;
    --bs-pagination-bg: var(--bs-white);
    --bs-pagination-border-width: 1px;
    --bs-pagination-border-color: rgba(164, 174, 198, 0.2);
    --bs-pagination-border-radius: 0.4rem;
    --bs-pagination-hover-color: var(--bs-primary);
    --bs-pagination-hover-bg: var(--bs-white);
    --bs-pagination-hover-border-color: rgba(164, 174, 198, 0.2);
    --bs-pagination-focus-color: var(--bs-primary);
    --bs-pagination-focus-bg: var(--bs-white);
    --bs-pagination-focus-box-shadow: unset;
    --bs-pagination-active-color: var(--bs-primary);
    --bs-pagination-active-bg: var(--bs-white);
    --bs-pagination-active-border-color: rgba(164, 174, 198, 0.2);
    --bs-pagination-disabled-color: #959ca9;
    --bs-pagination-disabled-bg: var(--bs-white);
    --bs-pagination-disabled-border-color: rgba(164, 174, 198, 0.2);
    display: flex;
    padding-left: 0;
    list-style: none;
}

.pagination li.active a {
    display: list-item;
    unicode-bidi: isolate;
    color: var(--bs-primary);
    display: flex;
    padding-left: 0;
    list-style: none;
}

.pagination li a {
    padding: 1rem !important;
    width: 100%;
    min-width: 2.5rem;
    height: 2.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: all 0.2s ease-in-out;
    position: relative;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    text-decoration: none;
    color: var(--bs-card-color);
}

.pagination li a:hover {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    justify-content: center;
    align-items: center;
    border: var(--bs-pagination-border-width) solid var(--bs-pagination-border-color);
    transition: all 0.2s ease-in-out;
    position: relative;
    padding: var(--bs-pagination-padding-y) var(--bs-pagination-padding-x);
    text-decoration: none;
    color: var(--bs-primary);
}

.pagination li:first-child a {
    border-top-left-radius: var(--bs-pagination-border-radius);
    border-bottom-left-radius: var(--bs-pagination-border-radius);
}

.blog .lead a {
    color: var(--bs-card-color);
    text-decoration: none;
}

.blog .lead a:hover {
    color: var(--bs-primary);
    text-decoration: none;
}

/* Special article related styles*/


.wsp-article {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 17px;
    line-height: 1.8;
    color: #1e293b;
}

/* ---------- Typography ---------- */
.wsp-article h1 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 800;
    line-height: 1.2;
    color: #1e293b;
    margin-bottom: 16px;
}

.wsp-article h2 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(19px, 2.5vw, 24px);
    font-weight: 700;
    color: #1e293b;
    margin: 48px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e2e8f0;
}

.wsp-article h3 {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 28px 0 10px;
}

.wsp-article p {
    margin-bottom: 18px;
}

.wsp-article ul,
.wsp-article ol {
    margin: 0 0 20px 22px;
    padding: 0;
}

.wsp-article li {
    margin-bottom: 8px;
}

.wsp-article blockquote {
    border-left: 4px solid #1a56db;
    padding: 10px 18px;
    margin: 24px 0;
    color: #64748b;
    font-style: italic;
}

/* ---------- Article Header ---------- */
.wsp-article .article-header {
    border-bottom: 3px solid #1a56db;
    padding-bottom: 28px;
    margin-bottom: 36px;
}

.wsp-article .article-category {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1a56db;
    margin-bottom: 12px;
}

.wsp-article .article-meta {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    color: #64748b;
}

.wsp-article .article-excerpt-hero {
    font-size: 18px;
    color: #64748b;
    font-style: italic;
    border-left: 4px solid #f59e0b;
    padding: 12px 18px;
    margin: 28px 0 0;
    background: #fffbf2;
    border-radius: 0 10px 10px 0;
}

/* ---------- Callout Boxes ---------- */
.wsp-article .callout {
    border-radius: 10px;
    padding: 18px 22px;
    margin: 28px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    line-height: 1.7;
}

.wsp-article .callout strong {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.wsp-article .callout ul {
    margin: 6px 0 0 18px;
    padding: 0;
}

.wsp-article .callout-blue {
    background: #eff6ff;
    border-left: 4px solid #1a56db;
}

.wsp-article .callout-amber {
    background: #fffbeb;
    border-left: 4px solid #f59e0b;
}

.wsp-article .callout-green {
    background: #f0fdf4;
    border-left: 4px solid #10b981;
}

.wsp-article .callout-red {
    background: #fff1f2;
    border-left: 4px solid #ef4444;
}

/* ---------- Comparison Table ---------- */
.wsp-article .table-wrap {
    overflow-x: auto;
    margin: 28px 0;
}

.wsp-article table {
    width: 100%;
    border-collapse: collapse;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
}

.wsp-article th {
    background: #1a56db;
    color: #fff;
    font-weight: 600;
    padding: 11px 14px;
    text-align: left;
}

.wsp-article td {
    padding: 11px 14px;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: top;
}

.wsp-article tr:nth-child(even) td {
    background: #f8fafc;
}

/* ---------- Use Case Cards ---------- */
.wsp-article .use-case-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.wsp-article .use-case-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 18px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
}

.wsp-article .use-case-card .uc-icon {
    font-size: 22px;
    margin-bottom: 8px;
}

.wsp-article .use-case-card .uc-title {
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.wsp-article .use-case-card .uc-desc {
    color: #64748b;
    line-height: 1.5;
}

/* ---------- Step-by-Step Guide ---------- */
.wsp-article .steps {
    counter-reset: steps;
    margin: 24px 0;
}

.wsp-article .step {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.wsp-article .step-num {
    min-width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #1a56db;
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.wsp-article .step-content {
    flex: 1;
}

.wsp-article .step-content strong {
    display: block;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 15px;
    margin-bottom: 4px;
}

.wsp-article .step-content p {
    margin: 0;
    font-size: 15px;
}

/* ---------- FAQ Section ---------- */
.wsp-article .faq-section {
    margin-top: 52px;
}

.wsp-article .faq-item {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    margin-bottom: 14px;
    overflow: hidden;
}

.wsp-article .faq-q {
    background: #f8fafc;
    padding: 15px 18px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 600;
    font-size: 15px;
}

.wsp-article .faq-a {
    padding: 14px 18px;
    font-size: 15px;
    line-height: 1.7;
    color: #1e293b;
}

/* ---------- Internal Links Box ---------- */
.wsp-article .internal-links-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 24px;
    margin: 40px 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.wsp-article .internal-links-box h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #64748b;
    margin-bottom: 12px;
}

.wsp-article .internal-links-box ul {
    margin: 0;
    padding-left: 18px;
}

.wsp-article .internal-links-box li {
    margin-bottom: 6px;
    font-size: 15px;
}

/* ---------- References ---------- */
.wsp-article .references {
    margin-top: 44px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #64748b;
}

.wsp-article .references h4 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    color: #64748b;
}

.wsp-article .references ol {
    padding-left: 18px;
}

.wsp-article .references li {
    margin-bottom: 6px;
}

/* ---------- Excerpt Footer ---------- */
.wsp-article .article-excerpt-footer {
    background: #f1f5f9;
    border-radius: 10px;
    padding: 16px 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: #64748b;
    margin-top: 44px;
}

.wsp-article .article-excerpt-footer strong {
    color: #1e293b;
}

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
    .wsp-article .use-case-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 420px) {
    .wsp-article .use-case-grid {
        grid-template-columns: 1fr;
    }
}