/* fixes-bundle.css — consolidated from 33 fix files — 2026-05-13 */

/* ===== typography-fix.css ===== */
/* ========================================
   COMPREHENSIVE TYPOGRAPHY FIX
   Unified responsive typography system
   Fixes all text sizing issues across the project
   ======================================== */

/* ========================================
   BASE TYPOGRAPHY SCALE
   Professional scaling from mobile to desktop
   ======================================== */

/* ========================================
   1. HTML HEADINGS (h1-h6)
   ======================================== */

/* H1 - Main Page Titles */
h1, .h1 {
    font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* H2 - Section Headings */
h2, .h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* H3 - Subsection Headings */
h3, .h3 {
    font-size: clamp(1.25rem, 3vw, 1.875rem) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* H4 - Card Titles, Small Headings */
h4, .h4 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* H5 - Small Headings */
h5, .h5 {
    font-size: clamp(1rem, 2.2vw, 1.25rem) !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* H6 - Smallest Headings */
h6, .h6 {
    font-size: clamp(0.875rem, 2vw, 1.125rem) !important;
    line-height: 1.4 !important;
    font-weight: 500 !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   2. BODY TEXT & PARAGRAPHS
   ======================================== */

/* Base Paragraph Text */
p, .text-body, body {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #475569 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Large Body Text */
.text-large, .text-body-large, p.text-large {
    font-size: clamp(1.0625rem, 1.8vw, 1.25rem) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

/* Small Body Text */
.text-small, .text-body-small, small, .small {
    font-size: clamp(0.8125rem, 1.3vw, 0.9375rem) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Extra Small Text */
.text-xs, .text-extra-small {
    font-size: clamp(0.75rem, 1.2vw, 0.875rem) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* ========================================
   3. HERO SECTION TYPOGRAPHY
   ======================================== */

/* Hero Main Heading */
.modern-hero-heading,
.hero-title,
.page-title,
.home-hero-section h1 {
    font-size: clamp(1.75rem, 5vw, 3rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Hero Text/Description */
.modern-hero-text,
.hero-text,
.hero-description {
    font-size: clamp(1rem, 1.8vw, 1.25rem) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #475569 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   4. SECTION HEADINGS
   ======================================== */

/* Section Titles */
.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2,
.features-wrapper h2,
.industries-section h2,
.pricing-section h2,
.counter-wrapper h2 {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Section Subtitles/Descriptions */
.section-subtitle,
.section-description,
.products-section-subtitle,
.modern-section-subtitle {
    font-size: clamp(0.9375rem, 1.8vw, 1.125rem) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #64748b !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   5. CARD TYPOGRAPHY
   ======================================== */

/* Card Titles */
.modern-card-title,
.mp-products-card__title,
.why-card-title,
.product-card-title,
.benefit-card-title,
.testimonial-card-title {
    font-size: clamp(1.125rem, 2.5vw, 1.375rem) !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.01em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Card Text/Description */
.modern-card-text,
.mp-products-card__description,
.why-card-text,
.product-card-text,
.benefit-card-text,
.testimonial-card-text {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    color: #64748b !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   6. BUTTON TYPOGRAPHY
   ======================================== */

/* Primary Buttons */
.btn-premium,
.btn-primary,
.btn-modern,
.btn-signup-primary,
button.btn-primary {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Secondary Buttons */
.btn-secondary,
.btn-outline,
.btn-premium-outline {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Small Buttons */
.btn-sm,
button.btn-sm {
    font-size: clamp(0.8125rem, 1.3vw, 0.9375rem) !important;
    font-weight: 600 !important;
}

/* ========================================
   7. NAVIGATION TYPOGRAPHY
   ======================================== */

/* Nav Links */
.nav-link,
.nav-link-modern,
.navbar-nav .nav-link {
    font-size: clamp(0.9375rem, 1.3vw, 1rem) !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Nav Brand/Logo Text */
.navbar-brand {
    font-size: clamp(1.125rem, 2vw, 1.5rem) !important;
    font-weight: 700 !important;
}

/* ========================================
   8. FORM TYPOGRAPHY
   ======================================== */

/* Form Labels */
.form-label,
.form-label-modern,
label {
    font-size: clamp(0.875rem, 1.3vw, 1rem) !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Form Inputs */
.form-control,
.form-input-modern,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem) !important;
    line-height: 1.5 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Form Help Text */
.form-text,
.help-text,
.form-help {
    font-size: clamp(0.8125rem, 1.2vw, 0.875rem) !important;
    line-height: 1.5 !important;
    color: #64748b !important;
}

/* Error Messages */
.error-message,
.error-message-modern,
.text-danger {
    font-size: clamp(0.8125rem, 1.2vw, 0.875rem) !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

/* ========================================
   9. SPECIAL SECTIONS
   ======================================== */

/* Why Moneypex Heading */
.why-moneypex-heading {
    font-size: clamp(1.5rem, 4vw, 2.75rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* Why Moneypex Description */
.why-moneypex-description {
    font-size: clamp(1rem, 1.8vw, 1.125rem) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
}

/* Why Moneypex CTA */
.why-moneypex-cta {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
}

/* Trusted By Heading */
.trusted-by-heading {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

/* ========================================
   10. LIST TYPOGRAPHY
   ======================================== */

/* List Items */
li, ul li, ol li {
    font-size: clamp(0.875rem, 1.2vw + 0.1rem, 1rem) !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #475569 !important;
}

/* ========================================
   11. LINK TYPOGRAPHY
   ======================================== */

/* Standard Links */
a, .link, .link-modern {
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem) !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   12. MOBILE-SPECIFIC FIXES
   ======================================== */

@media (max-width: 767px) {
    /* Ensure readable minimum sizes on mobile */
    body, p, span, div {
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
    }
    
    /* Prevent text from being too small */
    small, .small, .text-small {
        font-size: clamp(0.8125rem, 3.5vw, 0.9375rem) !important;
    }
    
    /* Ensure headings are readable but not too large */
    h1, .h1 {
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    }
    
    h2, .h2 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
    
    h3, .h3 {
        font-size: clamp(1.25rem, 6vw, 1.75rem) !important;
    }
    
    /* Hero text adjustments for mobile */
    .modern-hero-text,
    .hero-text {
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
        line-height: 1.65 !important;
    }
    
    /* Card text on mobile */
    .modern-card-text,
    .card-text {
        font-size: clamp(0.9375rem, 4vw, 1rem) !important;
    }
}

/* ========================================
   13. TABLET-SPECIFIC FIXES
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    /* Balanced sizes for tablet */
    h1, .h1 {
        font-size: clamp(2rem, 4.5vw, 2.5rem) !important;
    }
    
    h2, .h2 {
        font-size: clamp(1.75rem, 4vw, 2.25rem) !important;
    }
    
    p, body {
        font-size: clamp(1rem, 1.6vw, 1.125rem) !important;
    }
}

/* ========================================
   14. DESKTOP OPTIMIZATIONS
   ======================================== */

@media (min-width: 992px) {
    /* Optimal sizes for desktop */
    body, p {
        font-size: 1.0625rem !important; /* 17px - optimal reading size */
    }
    
    h1, .h1 {
        font-size: clamp(2.5rem, 3.5vw, 3rem) !important;
    }
    
    h2, .h2 {
        font-size: clamp(2rem, 3vw, 2.5rem) !important;
    }
}

/* ========================================
   15. FIX OVERLY LARGE TEXT ON MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Specific fixes for common oversized elements */
    .modern-hero-heading {
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
    }
    
    .section-title,
    .products-section-heading {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
    
    /* Prevent headings from being too large */
    h1, .h1 {
        font-size: clamp(1.75rem, 8vw, 2.5rem) !important;
    }
    
    h2, .h2 {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
}

/* ========================================
   16. FIX OVERLY SMALL TEXT ON MOBILE
   ======================================== */

@media (max-width: 767px) {
    /* Ensure minimum readable sizes using clamp() */
    p, span, div, li {
        font-size: clamp(1.125rem, 4.5vw, 1.35rem) !important; /* ~18px-22px */
    }
    
    small, .small {
        font-size: clamp(0.8125rem, 3.5vw, 0.9375rem) !important; /* 13px-15px */
    }
    
    /* Buttons should never be too small */
    button, .btn, .btn-premium, .btn-primary {
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
    }
    
    /* Form inputs readable */
    input, textarea, select, .form-control {
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
    }
    
    /* Links readable */
    a, .link {
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
    }
}

/* ========================================
   17. CONSISTENT LINE HEIGHTS
   ======================================== */

/* Headings */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.2 !important;
}

/* Body text */
p, body, span, div, li {
    line-height: 1.7 !important;
}

/* Cards */
.card-text, .modern-card-text {
    line-height: 1.6 !important;
}

/* ========================================
   18. FONT SMOOTHING (All Screens)
   ======================================== */

* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ========================================
   19. PREVENT TEXT OVERFLOW
   ======================================== */

h1, h2, h3, h4, h5, h6,
p, span, div, li, a {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}

/* ========================================
   20. FIX SPECIFIC PROBLEMATIC ELEMENTS
   ======================================== */

/* Fix any elements with fixed pixel sizes */
@media (max-width: 767px) {
    /* Convert fixed sizes to responsive */
    [style*="font-size"] {
        font-size: clamp(0.9375rem, 4vw, 1.5rem) !important;
    }
}

/* Ensure consistent color contrast */
p, span, div, li, .text-body {
    color: #475569 !important; /* Good contrast ratio */
}

/* Headings darker for hierarchy */
h1, h2, h3, h4, h5, h6 {
    color: #0f172a !important; /* Darker for emphasis */
}



/* ===== professional-fix.css ===== */
/* ========================================
   PROFESSIONAL FIX - Text, Images & Colors
   Comprehensive fix for oversized text, image sizing, and color improvements
   ======================================== */

/* ========================================
   0. NAVBAR - ALWAYS WHITE BACKGROUND
   ======================================== */

/* Force navbar to always have white background */
.modern-navbar,
nav.modern-navbar {
    background-color: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Remove backgrounds from why-card icons when using images */
.why-card-icon:has(img) {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ========================================
   1. HERO HEADING SIZE REDUCTION
   All product pages use same styling as main page
   ======================================== */

/* Reduce hero heading size - Professional scale */
.modern-hero-heading,
.hero-title,
.page-title,
.home-hero-section h1,
.accounting-hero-section h1,
.pos-hero-section h1,
.manufacturing-hero-section h1,
.rental-hero-section h1,
.distribution-hero-section h1,
.bookkeeping-hero-section h1,
.expense-hero-section h1,
.financial-reporting-hero-section h1,
.ocr-hero-section h1,
.mtd-hero-section h1,
.vat-software-hero-section h1,
.invoicing-hero-section h1,
.accountants-hero-section h1,
.freelancers-hero-section h1,
.sole-traders-hero-section h1,
.practice-manager-hero-section h1,
.contact-hero-section h1,
.demo-request-hero-section h1,
.restaurant-pos-hero-section h1,
.retail-pos-hero-section h1,
.pharmacy-pos-hero-section h1,
.shoe-pos-hero-section h1,
.fbr-hero-section h1 {
    font-size: clamp(1.4rem, 4vw, 2.2rem) !important; /* Reduced from 3rem */
    line-height: 1.25 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    color: #0f172a !important; /* Dark slate - not black */
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Hero heading second line */
.modern-hero-heading .hero-heading-second-line {
    color: #1e293b !important; /* Slightly lighter for hierarchy */
    font-weight: 700 !important;
}

/* Typewriter text styling */
#typewriter-text {
    color: #1E5CAA !important;
    font-weight: 800 !important;
}

/* Typewriter cursor */
.typewriter-cursor {
    color: #1E5CAA !important;
    animation: blink 1s infinite !important;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.3; }
}

/* Mobile hero heading - Reduced */
@media (max-width: 576px) {
    .modern-hero-heading,
    .hero-title,
    .page-title {
        font-size: clamp(1.5rem, 7vw, 2rem) !important; /* Reduced from 2.25rem */
        line-height: 1.3 !important;
    }
}

/* Tablet hero heading */
@media (min-width: 577px) and (max-width: 768px) {
    .modern-hero-heading {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important; /* Reduced */
    }
}

/* Desktop hero heading */
@media (min-width: 992px) {
    .modern-hero-heading {
        font-size: clamp(2rem, 3.5vw, 2.5rem) !important; /* Reduced from 3rem */
    }
}

/* ========================================
   2. HERO TEXT SIZE REDUCTION
   ======================================== */

/* Reduce hero text size */
.modern-hero-text,
.hero-text,
.hero-description {
    font-size: clamp(0.9375rem, 1.5vw, 1.125rem) !important; /* Reduced */
    line-height: 1.7 !important;
    font-weight: 400 !important;
    color: #475569 !important; /* Professional grey */
    max-width: 32rem !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Mobile hero text */
@media (max-width: 576px) {
    .modern-hero-text {
        font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
        line-height: 1.65 !important;
    }
}

/* ========================================
   3. SECTION HEADINGS SIZE REDUCTION
   ======================================== */

/* Reduce section heading sizes */
.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important; /* Reduced from 2.5rem */
    line-height: 1.3 !important;
    font-weight: 800 !important;
    letter-spacing: -0.01em !important;
    color: #0f172a !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Mobile section headings */
@media (max-width: 767px) {
    .section-title,
    .products-section-heading,
    .trusted-by-heading,
    .why-moneypex-heading {
        font-size: clamp(1.375rem, 6vw, 1.875rem) !important; /* Reduced */
    }
}

/* ========================================
   4. FIX ALL LARGE TEXT SIZES
   ======================================== */

/* Fix any 3rem+ font sizes */
h1, .h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important; /* Max 2.5rem instead of 3rem+ */
}

h2, .h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important; /* Max 2.25rem */
}

/* Fix specific large text instances */
@media (max-width: 991px) {
    /* Reduce any oversized text on mobile/tablet - handled by clamp() values above */
}

/* ========================================
   5. HERO IMAGE SIZING FIXES
   ======================================== */

/* Hero image container */
.hero-image-wrapper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

/* Hero main image - Professional sizing */
.hero-main-image,
.home-hero-image,
.hero-dashboard-image {
    width: 100% !important;
    max-width: 600px !important; /* Limit max width */
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px -15px rgba(15, 23, 42, 0.15) !important;
    transition: transform 0.3s ease !important;
}

/* Hero image hover effect */
.hero-main-image:hover,
.home-hero-image:hover {
    transform: none !important;
    box-shadow: 0 25px 70px -15px rgba(15, 23, 42, 0.2) !important;
}

/* Mobile hero image */
@media (max-width: 767px) {
    .hero-main-image,
    .home-hero-image {
        max-width: 100% !important;
        max-height: 300px !important; /* Limit height on mobile */
        object-fit: contain !important;
    }
}

/* Tablet hero image */
@media (min-width: 768px) and (max-width: 991px) {
    .hero-main-image,
    .home-hero-image {
        max-width: 500px !important;
    }
}

/* Desktop hero image */
@media (min-width: 992px) {
    .hero-main-image,
    .home-hero-image {
        max-width: 600px !important;
    }
}

/* ========================================
   6. COLOR IMPROVEMENTS - Professional Palette
   ======================================== */

/* Primary Brand Color - Professional Blue */
:root {
    --primary-blue: #1E5CAA;
    --primary-blue-dark: #164a8a;
    --primary-blue-light: #2563eb;
    --text-primary: #0f172a;
    --text-secondary: #1e293b;
    --text-tertiary: #475569;
    --text-muted: #64748b;
    --bg-light: #f8fafc;
    --border-color: #e2e8f0;
}

/* Hero heading colors - Professional */
.modern-hero-heading {
    color: #0f172a !important; /* Dark slate - not black */
}

.modern-hero-heading .hero-heading-second-line {
    color: #1e293b !important; /* Professional dark gray - not black */
}

/* Hero text color - Professional grey */
.modern-hero-text {
    color: var(--text-tertiary) !important;
}

/* Section headings - Professional dark */
.section-title,
.products-section-heading,
.why-moneypex-heading {
    color: var(--text-primary) !important;
}

/* Section descriptions - Professional grey */
.section-subtitle,
.section-description {
    color: var(--text-muted) !important;
}

/* Links - Professional blue */
a,
.link,
.nav-link-modern {
    color: var(--primary-blue) !important;
}

a:hover,
.link:hover {
    color: var(--primary-blue-dark) !important;
}

/* Exclude footer links from hover color change */
footer a:hover,
.modern-footer a:hover,
footer .footer-link:hover,
.modern-footer .footer-link:hover {
    color: #cbd5e1 !important; /* Keep original footer link color */
}

/* Buttons - Professional styling matching design */
.btn-premium,
.btn-primary {
    background: linear-gradient(135deg, #3b82f6 0%, #1E5CAA 100%) !important;
    color: #ffffff !important; /* White text for better contrast */
    border: none !important;
    border-radius: 9999px !important; /* Fully rounded */
    padding: 0.875rem 2rem !important;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.625rem !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(30, 92, 170, 0.2), 0 2px 4px rgba(30, 92, 170, 0.1) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    cursor: pointer !important;
    line-height: 1.5 !important;
}

/* Button text styling */
.btn-premium span,
.btn-primary span {
    color: #ffffff !important; /* White text for better contrast */
    font-weight: 600 !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Button SVG icon - White arrow */
.btn-premium svg,
.btn-primary svg {
    color: #ffffff !important; /* White arrow icon */
    width: 1.125rem !important;
    height: 1.125rem !important;
    stroke-width: 2.5 !important;
    position: relative !important;
    z-index: 2 !important;
    transition: transform 0.3s ease !important;
    /* Ensure no box/background around arrow icon */
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Button hover state */
.btn-premium:hover,
.btn-primary:hover {
    background: linear-gradient(135deg, #2563eb 0%, #164a8a 100%) !important;
    box-shadow: 0 6px 16px rgba(30, 92, 170, 0.3), 0 4px 6px rgba(30, 92, 170, 0.15) !important;
    transform: none !important;
    text-decoration: none !important;
}

/* Button hover - text stays white */
.btn-premium:hover span,
.btn-primary:hover span {
    color: #ffffff !important; /* Keep white text on hover */
}

/* Button hover - arrow moves right */
.btn-premium:hover svg,
.btn-primary:hover svg {
    transform: translateX(4px) !important;
    color: #ffffff !important; /* Keep white arrow */
}

/* Button active state */
.btn-premium:active,
.btn-primary:active {
    transform: none !important;
    box-shadow: 0 2px 8px rgba(30, 92, 170, 0.2) !important;
}

/* Hero section button specific styling */
.hero-button-animate .btn-premium,
.home-hero-section .btn-premium {
    padding: 0.875rem 2rem !important;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    min-height: 48px !important;
}

/* Mobile button adjustments */
@media (max-width: 767px) {
    .btn-premium,
    .btn-primary {
        padding: 0.875rem 1.75rem !important;
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
        width: auto !important;
        min-width: 160px !important;
    }
}

/* ========================================
   7. CARD & COMPONENT COLORS
   ======================================== */

/* Card titles - Professional */
.modern-card-title,
.mp-products-card__title,
.why-card-title {
    color: var(--text-primary) !important;
}

/* Card text - Professional grey */
.modern-card-text,
.mp-products-card__description,
.why-card-text {
    color: var(--text-tertiary) !important;
}

/* Card borders - Subtle */
.modern-card,
.mp-products-card,
.why-card {
    border-color: var(--border-color) !important;
}

/* ========================================
   8. BACKGROUND COLORS - Professional
   ======================================== */

/* Hero section background - Only apply white background to non-home hero sections */
.modern-hero-section:not(.home-hero-section) {
    background: #fff !important;
}

/* Section backgrounds */
.section-modern {
    background: #ffffff !important;
}

.section-modern-alt {
    background: var(--bg-light) !important;
}

/* ========================================
   9. FIX SPECIFIC LARGE TEXT INSTANCES
   ======================================== */

/* Fix any remaining 3rem font sizes */
*[style*="font-size: 3rem"],
*[style*="font-size: 4rem"] {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
}

/* Fix clamp values that are too large */
*[style*="clamp"][style*="3rem"],
*[style*="clamp"][style*="4rem"] {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
}

/* ========================================
   10. IMAGE OPTIMIZATION
   ======================================== */

/* All images - Professional sizing */
img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Hero images specifically */
.hero-image-wrapper img,
.hero-main-image,
.home-hero-image {
    max-width: 600px !important;
    width: 100% !important;
    height: auto !important;
}

/* Product images */
.product-image,
.mp-products-card img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* ========================================
   11. RESPONSIVE TEXT SIZE LIMITS
   ======================================== */

/* Prevent text from being too large on any screen */
@media (max-width: 767px) {
    h1, .h1, .modern-hero-heading {
        font-size: clamp(1.5rem, 7vw, 2rem) !important; /* Max 2rem on mobile */
    }
    
    h2, .h2 {
        font-size: clamp(1.375rem, 6vw, 1.875rem) !important; /* Max 1.875rem */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    h1, .h1, .modern-hero-heading {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important; /* Max 2.25rem on tablet */
    }
}

@media (min-width: 992px) {
    h1, .h1, .modern-hero-heading {
        font-size: clamp(2rem, 3.5vw, 2.5rem) !important; /* Max 2.5rem on desktop */
    }
}

/* ========================================
   12. PROFESSIONAL SPACING
   ======================================== */

/* Hero section spacing */
.modern-hero-section {
    padding-top: clamp(5rem, 8vh, 6.5rem) !important;
    padding-bottom: clamp(2rem, 6vh, 4rem) !important;
}

/* Section spacing */
.section-modern {
    padding-top: clamp(3rem, 6vh, 4.5rem) !important;
    padding-bottom: clamp(3rem, 6vh, 4.5rem) !important;
}

/* Section spacing medium */
.section-spacing-md {
    padding-top: clamp(3rem, 6vh, 4.5rem) !important;
    padding-bottom: clamp(3rem, 6vh, 4.5rem) !important;
}

/* ========================================
   13. TYPEWRITER TEXT COLOR FIX
   ======================================== */

/* Typewriter text - Professional blue */
#typewriter-text {
    color: var(--primary-blue) !important;
    font-weight: 800 !important;
}

/* Typewriter cursor - Matching blue */
.typewriter-cursor {
    color: var(--primary-blue) !important;
    font-weight: 800 !important;
}

/* ========================================
   14. OVERALL TEXT SIZE REDUCTION
   ======================================== */

/* Reduce all large headings globally */
h1, .h1 {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important; /* Reduced from 3rem+ */
}

h2, .h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important; /* Reduced */
}

h3, .h3 {
    font-size: clamp(1.25rem, 3vw, 1.875rem) !important;
}

/* ========================================
   15. FINAL PROFESSIONAL TOUCHES
   ======================================== */

/* Smooth transitions */
* {
    transition: color 0.2s ease, background-color 0.2s ease !important;
}

/* Professional shadows */
.modern-card,
.mp-products-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
}

/* Professional borders */
.modern-card,
.mp-products-card {
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
}

/* ========================================
   16. MOBILE SPECIFIC FIXES
   ======================================== */

@media (max-width: 767px) {
    /* Ensure text is never too large on mobile */
    .modern-hero-heading {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
    }
    
    .modern-hero-text {
        font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
    }
    
    /* Images should not overflow */
    .hero-main-image,
    .home-hero-image {
        max-height: 250px !important;
        width: 100% !important;
    }
}

/* ========================================
   17. DESKTOP OPTIMIZATIONS
   ======================================== */

@media (min-width: 992px) {
    /* Optimal sizes for desktop */
    .modern-hero-heading {
        font-size: clamp(2rem, 3.5vw, 2.5rem) !important; /* Professional size */
    }
    
    .modern-hero-text {
        font-size: 1.125rem !important; /* Optimal reading size */
    }
    
    /* Hero images - Professional max size */
    .hero-main-image,
    .home-hero-image {
        max-width: 600px !important;
    }
}

/* ========================================
   18. PRODUCT ICON IMAGES
   ======================================== */

/* Product icons in navbar dropdowns */
.dropdown-icon img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Product icons in product list (home page) */
.product-icon img,
.modern-product-icon img {
    width: 40px !important;
    height: 40px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Ensure product icon containers don't override image sizing */
.product-icon,
.modern-product-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Remove background colors and borders from icon containers when using images */
.product-icon:has(img),
.modern-product-icon:has(img),
.product-icon-blue:has(img),
.product-icon-purple:has(img),
.product-icon-orange:has(img),
.product-icon-teal:has(img),
.product-icon-indigo:has(img),
.product-icon-red:has(img),
.product-icon-yellow:has(img) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Force remove backgrounds with highest specificity */
.modern-products-section .product-icon-blue:has(img),
.modern-products-list .product-icon-blue:has(img),
.modern-product-icon.product-icon-blue:has(img),
.modern-products-section .product-icon-purple:has(img),
.modern-products-list .product-icon-purple:has(img),
.modern-product-icon.product-icon-purple:has(img),
.modern-products-section .product-icon-orange:has(img),
.modern-products-list .product-icon-orange:has(img),
.modern-product-icon.product-icon-orange:has(img),
.modern-products-section .product-icon-teal:has(img),
.modern-products-list .product-icon-teal:has(img),
.modern-product-icon.product-icon-teal:has(img),
.modern-products-section .product-icon-indigo:has(img),
.modern-products-list .product-icon-indigo:has(img),
.modern-product-icon.product-icon-indigo:has(img),
.modern-products-section .product-icon-red:has(img),
.modern-products-list .product-icon-red:has(img),
.modern-product-icon.product-icon-red:has(img),
.modern-products-section .product-icon-yellow:has(img),
.modern-products-list .product-icon-yellow:has(img),
.modern-product-icon.product-icon-yellow:has(img) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Product detail card large icon */
.mp-products-card__icon-wrapper img,
.modern-card-icon-wrapper img {
    width: 80px !important;
    height: 80px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Remove background from detail card icon container */
.mp-products-card__icon-wrapper:has(img),
.modern-card-icon-wrapper:has(img) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* POS option cards icons */
.pos-option-icon img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Remove background from POS option icon containers */
.pos-option-icon:has(img) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ========================================
   20. PROFESSIONAL PRICING SECTION DESIGN
   ======================================== */

/* Pricing section background */
.pricing-page {
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%) !important;
    padding: 4rem 0 !important;
}

/* Improved pricing card */
.pos-pricing-card {
    background: #ffffff !important;
    border: 2px solid #e2e8f0 !important;
    border-radius: 1.5rem !important;
    padding: 2.5rem 2rem !important;
    position: relative !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: visible !important;
}

/* Subtle gradient overlay for depth */
.pos-pricing-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #1E5CAA 0%, #2563eb 100%) !important;
    opacity: 0 !important;
    border-radius: 1.5rem 1.5rem 0 0 !important;
    transition: opacity 0.3s ease !important;
}

/* Hover effect */
.pos-pricing-card:hover {
    transform: none !important;
    box-shadow: 0 30px 50px -15px rgba(30, 92, 170, 0.2), 0 15px 20px -10px rgba(0, 0, 0, 0.08) !important;
    border-color: #bfdbfe !important;
}

.pos-pricing-card:hover::before {
    opacity: 1 !important;
}

/* Popular badge - improved */
.pos-pricing-badge {
    position: absolute !important;
    top: -1rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 10 !important;
}

.badge-popular {
    background: linear-gradient(135deg, #1E5CAA 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 0.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
    box-shadow: 0 6px 12px -2px rgba(30, 92, 170, 0.6), 0 3px 6px -1px rgba(30, 92, 170, 0.4) !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
}

/* Pricing header */
.pos-pricing-header {
    margin-bottom: 1.25rem !important;
    margin-top: 0.75rem !important;
    text-align: center !important;
    padding-bottom: 1.25rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
}

.pos-pricing-title {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 0.5rem !important;
    letter-spacing: -0.02em !important;
}

.pos-pricing-subtitle {
    color: #64748b !important;
    font-size: 0.875rem !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* Pricing amount - improved */
.pos-pricing-amount {
    margin-bottom: 1.75rem !important;
    text-align: center !important;
    padding: 1.25rem 0 !important;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%) !important;
    border-radius: 1rem !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

.pos-price-display {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    margin-bottom: 0.625rem !important;
}

.pos-price-value {
    font-size: 2.75rem !important;
    font-weight: 800 !important;
    color: #1E5CAA !important;
    line-height: 1 !important;
    letter-spacing: -0.02em !important;
}

.pos-price-period {
    font-size: 1rem !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

.pos-price-yearly {
    font-size: 0.8125rem !important;
    color: #1E5CAA !important;
    font-weight: 600 !important;
    margin: 0.375rem 0 !important;
}

.pos-trial-badge {
    display: inline-block !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    color: #1E5CAA !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    padding: 0.375rem 1rem !important;
    border-radius: 9999px !important;
    margin-top: 0.625rem !important;
    border: none !important;
}

/* CTA Button - improved */
.pos-pricing-action {
    margin-bottom: 1.75rem !important;
}

.btn-pos-pricing {
    background: linear-gradient(135deg, #1E5CAA 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    padding: 0.875rem 2rem !important;
    border-radius: 0.75rem !important;
    border: none !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 8px 16px -4px rgba(30, 92, 170, 0.4), 0 4px 6px -2px rgba(30, 92, 170, 0.2) !important;
    display: inline-block !important;
    text-align: center !important;
}

.btn-pos-pricing:hover {
    background: linear-gradient(135deg, #164a8a 0%, #1E5CAA 100%) !important;
    color: #ffffff !important;
    transform: none !important;
    box-shadow: 0 16px 24px -8px rgba(30, 92, 170, 0.5), 0 8px 12px -4px rgba(30, 92, 170, 0.25) !important;
}

/* Features list - improved */
.pos-pricing-features {
    margin-bottom: 1.5rem !important;
}

.pos-features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 0.75rem !important;
}

.pos-feature-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.625rem !important;
    padding: 0 !important;
    transition: transform 0.2s ease !important;
}

.pos-feature-item:hover {
    transform: translateX(4px) !important;
}

.pos-feature-check {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    color: #1E5CAA !important;
    stroke-width: 3 !important;
}

.pos-feature-item span {
    color: #475569 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
}

/* Section dividers - improved */
.pos-pricing-section-divider {
    border-top: 1px solid #e2e8f0 !important;
    padding-top: 1.25rem !important;
    margin-top: 1.25rem !important;
    margin-bottom: 1.25rem !important;
    background: #f8fafc !important;
    padding: 1.25rem !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    border-radius: 0.75rem !important;
}

.pos-section-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
}

/* Reports list - improved */
.pos-reports-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 0.5rem !important;
}

.pos-reports-list li {
    color: #64748b !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    padding-left: 0 !important;
    line-height: 1.5 !important;
}

/* Additional charges - improved */
.pos-additional-charges-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid !important;
    gap: 0.625rem !important;
}

.pos-charge-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.625rem 0.875rem !important;
    background: #ffffff !important;
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.pos-charge-item:hover {
    background: #f8fafc !important;
    border-color: #bfdbfe !important;
    transform: translateX(2px) !important;
}

.pos-charge-label {
    color: #475569 !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
}

.pos-charge-value {
    color: #1E5CAA !important;
    font-size: 0.9375rem !important;
    font-weight: 700 !important;
}

/* Billing toggle - improved */
.billing-toggle-wrapper {
    display: inline-flex !important;
    background: #f1f5f9 !important;
    border-radius: 9999px !important;
    padding: 0.25rem !important;
    position: relative !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    overflow: hidden !important;
}

.billing-toggle-slider {
    position: absolute !important;
    top: 0.25rem !important;
    left: 0.25rem !important;
    width: calc(50% - 0.25rem) !important;
    height: calc(100% - 0.5rem) !important;
    background: linear-gradient(135deg, #1E5CAA 0%, #2563eb 100%) !important;
    border-radius: 9999px !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 2px 6px rgba(30, 92, 170, 0.4), 0 1px 2px rgba(30, 92, 170, 0.2) !important;
    will-change: transform !important;
}

.billing-toggle-btn {
    position: relative !important;
    z-index: 2 !important;
    padding: 0.5rem 1.5rem !important;
    background: transparent !important;
    border: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    outline: none !important;
    user-select: none !important;
}

.billing-toggle-btn:hover {
    color: #475569 !important;
}

.billing-toggle-btn.active {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.billing-save-note {
    font-size: 0.8125rem !important;
    color: #1E5CAA !important;
    margin-top: 0.625rem !important;
    font-weight: 600 !important;
}

/* Responsive pricing */
@media (max-width: 768px) {
    .pos-pricing-card {
        padding: 2rem 1.5rem !important;
        margin-top: 1.5rem !important;
    }
    
    .pos-price-value {
        font-size: 2.5rem !important;
    }
    
    .pos-pricing-title {
        font-size: 1.5rem !important;
    }
    
    .billing-toggle-btn {
        padding: 0.5rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
    
    /* Fix pricing display on tablets */
    .pos-price-display {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: center !important;
    }
    
    .pos-price-value {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    
    .pos-price-period {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 576px) {
    .pos-pricing-card {
        padding: 1.5rem 1.25rem !important;
    }
    
    .pos-price-value {
        font-size: 2.25rem !important;
    }
    
    .pos-charge-item {
        padding: 0.625rem 0.875rem !important;
    }
    
    .pos-charge-label,
    .pos-charge-value {
        font-size: 0.875rem !important;
    }
    
    /* Fix pricing display on mobile - prevent text cutoff */
    .pos-price-display {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: center !important;
    }
    
    .pos-price-value {
        font-size: 1.875rem !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }
    
    .pos-price-period {
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
    }
    
    /* Ensure currency and amount stay together */
    .pos-price-currency + .pos-price-value {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
    }
}

/* ========================================
   21. SELECT APP CARDS - PROFESSIONAL DESIGN
   ======================================== */

/* App selection cards - improved */
.app-selection-card {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 1.25rem !important;
    padding: 2rem 1.5rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

.app-selection-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 25px -5px rgba(30, 92, 170, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border-color: #1E5CAA !important;
}

/* Icon wrapper - centered and professional */
.app-card-icon-wrapper {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 1.25rem !important;
}

.app-card-icon {
    width: 64px !important;
    height: 64px !important;
    border-radius: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 0.75rem !important;
}

.app-selection-card:hover .app-card-icon {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 8px 16px -4px rgba(30, 92, 170, 0.25) !important;
}

.app-icon-svg {
    width: 32px !important;
    height: 32px !important;
    color: #1E5CAA !important;
    stroke-width: 2 !important;
}

.app-icon-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Card title - optimized size */
.app-selection-card .modern-card-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
    letter-spacing: -0.01em !important;
}

/* Card text - optimized size and alignment */
.app-selection-card .modern-card-text {
    color: #64748b !important;
    font-size: 0.9375rem !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    text-align: center !important;
    min-height: auto !important;
    flex-grow: 1 !important;
}

/* Button in cards */
.app-selection-card .btn-premium {
    margin-top: auto !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    width: 100% !important;
}

/* Select app section spacing */
.select-app-section {
    padding-top: 5.5rem !important;
    padding-bottom: 3rem !important;
}

.modern-hero-section.select-app-section {
    padding-top: 5.5rem !important;
    padding-bottom: 3rem !important;
}

/* Responsive - Tablet */
@media (max-width: 991px) {
    .app-selection-card {
        padding: 1.75rem 1.25rem !important;
    }
    
    .app-card-icon {
        width: 56px !important;
        height: 56px !important;
    }
    
    .app-icon-svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    .app-selection-card .modern-card-title {
        font-size: 1.0625rem !important;
    }
    
    .app-selection-card .modern-card-text {
        font-size: 0.875rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .select-app-section {
        padding-top: 5rem !important;
        padding-bottom: 2.5rem !important;
    }
    
    .modern-hero-section.select-app-section {
        padding-top: 5rem !important;
    }
    
    .app-selection-card {
        padding: 1.5rem 1.25rem !important;
        margin-bottom: 1rem !important;
    }
    
    .app-card-icon {
        width: 52px !important;
        height: 52px !important;
    }
    
    .app-icon-svg {
        width: 26px !important;
        height: 26px !important;
    }
    
    .app-selection-card .modern-card-title {
        font-size: 1rem !important;
        margin-bottom: 0.625rem !important;
    }
    
    .app-selection-card .modern-card-text {
        font-size: 0.875rem !important;
        margin-bottom: 1.25rem !important;
        line-height: 1.5 !important;
    }
    
    .app-selection-card .btn-premium {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
    }
}

/* Responsive - Small Mobile */
@media (max-width: 575px) {
    .app-selection-card {
        padding: 1.25rem 1rem !important;
    }
    
    .app-card-icon {
        width: 48px !important;
        height: 48px !important;
    }
    
    .app-icon-svg {
        width: 24px !important;
        height: 24px !important;
    }
}

/* ========================================
   22. HERO IMAGE OPTIMIZATION - POS PAGES
   ======================================== */

/* Hero images for POS pages - optimized sizing */
.retail-pos-hero-section .hero-main-image,
.restaurant-pos-hero-section .hero-main-image,
.pharmacy-pos-hero-section .hero-main-image,
.shoe-pos-hero-section .hero-main-image,
.pos-hero-section .hero-main-image {
    max-width: 500px !important;
    max-height: 400px !important;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* Hero image wrapper for POS pages */
.retail-pos-hero-section .hero-image-wrapper,
.restaurant-pos-hero-section .hero-image-wrapper,
.pharmacy-pos-hero-section .hero-image-wrapper,
.shoe-pos-hero-section .hero-image-wrapper,
.pos-hero-section .hero-image-wrapper {
    max-width: 500px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}

/* Tablet - POS hero images */
@media (min-width: 768px) and (max-width: 991px) {
    .retail-pos-hero-section .hero-main-image,
    .restaurant-pos-hero-section .hero-main-image,
    .pharmacy-pos-hero-section .hero-main-image,
    .shoe-pos-hero-section .hero-main-image,
    .pos-hero-section .hero-main-image {
        max-width: 450px !important;
        max-height: 350px !important;
    }
}

/* Mobile - POS hero images */
@media (max-width: 767px) {
    .retail-pos-hero-section .hero-main-image,
    .restaurant-pos-hero-section .hero-main-image,
    .pharmacy-pos-hero-section .hero-main-image,
    .shoe-pos-hero-section .hero-main-image,
    .pos-hero-section .hero-main-image {
        max-width: 100% !important;
        max-height: 280px !important;
    }
    
    .retail-pos-hero-section .hero-image-wrapper,
    .restaurant-pos-hero-section .hero-image-wrapper,
    .pharmacy-pos-hero-section .hero-image-wrapper,
    .shoe-pos-hero-section .hero-image-wrapper,
    .pos-hero-section .hero-image-wrapper {
        max-width: 100% !important;
        padding: 0.5rem !important;
    }
}

/* Desktop - POS hero images */
@media (min-width: 992px) and (max-width: 1399px) {
    .retail-pos-hero-section .hero-main-image,
    .restaurant-pos-hero-section .hero-main-image,
    .pharmacy-pos-hero-section .hero-main-image,
    .shoe-pos-hero-section .hero-main-image,
    .pos-hero-section .hero-main-image {
        max-width: 480px !important;
        max-height: 380px !important;
    }
}

/* Large Desktop - POS hero images */
@media (min-width: 1400px) {
    .retail-pos-hero-section .hero-main-image,
    .restaurant-pos-hero-section .hero-main-image,
    .pharmacy-pos-hero-section .hero-main-image,
    .shoe-pos-hero-section .hero-main-image,
    .pos-hero-section .hero-main-image {
        max-width: 500px !important;
        max-height: 400px !important;
    }
}

/* ========================================
   23. FBR COMPLIANCE SECTIONS - PROFESSIONAL DESIGN
   ======================================== */

/* FBR compliance section */
.fbr-compliance-section {
    padding: 4rem 0 !important;
}

.fbr-compliance-section .row {
    display: flex !important;
    align-items: center !important;
    gap: 2rem !important;
}

/* FBR section headings */
.fbr-heading {
    font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
}

/* FBR accent text (underlined parts) */
.fbr-accent {
    color: #1E5CAA !important;
}

/* FBR section description */
.fbr-text {
    font-size: clamp(1rem, 1.5vw, 1.125rem) !important;
    color: #64748b !important;
    line-height: 1.7 !important;
    margin-bottom: 1.5rem !important;
    font-weight: 400 !important;
}

/* FBR features list */
.fbr-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
    margin-top: 0 !important;
}

/* Individual feature item */
.fbr-feature-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1.25rem !important;
    padding: 1.25rem !important;
    background: #ffffff !important;
    border-radius: 0.75rem !important;
    border: 1px solid #f1f5f9 !important;
    transition: all 0.3s ease !important;
}

.fbr-feature-item:hover {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    transform: translateX(4px) !important;
}

/* Feature icon wrapper */
.fbr-feature-icon {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    border-radius: 1rem !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 2px 8px rgba(30, 92, 170, 0.1) !important;
    transition: all 0.3s ease !important;
}

.fbr-feature-item:hover .fbr-feature-icon {
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(30, 92, 170, 0.2) !important;
}

.fbr-feature-icon svg {
    width: 28px !important;
    height: 28px !important;
    color: #1E5CAA !important;
    stroke-width: 2 !important;
}

/* Feature content */
.fbr-feature-content {
    flex: 1 !important;
    padding-top: 0.25rem !important;
}

.fbr-feature-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 0.625rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
}

.fbr-feature-description {
    font-size: 0.9375rem !important;
    color: #64748b !important;
    line-height: 1.65 !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* FBR content and image containers */
.fbr-content {
    flex: 1 !important;
    padding: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.fbr-image {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
}

.fbr-image-wrapper {
    width: 100% !important;
    max-width: 550px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fbr-image-wrapper img {
    width: 100% !important;
    max-width: 550px !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 1rem !important;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.1) !important;
}

/* FBR CTA Wrapper */
.fbr-cta-wrapper {
    margin-top: 1.5rem !important;
}

.fbr-cta-wrapper .btn-premium {
    padding: 0.875rem 1.75rem !important;
    font-size: 1rem !important;
}

.fbr-cta-wrapper .btn-premium svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

/* Responsive - Mobile */
@media (max-width: 991px) {
    .fbr-content,
    .fbr-image {
        padding: 1.5rem 1rem !important;
    }
    
    .fbr-heading {
        font-size: 1.75rem !important;
    }
    
    .fbr-text {
        font-size: 1rem !important;
    }
    
    .fbr-feature-icon {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
    }
    
    .fbr-feature-icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    .fbr-feature-title {
        font-size: 1rem !important;
    }
    
    .fbr-feature-description {
        font-size: 0.875rem !important;
    }
}

/* ========================================
   24. KEY FEATURES SECTION - ALIGNMENT FIX
   ======================================== */

/* Benefits wrapper */
.benefits-wrapper-modern {
    padding: 4rem 0 !important;
    background: #ffffff !important;
}

/* Benefit cards - professional design */
.benefit-card-modern {
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 1.25rem !important;
    padding: 2rem 1.5rem !important;
    text-align: center !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    height: 100% !important;
}

.benefit-card-modern:hover {
    transform: translateY(-6px) !important;
    box-shadow: 0 20px 25px -5px rgba(30, 92, 170, 0.12), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border-color: #bfdbfe !important;
}

/* Benefit icon wrapper */
.benefit-icon-wrapper {
    width: 80px !important;
    height: 80px !important;
    margin: 0 auto 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-radius: 1rem !important;
    padding: 1rem !important;
}

.benefit-icon-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}

/* Benefit title */
.benefit-title {
    font-size: 1.125rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/* Benefit description */
.benefit-description {
    font-size: 0.9375rem !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    text-align: center !important;
}

/* Fix column alignment on medium screens */
@media (min-width: 768px) and (max-width: 991px) {
    .benefits-wrapper-modern .col-md-4 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Mobile - stack cards */
@media (max-width: 767px) {
    .benefit-card-modern {
        padding: 1.5rem 1.25rem !important;
    }
    
    .benefit-icon-wrapper {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 1.25rem !important;
    }
    
    .benefit-title {
        font-size: 1rem !important;
    }
    
    .benefit-description {
        font-size: 0.875rem !important;
    }
}



/* ===== hover-optimization.css ===== */
/* ================================================
   HOVER & ANIMATION OPTIMIZATION - DISABLED
   ALL hover effects and animations are disabled for layout stability
   ================================================ */

/* ==========================================
   1. GLOBAL PERFORMANCE OPTIMIZATIONS
   ========================================== */

/* Force hardware acceleration for better performance */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* DISABLED: Transforms cause layout breaks
*[class*="transition"],
*[class*="hover"],
*[class*="card"],
*[class*="btn"] {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
*/

/* ==========================================
   2. CARD HOVER OPTIMIZATIONS - DISABLED
   ========================================== */

/* DISABLED: All card hover effects cause layout breaks
.benefit-card-modern,
.modern-card,
.modern-why-card,
.modern-feature-card-large,
.stat-card-new {
    transition: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.benefit-card-modern:hover,
.modern-card:hover,
.modern-why-card:hover,
.modern-feature-card-large:hover,
.stat-card-new:hover {
    -webkit-transform: none !important;
    transform: none !important;
}

.benefit-icon-wrapper,
.modern-card-icon,
.why-card-icon {
    transition: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}
*/

/* ==========================================
   3. BUTTON OPTIMIZATIONS - DISABLED
   ========================================== */

/* DISABLED: Button transforms cause layout breaks
.btn-premium,
.btn-premium-outline,
.billing-toggle-btn,
button[class*="btn"] {
    transition: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.btn-premium:hover,
.btn-premium-outline:hover {
    -webkit-transform: none !important;
    transform: none !important;
}
*/

/* ==========================================
   4. NAVIGATION OPTIMIZATIONS
   ========================================== */

.nav-link-modern,
.dropdown-item-modern,
.nav-link-mobile {
    transition: color 0.2s ease,
                background-color 0.2s ease !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

.dropdown-menu-modern {
    transition: opacity 0.3s ease,
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity, transform !important;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
}

/* ==========================================
   5. PRICING CARD OPTIMIZATIONS - DISABLED
   ========================================== */

/* DISABLED: Pricing card transforms cause layout breaks
.pos-pricing-card,
.pricing-card,
.modern-pricing-card {
    transition: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.pos-pricing-card:hover,
.pricing-card:hover,
.modern-pricing-card:hover {
    -webkit-transform: none !important;
    transform: none !important;
}
*/

/* ==========================================
   6. BILLING TOGGLE SLIDER OPTIMIZATION
   ========================================== */

.billing-toggle-slider {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                left 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* ==========================================
   7. IMAGE OPTIMIZATIONS
   ========================================== */

img,
.hero-dashboard-image,
.hero-section-col-two-laptop {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* ==========================================
   8. ANIMATION OPTIMIZATIONS
   ========================================== */

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ==========================================
   9. BROWSER-SPECIFIC FIXES
   ========================================== */

/* Safari specific fixes */
@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    .modern-navbar {
        -webkit-transform: translate3d(0, 0, 0) !important;
        transform: translate3d(0, 0, 0) !important;
    }
}

/* Firefox specific fixes */
@-moz-document url-prefix() {
    .benefit-card-modern:hover,
    .modern-card:hover {
        transform: translateY(-4px) !important;
    }
}

/* Edge specific fixes */
@supports (-ms-ime-align: auto) {
    .benefit-card-modern,
    .modern-card {
        -ms-transform: translateZ(0);
    }
}

/* ==========================================
   10. TESTIMONIAL CARDS OPTIMIZATION - DISABLED
   ========================================== */

/* DISABLED: Testimonial card transforms cause layout breaks
.testimonial-card-growth,
.testimonial-card {
    transition: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.testimonial-card-growth:hover,
.testimonial-card:hover {
    -webkit-transform: none !important;
    transform: none !important;
}
*/

/* ==========================================
   11. FEATURE CARDS OPTIMIZATION - DISABLED
   ========================================== */

/* DISABLED: Feature card transforms cause layout breaks
.modern-feature-grid-card,
.modern-risk-card,
.modern-process-card-beautiful,
.modern-workflow-card,
.modern-smart-feature-card,
.modern-smart-feature-pk-card {
    transition: none !important;
    will-change: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}

.modern-feature-grid-card:hover,
.modern-risk-card:hover,
.modern-process-card-beautiful:hover,
.modern-workflow-card:hover,
.modern-smart-feature-card:hover,
.modern-smart-feature-pk-card:hover {
    -webkit-transform: none !important;
    transform: none !important;
}
*/

/* ==========================================
   12. ACCORDION & COLLAPSE OPTIMIZATION
   ========================================== */

.accordion-button,
.accordion-item {
    transition: background-color 0.3s ease,
                border-color 0.3s ease !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
}

/* ==========================================
   13. GENERAL HOVER STATE OPTIMIZATION
   ========================================== */

/* Prevent text selection on hover elements */
.benefit-card-modern,
.modern-card,
.btn-premium,
.billing-toggle-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* DISABLED: Pseudo-elements cause layout issues
.benefit-card-modern::before,
.modern-card::before,
.pos-pricing-card::before {
    display: none !important;
}
*/

/* ==========================================
   14. MOBILE OPTIMIZATION
   ========================================== */

@media (max-width: 768px) {
    /* DISABLED: This *:hover rule causes cookie banner flickering
    *:hover {
        transform: none !important;
    }
    */
    
    /* Tap highlight removal */
    * {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
}

/* ==========================================
   15. LOADING & INITIAL STATE OPTIMIZATION
   ========================================== */

/* Prevent FOUC (Flash of Unstyled Content) */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-up.visible,
.fade-in-up[style*="opacity: 1"] {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================
   16. Z-INDEX OPTIMIZATION
   ========================================== */

/* Ensure proper stacking context */
.modern-navbar {
    z-index: 1030 !important;
}

.dropdown-menu-modern {
    z-index: 1040 !important;
}

/* ==========================================
   END OF HOVER & ANIMATION OPTIMIZATION
   ========================================== */



/* ===== font-improvement.css ===== */
/* ========================================
   PROFESSIONAL FONT IMPROVEMENT
   Modern, clean font family for better readability
   ======================================== */

/* ========================================
   1. IMPORT MODERN FONTS
   ======================================== */

/* Plus Jakarta Sans - Modern, professional heading font */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* Inter - Excellent body text font (already imported, but ensuring it) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

/* ========================================
   2. GLOBAL FONT VARIABLES
   ======================================== */

:root {
    /* Primary font for headings - Plus Jakarta Sans (modern, clean) */
    --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Primary font for body text - Inter (excellent readability) */
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    
    /* Fallback font stack */
    --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
}

/* ========================================
   3. BODY TEXT - Inter (Professional)
   ======================================== */

body,
html,
p,
span,
div,
li,
a,
button,
input,
textarea,
select,
label {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ========================================
   4. HEADINGS - Plus Jakarta Sans (Modern)
   ======================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ========================================
   5. HERO HEADINGS - Plus Jakarta Sans
   All product pages use same fonts as main page
   ======================================== */

.modern-hero-heading,
.hero-title,
.page-title,
.home-hero-section h1,
.accounting-hero-section h1,
.pos-hero-section h1,
.manufacturing-hero-section h1,
.rental-hero-section h1,
.distribution-hero-section h1,
.bookkeeping-hero-section h1,
.expense-hero-section h1,
.financial-reporting-hero-section h1,
.ocr-hero-section h1,
.mtd-hero-section h1,
.vat-software-hero-section h1,
.invoicing-hero-section h1,
.accountants-hero-section h1,
.freelancers-hero-section h1,
.sole-traders-hero-section h1,
.practice-manager-hero-section h1,
.contact-hero-section h1,
.demo-request-hero-section h1,
.restaurant-pos-hero-section h1,
.retail-pos-hero-section h1,
.pharmacy-pos-hero-section h1,
.shoe-pos-hero-section h1,
.fbr-hero-section h1 {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Hero heading second line */
.modern-hero-heading .hero-heading-second-line {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

/* ========================================
   6. SECTION HEADINGS - Plus Jakarta Sans
   ======================================== */

.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2 {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
}

/* ========================================
   7. CARD TITLES - Plus Jakarta Sans
   ======================================== */

.modern-card-title,
.mp-products-card__title,
.why-card-title,
.product-card-title,
.benefit-card-title,
.testimonial-card-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
}

/* ========================================
   8. NAVIGATION - Inter (Clean)
   ======================================== */

.nav-link,
.nav-link-modern,
.navbar-nav .nav-link,
.navbar-brand {
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   9. BUTTONS - Inter (Professional)
   ======================================== */

.btn,
.btn-premium,
.btn-primary,
.btn-secondary,
button {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   10. FORMS - Inter (Readable)
   ======================================== */

.form-label,
.form-control,
input,
textarea,
select {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   11. MOBILE NAVIGATION - Inter
   ======================================== */

.nav-link-mobile,
.accordion-button.mobile-nav-section-btn {
    font-family: var(--font-body) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* ========================================
   12. OVERRIDE OLD FONT DECLARATIONS
   ======================================== */

/* Replace Montserrat with Plus Jakarta Sans */
*[style*="font-family: Montserrat"],
*[style*="font-family: 'Montserrat'"] {
    font-family: var(--font-heading) !important;
}

/* Replace Poppins with Inter for body text */
*[style*="font-family: Poppins"],
*[style*="font-family: 'Poppins'"] {
    font-family: var(--font-body) !important;
}

/* ========================================
   13. SPECIFIC ELEMENT FIXES
   ======================================== */

/* Hero text - Inter */
.modern-hero-text,
.hero-text,
.hero-description {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
    line-height: 1.7 !important;
}

/* Section descriptions - Inter */
.section-subtitle,
.section-description {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
}

/* Card text - Inter */
.modern-card-text,
.mp-products-card__description,
.why-card-text {
    font-family: var(--font-body) !important;
    font-weight: 400 !important;
}

/* ========================================
   14. FONT WEIGHT OPTIMIZATION
   ======================================== */

/* Headings - Bold weights */
h1, .h1 { font-weight: 800 !important; }
h2, .h2 { font-weight: 700 !important; }
h3, .h3 { font-weight: 700 !important; }
h4, .h4 { font-weight: 600 !important; }
h5, .h5 { font-weight: 600 !important; }
h6, .h6 { font-weight: 600 !important; }

/* Body text - Regular weight */
p, body, span, div, li {
    font-weight: 400 !important;
}

/* Strong text */
strong, b {
    font-weight: 600 !important;
}

/* ========================================
   15. LETTER SPACING IMPROVEMENTS
   ======================================== */

/* Headings - Tighter spacing for modern look */
h1, .h1, .modern-hero-heading {
    letter-spacing: -0.03em !important;
}

h2, .h2, .section-title {
    letter-spacing: -0.02em !important;
}

h3, .h3 {
    letter-spacing: -0.01em !important;
}

/* Body text - Normal spacing for readability */
p, body, span, div, li {
    letter-spacing: -0.01em !important;
}

/* Buttons - Slight spacing */
.btn, button {
    letter-spacing: 0.01em !important;
}

/* ========================================
   16. LINE HEIGHT OPTIMIZATION
   ======================================== */

/* Headings - Tighter line height */
h1, .h1, .modern-hero-heading {
    line-height: 1.2 !important;
}

h2, .h2 {
    line-height: 1.3 !important;
}

h3, .h3 {
    line-height: 1.3 !important;
}

/* Body text - Comfortable reading */
p, body, span, div, li {
    line-height: 1.7 !important;
}

/* ========================================
   17. FONT SMOOTHING (All Elements)
   ======================================== */

* {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* ========================================
   18. FALLBACK FONTS
   ======================================== */

/* Ensure system fonts as fallback */
body {
    font-family: var(--font-body), var(--font-fallback) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading), var(--font-fallback) !important;
}

/* ========================================
   19. RESPONSIVE FONT OPTIMIZATION
   ======================================== */

/* Mobile - Slightly tighter letter spacing */
@media (max-width: 767px) {
    h1, .h1, .modern-hero-heading {
        letter-spacing: -0.02em !important;
    }
    
    h2, .h2 {
        letter-spacing: -0.01em !important;
    }
}

/* ========================================
   20. SPECIAL ELEMENTS
   ======================================== */

/* Typewriter text */
#typewriter-text {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
}

/* Dropdown titles */
.dropdown-title {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
}

/* Feature titles */
.feature-title,
.benefit-title {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

/* ========================================
   21. PERFORMANCE OPTIMIZATION
   ======================================== */

/* Preload fonts for better performance */
@font-face {
    font-family: 'Plus Jakarta Sans';
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    font-display: swap;
}



/* ===== color-fix.css ===== */
/* ========================================
   COLOR FIX - Remove All Black Text
   Replace pure black (#000) with professional dark gray
   ======================================== */

/* ========================================
   1. GLOBAL BLACK TEXT REPLACEMENT
   ======================================== */

/* Force override any black colors - Don't use global inherit as it hides text */
*[style*="color: #000"],
*[style*="color: #000000"],
*[style*="color: black"],
*[style*="color:Black"] {
    color: #0f172a !important; /* Professional dark slate instead of black */
}

/* ========================================
   2. HEADINGS - Professional Dark Gray
   ======================================== */

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    color: #0f172a !important; /* Dark slate - not black */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   3. HERO HEADINGS - Professional Color
   All product pages use same colors as main page
   ======================================== */

.modern-hero-heading,
.hero-title,
.page-title,
.home-hero-section h1,
.accounting-hero-section h1,
.pos-hero-section h1,
.manufacturing-hero-section h1,
.rental-hero-section h1,
.distribution-hero-section h1,
.bookkeeping-hero-section h1,
.expense-hero-section h1,
.financial-reporting-hero-section h1,
.ocr-hero-section h1,
.mtd-hero-section h1,
.vat-software-hero-section h1,
.invoicing-hero-section h1,
.accountants-hero-section h1,
.freelancers-hero-section h1,
.sole-traders-hero-section h1,
.practice-manager-hero-section h1,
.contact-hero-section h1,
.demo-request-hero-section h1,
.restaurant-pos-hero-section h1,
.retail-pos-hero-section h1,
.pharmacy-pos-hero-section h1,
.shoe-pos-hero-section h1,
.fbr-hero-section h1 {
    color: #0f172a !important; /* Dark slate instead of black */
}

/* Hero heading second line */
.modern-hero-heading .hero-heading-second-line {
    color: #1e293b !important; /* Slightly lighter for hierarchy */
}

/* Hero heading and all children - explicit colors */
.modern-hero-heading {
    color: #0f172a !important;
}

.modern-hero-heading * {
    color: inherit !important; /* Only for children of hero heading */
}

/* Ensure typewriter text is visible */
#typewriter-text {
    color: #1E5CAA !important;
}

.typewriter-cursor {
    color: #1E5CAA !important;
}

/* ========================================
   4. SECTION HEADINGS - Professional Color
   ======================================== */

.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2 {
    color: #0f172a !important; /* Dark slate */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   5. CARD TITLES - Professional Color
   ======================================== */

.modern-card-title,
.mp-products-card__title,
.why-card-title,
.product-card-title,
.benefit-card-title,
.testimonial-card-title {
    color: #0f172a !important; /* Dark slate */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   6. BODY TEXT - Professional Gray
   ======================================== */

/* Body text - ensure visibility */
body {
    color: #1e293b !important; /* Professional dark gray - not black */
}

/* Default text elements - visible */
p,
span,
div,
li {
    color: #1e293b !important; /* Professional dark gray - not black */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Paragraphs - ensure visibility */
p {
    color: #475569 !important; /* Medium gray for readability */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   7. NAVIGATION - Professional Color
   ======================================== */

.nav-link,
.nav-link-modern,
.navbar-nav .nav-link {
    color: #1e293b !important; /* Dark gray - not black */
}

.nav-link:hover {
    color: #1E5CAA !important;
}

.navbar-brand {
    color: #0f172a !important; /* Dark slate */
}

/* ========================================
   8. BUTTONS - Professional Text Color
   ======================================== */

.btn-premium span,
.btn-primary span {
    color: #1e293b !important; /* Dark gray text on button */
}

/* ========================================
   9. LINKS - Professional Color
   ======================================== */

a,
.link,
.link-modern {
    color: #1E5CAA !important; /* Brand blue */
}

a:hover,
.link:hover {
    color: #164a8a !important; /* Darker blue on hover */
}

/* Exclude footer links from hover color change */
footer a:hover,
.modern-footer a:hover,
footer .footer-link:hover,
.modern-footer .footer-link:hover {
    color: #cbd5e1 !important; /* Keep original footer link color */
}

/* ========================================
   10. FORMS - Professional Color
   ======================================== */

.form-label,
label {
    color: #1e293b !important; /* Dark gray - not black */
}

.form-control,
input,
textarea,
select {
    color: #0f172a !important; /* Dark slate for input text */
}

/* ========================================
   11. MOBILE NAVIGATION - Professional Color
   ======================================== */

.nav-link-mobile {
    color: #1e293b !important; /* Dark gray - not black */
}

.nav-link-mobile:hover {
    color: #1E5CAA !important;
}

.accordion-button.mobile-nav-section-btn {
    color: #0f172a !important; /* Dark slate */
}

/* ========================================
   12. SPECIFIC ELEMENT FIXES
   ======================================== */

/* Fix any remaining black in design-system.css */
.modern-hero-heading {
    color: #0f172a !important; /* Override black */
}

/* Fix any black in home.css */
.modern-hero-heading .hero-heading-second-line {
    color: #1e293b !important; /* Override black */
}

/* Text dark class - use professional color */
.text-dark {
    color: #1e293b !important; /* Dark gray instead of black */
}

/* ========================================
   13. OVERRIDE INLINE STYLES
   ======================================== */

/* Target elements with inline black styles */
[style*="color: #000"],
[style*="color: #000000"],
[style*="color: black"] {
    color: #0f172a !important;
}

/* ========================================
   14. CARDS & COMPONENTS
   ======================================== */

/* Card text */
.modern-card-text,
.mp-products-card__description,
.why-card-text {
    color: #475569 !important; /* Medium gray */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Feature titles */
.feature-title,
.benefit-title {
    color: #0f172a !important; /* Dark slate */
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   15. DROPDOWN & MENU ITEMS
   ======================================== */

.dropdown-title {
    color: #0f172a !important; /* Dark slate */
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-item-modern {
    color: #1e293b !important; /* Dark gray */
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-item-modern:hover {
    color: #1E5CAA !important;
}

/* ========================================
   16. FOOTER & SECONDARY TEXT - ENSURE VISIBILITY
   ======================================== */

/* Modern Footer - Ensure it's visible */
.modern-footer {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}

.modern-footer * {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer text colors - ensure visibility */
footer,
.footer {
    color: #f8fafc !important; /* Light text for dark background */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer headings */
.footer-heading,
footer h3,
footer h4,
footer h5 {
    color: #ffffff !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer links */
footer a,
.footer-link {
    color: #cbd5e1 !important; /* Light gray for links */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer contact information - Make white */
.footer-link.text-white,
.contact-item-pro .footer-link {
    color: #ffffff !important; /* White for contact info */
}

footer a:hover,
.footer-link:hover,
.modern-footer a:hover,
.modern-footer .footer-link:hover {
    color: inherit !important; /* No hover color change */
    transform: none !important;
    text-decoration: none !important;
}

/* Footer text */
.footer-text,
.footer-description,
footer p {
    color: #94a3b8 !important; /* Light gray for descriptions */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Footer contact location text - Make white */
.contact-item-pro .text-sm {
    color: #ffffff !important; /* White for location text */
}

/* Footer content container */
.footer-content,
.modern-footer-container {
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 1 !important;
}

/* ========================================
   17. UTILITY CLASSES
   ======================================== */

/* Text color utilities */
.text-black {
    color: #0f172a !important; /* Use dark slate instead of black */
}

.text-dark {
    color: #1e293b !important; /* Professional dark gray */
}

.text-gray-900 {
    color: #0f172a !important;
}

.text-gray-800 {
    color: #1e293b !important;
}

.text-gray-700 {
    color: #334155 !important;
}

/* ========================================
   18. SPECIFIC PAGE FIXES
   ======================================== */

/* Hero section - explicit colors for all elements */
.home-hero-section .modern-hero-heading {
    color: #0f172a !important;
}

.home-hero-section .modern-hero-text {
    color: #475569 !important;
}

.home-hero-section p {
    color: #475569 !important;
}

.home-hero-section span {
    color: inherit !important; /* Allow spans to inherit from parent */
}

.home-hero-section #typewriter-text {
    color: #1E5CAA !important;
}

.home-hero-section .typewriter-cursor {
    color: #1E5CAA !important;
}

/* ========================================
   19. FORCE OVERRIDE BLACK IN ALL CSS FILES
   ======================================== */

/* Override any black from home.css */
.modern-hero-heading {
    color: #0f172a !important;
}

/* Override any black from design-system.css */
.modern-hero-heading {
    color: #0f172a !important;
}

/* ========================================
   20. FINAL GLOBAL OVERRIDE - ENSURE VISIBILITY
   ======================================== */

/* Ensure base text is visible */
body {
    color: #1e293b !important; /* Professional dark gray */
}

html {
    color: #1e293b !important;
}

/* Headings should be darker but not black - ensure visibility */
h1, h2, h3, h4, h5, h6 {
    color: #0f172a !important; /* Dark slate - professional alternative to black */
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure all text elements are visible */
p, span, div, li, a, label {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Ensure headings are visible */
.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.modern-hero-heading,
h1, h2, h3, h4, h5, h6 {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}




/* ===== heading-improvement.css ===== */
/* ========================================
   HEADING IMPROVEMENT
   Professional heading styles with better appearance
   ======================================== */

/* ========================================
   1. PRODUCTS SECTION HEADING - Professional
   ======================================== */

.products-section-heading,
.modern-section-heading {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important; /* Dark slate - professional */
    text-align: center !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    padding: 0 1rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* Products section subtitle */
.products-section-subtitle,
.modern-section-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 1.8vw, 1.125rem) !important;
    color: #475569 !important; /* Professional gray */
    text-align: center !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   2. PREMIUM UNDERLINE - Enhanced Design
   ======================================== */

.premium-underline {
    position: relative !important;
    display: inline-block !important;
    color: #1E5CAA !important; /* Brand blue */
    font-weight: 800 !important;
    z-index: 1 !important;
    padding: 0 0.125rem !important;
}

/* Enhanced curved underline */
.premium-underline::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: -8px !important;
    width: 100% !important;
    height: 14px !important;
    background-image: url("data:image/svg+xml,%3Csvg width='330' height='14' viewBox='0 0 330 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 10.423C32.0673 5.24443 62.4088 3.65171 92.6841 4.29298C126.852 5.01673 160.912 8.02554 194.949 10.3891C237.957 13.3756 281.365 11.9754 324.032 7.00244' stroke='%231E5CAA' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center bottom !important;
    opacity: 1 !important;
    z-index: -1 !important;
    transform: translateY(2px) !important;
}

/* Hover effect for premium underline */
.premium-underline:hover {
    color: #164a8a !important; /* Darker blue on hover */
}

.premium-underline:hover::after {
    opacity: 0.9 !important;
    transform: translateY(2px) scale(1.05) !important;
    transition: all 0.3s ease !important;
}

/* ========================================
   3. ALL SECTION HEADINGS - Consistent Styling
   ======================================== */

.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important; /* Dark slate - professional */
    text-align: center !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    padding: 0 1rem !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   4. WHY MONEYPEX HEADING - Professional
   ======================================== */

.why-moneypex-heading {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: center !important;
    margin-bottom: 1.25rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.why-moneypex-heading .premium-underline {
    color: #1E5CAA !important;
}

/* ========================================
   5. TRUSTED BY HEADING - Professional
   ======================================== */

.trusted-by-heading {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important; /* Dark slate */
    text-align: center !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.trusted-by-heading .premium-underline {
    color: #1E5CAA !important;
}

/* ========================================
   6. SECTION DESCRIPTIONS - Professional
   ======================================== */

.section-subtitle,
.section-description,
.why-moneypex-description,
.products-section-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 1.8vw, 1.125rem) !important;
    color: #475569 !important; /* Professional gray */
    text-align: center !important;
    max-width: 720px !important;
    margin: 0 auto 1rem !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
}

/* ========================================
   7. ALL H2 HEADINGS - Consistent
   ======================================== */

h2, .h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important; /* Dark slate */
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    margin-bottom: 1.25rem !important;
}

/* ========================================
   8. HEADING SPACING IMPROVEMENTS
   ======================================== */

/* Better spacing for section headings */
.section-title,
.products-section-heading,
.why-moneypex-heading,
.trusted-by-heading {
    margin-top: 0 !important;
    margin-bottom: 1.25rem !important;
    padding-bottom: 0.5rem !important;
}

/* Spacing between heading and description */
.products-section-heading + .products-section-subtitle,
.why-moneypex-heading + .why-moneypex-description {
    margin-top: 0.75rem !important;
}

/* ========================================
   9. MOBILE HEADING OPTIMIZATIONS
   ======================================== */

@media (max-width: 767px) {
    .products-section-heading,
    .section-title,
    .why-moneypex-heading,
    .trusted-by-heading {
        font-size: clamp(1.5rem, 7vw, 2rem) !important;
        margin-bottom: 1rem !important;
        padding: 0 0.5rem !important;
    }
    
    .products-section-subtitle,
    .section-subtitle,
    .why-moneypex-description {
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
        padding: 0 1rem !important;
    }
    
    /* Premium underline on mobile */
    .premium-underline::after {
        height: 12px !important;
        bottom: -6px !important;
    }
}

/* ========================================
   10. TABLET HEADING OPTIMIZATIONS
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .products-section-heading,
    .section-title {
        font-size: clamp(2rem, 4.5vw, 2.25rem) !important;
    }
}

/* ========================================
   11. DESKTOP HEADING OPTIMIZATIONS
   ======================================== */

@media (min-width: 992px) {
    .products-section-heading,
    .section-title {
        font-size: clamp(2rem, 3.5vw, 2.5rem) !important;
    }
    
    .why-moneypex-heading {
        font-size: clamp(2rem, 4vw, 2.75rem) !important;
    }
}

/* ========================================
   12. TEXT ALIGNMENT FIXES
   ======================================== */

/* Ensure all section headings are centered */
.products-section-heading,
.section-title,
.why-moneypex-heading,
.trusted-by-heading {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
}

/* ========================================
   13. PREMIUM UNDERLINE IN DIFFERENT CONTEXTS
   ======================================== */

/* Premium underline in products heading */
.products-section-heading .premium-underline {
    color: #1E5CAA !important;
    font-weight: 800 !important;
}

/* Premium underline in why moneypex */
.why-moneypex-heading .premium-underline {
    color: #1E5CAA !important;
    font-weight: 800 !important;
}

/* ========================================
   14. HEADING CONTAINER IMPROVEMENTS
   ======================================== */

/* Better container for heading sections */
.text-center.mb-5,
.text-center.mb-5.mb-lg-6 {
    margin-bottom: 2.5rem !important;
}

@media (max-width: 767px) {
    .text-center.mb-5,
    .text-center.mb-5.mb-lg-6 {
        margin-bottom: 2rem !important;
    }
}

/* ========================================
   15. FADE IN ANIMATIONS FOR HEADINGS
   ======================================== */

.fade-in-up {
    animation: fadeInUp 0.6s ease-out !important;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   16. FINAL HEADING POLISH
   ======================================== */

/* Ensure consistent font rendering */
.products-section-heading,
.section-title,
.why-moneypex-heading,
.trusted-by-heading,
h2, .h2 {
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Prevent text from breaking awkwardly */
.products-section-heading,
.section-title {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
}



/* ===== heading-beauty.css ===== */
/* ========================================
   PROFESSIONAL HEADING BEAUTIFICATION
   Beautiful, modern heading styles like professional developers
   ======================================== */

/* ========================================
   1. GLOBAL HEADING RESET & BASE
   ======================================== */

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    color: #0f172a !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* ========================================
   2. PREMIUM UNDERLINE - ELEGANT DESIGN
   ======================================== */

.premium-underline {
    position: relative !important;
    display: inline-block !important;
    color: #1E5CAA !important;
    font-weight: 800 !important;
    z-index: 1 !important;
    padding: 0 0.125rem !important;
    transition: color 0.3s ease !important;
}

/* Beautiful curved underline with gradient - Responsive */
.premium-underline::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    bottom: clamp(-8px, -0.8vw, -10px) !important;
    width: 100% !important;
    height: clamp(12px, 1.2vw, 16px) !important;
    background-image: url("data:image/svg+xml,%3Csvg width='400' height='16' viewBox='0 0 400 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='underlineGradient' x1='0%25' y1='0%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' style='stop-color:%231E5CAA;stop-opacity:1' /%3E%3Cstop offset='50%25' style='stop-color:%233b82f6;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%231E5CAA;stop-opacity:1' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M2 12.423C35.0673 6.24443 68.4088 4.65171 101.684 5.29298C138.852 6.01673 175.912 9.02554 212.949 11.3891C260.957 14.3756 309.365 12.9754 357.032 8.00244' stroke='url(%23underlineGradient)' stroke-width='4.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: 100% 100% !important;
    background-position: center bottom !important;
    opacity: 1 !important;
    z-index: -1 !important;
    transform: translateY(clamp(1px, 0.2vw, 2px)) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Hover effect - subtle animation */
.premium-underline:hover {
    color: #164a8a !important;
}

.premium-underline:hover::after {
    opacity: 0.95 !important;
    transform: translateY(2px) scale(1.05) !important;
    filter: brightness(1.1) !important;
}

/* ========================================
   3. ALL SECTION HEADINGS - UNIFIED STYLE
   ======================================== */

.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.testimonials-heading,
.benefits-wrapper-modern h2,
.empowering-businesses-section h2,
.features-carousel-heading {
    font-family: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(1.5rem, 4vw, 2.75rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    text-align: center !important;
    margin: 0 auto 1.5rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
    padding: 0 1rem !important;
    max-width: 900px !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transition: font-size 0.3s ease !important;
}

/* ========================================
   4. H1 HEADINGS - HERO & MAIN
   ======================================== */

h1, .h1 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.5rem, 5vw, 3.5rem) !important;
    font-weight: 900 !important;
    color: #0f172a !important;
    line-height: 1.15 !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 1.5rem !important;
    transition: font-size 0.3s ease !important;
}

/* ========================================
   5. H2 HEADINGS - SECTION TITLES
   ======================================== */

h2, .h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.375rem, 3.8vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 1.25rem !important;
    transition: font-size 0.3s ease !important;
}

/* ========================================
   6. H3 HEADINGS - SUBSECTIONS
   ======================================== */

h3, .h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.25rem, 2.8vw, 2rem) !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: 1rem !important;
    transition: font-size 0.3s ease !important;
}

/* ========================================
   7. TRUSTED BY HEADING - SPECIAL STYLING
   ======================================== */

.trusted-by-heading {
    font-size: clamp(1.5rem, 4vw, 2.75rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 2rem !important;
    padding-bottom: 0.75rem !important;
    transition: font-size 0.3s ease !important;
}

.trusted-by-heading .premium-underline {
    color: #1E5CAA !important;
    font-weight: 800 !important;
    position: relative !important;
}

/* ========================================
   8. WHY MONEYPEX HEADING
   ======================================== */

.why-moneypex-heading {
    font-size: clamp(1.5rem, 4.2vw, 2.875rem) !important;
    font-weight: 800 !important;
    margin-bottom: 1.5rem !important;
    transition: font-size 0.3s ease !important;
}

.why-moneypex-heading .premium-underline {
    color: #1E5CAA !important;
}

/* ========================================
   9. PRODUCTS SECTION HEADING
   ======================================== */

.products-section-heading {
    font-size: clamp(1.5rem, 4vw, 2.75rem) !important;
    margin-bottom: 1.5rem !important;
    transition: font-size 0.3s ease !important;
}

.products-section-heading .premium-underline {
    color: #1E5CAA !important;
}

/* ========================================
   10. FEATURES CAROUSEL HEADING
   ======================================== */

.features-carousel-heading {
    font-size: clamp(1.5rem, 4vw, 2.75rem) !important;
    margin-bottom: 1rem !important;
    transition: font-size 0.3s ease !important;
}

.features-carousel-heading .premium-underline {
    color: #1E5CAA !important;
}

/* ========================================
   11. SECTION SUBTITLES - ELEGANT
   ======================================== */

.section-subtitle,
.section-description,
.why-moneypex-description,
.products-section-subtitle,
.features-carousel-subtitle,
.modern-section-subtitle {
    font-family: 'Inter', 'Plus Jakarta Sans', sans-serif !important;
    font-size: clamp(0.9375rem, 1.8vw, 1.25rem) !important;
    color: #64748b !important;
    text-align: center !important;
    max-width: 750px !important;
    margin: 0 auto 2rem !important;
    line-height: 1.75 !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    transition: font-size 0.3s ease !important;
}

/* ========================================
   12. HEADING CONTAINERS - SPACING
   ======================================== */

.text-center.mb-5,
.text-center.mb-5.mb-lg-6 {
    margin-bottom: clamp(2rem, 4vw, 3rem) !important;
    padding: 0 clamp(0.5rem, 2vw, 1.5rem) !important;
    transition: margin-bottom 0.3s ease, padding 0.3s ease !important;
}

/* Responsive container spacing */
@media (max-width: 375px) {
    .text-center.mb-5,
    .text-center.mb-5.mb-lg-6 {
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem !important;
    }
}

@media (min-width: 376px) and (max-width: 480px) {
    .text-center.mb-5,
    .text-center.mb-5.mb-lg-6 {
        margin-bottom: 1.75rem !important;
        padding: 0 0.75rem !important;
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    .text-center.mb-5,
    .text-center.mb-5.mb-lg-6 {
        margin-bottom: 2rem !important;
        padding: 0 1rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .text-center.mb-5,
    .text-center.mb-5.mb-lg-6 {
        margin-bottom: 2.5rem !important;
        padding: 0 1.5rem !important;
    }
}

@media (min-width: 992px) {
    .text-center.mb-5,
    .text-center.mb-5.mb-lg-6 {
        margin-bottom: 3rem !important;
        padding: 0 2rem !important;
    }
}

/* ========================================
   13. EXTRA SMALL MOBILE (320px - 375px)
   ======================================== */

@media (max-width: 375px) {
    h1, .h1 {
        font-size: clamp(1.5rem, 7vw, 1.875rem) !important;
        margin-bottom: 1rem !important;
        line-height: 1.2 !important;
    }
    
    h2, .h2,
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .why-moneypex-heading,
    .features-carousel-heading {
        font-size: clamp(1.375rem, 6.5vw, 1.75rem) !important;
        margin-bottom: 1rem !important;
        padding: 0 0.5rem !important;
        line-height: 1.3 !important;
    }
    
    h3, .h3 {
        font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
        margin-bottom: 0.75rem !important;
    }
    
    .section-subtitle,
    .section-description,
    .why-moneypex-description,
    .products-section-subtitle,
    .features-carousel-subtitle {
        font-size: clamp(0.9375rem, 3.5vw, 1.0625rem) !important;
        margin-bottom: 1.25rem !important;
        padding: 0 0.75rem !important;
        line-height: 1.65 !important;
    }
    
    .premium-underline::after {
        height: 12px !important;
        bottom: -6px !important;
        transform: translateY(0) !important;
    }
    
    .text-center.mb-5 {
        margin-bottom: 1.5rem !important;
    }
}

/* ========================================
   14. SMALL MOBILE (376px - 480px)
   ======================================== */

@media (min-width: 376px) and (max-width: 480px) {
    h1, .h1 {
        font-size: clamp(1.625rem, 7.5vw, 2rem) !important;
        margin-bottom: 1.125rem !important;
    }
    
    h2, .h2,
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .why-moneypex-heading,
    .features-carousel-heading {
        font-size: clamp(1.5rem, 7vw, 1.875rem) !important;
        margin-bottom: 1.125rem !important;
        padding: 0 0.625rem !important;
    }
    
    h3, .h3 {
        font-size: clamp(1.3125rem, 5.5vw, 1.625rem) !important;
        margin-bottom: 0.875rem !important;
    }
    
    .section-subtitle,
    .section-description,
    .why-moneypex-description,
    .products-section-subtitle,
    .features-carousel-subtitle {
        font-size: clamp(0.96875rem, 3.8vw, 1.09375rem) !important;
        margin-bottom: 1.375rem !important;
        padding: 0 0.875rem !important;
    }
    
    .premium-underline::after {
        height: 13px !important;
        bottom: -7px !important;
    }
}

/* ========================================
   15. MOBILE (481px - 767px)
   ======================================== */

@media (min-width: 481px) and (max-width: 767px) {
    h1, .h1 {
        font-size: clamp(1.875rem, 8vw, 2.375rem) !important;
        margin-bottom: 1.25rem !important;
    }
    
    h2, .h2,
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .why-moneypex-heading,
    .features-carousel-heading {
        font-size: clamp(1.625rem, 7vw, 2.125rem) !important;
        margin-bottom: 1.25rem !important;
        padding: 0 0.75rem !important;
        line-height: 1.3 !important;
    }
    
    h3, .h3 {
        font-size: clamp(1.375rem, 5vw, 1.6875rem) !important;
        margin-bottom: 0.875rem !important;
    }
    
    .section-subtitle,
    .section-description,
    .why-moneypex-description,
    .products-section-subtitle,
    .features-carousel-subtitle {
        font-size: clamp(1rem, 4vw, 1.125rem) !important;
        margin-bottom: 1.5rem !important;
        padding: 0 1rem !important;
        line-height: 1.7 !important;
    }
    
    .premium-underline::after {
        height: 14px !important;
        bottom: -8px !important;
        transform: translateY(1px) !important;
    }
    
    .text-center.mb-5 {
        margin-bottom: 2rem !important;
    }
}

/* ========================================
   16. TABLET PORTRAIT (768px - 991px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    h1, .h1 {
        font-size: clamp(2rem, 4.5vw, 2.625rem) !important;
        margin-bottom: 1.375rem !important;
    }
    
    h2, .h2,
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .why-moneypex-heading,
    .features-carousel-heading {
        font-size: clamp(1.875rem, 4.2vw, 2.375rem) !important;
        margin-bottom: 1.375rem !important;
        padding: 0 1rem !important;
    }
    
    h3, .h3 {
        font-size: clamp(1.5rem, 3.2vw, 1.875rem) !important;
        margin-bottom: 1rem !important;
    }
    
    .section-subtitle,
    .section-description,
    .why-moneypex-description,
    .products-section-subtitle,
    .features-carousel-subtitle {
        font-size: clamp(1.0625rem, 2.2vw, 1.1875rem) !important;
        margin-bottom: 1.75rem !important;
        padding: 0 1.5rem !important;
    }
    
    .premium-underline::after {
        height: 15px !important;
        bottom: -9px !important;
    }
}

/* ========================================
   17. TABLET LANDSCAPE / SMALL DESKTOP (992px - 1199px)
   ======================================== */

@media (min-width: 992px) and (max-width: 1199px) {
    h1, .h1 {
        font-size: clamp(2.25rem, 4.2vw, 3rem) !important;
        margin-bottom: 1.5rem !important;
    }
    
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .features-carousel-heading {
        font-size: clamp(2rem, 3.8vw, 2.5rem) !important;
        margin-bottom: 1.5rem !important;
    }
    
    .why-moneypex-heading {
        font-size: clamp(2rem, 4vw, 2.625rem) !important;
        margin-bottom: 1.5rem !important;
    }
    
    h2, .h2 {
        font-size: clamp(1.875rem, 3.5vw, 2.25rem) !important;
    }
    
    h3, .h3 {
        font-size: clamp(1.625rem, 2.8vw, 1.9375rem) !important;
    }
    
    .section-subtitle,
    .section-description,
    .why-moneypex-description,
    .products-section-subtitle,
    .features-carousel-subtitle {
        font-size: clamp(1.0625rem, 1.8vw, 1.21875rem) !important;
    }
}

/* ========================================
   18. DESKTOP (1200px - 1399px)
   ======================================== */

@media (min-width: 1200px) and (max-width: 1399px) {
    h1, .h1 {
        font-size: clamp(2.5rem, 4.5vw, 3.25rem) !important;
    }
    
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .features-carousel-heading {
        font-size: clamp(2.25rem, 3.8vw, 2.625rem) !important;
    }
    
    .why-moneypex-heading {
        font-size: clamp(2.25rem, 4.2vw, 2.75rem) !important;
    }
    
    h2, .h2 {
        font-size: clamp(2rem, 3.5vw, 2.375rem) !important;
    }
    
    h3, .h3 {
        font-size: clamp(1.75rem, 3vw, 2rem) !important;
    }
}

/* ========================================
   19. LARGE DESKTOP (1400px - 1599px)
   ======================================== */

@media (min-width: 1400px) and (max-width: 1599px) {
    h1, .h1 {
        font-size: clamp(2.75rem, 4vw, 3.375rem) !important;
    }
    
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .features-carousel-heading {
        font-size: clamp(2.5rem, 3.5vw, 2.6875rem) !important;
    }
    
    .why-moneypex-heading {
        font-size: clamp(2.5rem, 3.8vw, 2.8125rem) !important;
    }
    
    h2, .h2 {
        font-size: clamp(2.125rem, 3.2vw, 2.4375rem) !important;
    }
    
    h3, .h3 {
        font-size: clamp(1.875rem, 2.8vw, 2.0625rem) !important;
    }
}

/* ========================================
   20. EXTRA LARGE DESKTOP (1600px+)
   ======================================== */

@media (min-width: 1600px) {
    h1, .h1 {
        font-size: clamp(3rem, 3.5vw, 3.5rem) !important;
    }
    
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .features-carousel-heading {
        font-size: clamp(2.625rem, 3.2vw, 2.75rem) !important;
    }
    
    .why-moneypex-heading {
        font-size: clamp(2.625rem, 3.5vw, 2.875rem) !important;
    }
    
    h2, .h2 {
        font-size: clamp(2.25rem, 3vw, 2.5rem) !important;
    }
    
    h3, .h3 {
        font-size: clamp(2rem, 2.5vw, 2.125rem) !important;
    }
    
    .section-subtitle,
    .section-description,
    .why-moneypex-description,
    .products-section-subtitle,
    .features-carousel-subtitle {
        font-size: clamp(1.125rem, 1.5vw, 1.25rem) !important;
    }
}

/* ========================================
   17. HEADING ANIMATIONS - SMOOTH
   ======================================== */

.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading {
    animation: fadeInUpHeading 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes fadeInUpHeading {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   18. PREMIUM UNDERLINE VARIATIONS
   ======================================== */

/* Different contexts for premium underline */
.trusted-by-heading .premium-underline,
.why-moneypex-heading .premium-underline,
.products-section-heading .premium-underline,
.features-carousel-heading .premium-underline,
.empowering-businesses-section h2 .premium-underline {
    color: #1E5CAA !important;
    font-weight: 800 !important;
}

/* ========================================
   19. TEXT ALIGNMENT & DISPLAY
   ======================================== */

.section-title,
.section-heading,
.products-section-heading,
.trusted-by-heading,
.why-moneypex-heading,
.features-carousel-heading {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================
   20. FINAL POLISH - SHADOWS & EFFECTS
   ======================================== */

/* Subtle text shadow for depth (optional, can be removed if too much) */
@media (min-width: 992px) {
    h1, .h1,
    .section-title,
    .section-heading,
    .products-section-heading,
    .trusted-by-heading,
    .why-moneypex-heading {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    }
}

/* ========================================
   21. ACCESSIBILITY IMPROVEMENTS
   ======================================== */

h1, h2, h3, h4, h5, h6,
.section-title,
.section-heading {
    outline: none !important;
}

h1:focus-visible,
h2:focus-visible,
h3:focus-visible {
    outline: 2px solid #1E5CAA !important;
    outline-offset: 4px !important;
    border-radius: 4px !important;
}



/* ===== responsive-fix.css ===== */
/* ========================================
   RESPONSIVE FIXES - Home Page
   Fix alignment issues and mobile card layouts
   ======================================== */

/* ========================================
   1. WHY MONEPEX CARDS - 2 CARDS PER ROW ON MOBILE
   ======================================== */

/* Desktop: 4 columns */
.why-moneypex-cards {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 2rem !important;
    margin-top: 2rem !important;
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 1rem !important;
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.75rem !important;
        max-width: 900px !important;
    }
}

/* Mobile: 2 columns (2 cards per row) */
@media (max-width: 767px) {
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        max-width: 100% !important;
        padding: 0 0.5rem !important;
    }
    
    .why-card {
        padding: 1.5rem 1rem !important;
        min-height: auto !important;
    }
    
    .why-card-icon {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 1rem !important;
    }
    
    .why-card-icon svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
    
    .why-card-title {
        font-size: clamp(0.875rem, 3vw, 1rem) !important;
        line-height: 1.3 !important;
    }
}

/* Extra small mobile: Still 2 columns but smaller gap */
@media (max-width: 480px) {
    .why-moneypex-cards {
        gap: 0.75rem !important;
        padding: 0 0.25rem !important;
    }
    
    .why-card {
        padding: 1.25rem 0.75rem !important;
    }
}

/* ========================================
   2. HERO SECTION ALIGNMENT FIXES
   ======================================== */

@media (max-width: 767px) {
    .home-hero-section .hero-row-wrapper {
        align-items: center !important;
        text-align: center !important;
    }
    
    .home-hero-section .hero-content-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    
    .modern-hero-heading {
        text-align: center !important;
    }
    
    .modern-hero-text {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .hero-button-animate {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
    
    .hero-button-animate .btn-premium {
        width: 100% !important;
        max-width: 300px !important;
    }
}

/* ========================================
   3. PRODUCTS SECTION ALIGNMENT
   ======================================== */

@media (max-width: 991.98px) {
    .mp-products-section .row {
        flex-direction: column !important;
    }
    
    .mp-products-section .col-lg-7,
    .mp-products-section .col-xl-5,
    .mp-products-section .col-md-12 {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .mp-products-list {
        margin-bottom: 2rem !important;
    }
}

@media (max-width: 767px) {
    .mp-products-section {
        padding: 2rem 1rem !important;
    }
    
    .products-section-heading {
        text-align: center !important;
        padding: 0 0.5rem !important;
    }
    
    .products-section-subtitle {
        text-align: center !important;
        padding: 0 0.5rem !important;
    }
}

/* ========================================
   4. CONTAINER ALIGNMENT FIXES
   ======================================== */

.container-fluid.container-md {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 768px) {
    .container-fluid.container-md {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 992px) {
    .container-fluid.container-md {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ========================================
   5. SECTION PADDING & SPACING FIXES
   ======================================== */

.why-moneypex-section {
    padding: 4rem 1rem !important;
}

@media (min-width: 768px) {
    .why-moneypex-section {
        padding: 5rem 2rem !important;
    }
}

@media (min-width: 992px) {
    .why-moneypex-section {
        padding: 6rem 3rem !important;
    }
}

/* ========================================
   6. TEXT ALIGNMENT FIXES
   ======================================== */

.why-moneypex-section .text-center {
    text-align: center !important;
    margin: 0 auto !important;
}

.why-moneypex-heading {
    text-align: center !important;
    margin: 0 auto 1rem !important;
}

.why-moneypex-description {
    text-align: center !important;
    margin: 0 auto 1rem !important;
}

.why-moneypex-cta {
    text-align: center !important;
    margin: 0 auto !important;
}

/* ========================================
   7. CARD ALIGNMENT & SPACING
   ======================================== */

.why-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
}

.why-card-title {
    text-align: center !important;
    margin: 0 !important;
    width: 100% !important;
}

/* ========================================
   8. TRUSTED BY SECTION ALIGNMENT
   ======================================== */

@media (max-width: 767px) {
    .trusted-by-section {
        padding: 2rem 1rem !important;
    }
    
    .trusted-by-heading {
        text-align: center !important;
        padding: 0 0.5rem !important;
    }
}

/* ========================================
   9. PRODUCTS LIST ALIGNMENT
   ======================================== */

@media (max-width: 767px) {
    .mp-products-list {
        width: 100% !important;
        padding: 0 !important;
    }
    
    .product-item {
        width: 100% !important;
        margin-bottom: 0.75rem !important;
    }
    
    .product-item .d-flex {
        align-items: center !important;
        justify-content: flex-start !important;
    }
}

/* ========================================
   10. GENERAL RESPONSIVE UTILITIES
   ======================================== */

/* Ensure proper text alignment on mobile */
@media (max-width: 767px) {
    .text-center {
        text-align: center !important;
    }
    
    .text-left {
        text-align: left !important;
    }
    
    .text-right {
        text-align: right !important;
    }
}

/* Fix container max-widths */
@media (min-width: 1200px) {
    .container-fluid.container-md {
        max-width: 1400px !important;
    }
}

/* ========================================
   11. FLEXBOX ALIGNMENT FIXES
   ======================================== */

.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
}

.row > * {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

/* ========================================
   12. MOBILE SPECIFIC FIXES
   ======================================== */

@media (max-width: 576px) {
    /* Reduce padding on very small screens */
    .why-moneypex-section {
        padding: 3rem 0.75rem !important;
    }
    
    .why-moneypex-cards {
        gap: 0.5rem !important;
        padding: 0 0.25rem !important;
    }
    
    .why-card {
        padding: 1rem 0.5rem !important;
    }
    
    /* Ensure cards don't overflow */
    .why-card-title {
        font-size: 0.875rem !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }
}

/* ========================================
   13. TABLET SPECIFIC FIXES
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {
    .why-moneypex-cards {
        gap: 1.5rem !important;
        padding: 0 1rem !important;
    }
    
    .why-card {
        padding: 2rem 1.5rem !important;
    }
}

/* ========================================
   14. OVERRIDE CONFLICTING STYLES
   ======================================== */

/* Override any 1-column mobile rules */
@media (max-width: 767px) {
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr) !important; /* Force 2 columns */
    }
}

/* Ensure proper alignment */
.why-moneypex-section .container-fluid {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

.why-moneypex-section .text-center {
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================
   15. MODAL BACKDROP FIX - MOBILE
   Fix black background when popup is open on mobile
   ======================================== */

/* Modal backdrop - Make it lighter and more transparent on mobile */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Semi-transparent instead of black */
    backdrop-filter: blur(2px) !important; /* Add subtle blur effect */
}

/* Mobile specific - Even lighter backdrop */
@media (max-width: 767px) {
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.4) !important; /* Lighter on mobile */
        backdrop-filter: blur(3px) !important;
    }
    
    /* Ensure backdrop doesn't appear too dark */
    .modal-backdrop.show {
        opacity: 0.4 !important; /* Lighter opacity */
    }
}

/* Extra small mobile - Even lighter */
@media (max-width: 480px) {
    .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.35) !important; /* Even lighter on small screens */
    }
    
    .modal-backdrop.show {
        opacity: 0.35 !important;
    }
}

/* Fix for all modals */
.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
}

/* Ensure modal content is visible above backdrop */
.modal-dialog,
.modal-content {
    z-index: 1055 !important;
    position: relative !important;
}

/* Fix for product modal specifically */
#mpProductsModal .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 767px) {
    #mpProductsModal .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.35) !important;
    }
}

/* Cookie consent modal backdrop */
#cookieConsentModal .modal-backdrop {
    background-color: rgba(0, 0, 0, 0.4) !important;
}

@media (max-width: 767px) {
    #cookieConsentModal .modal-backdrop {
        background-color: rgba(0, 0, 0, 0.35) !important;
    }
}

/* ========================================
   16. SELECT-APP PAGE CARD ALIGNMENT FIXES
   Fix card alignment issues on all screen sizes
   ======================================== */

/* Select App Section Container */
.select-app-section {
    padding: 4rem 1rem !important;
}

@media (min-width: 768px) {
    .select-app-section {
        padding: 5rem 2rem !important;
    }
}

@media (min-width: 992px) {
    .select-app-section {
        padding: 6rem 3rem !important;
    }
}

/* App Selection Container */
#app-selection {
    width: 100% !important;
    max-width: 100% !important;
}

#app-selection .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    justify-content: center !important;
    align-items: stretch !important;
}

#app-selection .row > [class*="col-"] {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    flex-direction: column !important;
}

/* App Selection Cards - Ensure Equal Height */
.app-selection-card,
#app-selection .modern-card {
    height: 100% !important;
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 2rem 1.5rem !important;
}

/* Card Content Alignment */
.app-selection-card .app-card-icon-wrapper,
#app-selection .modern-card .app-card-icon-wrapper {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-bottom: 1.5rem !important;
    flex-shrink: 0 !important;
}

.app-selection-card .modern-card-title,
#app-selection .modern-card .modern-card-title {
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 1rem 0 !important;
    flex-shrink: 0 !important;
}

.app-selection-card .modern-card-text,
#app-selection .modern-card .modern-card-text {
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 1.5rem 0 !important;
    flex-grow: 1 !important;
    display: flex !important;
    align-items: flex-start !important;
}

.app-selection-card .btn-premium,
#app-selection .modern-card .btn-premium {
    width: 100% !important;
    margin-top: auto !important;
    flex-shrink: 0 !important;
}

/* Desktop: 4 columns */
@media (min-width: 992px) {
    #app-selection .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    
    .app-selection-card {
        padding: 2.5rem 2rem !important;
    }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
    #app-selection .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .app-selection-card {
        padding: 2rem 1.5rem !important;
    }
}

/* Mobile: 2 columns */
@media (max-width: 767px) {
    #app-selection .col-md-6,
    #app-selection .col-lg-3 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    
    .app-selection-card {
        padding: 1.5rem 1rem !important;
    }
    
    .app-selection-card .app-card-icon-wrapper {
        margin-bottom: 1rem !important;
    }
    
    .app-selection-card .modern-card-title {
        font-size: 1rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .app-selection-card .modern-card-text {
        font-size: 0.875rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Extra Small Mobile: 1 column */
@media (max-width: 576px) {
    #app-selection .col-md-6,
    #app-selection .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    .app-selection-card {
        padding: 1.5rem 1rem !important;
    }
}

/* Fix inconsistent margins */
.app-selection-card .modern-card-title.mt-4 {
    margin-top: 0 !important;
}

.app-selection-card .modern-card-title.mb-3 {
    margin-bottom: 1rem !important;
}

.app-selection-card .modern-card-text.mb-4 {
    margin-bottom: 1.5rem !important;
}

/* Ensure all cards have same structure */
.app-selection-card > * {
    width: 100% !important;
}

/* Icon wrapper consistency */
.app-card-icon {
    width: 4rem !important;
    height: 4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 1rem !important;
}

.app-icon-svg {
    width: 2rem !important;
    height: 2rem !important;
}

/* Button alignment */
.app-selection-card .btn-premium {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Container alignment */
.select-app-section .container-fluid.container-md {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 768px) {
    .select-app-section .container-fluid.container-md {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

@media (min-width: 992px) {
    .select-app-section .container-fluid.container-md {
        padding-left: 3rem !important;
        padding-right: 3rem !important;
    }
}

/* ========================================
   17. INDUSTRIES WE SERVE CAROUSEL FIXES
   Fix carousel functionality and mobile view
   ======================================== */

/* Carousel Container */
.features-carousel-section {
    padding: 4rem 1rem !important;
    overflow: hidden !important;
}

@media (min-width: 768px) {
    .features-carousel-section {
        padding: 5rem 2rem !important;
    }
}

@media (min-width: 992px) {
    .features-carousel-section {
        padding: 6rem 3rem !important;
    }
}

.features-carousel-section .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 768px) {
    .features-carousel-section .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* Carousel Wrapper */
.products-carousel-wrapper {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-top: 2rem !important;
}

.products-carousel {
    width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.products-carousel-track {
    display: flex !important;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
    width: 100% !important;
}

/* Card Base Styles */
.products-carousel-track .product-card {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    padding: 0 0.75rem !important;
}

/* Desktop: 4 columns */
@media (min-width: 1280px) {
    .products-carousel-track .product-card {
        flex: 0 0 25% !important;
        padding: 0 0.75rem !important;
    }
}

/* Tablet Large: 3 columns */
@media (min-width: 1024px) and (max-width: 1279px) {
    .products-carousel-track .product-card {
        flex: 0 0 33.333% !important;
        padding: 0 0.75rem !important;
    }
}

/* Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .products-carousel-track .product-card {
        flex: 0 0 50% !important;
        padding: 0 0.5rem !important;
    }
}

/* Mobile: 1 column */
@media (max-width: 767px) {
    .products-carousel-track .product-card {
        flex: 0 0 100% !important;
        padding: 0 0.5rem !important;
    }
    
    .features-carousel-section {
        padding: 3rem 0.75rem !important;
    }
    
    .features-carousel-section .container {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* Industry Card Styles */
.industry-card {
    height: 100% !important;
    margin-bottom: 0 !important;
}

.industry-card-inner {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 2rem 1.5rem !important;
}

@media (max-width: 767px) {
    .industry-card-inner {
        padding: 1.5rem 1.25rem !important;
    }
}

/* Industry Icon Wrapper */
.industry-icon-wrapper {
    width: 3.5rem !important;
    height: 3.5rem !important;
    margin-bottom: 1.25rem !important;
}

@media (max-width: 767px) {
    .industry-icon-wrapper {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 1rem !important;
    }
    
    .industry-icon-wrapper svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

/* Industry Card Title */
.industry-card-title {
    font-size: clamp(1.125rem, 2vw, 1.375rem) !important;
    margin-bottom: 0.875rem !important;
    line-height: 1.3 !important;
}

@media (max-width: 767px) {
    .industry-card-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }
}

/* Industry Card Description */
.industry-card-description {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    flex: 1 !important;
}

@media (max-width: 767px) {
    .industry-card-description {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
        margin-bottom: 1.25rem !important;
    }
}

/* Industry Card Link */
.industry-card-link {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    margin-top: auto !important;
}

@media (max-width: 767px) {
    .industry-card-link {
        font-size: 0.875rem !important;
    }
}

/* Pagination Dots */
.carousel-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 2rem !important;
    flex-wrap: wrap !important;
}

@media (max-width: 767px) {
    .carousel-pagination {
        margin-top: 1.5rem !important;
        gap: 0.375rem !important;
    }
}

.pagination-dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    border-radius: 9999px !important;
    background-color: #d1d5db !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    flex-shrink: 0 !important;
}

.pagination-dot.active {
    width: 2rem !important;
    background-color: #1E5CAA !important;
}

@media (max-width: 767px) {
    .pagination-dot.active {
        width: 1.5rem !important;
    }
}

.pagination-dot:hover {
    background-color: #9ca3af !important;
}

.pagination-dot.active:hover {
    background-color: #174a85 !important;
}

/* Heading Styles */
.features-carousel-heading {
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
}

.features-carousel-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    color: #64748b !important;
    text-align: center !important;
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {
    .features-carousel-heading {
        font-size: 1.75rem !important;
        margin-bottom: 0.75rem !important;
    }
    
    .features-carousel-subtitle {
        font-size: 1rem !important;
    }
}



/* ===== hero-button-fix.css ===== */
/* ========================================
   HERO BUTTON RESPONSIVE FIX
   Fix button alignment and sizing on all screens
   ======================================== */

/* Hero Button Container */
.hero-button-animate {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 1.5rem !important;
}

/* Base Button Styles */
.hero-button-animate .btn-premium,
.hero-button-animate .btn-premium-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    min-width: fit-content !important;
}

.hero-button-animate .btn-premium span,
.hero-button-animate .btn-premium-outline span {
    display: inline-block !important;
    white-space: nowrap !important;
}

.hero-button-animate .btn-premium svg,
.hero-button-animate .btn-premium-outline svg {
    flex-shrink: 0 !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
}

/* Desktop (992px+) */
@media (min-width: 992px) {
    .hero-button-animate {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
    }
    
    .hero-button-animate .btn-premium {
        padding: 0.875rem 1.75rem !important;
        font-size: 1rem !important;
    }
    
    .hero-button-animate .btn-premium-outline {
        padding: 0.8rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-button-animate {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
    }
    
    .hero-button-animate .btn-premium {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
    
    .hero-button-animate .btn-premium-outline {
        padding: 0.7rem 1.15rem !important;
        font-size: 0.9375rem !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    /* Center the entire hero content on mobile */
    .modern-hero-section .hero-content-wrapper,
    .home-hero-section .hero-content-wrapper,
    .hero-section .hero-content-wrapper {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }
    
    /* Center hero heading */
    .modern-hero-heading,
    .hero-heading-animate {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Center hero text/description */
    .modern-hero-text,
    .hero-text-animate {
        text-align: center !important;
        width: 100% !important;
    }
    
    /* Center button container */
    .hero-button-animate {
        justify-content: center !important;
        flex-direction: column !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
        width: 100% !important;
        align-items: center !important;
    }
    
    .hero-button-animate .btn-premium {
        flex: 0 0 auto !important;
        min-width: 200px !important;
        max-width: 90% !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
        margin: 0 auto !important;
    }
    
    .hero-button-animate .btn-premium-outline {
        flex: 0 0 auto !important;
        min-width: 150px !important;
        max-width: 90% !important;
        padding: 0.8rem 1.25rem !important;
        font-size: 0.9375rem !important;
        margin: 0 auto !important;
    }
    
    /* Remove any left margin that might cause misalignment */
    .hero-button-animate .btn-premium.me-3,
    .hero-button-animate .btn-premium-outline.me-3,
    .hero-button-animate > a {
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Extra Small Mobile (< 480px) */
@media (max-width: 479.98px) {
    .hero-button-animate {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    .hero-button-animate .btn-premium,
    .hero-button-animate .btn-premium-outline {
        width: 90% !important;
        max-width: 280px !important;
        min-width: unset !important;
        justify-content: center !important;
        margin: 0 auto !important;
    }
    
    .hero-button-animate .btn-premium {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
    
    .hero-button-animate .btn-premium-outline {
        padding: 0.8rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
}

/* Very Small Mobile (< 375px) */
@media (max-width: 374.98px) {
    .hero-button-animate .btn-premium,
    .hero-button-animate .btn-premium-outline {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* Fix for btn-premium-outline specific issues */
.btn-premium-outline {
    white-space: nowrap !important;
    min-width: fit-content !important;
    padding: 0.75rem 1.25rem !important;
}

.btn-premium-outline span {
    white-space: nowrap !important;
}

/* Ensure me-3 margin doesn't cause issues on small screens */
@media (max-width: 767.98px) {
    .hero-button-animate .btn-premium.me-3 {
        margin-right: 0 !important;
    }
}

@media (max-width: 479.98px) {
    .hero-button-animate .btn-premium.me-3,
    .hero-button-animate .btn-premium-outline.me-3 {
        margin-right: 0 !important;
    }
}


/* ===== prevent-disappearing-fix.css ===== */
/* ========================================
   PREVENT ELEMENTS FROM DISAPPEARING
   Simplified version - only targets animated elements
   ======================================== */

/* Animation fill mode for fade-in elements */
.fade-in-up,
.fade-in,
.fade-in-down,
.slide-in-left,
.slide-in-right,
.scale-in,
.fade-in-up-delay {
    animation-fill-mode: forwards !important;
}

/* After page loads, ensure animated elements are visible */
body.loaded .fade-in-up,
body.loaded .fade-in,
body.loaded .fade-in-down,
body.loaded .slide-in-left,
body.loaded .slide-in-right,
body.loaded .scale-in,
body.loaded .fade-in-up-delay {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Hero section should always be visible immediately */
.modern-hero-section,
.home-hero-section,
.hero-section {
    opacity: 1;
    visibility: visible;
}

/* Modals - let Bootstrap handle visibility */
.modal,
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.modal-backdrop {
    opacity: unset;
    visibility: unset;
    transform: unset;
}

/* Modal when shown */
.modal.show {
    opacity: 1;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Keyframe animations end with visible state */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


/* ===== navbar-dropdown-fix.css ===== */
/* ========================================
   NAVBAR DROPDOWN FIX
   Fix broken navbar dropdowns (Features, Resources, Company)
   ======================================== */

/* Ensure dropdown wrapper has dropdown class */
.nav-dropdown-wrapper.dropdown {
    position: relative;
}

/* Ensure modern-dropdown works with Bootstrap dropdown-menu */
.modern-dropdown.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 280px;
    padding: 0.75rem 0;
    margin: 0.5rem 0 0;
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.75rem;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    /* Instant close, smooth open */
    transition: opacity 0.1s ease, transform 0.1s ease, visibility 0s linear 0.1s;
}

/* Show dropdown when Bootstrap adds .show class */
.modern-dropdown.dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    /* Smooth open transition */
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

/* Ensure dropdown is visible on hover (desktop) - stays open when hovering dropdown */
@media (min-width: 992px) {
    .nav-dropdown-wrapper.dropdown:hover .modern-dropdown.dropdown-menu,
    .nav-dropdown-wrapper.dropdown .modern-dropdown.dropdown-menu:hover,
    .nav-dropdown-wrapper.dropdown .modern-dropdown.dropdown-menu.show {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
        pointer-events: auto !important;
    }
    
    /* Keep dropdown open when hovering over it */
    .modern-dropdown.dropdown-menu:hover {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }
    
    /* Instant close when not hovering wrapper or dropdown */
    .nav-dropdown-wrapper.dropdown:not(:hover):not(:has(.modern-dropdown:hover)) .modern-dropdown.dropdown-menu:not(.show) {
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-10px) !important;
        transition: opacity 0s ease, transform 0s ease, visibility 0s linear 0s !important;
        pointer-events: none !important;
    }
}

/* Fix for Features dropdown - ensure it displays correctly */
#featuresDropdown + .modern-dropdown.dropdown-menu,
#resourcesDropdown + .modern-dropdown.dropdown-menu,
#companyDropdown + .modern-dropdown.dropdown-menu {
    display: none;
}

#featuresDropdown[aria-expanded="true"] + .modern-dropdown.dropdown-menu,
#resourcesDropdown[aria-expanded="true"] + .modern-dropdown.dropdown-menu,
#companyDropdown[aria-expanded="true"] + .modern-dropdown.dropdown-menu,
.modern-dropdown.dropdown-menu.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Ensure dropdown items are properly styled */
.modern-dropdown.dropdown-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.modern-dropdown.dropdown-menu .dropdown-item-modern {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.25rem;
    color: #1e293b;
    text-decoration: none;
    transition: all 0.15s ease;
    border: none !important;
    border-right: none !important;
    border-left: none !important;
    background: transparent;
}

/* Remove all borders from mega-menu items and list items */
.modern-dropdown.mega-menu .dropdown-item-modern,
.modern-dropdown.mega-menu > .p-3 > ul > li,
.modern-dropdown.mega-menu > .p-3 > ul > li > a,
.modern-dropdown.mega-menu li,
.modern-dropdown.mega-menu li a {
    border: none !important;
    border-right: none !important;
    border-left: none !important;
}

/* Dropdown item hover - professional blue background */
.modern-dropdown.dropdown-menu .dropdown-item-modern:hover {
    background: #f1f5f9 !important;
    color: #1E5CAA !important;
    transform: none !important;
}

/* Fix dropdown icon and content alignment */
.modern-dropdown.dropdown-menu .dropdown-icon {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin-right: 0.75rem;
    flex-shrink: 0;
}

/* Ensure dropdown icon NEVER changes on hover */
.modern-dropdown.dropdown-menu .dropdown-item-modern:hover .dropdown-icon,
.modern-dropdown.dropdown-menu .dropdown-icon:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.modern-dropdown.dropdown-menu .dropdown-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.modern-dropdown.dropdown-menu .dropdown-title {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
    display: block;
}

.modern-dropdown.dropdown-menu .dropdown-desc {
    font-size: 0.8125rem;
    color: #64748b;
    line-height: 1.4;
    display: block;
}

/* Company dropdown - right aligned */
.modern-dropdown.dropdown-menu.text-start[style*="right: 0"] {
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) translateY(-10px) !important;
}

.modern-dropdown.dropdown-menu.text-start[style*="right: 0"].show {
    transform: translateX(0) translateY(0) !important;
}

/* Ensure dropdown arrow rotates on open */
.nav-dropdown-wrapper.dropdown .nav-link-modern[aria-expanded="true"] .dropdown-arrow {
    transform: rotate(180deg);
}

/* Fix z-index to ensure dropdowns appear above other content */
.modern-dropdown.dropdown-menu {
    z-index: 1050 !important;
}

/* Instant close when dropdown loses show class */
.modern-dropdown.dropdown-menu:not(.show) {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-10px) !important;
    transition: opacity 0s ease, transform 0s ease, visibility 0s linear 0s !important;
    pointer-events: none !important;
}

/* Mobile fixes */
@media (max-width: 991.98px) {
    .modern-dropdown.dropdown-menu {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0;
        margin: 0;
    }
    
    .modern-dropdown.dropdown-menu.show {
        display: block !important;
    }
    
    .modern-dropdown.dropdown-menu:not(.show) {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: none !important;
    }
}



/* ===== navbar-safari-fix.css ===== */
/* ========================================
   NAVBAR SAFARI / iOS WebKit FIXES
   iOS 16+ transparency bug fix + blur preservation on Android/Desktop
   ======================================== */

/* NAVBAR DEFAULT: keep blur on capable browsers (Android, desktop, older iOS)
   - position: fixed must be preserved
   - translucent background with backdrop-filter for modern browsers
   - keep z-index intact and high
*/
.modern-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1100; /* base z-index; may be elevated by JS */
    background-color: rgba(255, 255, 255, 0.72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    display: block !important;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    /* Keep transitions for color changes, but avoid transform/opacity transitions */
    transition: background-color 0.25s ease;
}

/* SCROLLED STATE: allows blur effect on supporting browsers
   - Still translucent with blur for Android/desktop
   - on iOS, will be overridden by @supports rule below
*/
.modern-navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* TRANSPARENT STATE: used for hero sections
   - on iOS, will be overridden by @supports rule below
*/
.modern-navbar.mp-nav-transparent {
    background: rgba(255, 255, 255, 0.6);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

/* HELPER STATES: navigation visibility toggles */
.modern-navbar.nav-visible {
    visibility: visible;
}

.modern-navbar.nav-hidden {
    visibility: hidden;
}

/* ========================================
   iOS 16+ SPECIFIC OVERRIDE (@supports)
   ========================================
   iOS WebKit (16+) has a compositing/paint bug:
   - Fixed elements with rgba background + backdrop-filter can become transparent
   - When re-composited (scroll, JS class toggle), the background doesn't repaint
   - Workaround: force fully opaque solid background on iOS, disable blur
   
   Detection: use @supports (-webkit-overflow-scrolling: touch)
   - This is a safe, widely-supported feature that iOS Safari/WebKit exposes
   - Targets all iOS WebKit browsers (Safari, Chrome, Firefox all use WebKit on iOS)
*/
@supports (-webkit-overflow-scrolling: touch) {
    .modern-navbar,
    .modern-navbar.scrolled,
    .modern-navbar.mp-nav-transparent {
        /*
          FORCE SOLID WHITE: prevents WebKit paint bug on iOS 16+
          - Never use rgba() on iOS fixed elements (causes transparency)
          - Never use backdrop-filter on iOS (contributes to compositing issue)
          - Force 100% opaque background so WebKit always repaints correctly
        */
        background: #ffffff !important;
        background-color: #ffffff !important;
        
        /* Disable blur on iOS (not safe with position:fixed on iOS WebKit) */
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        
        /* Prevent JS or animations from breaking the solid background */
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
        z-index: 9999 !important;
        
        /* Prevent mask tricks that can cause repaint issues */
        -webkit-mask-image: none !important;
        mask-image: none !important;
        
        /* Keep navbar interactive */
        pointer-events: auto !important;
    }

    /* Hidden state: use display:none to avoid opacity/transform animations on iOS */
    .modern-navbar.hidden {
        display: none !important;
        pointer-events: none !important;
    }
}

/*
  SUMMARY:
  - Non-iOS browsers: see translucent navbar with blur (rgba + backdrop-filter)
  - iOS browsers: see solid white navbar (no blur, no transparency)
  - All browsers: navbar stays fixed, z-index preserved, no unintended animations
  - JS fallback lock (in app.js) ensures no script can reintroduce transparency on iOS
*/



/* ===== button-fix.css ===== */
/* ========================================
   BUTTON FIX - Arrow Alignment & Text Color
   Fixes arrow alignment and ensures white text on all buttons
   ======================================== */

/* ========================================
   1. FIX ARROW ALIGNMENT
   ======================================== */

/* Ensure all btn-premium buttons use flexbox for proper alignment */
.btn-premium,
.btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    vertical-align: middle !important;
}

/* Fix SVG arrow alignment - ensure it's vertically centered */
.btn-premium svg,
.btn-primary svg {
    display: inline-block !important;
    vertical-align: middle !important;
    align-self: center !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}

/* Fix span text alignment */
.btn-premium span,
.btn-primary span {
    display: inline-block !important;
    vertical-align: middle !important;
    line-height: 1.5 !important;
}

/* ========================================
   2. FIX TEXT COLOR - Ensure White Text
   ======================================== */

/* Override any dark text colors - buttons should have white text */
.btn-premium,
.btn-primary {
    color: #ffffff !important;
}

/* Button text (span) should be white */
.btn-premium span,
.btn-primary span,
.btn-premium,
.btn-primary {
    color: #ffffff !important;
}

/* Button text on hover - keep white */
.btn-premium:hover span,
.btn-primary:hover span,
.btn-premium:hover,
.btn-primary:hover {
    color: #ffffff !important;
}

/* Button text on active - keep white */
.btn-premium:active span,
.btn-primary:active span,
.btn-premium:active,
.btn-primary:active {
    color: #ffffff !important;
}

/* Button text on focus - keep white */
.btn-premium:focus span,
.btn-primary:focus span,
.btn-premium:focus,
.btn-primary:focus {
    color: #ffffff !important;
}

/* ========================================
   3. FIX SVG ARROW COLOR - Ensure White
   ======================================== */

/* SVG arrows should be white with no background/box */
.btn-premium svg,
.btn-primary svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* SVG arrows on hover - keep white */
.btn-premium:hover svg,
.btn-primary:hover svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* SVG arrows on active - keep white */
.btn-premium:active svg,
.btn-primary:active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* ========================================
   4. NAVBAR BUTTON SPECIFIC FIXES
   ======================================== */

/* Navbar Sign Up button - ensure proper alignment and white text */
.modern-navbar .btn-premium {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    color: #ffffff !important;
}

.modern-navbar .btn-premium span {
    color: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.modern-navbar .btn-premium svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
    align-self: center !important;
    flex-shrink: 0 !important;
}

/* ========================================
   5. HERO BUTTON FIXES
   ======================================== */

/* Hero section buttons - ensure white text and proper alignment */
.hero-button-animate .btn-premium,
.home-hero-section .btn-premium {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    color: #ffffff !important;
}

.hero-button-animate .btn-premium span,
.home-hero-section .btn-premium span {
    color: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.hero-button-animate .btn-premium svg,
.home-hero-section .btn-premium svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
    display: inline-block !important;
    vertical-align: middle !important;
    align-self: center !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* ========================================
   6. MOBILE BUTTON FIXES
   ======================================== */

/* Mobile buttons - ensure alignment and white text */
@media (max-width: 767px) {
    .btn-premium,
    .btn-primary {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        color: #ffffff !important;
    }
    
    .btn-premium span,
    .btn-primary span {
        color: #ffffff !important;
        display: inline-block !important;
        vertical-align: middle !important;
    }
    
    .btn-premium svg,
    .btn-primary svg {
        color: #ffffff !important;
        stroke: #ffffff !important;
        display: inline-block !important;
        vertical-align: middle !important;
        align-self: center !important;
        flex-shrink: 0 !important;
    }
}

/* ========================================
   7. OVERRIDE ANY CONFLICTING STYLES
   ======================================== */

/* Override professional-fix.css dark text */
.btn-premium,
.btn-primary,
.btn-premium span,
.btn-primary span {
    color: #ffffff !important;
}

/* Override any black text colors */
.btn-premium[style*="color: black"],
.btn-premium[style*="color: #000"],
.btn-primary[style*="color: black"],
.btn-primary[style*="color: #000"] {
    color: #ffffff !important;
}

/* Ensure SVG stroke is white, not black */
.btn-premium svg[stroke="black"],
.btn-premium svg[stroke="#000"],
.btn-primary svg[stroke="black"],
.btn-primary svg[stroke="#000"] {
    stroke: #ffffff !important;
}



/* ===== empowering-businesses-fix.css ===== */
/* ========================================
   EMPOWERING BUSINESSES SECTION FIX
   Final comprehensive fix - 3 equal cards in a row
   ======================================== */

/* CRITICAL: Base Grid - Always 3 columns by default */
.empowering-businesses-section .stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    align-items: stretch !important;
    justify-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-auto-flow: row !important;
}

/* Ensure container has proper width */
.empowering-businesses-section .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    width: 100% !important;
}

/* Stat cards - equal height, centered content, white background */
.empowering-businesses-section .stat-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 280px !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    padding: 2.5rem 2rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.3s ease !important;
    grid-column: span 1 !important;
}

/* Card hover effect - DISABLED */
.empowering-businesses-section .stat-card:hover {
    transform: none !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    border-color: #e5e7eb !important;
}

/* Icon sizing and styling - NO BACKGROUND */
.empowering-businesses-section .stat-icon {
    width: 4.5rem !important;
    height: 4.5rem !important;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
    flex-shrink: 0 !important;
}

.empowering-businesses-section .stat-icon svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
    stroke: white !important;
}

/* Content container - centered */
.empowering-businesses-section .stat-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    flex: 1 !important;
}

/* Numbers - large and bold */
.empowering-businesses-section .stat-number {
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 0 0.5rem 0 !important;
    text-align: center !important;
    line-height: 1.2 !important;
    font-family: 'Inter', sans-serif !important;
}

/* Labels - descriptive text */
.empowering-businesses-section .stat-label {
    font-size: 1rem !important;
    color: #6b7280 !important;
    text-align: center !important;
    margin: 0 !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
}

/* Desktop & Large Tablets: Always 3 columns on screens 900px+ */
@media (min-width: 900px) {
    .empowering-businesses-section .stats-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 2rem !important;
    }
    
    .empowering-businesses-section .stat-card {
        min-height: 300px !important;
    }
}

/* Medium Tablets: 2 columns (600px - 899px) */
@media (min-width: 600px) and (max-width: 899px) {
    .empowering-businesses-section .stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    
    .empowering-businesses-section .stat-card {
        min-height: 280px !important;
    }
}

/* Mobile: 1 column (below 600px) */
@media (max-width: 599px) {
    .empowering-businesses-section .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 1.25rem !important;
    }
    
    .empowering-businesses-section .container {
        padding: 0 1rem !important;
    }
    
    .empowering-businesses-section .stat-card {
        min-height: 240px !important;
        padding: 2rem 1.5rem !important;
    }
    
    .empowering-businesses-section .stat-icon {
        width: 4rem !important;
        height: 4rem !important;
        margin-bottom: 1.25rem !important;
    }
    
    .empowering-businesses-section .stat-icon svg {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    
    .empowering-businesses-section .stat-number {
        font-size: 2rem !important;
    }
    
    .empowering-businesses-section .stat-label {
        font-size: 0.9375rem !important;
    }
}

/* Override any conflicting styles */
.empowering-businesses-section .stats-grid * {
    box-sizing: border-box !important;
}

/* Force visibility for all cards */
.empowering-businesses-section .stat-card:nth-child(1),
.empowering-businesses-section .stat-card:nth-child(2),
.empowering-businesses-section .stat-card:nth-child(3) {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Prevent inline styles from hiding cards */
.empowering-businesses-section .stat-card[style*="display: none"],
.empowering-businesses-section .stat-card[style*="visibility: hidden"] {
    display: flex !important;
    visibility: visible !important;
}



/* ===== why-moneypex-visual-fix.css ===== */
/* ========================================
   WHY MONEYPEX SECTION - CLEAN STYLES
   No hover effects, no boxes around icons
   ======================================== */

/* Section Styling */
.why-moneypex-section {
    padding: 5rem 0;
    background: #ffffff;
    position: relative;
}

/* Section Header */
.why-moneypex-heading {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: #111827;
    margin-bottom: 1.5rem;
    text-align: center;
}

.why-moneypex-description {
    font-size: clamp(1rem, 2vw, 1.125rem);
    color: #64748b;
    max-width: 800px;
    margin: 0 auto 1rem;
    line-height: 1.7;
    text-align: center;
}

.why-moneypex-cta {
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
    color: #1E5CAA;
    font-weight: 600;
    text-align: center;
    margin-bottom: 3rem;
}

/* Cards Grid */
.why-moneypex-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Individual Card Styling - NO HOVER */
.why-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 1.25rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Card Icons - NO background, NO border, NO box */
.why-card-icon {
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    flex-shrink: 0;
    background: transparent;
    background-color: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

/* Image icons - clean and bigger */
.why-card-icon img {
    width: 90px !important;
    height: 90px !important;
    object-fit: contain;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
}

.why-card-icon svg {
    width: 90px !important;
    height: 90px !important;
    color: #1E5CAA;
    border: none;
    background: transparent;
    box-shadow: none;
    outline: none;
}

/* Remove all card icon backgrounds */
.why-card-1 .why-card-icon,
.why-card-2 .why-card-icon,
.why-card-3 .why-card-icon,
.why-card-4 .why-card-icon {
    background: transparent;
    background-color: transparent;
    background-image: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    outline: none;
}

/* Card Titles */
.why-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #111827;
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

/* Responsive - Tablet: 2 columns */
@media (min-width: 768px) and (max-width: 1199px) {
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.75rem;
    }
    
    .why-card {
        padding: 2rem 1.5rem;
    }
}

/* Responsive - Mobile: 2 columns */
@media (max-width: 767px) {
    .why-moneypex-section {
        padding: 3.5rem 0;
    }
    
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        padding: 0 1rem;
    }
    
    .why-card {
        padding: 1.75rem 1rem;
        min-height: 180px;
    }
    
    .why-card-icon {
        width: 70px;
        height: 70px;
        min-width: 70px;
        min-height: 70px;
        margin-bottom: 1.25rem;
    }
    
    .why-card-icon img,
    .why-card-icon svg {
        width: 60px !important;
        height: 60px !important;
    }
    
    .why-card-title {
        font-size: 1rem;
    }
}

/* Responsive - Extra Small Mobile */
@media (max-width: 480px) {
    .why-moneypex-cards {
        gap: 0.75rem;
        padding: 0 0.5rem;
    }
    
    .why-card {
        padding: 1.5rem 0.875rem;
        min-height: 160px;
    }
    
    .why-card-icon {
        width: 60px;
        height: 60px;
        min-width: 60px;
        min-height: 60px;
    }
    
    .why-card-icon img,
    .why-card-icon svg {
        width: 50px !important;
        height: 50px !important;
    }
}

/* ========================================
   MTD COMPLIANCE SECTION - CLEAN ICONS
   No boxes, no borders, no hover effects
   ======================================== */

.mtd-feature-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    border: none;
    outline: none;
    background: transparent;
}

.mtd-feature-icon {
    width: 3rem;
    height: 3rem;
    min-width: 3rem;
    min-height: 3rem;
    max-width: 3rem;
    max-height: 3rem;
    background: transparent !important;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    outline: none;
    box-shadow: none;
}

.mtd-feature-icon svg {
    width: 1.5rem;
    height: 1.5rem;
    color: #1E5CAA;
    border: none;
    outline: none;
    box-shadow: none;
}

/* ========================================
   DISABLE ALL FOCUS/HOVER EFFECTS GLOBALLY
   ======================================== */

/* Disable focus-visible outline for MTD section */
.mtd-compliance-section *:focus-visible,
.mtd-feature-item:focus-visible,
.mtd-feature-icon:focus-visible,
.mtd-feature-icon *:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    }

/* Disable ALL hover effects on why-card-icon */
.why-card-icon:hover,
.why-card-icon:focus,
.why-card-icon:focus-visible,
.why-card-icon:active,
.why-card:hover .why-card-icon,
.why-card:focus .why-card-icon {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    outline: none !important;
}

/* Disable ALL hover effects on why-card */
.why-card:hover,
.why-card:focus,
.why-card:focus-visible,
.why-card:active {
    transform: none !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    border-color: #e5e7eb !important;
}

/* Disable ALL hover effects on MTD elements */
.mtd-feature-item:hover,
.mtd-feature-item:focus,
.mtd-feature-item:active,
.mtd-feature-icon:hover,
.mtd-feature-icon:focus,
.mtd-feature-icon:active,
.mtd-feature-item:hover .mtd-feature-icon {
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
    background: transparent !important;
}


/* ===== cta-section-visual-fix.css ===== */
/* ========================================
   CTA SECTION - VISUAL IMPROVEMENTS
   "Ready To Take Your Business To New Heights?"
   ======================================== */

/* Section Container */
.cta-growth-section {
    padding: 6rem 0 !important;
    background: linear-gradient(180deg, #fff 0%, #ffffff 100%) !important ;
    position: relative !important;
}

.cta-growth-section .container {
    max-width: 1200px !important;
}

/* Section Heading */
.cta-growth-section h2 {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

/* Section Description */
.cta-growth-section > div > div > p {
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    color: #64748b !important;
    max-width: 800px !important;
    margin: 0 auto 3rem !important;
    line-height: 1.7 !important;
    text-align: center !important;
}

/* CTA Cards Grid */
.cta-cards-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    gap: 0 !important;
}

/* CTA Card */
.cta-card-growth {
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 1.5rem !important;
    padding: 3.5rem 3rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 6px 10px -5px rgba(0, 0, 0, 0.04) !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Top gradient bar on hover */
.cta-card-growth::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 6px !important;
    background: linear-gradient(90deg, #60a5fa 0%, #3b82f6 100%) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.4s ease !important;
}

.cta-card-growth:hover::before {
    transform: scaleX(1) !important;
}

/* Card Hover Effect */
.cta-card-growth:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 15px 25px -10px rgba(30, 92, 170, 0.2) !important;
    border-color: #93c5fd !important;
}

/* Icon Wrapper */
.cta-card-growth > div:first-child {
    width: 5rem !important;
    height: 5rem !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2rem !important;
    transition: all 0.3s ease !important;
}

.cta-card-growth > div:first-child svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
    color: #1E5CAA !important;
    stroke: #1E5CAA !important;
}

.cta-card-growth:hover > div:first-child {
    transform: scale(1.1) rotate(5deg) !important;
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
}

.cta-card-growth:hover > div:first-child svg {
    color: white !important;
    stroke: white !important;
}

/* Card Title */
.cta-card-growth h3 {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

/* Card Description */
.cta-card-growth p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.0625rem !important;
    color: #64748b !important;
    margin-bottom: 2.5rem !important;
    line-height: 1.7 !important;
}

/* Button Styling */
.cta-card-growth .btn-premium {
    padding: 1rem 2.5rem !important;
    font-size: 1.0625rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    background: linear-gradient(135deg, #1E5CAA 0%, #3b82f6 100%) !important;
    color: white !important;
    border: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 10px 25px -5px rgba(30, 92, 170, 0.4) !important;
}

.cta-card-growth .btn-premium svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
    stroke: white !important;
    transition: transform 0.3s ease !important;
}

.cta-card-growth .btn-premium:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 15px 35px -5px rgba(30, 92, 170, 0.5) !important;
    background: linear-gradient(135deg, #174a85 0%, #2563eb 100%) !important;
}

.cta-card-growth .btn-premium:hover svg {
    transform: translateX(4px) !important;
}

/* Responsive - Tablet */
@media (max-width: 991.98px) {
    .cta-growth-section {
        padding: 5rem 0 !important;
    }
    
    .cta-card-growth {
        padding: 3rem 2.5rem !important;
    }
}

/* Responsive - Mobile */
@media (max-width: 767.98px) {
    .cta-growth-section {
        padding: 4rem 0 !important;
    }
    
    .cta-cards-grid {
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
    
    .cta-card-growth {
        padding: 2.5rem 2rem !important;
    }
    
    .cta-card-growth > div:first-child {
        width: 4.5rem !important;
        height: 4.5rem !important;
        margin-bottom: 1.75rem !important;
    }
    
    .cta-card-growth > div:first-child svg {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
    
    .cta-card-growth h3 {
        font-size: 1.5rem !important;
    }
    
    .cta-card-growth p {
        font-size: 1rem !important;
    }
    
    .cta-card-growth .btn-premium {
        width: 100% !important;
        max-width: 320px !important;
    }
}

/* Extra Small Mobile */
@media (max-width: 480px) {
    .cta-card-growth {
        padding: 2rem 1.5rem !important;
    }
}




/* ===== industries-mobile-fix.css ===== */
/* ========================================
   INDUSTRIES WE SERVE - MOBILE RESPONSIVE FIX
   Fix heading responsiveness and card layout on mobile
   ======================================== */

/* Section Container */
.features-carousel-section {
    padding: 4rem 0 !important;
}

@media (max-width: 991.98px) {
    .features-carousel-section {
        padding: 3rem 0 !important;
    }
}

@media (max-width: 767.98px) {
    .features-carousel-section {
        padding: 2.5rem 0 !important;
    }
}

@media (max-width: 575.98px) {
    .features-carousel-section {
        padding: 2rem 0 !important;
    }
}

/* Container Padding */
.features-carousel-section .container,
.features-carousel-section .container-fluid.container-md {
    padding-left: clamp(1rem, 4vw, 2rem) !important;
    padding-right: clamp(1rem, 4vw, 2rem) !important;
}

/* Heading - Make it fully responsive */
.features-carousel-heading {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: clamp(1.75rem, 5vw, 2.5rem) !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    text-align: center !important;
}

/* Subtitle - Make it responsive */
.features-carousel-subtitle {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.9375rem, 2.5vw, 1.125rem) !important;
    color: #64748b !important;
    max-width: 700px !important;
    margin: 0 auto 2rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
    padding: 0 1rem !important;
}

@media (max-width: 575.98px) {
    .features-carousel-subtitle {
        margin-bottom: 1.5rem !important;
        padding: 0 0.5rem !important;
    }
}

/* Carousel Wrapper */
.products-carousel-wrapper {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    margin-top: 2rem !important;
    padding: 0 !important;
}

@media (max-width: 767.98px) {
    .products-carousel-wrapper {
        margin-top: 1.5rem !important;
    }
}

/* Carousel Track */
.products-carousel-track {
    display: flex !important;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform !important;
}

/* Product Cards - Responsive widths */
.products-carousel-track .product-card {
    flex: 0 0 25% !important;
    padding: 0 0.75rem !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* Tablet: 2 cards per view */
@media (max-width: 1023.98px) and (min-width: 768px) {
    .products-carousel-track .product-card {
        flex: 0 0 50% !important;
        padding: 0 0.5rem !important;
    }
}

/* Mobile: 1 card per view */
@media (max-width: 767.98px) {
    .products-carousel-track .product-card {
        flex: 0 0 100% !important;
        padding: 0 0.5rem !important;
        max-width: 100% !important;
    }
}

/* Industry Card Inner - Mobile Optimized */
.industry-card-inner {
    position: relative !important;
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1.25rem !important;
    padding: 2.5rem 2rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    height: 100% !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    cursor: pointer !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

@media (max-width: 991.98px) {
    .industry-card-inner {
        padding: 2rem 1.5rem !important;
        border-radius: 1rem !important;
    }
}

@media (max-width: 767.98px) {
    .industry-card-inner {
        padding: 1.75rem 1.5rem !important;
        border-radius: 1rem !important;
        min-height: auto !important;
    }
}

@media (max-width: 575.98px) {
    .industry-card-inner {
        padding: 1.5rem 1.25rem !important;
    }
}

/* Industry Icon Wrapper */
.industry-icon-wrapper {
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    flex-shrink: 0 !important;
}

@media (max-width: 767.98px) {
    .industry-icon-wrapper {
        width: 3.5rem !important;
        height: 3.5rem !important;
        margin-bottom: 1.25rem !important;
        border-radius: 0.875rem !important;
    }
}

@media (max-width: 575.98px) {
    .industry-icon-wrapper {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 1rem !important;
    }
}

/* Industry Icon SVG */
.industry-icon-wrapper svg {
    width: 2rem !important;
    height: 2rem !important;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (max-width: 767.98px) {
    .industry-icon-wrapper svg {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
}

@media (max-width: 575.98px) {
    .industry-icon-wrapper svg {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }
}

/* Industry Card Title */
.industry-card-title {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: clamp(1.125rem, 3vw, 1.5rem) !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 767.98px) {
    .industry-card-title {
        font-size: clamp(1.0625rem, 3.5vw, 1.25rem) !important;
        margin-bottom: 0.875rem !important;
    }
}

/* Industry Card Description */
.industry-card-description {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    flex: 1 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

@media (max-width: 767.98px) {
    .industry-card-description {
        font-size: clamp(0.8125rem, 2.5vw, 0.9375rem) !important;
        margin-bottom: 1.25rem !important;
        line-height: 1.65 !important;
    }
}

/* Industry Card Link */
.industry-card-link {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.875rem, 2vw, 1rem) !important;
    font-weight: 600 !important;
    color: #1E5CAA !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    transition: all 0.3s ease !important;
    margin-top: auto !important;
}

.industry-card-link:hover {
    color: #174a85 !important;
    gap: 0.75rem !important;
}

.industry-card-link svg {
    width: 1rem !important;
    height: 1rem !important;
    transition: transform 0.3s ease !important;
}

.industry-card-link:hover svg {
    transform: translateX(4px) !important;
}

/* Pagination Dots */
.carousel-pagination {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 2rem !important;
    padding: 0 1rem !important;
}

@media (max-width: 767.98px) {
    .carousel-pagination {
        margin-top: 1.5rem !important;
    }
}

.pagination-dot {
    width: 0.5rem !important;
    height: 0.5rem !important;
    border-radius: 50% !important;
    background-color: #cbd5e1 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    border: none !important;
    padding: 0 !important;
}

.pagination-dot.active {
    width: 2rem !important;
    background-color: #1E5CAA !important;
    border-radius: 0.25rem !important;
}

@media (max-width: 575.98px) {
    .pagination-dot {
        width: 0.375rem !important;
        height: 0.375rem !important;
    }
    
    .pagination-dot.active {
        width: 1.5rem !important;
    }
}

/* Text Center Wrapper */
.features-carousel-section .text-center {
    padding: 0 !important;
}

/* Ensure proper spacing on mobile */
@media (max-width: 767.98px) {
    .features-carousel-section .text-center.mb-5 {
        margin-bottom: 2rem !important;
    }
}

@media (max-width: 575.98px) {
    .features-carousel-section .text-center.mb-5 {
        margin-bottom: 1.5rem !important;
    }
}

/* Fix for premium underline */
.features-carousel-heading .premium-underline {
    color: #1E5CAA !important;
    position: relative !important;
}

/* Hover effects - Disable on mobile for better touch experience */
@media (hover: hover) and (pointer: fine) {
    .industry-card-inner:hover {
        transform: translateY(-8px) !important;
        box-shadow: 0 12px 24px -8px rgba(0, 0, 0, 0.15) !important;
        border-color: #93c5fd !important;
    }
}

/* Touch-friendly on mobile */
@media (max-width: 767.98px) {
    .industry-card-inner:active {
        transform: scale(0.98) !important;
    }
}



/* ===== faq-beauty-fix.css ===== */
/* ========================================
   FAQ SECTION - BEAUTY & ALIGNMENT FIX
   Make FAQ section beautiful and fix alignment issues
   ======================================== */

/* Section Container */
.faq-growth-section {
    padding: 6rem 0 !important;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
    position: relative !important;
}

@media (max-width: 991.98px) {
    .faq-growth-section {
        padding: 4rem 0 !important;
    }
}

@media (max-width: 767.98px) {
    .faq-growth-section {
        padding: 3rem 0 !important;
    }
}

@media (max-width: 575.98px) {
    .faq-growth-section {
        padding: 2.5rem 0 !important;
    }
}

/* Container */
.faq-growth-section .container {
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 clamp(1rem, 4vw, 2rem) !important;
}

/* Section Heading */
.faq-growth-section h2 {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
    letter-spacing: -0.02em !important;
    text-align: center !important;
}

/* Section Subtitle */
.faq-growth-section > .container > .text-center > p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.9375rem, 2.5vw, 1.125rem) !important;
    color: #64748b !important;
    max-width: 700px !important;
    margin: 0 auto 3rem !important;
    line-height: 1.6 !important;
    text-align: center !important;
}

@media (max-width: 767.98px) {
    .faq-growth-section > .container > .text-center > p {
        margin-bottom: 2rem !important;
    }
}

/* Accordion Container */
.modern-faq {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
    width: 100% !important;
}

/* Accordion Item */
.modern-faq .accordion-item {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1rem !important;
    margin-bottom: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modern-faq .accordion-item:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06) !important;
    border-color: #cbd5e1 !important;
}

/* Accordion Button - Fixed Alignment */
.modern-faq .accordion-button {
    padding: 1.5rem !important;
    font-weight: 600 !important;
    font-size: clamp(1rem, 2.5vw, 1.125rem) !important;
    color: #1f2937 !important;
    background: white !important;
    box-shadow: none !important;
    border: none !important;
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    line-height: 1.5 !important;
    position: relative !important;
    width: 100% !important;
    gap: 1rem !important;
}

@media (max-width: 767.98px) {
    .modern-faq .accordion-button {
        padding: 1.25rem 1rem !important;
        font-size: clamp(0.9375rem, 3vw, 1.0625rem) !important;
        gap: 0.875rem !important;
    }
}

/* Accordion Button - Expanded State */
.modern-faq .accordion-button:not(.collapsed) {
    color: #1E5CAA !important;
    background-color: #f8fafc !important;
    box-shadow: none !important;
}

/* Accordion Button - Focus State */
.modern-faq .accordion-button:focus {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* FAQ Icon Wrapper - Fixed Alignment */
.faq-icon-wrapper {
    display: none !important; /* user request: remove the left square */
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    min-height: 2.5rem !important;
    border-radius: 0.625rem !important;
    background: rgba(30, 92, 170, 0.08) !important;
    border: 1px solid rgba(30, 92, 170, 0.12) !important;
    box-shadow: 0 10px 24px rgba(30, 92, 170, 0.10) !important;
    color: #1E5CAA !important;
    margin-right: 0 !important;
    flex-shrink: 0 !important;
    transition: all 0.3s ease !important;
}

@media (max-width: 767.98px) {
    .faq-icon-wrapper {
        width: 2.25rem !important;
        height: 2.25rem !important;
        min-width: 2.25rem !important;
        min-height: 2.25rem !important;
        border-radius: 0.5rem !important;
    }
}

/* FAQ Icon Wrapper - Expanded State */
.modern-faq .accordion-button:not(.collapsed) .faq-icon-wrapper {
    background: linear-gradient(135deg, #1E5CAA 0%, #2563eb 100%) !important;
    border-color: rgba(30, 92, 170, 0.25) !important;
    color: #ffffff !important;
}

/* FAQ Icon */
.faq-icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
    stroke: currentColor !important;
    transition: all 0.3s ease !important;



}

@media (max-width: 767.98px) {
    .faq-icon {
        width: 1.125rem !important;
        height: 1.125rem !important;
    }
}

.modern-faq .accordion-button::after {
    margin-left: auto !important;
    flex-shrink: 0 !important;
    width: 1rem !important;
    height: 1rem !important;
    background-size: 1rem 1rem !important;
    opacity: 0.5 !important;
    transition: all 0.3s ease !important;
}

.modern-faq .accordion-button:not(.collapsed)::after {
    opacity: 1 !important;
    transform: rotate(180deg) !important;
}

/* Accordion Body - Fixed Alignment */
.modern-faq .accordion-body {
    padding: 0 1.5rem 1.5rem 1.5rem !important;
    color: #475569 !important;
    line-height: 1.7 !important;
    font-size: clamp(0.9375rem, 2.5vw, 1.0625rem) !important;
    background: white !important;
    font-family: 'Inter', sans-serif !important;
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    .modern-faq .accordion-body {
        padding: 0 1rem 1.25rem 1rem !important;
        margin: 0 !important;
        font-size: clamp(0.875rem, 2.5vw, 1rem) !important;
    }
}

@media (max-width: 575.98px) {
    .modern-faq .accordion-body {
        margin: 0 !important;
    }
}

/* Accordion Collapse */
.modern-faq .accordion-collapse {
    overflow: visible !important;
}

.modern-faq .accordion-collapse.show .accordion-body,
.modern-faq .accordion-collapse.collapsing .accordion-body {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Premium Underline */
.faq-growth-section h2 .premium-underline {
    color: #1E5CAA !important;
    position: relative !important;
}

/* Text Center Wrapper */
.faq-growth-section .text-center {
    margin-bottom: 3rem !important;
}

@media (max-width: 767.98px) {
    .faq-growth-section .text-center {
        margin-bottom: 2rem !important;
    }
}

/* Smooth Transitions */
.modern-faq .accordion-item,
.modern-faq .accordion-button,
.faq-icon-wrapper {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Remove Bootstrap Default Styles */
.modern-faq .accordion-button::before {
    display: none !important;
}

/* Ensure proper spacing between items */
.modern-faq .accordion-item + .accordion-item {
    margin-top: 0 !important;
}

/* Mobile-specific improvements */
@media (max-width: 575.98px) {
    .modern-faq .accordion-button {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    
    .faq-icon-wrapper {
        order: -1 !important;
    }
    
    .modern-faq .accordion-button::after {
        order: 1 !important;
        margin-left: auto !important;
    }
}

/* Accessibility - Better focus states */
.modern-faq .accordion-button:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

/* Print styles */
@media print {
    .modern-faq .accordion-item {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }
}



/* ===== responsive-optimization.css ===== */
/* ========================================
   RESPONSIVE OPTIMIZATION - COMPREHENSIVE FIX
   Unified responsive system for text, images, and layout
   Consolidates and optimizes all responsive fixes
   ======================================== */

/* ========================================
   1. RESPONSIVE TYPOGRAPHY OPTIMIZATION
   Smooth, fluid text scaling across all breakpoints
   ======================================== */

/* Base HTML Elements - Fluid Typography */
html {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
    -moz-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
}

/* H1 - Hero & Page Titles */
h1,
.h1,
.modern-hero-heading,
.hero-title,
.page-title {
    font-size: clamp(1.5rem, 3.5vw + 0.5rem, 2.75rem) !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    margin-bottom: clamp(0.75rem, 2vw, 1.25rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    text-wrap: balance;
}

/* H2 - Section Headings */
h2,
.h2,
.section-title,
.products-section-heading,
.why-moneypex-heading,
.features-carousel-heading,
.faq-section-heading,
.fbr-heading {
    font-size: clamp(1.35rem, 3vw + 0.25rem, 2.25rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: clamp(0.5rem, 2vw, 1rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    text-wrap: balance;
}

/* H3 - Subsection Headings */
h3,
.h3,
.why-card-title,
.product-title,
.benefit-title,
.industry-card-title {
    font-size: clamp(1rem, 2vw + 0.15rem, 1.5rem) !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    margin-bottom: clamp(0.375rem, 1.5vw, 0.75rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* H4 - Card Titles */
h4,
.h4,
.mp-products-card__title {
    font-size: clamp(0.9375rem, 1.8vw + 0.1rem, 1rem) !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    margin-bottom: clamp(0.375rem, 1vw, 0.625rem) !important;
}

/* H5 & H6 - Small Headings */
h5,
.h5 {
    font-size: clamp(0.875rem, 1.5vw, 1rem) !important;
    line-height: 1.35 !important;
    font-weight: 600 !important;
}

h6,
.h6 {
    font-size: clamp(0.8125rem, 1.3vw, 1rem) !important;
    line-height: 1.35 !important;
    font-weight: 500 !important;
}

/* Body Text & Paragraphs */
p,
.text-body,
.modern-hero-text,
.hero-text,
.why-moneypex-description,
.products-section-subtitle,
.benefit-description,
.industry-card-description {
    font-size: clamp(0.875rem, 1.2vw + 0.1rem, 1rem) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.875rem) !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Small Text */
small,
.small,
.text-small,
.fbr-feature-description {
    font-size: clamp(0.75rem, 1.1vw, 0.875rem) !important;
    line-height: 1.5 !important;
}

/* Feature List Items */
.hero-feature-item,
.hero-section-features-list span {
    font-size: clamp(0.8125rem, 1.2vw, 0.9375rem) !important;
    line-height: 1.5 !important;
}

/* ========================================
   2. IMAGE OPTIMIZATION - RESPONSIVE & PERFORMANCE
   ======================================== */

/* Base Image Optimization */
img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
}

/* Fluid Images - Full Width */
.img-fluid,
.responsive-img,
.hero-main-image,
.home-hero-image {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Hero Section Images */
.hero-form-wrapper img,
.hero-image-wrapper img,
.hero-right-wrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Ensure all hero visuals stay flat on both regions */
.hero-main-image,
.home-hero-image,
.hero-dashboard-image,
.hero-form-wrapper,
.hero-image-wrapper,
.hero-right-wrapper {
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Product Icons - Responsive Sizing */
.product-icon img,
.why-card-icon img,
.benefit-icon-img,
.industry-icon-img,
.dropdown-icon img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Logo Images - Trusted By Section */
.trusted-by-section img,
.company-logo-wrapper img {
    max-width: 100% !important;
    height: auto !important;
    max-height: 60px !important;
    object-fit: contain !important;
    filter: grayscale(1) opacity(0.6) !important;
    transition: all 0.3s ease !important;
}

.trusted-by-section img:hover,
.company-logo-wrapper img:hover {
    filter: grayscale(0) opacity(1) !important;
}

/* FBR Section Images */
.fbr-image img,
.fbr-image-wrapper img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 1rem !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
}

/* Testimonial Images */
.testimonial-card-growth img {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-bottom: 1rem !important;
}

/* ========================================
   3. MOBILE RESPONSIVE OPTIMIZATIONS (< 768px)
   ======================================== */

@media (max-width: 767px) {

    /* Container Spacing */
    .container,
    .container-fluid,
    .container-md {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Section Spacing */
    section,
    .modern-section {
        padding: 3rem 1rem !important;
    }

    .modern-hero-section,
    .home-hero-section {
        padding: 2rem 1rem 3rem !important;
        min-height: 70vh !important;
    }

    /* Hero Content Alignment */
    .hero-content-wrapper {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin-bottom: 2rem !important;
    }

    .modern-hero-heading {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        text-align: center !important;
        margin-bottom: 1rem !important;
        line-height: 1.25 !important;
        word-break: keep-all !important;
        hyphens: none !important;
    }

    /* Hero heading lines - ensure proper wrapping */
    .modern-hero-heading .hero-heading-first-line,
    .modern-hero-heading .hero-heading-second-line {
        display: block !important;
        text-align: center !important;
    }

    .modern-hero-text,
    .hero-text {
        font-size: 0.9375rem !important;
        text-align: center !important;
        margin: 0 auto 1.5rem !important;
        max-width: 100% !important;
    }

    /* Hero Image Optimization - Mobile */
    .hero-form-wrapper,
    .hero-image-wrapper {
        padding: 0 !important;
        margin-top: 1.5rem !important;
    }

    .hero-form-wrapper img,
    .hero-image-wrapper img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 0.75rem !important;
    }

    /* Why Moneypex Cards - 2 Columns Mobile */
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        padding: 0 0.5rem !important;
    }

    .why-card {
        padding: 1.25rem 0.875rem !important;
        min-height: auto !important;
    }

    .why-card-icon {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 0.75rem !important;
    }

    .why-card-icon img {
        width: 2rem !important;
        height: 2rem !important;
    }

    .why-card-title {
        font-size: 0.9375rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
    }

    /* Products Section - Mobile */
    .mp-products-section {
        padding: 2rem 1rem !important;
    }

    .mp-products-list {
        margin-bottom: 1.5rem !important;
    }

    .product-item {
        padding: 0.75rem 1rem !important;
        margin-bottom: 0.5rem !important;
    }

    .product-title {
        font-size: 0.9375rem !important;
    }

    .product-icon {
        width: 36px !important;
        height: 36px !important;
    }

    /* FBR Section - Mobile Stack */
    .fbr-compliance-section {
        padding: 3rem 1rem !important;
    }

    .fbr-compliance-section .row {
        flex-direction: column !important;
    }

    .fbr-content,
    .fbr-image {
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 2rem !important;
    }

    .fbr-heading {
        font-size: 1.5rem !important;
        text-align: center !important;
    }

    .fbr-description {
        font-size: 0.9375rem !important;
        text-align: center !important;
    }

    .fbr-feature-item {
        padding: 1rem !important;
        margin-bottom: 1rem !important;
    }

    .fbr-feature-title {
        font-size: 1rem !important;
    }

    .fbr-feature-description {
        font-size: 0.875rem !important;
    }

    /* Benefits Section - Mobile Stack */
    .benefits-wrapper-modern {
        padding: 3rem 1rem !important;
    }

    .benefits-wrapper-modern .row {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .benefit-card-modern {
        padding: 1.5rem !important;
    }

    .benefit-icon-img {
        width: 3rem !important;
        height: 3rem !important;
        margin-bottom: 1rem !important;
    }

    .benefit-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }

    .benefit-description {
        font-size: 0.9375rem !important;
    }

    /* Industries Carousel - Mobile 1 Column */
    .features-carousel-section {
        padding: 3rem 1rem !important;
    }

    .products-carousel-track .product-card {
        flex: 0 0 100% !important;
        padding: 0 0.5rem !important;
    }

    .industry-card-inner {
        padding: 1.5rem !important;
    }

    .industry-card-title {
        font-size: 1.125rem !important;
        margin-bottom: 0.75rem !important;
    }

    .industry-card-description {
        font-size: 0.875rem !important;
        line-height: 1.6 !important;
    }

    /* Testimonials - Mobile */
    .testimonials-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .testimonial-card-growth {
        padding: 1.5rem !important;
    }

    /* Buttons - Mobile */
    .btn-premium {
        font-size: 0.9375rem !important;
        padding: 0.875rem 1.5rem !important;
        width: 100% !important;
        max-width: 320px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .hero-button-animate {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* FAQ Section - Mobile */
    .faq-growth-section {
        padding: 3rem 1rem !important;
    }

    .accordion-button {
        font-size: 0.9375rem !important;
        padding: 1rem 0.75rem !important;
    }

    .accordion-body {
        font-size: 0.875rem !important;
        padding: 1rem 0.75rem !important;
    }
}

/* ========================================
   4. EXTRA SMALL MOBILE (< 480px)
   ======================================== */

@media (max-width: 479px) {

    /* Ultra-compact spacing */
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    section {
        padding: 2.5rem 0.75rem !important;
    }

    .modern-hero-section {
        padding: 1.5rem 0.75rem 2.5rem !important;
    }

    /* Typography - Extra Small */
    .modern-hero-heading {
        font-size: clamp(1.25rem, 5.5vw, 1.5rem) !important;
        line-height: 1.2 !important;
        word-break: keep-all !important;
        hyphens: none !important;
        padding: 0 0.5rem !important;
    }

    .modern-hero-heading .hero-heading-first-line,
    .modern-hero-heading .hero-heading-second-line {
        display: block !important;
    }

    h2,
    .h2 {
        font-size: 1.375rem !important;
    }

    h3,
    .h3 {
        font-size: 1.125rem !important;
    }

    p {
        font-size: 0.875rem !important;
    }

    /* Cards - Extra Compact */
    .why-moneypex-cards {
        gap: 0.75rem !important;
        padding: 0 0.25rem !important;
    }

    .why-card {
        padding: 1rem 0.625rem !important;
    }

    .why-card-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    .why-card-icon img {
        width: 1.5rem !important;
        height: 1.5rem !important;
    }

    .why-card-title {
        font-size: 0.875rem !important;
    }

    /* Buttons */
    .btn-premium {
        font-size: 0.875rem !important;
        padding: 0.75rem 1.25rem !important;
    }
}

/* ========================================
   5. TABLET RESPONSIVE (768px - 991px)
   ======================================== */

@media (min-width: 768px) and (max-width: 991px) {

    /* Container Spacing */
    .container,
    .container-fluid {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Section Spacing */
    section {
        padding: 4rem 1.5rem !important;
    }

    .modern-hero-section {
        padding: 3rem 1.5rem 4rem !important;
    }

    /* Typography - Tablet */
    .modern-hero-heading {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        max-width: 90% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .modern-hero-text,
    .hero-text {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
        max-width: 85% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    h2,
    .h2 {
        font-size: 1.75rem !important;
        line-height: 1.25 !important;
    }

    /* All section headings - Tablet */
    .section-title,
    .products-section-heading,
    .why-moneypex-heading,
    .features-carousel-heading,
    .faq-section-heading,
    .fbr-heading,
    .testimonials-heading {
        font-size: 1.65rem !important;
        line-height: 1.25 !important;
    }

    /* Section descriptions - Tablet */
    .why-moneypex-description,
    .products-section-subtitle,
    .faq-section-subtitle,
    .section-subtitle,
    .text-body-large {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }

    /* Card titles - Tablet */
    .why-card-title,
    .benefit-card-title,
    .feature-title {
        font-size: 1.05rem !important;
    }

    /* Card descriptions - Tablet */
    .why-card-text,
    .benefit-card-text,
    .feature-description {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
    }

    /* Why Moneypex - 2 Columns */
    .why-moneypex-cards {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }

    .why-card {
        padding: 2rem 1.5rem !important;
    }

    /* Products Section */
    .mp-products-section .row {
        flex-direction: column !important;
    }

    .mp-products-list {
        margin-bottom: 2rem !important;
    }

    /* Industries Carousel - 2 Columns */
    .products-carousel-track .product-card {
        flex: 0 0 50% !important;
    }

    /* Benefits - 2 Columns */
    .benefits-wrapper-modern .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2rem !important;
    }
}

/* ========================================
   5B. LARGE TABLET / SMALL LAPTOP (992px - 1199px)
   ======================================== */

@media (min-width: 992px) and (max-width: 1199.98px) {

    /* Hero Typography - Large Tablet */
    .modern-hero-heading {
        font-size: 2.25rem !important;
        line-height: 1.2 !important;
    }

    .modern-hero-text,
    .hero-text {
        font-size: 1rem !important;
        line-height: 1.55 !important;
    }

    /* Section Headings - Large Tablet */
    .section-title,
    .products-section-heading,
    .why-moneypex-heading,
    .features-carousel-heading,
    .faq-section-heading,
    .fbr-heading,
    .testimonials-heading,
    h2,
    .h2 {
        font-size: 1.85rem !important;
        line-height: 1.25 !important;
    }

    /* Section descriptions - Large Tablet */
    .why-moneypex-description,
    .products-section-subtitle,
    .faq-section-subtitle,
    .section-subtitle,
    .text-body-large {
        font-size: 0.95rem !important;
        line-height: 1.55 !important;
    }

    /* Card titles - Large Tablet */
    .why-card-title,
    .benefit-card-title,
    .feature-title {
        font-size: 1.1rem !important;
    }

    /* Card descriptions - Large Tablet */
    .why-card-text,
    .benefit-card-text,
    .feature-description {
        font-size: 0.9rem !important;
        line-height: 1.5 !important;
    }
}

/* ========================================
   6. DESKTOP OPTIMIZATION (992px+)
   ======================================== */

@media (min-width: 992px) {

    /* Container Max Width */
    .container-md {
        max-width: 1200px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    /* Hero Section - Side by Side */
    .hero-row-wrapper {
        align-items: center !important;
    }

    .hero-content-wrapper {
        text-align: left !important;
    }

    .modern-hero-heading {
        text-align: left !important;
    }

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

    /* Why Moneypex - 4 Columns */
    .why-moneypex-cards {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 2rem !important;
    }

    /* Products Section - Side by Side */
    .mp-products-section .row {
        flex-direction: row !important;
    }

    /* Industries Carousel - 4 Columns */
    .products-carousel-track .product-card {
        flex: 0 0 25% !important;
    }

    /* Benefits - 3 Columns */
    .benefits-wrapper-modern .row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 2.5rem !important;
    }

    /* FBR Section
       IMPORTANT: Do NOT force widths/padding here.
       PK uses a CSS Grid layout for `.fbr-compliance-section .row` (see `pk-home-design-fix.css`).
       Setting `width: 50%` inside a grid column shrinks content and breaks the section. */
}

/* FBR Section: prevent awkward word splitting in feature titles */
.fbr-feature-title,
.fbr-heading {
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
    -moz-hyphens: manual !important;
}

/* ========================================
   7. LARGE DESKTOP (1200px+)
   ======================================== */

@media (min-width: 1200px) {
    .container-md {
        max-width: 1400px !important;
    }

    /* Optimal Typography for Large Screens */
    .modern-hero-heading {
        font-size: 3rem !important;
    }

    h2,
    .h2 {
        font-size: 2.5rem !important;
    }

    /* Benefits - 3 Columns on Large Screens */
    .benefits-wrapper-modern .row {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 3rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
}

/* ========================================
   8. PREVENT LAYOUT SHIFT & PERFORMANCE
   ======================================== */

/* Prevent Cumulative Layout Shift (CLS) */
img[width][height] {
    height: auto !important;
}

/* Aspect Ratio Boxes for Images */
.hero-form-wrapper,
.hero-image-wrapper {
    position: relative !important;
    width: 100% !important;
}

/* GPU Acceleration for Smooth Animations */
.hero-card-animate,
.fade-in-up,
.hero-heading-animate,
.hero-text-animate,
.hero-button-animate {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform, opacity !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

/* Image Loading Performance */
img[loading="lazy"] {
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

img[loading="lazy"].loaded {
    opacity: 1 !important;
}

/* ========================================
   9. TEXT OVERFLOW & WORD WRAP
   ======================================== */

/* Ensure text never overflows */
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
.why-card-title,
.product-title,
.benefit-title,
.industry-card-title {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
    -moz-hyphens: auto !important;
}

/* Prevent text from breaking incorrectly */
.btn-premium span,
.nav-link-modern,
.dropdown-item-modern {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ========================================
   11. MOBILE HEADING UNDERLINE - MATCH WORD WIDTH
   Premium underline should be exactly the word width on small screens
   ======================================== */

@media (max-width: 767.98px) {
    .premium-underline {
        /* Remove side padding that makes underline longer than the word */
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .premium-underline::after {
        left: 0 !important;
        width: 100% !important;
        background-size: 100% 100% !important;
        background-position: center bottom !important;
    }
}

/* ========================================
   10. TRUSTED BY SECTION - LOGO OPTIMIZATION
   ======================================== */

.trusted-by-section {
    padding: 3rem 1rem !important;
}

.company-logo-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
    height: 100px !important;
}

.company-logo-wrapper img {
    max-width: 120px !important;
    max-height: 60px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
}

@media (max-width: 767px) {
    .trusted-by-section {
        padding: 2rem 0.75rem !important;
    }

    .company-logo-wrapper {
        height: 80px !important;
        padding: 0.75rem !important;
    }

    .company-logo-wrapper img {
        max-width: 90px !important;
        max-height: 45px !important;
    }

    /* Make Trusted By heading compact and balanced on mobile */
    .trusted-by-heading {
        font-size: clamp(1.5rem, 5vw, 1.75rem) !important;
        line-height: 1.3 !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        text-wrap: balance;
        padding: 0 1rem !important;
        word-break: keep-all !important;
    }

    .trusted-by-heading .premium-underline {
        white-space: nowrap !important;
    }

    .trusted-by-heading .premium-underline::after {
        height: clamp(8px, 1vw, 10px) !important;
        bottom: clamp(-4px, -0.6vw, -6px) !important;
    }
}

/* ========================================
   12. WHY MONEYPEX HEADING RESPONSIVE TUNING
   ======================================== */
.why-moneypex-heading {
    font-size: clamp(1.5rem, 2.8vw + 0.25rem, 2.35rem) !important;
    line-height: 1.25 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    text-wrap: balance;
}

.why-moneypex-heading .premium-underline {
    display: inline-flex !important;
    align-items: flex-end !important;
    padding: 0 0.05em !important;
}

.why-moneypex-heading .premium-underline::after {
    bottom: clamp(-6px, -0.9vw, -10px) !important;
    height: clamp(10px, 1vw, 14px) !important;
}

/* Why Moneypex Description - Mobile Optimization */
.why-moneypex-description {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.why-moneypex-cta {
    font-size: clamp(0.875rem, 1.6vw, 1rem) !important;
    line-height: 1.5 !important;
    color: #1E5CAA !important;
    font-weight: 500 !important;
    max-width: 500px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ========================================
   13. ALL SECTION HEADINGS - MOBILE OPTIMIZATION
   ======================================== */

/* Base styles for all section headings */
.section-title,
.products-section-heading,
.why-moneypex-heading,
.features-carousel-heading,
.features-section-heading,
.faq-section-heading,
.fbr-heading,
.trusted-by-heading,
.testimonials-heading {
    text-wrap: balance;
    word-break: keep-all !important;
    hyphens: manual !important;
}

/* FAQ Section Heading specific styling */
.faq-section-heading,
.faq-growth-section h2,
.faq-growth-section .section-title {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-align: center !important;
}

/* FAQ Section Subtitle */
.faq-section-subtitle {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    max-width: 600px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767.98px) {

    /* All Main Section Headings */
    .section-title,
    .products-section-heading,
    .why-moneypex-heading,
    .features-carousel-heading,
    .features-section-heading,
    .faq-section-heading,
    .fbr-heading,
    .trusted-by-heading,
    .testimonials-heading,
    .cta-growth-section h2,
    .empowering-businesses-section h2,
    .industries-section h2,
    .faq-section h2,
    .faq-growth-section h2,
    .benefit-section h2,
    .pricing-section h2 {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
        font-weight: 700 !important;
        text-wrap: balance;
        word-break: keep-all !important;
        hyphens: manual !important;
    }

    /* Premium Underline on Mobile */
    .section-title .premium-underline::after,
    .products-section-heading .premium-underline::after,
    .why-moneypex-heading .premium-underline::after,
    .features-carousel-heading .premium-underline::after,
    .features-section-heading .premium-underline::after,
    .faq-section-heading .premium-underline::after,
    .fbr-heading .premium-underline::after,
    .trusted-by-heading .premium-underline::after,
    .testimonials-heading .premium-underline::after,
    .faq-growth-section h2 .premium-underline::after {
        height: 6px !important;
        bottom: -3px !important;
    }

    /* All Section Descriptions/Subtitles */
    .why-moneypex-description,
    .products-section-subtitle,
    .features-section-text,
    .faq-section-subtitle,
    .fbr-text,
    .section-subtitle,
    .text-body-large {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        margin-bottom: 0.75rem !important;
        padding: 0 0.5rem !important;
    }

    /* CTA Text */
    .why-moneypex-cta {
        font-size: 0.8125rem !important;
        line-height: 1.45 !important;
        padding: 0 0.5rem !important;
    }

    /* Card Titles */
    .why-card-title,
    .benefit-card-title,
    .product-title,
    .feature-title,
    .industry-card-title {
        font-size: 1rem !important;
        line-height: 1.25 !important;
        margin-bottom: 0.375rem !important;
    }

    /* Card Descriptions */
    .why-card-text,
    .benefit-card-text,
    .product-description,
    .feature-description,
    .industry-card-description {
        font-size: 0.8125rem !important;
        line-height: 1.45 !important;
    }
}

@media (max-width: 479.98px) {

    /* All Main Section Headings - Extra Small */
    .section-title,
    .products-section-heading,
    .why-moneypex-heading,
    .features-carousel-heading,
    .features-section-heading,
    .faq-section-heading,
    .fbr-heading,
    .trusted-by-heading,
    .testimonials-heading,
    .cta-growth-section h2,
    .empowering-businesses-section h2,
    .industries-section h2,
    .faq-section h2,
    .faq-growth-section h2,
    .benefit-section h2,
    .pricing-section h2 {
        font-size: 1.15rem !important;
        line-height: 1.18 !important;
    }

    /* Premium Underline - Extra Small */
    .section-title .premium-underline::after,
    .products-section-heading .premium-underline::after,
    .why-moneypex-heading .premium-underline::after,
    .features-carousel-heading .premium-underline::after,
    .features-section-heading .premium-underline::after,
    .faq-section-heading .premium-underline::after,
    .fbr-heading .premium-underline::after,
    .trusted-by-heading .premium-underline::after,
    .testimonials-heading .premium-underline::after,
    .faq-growth-section h2 .premium-underline::after {
        height: 5px !important;
        bottom: -2px !important;
    }

    /* All Section Descriptions - Extra Small */
    .why-moneypex-description,
    .products-section-subtitle,
    .features-section-text,
    .faq-section-subtitle,
    .fbr-text,
    .section-subtitle,
    .text-body-large {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
    }

    /* CTA Text - Extra Small */
    .why-moneypex-cta {
        font-size: 0.775rem !important;
        line-height: 1.4 !important;
    }

    /* Card Titles - Extra Small */
    .why-card-title,
    .benefit-card-title,
    .product-title,
    .feature-title,
    .industry-card-title {
        font-size: 0.9375rem !important;
        line-height: 1.2 !important;
    }

    /* Card Descriptions - Extra Small */
    .why-card-text,
    .benefit-card-text,
    .product-description,
    .feature-description,
    .industry-card-description {
        font-size: 0.775rem !important;
        line-height: 1.4 !important;
    }
}

/* ========================================
   14. GENERIC SECTION H2 - MOBILE OPTIMIZATION
   ======================================== */

/* Generic section h2 elements (without specific class) */
section .text-center h2,
.section-spacing-md .text-center h2,
.section-spacing-lg .text-center h2,
.section-title-new {
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    text-wrap: balance;
    word-break: keep-all !important;
}

/* Generic section paragraphs */
section .text-center>p,
.section-spacing-md .text-center>p,
.section-spacing-lg .text-center>p {
    font-size: clamp(0.9rem, 1.8vw, 1.05rem) !important;
    color: #475569 !important;
    line-height: 1.5 !important;
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 767.98px) {

    /* Generic section h2 on tablet/mobile */
    section .text-center h2,
    .section-spacing-md .text-center h2,
    .section-spacing-lg .text-center h2,
    .section-title-new {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Generic section h2 premium underline */
    section .text-center h2 .premium-underline::after,
    .section-title-new .premium-underline::after {
        height: 6px !important;
        bottom: -3px !important;
    }

    /* Generic section paragraphs on mobile */
    section .text-center>p,
    .section-spacing-md .text-center>p,
    .section-spacing-lg .text-center>p {
        font-size: 0.85rem !important;
        line-height: 1.5 !important;
        padding: 0 0.5rem !important;
    }
}

@media (max-width: 479.98px) {

    /* Generic section h2 on small mobile */
    section .text-center h2,
    .section-spacing-md .text-center h2,
    .section-spacing-lg .text-center h2,
    .section-title-new {
        font-size: 1.15rem !important;
        line-height: 1.18 !important;
    }

    /* Generic section h2 premium underline - small */
    section .text-center h2 .premium-underline::after,
    .section-title-new .premium-underline::after {
        height: 5px !important;
        bottom: -2px !important;
    }

    /* Generic section paragraphs on small mobile */
    section .text-center>p,
    .section-spacing-md .text-center>p,
    .section-spacing-lg .text-center>p {
        font-size: 0.8rem !important;
        line-height: 1.45 !important;
    }
}

/* ========================================
   7. RESPONSIVE BUTTON OPTIMIZATION
   ======================================== */

/* Base Button Styles - Prevent Text Wrapping */
.btn-premium,
.btn-premium-outline {
    white-space: nowrap !important;
    min-width: fit-content !important;
    flex-shrink: 0 !important;
}

.btn-premium span,
.btn-premium-outline span {
    white-space: nowrap !important;
}

/* Hero Button Container */
.hero-button-animate {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1rem !important;
    align-items: center !important;
}

/* Desktop (992px+) */
@media (min-width: 992px) {
    .hero-button-animate {
        flex-wrap: nowrap !important;
    }

    .hero-button-animate .btn-premium {
        padding: 0.875rem 1.75rem !important;
        font-size: 1rem !important;
    }

    .hero-button-animate .btn-premium-outline {
        padding: 0.8rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* Tablet (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-button-animate {
        flex-wrap: nowrap !important;
        gap: 0.75rem !important;
    }

    .hero-button-animate .btn-premium {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }

    .hero-button-animate .btn-premium-outline {
        padding: 0.7rem 1.15rem !important;
        font-size: 0.9375rem !important;
    }
}

/* Mobile (< 768px) */
@media (max-width: 767.98px) {
    .hero-button-animate {
        justify-content: center !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }

    .hero-button-animate .btn-premium {
        flex: 1 1 auto !important;
        min-width: 160px !important;
        max-width: 280px !important;
        padding: 0.875rem 1.5rem !important;
        font-size: 0.9375rem !important;
    }

    .hero-button-animate .btn-premium-outline {
        flex: 0 0 auto !important;
        min-width: 100px !important;
        padding: 0.8rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }

    /* Remove margin-right on mobile */
    .hero-button-animate .btn-premium.me-3,
    .hero-button-animate .btn-premium-outline.me-3 {
        margin-right: 0 !important;
    }
}

/* Extra Small Mobile (< 480px) - Stack buttons */
@media (max-width: 479.98px) {
    .hero-button-animate {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    .hero-button-animate .btn-premium,
    .hero-button-animate .btn-premium-outline {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        justify-content: center !important;
    }

    .hero-button-animate .btn-premium {
        padding: 0.875rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }

    .hero-button-animate .btn-premium-outline {
        padding: 0.8rem 1.25rem !important;
        font-size: 0.9375rem !important;
    }
}

/* Very Small Mobile (< 375px) */
@media (max-width: 374.98px) {

    .hero-button-animate .btn-premium,
    .hero-button-animate .btn-premium-outline {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }
}

/* ========================================
   8. MODAL DISPLAY FIX
   Ensure modals display properly on mobile
   ======================================== */

/* Ensure modal shows when .show class is added */
.modal.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.modal.fade.show {
    opacity: 1 !important;
}

.modal.show .modal-dialog {
    transform: none !important;
    opacity: 1 !important;
}

/* Modal backdrop */
.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* Ensure modal is above everything */
#mpProductsModal {
    z-index: 1055 !important;
}

#mpProductsModal.show {
    display: block !important;
}

/* Mobile modal fullscreen */
@media (max-width: 575.98px) {
    #mpProductsModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100vh !important;
        min-height: 100vh !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
    }

    #mpProductsModal .modal-content {
        height: 100vh !important;
        min-height: 100vh !important;
        border-radius: 0 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    #mpProductsModal .modal-body {
        max-height: calc(100vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Ensure body scrolling works when modal is closed */
    body:not(.modal-open) {
        overflow: visible !important;
        position: static !important;
        height: auto !important;
    }

    /* Fix body scrolling when modal is open */
    body.modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100vh !important;
    }
}

/* ========================================
   15. HERO CHECKLIST OPTIMIZATION
   ======================================== */

/* Tablet & Mobile: Single-column standard layout (Matches Accounting Page) */
@media (max-width: 991.98px) {
    /* Hero checklist responsive styles now in home.css with fluid typography */
    .modern-hero-section .hero-check-icon {
        flex-shrink: 0 !important;
    }
}

@media (max-width: 575.98px) {
    /* Styles already handled in home.css media queries */
}

/* Ensure buttons have enough spacing */
.modern-hero-section .hero-button-animate {
    margin-top: 0 !important;
}

@media (max-width: 767.98px) {
    .modern-hero-section .hero-button-animate {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 1rem !important;
    }

    .modern-hero-section .hero-button-animate .btn-premium,
    .modern-hero-section .hero-button-animate .btn-premium-outline {
        width: 100% !important;
        max-width: 100% !important;
        justify-content: center !important;
        display: flex !important;
    }
}

/* ========================================
   END OF RESPONSIVE OPTIMIZATION
   ======================================== */

/* ===== disable-all-hover-animations.css ===== */
/* ========================================
   DISABLE ALL HOVER ANIMATIONS, SHADOWS, AND CARD EFFECTS
   Remove all hover effects, shadows, and card styling from images and icons
   Last Updated: January 2026
   ======================================== */

/* ========================================
   MASTER OVERRIDE - NO HOVER EFFECTS ON ANY ICONS OR IMAGES
   This section uses maximum specificity to disable ALL hover effects
   ======================================== */

/* COMPLETELY DISABLE ALL ICON AND IMAGE HOVER EFFECTS */
/* EXCLUDES: Button SVGs, Carousel Nav Buttons, Carousel Buttons, Testimonial Stars */
img:hover,
svg:hover:not(.btn-premium svg):not(.btn-primary svg):not(.cta-button svg):not(.carousel-nav-btn svg):not(.carousel-btn svg):not(.testimonial-stars-new svg),
picture:hover,
[class*="icon"]:hover:not(.btn-premium svg):not(.btn-primary svg):not(.carousel-nav-btn):not(.carousel-nav-btn *):not(.carousel-btn):not(.carousel-btn *):not(.hero-check-icon):not(.benefit-check-icon):not(.acc-feature-icon),
[class*="Icon"]:hover:not(.btn-premium svg):not(.btn-primary svg):not(.carousel-nav-btn):not(.carousel-nav-btn *):not(.carousel-btn):not(.carousel-btn *):not(.hero-check-icon):not(.benefit-check-icon),
[class*="image"]:hover,
[class*="Image"]:hover,
[class*="img"]:hover,
[class*="logo"]:hover,
[class*="Logo"]:hover,
/* DISABLED: These *:hover rules cause cookie banner flickering
*:hover > img,
*:hover > svg,
*:hover > [class*="icon"],
*:hover [class*="icon"],
*:hover [class*="Icon"],
*/
div:not(#cookieConsentBanner):not(.cookie-consent-overlay):not(.cookie-consent-content):not(.testimonial-carousel-wrapper):hover img,
div:not(#cookieConsentBanner):not(.cookie-consent-overlay):not(.cookie-consent-content):not(.testimonial-carousel-wrapper):hover svg:not(.btn-premium svg):not(.btn-primary svg):not(.carousel-nav-btn svg):not(.carousel-btn svg):not(.testimonial-stars-new svg),
a:not(.btn-premium):not(.btn-primary):not(.carousel-nav-btn):not(.carousel-btn):not(.cookie-btn):hover img,
a:not(.btn-premium):not(.btn-primary):not(.carousel-nav-btn):not(.carousel-btn):not(.cookie-btn):hover svg:not(.carousel-nav-btn svg):not(.carousel-btn svg) {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    filter: none !important;
    -webkit-filter: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

/* Disable transitions on all icons and images - EXCEPT carousel buttons and testimonial stars */
img,
svg:not(.carousel-nav-btn svg):not(.carousel-btn svg):not(.testimonial-stars-new svg),
picture,
[class*="icon"]:not(.carousel-nav-btn):not(.carousel-nav-btn *):not(.carousel-btn):not(.carousel-btn *):not(.hero-check-icon):not(.benefit-check-icon):not(.acc-feature-icon),
[class*="Icon"]:not(.carousel-nav-btn):not(.carousel-nav-btn *):not(.carousel-btn):not(.carousel-btn *):not(.hero-check-icon):not(.benefit-check-icon),
[class*="image"],
[class*="Image"] {
    transition: none !important;
    -webkit-transition: none !important;
    animation: none !important;
    -webkit-animation: none !important;
}

/* CRITICAL: Allow carousel buttons to have transitions */
.carousel-btn,
.carousel-btn-prev,
.carousel-btn-next,
.carousel-btn svg,
.carousel-btn-prev svg,
.carousel-btn-next svg {
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, stroke 0.25s ease !important;
    -webkit-transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, stroke 0.25s ease !important;
}

/* ========================================
   MOBILE NAVBAR - ALLOW PROPER FUNCTIONALITY
   Mobile hamburger and accordion buttons should work properly
   ======================================== */

/* Mobile hamburger button - allow transitions and hover */
button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"],
button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"]:hover,
button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] svg,
button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"]:hover svg,
.mobile-menu-toggle,
.mobile-menu-toggle:hover,
.navbar-toggler,
.navbar-toggler:hover {
    transition: background-color 0.2s ease, color 0.2s ease !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile menu elements - allow proper display */
#mobileNavbar,
#mobileNavbar *,
#mobileNavbar .accordion-button,
#mobileNavbar .accordion-button:hover,
#mobileNavbar .accordion-button svg,
#mobileNavbar .accordion-button::after,
#mobileNavbar .nav-link-mobile,
#mobileNavbar .nav-link-mobile:hover,
#mobileNavbar .mobile-nav-section-btn,
#mobileNavbar .mobile-nav-section-btn:hover,
#mobileNavbar .btn-premium,
#mobileNavbar .btn-premium:hover,
#mobileNavbar a,
#mobileNavbar a:hover,
#mobileNavbar button,
#mobileNavbar button:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* Allow accordion arrow rotation in mobile menu */
#mobileNavbar .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
}

/* CRITICAL: Testimonial stars should have NO transitions or hover effects */
.testimonial-stars-new,
.testimonial-stars-new svg {
    transition: none !important;
    -webkit-transition: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    pointer-events: none !important;
}

/* Force full opacity and no filters on ALL images at ALL times */
img,
img:hover,
picture,
picture:hover,
[class*="image"] img,
[class*="image"]:hover img,
[class*="Image"] img,
[class*="Image"]:hover img {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* ========================================
   0. MASTER RULES - REMOVE ALL IMAGE SHADOWS AND BORDERS
   ======================================== */

/* Remove ALL shadows and borders from ALL images globally */
img,
picture,
.img-fluid,
.section-image img,
.fbr-image-wrapper img,
.fbr-image img,
.hero-main-image,
.home-hero-image,
.hero-dashboard-image,
.hero-image-wrapper img,
.hero-form-wrapper img,
.feature-image img,
.pos-hero-image,
.pos-dashboard-image,
[class*="image"] img,
[class*="Image"] img {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    outline: none !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Remove shadow-lg, rounded classes effect */
.shadow-lg,
.shadow-md,
.shadow-sm,
.shadow,
img.shadow-lg,
img.shadow-md,
img.shadow-sm,
img.shadow,
.rounded-3,
.rounded-2,
.rounded-1,
.rounded {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ========================================
   1. REMOVE ALL IMAGE WRAPPER CARD STYLING
   ======================================== */

/* Remove card/container styling from image wrappers */
.hero-image-wrapper,
.hero-form-wrapper,
.hero-form-container,
.section-image,
.fbr-image-wrapper,
.fbr-image,
.paperless-image-wrapper,
.feature-image,
.pos-hero-wrapper,
[class*="image-wrapper"],
[class*="Image-wrapper"] {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    outline: none !important;
}

/* ========================================
   2. DISABLE ALL IMAGE HOVER EFFECTS
   ======================================== */

/* Master hover disable for ALL images */
img:hover,
picture:hover,
.img-fluid:hover,
.section-image:hover,
.section-image:hover img,
.section-image img:hover,
.fbr-image-wrapper:hover,
.fbr-image-wrapper:hover img,
.fbr-image:hover,
.fbr-image:hover img,
.hero-main-image:hover,
.home-hero-image:hover,
.hero-dashboard-image:hover,
.hero-image-wrapper:hover,
.hero-image-wrapper:hover img,
.hero-form-wrapper:hover,
.hero-form-wrapper:hover img,
.paperless-image-wrapper:hover,
.paperless-image-wrapper:hover img,
.feature-image:hover,
.feature-image:hover img,
.pos-hero-image:hover,
.pos-dashboard-image:hover,
[class*="image"]:hover,
[class*="image"]:hover img,
[class*="Image"]:hover,
[class*="Image"]:hover img {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    opacity: 1 !important;
}

/* ========================================
   3. DISABLE ALL ICON HOVER EFFECTS
   ======================================== */

/* Remove ALL icon hover effects */
svg:hover,
[class*="icon"]:hover,
[class*="Icon"]:hover,
.why-card-icon:hover,
.benefit-icon-wrapper:hover,
.feature-icon-wrapper:hover,
.fbr-feature-icon:hover,
.app-card-icon:hover,
.product-icon:hover,
.industry-icon-wrapper:hover,
.dropdown-icon:hover,
.social-icon:hover,
.social-icon-pro:hover,
.stat-icon-new:hover,
.stat-icon:hover,
.pricing-plan-icon:hover,
.pos-option-icon:hover,
.mp-products-card__icon-wrapper:hover,
.features-inner-sectio-icon:hover,
.empowering-businesses-section .stat-icon:hover,
.empowering-businesses-section .stat-card:hover .stat-icon {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    transition: none !important;
}

/* Disable icon transitions */
svg,
[class*="icon"],
[class*="Icon"] {
    transition: none !important;
    -webkit-transition: none !important;
}

/* ========================================
   4. DISABLE ALL CARD HOVER EFFECTS
   ======================================== */

/* Remove ALL card hover transformations - EXCEPT COOKIE ELEMENTS */
.why-card:hover,
.benefit-card-modern:hover,
.benefit-card:hover,
.testimonial-card:hover,
.testimonial-card-growth:hover,
.product-card:hover,
.industry-card:hover,
.modern-card:hover,
.app-selection-card:hover,
.cta-card-growth:hover,
.feature-card:hover,
.pricing-card:hover,
.pos-pricing-card:hover,
[class*="card"]:hover:not(.cookie-option-card):not([class*="cookie"]),
[class*="Card"]:hover:not(.cookie-option-card):not([class*="cookie"]) {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
}

/* Disable card transitions */
.why-card,
.benefit-card-modern,
.benefit-card,
.testimonial-card,
.testimonial-card-growth,
.product-card,
.industry-card,
.modern-card,
.app-selection-card,
.cta-card-growth,
.feature-card,
.pricing-card,
.pos-pricing-card {
    transition: none !important;
    -webkit-transition: none !important;
}

/* ========================================
   5. DISABLE CARD ICON HOVER EFFECTS
   ======================================== */

/* When card is hovered, icons should not animate */
.why-card:hover .why-card-icon,
.benefit-card-modern:hover .benefit-icon-wrapper,
.app-selection-card:hover .app-card-icon,
.product-card:hover .product-icon,
.industry-card:hover .industry-icon-wrapper,
.pos-pricing-card:hover .pricing-plan-icon,
[class*="card"]:hover [class*="icon"],
[class*="Card"]:hover [class*="icon"] {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* ========================================
   6. DISABLE PSEUDO-ELEMENT HOVER EFFECTS
   ======================================== */

/* Remove ::before and ::after animations on hover */
.why-card:hover::before,
.why-card:hover::after,
.benefit-card-modern:hover::before,
.benefit-card-modern:hover::after,
.testimonial-card-growth:hover::before,
.testimonial-card-growth:hover::after,
.section-image:hover::before,
.section-image:hover::after,
.section-content:hover::before,
.section-content:hover::after,
[class*="card"]:hover::before,
[class*="card"]:hover::after {
    transform: none !important;
    -webkit-transform: none !important;
    opacity: 0 !important;
    display: none !important;
}

/* ========================================
   7. SPECIFIC PAGE IMAGE FIXES
   ======================================== */

/* Accounting page */
.accounting-page img,
.accounting-page .hero-main-image,
.accounting-page .home-hero-image,
.accounting-page .section-image img,
.accounting-page .fbr-image-wrapper img {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.accounting-page img:hover,
.accounting-page .hero-main-image:hover,
.accounting-page .section-image:hover img {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* FBR page */
.fbr-page img,
.fbr-page .fbr-image-wrapper img,
.fbr-page .hero-main-image {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.fbr-page img:hover,
.fbr-page .fbr-image-wrapper:hover img {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
}

/* POS pages */
.pos-page img,
[class*="pos"] img {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* ========================================
   8. TRUSTED BY / LOGO IMAGES
   ======================================== */

.trusted-by-section img,
.trusted-by-card img,
.company-logo-wrapper img,
.trusted-by-img {
    box-shadow: none !important;
    border: none !important;
    transition: opacity 0.2s ease !important;
}

.trusted-by-section img:hover,
.trusted-by-card:hover img,
.company-logo-wrapper img:hover {
    transform: none !important;
    scale: 1 !important;
    filter: grayscale(0) opacity(1) !important;
    box-shadow: none !important;
}

/* ========================================
   9. HEADER / FOOTER IMAGES AND ICONS
   ======================================== */

/* Header logo */
.header-logo,
.header-logoo,
.navbar-brand img,
.header-logo-animated img {
    box-shadow: none !important;
    border: none !important;
}

.header-logo:hover,
.navbar-brand:hover img,
.header-logo-animated:hover img {
    transform: none !important;
    scale: 1 !important;
}

/* Footer */
.modern-footer img,
.modern-footer svg,
.modern-footer [class*="icon"],
.footer-logo,
.footer-logo-img,
.footer-brand-link,
.footer-brand-link img,
footer .footer-brand-link,
footer .footer-brand-link img,
footer a.footer-brand-link,
footer a.footer-brand-link img {
    box-shadow: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    animation: none !important;
    -webkit-animation: none !important;
}

.modern-footer img:hover,
.modern-footer svg:hover,
.modern-footer [class*="icon"]:hover,
.footer-logo:hover,
.footer-logo-img:hover,
.footer-brand-link:hover,
.footer-brand-link:hover img,
footer .footer-brand-link:hover,
footer .footer-brand-link:hover img,
footer a.footer-brand-link:hover,
footer a.footer-brand-link:hover img {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    box-shadow: none !important;
    background: transparent !important;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
}

/* ========================================
   10. SOCIAL ICONS
   ======================================== */

.social-icon,
.social-icon-pro,
.social-icon img,
.social-icon svg {
    box-shadow: none !important;
    transition: none !important;
}

.social-icon:hover,
.social-icon-pro:hover,
.social-icon:hover img,
.social-icon:hover svg {
    transform: none !important;
    scale: 1 !important;
    box-shadow: none !important;
}

/* ========================================
   11. DROPDOWN ICONS
   ======================================== */

.dropdown-icon,
.dropdown-icon img,
.dropdown-icon svg {
    box-shadow: none !important;
}

.dropdown-icon:hover,
.dropdown-item-modern:hover .dropdown-icon {
    transform: none !important;
    scale: 1 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ========================================
   12. BUTTON HOVER (Keep color changes only)
   ======================================== */

.btn-premium:hover,
.btn-premium-outline:hover {
    transform: none !important;
    scale: 1 !important;
}

/* DISABLED: Button arrow animation causes layout shift
.btn-premium:hover svg,
.btn-premium-outline:hover svg {
    transform: none !important;
}
*/

/* CRITICAL: Button SVGs must have NO background/box/outline */
.btn-premium svg,
.btn-primary svg,
.btn-premium-outline svg,
.hero-button-animate .btn-premium svg,
.cta-button svg,
a.btn-premium svg,
button.btn-premium svg {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.btn-premium:hover svg,
.btn-primary:hover svg,
.btn-premium-outline:hover svg,
.hero-button-animate .btn-premium:hover svg,
a.btn-premium:hover svg,
button.btn-premium:hover svg {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    outline: none !important;
}

/* ========================================
   13. MOBILE - DISABLE ALL HOVER - EXCEPT COOKIE ELEMENTS
   ======================================== */

@media (max-width: 991px) {
    /* DISABLED: This *:hover rule causes cookie banner flickering
    *:hover:not([class*="cookie"])... {
        transform: none !important;
    }
    */
    
    img, svg, [class*="icon"], [class*="card"]:not([class*="cookie"]) {
        transition: none !important;
    }
}

/* ========================================
   14. NUCLEAR OPTION - FORCE ALL STATIC - EXCEPT COOKIE ELEMENTS
   ======================================== */

/* DISABLED: These wildcard rules cause cookie banner flickering
   The *[class*="..."] selectors still match cookie elements unpredictably
*/
/*
*[class*="image"]:hover:not([class*="cookie"]),
*[class*="Image"]:hover:not([class*="cookie"]),
... {
    transform: none !important;
}
*/

/* Force remove ALL shadows from images */
img[class*="shadow"],
[class*="shadow"] img,
.shadow img,
.shadow-lg img,
.shadow-md img,
.shadow-sm img {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ========================================
   EMPOWERING BUSINESSES SECTION - ICON HOVER FIX
   ======================================== */

/* Force no hover effects on empowering section icons */
.empowering-businesses-section-new .stat-icon-new,
.empowering-businesses-section-new .stat-icon-new:hover,
.empowering-businesses-section-new .stat-card-new:hover .stat-icon-new,
.empowering-businesses-section-new .stat-icon-new svg,
.empowering-businesses-section-new .stat-icon-new svg:hover,
.empowering-businesses-section-new .stat-card-new:hover .stat-icon-new svg {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    transition: none !important;
    -webkit-transition: none !important;
    will-change: auto !important;
}

/* ========================================
   WHY MONEYPEX / WHY CARD - ICON HOVER FIX
   ======================================== */

/* Force no hover effects on why-card icons */
.why-card-icon,
.why-card-icon:hover,
.why-card:hover .why-card-icon,
.modern-why-card:hover .why-card-icon,
.why-moneypex-section .why-card:hover .why-card-icon,
.why-moneypex-section .why-card-icon {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    will-change: auto !important;
}

/* Prevent background changes on why-card icon hover */
.why-card:hover .why-card-icon,
.modern-why-card:hover .why-card-icon,
.why-moneypex-section .why-card:hover .why-card-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
}

/* Hide pseudo-elements that create hover effects */
.why-card-icon::before,
.why-card-icon::after,
.why-card:hover .why-card-icon::before,
.why-card:hover .why-card-icon::after,
.modern-why-card:hover .why-card-icon::after {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Force no hover effects on SVGs inside why-card icons */
.why-card-icon svg,
.why-card-icon svg:hover,
.why-card:hover .why-card-icon svg {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
}

/* ========================================
   ALL CARD ICON HOVER EFFECTS - DISABLED
   ======================================== */

/* Benefit card icons */
.benefit-icon-wrapper,
.benefit-icon-wrapper:hover,
.benefit-card-modern:hover .benefit-icon-wrapper {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transition: none !important;
}

/* Modern card icons */
.modern-card-icon,
.modern-card-icon:hover,
.modern-card:hover .modern-card-icon {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    border: none !important;
    transition: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Feature icons */
.feature-icon-wrapper,
.feature-icon-wrapper:hover,
.feature-card:hover .feature-icon-wrapper,
.paperless-feature-icon,
.paperless-feature-icon:hover,
.paperless-feature-item:hover .paperless-feature-icon {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transition: none !important;
}

/* App card icons */
.app-card-icon,
.app-card-icon:hover,
.app-selection-card:hover .app-card-icon {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Product icons */
.product-icon,
.product-icon:hover,
.product-card:hover .product-icon,
.product-item:hover .product-icon,
.product-item.active .product-icon {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    box-shadow: none !important;
    transition: none !important;
    background: transparent !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Product icon SVGs */
.product-icon svg,
.product-icon svg:hover,
.product-item:hover .product-icon svg {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
}

/* MP Products Card Icon Wrapper - Explore Full Range section */
.mp-products-card__icon-wrapper,
.mp-products-card__icon-wrapper:hover {
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 5px 10px -5px rgba(0, 0, 0, 0.04) !important;
    transition: none !important;
    background: white !important;
}

.mp-products-card__icon-wrapper svg,
.mp-products-card__icon-wrapper svg:hover {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
}

/* Industry icons */
.industry-icon-wrapper,
.industry-icon-wrapper:hover,
.industry-card:hover .industry-icon-wrapper {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Generic icon-wrapper hover disable */
[class*="icon-wrapper"],
[class*="icon-wrapper"]:hover,
[class*="-icon"]:hover,
.icon-wrapper,
.icon-wrapper:hover {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    rotate: 0deg !important;
    box-shadow: none !important;
    transition: none !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Icon SVGs inside wrappers */
[class*="icon-wrapper"] svg,
[class*="icon-wrapper"] svg:hover,
[class*="icon-wrapper"]:hover svg {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
}

/* FBR feature icons */
.fbr-feature-icon,
.fbr-feature-icon:hover {
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* POS icons */
.pos-feature-icon,
.pos-feature-icon:hover,
.pos-option-icon,
.pos-option-icon:hover {
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* Pricing plan icons */
.pricing-plan-icon,
.pricing-plan-icon:hover,
.pos-pricing-card:hover .pricing-plan-icon {
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: none !important;
    transition: none !important;
}

/* ========================================
   COOKIE CONSENT - ALLOW HOVER EFFECTS
   Must come AFTER all the disable rules above
   ======================================== */

/* Allow cookie consent banner and modal to have hover effects */
#cookieConsentModal,
#cookieConsentModal *,
#cookieConsentBanner,
#cookieConsentBanner *,
.cookie-consent-overlay,
.cookie-consent-overlay *,
.cookie-consent-content,
.cookie-consent-content *,
.cookie-option-card,
.cookie-option-card *,
.cookie-btn,
.cookie-btn *,
.cookie-btn-primary,
.cookie-btn-primary *,
.cookie-btn-secondary,
.cookie-btn-secondary *,
.cookie-consent-close,
.cookie-consent-close *,
[class*="cookie-consent"],
[class*="cookie-consent"] *,
[class*="cookie"] {
    /* Re-enable transitions for cookie elements */
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
}

/* Cookie buttons - NO transforms to prevent flickering */
.cookie-btn,
.cookie-btn:hover,
.cookie-btn-primary,
.cookie-btn-primary:hover,
.cookie-btn-secondary,
.cookie-btn-secondary:hover {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   END OF STYLES
   ======================================== */


/* ===== layout-stability.css ===== */
/* ========================================
   LAYOUT STABILITY CSS
   Removes ALL hover effects that cause layout shifts
   Ensures UI remains identical with or without cursor
   ======================================== */

/* ========================================
   0.1. CRITICAL - REMOVE ALL ICON BACKGROUNDS GLOBALLY
   This is the MASTER RULE that removes gradient backgrounds from ALL icons
   ======================================== */

/* Remove ALL gradient backgrounds from ALL icons - MASTER OVERRIDE */
/* EXCLUDE: testimonial stars, carousel buttons, hero check icons, benefit check icons */
[class*="icon"]:not(.hero-check-icon):not(.testimonial-stars-new svg):not(.carousel-btn svg):not(.benefit-check-icon):not(.benefit-check-icon svg):not(.acc-feature-icon),
[class*="Icon"]:not(.hero-check-icon):not(.benefit-check-icon),
.why-card-icon,
.stat-icon,
.stat-icon-new,
.benefit-icon-wrapper,
.feature-icon-wrapper,
.features-inner-sectio-icon,
.mtd-feature-icon,
.fbr-feature-icon,
.paperless-feature-icon,
.app-card-icon,
.product-icon,
.modern-product-icon,
.industry-icon-wrapper,
.dropdown-icon,
.social-icon,
.social-icon-pro,
.pricing-plan-icon,
.pos-option-icon,
.hardware-icon,
.compliance-feature-icon,
.feature-grid-icon,
.benefit-icon,
.icon-wrapper,
.icon-bg-blue,
.icon-bg-green,
.icon-bg-yellow,
.icon-bg-purple,
.icon-bg-pink,
.icon-bg-emerald,
.icon-bg-red,
.modern-card-icon,
.why-moneypex-section .why-card-icon,
.empowering-businesses-section .stat-icon,
.accounting-page .why-card-icon,
.accounting-page .benefit-icon,
.accounting-page .feature-grid-icon,
.accounting-page .compliance-feature-icon,
.fbr-page .icon-wrapper,
.fbr-page .benefit-icon-wrapper,
.fbr-page .fbr-feature-icon,
.fbr-step-number,
.cta-card-growth>div:first-child,
.pos-trial-badge,
.fbr-cta-wrapper .fbr-feature-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: none !important;
}

/* CRITICAL: Preserve testimonial star icons - gold fill, no background changes */
.testimonial-stars-new,
.testimonial-stars-new svg,
.testimonial-card-new .testimonial-stars-new,
.testimonial-card-new .testimonial-stars-new svg {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

/* CRITICAL: Preserve carousel buttons - they need backgrounds */
.carousel-btn,
.carousel-btn-prev,
.carousel-btn-next {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* CRITICAL: Preserve Key Features card icons - they need backgrounds */
/*.acc-feature-icon {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-radius: 12px !important;
}*/

/* Remove ALL gradient backgrounds on hover too */
/* EXCLUDE: testimonial stars, carousel buttons, hero check icons, benefit check icons */
[class*="icon"]:hover:not(.hero-check-icon):not(.benefit-check-icon):not(.acc-feature-icon),
[class*="Icon"]:hover:not(.hero-check-icon):not(.benefit-check-icon),
.why-card:hover .why-card-icon,
.stat-card:hover .stat-icon,
.empowering-businesses-section .stat-card:hover .stat-icon,
.benefit-card-modern:hover .benefit-icon-wrapper,
.feature-card:hover .feature-icon-wrapper,
.app-selection-card:hover .app-card-icon,
.product-item:hover .product-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Preserve carousel button hover states */
.carousel-btn:hover,
.carousel-btn-prev:hover,
.carousel-btn-next:hover {
    background: #1E5CAA !important;
    background-color: #1E5CAA !important;
    border: 1px solid #1E5CAA !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(30, 92, 170, 0.3) !important;
}

/* Preserve Key Features card icons on hover */
/*.acc-feature-icon:hover,
.acc-feature-card:hover .acc-feature-icon {*/
/*    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    border-radius: 12px !important;
}*/

/* DISABLED: *:hover [class*="icon"] rules cause cookie flickering
*:hover [class*="icon"],
*:hover [class*="Icon"] {
    background: transparent !important;
}
*/

/* ========================================
   0.2. CRITICAL - REMOVE ALL IMAGE OPACITY/FILTER CHANGES
   Prevent images from fading or changing appearance on hover
   ======================================== */

/* Force ALL images to maintain full opacity and no filters */
img,
img:hover,
picture,
picture:hover,
.section-image img,
.section-image:hover img,
.section-image img:hover,
.hero-main-image,
.hero-main-image:hover,
.home-hero-image,
.home-hero-image:hover,
.hero-dashboard-image,
.hero-dashboard-image:hover,
.hero-image-wrapper img,
.hero-image-wrapper:hover img,
.hero-form-wrapper img,
.hero-form-wrapper:hover img,
.fbr-image-wrapper img,
.fbr-image-wrapper:hover img,
.fbr-image img,
.fbr-image:hover img,
.paperless-image-wrapper img,
.paperless-image-wrapper:hover img,
.feature-image img,
.feature-image:hover img,
.pos-hero-image,
.pos-hero-image:hover,
.pos-dashboard-image,
.pos-dashboard-image:hover,
[class*="image"] img,
[class*="image"]:hover img,
[class*="Image"] img,
[class*="Image"]:hover img,
.trusted-by-section img,
.trusted-by-section img:hover,
.trusted-by-card img,
.trusted-by-card:hover img,
.company-logo-wrapper img,
.company-logo-wrapper:hover img {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* DISABLED: *:hover img rules cause cookie flickering
*:hover img,
*:hover picture {
    opacity: 1 !important;
}
*/

/* Remove opacity from image wrappers */
.section-image,
.section-image:hover,
.hero-image-wrapper,
.hero-image-wrapper:hover,
.hero-form-wrapper,
.hero-form-wrapper:hover,
.fbr-image-wrapper,
.fbr-image-wrapper:hover,
.paperless-image-wrapper,
.paperless-image-wrapper:hover,
[class*="image-wrapper"],
[class*="image-wrapper"]:hover {
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* ========================================
   0. MODAL PROTECTION - Exclude modals from stability rules
   ======================================== */
/* Allow Bootstrap modals to work normally - only exclude from specific rules */
.modal,
.modal-dialog,
.modal-content,
.modal-header,
.modal-body,
.modal-footer,
.modal-backdrop,
#cookieConsentModal,
#cookieConsentModal *,
#mpProductsModal,
#mpProductsModal * {
    /* Allow Bootstrap defaults - don't override with revert */
    transition: opacity 0.15s linear !important;
    -webkit-transition: opacity 0.15s linear !important;
}

/* ========================================
   1. GLOBAL RULES - NO HOVER TRANSFORMS
   ======================================== */

/* DISABLED: Global *:hover rules cause cookie banner flickering
   These rules break because :not() with descendant selectors doesn't work reliably.
   Use targeted element selectors instead (see section below).
*/
/*
*:hover:not(.modal):not(.modal *)... {
    transform: none !important;
}
*/

/* Ensure no element changes size/position on hover */
.hero-card-animate:hover .hero-card-inner,
.modern-hero-btn:hover,
.modern-hero-btn:active,
.trusted-by-carousel .trusted-by-card:hover,
.modern-hero-section .hero-form-wrapper:hover,
.modern-hero-section .modern-form .btn-modern:hover,
.modern-hero-section .modern-form .btn-modern:active,
.explore-feature-item:hover,
.modern-faq .accordion-item:hover,
.paperless-feature-item:hover,
.paperless-cta .btn-premium:hover,
.paperless-cta .btn-premium:hover svg,
.paperless-image-wrapper:hover,
.modern-card:hover,
.modern-card:hover::before,
.why-card:hover,
.why-moneypex-section .why-card:hover,
.why-moneypex-section .why-card:hover::before,
.benefit-card-modern:hover,
.product-item:hover,
.industry-card-inner:hover,
.testimonial-card-growth:hover,
.pricing-card:hover,
.modern-pricing-card:hover,
.stat-card-new:hover,
.cta-card-growth:hover,
.btn-premium:hover,
.btn-premium:hover svg,
.btn-primary:hover,
.btn-premium-outline:hover,
.cta-button:hover,
.feature-card:hover,
.app-selection-card:hover,
.mtd-feature-item:hover,
.pos-option-card:hover,
.hardware-card:hover,
.risk-card:hover,
.process-card:hover,
.stakeholder-card:hover,
.compliance-card:hover,
.workflow-card:hover,
.pain-point-card:hover,
.fbr-feature-card:hover,
a:hover:not([class*="cookie"]):not(.cookie-btn):not(#cookieConsentBanner *):not(#cookieConsentModal *):not(.cookie-consent-overlay *),
button:hover:not([class*="cookie"]):not(.cookie-btn):not(.cookie-consent-close):not(#cookieConsentBanner *):not(#cookieConsentModal *):not(.cookie-consent-overlay *),
.card:hover:not(.cookie-option-card),
[class*="card"]:hover:not(#cookieConsentModal *):not(.cookie-option-card):not(.cookie-option-card *):not([class*="cookie"]),
[class*="Card"]:hover:not(#cookieConsentModal *):not(.cookie-option-card):not(.cookie-option-card *):not([class*="cookie"]),
[class*="item"]:hover:not(#cookieConsentModal *):not([class*="cookie"]),
[class*="Item"]:hover:not(#cookieConsentModal *):not([class*="cookie"]) {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
}

/* ========================================
   2. NO Z-INDEX CHANGES ON HOVER - EXCLUDING MODALS
   ======================================== */

/* DISABLED: *:hover z-index rule causes cookie flickering
*:hover:not(.modal *)... {
    z-index: auto !important;
}
*/

.explore-feature-item:hover,
.explore-feature-item:hover~*,
[class*="card"]:hover:not(.modal-content):not(.mp-products-modal-content):not([class*="cookie"]),
[class*="item"]:hover:not(.modal *):not([class*="cookie"]) {
    z-index: auto !important;
}

/* Ensure modals have proper z-index */
.modal {
    z-index: 1050 !important;
}

.modal-backdrop {
    z-index: 1040 !important;
}

.modal-dialog {
    z-index: 1055 !important;
}

#mpProductsModal {
    z-index: 1060 !important;
}

#mpProductsModal .modal-dialog {
    z-index: 1065 !important;
}

#mpProductsModal .modal-content {
    z-index: 1070 !important;
}

/* ========================================
   3. NO BOX-SHADOW CHANGES ON HOVER
   ======================================== */

.hero-card-animate:hover .hero-card-inner,
.modern-hero-btn:hover,
.modern-hero-section .modern-form .btn-modern:hover,
.modern-faq .accordion-item:hover,
.paperless-cta .btn-premium:hover,
.paperless-image-wrapper:hover,
.modern-card:hover,
.why-card:hover,
.why-moneypex-section .why-card:hover,
.benefit-card-modern:hover,
.industry-card-inner:hover,
.testimonial-card-growth:hover,
.pricing-card:hover,
.modern-pricing-card:hover,
.stat-card-new:hover,
.cta-card-growth:hover,
.btn-premium:hover,
.btn-primary:hover,
.feature-card:hover,
.app-selection-card:hover,
.mtd-feature-item:hover,
.pos-option-card:hover,
.hardware-card:hover,
.risk-card:hover,
.process-card:hover,
.stakeholder-card:hover,
.compliance-card:hover,
.workflow-card:hover,
.pain-point-card:hover,
.fbr-feature-card:hover,
.card:hover,
[class*="card"]:hover,
[class*="Card"]:hover {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* ========================================
   4/5. (removed) Empty rulesets that were no-ops
   ======================================== */

/* Buttons should maintain their blue gradient on hover - DO NOT inherit white */
/* CRITICAL: Remove background: inherit for buttons - it causes white background */
/* Let the original button styles control the gradient background */

/* ========================================
   6. NO ANIMATIONS ON HOVER
   ======================================== */

.modern-hero-btn:hover,
.btn-premium:hover::before,
.paperless-cta .btn-premium:hover::before,
.modern-hero-section .modern-form .btn-modern:hover::before {
    animation: none !important;
    -webkit-animation: none !important;
}

/* DISABLED: *:hover::before/after rules cause cookie flickering
*:hover::before,
*:hover::after {
    animation: none !important;
}
*/

/* ========================================
   7. DISABLE ALL TRANSITIONS AND ANIMATIONS
   ======================================== */

/* DISABLED: These global wildcard rules cause cookie banner flickering.
   The :not() selector chains don't work reliably with descendant selectors.
   CSS specificity with *:not() and descendant combinators is fundamentally broken.
*/
/*
*:not(.modal)... {
    transition: none !important;
}
*:hover:not(.modal)... {
    transition: none !important;
}
*:hover:not(.modal)... {
    opacity: 1 !important;
}
*/

/* Allow background SVG elements to maintain their opacity */
[class*="-section"]::before,
[class*="-section"]::after,
.hero-bg-m,
[class*="svg-blob"] {
    opacity: 1 !important;
}

/* ========================================
   8. WIDTH/HEIGHT STABILITY
   ======================================== */

/* Use 100% instead of 100vw to prevent scrollbar layout shift */
html,
body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Fixed elements should use 100% width */
.modal-backdrop,
[class*="backdrop"],
.fixed-top,
.fixed-bottom,
.sticky-top {
    width: 100% !important;
}

/* ========================================
   9. PREVENT PSEUDO-ELEMENT TRANSFORMS
   ======================================== */

.modern-card::before,
.why-card::before,
.why-moneypex-section .why-card::before,
.why-card-icon::before,
.btn-premium::before,
.modern-hero-btn::before,
*::before,
*::after {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   10. EXPLORE FEATURES SECTION STABILITY
   ======================================== */

.explore-feature-item,
.explore-feature-item:hover,
.explore-feature-item.active,
.explore-features-visual,
.explore-features-right,
#featureDashboardImage {
    transform: none !important;
    -webkit-transform: none !important;
    z-index: auto !important;
    opacity: 1 !important;
}

/* ========================================
   11. CARDS - NO HOVER EFFECTS
   ======================================== */

.modern-card,
.modern-card:hover,
.why-card,
.why-card:hover,
.benefit-card-modern,
.benefit-card-modern:hover,
.product-item,
.product-item:hover,
.pricing-card,
.pricing-card:hover,
.modern-pricing-card,
.modern-pricing-card:hover,
.stat-card-new,
.stat-card-new:hover,
.testimonial-card-growth,
.testimonial-card-growth:hover,
.feature-card,
.feature-card:hover,
.app-selection-card,
.app-selection-card:hover,
.industry-card-inner,
.industry-card-inner:hover {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   12. BUTTONS - NO HOVER TRANSFORMS
   ======================================== */

.btn-premium,
.btn-premium:hover,
.btn-premium:active,
.btn-premium:focus,
.btn-primary,
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-premium-outline,
.btn-premium-outline:hover,
.btn-premium-outline:active,
.cta-button,
.cta-button:hover,
.cta-button:active,
.modern-hero-btn,
.modern-hero-btn:hover,
.modern-hero-btn:active,
.modern-form .btn-modern,
.modern-form .btn-modern:hover,
.modern-form .btn-modern:active {
    transform: none !important;
    -webkit-transform: none !important;
}

/* Button SVGs should not move */
.btn-premium svg,
.btn-premium:hover svg,
.btn-primary svg,
.btn-primary:hover svg,
.cta-button svg,
.cta-button:hover svg {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   12a. BUTTONS - NO HOVER EFFECTS
   ======================================== */

/* Completely disable ALL hover effects on SOLID buttons - keep them static */
/* Solid buttons keep their default gradient, but NO changes on hover */
.btn-premium:hover,
.btn-primary:hover,
.cta-button:hover,
.hero-button-animate .btn-premium:hover,
.paperless-cta .btn-premium:hover,
.modern-hero-section .modern-form .btn-modern:hover,
.modern-hero-btn:hover {
    /* No transform effects - stay in place */
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    /* No box-shadow changes - keep default shadow */
    box-shadow: 0 10px 25px -5px rgba(30, 92, 170, 0.4), 0 8px 10px -6px rgba(30, 92, 170, 0.3) !important;
    -webkit-box-shadow: 0 10px 25px -5px rgba(30, 92, 170, 0.4), 0 8px 10px -6px rgba(30, 92, 170, 0.3) !important;
    /* No background changes - keep default gradient */
    background: linear-gradient(135deg, #1E5CAA 0%, #3b82f6 100%) !important;
    background-image: linear-gradient(135deg, #1E5CAA 0%, #3b82f6 100%) !important;
    /* No transitions */
    transition: none !important;
    -webkit-transition: none !important;
}

/* OUTLINE BUTTON - Separate hover rules (no gradient, use solid blue) */
.btn-premium-outline:hover,
a.btn-premium-outline:hover,
.hero-button-animate .btn-premium-outline:hover {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    /* Solid blue background for outline button hover */
    background: #1E5CAA !important;
    background-color: #1E5CAA !important;
    background-image: none !important;
    border-color: #1E5CAA !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(30, 92, 170, 0.3) !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* OUTLINE BUTTON DEFAULT STATE - White background with blue border */
.btn-premium-outline,
a.btn-premium-outline,
.hero-button-animate .btn-premium-outline {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #1E5CAA !important;
    color: #1E5CAA !important;
}

/* Disable button SVG arrow movements on hover */
.btn-premium svg,
.btn-premium:hover svg,
.btn-primary svg,
.btn-primary:hover svg,
.btn-premium-outline svg,
.btn-premium-outline:hover svg,
.cta-button svg,
.cta-button:hover svg,
.hero-button-animate .btn-premium svg,
.hero-button-animate .btn-premium:hover svg,
.paperless-cta .btn-premium svg,
.paperless-cta .btn-premium:hover svg,
.modern-hero-section .modern-form .btn-modern svg,
.modern-hero-section .modern-form .btn-modern:hover svg {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Disable button pseudo-element animations */
.btn-premium:hover::before,
.btn-premium:hover::after,
.btn-primary:hover::before,
.btn-primary:hover::after,
.cta-button:hover::before,
.cta-button:hover::after,
.hero-button-animate .btn-premium:hover::before,
.paperless-cta .btn-premium:hover::before,
.modern-hero-section .modern-form .btn-modern:hover::before {
    display: none !important;
    opacity: 0 !important;
    transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
}

/* ========================================
   13. IMAGES - NO HOVER EFFECTS
   ======================================== */

img,
img:hover,
picture,
picture:hover,
.hero-main-image,
.hero-main-image:hover,
.hero-dashboard-image,
.hero-dashboard-image:hover,
.home-hero-image,
.home-hero-image:hover,
.paperless-image-wrapper,
.paperless-image-wrapper:hover,
.paperless-image-wrapper img,
.paperless-image-wrapper:hover img,
.hero-form-wrapper,
.hero-form-wrapper:hover,
[class*="image"],
[class*="image"]:hover {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   14. FAQ ACCORDION - NO HOVER EFFECTS
   ======================================== */

.modern-faq .accordion-item,
.modern-faq .accordion-item:hover,
.accordion-item,
.accordion-item:hover,
.faq-item,
.faq-item:hover {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   15. NAVBAR - STABLE LAYOUT
   ======================================== */

.modern-navbar,
.navbar,
.nav-item,
.nav-item:hover,
.nav-link,
.nav-link:hover,
.dropdown-menu,
.modern-dropdown {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   15a. MOBILE NAVBAR - ALLOW PROPER FUNCTIONALITY
   ======================================== */

/* Mobile hamburger button - allow proper hover effects */
button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"],
button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"]:hover,
button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] svg,
button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"]:hover svg,
.mobile-menu-toggle,
.mobile-menu-toggle:hover,
.navbar-toggler,
.navbar-toggler:hover {
    transform: none !important;
    -webkit-transform: none !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Mobile menu accordion buttons - allow proper functionality */
#mobileNavbar .accordion-button,
#mobileNavbar .accordion-button:hover,
#mobileNavbar .accordion-button::after,
#mobileNavbar .nav-link-mobile,
#mobileNavbar .nav-link-mobile:hover,
#mobileNavbar .mobile-nav-section-btn,
#mobileNavbar .mobile-nav-section-btn:hover,
#mobileNavbar .btn-premium,
#mobileNavbar .btn-premium:hover {
    /* Allow mobile nav to work properly */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Allow accordion arrow rotation */
#mobileNavbar .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg) !important;
    -webkit-transform: rotate(180deg) !important;
}

/* ========================================
   16. TRUSTED BY CAROUSEL - ALLOW ANIMATION
   Allow carousel animation to work
   ======================================== */

/* CRITICAL: Re-enable animation for trusted-by-carousel */
.trusted-by-carousel {
    animation: scrollRight 70s linear infinite !important;
    -webkit-animation: scrollRight 70s linear infinite !important;
}

.trusted-by-carousel.reverse {
    animation: scrollLeft 70s linear infinite !important;
    -webkit-animation: scrollLeft 70s linear infinite !important;
}

/* Pause on hover */
.trusted-by-carousel:hover,
.trusted-by-carousel.reverse:hover {
    animation-play-state: paused !important;
    -webkit-animation-play-state: paused !important;
}

/* ========================================
   17. HERO SECTION - STABLE LAYOUT
   ======================================== */

.hero-card-animate,
.hero-card-animate:hover,
.hero-card-animate .hero-card-inner,
.hero-card-animate:hover .hero-card-inner,
.modern-hero-section .hero-form-wrapper,
.modern-hero-section .hero-form-wrapper:hover {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   18. MOBILE - ENSURE NO HOVER EFFECTS
   ======================================== */

/* DISABLED: This rule causes cookie banner flickering
@media (max-width: 991px) {
    *,
    *:hover,
    *:active,
    *:focus {
        transform: none !important;
    }
}
*/

/* ========================================
   19. FORCE STATIC LAYOUT
   ======================================== */

/* Ensure elements maintain their position */
.container,
.container-fluid,
.row,
.col,
[class*="col-"] {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   20. SCROLLBAR HANDLING
   ======================================== */

/* Prevent layout shift from scrollbar appearance */
html {
    scrollbar-gutter: stable !important;
    overflow-y: scroll !important;
}

/* Consistent scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #94a3b8;
    border-radius: 4px;
}

/* ========================================
   21. TITLE COLORS - NO HOVER CHANGES
   ======================================== */

.modern-card-title,
.modern-card:hover .modern-card-title,
.why-card-title,
.why-card:hover .why-card-title,
[class*="title"],
[class*="title"]:hover {
    /* no hover overrides here (keep source styles) */
    transition: none !important;
}

/* ========================================
   22. STAT CARDS - NO BACKGROUNDS OR BORDERS
   ======================================== */

/* Remove card backgrounds from empowering section */
.stat-card-new,
.stat-card-new:hover,
.empowering-businesses-section-new .stat-card-new,
.empowering-businesses-section-new .stat-card-new:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remove icon backgrounds */
.stat-icon-new,
.stat-icon-new:hover,
.stat-card-new:hover .stat-icon-new,
.empowering-businesses-section-new .stat-icon-new,
.empowering-businesses-section-new .stat-icon-new:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Why Moneypex Section - No card backgrounds */
.why-card,
.why-card:hover,
.why-moneypex-section .why-card,
.why-moneypex-section .why-card:hover {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Why Card Icons - No backgrounds */
.why-card-icon,
.why-card-icon:hover,
.why-card:hover .why-card-icon,
.why-moneypex-section .why-card-icon,
.why-moneypex-section .why-card-icon:hover,
.why-card-1 .why-card-icon,
.why-card-2 .why-card-icon,
.why-card-3 .why-card-icon,
.why-card-4 .why-card-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Remove ::after pseudo-element from why-card-icon */
.why-card-icon::after,
.why-moneypex-section .why-card-icon::after {
    display: none !important;
    content: none !important;
}

/* ========================================
   22.5. BOOTSTRAP MODAL - Allow default Bootstrap behavior
   ======================================== */

/* Ensure modals display correctly and have proper z-index */
.modal.show,
.modal.show .modal-dialog,
#cookieConsentModal.show,
#cookieConsentModal.show .modal-dialog {
    display: block !important;
    opacity: 1 !important;
}

.modal:not(.show) {
    display: none !important;
}

.modal-backdrop.show {
    opacity: 0.5 !important;
}

/* ========================================
   22.6. COOKIE CONSENT - COMPLETE ISOLATION FROM GLOBAL RULES
   All cookie elements must be fully isolated from global hover rules
   ======================================== */

/* Cookie modal and banner - ensure full visibility */
#cookieConsentModal,
#cookieConsentModal *,
#cookieConsentBanner,
#cookieConsentBanner *,
.cookie-consent-overlay,
.cookie-consent-overlay *,
.cookie-consent-container,
.cookie-consent-container *,
.cookie-consent-content,
.cookie-consent-content *,
.cookie-option-card,
.cookie-option-card *,
.cookie-checkbox,
.cookie-btn,
.cookie-btn-primary,
.cookie-btn-secondary,
.btn-save-cookies,
[class*="cookie-consent"],
[class*="cookie-consent"] * {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    -webkit-filter: none !important;
}

/* Cookie elements - allow transitions */
#cookieConsentModal,
#cookieConsentModal *,
#cookieConsentBanner,
#cookieConsentBanner *,
.cookie-consent-overlay,
.cookie-consent-overlay *,
.cookie-btn,
.cookie-btn-primary,
.cookie-btn-secondary,
.btn-save-cookies,
.cookie-option-card {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
    -webkit-transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease !important;
}

/* Cookie elements hover - prevent flickering and allow proper effects */
#cookieConsentModal:hover,
#cookieConsentModal *:hover,
#cookieConsentBanner:hover,
#cookieConsentBanner *:hover,
.cookie-consent-overlay:hover,
.cookie-consent-overlay *:hover,
.cookie-consent-content:hover,
.cookie-consent-content *:hover,
.cookie-option-card:hover,
.cookie-option-card *:hover,
.cookie-btn:hover,
.cookie-btn-primary:hover,
.cookie-btn-secondary:hover,
.btn-save-cookies:hover,
[class*="cookie-consent"]:hover,
[class*="cookie-consent"] *:hover {
    opacity: 1 !important;
    visibility: visible !important;
    filter: none !important;
    -webkit-filter: none !important;
    /* Do NOT set transform: none here - allow button transforms */
}

/* Cookie buttons - NO transforms to prevent flickering */
.cookie-btn,
.cookie-btn:hover,
.cookie-btn-primary,
.cookie-btn-primary:hover,
.cookie-btn-secondary,
.cookie-btn-secondary:hover {
    transform: none !important;
    -webkit-transform: none !important;
}

/* Cookie option card hover */
#cookieConsentModal .cookie-option-card:hover,
.cookie-option-card:hover {
    border-color: #d1d5db !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

/* Cookie checkbox */
#cookieConsentModal .cookie-checkbox,
.cookie-checkbox {
    transition: all 0.2s ease !important;
    -webkit-transition: all 0.2s ease !important;
}

/* Save button hover */
#cookieConsentModal .btn-save-cookies:hover,
.btn-save-cookies:hover {
    background: linear-gradient(135deg, #174a85 0%, #1d4ed8 100%) !important;
}

/* Cookie close button */
.cookie-consent-close,
.cookie-consent-close:hover {
    opacity: 1 !important;
    visibility: visible !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    -webkit-transition: background-color 0.2s ease, color 0.2s ease !important;
    transform: none !important;
    -webkit-transform: none !important;
}

.cookie-consent-close:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* CRITICAL OVERRIDE: Absolutely NO transforms on ANY cookie element */
#cookieConsentBanner,
#cookieConsentBanner *,
.cookie-consent-overlay,
.cookie-consent-overlay *,
.cookie-consent-container,
.cookie-consent-container *,
.cookie-consent-content,
.cookie-consent-content *,
.cookie-consent-header,
.cookie-consent-header *,
.cookie-consent-body,
.cookie-consent-body *,
.cookie-consent-actions,
.cookie-consent-actions *,
.cookie-btn,
.cookie-btn *,
.cookie-btn-primary,
.cookie-btn-primary *,
.cookie-btn-secondary,
.cookie-btn-secondary *,
.cookie-consent-close,
.cookie-consent-close * {
    transform: none !important;
    -webkit-transform: none !important;
}

#cookieConsentBanner:hover,
#cookieConsentBanner *:hover,
.cookie-consent-overlay:hover,
.cookie-consent-overlay *:hover,
.cookie-consent-container:hover,
.cookie-consent-container *:hover,
.cookie-consent-content:hover,
.cookie-consent-content *:hover,
.cookie-consent-header:hover,
.cookie-consent-header *:hover,
.cookie-consent-body:hover,
.cookie-consent-body *:hover,
.cookie-consent-actions:hover,
.cookie-consent-actions *:hover,
.cookie-btn:hover,
.cookie-btn *:hover,
.cookie-btn:hover *,
.cookie-btn-primary:hover,
.cookie-btn-primary *:hover,
.cookie-btn-primary:hover *,
.cookie-btn-secondary:hover,
.cookie-btn-secondary *:hover,
.cookie-btn-secondary:hover *,
.cookie-consent-close:hover,
.cookie-consent-close *:hover,
.cookie-consent-close:hover * {
    transform: none !important;
    -webkit-transform: none !important;
}

/* ========================================
   23. NAVBAR DROPDOWN - REMOVE ALL BORDERS AND HOVER EFFECTS
   ======================================== */

/* Remove right/left borders from dropdown items */
.dropdown-item-modern,
.dropdown-item-modern:hover,
.modern-dropdown .dropdown-item-modern,
.modern-dropdown.mega-menu .dropdown-item-modern,
.modern-dropdown.mega-menu>.p-3>ul>li,
.modern-dropdown.mega-menu>.p-3>ul>li>a,
.modern-dropdown.mega-menu li,
.modern-dropdown.mega-menu li a,
.modern-dropdown li,
.modern-dropdown li a {
    border: none !important;
    border-right: none !important;
    border-left: none !important;
    border-top: none !important;
    border-bottom: none !important;
}

/* Remove ALL pseudo-elements from dropdown items */
.dropdown-item-modern::before,
.dropdown-item-modern::after,
.modern-dropdown .dropdown-item-modern::before,
.modern-dropdown .dropdown-item-modern::after,
.modern-dropdown.mega-menu .dropdown-item-modern::before,
.modern-dropdown.mega-menu .dropdown-item-modern::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
}

/* Dropdown items - ALLOW hover effects (they're functional, not decorative) */
/* Keep hover effects for dropdown items - they're needed for UX */
.dropdown-item-modern:hover,
.modern-dropdown .dropdown-item-modern:hover,
.modern-dropdown.mega-menu .dropdown-item-modern:hover {
    /* Allow background and color changes for dropdown items */
    transform: none !important;
    -webkit-transform: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Dropdown icons - NO hover effect (icons/images must not change) */
.dropdown-icon,
.dropdown-icon:hover,
.dropdown-item-modern:hover .dropdown-icon,
.modern-dropdown .dropdown-item-modern:hover .dropdown-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
    -webkit-transform: none !important;
}

/* (removed) Cookie consent reset block:
   It was fighting Bootstrap/app.css and causing broken modal visuals. */

/* ========================================
   FOOTER - SUBTLE HOVER EFFECTS ALLOWED
   ======================================== */
footer a:hover,
footer .footer-link:hover,
.modern-footer a:hover,
.modern-footer .footer-link:hover {
    color: #cbd5e1 !important;
    text-decoration: none !important;
}

/* Footer Logo - NO hover effects whatsoever */
.footer-logo,
.footer-logo-img,
.footer-brand-link,
.footer-brand-link img,
.modern-footer .footer-logo,
.modern-footer .footer-logo-img,
.modern-footer .footer-brand-link,
.modern-footer .footer-brand-link img,
footer .footer-logo,
footer .footer-logo-img,
footer .footer-brand-link,
footer .footer-brand-link img,
footer a.footer-brand-link,
footer a.footer-brand-link img,
.modern-footer a.footer-brand-link,
.modern-footer a.footer-brand-link img {
    transform: none !important;
    -webkit-transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
    animation: none !important;
    -webkit-animation: none !important;
}

.footer-logo:hover,
.footer-logo-img:hover,
.footer-brand-link:hover,
.footer-brand-link:hover img,
.modern-footer .footer-logo:hover,
.modern-footer .footer-logo-img:hover,
.modern-footer .footer-brand-link:hover,
.modern-footer .footer-brand-link:hover img,
footer .footer-logo:hover,
footer .footer-logo-img:hover,
footer .footer-brand-link:hover,
footer .footer-brand-link:hover img,
footer a.footer-brand-link:hover,
footer a.footer-brand-link:hover img,
.modern-footer a.footer-brand-link:hover,
.modern-footer a.footer-brand-link:hover img {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
    -webkit-filter: brightness(0) invert(1) !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    background: transparent !important;
}

/* ===== carousel-nav-fix.css ===== */
/* Carousel Navigation Buttons - Flicker Fix */
/* This file fixes button flickering and provides smooth animations */

/* Override carousel track transition for smoother animation */
.products-carousel-track {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Navigation Button Base Styles */
.carousel-nav-btn {
    position: absolute !important;
    top: 50% !important;
    margin-top: -24px !important;
    transform: none !important;
    z-index: 20 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    color: #1E5CAA !important;
    outline: none !important;
    padding: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    /* Smooth transitions - only animate specific properties to prevent flicker */
    transition-property: background-color, border-color, box-shadow, color !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease-out !important;
}

/* Hover State - No transform to prevent flickering */
.carousel-nav-btn:hover {
    background-color: #1E5CAA !important;
    color: #ffffff !important;
    border-color: #1E5CAA !important;
    box-shadow: 0 6px 20px rgba(30, 92, 170, 0.4) !important;
    transform: none !important;
}

/* Active/Click State */
.carousel-nav-btn:active {
    background-color: #174a85 !important;
    border-color: #174a85 !important;
    box-shadow: 0 2px 10px rgba(30, 92, 170, 0.3) !important;
    transform: none !important;
}

/* Focus State for Accessibility */
.carousel-nav-btn:focus,
.carousel-nav-btn:focus-visible {
    outline: 2px solid #1E5CAA !important;
    outline-offset: 2px !important;
}

/* Disabled State */
.carousel-nav-btn.disabled,
.carousel-nav-btn:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #f3f4f6 !important;
    color: #9ca3af !important;
}

/* SVG Icon Styling */
.carousel-nav-btn svg {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    stroke-width: 2.5 !important;
    /* Prevent any transform on the icon */
    transform: none !important;
    transition: none !important;
}

/* Position: Previous Button */
.carousel-nav-prev {
    left: 12px !important;
}

/* Position: Next Button */
.carousel-nav-next {
    right: 12px !important;
}

/* Desktop - Position buttons outside carousel */
@media (min-width: 1200px) {
    .carousel-nav-prev {
        left: -60px !important;
    }
    
    .carousel-nav-next {
        right: -60px !important;
    }
}

/* Large Desktop */
@media (min-width: 1400px) {
    .carousel-nav-prev {
        left: -70px !important;
    }
    
    .carousel-nav-next {
        right: -70px !important;
    }
}

/* Tablet */
@media (max-width: 991px) {
    .carousel-nav-btn {
        width: 44px !important;
        height: 44px !important;
        margin-top: -22px !important;
    }
    
    .carousel-nav-btn svg {
        width: 18px !important;
        height: 18px !important;
    }
    
    .carousel-nav-prev {
        left: 10px !important;
    }
    
    .carousel-nav-next {
        right: 10px !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .carousel-nav-btn {
        width: 40px !important;
        height: 40px !important;
        margin-top: -20px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12) !important;
    }
    
    .carousel-nav-btn svg {
        width: 16px !important;
        height: 16px !important;
    }
    
    .carousel-nav-prev {
        left: 8px !important;
    }
    
    .carousel-nav-next {
        right: 8px !important;
    }
}

/* Ensure wrapper has proper positioning for absolute buttons */
.products-carousel-wrapper {
    position: relative !important;
    overflow: visible !important;
}

/* Container needs padding for buttons on desktop */
@media (min-width: 1200px) {
    .features-carousel-section .container,
    .features-carousel-section .container-fluid {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}



/* ===== btn-outline-hover-fix.css ===== */
/* Button Outline Hover Fix - White text on hover */
/* Ensures .btn-premium-outline has proper default and hover states */

/* DEFAULT STATE - White background, blue border, blue text */
.btn-premium-outline,
a.btn-premium-outline,
.hero-button-animate .btn-premium-outline {
    background: #ffffff !important;
    background-color: #ffffff !important;
    background-image: none !important;
    border: 2px solid #1E5CAA !important;
    color: #1E5CAA !important;
}

/* HOVER STATE - Blue background, white text */
.btn-premium-outline:hover,
.btn-premium-outline:focus,
.btn-premium-outline:active,
a.btn-premium-outline:hover,
a.btn-premium-outline:focus,
a.btn-premium-outline:active {
    background-color: #1E5CAA !important;
    background: #1E5CAA !important;
    background-image: none !important;
    border-color: #1E5CAA !important;
    color: #ffffff !important;
}

.btn-premium-outline:hover span,
.btn-premium-outline:focus span,
.btn-premium-outline:active span,
a.btn-premium-outline:hover span,
a.btn-premium-outline:focus span,
a.btn-premium-outline:active span {
    color: #ffffff !important;
}

/* Ensure SVG icons also turn white on hover */
.btn-premium-outline:hover svg,
.btn-premium-outline:focus svg,
.btn-premium-outline:active svg,
a.btn-premium-outline:hover svg,
a.btn-premium-outline:focus svg,
a.btn-premium-outline:active svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* Hero section specific */
.hero-button-animate .btn-premium-outline:hover,
.hero-button-animate .btn-premium-outline:focus,
.hero-button-animate .btn-premium-outline:active {
    background-color: #1E5CAA !important;
    background: #1E5CAA !important;
    border-color: #1E5CAA !important;
    color: #ffffff !important;
}

.hero-button-animate .btn-premium-outline:hover span,
.hero-button-animate .btn-premium-outline:focus span,
.hero-button-animate .btn-premium-outline:active span {
    color: #ffffff !important;
}

/* ========================================
   MOBILE RESPONSIVE - Ensure outline button is correct on all screens
   ======================================== */

@media (max-width: 991.98px) {
    .btn-premium-outline,
    a.btn-premium-outline,
    .hero-button-animate .btn-premium-outline,
    .practice-manager-hero-section .btn-premium-outline,
    .practice-manager-page .btn-premium-outline {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        border: 2px solid #1E5CAA !important;
        color: #1E5CAA !important;
    }
    
    .btn-premium-outline:hover,
    .btn-premium-outline:active,
    a.btn-premium-outline:hover,
    a.btn-premium-outline:active,
    .hero-button-animate .btn-premium-outline:hover,
    .practice-manager-hero-section .btn-premium-outline:hover,
    .practice-manager-page .btn-premium-outline:hover {
        background: #1E5CAA !important;
        background-color: #1E5CAA !important;
        background-image: none !important;
        border-color: #1E5CAA !important;
        color: #ffffff !important;
    }
    
    .btn-premium-outline:hover span,
    .btn-premium-outline:active span,
    a.btn-premium-outline:hover span,
    a.btn-premium-outline:active span {
        color: #ffffff !important;
    }
}

@media (max-width: 575.98px) {
    .btn-premium-outline,
    a.btn-premium-outline,
    .hero-button-animate .btn-premium-outline {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        border: 2px solid #1E5CAA !important;
        color: #1E5CAA !important;
    }
}



/* ===== mobile-navbar-fix.css ===== */
/* ========================================
   MOBILE NAVBAR FIX
   Comprehensive alignment and styling improvements
   ======================================== */

/* ========================================
   0. CRITICAL: FORCE MOBILE NAVBAR CLOSED BY DEFAULT
   ======================================== */

/* Maximum specificity to override Bootstrap */
#mobileNavbar.collapse:not(.show),
.collapse#mobileNavbar:not(.show),
div#mobileNavbar.collapse:not(.show) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
}

/* Only show when explicitly shown */
#mobileNavbar.collapse.show,
.collapse#mobileNavbar.show,
div#mobileNavbar.collapse.show {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    opacity: 1 !important;
}

/* ========================================
   1. NAVBAR CONTAINER & ROW FIXES
   ======================================== */

@media (max-width: 991.98px) {
    /* Fix navbar container alignment */
    .modern-navbar .mp-navbar-container {
        padding-left: clamp(1rem, 4vw, 1.5rem) !important;
        padding-right: clamp(1rem, 4vw, 1.5rem) !important;
    }
    
    /* Fix navbar row alignment */
    .modern-navbar .mp-navbar-row {
        height: 70px !important;
        min-height: 70px !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 1rem !important;
    }
    
    /* Ensure logo is properly aligned */
    .modern-navbar .navbar-brand {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
    }
    
    /* Fix logo image alignment */
    .modern-navbar .header-logo {
        height: clamp(32px, 6vw, 40px) !important;
        width: auto !important;
        max-height: 40px !important;
        object-fit: contain !important;
        display: block !important;
    }
}

/* ========================================
   2. HAMBURGER BUTTON FIXES
   ======================================== */

@media (max-width: 991.98px) {
    /* Fix hamburger button container - CRITICAL: High specificity to override global rules */
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"],
    .modern-navbar button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"],
    .d-lg-none.border-0.bg-transparent[data-bs-toggle="collapse"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0.625rem !important;
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
        border: none !important;
        background: transparent !important;
        background-color: transparent !important;
        cursor: pointer !important;
        position: relative !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
        transition: background-color 0.2s ease !important;
        -webkit-transition: background-color 0.2s ease !important;
        box-shadow: none !important;
        outline: none !important;
        border-radius: 8px !important;
    }
    
    /* Fix hamburger button SVG icons - CRITICAL: Must be visible */
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] svg,
    .modern-navbar button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] svg,
    .d-lg-none.border-0.bg-transparent[data-bs-toggle="collapse"] svg {
        width: 24px !important;
        height: 24px !important;
        stroke: #1e293b !important;
        stroke-width: 2 !important;
        transition: none !important;
        -webkit-transition: none !important;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        -webkit-transform: none !important;
        display: block !important;
    }
    
    /* Menu icon - shown by default */
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] #menuIcon,
    .modern-navbar button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] #menuIcon {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Close icon - hidden by default (controlled by JS) */
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] #closeIcon,
    .modern-navbar button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] #closeIcon {
        display: none !important;
    }
    
    /* When expanded - show close icon, hide menu icon */
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"][aria-expanded="true"] #menuIcon {
        display: none !important;
    }
    
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"][aria-expanded="true"] #closeIcon {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Hover effect for hamburger */
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"]:hover,
    .modern-navbar button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"]:hover {
        background: rgba(15, 23, 42, 0.05) !important;
        background-color: rgba(15, 23, 42, 0.05) !important;
    }
    
    /* Active/expanded state */
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"][aria-expanded="true"],
    .modern-navbar button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"][aria-expanded="true"] {
        background: rgba(30, 92, 170, 0.1) !important;
        background-color: rgba(30, 92, 170, 0.1) !important;
    }
    
    /* Focus state */
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"]:focus,
    .modern-navbar button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"]:focus {
        outline: none !important;
        box-shadow: 0 0 0 2px rgba(30, 92, 170, 0.2) !important;
    }
}

/* ========================================
   3. MOBILE MENU CONTAINER FIXES
   ======================================== */

@media (max-width: 991.98px) {
    /* CRITICAL: Ensure mobile navbar is hidden by default */
    #mobileNavbar:not(.show) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    
    /* Fix mobile navbar collapse container */
    #mobileNavbar {
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border-radius: 16px !important;
        margin-top: 0.75rem !important;
        margin-left: clamp(0.5rem, 3vw, 1rem) !important;
        margin-right: clamp(0.5rem, 3vw, 1rem) !important;
        padding: 1.25rem clamp(1rem, 4vw, 1.5rem) !important;
        box-shadow: 0 20px 60px -15px rgba(15, 23, 42, 0.3) !important;
        border: 1px solid rgba(15, 23, 42, 0.08) !important;
        max-height: calc(100vh - 100px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Show mobile navbar when 'show' class is added */
    #mobileNavbar.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Fix mobile navbar inner container */
    #mobileNavbar > div {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
}

/* ========================================
   4. MOBILE NAV LINKS FIXES
   ======================================== */

@media (max-width: 991.98px) {
    /* Fix main nav links */
    .nav-link-mobile {
        padding: 0.875rem clamp(0.75rem, 3vw, 1rem) !important;
        font-size: clamp(0.9375rem, 4vw, 1.0625rem) !important;
        font-weight: 500 !important;
        color: #1e293b !important;
        text-decoration: none !important;
        transition: all 0.2s ease !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 !important;
        line-height: 1.5 !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Hover state for nav links */
    .nav-link-mobile:hover {
        color: #1E5CAA !important;
        background: rgba(30, 92, 170, 0.06) !important;
        transform: translateX(4px) !important;
    }
    
    /* Active state */
    .nav-link-mobile:active {
        background: rgba(30, 92, 170, 0.1) !important;
        transform: translateX(2px) !important;
    }
}

/* ========================================
   5. ACCORDION BUTTONS FIXES
   ======================================== */

@media (max-width: 991.98px) {
    /* Fix accordion item */
    #mobileNavbar .accordion-item {
        border: none !important;
        background: transparent !important;
        margin-bottom: 0.25rem !important;
    }
    
    /* Fix accordion header */
    #mobileNavbar .accordion-header {
        margin: 0 !important;
    }
    
    /* Fix accordion button (section headers) */
    .accordion-button.mobile-nav-section-btn {
        padding: 0.875rem clamp(0.75rem, 3vw, 1rem) !important;
        font-size: clamp(1rem, 4vw, 1.125rem) !important;
        font-weight: 600 !important;
        color: #0f172a !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        text-align: left !important;
        margin: 0 !important;
        line-height: 1.5 !important;
        transition: all 0.2s ease !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Accordion button hover */
    .accordion-button.mobile-nav-section-btn:hover {
        background: rgba(15, 23, 42, 0.04) !important;
        color: #1E5CAA !important;
    }
    
    /* Accordion button expanded state */
    .accordion-button.mobile-nav-section-btn:not(.collapsed) {
        color: #1E5CAA !important;
        background: rgba(30, 92, 170, 0.08) !important;
        font-weight: 600 !important;
    }
    
    /* Fix accordion button arrow */
    .accordion-button.mobile-nav-section-btn::after {
        width: 1rem !important;
        height: 1rem !important;
        background-size: 1rem 1rem !important;
        opacity: 0.6 !important;
        transition: all 0.2s ease !important;
        margin-left: auto !important;
        flex-shrink: 0 !important;
    }
    
    /* Arrow rotation on expand */
    .accordion-button.mobile-nav-section-btn:not(.collapsed)::after {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }
    
    /* Remove focus outline */
    .accordion-button.mobile-nav-section-btn:focus {
        box-shadow: 0 0 0 3px rgba(30, 92, 170, 0.1) !important;
        border-color: transparent !important;
        outline: none !important;
    }
}

/* ========================================
   6. ACCORDION BODY & SUB-MENU FIXES
   ======================================== */

@media (max-width: 991.98px) {
    /* Fix accordion body */
    #mobileNavbar .accordion-body {
        padding: 0.5rem 0 0.75rem 0 !important;
        margin: 0 !important;
    }
    
    /* Fix sub-menu container */
    .mobile-nav-sub {
        padding-left: clamp(0.75rem, 3vw, 1rem) !important;
        padding-right: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.25rem !important;
    }
    
    /* Fix sub-menu links */
    .mobile-nav-sub .nav-link-mobile {
        padding: 0.625rem clamp(0.75rem, 3vw, 1rem) !important;
        font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
        font-weight: 400 !important;
        color: #475569 !important;
        border-radius: 8px !important;
        position: relative !important;
    }
    
    /* Sub-menu link hover */
    .mobile-nav-sub .nav-link-mobile:hover {
        color: #1E5CAA !important;
        background: rgba(30, 92, 170, 0.06) !important;
        padding-left: clamp(1rem, 4vw, 1.25rem) !important;
    }
    
    /* Add subtle indicator for sub-items */
    .mobile-nav-sub .nav-link-mobile::before {
        content: '•' !important;
        position: absolute !important;
        left: 0.25rem !important;
        color: #cbd5e1 !important;
        font-size: 0.75rem !important;
        transition: all 0.2s ease !important;
    }
    
    .mobile-nav-sub .nav-link-mobile:hover::before {
        color: #1E5CAA !important;
        transform: scale(1.2) !important;
    }
}

/* ========================================
   15. CRITICAL FIXES FOR ACCORDION DROPDOWN FUNCTIONALITY
   ======================================== */

@media (max-width: 991.98px) {
    /* Ensure accordion collapse is visible when expanded */
    #mobileNavbar .accordion-collapse.show {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Ensure accordion collapse is properly hidden when collapsed */
    #mobileNavbar .accordion-collapse:not(.show) {
        display: none !important;
    }
    
    /* Fix collapsing state */
    #mobileNavbar .accordion-collapse.collapsing {
        display: block !important;
        height: 0 !important;
        overflow: hidden !important;
        transition: height 0.35s ease !important;
    }
    
    /* Ensure accordion body is always visible when parent is shown */
    #mobileNavbar .accordion-collapse.show .accordion-body {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 0.5rem 0 0.75rem 0 !important;
    }
    
    /* Fix accordion button states */
    #mobileNavbar .accordion-button {
        cursor: pointer !important;
        user-select: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
    }
    
    /* Ensure accordion button works on touch devices */
    #mobileNavbar .accordion-button {
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(30, 92, 170, 0.1) !important;
    }
    
    /* Prevent text selection on accordion buttons */
    #mobileNavbar .accordion-button {
        -webkit-touch-callout: none !important;
    }
    
    /* Ensure z-index doesn't interfere */
    #mobileNavbar .accordion-item {
        position: relative !important;
        z-index: 1 !important;
    }
    
    #mobileNavbar .accordion-collapse {
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Fix for Bootstrap 5 accordion */
    #mobileNavbar .accordion {
        --bs-accordion-active-bg: rgba(30, 92, 170, 0.08) !important;
        --bs-accordion-btn-focus-box-shadow: 0 0 0 3px rgba(30, 92, 170, 0.1) !important;
    }
    
    /* Nested POS Solutions dropdown styling */
    .pos-solutions-nested-wrapper {
        margin-top: 0.5rem !important;
        border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
        padding-top: 0.5rem !important;
    }
    
    .pos-solutions-toggle {
        font-weight: 600 !important;
        color: #0f172a !important;
        background: transparent !important;
        border: none !important;
        padding: 0.875rem clamp(0.75rem, 3vw, 1rem) !important;
        font-size: clamp(1rem, 4vw, 1.125rem) !important;
        border-radius: 10px !important;
        transition: all 0.2s ease !important;
        cursor: pointer !important;
        margin: 0 !important;
    }
    
    .pos-solutions-toggle:hover {
        background: rgba(15, 23, 42, 0.04) !important;
        color: #1E5CAA !important;
    }
    
    .pos-solutions-toggle[aria-expanded="true"] {
        color: #1E5CAA !important;
        background: rgba(30, 92, 170, 0.08) !important;
    }
    
    .pos-solutions-toggle .pos-arrow {
        transition: transform 0.2s ease !important;
        flex-shrink: 0 !important;
        opacity: 0.6 !important;
    }
    
    .pos-solutions-toggle[aria-expanded="true"] .pos-arrow {
        transform: rotate(180deg) !important;
        opacity: 1 !important;
    }
    
    .pos-solutions-submenu {
        margin-top: 0.25rem !important;
    }
    
    .pos-solutions-submenu.show {
        display: block !important;
    }
    
    .pos-solutions-submenu.collapsing {
        display: block !important;
        height: 0 !important;
        overflow: hidden !important;
        transition: height 0.35s ease !important;
    }
}

/* ========================================
   7. MOBILE NAVBAR BOTTOM SECTION (Login/Signup)
   ======================================== */

@media (max-width: 991.98px) {
    /* Fix bottom section container */
    #mobileNavbar .mt-4.pt-4.border-top {
        margin-top: 1.5rem !important;
        padding-top: 1.5rem !important;
        padding-bottom: 0.5rem !important;
        border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.75rem !important;
        width: 100% !important;
    }
    
    /* Fix login link in bottom section */
    #mobileNavbar .mt-4.pt-4.border-top .nav-link-mobile {
        padding: 0.75rem 1.5rem !important;
        font-weight: 500 !important;
        text-align: center !important;
        border-radius: 10px !important;
        background: rgba(15, 23, 42, 0.05) !important;
        width: 92% !important;
        margin: 0 auto !important;
        justify-content: center !important;
        font-size: 0.95rem !important;
    }
    
    /* Fix signup button in mobile menu */
    #mobileNavbar .btn-premium {
        width: 92% !important;
        padding: 0.75rem 1.5rem !important;
        font-size: 0.95rem !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin: 0 auto !important;
        box-shadow: 0 4px 12px rgba(30, 92, 170, 0.2) !important;
        transition: all 0.2s ease !important;
    }
    
    /* Signup button hover */
    #mobileNavbar .btn-premium:hover {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(30, 92, 170, 0.3) !important;
    }
    
    /* Signup button active */
    #mobileNavbar .btn-premium:active {
        transform: translateY(0) !important;
    }
}

/* ========================================
   8. BORDER & SPACING FIXES
   ======================================== */

@media (max-width: 991.98px) {
    /* Remove unwanted borders */
    #mobileNavbar .border-top.border-gray-200 {
        border-top: 1px solid rgba(15, 23, 42, 0.1) !important;
    }
    
    /* Fix gap spacing */
    #mobileNavbar .d-flex.flex-column.gap-3 {
        gap: 0.75rem !important;
    }
    
    /* Fix accordion spacing */
    #mobileNavbar .accordion {
        display: flex !important;
        flex-direction: column !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }
}

/* ========================================
   9. SCROLLBAR STYLING (Mobile Menu)
   ======================================== */

@media (max-width: 991.98px) {
    /* Custom scrollbar for mobile menu */
    #mobileNavbar::-webkit-scrollbar {
        width: 4px !important;
    }
    
    #mobileNavbar::-webkit-scrollbar-track {
        background: transparent !important;
    }
    
    #mobileNavbar::-webkit-scrollbar-thumb {
        background: rgba(15, 23, 42, 0.2) !important;
        border-radius: 2px !important;
    }
    
    #mobileNavbar::-webkit-scrollbar-thumb:hover {
        background: rgba(15, 23, 42, 0.3) !important;
    }
}

/* ========================================
   10. ANIMATION IMPROVEMENTS
   ======================================== */

@media (max-width: 991.98px) {
    /* Smooth collapse animation */
    #mobileNavbar.collapsing {
        transition: height 0.3s ease !important;
    }
    
    /* Fade in animation */
    #mobileNavbar.show {
        animation: mobileMenuFadeIn 0.3s ease !important;
    }
    
    @keyframes mobileMenuFadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    /* Smooth link transitions */
    .nav-link-mobile,
    .accordion-button.mobile-nav-section-btn {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
}

/* ========================================
   11. ACCESSIBILITY IMPROVEMENTS
   ======================================== */

@media (max-width: 991.98px) {
    /* Ensure touch targets are at least 44px */
    .nav-link-mobile,
    .accordion-button.mobile-nav-section-btn,
    button[data-bs-toggle="collapse"][data-bs-target="#mobileNavbar"] {
        min-height: 44px !important;
    }
    
    /* Better focus indicators */
    .nav-link-mobile:focus,
    .accordion-button.mobile-nav-section-btn:focus {
        outline: 2px solid #1E5CAA !important;
        outline-offset: 2px !important;
    }
}

/* ========================================
   12. EXTRA SMALL DEVICES (≤576px)
   ======================================== */

@media (max-width: 576px) {
    /* Tighter spacing on very small screens */
    .modern-navbar .mp-navbar-container {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    #mobileNavbar {
        margin-left: 0.5rem !important;
        margin-right: 0.5rem !important;
        padding: 1rem !important;
    }
    
    .nav-link-mobile {
        padding: 0.75rem 0.75rem !important;
    }
    
    .accordion-button.mobile-nav-section-btn {
        padding: 0.75rem 0.75rem !important;
    }
}

/* ========================================
   13. FIX SPECIFIC ALIGNMENT ISSUES
   ======================================== */

@media (max-width: 991.98px) {
    /* Ensure all text is left-aligned */
    .nav-link-mobile,
    .accordion-button.mobile-nav-section-btn {
        text-align: left !important;
        justify-content: flex-start !important;
    }
    
    /* Fix accordion button content alignment */
    .accordion-button.mobile-nav-section-btn {
        justify-content: space-between !important;
    }
    
    /* Ensure proper flex behavior */
    #mobileNavbar > div {
        align-items: stretch !important;
    }
    
    /* Fix any floating elements */
    #mobileNavbar * {
        box-sizing: border-box !important;
    }
}

/* ========================================
   14. VISUAL ENHANCEMENTS
   ======================================== */

@media (max-width: 991.98px) {
    /* Add subtle background to active accordion */
    .accordion-button.mobile-nav-section-btn:not(.collapsed) {
        background: linear-gradient(135deg, rgba(30, 92, 170, 0.08), rgba(30, 92, 170, 0.04)) !important;
    }
    
    /* Add subtle shadow to mobile menu */
    #mobileNavbar {
        box-shadow: 0 20px 60px -15px rgba(15, 23, 42, 0.3),
                    0 0 0 1px rgba(15, 23, 42, 0.05) !important;
    }
    
    /* Improve text contrast */
    .nav-link-mobile {
        color: #1e293b !important;
    }
    
    .mobile-nav-sub .nav-link-mobile {
        color: #475569 !important;
    }
}



/* ===== section-spacing.css ===== */
/* ========================================
   GLOBAL SECTION SPACING - REDUCED
   Tighter spacing between sections for better visual flow
   Applies to ALL pages (UK and PK)
   Last Updated: January 2026
   ======================================== */

/* ========================================
   HERO SECTIONS
   ======================================== */
.modern-hero-section,
.home-hero-section {
    padding-bottom: 2rem !important;
}

/* ========================================
   COMMON SECTIONS - All Pages
   ======================================== */
.trusted-by-section {
    padding: 2rem 0 2.5rem !important;
}

.why-moneypex-section {
    padding: 2.5rem 0 !important;
}

.mp-products-section,
.modern-products-section {
    padding: 2.5rem 0 !important;
}

.fbr-compliance-section {
    padding: 2.5rem 0 !important;
}

.features-carousel-section {
    padding: 2.5rem 0 !important;
}

.benefits-wrapper-modern {
    padding: 2.5rem 0 !important;
}

.empowering-businesses-section,
.empowering-businesses-section-new {
    padding: 2.5rem 0 !important;
}

.cta-growth-section {
    padding: 2.5rem 0 !important;
}

.faq-growth-section,
.faq-section {
    padding: 2.5rem 0 3rem !important;
}

/* ========================================
   UK PAGE SPECIFIC SECTIONS
   ======================================== */
.industries-section,
.industries-carousel-section {
    padding: 2.5rem 0 !important;
}

.pricing-section {
    padding: 2.5rem 0 !important;
}

.testimonials-section {
    padding: 2.5rem 0 !important;
}

.features-section {
    padding: 2.5rem 0 !important;
}

.benefits-section {
    padding: 2.5rem 0 !important;
}

.cta-section {
    padding: 2.5rem 0 !important;
}

/* ========================================
   INNER/PRODUCT PAGES SECTIONS
   ======================================== */
.accounting-why-section,
.accounting-awareness-section,
.accounting-benefits-section,
.accounting-features-section,
.accounting-fbr-section,
.accounting-project-section,
.accounting-features-grid-section {
    padding: 2.5rem 0 !important;
}

.pos-hero-section,
.pos-features-section,
.pos-benefits-section,
.pos-industries-section {
    padding: 2.5rem 0 !important;
}

.pharmacy-need-section,
.pharmacy-why-section,
.pharmacy-features-section {
    padding: 2.5rem 0 !important;
}

.retail-hero-section,
.retail-features-section,
.retail-benefits-section {
    padding: 2.5rem 0 !important;
}

.restaurant-hero-section,
.restaurant-features-section,
.restaurant-benefits-section {
    padding: 2.5rem 0 !important;
}

/* Generic section classes */
.section-spacing-sm {
    padding: 2rem 0 !important;
}

.section-spacing-md {
    padding: 2.5rem 0 !important;
}

.section-spacing-lg {
    padding: 3rem 0 !important;
}

/* ========================================
   HEADING & CONTENT MARGINS
   ======================================== */
.text-center.mb-5 {
    margin-bottom: 1.5rem !important;
}

.why-moneypex-heading,
.trusted-by-heading,
.products-heading,
.features-section-heading,
.modern-section-heading,
.section-title {
    margin-bottom: 1rem !important;
}

.why-moneypex-description {
    margin-bottom: 0.75rem !important;
}

.why-moneypex-cta {
    margin-bottom: 1.5rem !important;
}

.section-subtitle {
    margin-bottom: 1.5rem !important;
}

/* ========================================
   RESPONSIVE - TABLET (≤992px)
   ======================================== */
@media (max-width: 992px) {
    .modern-hero-section,
    .home-hero-section {
        padding-bottom: 1.5rem !important;
    }
    
    .trusted-by-section {
        padding: 1.5rem 0 2rem !important;
    }
    
    .why-moneypex-section,
    .mp-products-section,
    .modern-products-section,
    .fbr-compliance-section,
    .features-carousel-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .empowering-businesses-section-new,
    .cta-growth-section,
    .industries-section,
    .industries-carousel-section,
    .pricing-section,
    .testimonials-section,
    .features-section,
    .benefits-section,
    .cta-section,
    .accounting-why-section,
    .accounting-awareness-section,
    .accounting-benefits-section,
    .accounting-features-section,
    .accounting-fbr-section,
    .accounting-project-section,
    .accounting-features-grid-section,
    .pos-hero-section,
    .pos-features-section,
    .pos-benefits-section,
    .pos-industries-section,
    .pharmacy-need-section,
    .pharmacy-why-section,
    .pharmacy-features-section,
    .retail-hero-section,
    .retail-features-section,
    .retail-benefits-section,
    .restaurant-hero-section,
    .restaurant-features-section,
    .restaurant-benefits-section {
        padding: 2rem 0 !important;
    }
    
    .faq-growth-section,
    .faq-section {
        padding: 2rem 0 2.5rem !important;
    }
    
    .section-spacing-sm {
        padding: 1.5rem 0 !important;
    }
    
    .section-spacing-md {
        padding: 2rem 0 !important;
    }
    
    .section-spacing-lg {
        padding: 2.5rem 0 !important;
    }
}

/* ========================================
   RESPONSIVE - MOBILE (≤768px)
   ======================================== */
@media (max-width: 768px) {
    .modern-hero-section,
    .home-hero-section {
        padding-bottom: 1rem !important;
    }
    
    .trusted-by-section {
        padding: 1.25rem 0 1.5rem !important;
    }
    
    .why-moneypex-section,
    .mp-products-section,
    .modern-products-section,
    .fbr-compliance-section,
    .features-carousel-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .empowering-businesses-section-new,
    .cta-growth-section,
    .industries-section,
    .industries-carousel-section,
    .pricing-section,
    .testimonials-section,
    .features-section,
    .benefits-section,
    .cta-section,
    .accounting-why-section,
    .accounting-awareness-section,
    .accounting-benefits-section,
    .accounting-features-section,
    .accounting-fbr-section,
    .accounting-project-section,
    .accounting-features-grid-section,
    .pos-hero-section,
    .pos-features-section,
    .pos-benefits-section,
    .pos-industries-section,
    .pharmacy-need-section,
    .pharmacy-why-section,
    .pharmacy-features-section,
    .retail-hero-section,
    .retail-features-section,
    .retail-benefits-section,
    .restaurant-hero-section,
    .restaurant-features-section,
    .restaurant-benefits-section {
        padding: 1.5rem 0 !important;
    }
    
    .faq-growth-section,
    .faq-section {
        padding: 1.5rem 0 2rem !important;
    }
    
    .text-center.mb-5 {
        margin-bottom: 1rem !important;
    }
    
    .section-spacing-sm {
        padding: 1.25rem 0 !important;
    }
    
    .section-spacing-md {
        padding: 1.5rem 0 !important;
    }
    
    .section-spacing-lg {
        padding: 2rem 0 !important;
    }
}

/* ========================================
   RESPONSIVE - SMALL MOBILE (≤576px)
   ======================================== */
@media (max-width: 576px) {
    .trusted-by-section {
        padding: 1rem 0 1.25rem !important;
    }
    
    .why-moneypex-section,
    .mp-products-section,
    .modern-products-section,
    .fbr-compliance-section,
    .features-carousel-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .empowering-businesses-section-new,
    .cta-growth-section,
    .industries-section,
    .industries-carousel-section,
    .pricing-section,
    .testimonials-section,
    .features-section,
    .benefits-section,
    .cta-section,
    .accounting-why-section,
    .accounting-awareness-section,
    .accounting-benefits-section,
    .accounting-features-section,
    .accounting-fbr-section,
    .accounting-project-section,
    .accounting-features-grid-section,
    .pos-hero-section,
    .pos-features-section,
    .pos-benefits-section,
    .pos-industries-section,
    .pharmacy-need-section,
    .pharmacy-why-section,
    .pharmacy-features-section,
    .retail-hero-section,
    .retail-features-section,
    .retail-benefits-section,
    .restaurant-hero-section,
    .restaurant-features-section,
    .restaurant-benefits-section {
        padding: 1.25rem 0 !important;
    }
    
    .faq-growth-section,
    .faq-section {
        padding: 1.25rem 0 1.5rem !important;
    }
    
    .section-spacing-sm {
        padding: 1rem 0 !important;
    }
    
    .section-spacing-md {
        padding: 1.25rem 0 !important;
    }
    
    .section-spacing-lg {
        padding: 1.5rem 0 !important;
    }
}



/* ===== footer-fix.css ===== */
/* ========================================
   FOOTER FIX CSS
   Fixes for footer logo hover and contact icons
   ======================================== */

/* ========================================
   1. FOOTER LOGO - Remove ALL hover effects
   ======================================== */

/* Default state - no transitions */
.footer-brand-link,
.footer-brand-link img,
.footer-logo-img,
.modern-footer .footer-brand-link,
.modern-footer .footer-brand-link img,
.modern-footer .footer-logo-img,
footer .footer-brand-link,
footer .footer-brand-link img,
footer a.footer-brand-link,
footer a.footer-brand-link img {
    transition: none !important;
    -webkit-transition: none !important;
    transform: none !important;
    -webkit-transform: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    cursor: pointer;
}

/* Hover state - NO changes at all */
.footer-brand-link:hover,
.footer-brand-link:hover img,
.footer-brand-link:focus,
.footer-brand-link:focus img,
.footer-brand-link:active,
.footer-brand-link:active img,
.footer-logo-img:hover,
.modern-footer .footer-brand-link:hover,
.modern-footer .footer-brand-link:hover img,
.modern-footer .footer-brand-link:focus,
.modern-footer .footer-brand-link:focus img,
.modern-footer .footer-logo-img:hover,
footer .footer-brand-link:hover,
footer .footer-brand-link:hover img,
footer a.footer-brand-link:hover,
footer a.footer-brand-link:hover img {
    transform: none !important;
    -webkit-transform: none !important;
    scale: 1 !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-filter: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    background: transparent !important;
    transition: none !important;
    -webkit-transition: none !important;
    animation: none !important;
    -webkit-animation: none !important;
    outline: none !important;
}

/* ========================================
   2. CONTACT ICONS - Fix color to be visible
   ======================================== */

/* Contact icon box - white/light blue styling */
.contact-icon-box {
    width: 2.5rem !important;
    height: 2.5rem !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* SVG icons inside contact box - white color */
.contact-icon-box svg {
    width: 20px !important;
    height: 20px !important;
    stroke: rgba(255, 255, 255, 0.8) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    fill: none !important;
}

/* Contact item pro styling */
.contact-item-pro {
    display: flex !important;
    align-items: flex-start !important;
    gap: 1rem !important;
}

/* Contact text colors */
.contact-item-pro .text-xs,
.contact-item-pro .text-sm,
.contact-item-pro .footer-link {
    color: #ffffff !important;
}

/* No hover effect on contact icons */
.contact-icon-box:hover,
.contact-icon-box:hover svg,
.contact-item-pro:hover .contact-icon-box,
.contact-item-pro:hover .contact-icon-box svg {
    transform: none !important;
    background: rgba(255, 255, 255, 0.1) !important;
    stroke: rgba(255, 255, 255, 0.8) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

/* ===== pricing-toggle-fix.css ===== */
/* 
    PRICING TOGGLE FIX
    Ensures the active button has white text and proper z-index.
    Updated with ID selectors for maximum specificity.
*/

/* Base Button - Grey */
.billing-toggle-wrapper .billing-toggle-btn,
button.billing-toggle-btn,
#btnMonthly,
#btnYearly {
    color: #64748b !important;
    z-index: 5 !important;
    font-weight: 600 !important;
    background: transparent !important;
    position: relative !important;
    mix-blend-mode: normal !important;
    transition: color 0.3s ease !important;
}

/* Active Button - White */
.billing-toggle-wrapper .billing-toggle-btn.active,
button.billing-toggle-btn.active,
#btnMonthly.active,
#btnYearly.active {
    color: #ffffff !important;
    z-index: 5 !important;
    font-weight: 700 !important;
    mix-blend-mode: normal !important;
}

/* Hover State */
.billing-toggle-btn:hover,
#btnMonthly:hover,
#btnYearly:hover {
    color: #334155 !important;
}

.billing-toggle-btn.active:hover,
#btnMonthly.active:hover,
#btnYearly.active:hover {
    color: #ffffff !important;
}

/* Slider - MUST be behind buttons */
.billing-toggle-wrapper .billing-toggle-slider {
    z-index: 1 !important;
    background: linear-gradient(135deg, #1E5CAA 0%, #2563eb 100%) !important;
    position: absolute !important;
}

/* Wrapper - Ensure context */
.billing-toggle-wrapper {
    position: relative !important;
    isolation: isolate !important;
    display: inline-flex !important;
    background: #f1f5f9 !important;
}

/* ===== pricing-mobile-carousel.css ===== */
/* 
    PRICING MOBILE CAROUSEL
    Converts pricing cards to a swipeable carousel on mobile devices with navigation buttons
*/

/* Mobile Carousel Container - Only on mobile */
@media (max-width: 991px) {

    /* Wrapper for carousel and buttons */
    .pricing-page .container-fluid.container-md {
        position: relative !important;
        padding-left: 2.5rem !important;
        padding-right: 2.5rem !important;
    }

    /* Pricing row becomes a carousel */
    .pricing-page .row.justify-content-center {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        /* Firefox */
        gap: 1rem !important;
        padding: 1rem 0.5rem !important;
        margin: 0 !important;
        position: relative !important;
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .pricing-page .row.justify-content-center::-webkit-scrollbar {
        display: none !important;
    }

    /* Pricing columns become carousel items */
    .pricing-page .row.justify-content-center>[class*="col-"] {
        flex: 0 0 85% !important;
        max-width: 85% !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: always !important;
    }

    /* Ensure cards maintain their height */
    .pricing-page .pos-pricing-card {
        height: 100% !important;
        margin: 0 !important;
    }

    /* Navigation Buttons */
    .pricing-carousel-nav {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10 !important;
        background: #ffffff !important;
        border: 2px solid #e2e8f0 !important;
        border-radius: 50% !important;
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    }

    .pricing-carousel-nav:hover {
        background: #1E5CAA !important;
        border-color: #1E5CAA !important;
        box-shadow: 0 6px 16px rgba(30, 92, 170, 0.3) !important;
    }

    .pricing-carousel-nav:hover svg {
        stroke: #ffffff !important;
    }

    .pricing-carousel-nav svg {
        width: 20px !important;
        height: 20px !important;
        stroke: #1E5CAA !important;
        stroke-width: 2.5 !important;
        transition: stroke 0.3s ease !important;
    }

    .pricing-carousel-nav.prev {
        left: 0.5rem !important;
    }

    .pricing-carousel-nav.next {
        right: 0.5rem !important;
    }

    /* Hide buttons when at start/end */
    .pricing-carousel-nav.disabled {
        opacity: 0.3 !important;
        pointer-events: none !important;
    }

    /* Add padding to pricing section for buttons */
    .pricing-page {
        padding-bottom: 5rem !important;
    }

    /* Carousel dots indicator */
    .pricing-carousel-dots {
        display: flex !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-top: 2rem !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .pricing-carousel-dot {
        width: 8px !important;
        height: 8px !important;
        border-radius: 50% !important;
        background: #cbd5e1 !important;
        cursor: pointer !important;
        transition: all 0.3s ease !important;
        border: none !important;
        padding: 0 !important;
    }

    .pricing-carousel-dot.active {
        background: #1E5CAA !important;
        width: 24px !important;
        border-radius: 4px !important;
    }
}

/* Tablet view - 2 cards visible */
@media (min-width: 768px) and (max-width: 991px) {
    .pricing-page .row.justify-content-center>[class*="col-"] {
        flex: 0 0 48% !important;
        max-width: 48% !important;
    }

    .pricing-carousel-nav.prev {
        left: 0.5rem !important;
    }

    .pricing-carousel-nav.next {
        right: 0.5rem !important;
    }
}

/* Small mobile - 1 card at a time */
@media (max-width: 767px) {
    .pricing-page .row.justify-content-center>[class*="col-"] {
        flex: 0 0 90% !important;
        max-width: 90% !important;
    }
}

/* Add smooth scroll behavior */
.pricing-page .row.justify-content-center {
    scroll-behavior: smooth !important;
}

/* Ensure proper spacing on mobile */


/* Desktop - hide carousel elements */
@media (min-width: 992px) {

    .pricing-carousel-nav,
    .pricing-carousel-dots {
        display: none !important;
    }
}

/* ===== pricing-alignment-fix.css ===== */
/* 
    PRICING CARD ALIGNMENT FIX
    Ensures all elements in pricing cards are properly centered
*/

/* Fix pricing card header alignment */
.pos-pricing-card .pos-pricing-header,
.pricing-card .pricing-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Fix pricing title and subtitle alignment */
.pos-pricing-title,
.pricing-title,
.pos-pricing-subtitle,
.pricing-subtitle {
    text-align: center !important;
    width: 100% !important;
}

/* Fix pricing amount section alignment */
.pos-pricing-amount,
.pricing-amount {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Fix price display alignment */
.pos-price-display,
.price-display {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

/* Fix price value and period alignment */
.pos-price-value,
.price-value,
.pos-price-period,
.price-period {
    text-align: center !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

/* Fix yearly note alignment */
.pos-price-yearly,
.price-yearly,
.pos-trial-badge,
.trial-badge {
    text-align: center !important;
    width: 100% !important;
}

/* Fix pricing action button alignment */
.pos-pricing-action,
.pricing-action {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}

/* Fix pricing features list alignment */
.pos-pricing-features,
.pricing-features {
    width: 100% !important;
}

.pos-features-list,
.features-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Fix individual feature items alignment */
.pos-feature-item,
.feature-item {
    display: flex !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.75rem !important;
}

/* Fix feature check icon alignment */
.pos-feature-check,
.feature-check {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Fix popular badge alignment */
.popular-badge,
.pos-popular-badge {
    display: inline-block !important;
    margin: 0 auto 0.5rem !important;
}

/* Ensure card content is centered */
.pos-pricing-card,
.pricing-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* Fix icon alignment in pricing cards */
.pos-pricing-card svg,
.pricing-card svg {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Fix button alignment */
.pos-pricing-card .btn-premium,
.pricing-card .btn-premium,
.pos-pricing-card .btn-premium-outline,
.pricing-card .btn-premium-outline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

/* Fix for POS-specific pricing cards */
.pricing-page .pos-pricing-card {
    text-align: center !important;
}

.pricing-page .pos-pricing-header {
    margin-bottom: 1rem !important;
}

.pricing-page .pos-pricing-amount {
    margin-bottom: 1.25rem !important;
}

.pricing-page .pos-pricing-action {
    margin-bottom: 1.25rem !important;
}

/* Ensure consistent spacing */
.pos-pricing-card>* {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Ensure pricing columns stretch and cards are equal height */
.pricing-page .row.justify-content-center>[class*="col-"] {
    display: flex !important;
    align-items: stretch !important;
}

.pricing-page .pos-pricing-card {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    height: 100% !important;
}

/* Push features/support section to bottom so cards line up */
.pos-pricing-features {
    margin-top: auto !important;
}

/* Ensure additional support box doesn't affect vertical alignment */
.pos-pricing-section-divider {
    margin-top: 1rem !important;
}

/* ===== mobile-emergency-fix.css ===== */
/* ========================================
   MOBILE RESPONSIVE EMERGENCY FIX
   ========================================
   This file consolidates all critical mobile responsive fixes
   to ensure consistency between localhost and staging server.
   Load this LAST to override all conflicting styles.
   
   Last Updated: February 2026
   Purpose: Fix mobile responsiveness issues on live/staging server
   ======================================== */

/* ========================================
   VIEWPORT & META FIXES
   ======================================== */
/* Ensure proper viewport behavior */
html {
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}

* {
    box-sizing: border-box !important;
}

body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================
   HIDE SECTION IMAGES ON MOBILE
   ======================================== */

/* Hide LARGE section images on mobile (Illustrations, Side Images) */
@media (max-width: 768px) {

    /* HIDE: Large side images only */
    .section-image-wrapper,
    .section-image,
    .fbr-image,
    .benefit-image-wrapper,
    .why-image-wrapper {
        display: none !important;
    }

    /* RE-ENABLE: Small icons inside cards must be visible */
    .feature-icon-wrapper,
    .feature-icon-img,
    .pm-feature-icon img,
    .pm-feature-icon svg,
    .benefit-card img,
    .benefit-icon-img,
    .why-card img,
    .product-card img,
    .industry-card img,
    .acc-feature-icon img,
    .acc-feature-card img {
        display: block !important;
        /* Ensure icons are visible */
        visibility: visible !important;
    }

    /* KEEP: Hero section images AND CONTAINERS VISIBLE - ALL PAGES */
    .modern-hero-section img,
    .home-hero-section img,
    .hero-section img,
    .hero-section-wrapper img,
    .hero-container-wrapper img,
    .practice-manager-hero-section img,
    .hero-row-wrapper img,
    .pos-hero-image img,
    .accounting-hero-image img,
    .practice-hero-image img,
    .retail-hero-image img,
    .restaurant-hero-image img,
    .home-hero-image,
    /* Explicitly target home image class */
    [class*="-hero-section"] img,
    [class*="-hero-image"] img,
    /* Force containers to be visible and have size */
    .hero-right-column,
    .hero-right-wrapper,
    .hero-image-wrapper,
    .hero-form-container,
    .hero-form-wrapper,
    .hero-card-animate {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        /* Disable potential hiding transforms */
        overflow: visible !important;
        /* Allow image to be seen */
        height: auto !important;
        min-height: 1px !important;
    }

    /* Specific fix for Home Hero Image to ensure it's not collapsed or hidden */
    .home-hero-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        /* Force a minimum height */
        object-fit: contain !important;
        z-index: 100 !important;
        /* Ensure on top */
        position: relative !important;
        margin-top: 1rem !important;
        /* Add some spacing from text */
        display: block !important;
        animation: none !important;
        /* Disable potential conflicting animations */
    }

    /* Hide complex background elements on mobile to prevent overlay issues */
    .modern-hero-section .hero-svg-bg-elements,
    .modern-hero-section .svg-blob,
    [class*="svg-blob-"] {
        display: none !important;
    }

    .hero-card-animate {
        animation: none !important;
        opacity: 1 !important;
    }

    /* KEEP: Trusted by logos VISIBLE */
    .trusted-by-section img,
    .trusted-by-img,
    .trusted-by-card img {
        display: block !important;
        visibility: visible !important;
    }

    /* TRUSTED BY: Show ONLY ONE ROW on mobile */
    .trusted-by-carousel.reverse,
    .trusted-by-carousel-wrapper:nth-of-type(n+2) {
        display: none !important;
    }

    /* Adjust layout when images are hidden */
    .why-accountants-section .row,
    .fbr-compliance-section .row,
    .why-moneypex-section .row,
    .features-carousel-section .row,
    .benefits-wrapper-modern .row,
    .empowering-businesses-section .row {
        display: flex !important;
        flex-direction: column !important;
    }

    .why-accountants-section .col-lg-6,
    .fbr-compliance-section .col-lg-6,
    .why-moneypex-section .col-lg-6,
    .features-carousel-section .col-lg-6,
    .benefits-wrapper-modern .col-lg-6,
    .empowering-businesses-section .col-lg-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    /* Center content when images are hidden */
    .why-accountants-section .text-content,
    .fbr-compliance-section .text-content,
    .features-carousel-section .text-content,
    .benefits-wrapper-modern .text-content {
        text-align: center !important;
        margin: 0 auto !important;
    }

    /* Special handling for FBR sections - hide all large images */
    .fbr-compliance-section img:not(.fbr-feature-icon svg):not(.fbr-feature-icon img),
    .fbr-compliance-section .section-image {
        display: none !important;
    }

    /* Special handling for POS Hero Image Wrapper */
    .pos-hero-section .hero-image-wrapper {
        margin-left: 0 !important;
        margin-top: 1rem !important;
    }

    .pos-hero-section .hero-main-image {
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
    }
}

/* ========================================
   SECTION SPACING - MOBILE FIRST
   ======================================== */

/* Base section spacing for Desktop */
section {
    padding: 2.5rem 0 !important;
}

/* ========================================
   MOBILE BREAKPOINTS - AGGRESSIVE FIXES
   ======================================== */

/* Tablet (≤768px) - Reduced Spacing */
@media (max-width: 768px) {
    section {
        padding: 1rem 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .modern-hero-section,
    .home-hero-section {
        padding: 2rem 0 1rem 0 !important;
    }

    .trusted-by-section {
        padding: 0.5rem 0 1rem !important;
    }

    .why-moneypex-section,
    .mp-products-section,
    .modern-products-section,
    .fbr-compliance-section,
    .why-accountants-section,
    .acc-key-features-section,
    .pm-key-features-section,
    .features-carousel-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .empowering-businesses-section-new,
    .cta-growth-section,
    .industries-section,
    .industries-carousel-section,
    .pricing-section,
    #priceing,
    .pricing-comparison-section,
    .testimonials-section,
    .features-section,
    .benefits-section,
    .cta-section {
        padding: 1rem 0 !important;
        min-height: 0 !important;
    }

    .faq-growth-section,
    .faq-section {
        padding: 1rem 0 1.5rem !important;
    }
}

/* Mobile (≤576px) - VERY AGGRESSIVE reduction */
@media (max-width: 576px) {
    section {
        padding: 0.5rem 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }

    .modern-hero-section,
    .home-hero-section {
        padding: 1rem 0 0.5rem 0 !important;
    }

    .trusted-by-section {
        padding: 0.25rem 0 0.5rem !important;
    }

    .why-moneypex-section,
    .mp-products-section,
    .modern-products-section,
    .fbr-compliance-section,
    .why-accountants-section,
    .acc-key-features-section,
    .pm-key-features-section,
    .features-carousel-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .empowering-businesses-section-new,
    .cta-growth-section,
    .industries-section,
    .industries-carousel-section,
    .pricing-section,
    #priceing,
    .pricing-comparison-section,
    .testimonials-section,
    .features-section,
    .benefits-section,
    .cta-section {
        padding: 0.5rem 0 !important;
        min-height: 0 !important;
    }

    .faq-growth-section,
    .faq-section {
        padding: 0.5rem 0 0.75rem !important;
    }

    /* CTA Section specific fix */
    .cta-growth-section {
        padding: 0.875rem 0 !important;
    }

    .cta-growth-section .cta-card-growth {
        padding: 1rem 0.875rem !important;
    }

    /* Override bootstrap utilities that add padding/margin */
    .py-5 {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    .mb-5 {
        margin-bottom: 0.5rem !important;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    section {
        padding: 0.5rem 0 !important;
    }

    .modern-hero-section,
    .home-hero-section {
        padding: 0.75rem 0 0.5rem 0 !important;
    }
}

/* ========================================
   CONTAINER & GRID FIXES
   ======================================== */

@media (max-width: 768px) {

    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .container-fluid.container-md {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* FEATURES: Force 2 columns per row on mobile for various feature sections */
    .acc-key-features-grid,
    .features-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        /* 2 features per row */
        gap: 0.75rem !important;
    }

    /* Why Moneypex / Benefits Checklist / FBR: Force 1 column per row on mobile */
    .fbr-features,
    .benefits-checklist,
    .why-moneypex-section .benefits-checklist,
    .why-businesses-section .benefits-checklist {
        display: grid !important;
        grid-template-columns: 1fr !important;
        /* 1 feature per row */
        gap: 0.75rem !important;
    }

    /* EMPOWERING BUSINESSES: NUCLEAR FORCE 3 columns per row on mobile */
    .empowering-businesses-section-new .row.g-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .empowering-businesses-section-new .col-12.col-md-4 {
        width: 33.333333% !important;
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
        padding: 0.25rem !important;
        margin: 0 !important;
    }

    /* Shrink content to fit 3 in a row on mobile */
    .empowering-businesses-section-new .stat-card-new {
        padding: 0.75rem 0.25rem !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        min-height: 130px !important;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06) !important;
    }

    .empowering-businesses-section-new .stat-icon-new {
        margin-bottom: 0.4rem !important;
    }

    .empowering-businesses-section-new .stat-icon-new svg {
        width: 28px !important;
        height: 28px !important;
    }

    .empowering-businesses-section-new .stat-number-new {
        font-size: 1.15rem !important;
        margin: 0.2rem 0 !important;
        font-weight: 700 !important;
    }

    .empowering-businesses-section-new .stat-label-new {
        font-size: 0.7rem !important;
        line-height: 1.15 !important;
        padding: 0 0.15rem !important;
        text-align: center !important;
    }

    /* Ensure feature/benefit items look good in grid - Remove min-height stretching for iOS */
    .fbr-feature-item,
    .benefit-check-item,
    .pm-feature-card,
    .acc-feature-card {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        background: #f8fafc;
        padding: 0.75rem !important;
        border-radius: 8px !important;
        min-height: auto !important;
        /* Fix Safari/iOS stretching */
        height: auto !important;
        display: flex !important;
    }

    /* Tighten gaps in FBR and Content sections for PK */
    .fbr-features,
    .fbr-content,
    .benefits-checklist {
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
    }

    /* Reset margins for grid items */
    .fbr-feature-icon,
    .benefit-check-icon {
        margin-right: 0 !important;
        margin-bottom: 0.5rem !important;
    }

    .fbr-feature-content>div,
    .benefit-check-item>div {
        text-align: center !important;
    }

    .fbr-feature-title,
    .benefit-check-item strong {
        font-size: 0.9rem !important;
        display: block;
        margin-bottom: 0.25rem;
    }

    .fbr-feature-description,
    .benefit-check-item p {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0 !important;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 576px) {

    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .container-fluid.container-md {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ========================================
   HEADING & TEXT FIXES
   ======================================== */

@media (max-width: 768px) {
    .text-center.mb-5 {
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .text-center.mb-4 {
        margin-bottom: 0.5rem !important;
    }

    .text-center.mb-3 {
        margin-bottom: 0.375rem !important;
    }

    .section-title,
    .products-section-heading,
    .why-moneypex-heading,
    .features-carousel-heading,
    .features-section-heading,
    .faq-section-heading,
    .fbr-heading,
    .trusted-by-heading,
    .testimonials-heading,
    .cta-growth-section h2,
    .empowering-businesses-section h2,
    .industries-section h2,
    .faq-section h2,
    .faq-growth-section h2,
    .benefit-section h2,
    .pricing-section h2 {
        font-size: 1.35rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.5rem !important;
        margin-top: 0 !important;
    }

    .section-subtitle,
    .section-text,
    .text-body-large {
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 576px) {
    .text-center.mb-5 {
        margin-bottom: 0.375rem !important;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    .text-center.mb-4 {
        margin-bottom: 0.375rem !important;
    }

    .text-center.mb-3 {
        margin-bottom: 0.25rem !important;
    }

    .section-title,
    .products-section-heading,
    .why-moneypex-heading,
    .features-carousel-heading,
    .features-section-heading,
    .faq-section-heading,
    .fbr-heading,
    .trusted-by-heading,
    .testimonials-heading,
    .cta-growth-section h2,
    .empowering-businesses-section h2,
    .industries-section h2,
    .faq-section h2,
    .faq-growth-section h2,
    .benefit-section h2,
    .pricing-section h2 {
        font-size: 1.25rem !important;
        line-height: 1.2 !important;
        margin-bottom: 0.375rem !important;
    }

    .section-subtitle,
    .section-text,
    .text-body-large {
        margin-bottom: 0.5rem !important;
    }
}

/* ========================================
   CARD & COMPONENT FIXES
   ======================================== */

@media (max-width: 768px) {

    .benefit-card-modern,
    .mp-products-card,
    .modern-product-card,
    .feature-card-modern,
    .cta-card-modern,
    .pos-pricing-card,
    .pricing-card,
    #priceing {
        padding: 1rem !important;
        margin-bottom: 0.75rem !important;
        min-height: 0 !important;
    }

    /* Adjust cards when big side images are hidden */
    .benefit-card-modern:has(.section-image-wrapper),
    .mp-products-card:has(.section-image-wrapper),
    .feature-card:has(.section-image-wrapper) {
        text-align: center !important;
        padding: 1.25rem !important;
    }

    /* Reduce grid gaps */
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }

    .row>[class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 0.75rem !important;
    }
}

@media (max-width: 576px) {

    .benefit-card-modern,
    .mp-products-card,
    .feature-card,
    .industry-card,
    .pos-pricing-card {
        padding: 0.875rem !important;
        margin-bottom: 0.625rem !important;
    }

    /* Adjust cards when big images are hidden */
    .benefit-card-modern:has(.section-image-wrapper),
    .mp-products-card:has(.section-image-wrapper),
    .feature-card:has(.section-image-wrapper) {
        text-align: center !important;
        padding: 1rem !important;
    }

    /* Further reduce grid gaps */
    .row {
        margin-left: -0.375rem !important;
        margin-right: -0.375rem !important;
    }

    .row>[class*="col-"] {
        padding-left: 0.375rem !important;
        padding-right: 0.375rem !important;
        margin-bottom: 0.625rem !important;
    }
}

/* ========================================
   PRICING DISPLAY FIX
   ======================================== */

@media (max-width: 768px) {
    .pos-price-display {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: center !important;
    }

    .pos-price-value {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    .pos-price-period {
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
}

@media (max-width: 576px) {
    .pos-price-display {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        justify-content: center !important;
    }

    .pos-price-value {
        font-size: 1.875rem !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
        max-width: 100% !important;
    }

    h1,
    .modern-hero-heading {
        font-size: clamp(1.75rem, 8vw, 2.25rem) !important;
        line-height: 1.1 !important;
        margin-bottom: 0.5rem !important;
        /* Reduced from default */
    }

    h2,
    .fbr-heading,
    .why-moneypex-heading {
        font-size: clamp(1.5rem, 6vw, 1.85rem) !important;
        line-height: 1.2 !important;
        margin-bottom: 0.75rem !important;
    }

    .modern-hero-text {
        margin-top: 0.5rem !important;
    }

    .pos-price-period {
        font-size: 0.875rem !important;
        line-height: 1.2 !important;
    }

    /* Ensure currency and amount stay together */
    .pos-price-currency+.pos-price-value {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        align-items: baseline !important;
    }
}

/* ========================================
   EMERGENCY OVERRIDES
   ======================================== */

/* Force proper mobile behavior */
@media (max-width: 768px) {
    .row {
        margin-left: -0.75rem !important;
        margin-right: -0.75rem !important;
    }

    .row>[class*="col-"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        margin-bottom: 1rem !important;
    }

    /* CTA Buttons Responsive Fix */
    .pm-cta-buttons {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        width: 100% !important;
        margin-top: 1rem !important;
    }

    .pm-cta-buttons .btn-premium,
    .pm-cta-buttons .btn-premium-outline {
        width: 100% !important;
        max-width: 320px !important;
        /* Constrain width to look like buttons, not bars */
        min-height: 50px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    /* Ensure outline button isn't invisible or weird */
    .pm-cta-buttons .btn-premium-outline {
        background-color: transparent !important;
        border: 2px solid #175aa9 !important;
        color: #175aa9 !important;
    }

    .pm-cta-buttons .btn-premium-outline:hover,
    .pm-cta-buttons .btn-premium-outline:active {
        background-color: #175aa9 !important;
        color: #fff !important;
    }

    /* Ensure premium button matches style */
    .pm-cta-buttons .btn-premium {
        color: #fff !important;
    }

    /* Increase CTA card padding for breathing room */
    .pm-cta-card {
        padding: 2rem 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .row {
        margin-left: -0.5rem !important;
        margin-right: -0.5rem !important;
    }

    .row>[class*="col-"] {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
        margin-bottom: 0.875rem !important;
    }


    /* Strict spacing again for safety */
    .container {
        margin-bottom: 0 !important;
    }

    /* SELECT APP & LOGIN PAGES: FORCE 2 cards per row on mobile */
    .select-app-section .row.g-4,
    .select-app-section .row.g-3,
    .select-app-section .row {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0 !important;
        margin: 0 -0.4rem !important;
    }

    .select-app-section .col-lg-3,
    .select-app-section .col-md-6,
    .select-app-section .col-lg-3.col-md-6 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 0.4rem !important;
        margin: 0 !important;
    }

    .select-app-section .app-selection-card {
        padding: 0.9rem 0.6rem !important;
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
    }

    .select-app-section .app-card-icon-wrapper {
        margin-bottom: 0.75rem !important;
    }

    .select-app-section .app-card-icon {
        width: 50px !important;
        height: 50px !important;
    }

    .select-app-section .app-icon-img {
        width: 30px !important;
        height: 30px !important;
    }

    .select-app-section .modern-card-title {
        font-size: 0.95rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }

    .select-app-section .modern-card-text {
        font-size: 0.8rem !important;
        line-height: 1.3 !important;
        margin-bottom: 0.75rem !important;
    }

    .select-app-section .btn-premium {
        padding: 0.6rem 0.75rem !important;
        font-size: 0.85rem !important;
    }
}

/* ===== pk-home-design-fix.css ===== */
/* ========================================
   PK HOME PAGE DESIGN PATTERN ALIGNMENT
   Ensure PK home page matches UK design patterns
   ======================================== */

/* ========================================
   PK ACCOUNTING TRUSTED BY SECTION FIX
   ======================================== */

/* Ensure PK accounting practice manager trusted by section shows */
.accounting-page.fbr-page .practice-manager-trusted {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: #ffffff !important;
}

.accounting-page.fbr-page .practice-manager-trusted .trusted-by-carousel-wrapper {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.accounting-page.fbr-page .practice-manager-trusted .trusted-by-carousel {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.accounting-page.fbr-page .practice-manager-trusted .trusted-by-card {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ========================================
   1. FBR COMPLIANCE SECTION - Match UK MTD Style
   ======================================== */

.fbr-compliance-section {
    padding: 6rem 50px !important;
    background: transparent !important;
    overflow: visible !important;
    background-image: url('/lines-bg-header.svg') !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: auto !important;
}

.fbr-compliance-section .container-fluid {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding-left: 50px !important;
    padding-right: 50px !important;
}

.fbr-compliance-section .row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4rem !important;
    align-items: center !important;
}

/* Ensure image stays on the side - desktop and tablet */
@media (min-width: 768px) {
    .fbr-image {
        order: 2 !important;
    }
    
    .fbr-content {
        order: 1 !important;
    }
}

/* Keep side-by-side layout on tablets and larger screens */
@media (max-width: 992px) and (min-width: 768px) {
    .fbr-compliance-section .row {
        grid-template-columns: 1fr 1fr !important;
        gap: 2.5rem !important;
    }
    
    .fbr-compliance-section {
        padding: 4rem 30px !important;
    }
    
    .fbr-compliance-section .container-fluid {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    
    .fbr-heading {
        font-size: 2rem !important;
    }
    
    .fbr-image-wrapper {
        max-width: 100% !important;
    }
}

/* Only stack on mobile (below 768px) */
@media (max-width: 767px) {
    .fbr-compliance-section .row {
        grid-template-columns: 1fr !important;
        gap: 3rem !important;
    }
    
    .fbr-compliance-section {
        padding: 4rem 20px !important;
    }
    
    .fbr-compliance-section .container-fluid {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    
    .fbr-heading {
        font-size: clamp(1.75rem, 5vw, 2rem) !important;
    }
}

.fbr-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
}

.fbr-heading {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 800 !important;
    color: #1e293b !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
}

.fbr-heading .premium-underline {
    color: #1E5CAA !important;
}

.fbr-description {
    font-family: 'Inter', 'Montserrat', sans-serif !important;
    font-size: 1.125rem !important;
    color: #64748b !important;
    line-height: 1.7 !important;
    margin-bottom: 2rem !important;
    text-align: center !important;
}

.fbr-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
}

.fbr-feature-item {
    display: flex !important;
    gap: 1rem !important;
    align-items: flex-start !important;
}

.fbr-feature-icon {
    width: 3rem !important;
    height: 3rem !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.fbr-feature-item:hover .fbr-feature-icon {
    transform: scale(1.05) !important;
    box-shadow: 0 10px 15px -3px rgba(30, 92, 170, 0.2) !important;
}

.fbr-feature-icon svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
    color: #1E5CAA !important;
}

.fbr-feature-content {
    flex: 1 !important;
}

.fbr-feature-title {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: #111827 !important;
    margin-bottom: 0.5rem !important;
}

.fbr-feature-description {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.fbr-cta-wrapper {
    margin-top: 1rem !important;
}

.fbr-cta-wrapper .btn-premium {
    padding: 0.75rem 1.5rem !important;
    font-size: 1rem !important;
}

.fbr-cta-wrapper .btn-premium svg {
    width: 1.125rem !important;
    height: 1.125rem !important;
}

.fbr-image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.fbr-image-wrapper {
    width: 100% !important;
    max-width: 600px !important;
    border-radius: 1rem !important;
    overflow: hidden !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

.fbr-image-wrapper img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* ========================================
   2. BENEFITS SECTION - Match UK Style
   ======================================== */

.benefits-wrapper-modern {
    padding: 6rem 0 !important;
    background: transparent !important;
}

.benefits-wrapper-modern .container-fluid {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: clamp(1rem, 3vw, 3rem) !important;
    padding-right: clamp(1rem, 3vw, 3rem) !important;
}

.benefits-wrapper-modern .text-center {
    margin-bottom: 3rem !important;
}

.benefits-wrapper-modern h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
}

.benefits-wrapper-modern .row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
}

@media (max-width: 1023px) {
    .benefits-wrapper-modern .row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1.5rem !important;
    }
    .benefits-wrapper-modern {
        padding: 3rem 1rem !important;
    }
    .benefits-wrapper-modern .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 767px) {
    .benefits-wrapper-modern .row {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    .benefit-card-modern {
        padding: 2rem 1.5rem !important;
    }
}

.benefit-card-modern {
    background: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 1.25rem !important;
    padding: 2.5rem 2rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    height: 100% !important;
    z-index: 1 !important;
}

.benefit-card-modern::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #93c5fd 0%, #60a5fa 100%) !important;
    transform: scaleX(0) !important;
    transform-origin: left !important;
    transition: transform 0.3s ease !important;
}

.benefit-card-modern:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    border-color: #bfdbfe !important;
    z-index: 2 !important;
}

.benefit-card-modern:hover::before {
    transform: scaleX(1) !important;
}

.benefit-icon-wrapper {
    width: 4rem !important;
    height: 4rem !important;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%) !important;
    border-radius: 0.75rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 1.5rem !important;
    transition: all 0.3s ease !important;
}

.benefit-card-modern:hover .benefit-icon-wrapper {
    transform: scale(1.1) rotate(5deg) !important;
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2) !important;
}

.benefit-icon-img {
    width: 3.5rem !important;
    height: 3.5rem !important;
    object-fit: contain !important;
}

/* Remove background box from benefit icon wrappers when using PNG images - Match UK */
.benefit-icon-wrapper:has(.benefit-icon-img) {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
}

.benefit-card-modern:hover .benefit-icon-wrapper {
    transform: scale(1.1) rotate(5deg) !important;
    background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%) !important;
}

.benefit-icon {
    width: 2rem !important;
    height: 2rem !important;
    color: #1E5CAA !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.benefit-title {
    font-family: 'Montserrat', 'Inter', sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
}

.benefit-description {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9375rem !important;
    color: #6b7280 !important;
    line-height: 1.7 !important;
    margin: 0 !important;
}

/* ========================================
   3. EMPOWERING BUSINESSES SECTION - Match UK Style
   ======================================== */

.empowering-businesses-section {
    padding: clamp(4rem, 8vh, 6rem) clamp(1rem, 4vw, 3rem) !important;
    background: transparent !important;
    position: relative !important;
    overflow: visible !important;
}

.empowering-businesses-section .container-fluid {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: clamp(1rem, 3vw, 3rem) !important;
    padding-right: clamp(1rem, 3vw, 3rem) !important;
}

/* ========================================
   4. TESTIMONIALS SECTION - Match UK Style
   ======================================== */

.testimonials-growth-section {
    padding: clamp(4rem, 8vh, 5rem) clamp(1rem, 4vw, 3rem) !important;
    background: transparent !important;
    position: relative !important;
    overflow: hidden !important;
}

.testimonials-growth-section .container-fluid {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: clamp(1rem, 3vw, 3rem) !important;
    padding-right: clamp(1rem, 3vw, 3rem) !important;
}

.testimonials-growth-section .container {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 clamp(1rem, 3vw, 2rem) !important;
}

.testimonials-growth-section h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

.testimonials-growth-section > .container > .text-center > p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 1.8vw, 1.125rem) !important;
    color: #64748b !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

.testimonials-grid-modern {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 2rem !important;
    margin-top: 3rem !important;
}

.testimonial-card-growth {
    background: white !important;
    border-radius: 1rem !important;
    padding: 2rem !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.testimonial-card-growth img {
    width: 4rem !important;
    height: 4rem !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin: 0 auto 1.5rem !important;
    display: block !important;
}

.testimonial-card-growth p {
    font-size: clamp(0.875rem, 1.2vw, 0.95rem) !important;
    color: #374151 !important;
    line-height: 1.6 !important;
    margin-bottom: 1.5rem !important;
    flex-grow: 1 !important;
}

.testimonial-card-growth > div:last-child {
    text-align: center !important;
}

.testimonial-card-growth strong {
    display: block !important;
    color: #111827 !important;
    font-size: 1rem !important;
    margin-bottom: 0.25rem !important;
}

.testimonial-card-growth > div:last-child > p {
    font-size: 0.875rem !important;
    color: #6b7280 !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .testimonials-grid-modern {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
}

/* ========================================
   5. CTA SECTION - Match UK Style
   ======================================== */

.cta-growth-section {
    padding: clamp(4rem, 8vh, 6rem) clamp(1rem, 4vw, 3rem) !important;
    background: #ffffff !important;
    position: relative !important;
    overflow: hidden !important;
}

.cta-growth-section .container-fluid {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: clamp(1rem, 3vw, 3rem) !important;
    padding-right: clamp(1rem, 3vw, 3rem) !important;
}

.cta-growth-section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 clamp(1rem, 3vw, 2rem) !important;
    position: relative !important;
    z-index: 1 !important;
}

.cta-growth-section h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(2rem, 5vw, 3.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 1.5rem !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
}

.cta-growth-section > .container > .text-center > p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 2vw, 1.25rem) !important;
    color: #64748b !important;
    max-width: 700px !important;
    margin: 0 auto 3rem !important;
    line-height: 1.6 !important;
}

.cta-cards-grid {
    display: flex !important;
    justify-content: center !important;
    max-width: 500px !important;
    margin: 0 auto !important;
}

.cta-card-growth {
    background: white !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 1.5rem !important;
    padding: 3rem 2rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    width: 100% !important;
}

.cta-card-growth > div:first-child {
    width: 5rem !important;
    height: 5rem !important;
    background: #eff6ff !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 2rem !important;
    color: #1E5CAA !important;
}

.cta-card-growth > div:first-child svg {
    width: 2.5rem !important;
    height: 2.5rem !important;
}

.cta-card-growth h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.5rem, 2.5vw, 1.75rem) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
}

.cta-card-growth > p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.9375rem, 1.5vw, 1.05rem) !important;
    color: #64748b !important;
    margin-bottom: 2.5rem !important;
    line-height: 1.6 !important;
}

.cta-card-growth .btn-premium {
    width: 100% !important;
}

.cta-card-growth .btn-premium svg {
    width: 1.5rem !important;
    height: 1.5rem !important;
}

/* ========================================
   6. FAQ SECTION - Match UK Style
   ======================================== */

.faq-growth-section {
    padding: clamp(4rem, 8vh, 6rem) clamp(1rem, 4vw, 3rem) !important;
    background-color: transparent !important;
    position: relative !important;
    overflow: visible !important;
}

.faq-growth-section .container-fluid {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: clamp(1rem, 3vw, 3rem) !important;
    padding-right: clamp(1rem, 3vw, 3rem) !important;
}

.faq-growth-section {
    background-image: url('/lines-bg-header.svg') !important;
    background-repeat: no-repeat !important;
    background-position: left bottom !important;
    background-size: auto !important;
}

.faq-growth-section .container {
    max-width: 1000px !important;
    margin: 0 auto !important;
    padding: 0 clamp(1rem, 3vw, 2rem) !important;
}

.faq-growth-section h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 1rem !important;
    line-height: 1.2 !important;
}

.faq-growth-section > .container > .text-center > p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(1rem, 1.8vw, 1.125rem) !important;
    color: #64748b !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    line-height: 1.6 !important;
}

/* ========================================
   7. REMOVE INLINE STYLES - Use Classes Instead
   ======================================== */

/* Override inline styles with proper responsive classes */
.mp-pk-home section[style*="padding"],
.mp-pk-home section[style*="background"],
.mp-pk-home section[style*="overflow"] {
    padding: inherit !important;
    background: inherit !important;
    overflow: inherit !important;
}

/* ========================================
   8. RESPONSIVE IMPROVEMENTS
   ======================================== */

@media (max-width: 767px) {
    .fbr-compliance-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .testimonials-growth-section,
    .cta-growth-section,
    .faq-growth-section {
        padding: 3rem 1rem !important;
    }
    
    .fbr-compliance-section .container-fluid,
    .benefits-wrapper-modern .container-fluid,
    .empowering-businesses-section .container-fluid,
    .testimonials-growth-section .container-fluid,
    .cta-growth-section .container-fluid,
    .faq-growth-section .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    .fbr-heading,
    .benefits-wrapper-modern h2 {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        margin-bottom: 1rem !important;
    }
    
    .benefit-card-modern {
        padding: 1.5rem 1.25rem !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .fbr-compliance-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .testimonials-growth-section,
    .cta-growth-section,
    .faq-growth-section {
        padding: 4rem 2rem !important;
    }
}

@media (min-width: 992px) {
    .fbr-compliance-section,
    .benefits-wrapper-modern,
    .empowering-businesses-section,
    .testimonials-growth-section,
    .cta-growth-section,
    .faq-growth-section {
        padding: 5rem 3rem !important;
    }
}

/* ========================================
   9. CONSISTENT HEADING STYLES
   ======================================== */

.mp-pk-home h2 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    line-height: 1.25 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
}

.mp-pk-home h3 {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif !important;
    font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
}

/* ========================================
   10. CONSISTENT TEXT STYLES
   ======================================== */

.mp-pk-home p {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.9375rem, 1.5vw, 1.0625rem) !important;
    color: #64748b !important;
    line-height: 1.7 !important;
}

/* ========================================
   11. BUTTON CONSISTENCY
   ======================================== */

.mp-pk-home .btn-premium {
    font-family: 'Inter', sans-serif !important;
    font-size: clamp(0.9375rem, 1.2vw, 1rem) !important;
    padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem) !important;
    border-radius: 0.75rem !important;
    transition: all 0.3s ease !important;
}

/* ========================================
   12. CONTAINER CONSISTENCY
   ======================================== */

.mp-pk-home .container-fluid {
    max-width: 1400px !important;
    margin: 0 auto !important;
}

.mp-pk-home .container-fluid.container-md {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding-left: clamp(1rem, 3vw, 3rem) !important;
    padding-right: clamp(1rem, 3vw, 3rem) !important;
}