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