/* ══════════════════════════════════════════════════════════════════════════
   MYND FINTECH - GLOBAL STYLES & DESIGN TOKENS
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Universal Header & Footer Link Resets ── */
header a,
footer a {
    text-decoration: none !important;
    color: inherit !important;
}
header a:hover,
footer a:hover {
    text-decoration: none !important;
}
header nav a:hover,
footer ul a:hover {
    color: #0f3cd9 !important;
}
footer ul,
footer ol {
    padding-left: 0 !important;
    margin-left: 0 !important;
    list-style: none !important;
}

/* ── Global Typography Rules ── */
h1, h2, h3, h4, h5, h6,
.font-urbanist {
    font-family: 'Urbanist', 'Helvetica Neue', sans-serif !important;
    font-weight: 700 !important;
}

body, p, span, a, li, input, button, textarea, select, div,
.font-avenir {
    font-family: 'Avenir Next', 'Avenir', 'Helvetica Neue', sans-serif;
}

/* ── Global Layout & Body Minimum Height ── */
html, body {
    min-height: 100vh !important;
    background-color: #ffffff;
    color: #1e293b;
    margin: 0 !important;
}

#root {
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
}

/* ── Universal Site-Wide Image Fluidity ── */
img {
    max-width: 100%;
    height: auto;
}

/* ── Section & Spacing Alignment Engine ── */
#root > div > div:first-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

#root > div > div:nth-of-type(2) {
    margin-top: 0 !important;
    padding-top: 30px !important;
}

#mynd-testimonials-section {
    padding: 90px 0 !important;
    margin: 40px 0 !important;
    clear: both !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ── Full Visibility & Auto Height for Contact / Get In Touch Sections ── */
#root > div > div:nth-last-child(2),
div:has(p:contains('Get In Touch')),
div:has(h2:contains('Get In Touch')),
section:has(h2:contains('Get In Touch')) {
    position: relative !important;
    z-index: 15 !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clear: both !important;
    margin-bottom: 60px !important;
    padding-bottom: 60px !important;
}

/* ── Team Avatar Hover Image Background #0d38d3 ── */
.team-avatar,
.team-card .team-avatar,
.team-avatar-lg,
#team-single-scope .team-avatar-lg {
    background-color: transparent;
    transition: background-color 0.3s ease, border-color 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease !important;
}

.team-card:hover .team-avatar,
.team-avatar:hover,
.team-avatar-lg:hover,
#team-single-scope .team-profile-card:hover .team-avatar-lg,
#team-single-scope .team-avatar-lg:hover {
    background-color: #0d38d3 !important;
    border-color: #0d38d3 !important;
    filter: grayscale(0%) !important;
    box-shadow: 0 8px 24px rgba(13, 56, 211, 0.35) !important;
}

/* ── Comprehensive Mobile & Tablet Responsive Engine ── */
@media (max-width: 991px) {
    h1, .h1, 
    #our-story-scope .os-hero h1, 
    #career-scope .career-hero h1, 
    #contact-scope .contact-left h1, 
    #blog-scope .blog-hero h1,
    #single-blog-scope .sb-hero h1 {
        font-size: 28px !important;
        line-height: 1.28 !important;
    }

    h2, .h2, 
    #our-story-scope h2, 
    #career-scope h2, 
    #contact-scope h2,
    #blog-scope h2 {
        font-size: 22px !important;
        line-height: 1.35 !important;
    }

    h3, .h3 {
        font-size: 19px !important;
    }

    h4, .h4 {
        font-size: 18px !important;
    }

    p, span, li, a {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    section {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #career-scope .career-hero {
        padding: 40px 20px !important;
    }
    
    #our-story-scope .os-hero, #blog-scope .blog-hero {
        padding: 40px 20px 0 !important;  
    }

    #single-blog-scope .sb-hero {
        padding: 30px 20px !important;
        min-height: 220px !important;
    }

    #single-blog-scope .sb-article {
        padding: 30px 15px !important;
        font-size: 15px !important;
    }
    #single-blog-scope .sb-article img {
        border-radius: 12px !important;
        margin: 16px 0 !important;
        width: 100% !important;
        height: auto !important;
    }

    .col-lg-12, .col-lg-10, .col-lg-9, .col-lg-8, .col-lg-7, 
    .col-lg-6, .col-lg-5, .col-lg-4, .col-lg-3, .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
    }

    #our-story-scope .contact-card, 
    #contact-scope .contact-card,
    #career-scope .job-card,
    #our-story-scope .mv-card,
    #our-story-scope .pillar-card {
        padding: 24px 18px !important;
        border-radius: 16px !important;
    }

    #career-scope .moments-section div[style*="height"] {
        height: auto !important;
        min-height: 160px !important;
    }
    #career-scope .moment-img {
        height: 200px !important;
        width: 100% !important;
        object-fit: cover !important;
    }
}

@media (max-width: 575px) {
    h1, .h1 { font-size: 24px !important; }
    h2, .h2 { font-size: 20px !important; }
    h3, .h3 { font-size: 19px !important; }
    h4, .h4 { font-size: 16px !important; }
    p, span, li, a { font-size: 14px !important; }

    body, html {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    section {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }
    .btn-case-study, .btn, button {
        max-width: 100% !important;
    }
}