/* ========================================
   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, 1.25rem) !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, 1.125rem) !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, 1.05rem) !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: 600px !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: 100% !important;
    }
    
    #mpProductsModal .modal-content {
        height: 100% !important;
        border-radius: 0 !important;
    }
}

/* ========================================
   END OF RESPONSIVE OPTIMIZATION
   ======================================== */