/* Custom styles for Legal Byte website */

/* ========================================================================== */
/* NAVBAR - Ensure it stays above all content */
/* ========================================================================== */

article.navbar {
    position: relative !important;
    z-index: 9999 !important;
}

.hamburger {
    position: relative !important;
    z-index: 10000 !important;
}

.mobile-nav-block {
    z-index: 9998 !important;
}

/* ========================================================================== */
/* BLOG HOME PAGE - Hide static content until JS replaces it */
/* ========================================================================== */

/* Hide static blog content initially - JS will show after loading from Firebase */
.spotlight-resource-div,
.resource-list.w-dyn-list {
    visibility: hidden !important;
}

/* Class added by JS after content is loaded from Firebase */
.spotlight-resource-div.loaded,
.resource-list.w-dyn-list.loaded {
    visibility: visible !important;
}

/* ========================================================================== */
/* 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 pricing section layout - side by side on desktop, stack on mobile */
.pricing-and-testimonial .waves-master-pricing-3 {
    display: flex !important;
    flex-direction: row !important;
    gap: 30px !important;
    align-items: stretch !important;
}

.pricing-and-testimonial .waves-left-pricing-3,
.pricing-and-testimonial .waves-right-pricing-3 {
    flex: 1 !important;
    width: 50% !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;
}

/* WhyPartnerWithUs section - match benefits-lwu padding/margins */
.whypartnerwithus {
    padding: 60px 0 !important;
}

.whypartnerwithus .uui-page-padding-14 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.whypartnerwithus .uui-container-large-15 {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
}

.whypartnerwithus .uui-padding-vertical-xhuge-16 {
    padding-top: 0 !important;
    padding-bottom: 0 !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;
}

/* Benefits-lwu section - consistent padding */
.benefits-lwu {
    padding: 60px 0 !important;
}

.benefits-lwu .spark-container-6 {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 24px !important;
    padding-right: 24px !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;
    }

    /* Stack "Are You the Right Fit?" and "How It Works" vertically on mobile */
    .whatwelookfor-howitworks {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .whatwelookfor-howitworks .left-pane,
    .whatwelookfor-howitworks .right-pane {
        width: 100% !important;
        padding: 30px 15px !important;
    }

    /* Testimonials mobile fix - stack vertically and constrain width */
    .testimonial-slider-small .w-slider-mask {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .testimonial-slider-small .testimonial-slide-wrapper {
        width: 100% !important;
        max-width: 100% !important;
    }

    .testimonial-slider-small .testimonial-card {
        padding: 20px 15px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .testimonial-slider-small .testimonial-card p {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .testimonial-slider-small .testimonial-info {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .testimonial-slider-small .testimonial-image-2 {
        width: 50px !important;
        height: 50px !important;
        flex-shrink: 0 !important;
    }

    .testimonial-slider-small .testimonial-icon-wrapper {
        display: none !important;
    }

    /* Signup form mobile fix */
    .signup .spark-input {
        width: 100% !important;
    }

    .signup .spark-container-7 {
        max-width: 100% !important;
    }

    /* WhyPartnerWithUs section mobile - consistent padding with benefits-lwu */
    .whypartnerwithus {
        padding: 40px 0 !important;
    }

    .whypartnerwithus .uui-container-large-15 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .whypartnerwithus .w-layout-grid.uui-layout20_component-copy {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Benefits section mobile - consistent padding and stack vertically */
    .benefits-lwu {
        padding: 40px 0 !important;
    }

    .benefits-lwu .spark-container-6 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .benefits-lwu .spark-flex-row-2 {
        flex-direction: column !important;
    }

    .benefits-lwu .spark-flex-row-2 img {
        width: 100% !important;
        max-width: 100% !important;
    }

    .benefits-lwu .spark-flexed-rows {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Feature cards mobile */
    .whatwelookfor-howitworks .a-feature-card-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .whatwelookfor-howitworks .a-feature-card {
        padding: 15px !important;
    }

    /* Timeline steps mobile fix */
    .whatwelookfor-howitworks .uui-layout32_timeline-step-2 {
        grid-template-columns: auto 1fr !important;
        gap: 10px !important;
    }

    .whatwelookfor-howitworks .uui-layout32_timeline-right-2 {
        padding-left: 0 !important;
    }

    .whatwelookfor-howitworks .uui-layout32_text-wrapper-2 h3 {
        font-size: 16px !important;
    }

    .whatwelookfor-howitworks .uui-layout32_text-wrapper-2 .text-medium {
        font-size: 14px !important;
    }

    /* For-businesses page mobile fixes */
    /* Solution cards - stack in single column */
    .our-solution .spark-2-column-flex {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .our-solution .spark-secondary-background-card {
        padding: 20px 15px !important;
    }

    /* Benefits section cards - stack vertically */
    .benefits .rl_layout250_content {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .benefits .rl_layout250_item {
        width: 100% !important;
    }

    /* Key features section */
    .key-features .rl_layout207_item-list {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* Pricing and testimonial section - stack vertically */
    .pricing-and-testimonial .waves-master-pricing-3 {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .pricing-and-testimonial .waves-left-pricing-3,
    .pricing-and-testimonial .waves-right-pricing-3 {
        width: 100% !important;
        padding: 20px 15px !important;
    }

    /* FAQ section - stack columns */
    .faq-questions {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }

    .faq-questions .uui-faq04_list-2 {
        width: 100% !important;
    }

    /* Challenges section items */
    .challenges .rl_layout242_content {
        flex-direction: column !important;
        gap: 15px !important;
    }

    .challenges .rl_layout242_item {
        width: 100% !important;
    }

    /* Global mobile overflow prevention */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* All container types - prevent overflow */
    .w-container,
    .rl-container-large-3,
    .uui-container-large-3,
    .uui-container-large-13,
    .spark-container,
    .spark-container-2,
    .spark-container-7,
    .container-35,
    .waves---main-container,
    .waves---main-container-2,
    .waves---main-container-3,
    .waves---main-container-4 {
        padding-left: 15px !important;
        padding-right: 15px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Sections - prevent overflow */
    section,
    .spark-section,
    .spark-section-4,
    .uui-section_faq01,
    .footer,
    .navbar {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Flex and grid layouts - prevent children from overflowing */
    .w-layout-grid,
    .spark-flex-row,
    .spark-flex-row-2,
    .spark-2-column-flex,
    .rl_layout250_content,
    .rl_layout207_item-list,
    .rl_layout242_content {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Images - prevent overflow */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Text containers - prevent long words from causing overflow */
    p, h1, h2, h3, h4, h5, h6, li, span, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Footer mobile adjustments - compact layout */
    .footer .uui-footer04_top-wrapper {
        flex-direction: column !important;
        gap: 12px !important;
    }

    /* Hide logo on mobile */
    .footer .uui-footer04_logo-link {
        display: none !important;
    }

    .footer .uui-footer04_link-list {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px 12px !important;
        text-align: center !important;
    }

    .footer .footer-menu-link {
        font-size: 12px !important;
    }

    /* Social icons - compact */
    .footer .uui-footer04_social-list {
        justify-content: center !important;
    }

    .footer .div-block-86 {
        justify-content: center !important;
        gap: 12px !important;
    }

    .footer .uui-footer04_social-link {
        padding: 6px !important;
    }

    /* Acknowledgement section - compact */
    .footer .acknowledgement {
        flex-direction: column !important;
        gap: 10px !important;
        text-align: center !important;
        margin-top: 10px !important;
    }

    .footer .company {
        margin-bottom: 0 !important;
    }

    .footer .nvidia-logo {
        align-items: center !important;
    }

    .footer .nvidia-logo .image-34 {
        width: 90px !important;
        height: auto !important;
    }

    .footer .paragraph-6 {
        font-size: 11px !important;
        line-height: 1.3 !important;
        margin: 2px 0 !important;
    }

    .footer .nvidia .disclaimer {
        font-size: 9px !important;
        line-height: 1.2 !important;
    }

    /* Disclaimer - compact */
    .footer .disclaimer {
        margin-top: 8px !important;
    }

    .footer .paragraph-7 {
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    /* Overall padding reduction */
    .footer .uui-padding-vertical-xlarge {
        padding-top: 20px !important;
        padding-bottom: 15px !important;
    }

    .footer .uui-page-padding-12 {
        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 - grid layout for equal height cards */
.resource-list .collection-list {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
}

/* Blog post listing cards - container */
.resource-list .collection-item {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.resource-list .collection-item .div-block {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Blog post listing cards - title */
.resource-list .collection-item h1 {
    font-size: 16px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: rgb(16, 24, 40) !important;
    margin-top: 8px !important;
    margin-bottom: 10px !important;
    padding: 0 5px !important;
    text-align: left !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    min-height: 45px !important;
}

.resource-list .collection-item .text-block {
    font-size: 13px !important;
    color: rgb(102, 112, 133) !important;
    margin-bottom: 4px !important;
    margin-top: 8px !important;
    padding: 0 5px !important;
    text-align: left !important;
}

/* Blog thumbnail images - ensure proper display */
.resource-list .div-block-2 {
    width: 100% !important;
    height: 200px !important;
    min-height: 200px !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 8px !important;
    background-color: #f0f0f0 !important; /* Fallback color if no image */
    flex-shrink: 0 !important;
}

/* Mobile responsiveness for Resource/Blog section */
@media screen and (max-width: 991px) {
    .resource-list .collection-list {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 20px !important;
    }

    .resource-list .collection-item {
        width: calc(50% - 10px) !important;
        padding: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    .spotlight-resource-div {
        padding: 0 20px !important;
    }

    .spotlight-resource {
        flex-direction: column !important;
    }

    .spotlight-image.is-featured {
        width: 100% !important;
        height: 250px !important;
        min-height: 250px !important;
    }

    .spotlight-snip {
        width: 100% !important;
        padding: 20px 0 !important;
    }

    .resource-list {
        padding: 0 20px !important;
        overflow-x: hidden !important;
    }

    .resource-list .collection-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .resource-list .collection-item {
        width: 100% !important;
        padding: 0 !important;
    }

    .resource-list .div-block-2 {
        height: 180px !important;
        min-height: 180px !important;
    }

    .resource-list .collection-item h1 {
        font-size: 16px !important;
        -webkit-line-clamp: 3 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Fix horizontal scroll on mobile */
    .page-headline,
    .div-block-81 {
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }
}

/* Spotlight resource (featured post) - Reduced height */
.spotlight-resource-div {
    padding: 20px 0 !important;
    margin-bottom: 20px !important;
}

.spotlight-resource {
    display: flex !important;
    gap: 30px !important;
    align-items: center !important;
}

.spotlight-image.is-featured {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
    flex: 0 0 45% !important;
    border-radius: 12px !important;
    background-size: cover !important;
    background-position: center !important;
}

.spotlight-snip {
    flex: 1 !important;
    padding: 0 !important;
}

.spotlight-title.is-featured {
    margin-bottom: 10px !important;
}

.spotlight-resource .uui-heading-small-2 {
    font-size: 22px !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 - high specificity to override Webflow */
h3.rich-text-blk-blog.uui-heading-xsmall-6.w-richtext,
.rich-text-blk-blog.uui-heading-xsmall-6 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 36px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin-bottom: 24px !important;
    margin-top: 32px !important;
    padding: 0 60px !important;
    color: rgb(16, 24, 40) !important;
    text-align: center !important;
}

/* Title paragraph inside h3 */
h3.rich-text-blk-blog.uui-heading-xsmall-6.w-richtext p {
    font-size: 36px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* Blog content rich text - remove vertical padding */
.rich-text-blk-blog.w-richtext {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Blog content area */
.blog-content-div {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 20px 60px !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;
}

/* Blog content hyperlinks - ensure links are visible and styled */
.rich-text-blk-blog a {
    color: #21A0DF !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    transition: color 0.2s ease !important;
    font-size: inherit !important;
}

.rich-text-blk-blog a:hover {
    color: #1a8bc4 !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: 0 !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;
}

.blog-author {
    display: inline !important;
    margin-left: 16px !important;
    padding-left: 16px !important;
    border-left: 1px solid #e5e7eb !important;
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 14px !important;
    color: rgb(102, 112, 133) !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;
}

/* Conclusion Section - match blog-content-div horizontal padding */
.conclusion-section {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 60px !important;
}

.conclusion-section h3 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Recommended Other Reads Section - aligned with FAQ section */
.recommended-reads-section {
    max-width: 1400px !important;
    margin: 60px auto !important;
    padding: 0 60px !important;
    border-top: 1px solid #e5e7eb !important;
    padding-top: 60px !important;
}

.recommended-reads-section h3 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 32px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    color: rgb(16, 24, 40) !important;
    margin-bottom: 32px !important;
    text-align: left !important;
}

.addl-reads-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 24px !important;
}

.addl-reads-div {
    flex: 1 1 calc(33.333% - 16px) !important;
    min-width: 280px !important;
    max-width: 400px !important;
}

.addl-read-bg-img {
    display: block !important;
    width: 100% !important;
    height: 180px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    transition: transform 0.2s ease !important;
}

.addl-read-bg-img:hover {
    transform: scale(1.02) !important;
}

@media (max-width: 768px) {
    .blog-content-div {
        padding: 20px 20px !important;
    }

    h3.rich-text-blk-blog.uui-heading-xsmall-6.w-richtext,
    h3.rich-text-blk-blog.uui-heading-xsmall-6.w-richtext p,
    .rich-text-blk-blog.uui-heading-xsmall-6 {
        font-size: 32px !important;
        padding: 0 20px !important;
    }

    .conclusion-section {
        padding: 0 20px !important;
    }

    .recommended-reads-section {
        padding: 0 15px !important;
        margin: 40px auto !important;
        padding-top: 40px !important;
    }

    .recommended-reads-section h3 {
        font-size: 24px !important;
        margin-bottom: 24px !important;
    }

    .addl-reads-div {
        flex: 1 1 100% !important;
        max-width: 100% !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 */
.w-pagination-wrapper.pagination-2 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 40px !important;
    padding: 20px 0 !important;
}

/* Previous/Next buttons */
.pagination-2 .pagination-prev,
.pagination-2 .pagination-next {
    background-color: #21A0DF !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    font-family: "Josefin Sans", sans-serif !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    min-width: 120px !important;
}

.pagination-2 .pagination-prev:hover,
.pagination-2 .pagination-next:hover {
    background-color: #1a8bc4 !important;
    transform: translateY(-2px) !important;
}

/* Placeholders for Previous/Next when hidden */
.pagination-2 .pagination-prev-placeholder,
.pagination-2 .pagination-next-placeholder {
    min-width: 120px !important;
}

/* Page numbers container */
.pagination-2 .pagination-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* Individual page numbers */
.pagination-2 .pagination-number {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: #667085 !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.2s ease !important;
}

.pagination-2 .pagination-number:hover {
    background: #e0f4fc !important;
    color: #21A0DF !important;
    border-color: #21A0DF !important;
}

/* Active page number */
.pagination-2 .pagination-number-active {
    background-color: #21A0DF !important;
    color: white !important;
    border-color: #21A0DF !important;
}

/* Legacy support for old class names */
.pagination-2 .uui-button {
    background-color: #21A0DF !important;
    color: white !important;
    border: none !important;
}

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

/* Mobile pagination - arrows only, centered numbers */
@media screen and (max-width: 767px) {
    .w-pagination-wrapper.pagination-2 {
        justify-content: center !important;
        gap: 10px !important;
    }

    /* Hide "Previous" and "Next" text on mobile, show only arrows */
    .pagination-2 .pagination-prev .text-block-83,
    .pagination-2 .pagination-next .text-block-83 {
        display: none !important;
    }

    /* Make prev/next buttons smaller (arrow only) */
    .pagination-2 .pagination-prev,
    .pagination-2 .pagination-next {
        min-width: auto !important;
        padding: 10px 12px !important;
    }

    /* Hide placeholders on mobile */
    .pagination-2 .pagination-prev-placeholder,
    .pagination-2 .pagination-next-placeholder {
        display: none !important;
        min-width: 0 !important;
        width: 0 !important;
    }

    /* Smaller page numbers on mobile */
    .pagination-2 .pagination-number {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    .pagination-2 .pagination-numbers {
        gap: 6px !important;
    }
}

/* ============================================================
   BILINGUAL LANGUAGE TOGGLE - Blog Posts
   ============================================================ */

/* Language Toggle Container - Minimalistic Design */
.language-toggle-container {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 12px 60px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    gap: 6px !important;
}

/* Language Toggle Buttons */
.lang-btn {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.lang-btn.active {
    color: #21A0DF !important;
    font-weight: 600 !important;
}

.lang-btn:hover:not(.active) {
    color: #64748b !important;
}

.lang-separator {
    color: #cbd5e1 !important;
    font-size: 14px !important;
    user-select: none !important;
}

/* Content visibility based on language */
[data-lang-content="en"] {
    display: block !important;
}

[data-lang-content="kn"] {
    display: none !important;
}

.lang-kn [data-lang-content="en"] {
    display: none !important;
}

.lang-kn [data-lang-content="kn"] {
    display: block !important;
}

/* Kannada Typography */
.lang-kn .rich-text-blk-blog p,
.lang-kn .rich-text-blk-blog li,
.lang-kn .blog-faq-answer,
[data-lang-content="kn"] {
    font-family: "Noto Sans Kannada", "Josefin Sans", sans-serif !important;
}

.lang-kn .rich-text-blk-blog h1,
.lang-kn .rich-text-blk-blog h2,
.lang-kn .rich-text-blk-blog h3,
.lang-kn .blog-faq-question {
    font-family: "Noto Sans Kannada", "Josefin Sans", sans-serif !important;
}

/* ============================================================
   BLOG CONTENT - Override inline styles from TinyMCE editor
   This ensures consistent font sizes regardless of editor output
   ============================================================ */

/* Override any inline font-size on paragraphs and spans in blog content */
.blog-content-div p,
.blog-content-div p span,
.blog-content-div p *,
.rich-text-blk-blog p,
.rich-text-blk-blog p span,
.rich-text-blk-blog p * {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* Override inline styles on headings */
.blog-content-div h1,
.blog-content-div h1 *,
.rich-text-blk-blog h1,
.rich-text-blk-blog h1 * {
    font-size: 36px !important;
}

.blog-content-div h2,
.blog-content-div h2 *,
.rich-text-blk-blog h2,
.rich-text-blk-blog h2 * {
    font-size: 28px !important;
}

.blog-content-div h3,
.blog-content-div h3 *,
.rich-text-blk-blog h3,
.rich-text-blk-blog h3 * {
    font-size: 22px !important;
}

.blog-content-div h4,
.blog-content-div h4 *,
.rich-text-blk-blog h4,
.rich-text-blk-blog h4 * {
    font-size: 20px !important;
}

/* Override inline styles on list items */
.blog-content-div li,
.blog-content-div li span,
.blog-content-div li *,
.rich-text-blk-blog li,
.rich-text-blk-blog li span,
.rich-text-blk-blog li * {
    font-size: 18px !important;
    line-height: 1.7 !important;
}

/* Kannada-specific font for all blog content elements */
.blog-content-div[lang="kn"] p,
.blog-content-div[lang="kn"] li,
.blog-content-div[lang="kn"] h1,
.blog-content-div[lang="kn"] h2,
.blog-content-div[lang="kn"] h3,
.blog-content-div[lang="kn"] h4 {
    font-family: "Noto Sans Kannada", "Josefin Sans", sans-serif !important;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
    .language-toggle-container {
        padding: 10px 15px !important;
        justify-content: flex-end !important;
    }

    .lang-btn {
        font-size: 13px !important;
    }
}

/* ============================================================
   BLOG FAQ SECTION - Accordion Style
   ============================================================ */

/* FAQ Section Container */
.blog-faq-section {
    max-width: 1400px !important;
    margin: 30px auto !important;
    padding: 30px 60px !important;
    border-top: 1px solid #e5e7eb !important;
}

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

/* FAQ List */
.blog-faq-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}

/* FAQ Accordion Item */
.blog-faq-accordion {
    border-bottom: 1px solid #e5e7eb !important;
}

.blog-faq-accordion:first-child {
    border-top: 1px solid #e5e7eb !important;
}

/* FAQ Question (Clickable Header) */
.blog-faq-question {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 24px 0 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.blog-faq-question:hover {
    color: #21A0DF !important;
}

.blog-faq-question h3 {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: rgb(16, 24, 40) !important;
    margin: 0 !important;
    flex: 1 !important;
    padding-right: 16px !important;
    transition: color 0.2s ease !important;
}

.blog-faq-question:hover h3 {
    color: #21A0DF !important;
}

/* FAQ Icon (Plus/Minus) */
.blog-faq-icon {
    position: relative !important;
    width: 24px !important;
    height: 24px !important;
    flex-shrink: 0 !important;
}

.blog-faq-icon-line {
    position: absolute !important;
    background-color: rgb(16, 24, 40) !important;
    transition: all 0.3s ease !important;
}

.blog-faq-icon-horizontal {
    width: 14px !important;
    height: 2px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.blog-faq-icon-vertical {
    width: 2px !important;
    height: 14px !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important;
}

/* Open state - rotate vertical line */
.blog-faq-accordion.open .blog-faq-icon-vertical {
    transform: translate(-50%, -50%) rotate(90deg) !important;
    opacity: 0 !important;
}

.blog-faq-accordion.open .blog-faq-question h3 {
    color: #21A0DF !important;
}

/* FAQ Answer (Expandable Content) */
.blog-faq-answer {
    max-height: 0 !important;
    overflow: hidden !important;
    transition: max-height 0.3s ease, padding 0.3s ease !important;
    padding: 0 !important;
}

.blog-faq-accordion.open .blog-faq-answer {
    max-height: 500px !important;
    padding-bottom: 24px !important;
}

.blog-faq-answer p {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: rgb(52, 64, 84) !important;
    margin: 0 !important;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
    .blog-faq-section {
        padding: 0 15px !important;
        margin: 40px auto !important;
        padding-top: 40px !important;
    }

    .blog-faq-section h2 {
        font-size: 24px !important;
        margin-bottom: 24px !important;
    }

    .blog-faq-question {
        padding: 20px 0 !important;
    }

    .blog-faq-question h3 {
        font-size: 16px !important;
    }

    .blog-faq-answer p {
        font-size: 15px !important;
    }
}

/* ============================================================
   HELP CENTER PAGE - Mobile Responsive Styles
   ============================================================ */

/* Base styles for Help Center */
.spark-section {
    padding: 40px 20px !important;
}

.spark-container-2 {
    padding: 0 !important;
}

.spark-centered-900 {
    padding: 0 20px !important;
    text-align: center !important;
}

/* Tab menu - horizontal scrolling on all screens */
.spark-simple-stacked-icon-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    padding: 10px 0 !important;
}

.spark-simple-side-icon-tab {
    padding: 12px 18px !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
}

.spark-simple-side-icon-tab.w--current {
    background: #21A0DF !important;
    color: white !important;
}

.spark-simple-side-icon-tab.w--current .spark-bold-heading-2 {
    color: white !important;
}

.spark-bold-heading-2 {
    font-size: 14px !important;
    font-weight: 500 !important;
}

/* FAQ accordions */
.uui-faq04_accordion-2 {
    border-bottom: 1px solid #e5e7eb !important;
}

.uui-faq04_question-2 {
    padding: 20px 0 !important;
    cursor: pointer !important;
}

.uui-faq04_heading,
.uui-faq01_heading {
    font-family: "Josefin Sans", sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: rgb(16, 24, 40) !important;
    padding-right: 15px !important;
}

/* FAQ accordion answers - hidden by default (Webflow controls via inline height style) */
.uui-faq04_answer-2 {
    overflow: hidden !important;
}

/* Help Center CTA section */
.uui-faq01_cta {
    padding: 40px 20px !important;
    text-align: center !important;
}

/* Mobile specific styles for Help Center */
@media screen and (max-width: 767px) {
    /* Main container padding - add top margin to prevent nav overlap */
    .spark-section {
        padding: 20px 15px !important;
        padding-top: 80px !important; /* Space for fixed nav */
        overflow-x: hidden !important;
    }

    .spark-container-2 {
        padding: 0 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .spark-centered-900 {
        padding: 0 10px !important;
        margin-bottom: 20px !important;
    }

    .spark-centered-900 h2 {
        font-size: 24px !important;
        margin-bottom: 10px !important;
    }

    .help-center-paragraph {
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding: 0 5px !important;
        margin-bottom: 20px !important;
    }

    /* CRITICAL: Force tabs component to stack vertically on mobile */
    .flat-tab-parent.w-tabs {
        display: flex !important;
        flex-direction: column !important;
        overflow-x: hidden !important;
        margin-top: 15px !important;
    }

    /* Tab menu - WRAP to show all tabs on screen */
    .spark-simple-stacked-icon-tabs.w-tab-menu {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 6px !important;
        padding: 10px 10px !important;
        margin: 0 0 15px 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .spark-simple-side-icon-tab {
        flex-shrink: 0 !important;
        padding: 8px 12px !important;
        font-size: 11px !important;
        min-width: auto !important;
        border-radius: 6px !important;
    }

    .spark-bold-heading-2 {
        font-size: 11px !important;
    }

    /* Tab content area - FULL WIDTH below tabs */
    .spark-simple-icon-tabs-content.w-tab-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin-top: 0 !important;
    }

    .w-tab-pane {
        padding: 0 !important;
        width: 100% !important;
    }

    .one-column-grid-2 {
        padding: 0 !important;
    }

    .uui-section_faq01 {
        padding: 0 !important;
    }

    .uui-page-padding {
        padding: 0 !important;
    }

    .uui-container-large-4 {
        padding: 0 !important;
        max-width: 100% !important;
    }

    .uui-padding-vertical-xhuge-4 {
        padding: 10px 0 !important;
    }

    .uui-faq01_component {
        padding: 0 !important;
    }

    .uui-faq04_list-2 {
        padding: 0 !important;
    }

    /* FAQ accordion - prevent overlap */
    .uui-faq04_accordion-2 {
        position: relative !important;
        z-index: 1 !important;
        background: white !important;
        margin-bottom: 0 !important;
        border-bottom: 1px solid #e5e7eb !important;
    }

    /* FAQ accordion questions */
    .uui-faq04_question-2 {
        padding: 14px 0 !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        cursor: pointer !important;
    }

    .uui-faq04_heading,
    .uui-faq01_heading {
        font-size: 14px !important;
        line-height: 1.4 !important;
        padding-right: 8px !important;
        word-wrap: break-word !important;
        flex: 1 !important;
    }

    /* Accordion answers - let Webflow handle height, just style the content */
    .uui-faq04_answer-2 {
        overflow: hidden !important;
    }

    .uui-faq04_answer-2 .text-medium {
        font-size: 13px !important;
        line-height: 1.5 !important;
        padding: 0 0 14px 0 !important;
    }

    /* FAQ icon */
    .uui-faq04_icon-wrapper-2 {
        flex-shrink: 0 !important;
        width: 20px !important;
        height: 20px !important;
    }

    .accordion-icon_component-3 {
        width: 20px !important;
        height: 20px !important;
    }

    /* CTA section at bottom */
    .uui-faq01_cta {
        padding: 25px 15px !important;
        margin-top: 20px !important;
    }

    .uui-faq01_cta .uui-heading-xxsmall-3 {
        font-size: 18px !important;
    }

    .uui-faq01_cta .uui-text-size-large-4 {
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .uui-button-row-4 {
        padding: 0 !important;
        justify-content: center !important;
        display: flex !important;
        width: 100% !important;
    }
}

/* ============================================================
   HOME PAGE (INDEX.HTML) - Mobile Responsive Styles
   ============================================================ */

@media screen and (max-width: 767px) {
    /* Hero section - background image covers full area */
    .hero-section-v1 {
        padding: 0 !important;
        padding-top: 60px !important; /* Space for fixed nav */
        min-height: auto !important;
        position: relative !important;
    }

    /* Hero section with background image covering full area */
    .hero-section-v1.feature-hero {
        background-image: url('../images/hero-500.webp') !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        position: relative !important;
    }

    /* Dark overlay for text readability - retained transparency */
    .hero-section-v1.feature-hero::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 1 !important;
    }

    .main-div {
        overflow-x: hidden !important;
    }

    .hero-block {
        padding: 20px 15px !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        position: relative !important;
        z-index: 2 !important;
    }

    .hero-block h1 {
        font-size: 24px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    .hero-sub-text {
        font-size: 14px !important;
        line-height: 1.5 !important;
        padding: 0 !important;
        text-align: center !important;
    }

    .hero-sub-text.two {
        margin-bottom: 20px !important;
    }

    /* Button container - centered */
    .div-block-82 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 280px !important;
        padding: 0 !important;
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }

    /* Primary button - Upload Documents (full width) */
    .div-block-82 .hero-btn {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        padding: 14px 24px !important;
        font-size: 14px !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 !important;
    }

    /* Secondary button - Know More (smaller, centered) */
    .div-block-82 .hero-btn2 {
        width: auto !important;
        min-width: 120px !important;
        text-align: center !important;
        padding: 10px 20px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 0 auto !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    /* Hero image - hidden, using background instead */
    .hero-img {
        display: none !important;
    }

    /* How it works section */
    .howitworks {
        padding: 0 15px !important;
    }

    .uui-section_layout96 .uui-page-padding-8 {
        padding: 0 !important;
    }

    .uui-layout96_list {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    .uui-layout17_item {
        padding: 15px !important;
    }

    .uui-layout17_item h3 {
        font-size: 18px !important;
    }

    /* Products section */
    .products {
        padding: 0 15px !important;
    }

    .products-title h2 {
        font-size: 26px !important;
    }

    .uui-layout13_component {
        flex-direction: column !important;
    }

    .uui-layout13_tabs-menu {
        width: 100% !important;
        margin-bottom: 20px !important;
    }

    .uui-layout13_tabs-link {
        padding: 15px !important;
    }

    .uui-layout13_tabs-link h3 {
        font-size: 18px !important;
    }

    .uui-layout13_lightbox-image {
        width: 100% !important;
        height: auto !important;
    }

    /* Features section */
    .features {
        padding: 0 15px !important;
    }

    .features-padding {
        padding: 30px 0 !important;
    }

    .features-title h2 {
        font-size: 26px !important;
    }

    .uui-layout32_component {
        grid-template-columns: 1fr !important;
    }

    .uui-layout32_content-left {
        order: 2 !important;
    }

    .uui-layout32_content-right {
        order: 1 !important;
    }

    .uui-layout32_content-left img {
        width: 100% !important;
        height: auto !important;
    }

    .uui-layout32_timeline-step {
        grid-template-columns: auto 1fr !important;
        gap: 10px !important;
    }

    .uui-layout32_text-wrapper h3 {
        font-size: 17px !important;
    }

    /* Pricing section */
    .pricing .uui-pricing18_component {
        flex-direction: column !important;
        gap: 20px !important;
    }

    .pricing .uui-pricing18_plan {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Testimonial slider */
    .testimonial-slider .w-slider-mask {
        flex-direction: column !important;
    }

    .testimonial-slider .w-slide {
        width: 100% !important;
        margin-right: 0 !important;
    }

    /* FAQ section */
    .faq .uui-faq04_component {
        grid-template-columns: 1fr !important;
    }

    .faq .uui-faq04_list-2 {
        width: 100% !important;
    }

    /* CTA sections */
    .cta .waves---main-container,
    .cta .waves---main-container-2 {
        padding: 30px 15px !important;
    }

    .cta h2 {
        font-size: 24px !important;
    }

    /* Contact Us page */
    .contact-us-form {
        padding: 20px 15px !important;
    }

    .contact-us-form input,
    .contact-us-form textarea {
        width: 100% !important;
    }

    /* Privacy Policy and Terms pages */
    .privacy-policy-content,
    .terms-content {
        padding: 20px 15px !important;
    }

    .privacy-policy-content h1,
    .privacy-policy-content h2,
    .terms-content h1,
    .terms-content h2 {
        font-size: 24px !important;
    }
}

/* ============================================================
   LINKED LANGUAGE VERSION - Blog Language Switcher Link
   ============================================================ */

/* Container for linked language version link */
.linked-language-link {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    padding: 16px 60px !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
}

/* Language version link styling */
.language-version-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 18px !important;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%) !important;
    border: 1px solid #21A0DF !important;
    border-radius: 24px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    font-family: "Josefin Sans", "Noto Sans Kannada", sans-serif !important;
}

.language-version-link:hover {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(33, 160, 223, 0.2) !important;
}

.language-version-link .lang-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0369a1 !important;
}

.language-version-link .lang-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: #0369a1 !important;
}

.language-version-link .lang-text {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #0369a1 !important;
}

/* Mobile responsive */
@media screen and (max-width: 767px) {
    .linked-language-link {
        padding: 12px 15px !important;
        justify-content: center !important;
    }

    .language-version-link {
        padding: 8px 14px !important;
    }

    .language-version-link .lang-icon svg {
        width: 16px !important;
        height: 16px !important;
    }

    .language-version-link .lang-text {
        font-size: 14px !important;
    }
}