/* ========================================
   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;
}

