/* Custom styles for Legal Byte website */

/* ========================================================================== */
/* FONT LOADING - Prevent CLS from font swap */
/* ========================================================================== */

/* Use system fonts as fallback with similar metrics to Josefin Sans */
:root {
    --font-fallback: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Optional: Preload font-display for async fonts */
@font-face {
    font-family: 'Josefin Sans';
    font-display: swap;
}

/* ========================================================================== */
/* TYPOGRAPHY SYSTEM - Replacing Webflow Classes */
/* ========================================================================== */

/* Heading Styles - Force Josefin Sans with !important */
h1, .heading-h1 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

h2, .heading-h2 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 41.6px !important;
    margin-top: 0;
    margin-bottom: 3rem;
}

h3, .heading-h3 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 0;
    margin-bottom: 1.5rem;
}

h4, .heading-h4 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

h5, .heading-h5 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

/* Text Sizes */
.text-large {
    font-family: "Josefin Sans", sans-serif;
    font-size: 18px;
    line-height: 1.6;
}

.text-medium {
    font-family: "Josefin Sans", sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

.text-small {
    font-family: "Josefin Sans", sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

/* Utility Classes */
.t-white {
    color: #ffffff !important;
}

/* Remove bottom spacing for white headings (e.g., on orders page) */
h3.t-white, .heading-h3.t-white {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

/* Fix white text issue in howitworks section */
.howitworks {
    color: #333333 !important;
}

.howitworks h1,
.howitworks h2,
.howitworks h3,
.howitworks h4,
.howitworks h5,
.howitworks h6,
.howitworks p,
.howitworks div {
    color: #333333 !important;
}

/* Keep SVG icons Legal Byte blue in howitworks section */
.howitworks svg {
    color: #21A0DF !important;
}

.howitworks path {
    stroke: #21A0DF !important;
}

/* Change tab border color to Legal Byte blue */
.uui-layout13_tabs-link.w--current {
    border-left-color: #21A0DF !important;
}

.uui-layout13_tabs-link:hover {
    border-left-color: #21A0DF !important;
}

/* Change pricing tier names to Legal Byte blue and use Josefin Sans */
.spark-plan-name {
    font-family: "Josefin Sans", sans-serif !important;
    color: #21A0DF !important;
    font-size: 24px !important;
    font-weight: 600 !important;
}

/* Ensure all pricing-related text uses Josefin Sans */
.spark-price-text,
.spark-price-text-copy,
.old-price,
.spark-foreground-secondary,
.paragraph-3,
.paragraph-6,
.paragraph-7 {
    font-family: "Josefin Sans", sans-serif !important;
}

/* Ensure all other text elements use Josefin Sans */
.text-block-57,
.text-block-58,
.text-block-84,
.uui-heading-subheading,
.uui-heading-xxsmall-2,
.uui-heading-xxsmall-3,
.uui-testimonial13_client-heading,
.uui-text-size-small-3,
.uui-text-size-large-4,
.waves---center-heading,
.features-title,
.products-title,
.heading-6,
.spark-bold-heading-2,
.spark-secondary-paragraph-copy,
p, div, span, label {
    font-family: "Josefin Sans", sans-serif !important;
}

/* Standardize FAQ heading styles - both classes should look identical */
.uui-faq04_heading,
.uui-faq01_heading {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

/* Make pricing section buttons full width */
.spark-pricing-bottom {
    width: 100% !important;
    padding: 20px !important;
}

.spark-pricing-bottom .hero-btn,
.spark-pricing-bottom .w-button {
    width: 100% !important;
    display: block !important;
    text-align: center !important;
    padding: 16px 32px !important;
}

/* Fix footer link visibility - ensure links are always visible against dark background */
.footer-menu-link,
.footer-menu-link.w--current {
    color: #ffffff !important;
    opacity: 0.9 !important;
}

.footer-menu-link:hover,
.footer-menu-link.w--current:hover {
    color: #21A0DF !important;
    opacity: 1 !important;
}

/* Standardize contact form inputs - remove blue color from dropdown */
.property-location,
.legal-byte-input,
.rl-form-input,
.rl-form-text-area {
    background-color: #ffffff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    color: #333333 !important;
    font-family: "Josefin Sans", sans-serif !important;
}

.property-location:focus,
.legal-byte-input:focus,
.rl-form-input:focus,
.rl-form-text-area:focus {
    border-color: #21A0DF !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(33, 160, 223, 0.1) !important;
}

/* Wrap challenge items in inline flex - for-businesses.html */
.rl_layout242_item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.rl_layout242_spacing-block-2 {
    display: none !important;
}


/* Button width and padding fixes */
.hero-btn,
.hero-btn2 {
    padding: 12px 24px !important;
    min-width: fit-content !important;
    width: auto !important;
    height: auto !important;
    white-space: nowrap !important;
    display: inline-block !important;
    text-align: center !important;
}

/* Wide CTA buttons - for longer text */
.wide-cta {
    padding: 12px 32px !important;
    min-width: 180px !important;
}

/* Ensure buttons have proper spacing */
.hero-btn .text-block-84,
.hero-btn div {
    margin: 0 !important;
    padding: 0 !important;
}

/* Fix form submit buttons */
input.hero-btn[type="submit"] {
    padding: 12px 32px !important;
    min-width: 150px !important;
    cursor: pointer !important;
}

/* Fix "Streamline Every Step with Legal Byte" heading styling */
.our-solution h2 {
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 41.6px !important;
    color: rgb(16, 24, 40) !important;
}

/* Fix "Why It Matters" heading styling */
.benefits h2 {
    text-align: left !important;
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 41.6px !important;
    color: rgb(16, 24, 40) !important;
}

/* Remove horizontal padding from spark-container in our-solution section */
.our-solution .spark-container-6.w-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Remove padding from rl-padding-global-3 in our-solution section only */
.our-solution .rl-padding-global-3 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Fix testimonial designation font family */
.pricing-and-testimonial .uui-text-size-small-2.t-white {
    font-family: "Josefin Sans", sans-serif !important;
}

/* Center Enterprise Plans heading */
.pricing-and-testimonial .waves-left-pricing-3 h2.uui-heading-medium-7.t-white {
    text-align: center !important;
}

/* Center Contact Sales button in pricing section */
.pricing-and-testimonial .waves---mg-top-32 {
    display: flex !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Center Contact Sales button in hero section */
.hero-section .waves---mg-top-16 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

.hero-section .waves---mg-top-16 .hero-btn.wide-cta {
    margin-left: auto !important;
    margin-right: auto !important;
    width: auto !important;
    min-width: 180px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Fix logo container to fit logo size */
.brand-logo {
    width: auto !important;
    padding: 5px !important;
}

.brand-logo-change {
    width: auto !important;
    max-width: 150px !important;
    height: auto !important;
}

/* Remove this rule - now using standard padding */

/* ========================================================================== */
/* STANDARDIZED SECTION PADDING ACROSS ALL PAGES */
/* ========================================================================== */

/* Standard vertical section spacing: Reduced from 80px to 50px for better spacing */
.spark-section-4,
.testimonial-slider-small {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

/* Ensure all rl-padding-section-large variants have consistent spacing */
.rl-padding-section-large,
.rl-padding-section-large-2,
.rl-padding-section-large-3 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Override for specific sections that need padding */
.challenges .rl-padding-section-large-2,
.benefits .rl-padding-section-large-2,
.key-features .rl-padding-section-large-3,
.our-solution .rl-padding-section-large-2 {
    padding-top: 25px !important;
    padding-bottom: 25px !important;
}

/* Standardize uui-padding-vertical-xhuge variants - reduced for better spacing */
.uui-padding-vertical-xhuge,
.uui-padding-vertical-xhuge-3,
.uui-padding-vertical-xhuge-9,
.uui-padding-vertical-xhuge-12,
.uui-padding-vertical-xhuge-14,
.uui-padding-vertical-xhuge-15,
.uui-padding-vertical-xhuge-16,
.uui-padding-vertical-xhuge-17,
.uui-padding-vertical-xhuge-20 {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

/* Horizontal padding consistency for main containers */
.waves---main-container-3,
.waves---main-container-4 {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Override horizontal padding for all sections to 32px */
.rl-padding-global-3,
.rl-padding-global-4 {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Ensure container doesn't add extra horizontal padding */
.rl-container-large-3,
.rl-container-large-4 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ========================================================================== */
/* WEBFLOW CLASS COMPATIBILITY - Map old Webflow classes to new system */
/* These will be removed once HTML is updated */
/* ========================================================================== */

/* H1 equivalents */
.uui-heading-medium-7 {
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 41.6px !important;
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
}

.uui-heading-medium-11 {
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 41.6px !important;
    margin-top: 0 !important;
    margin-bottom: 3rem !important;
}

/* H3 equivalents */
.uui-heading-xsmall-6 {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Text size equivalents */
.uui-text-size-medium-4,
.uui-text-size-medium-2,
.uui-text-size-medium-11 {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.uui-text-size-small-2 {
    font-size: 14px !important;
    line-height: 1.5 !important;
}

/* ========================================================================== */
/* LAWYER-WITH-US PAGE SPECIFIC FIXES */
/* ========================================================================== */

/* Fix button alignment in hero section - left aligned */
.hero-block .waves---mg-top-16 {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
}

/* Fix hero heading - left align */
.hero-block h1.lwu {
    text-align: left !important;
}

/* Make "How It Works" heading white */
.whatwelookfor-howitworks .right-pane h2.lwu {
    color: white !important;
}

/* Make all workflow step headings and text white */
.whatwelookfor-howitworks .right-pane h3.lwu,
.whatwelookfor-howitworks .right-pane .text-medium.lwu {
    color: white !important;
}

/* Ensure all lawyer-with-us h2 headings use consistent styling */
.whypartnerwithus h2,
.benefits-lwu h2,
.testimonial-slider-small h2.lwy {
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 41.6px !important;
}

/* Make "Are You the Right Fit?" section text white */
.whatwelookfor-howitworks .left-pane h2.lwu,
.whatwelookfor-howitworks .left-pane .text-medium.lwu {
    color: white !important;
}

/* Display testimonials side by side instead of carousel */
.testimonial-slider-small .w-slider-mask {
    display: flex !important;
    gap: 24px !important;
    overflow: visible !important;
}

.testimonial-slider-small .testimonial-slide-wrapper {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    transform: none !important;
    position: relative !important;
    opacity: 1 !important;
}

/* Hide Lorem Ipsum placeholder testimonials */
.testimonial-slider-small .testimonial-slide-wrapper:nth-child(n+3) {
    display: none !important;
}

/* Hide carousel navigation */
.testimonial-slider-small .testimonial-slider-left,
.testimonial-slider-small .testimonial-slider-right,
.testimonial-slider-small .testimonial-slide-nav {
    display: none !important;
}

/* Increase width of "Ready to Partner?" section */
.signup .spark-container-7 {
    max-width: 800px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.signup .spark-centered-901 {
    max-width: 100% !important;
}

/* Increase contact form input width */
.signup .spark-input {
    width: 400px !important;
    max-width: 100% !important;
}

/* Fix hero subtext color for visibility */
.hero-block .hero-sub-text.lwu {
    color: #333333 !important;
}

/* Fix "Sign Up to Partner" button - reduce height and increase width */
.hero-block .waves---mg-top-16 .hero-btn.wide-cta {
    min-width: 280px !important;
    width: auto !important;
    padding: 14px 60px !important;
    height: auto !important;
    line-height: 1.4 !important;
    white-space: nowrap !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Fix testimonial section padding structure */
.testimonial-slider-small {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

.testimonial-slider-small .container-35 {
    padding-left: 32px !important;
    padding-right: 32px !important;
}

/* Make testimonial slides wider */
.testimonial-slider-small .testimonial-slide-wrapper {
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* Fix signup section padding structure - reduce horizontal padding for more spread */
.signup .spark-container-7 {
    padding-left: 0px !important;
    padding-right: 0px !important;
    max-width: 800px !important;
    margin: 0 auto !important;
}

/* Vertically center "Grow Your Practice, Your Way" heading */
.whypartnerwithus .uui-layout21_content-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 100% !important;
}

.whypartnerwithus .uui-layout21_content-left .uui-padding-vertical-xhuge {
    display: none !important;
}

/* Ensure the grid cell takes full height */
.whypartnerwithus .w-layout-grid.uui-layout20_component-copy {
    align-items: stretch !important;
}

/* Fix benefits section layout - image and text sizing */
.benefits-lwu .spark-flex-row-2 {
    display: flex !important;
    gap: 48px !important;
    align-items: center !important;
}

.benefits-lwu .spark-rounded-corner-image {
    max-width: 34% !important;
    width: 34% !important;
    height: auto !important;
    flex-shrink: 0 !important;
}

.benefits-lwu .spark-flexed-rows {
    flex: 1 !important;
    max-width: none !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
}

/* Display icon and heading side by side in benefits section */
.benefits-lwu .spark-flexed-rows {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
}

.benefits-lwu .spark-flexed-rows > div {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
}

/* Wrapper for icon and heading to display them side by side */
.icon-and-heading-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.icon-and-heading-wrapper .spark-small-icon-4 {
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 0 !important;
}

.icon-and-heading-wrapper h5 {
    margin: 0 !important;
}

.benefits-lwu .spark-flexed-rows > div p {
    margin: 0 !important;
    text-align: left !important;
}

/* Center form submit button */
.signup .spark-regular-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.signup .spark-regular-form input[type="submit"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Change vertical timeline line color to Legal Byte blue */
.whatwelookfor-howitworks .uui-layout32_progress-bar-2 {
    background-color: #21A0DF !important;
}

/* Make "Are You the Right Fit?" and "How It Works" horizontally aligned */
.whatwelookfor-howitworks {
    display: flex !important;
    gap: 48px !important;
    align-items: stretch !important;
}

.whatwelookfor-howitworks .left-pane,
.whatwelookfor-howitworks .right-pane {
    flex: 1 !important;
    width: 50% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 50px 32px !important;
}

/* Remove inconsistent top margins in child elements */
.whatwelookfor-howitworks .a-feature-title {
    margin-top: 0 !important;
}

.whatwelookfor-howitworks .uui-layout32_content-left-2 {
    margin-top: 0 !important;
}

/* Remove spacing element that creates inconsistency */
.whatwelookfor-howitworks .uui-space-medium-6 {
    display: none !important;
}

/* Remove padding from right pane nested wrapper divs to match left pane structure */
.whatwelookfor-howitworks .right-pane .uui-page-padding-15 {
    padding: 0 !important;
}

.whatwelookfor-howitworks .right-pane .uui-container-large-16 {
    padding: 0 !important;
    max-width: none !important;
}

.whatwelookfor-howitworks .right-pane .uui-padding-vertical-xhuge-17 {
    padding: 0 !important;
}

/* Remove padding from left pane wrapper to match */
.whatwelookfor-howitworks .left-pane .a-container-regular {
    padding: 0 !important;
}

/* Responsive padding adjustments */
@media screen and (max-width: 991px) {
    .spark-section-4,
    .testimonial-slider-small,
    .uui-padding-vertical-xhuge,
    .uui-padding-vertical-xhuge-3,
    .uui-padding-vertical-xhuge-9,
    .uui-padding-vertical-xhuge-12,
    .uui-padding-vertical-xhuge-14,
    .uui-padding-vertical-xhuge-15,
    .uui-padding-vertical-xhuge-16,
    .uui-padding-vertical-xhuge-17,
    .uui-padding-vertical-xhuge-20 {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .challenges .rl-padding-section-large-2,
    .benefits .rl-padding-section-large-2,
    .key-features .rl-padding-section-large-3,
    .our-solution .rl-padding-section-large-2 {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }
}

@media screen and (max-width: 767px) {
    .spark-section-4,
    .testimonial-slider-small,
    .uui-padding-vertical-xhuge,
    .uui-padding-vertical-xhuge-3,
    .uui-padding-vertical-xhuge-9,
    .uui-padding-vertical-xhuge-12,
    .uui-padding-vertical-xhuge-14,
    .uui-padding-vertical-xhuge-15,
    .uui-padding-vertical-xhuge-16,
    .uui-padding-vertical-xhuge-17,
    .uui-padding-vertical-xhuge-20 {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .challenges .rl-padding-section-large-2,
    .benefits .rl-padding-section-large-2,
    .key-features .rl-padding-section-large-3,
    .our-solution .rl-padding-section-large-2 {
        padding-top: 25px !important;
        padding-bottom: 25px !important;
    }

    .waves---main-container-3,
    .waves---main-container-4 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Lawyer-with-us mobile padding adjustments */
    .testimonial-slider-small .container-35,
    .signup .spark-container-7 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}

/* ============================================================
   BLOG PAGE STYLING
   ============================================================ */

/* Blog home page - Page headline */
.page-headline {
    text-align: center !important;
    padding: 60px 20px !important;
}

.page-headline h1 {
    font-size: 48px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
    color: rgb(16, 24, 40) !important;
}

.page-headline .text-medium {
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: rgb(102, 112, 133) !important;
    max-width: 700px !important;
    margin: 0 auto !important;
}

/* Blog post listing cards */
.resource-list .collection-item h1 {
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: rgb(16, 24, 40) !important;
    margin-top: 12px !important;
}

.resource-list .collection-item .text-block {
    font-size: 14px !important;
    color: rgb(102, 112, 133) !important;
    margin-bottom: 8px !important;
}

/* Spotlight resource (featured post) */
.spotlight-resource .uui-heading-small-2 {
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: rgb(16, 24, 40) !important;
}

.spotlight-resource .spotlight-text {
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: rgb(102, 112, 133) !important;
}

.spotlight-resource .text-small {
    font-size: 14px !important;
    color: rgb(102, 112, 133) !important;
}

/* Blog post detail pages */
/* Main blog title */
.rich-text-blk-blog.uui-heading-xsmall-6 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
    margin-top: 32px !important;
    color: rgb(16, 24, 40) !important;
    text-align: center !important;
}

/* Blog content area */
.blog-content-div {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 40px 10px !important;
    position: relative !important;
}

/* Blog content typography */
.rich-text-blk-blog h1 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-top: 48px !important;
    margin-bottom: 24px !important;
    color: rgb(16, 24, 40) !important;
}

.rich-text-blk-blog h2 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin-top: 40px !important;
    margin-bottom: 20px !important;
    color: rgb(16, 24, 40) !important;
}

.rich-text-blk-blog h3 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 24px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin-top: 32px !important;
    margin-bottom: 16px !important;
    color: rgb(16, 24, 40) !important;
}

.rich-text-blk-blog p {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: rgb(52, 64, 84) !important;
    margin-bottom: 20px !important;
}

.rich-text-blk-blog ul,
.rich-text-blk-blog ol {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
    color: rgb(52, 64, 84) !important;
    margin-bottom: 20px !important;
    padding-left: 30px !important;
}

.rich-text-blk-blog li {
    font-family: "Josefin Sans", sans-serif !important;
    margin-bottom: 10px !important;
}

.rich-text-blk-blog strong,
.rich-text-blk-blog .bold-text {
    font-weight: 600 !important;
}

/* Blog date section */
.image-date-blog-div {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 60px 0 60px !important;
    display: flex !important;
    flex-direction: column !important;
}

.image-date-blog-div .image {
    margin-bottom: 0 !important;
    order: 1 !important;
}

.blog-date {
    order: 2 !important;
    display: inline-flex !important;
    gap: 8px !important;
    align-items: center !important;
    margin-top: 16px !important;
    margin-left: 0 !important;
    margin-bottom: -60px !important;
    position: relative !important;
    z-index: 10 !important;
    background: white !important;
    padding: 8px 0 !important;
}

.blog-date .text-block-4,
.blog-date .text-block-2 {
    display: inline !important;
    margin: 0 !important;
}

/* Related blog posts section */
.more-read-blog-div {
    max-width: 1200px !important;
    margin: 60px auto !important;
    padding: 0 60px !important;
}

.addl-read-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: rgb(16, 24, 40) !important;
    line-height: 1.4 !important;
}

/* Blog category badges */
.spotlight-category .text-block-81 {
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #21A0DF !important;
    background-color: rgba(33, 160, 223, 0.1) !important;
    padding: 4px 12px !important;
    border-radius: 4px !important;
    display: inline-block !important;
}

/* Blog pagination */
.pagination-2 .uui-button {
    background-color: #21A0DF !important;
    color: white !important;
    border: none !important;
}

.pagination-2 .uui-button:hover {
    background-color: #1a8bc4 !important;
}