/* ========================================
   COMPREHENSIVE MOBILE RESPONSIVE STYLES
   Optimized and Consolidated Version
   ======================================== */

/* ========================================
   GLOBAL MOBILE OPTIMIZATIONS
   ======================================== */

/* Ensure no horizontal scrolling */
html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* ========================================
   BREAKPOINT: 1200px (Large Tablets/Small Desktop)
   ======================================== */
@media (max-width: 1200px) {
    .container,
    .container-fluid {
        max-width: 100% !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

/* ========================================
   BREAKPOINT: 992px (Tablets)
   ======================================== */
@media (max-width: 992px) {
    /* Container */
    .container,
    .container-fluid {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }

    /* Section padding */
    section {
        padding: 50px 0 40px !important;
    }

    /* Typography */
    h1 { font-size: 2.25rem !important; line-height: 1.2 !important; }
    h2 { font-size: 1.85rem !important; line-height: 1.3 !important; }
    h3 { font-size: 1.5rem !important; }
    h4 { font-size: 1.3rem !important; }
    h5 { font-size: 1.15rem !important; }
    h6 { font-size: 1rem !important; }

    /* Cards */
    .card-body { padding: 1.5rem !important; }
    .card.p-4, .card.p-5 { padding: 1.75rem !important; }

    /* Spacing */
    .mb-5, .mb-lg-5 { margin-bottom: 3rem !important; }
    .mt-5, .mt-lg-5 { margin-top: 3rem !important; }
    .p-5, .p-lg-5 { padding: 2rem !important; }

    /* Tables */
    .table-responsive { font-size: 0.9rem !important; }
    .table th, .table td { padding: 0.75rem 0.5rem !important; }

    /* Decorative elements */
    .position-absolute.rounded-circle[style*="width: 400px"],
    .position-absolute.rounded-circle[style*="width: 350px"],
    .position-absolute.rounded-circle[style*="width: 250px"],
    .position-absolute.rounded-circle[style*="width: 200px"] {
        opacity: 0.5 !important;
    }
}

/* ========================================
   BREAKPOINT: 768px (Mobile Landscape/Small Tablets)
   ======================================== */
@media (max-width: 768px) {
    /* Container */
    .container,
    .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* Section */
    section {
        padding: 40px 0 30px !important;
        min-height: auto !important;
    }
    section[style*="min-height: 100vh"],
    section[style*="height: 100vh"] {
        min-height: auto !important;
        height: auto !important;
    }

    /* Hide decorative elements */
    .position-absolute.rounded-circle,
    .position-absolute[style*="background: radial-gradient"],
    div[style*="filter: blur"] {
        display: none !important;
    }

    /* Typography */
    h1 { font-size: 1.85rem !important; margin-bottom: 1rem !important; }
    h2 { font-size: 1.6rem !important; margin-bottom: 1rem !important; }
    h3 { font-size: 1.35rem !important; margin-bottom: 0.85rem !important; }
    h4 { font-size: 1.15rem !important; }
    h5 { font-size: 1.05rem !important; }
    h6 { font-size: 0.95rem !important; }
    p { font-size: 0.95rem !important; line-height: 1.6 !important; }

    /* Cards */
    .card-body { padding: 1.25rem !important; }
    .card.p-3, .card.p-4, .card.p-5,
    .card .p-4, .card .p-5 { padding: 1.25rem !important; }
    .row.g-4 { gap: 1rem !important; }
    .row.g-3 { gap: 0.75rem !important; }

    /* Default column layouts */
    .col-lg-6, .col-lg-4, .col-lg-3 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .col-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    /* Badges */
    .badge { font-size: 0.8rem !important; padding: 0.45rem 0.9rem !important; }

    /* WHO WE ARE - 2x2 grid on mobile */
    .who-we-are-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    .who-we-are-grid > div {
        gap: 8px !important;
    }
    .who-we-are-grid > div > div:first-child {
        width: 40px !important;
        height: 40px !important;
    }
    .who-we-are-grid > div > div:first-child i {
        font-size: 1rem !important;
    }
    .who-we-are-grid span {
        font-size: 0.8rem !important;
    }

    /* Why Us & Best For cards - centered on mobile */
    .why-us-card,
    .best-for-card,
    .decision-card,
    .transition-card {
        text-align: center !important;
    }
    .why-us-content,
    .best-for-content,
    .decision-content,
    .transition-content {
        align-items: center !important;
        text-align: center !important;
    }
    .why-us-content > div:first-child,
    .best-for-content > div:first-child,
    .decision-content > div:first-child,
    .transition-content > div:first-child {
        flex-direction: column !important;
        text-align: center !important;
    }
    .why-us-content .ms-lg-3,
    .best-for-content .ms-lg-3,
    .decision-content .ms-lg-3,
    .transition-content .ms-lg-3 {
        margin-left: 0 !important;
        margin-top: 0.75rem !important;
    }

    /* Industry Focus - 2 per row on mobile (flexbox) */
    .industry-focus-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding-left: 0 !important;
    }
    .industry-focus-grid .industry-item,
    .industry-focus-grid > div {
        flex: 0 0 calc(50% - 0.3rem) !important;
        min-width: unset !important;
        padding: 0.6rem !important;
    }
    .industry-focus-grid > div i {
        font-size: 1.2rem !important;
        margin-bottom: 0.3rem !important;
    }
    .industry-focus-grid > div span {
        font-size: 0.8rem !important;
    }

    /* Country Focus - 2 per row on mobile */
    .country-focus-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
    }
    .country-focus-grid > div {
        flex: 0 0 calc(50% - 0.3rem) !important;
        padding: 0.5rem !important;
    }
    .country-focus-grid > div i {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }
    .country-focus-grid > div span {
        font-size: 0.8rem !important;
    }

    /* Life Stages - 2 per row on mobile (flexbox) */
    .life-stages-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding-left: 0 !important;
    }
    .life-stages-grid .life-stage-item,
    .life-stages-grid > div {
        flex: 0 0 calc(50% - 0.3rem) !important;
        min-width: unset !important;
        padding: 0.5rem !important;
    }
    .life-stages-grid > div i {
        font-size: 0.8rem !important;
        margin-right: 0.5rem !important;
    }
    .life-stages-grid > div span {
        font-size: 0.8rem !important;
    }

    /* Career Stages - 2 per row on mobile (flexbox) */
    .career-stages-grid {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        padding-left: 0 !important;
    }
    .career-stages-grid .career-stage-item,
    .career-stages-grid > div {
        flex: 0 0 calc(50% - 0.3rem) !important;
        min-width: unset !important;
        padding: 0.5rem !important;
    }
    .career-stages-grid > div i {
        font-size: 0.8rem !important;
        margin-right: 0.5rem !important;
    }
    .career-stages-grid > div span {
        font-size: 0.8rem !important;
    }

    /* Buttons */
    .btn-lg { padding: 0.7rem 1.75rem !important; font-size: 0.95rem !important; }
    .btn { padding: 0.6rem 1.25rem !important; font-size: 0.9rem !important; }
    .btn-sm { padding: 0.4rem 0.8rem !important; font-size: 0.8rem !important; }

    /* Icon wrappers */
    div[style*="width: 80px; height: 80px"] { width: 60px !important; height: 60px !important; }
    div[style*="width: 70px; height: 70px"] { width: 55px !important; height: 55px !important; }
    div[style*="width: 60px; height: 60px"] { width: 50px !important; height: 50px !important; }
    div[style*="width: 50px; height: 50px"] { width: 42px !important; height: 42px !important; }

    /* Icon font sizes */
    i[style*="font-size: 3rem"] { font-size: 2.25rem !important; }
    i[style*="font-size: 2.5rem"] { font-size: 2rem !important; }
    i[style*="font-size: 2rem"] { font-size: 1.75rem !important; }
    i[style*="font-size: 1.8rem"], i[style*="font-size: 1.75rem"] { font-size: 1.5rem !important; }

    /* Tables */
    .table-responsive {
        font-size: 0.8rem !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table { min-width: 600px; }
    .table th, .table td { padding: 0.6rem 0.4rem !important; font-size: 0.8rem !important; }
    .table th { font-size: 0.85rem !important; }

    /* Spacing */
    .mb-3, .mb-4, .mb-5 { margin-bottom: 2rem !important; }
    .mb-6, .mb-lg-6 { margin-bottom: 2.5rem !important; }
    .mt-3, .mt-4, .mt-5 { margin-top: 2rem !important; }
    .p-4, .p-5 { padding: 1.5rem !important; }
    .px-4, .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .py-4, .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .gap-3 { gap: 1rem !important; }
    .gap-4 { gap: 1.25rem !important; }

    /* Text alignment */
    .text-lg-start { text-align: center !important; }
    .d-flex.gap-3.justify-content-lg-start,
    .d-flex.gap-3.flex-wrap { justify-content: center !important; }

    /* Disable hover effects */
    .hover-lift:hover, .hover-scale:hover, .card:hover { transform: none !important; }
    .floating { animation: none !important; }
    tr[onmouseover] { pointer-events: none; }

    /* Display utilities */
    .d-none.d-lg-block { display: none !important; }
    .d-flex.flex-column.flex-md-row { flex-direction: column !important; }

    /* Touch targets */
    a, button, input, textarea, select { min-height: 44px; min-width: 44px; }
    p a, li a { min-height: auto; min-width: auto; }

    /* Performance - keep essential transitions for accessibility feedback */
    html { scroll-behavior: smooth; }
    img { max-width: 100%; height: auto; }

    /* ========================================
       HEADER & FOOTER
       ======================================== */

    /* Header logo - 1.5x (60px on tablet) */
    .header-logo img { height: 60px !important; }
    .top-header { min-height: 70px !important; }

    /* Footer logo - 2.5x (100px on tablet) */
    footer .footer-logo img,
    footer img[alt*="Logo"],
    footer img[src*="Logo.png"],
    img.footer-logo {
        height: auto !important;
        width: auto !important;
        max-width: 160px !important;
        min-width: 120px !important;
        object-fit: contain !important;
    }

    /* Footer button - proper sizing on tablet */
    footer .btn,
    .site-footer .btn {
        padding: 0.6rem 1rem !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }

    /* ========================================
       INDEX PAGE - HERO SECTION
       ======================================== */

    /* Reduce hero padding */
    #live-better { padding: 20px 0 !important; }

    /* Life aspects container - 3-3-1 centered layout */
    .life-aspects-container {
        padding: 0 0.5rem !important;
    }

    .life-aspects-wrapper {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
        overflow-x: visible !important;
        overflow-y: visible !important;
        padding-right: 0 !important;
        margin: 0 auto !important;
    }

    /* All items - 3 per row (33.333% each) */
    .life-aspect-item {
        flex: 0 0 calc(33.333% - 0.75rem) !important;
        width: calc(33.333% - 0.75rem) !important;
        max-width: calc(33.333% - 0.75rem) !important;
        min-width: 0 !important;
        height: 180px !important;
        margin: 0 !important;
    }

    /* Last item - centered on its own row */
    .life-aspect-item:nth-child(7) {
        flex: 0 0 calc(33.333% - 0.75rem) !important;
        width: calc(33.333% - 0.75rem) !important;
        max-width: calc(33.333% - 0.75rem) !important;
        margin: 0 auto !important;
    }

    /* Disable hover expansion on tablet */
    .life-aspect-item:hover {
        width: calc(33.333% - 0.75rem) !important;
        transform: none !important;
    }

    /* Ensure aspect labels are visible and centered at bottom */
    .life-aspect-item .aspect-label {
        font-size: 0.65rem !important;
        padding: 0.25rem 0.4rem !important;
        text-align: center !important;
        width: 100px !important;
        white-space: normal !important;
        line-height: 1.2 !important;
        bottom: 10px !important;
        top: auto !important;
    }

    /* ========================================
       INDEX PAGE - STATS SECTION (5 cards) - 2x2 + 1 centered
       ======================================== */

    /* Stats section - target by class structure */
    .row.g-3.g-md-4 {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.75rem !important;
    }

    /* Stats cards - 2 per row (first 4 cards) */
    .row.g-3.g-md-4 > .col-6.col-md-4.col-lg {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        margin: 0 !important;
    }

    /* 5th stats card - centered on its own row */
    .row.g-3.g-md-4 > .col-6.col-md-4.col-lg:nth-child(5) {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
        margin: 0 auto !important;
    }

    /* Ensure cards have consistent styling */
    .row.g-3.g-md-4 > .col-6.col-md-4.col-lg > div {
        height: 100% !important;
    }

    /* ========================================
       INDEX PAGE - OUR PROMISE TO YOU - Centered layout on mobile
       ======================================== */

    /* Stack columns on mobile and center content */
    section[style*="background: linear-gradient(135deg, #1968B1"] .row.align-items-center {
        flex-direction: column !important;
    }

    /* Center first column (text content) */
    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:first-child {
        text-align: center !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
    }

    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:first-child > div[style*="display: inline-flex"] {
        margin-left: auto !important;
        margin-right: auto !important;
    }

    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:first-child h2,
    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:first-child p {
        text-align: center !important;
        max-width: 100% !important;
    }

    /* Reduce icon bubble size */
    section[style*="background: linear-gradient(135deg, #1968B1"] div[style*="width: 70px; height: 70px"] {
        width: 60px !important;
        height: 60px !important;
    }

    /* Center second column (video) */
    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:last-child {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* ========================================
       INDEX PAGE - WHO WE ARE (4 icons) - 2x2 grid
       ======================================== */

    /* 2x2 grid layout */
    section[style*="WHO WE ARE"] .row.g-4.justify-content-center {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }

    /* Grid items - 2 per row */
    section[style*="WHO WE ARE"] .row.g-4.justify-content-center > .col-sm-6,
    section[style*="WHO WE ARE"] .row.g-4.justify-content-center > .col-md-3,
    section[style*="WHO WE ARE"] .row.g-4.justify-content-center > div {
        grid-column: span 1 !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ensure icon containers are centered and visible */
    section[style*="WHO WE ARE"] .row.g-4.justify-content-center > div > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 1rem 0 !important;
    }

    /* Icon styling */
    section[style*="WHO WE ARE"] .row.g-4.justify-content-center div[style*="width: 50px; height: 50px"] {
        width: 50px !important;
        height: 50px !important;
        margin: 0 auto 0.5rem !important;
    }

    /* Text styling */
    section[style*="WHO WE ARE"] .row.g-4.justify-content-center span {
        font-weight: 600 !important;
        color: #1e293b !important;
        font-size: 0.95rem !important;
    }

    /* ========================================
       INDEX PAGE - FINANCIAL JOURNEY
       ======================================== */

    /* Hide chevron-down arrows on mobile (between steps 3-4 and 6-7) */
    .text-center.my-3 {
        display: none !important;
    }

    /* Financial Journey 2 per row layout on mobile */
    .row.g-4.align-items-center.justify-content-center {
        gap: 0.25rem !important;
    }

    /* All rows on mobile: 2 steps per row (50% each) */
    .row.g-4.align-items-center.justify-content-center.mb-4 > .col-lg-3,
    .row.g-4.align-items-center.justify-content-center:not(.mb-4) > .col-lg-3 {
        flex: 0 0 calc(50% - 0.2rem) !important;
        max-width: calc(50% - 0.2rem) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Center step content */
    .row.g-4.align-items-center.justify-content-center > .col-lg-3 > .text-center {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Arrow size reduction on mobile */
    .row.g-4.align-items-center.justify-content-center .col-auto i.fa-long-arrow-alt-right {
        font-size: 1.2rem !important;
    }

    /* Consistent bubble sizes on mobile - 50% of 80px = 40px */
    .row.g-4.align-items-center.justify-content-center div.d-inline-flex.rounded-circle {
        width: 40px !important;
        height: 40px !important;
        margin: 0 auto 0.75rem auto !important;
    }

    .row.g-4.align-items-center.justify-content-center div.d-inline-flex.rounded-circle span {
        font-size: 1.25rem !important;
    }

    /* ========================================
       THE ADVISOR PAGE
       ======================================== */

    /* Video container */
    .ratio.ratio-16x9 { margin-bottom: 2rem !important; }

    /* Stats grid in hero - 2x2 */
    .glass-card .row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem !important;
    }
    .glass-card .col-6 { grid-column: span 1 !important; }
    .glass-card .col-6 > div { padding: 0.75rem 0.5rem !important; }
    .glass-card h3 { font-size: 1.3rem !important; }
    .glass-card p { font-size: 0.8rem !important; }

    /* Personality skills - 2x4 grid */
    .card-body .row.g-2.g-lg-3,
    .card-body .row.g-3 {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }
    .card-body .row.g-2.g-lg-3 .col-6,
    .card-body .row.g-3 .col-6 { grid-column: span 1 !important; }

    /* List items */
    .card ul li { font-size: 0.85rem !important; margin-bottom: 0.6rem !important; }

    /* ========================================
       THE ADVISORY PAGE
       ======================================== */

    /* Fee model cards - 2x2 */
    .row.g-3.g-md-4.mb-5 .col-6,
    .row.g-3.g-md-4.mb-5 .col-md-3 {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    .row.g-3.g-md-4 .card { padding: 1rem !important; }
    .row.g-3.g-md-4 i { font-size: 2rem !important; }
    .row.g-3.g-md-4 h6 { font-size: 0.9rem !important; }

    /* Core principles - single column */
    .row.g-3.g-md-4:not(.mb-5) .col-6.col-lg-4,
    .row.g-3.g-md-4:not(.mb-5) > div[class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .row.g-3.g-md-4:not(.mb-5) .card { width: 100% !important; }

    /* ========================================
       HOW WE CONDUCT PAGE
       ======================================== */

    /* Time Expectation cards - 2 per row */
    body[title*="How We Conduct"] .row.g-4 > .col-lg-6,
    body[title*="How We Conduct"] .row.g-4 > .col-md-6 {
        flex: 0 0 calc(50% - 0.75rem) !important;
        max-width: calc(50% - 0.75rem) !important;
    }

    /* Center content in cards */
    body[title*="How We Conduct"] .card-body {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    body[title*="How We Conduct"] .d-flex.align-items-start {
        justify-content: center !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    body[title*="How We Conduct"] .icon-wrapper {
        margin-right: 0 !important;
        margin-bottom: 1rem !important;
    }

    /* ========================================
       PROGRAMS PAGE
       ======================================== */

    /* Duration cards - 3 columns */
    .card.border-primary,
    .card.border-success,
    .card.border-warning { margin-bottom: 0.5rem; }
    .row.g-2.mb-3 .col-4 {
        flex: 0 0 calc(33.333% - 0.5rem) !important;
        max-width: calc(33.333% - 0.5rem) !important;
    }
    .card.border-primary h5,
    .card.border-success h5,
    .card.border-warning h5 { font-size: 1.3rem !important; }

    /* Program Includes - 2x2 */
    .row.g-2:not(.mb-3) .col-6 {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    .row.g-2 .col-6 > div {
        padding: 0.75rem 0.5rem !important;
        font-size: 0.75rem !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .row.g-2 .col-6 i { margin-bottom: 0.5rem !important; }

    /* ========================================
       LIFE STAGES / SUITABLE FOR PAGE
       ======================================== */

    /* Industry/Country cards - 2 columns */
    body[title*="Suitable For"] .hover-scale { padding: 1rem !important; }
    body[title*="Suitable For"] .col-6 {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }
    .hover-scale {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }
    .hover-scale i { margin-bottom: 0.5rem !important; }

    /* ========================================
       SCOPE PAGE
       ======================================== */

    /* List items */
    ul[style*="font-size: 1rem"] li,
    ul[style*="font-size: 0.95rem"] li {
        font-size: 0.85rem !important;
        margin-bottom: 0.6rem !important;
    }

    /* ========================================
       FEE STRUCTURE PAGE
       ======================================== */

    /* Fee cards */
    .col-md-6 .d-flex { padding: 0.75rem !important; }
    .col-md-6 strong { font-size: 0.85rem !important; }
    .col-md-6 .text-muted { font-size: 0.75rem !important; }

    /* Why fee-only - 2x2 */
    .col-lg-3.col-md-6 {
        flex: 0 0 calc(50% - 0.5rem) !important;
        max-width: calc(50% - 0.5rem) !important;
    }

    /* ========================================
       CONTACT US PAGE
       ======================================== */

    img[style*="max-width: 140px"] { max-width: 100px !important; height: auto !important; }
    p[style*="font-size: 0.8rem"] { font-size: 0.75rem !important; margin-bottom: 0.5rem !important; }

    /* ========================================
       APPROACH PAGE
       ======================================== */

    /* Step circles */
    div[style*="width: 60px; height: 60px;"][style*="rounded-circle"] { width: 50px !important; height: 50px !important; }
    div[style*="width: 67.5px; height: 67.5px;"] { width: 55px !important; height: 55px !important; }
    h6[style*="font-size: 0.95rem"] { font-size: 0.85rem !important; }
    p[style*="font-size: 0.7rem"] { font-size: 0.65rem !important; }
    .fa-long-arrow-alt-right, .fa-chevron-down { font-size: 1.5rem !important; }
}

/* ========================================
   BREAKPOINT: 576px (Mobile Portrait)
   ======================================== */
@media (max-width: 576px) {
    /* Container */
    .container,
    .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Section */
    section { padding: 30px 0 25px !important; }

    /* Typography */
    h1 { font-size: 1.6rem !important; }
    h2 { font-size: 1.4rem !important; }
    h3 { font-size: 1.2rem !important; }
    h4, h5, h6 { font-size: 1rem !important; }
    p, li, span { font-size: 0.9rem !important; }
    h1 > span { font-size: inherit !important; }

    /* Cards */
    .card-body { padding: 1rem !important; }
    .card.p-3, .card.p-4, .card.p-5,
    .card .p-3, .card .p-4, .card .p-5 { padding: 1rem !important; }
    .row.g-4, .row.g-3, .row.g-2 { gap: 0.75rem !important; }

    /* Badges */
    .badge { font-size: 0.75rem !important; padding: 0.4rem 0.75rem !important; }

    /* Buttons */
    .btn-lg { padding: 0.65rem 1.5rem !important; font-size: 0.9rem !important; }
    .btn { padding: 0.55rem 1rem !important; font-size: 0.85rem !important; }
    .btn-sm { padding: 0.35rem 0.7rem !important; font-size: 0.75rem !important; }
    .btn-lg[href*="calendly"], a.btn-lg[target="_blank"] {
        width: 100%;
        max-width: 320px;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Icon wrappers */
    div[style*="width: 80px; height: 80px"],
    div[style*="width: 60px; height: 60px"] { width: 50px !important; height: 50px !important; }
    div[style*="width: 70px; height: 70px"],
    div[style*="width: 55px; height: 55px"] { width: 45px !important; height: 45px !important; }
    div[style*="width: 50px; height: 50px"],
    div[style*="width: 42px; height: 42px"] { width: 38px !important; height: 38px !important; }

    /* Icon font sizes */
    i[style*="font-size: 3rem"], i[style*="font-size: 2.5rem"],
    i[style*="font-size: 2.25rem"] { font-size: 1.75rem !important; }
    i[style*="font-size: 2rem"], i[style*="font-size: 1.75rem"] { font-size: 1.4rem !important; }

    /* Tables */
    .table-responsive { font-size: 0.75rem !important; }
    .table th, .table td { padding: 0.5rem 0.35rem !important; font-size: 0.75rem !important; line-height: 1.4; }
    .table th { font-size: 0.8rem !important; }

    /* Spacing */
    .mb-3, .mb-4, .mb-5, .mb-6 { margin-bottom: 1.5rem !important; }
    .mt-3, .mt-4, .mt-5 { margin-top: 1.5rem !important; }
    .p-3, .p-4, .p-5 { padding: 1.25rem !important; }
    .px-3, .px-4, .px-5 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .py-3, .py-4, .py-5 { padding-top: 1.25rem !important; padding-bottom: 1.25rem !important; }

    /* Header logo - 1.5x (52.5px on mobile) */
    .header-logo img { height: 52.5px !important; }

    /* Footer logo - proper sizing on mobile */
    footer .footer-logo img,
    footer img[alt*="Logo"],
    footer img[src*="Logo.png"],
    img.footer-logo {
        height: auto !important;
        width: auto !important;
        max-width: 140px !important;
        min-width: 100px !important;
        object-fit: contain !important;
    }

    /* Footer button - proper sizing on mobile */
    footer .btn,
    .site-footer .btn {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.8rem !important;
        white-space: normal !important;
        line-height: 1.3 !important;
    }

    /* Life aspects - smaller on mobile portrait - 3-3-1 layout */
    .life-aspect-item {
        flex: 0 0 calc(33.333% - 0.4rem) !important;
        width: calc(33.333% - 0.4rem) !important;
        max-width: calc(33.333% - 0.4rem) !important;
        height: 140px !important;
    }

    /* Last item centered */
    .life-aspect-item:nth-child(7) {
        flex: 0 0 calc(33.333% - 0.4rem) !important;
        width: calc(33.333% - 0.4rem) !important;
        max-width: calc(33.333% - 0.4rem) !important;
        margin: 0 auto !important;
    }

    .life-aspects-wrapper {
        gap: 0.4rem !important;
    }

    .aspect-label {
        font-size: 0.33rem !important;
        padding: 0.15rem 0.4rem !important;
        width: 100px !important;
        bottom: 10px !important;
        top: auto !important;
    }

    /* Stats cards on small mobile */
    .row.g-3.g-md-4 > .col-6.col-md-4.col-lg {
        flex: 0 0 calc(50% - 0.4rem) !important;
        max-width: calc(50% - 0.4rem) !important;
    }

    /* Our Promise to You - centered on small mobile portrait */
    section[style*="background: linear-gradient(135deg, #1968B1"] .row.align-items-center {
        flex-direction: column !important;
    }

    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:first-child,
    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:last-child {
        width: 100% !important;
        text-align: center !important;
    }

    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    section[style*="background: linear-gradient(135deg, #1968B1"] .col-lg-6:last-child {
        display: flex !important;
        justify-content: center !important;
    }

    /* WHO WE ARE - maintain 2x2 on small mobile */
    section[style*="WHO WE ARE"] .row.g-4.justify-content-center {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
        padding: 0 0.75rem !important;
    }

    section[style*="WHO WE ARE"] .row.g-4.justify-content-center > div > div {
        padding: 0.75rem 0 !important;
    }

    section[style*="WHO WE ARE"] .row.g-4.justify-content-center span {
        font-size: 0.85rem !important;
    }

    /* Financial Journey bubble size on small mobile - keep consistent at 40px */
    .row.g-4.align-items-center.justify-content-center div.d-inline-flex.rounded-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .row.g-4.align-items-center.justify-content-center div.d-inline-flex.rounded-circle span {
        font-size: 1.25rem !important;
    }

    /* Financial Journey 2 per row on small mobile portrait */
    .row.g-4.align-items-center.justify-content-center.mb-4 > .col-lg-3,
    .row.g-4.align-items-center.justify-content-center:not(.mb-4) > .col-lg-3 {
        flex: 0 0 calc(50% - 0.2rem) !important;
        max-width: calc(50% - 0.2rem) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Center step content on small mobile */
    .row.g-4.align-items-center.justify-content-center > .col-lg-3 > .text-center {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }

    /* Hide arrows on small mobile */
    .row.g-4.align-items-center.justify-content-center .col-auto {
        display: none !important;
    }
}

/* ========================================
   BREAKPOINT: 400px (Small Mobile)
   ======================================== */
@media (max-width: 400px) {
    h1 { font-size: 1.4rem !important; }
    h2 { font-size: 1.25rem !important; }
    p, li, span { font-size: 0.85rem !important; }
    h1 > span { font-size: inherit !important; }

    /* WHO WE ARE - smaller on tiny screens */
    .who-we-are-grid {
        gap: 0.75rem !important;
    }
    .who-we-are-grid > div > div:first-child {
        width: 36px !important;
        height: 36px !important;
    }
    .who-we-are-grid > div > div:first-child i {
        font-size: 0.9rem !important;
    }
    .who-we-are-grid span {
        font-size: 0.8rem !important;
    }

    /* Industry Focus - smaller on tiny screens */
    .industry-focus-grid {
        gap: 0.4rem !important;
    }
    .industry-focus-grid > div {
        padding: 0.5rem !important;
    }
    .industry-focus-grid > div i {
        font-size: 1rem !important;
    }
    .industry-focus-grid > div span {
        font-size: 0.6rem !important;
    }

    /* Country Focus - smaller on tiny screens */
    .country-focus-grid {
        gap: 0.4rem !important;
    }
    .country-focus-grid > div {
        padding: 0.4rem !important;
    }
    .country-focus-grid > div i {
        font-size: 0.9rem !important;
    }
    .country-focus-grid > div span {
        font-size: 0.6rem !important;
    }

    /* Life Stages - smaller on tiny screens */
    .life-stages-grid {
        gap: 0.4rem !important;
    }
    .life-stages-grid > div {
        padding: 0.4rem !important;
    }
    .life-stages-grid > div i {
        font-size: 0.6rem !important;
    }
    .life-stages-grid > div span {
        font-size: 0.6rem !important;
    }

    /* Career Stages - smaller on tiny screens */
    .career-stages-grid {
        gap: 0.4rem !important;
    }
    .career-stages-grid > div {
        padding: 0.4rem !important;
    }
    .career-stages-grid > div i {
        font-size: 0.6rem !important;
    }
    .career-stages-grid > div span {
        font-size: 0.6rem !important;
    }
}

/* ========================================
   DESKTOP OVERRIDES (1024px+)
   ======================================== */
@media (min-width: 1024px) {
    /* Life aspect images - 4:5 aspect ratio on desktop */
    .life-aspect-item .aspect-image-wrapper {
        aspect-ratio: 4 / 5 !important;
    }

    /* Life aspect labels at bottom on desktop */
    .life-aspect-item .aspect-label {
        bottom: 10px !important;
        top: auto !important;
    }

    /* Financial Journey 4-3 layout - Row 1 with 4 steps + arrows */
    .row.g-4.align-items-center.justify-content-center.mb-4 {
        gap: 0.25rem !important;
    }

    /* Row 1: 4 steps per row on desktop (25% each - 1/4 of width) */
    .row.g-4.align-items-center.justify-content-center.mb-4 > .col-lg-3 {
        flex: 0 0 calc(22% - 0.2rem) !important;
        max-width: calc(22% - 0.2rem) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reduce margins in step containers */
    .row.g-4.align-items-center.justify-content-center.mb-4 > .col-lg-3 > div {
        margin: 0 !important;
    }

    /* Reduce bubble margin-bottom */
    .row.g-4.align-items-center.justify-content-center.mb-4 div.d-inline-flex.rounded-circle {
        margin-bottom: 0.5rem !important;
    }

    /* Reduce arrow size on desktop */
    .row.g-4.align-items-center.justify-content-center.mb-4 .col-auto i.fa-long-arrow-alt-right {
        font-size: 1.5rem !important;
    }

    /* Row 2 (3 steps) */
    .row.g-4.align-items-center.justify-content-center:not(.mb-4) {
        gap: 0.25rem !important;
    }

    .row.g-4.align-items-center.justify-content-center:not(.mb-4) > .col-lg-3 {
        flex: 0 0 calc(33.333% - 0.2rem) !important;
        max-width: calc(33.333% - 0.2rem) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Reduce margins in row 2 step containers */
    .row.g-4.align-items-center.justify-content-center:not(.mb-4) > .col-lg-3 > div {
        margin: 0 !important;
    }

    /* Reduce bubble margin-bottom in row 2 */
    .row.g-4.align-items-center.justify-content-center:not(.mb-4) div.d-inline-flex.rounded-circle {
        margin-bottom: 0.5rem !important;
    }

    /* Reduce bubble sizes to 50% (40px) on desktop */
    .row.g-4.align-items-center.justify-content-center div.d-inline-flex.rounded-circle {
        width: 40px !important;
        height: 40px !important;
    }

    .row.g-4.align-items-center.justify-content-center div.d-inline-flex.rounded-circle span {
        font-size: 1.25rem !important;
    }

    /* Reduce step heading and description text sizes */
    .row.g-4.align-items-center.justify-content-center h6 {
        font-size: 0.95rem !important;
    }

    .row.g-4.align-items-center.justify-content-center p {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   ADDITIONAL MOBILE FIXES (Feb 2026)
   ======================================== */

/* ========================================
   FIX: Container padding 3rem → responsive
   Affects: approach, contact-us, programs, footer
   ======================================== */
@media (max-width: 768px) {
    .container-fluid[style*="padding: 0 3rem"],
    .container[style*="padding: 0 3rem"],
    div[style*="padding: 0 3rem"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .container-fluid[style*="padding: 0 2rem"],
    .container[style*="padding: 0 2rem"],
    div[style*="padding: 0 2rem"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

@media (max-width: 576px) {
    .container-fluid[style*="padding: 0 3rem"],
    .container[style*="padding: 0 3rem"],
    div[style*="padding: 0 3rem"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .container-fluid[style*="padding: 0 2rem"],
    .container[style*="padding: 0 2rem"],
    div[style*="padding: 0 2rem"] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ========================================
   FIX: Fixed height: 100vh sections → auto on mobile
   Affects: contact-us, fee-structure
   ======================================== */
@media (max-width: 768px) {
    section[style*="height: 100vh"] {
        height: auto !important;
        min-height: auto !important;
    }

    section[style*="min-height: 100vh"] {
        min-height: auto !important;
    }

    /* Also fix d-flex align-items-center that forces vertical centering */
    section.d-flex.align-items-center {
        display: block !important;
    }
}

/* ========================================
   FIX: Large top padding (90px) → smaller on mobile
   Affects: approach, contact-us, fee-structure, programs
   ======================================== */
@media (max-width: 768px) {
    section[style*="padding: 90px 0"] {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    /* Complaints & Investor Charter pages */
    section[style*="padding: 30px 0 50px"] {
        padding-top: 15px !important;
        padding-bottom: 20px !important;
    }
}

@media (max-width: 576px) {
    section[style*="padding: 90px 0"] {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    section[style*="padding: 30px 0 50px"] {
        padding-top: 10px !important;
        padding-bottom: 15px !important;
    }
}

/* ========================================
   FIX: Footer container padding on mobile
   ======================================== */
@media (max-width: 768px) {
    .site-footer .container-fluid {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .site-footer .row.align-items-start {
        text-align: center !important;
    }

    .site-footer .col-lg-2,
    .site-footer .col-lg-6,
    .site-footer .col-lg-4 {
        text-align: center !important;
    }

    .site-footer .d-flex.gap-2.justify-content-center {
        flex-wrap: wrap !important;
    }

    /* Stack footer 3-column cards */
    .site-footer .col-lg-4 {
        margin-bottom: 0.5rem !important;
    }

    /* Regulatory disclosures - stack columns */
    .site-footer .col-md-4 {
        margin-bottom: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .site-footer .container-fluid {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    .site-footer {
        padding: 1.5rem 0 0.75rem !important;
    }

    .site-footer .card-body {
        padding: 0.75rem !important;
    }

    .site-footer p {
        font-size: 0.72rem !important;
    }

    .site-footer h6 {
        font-size: 0.82rem !important;
    }

    /* Book appointment button */
    .site-footer .btn.w-100 {
        font-size: 0.8rem !important;
        padding: 0.45rem !important;
    }
}

/* ========================================
   FIX: Country Focus grid on mobile
   life-stages.php - 8-column grid → 4 cols tablet, 2 cols mobile
   ======================================== */
@media (max-width: 768px) {
    .country-focus-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.5rem !important;
    }
}

@media (max-width: 576px) {
    .country-focus-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.4rem !important;
    }
}

/* ========================================
   FIX: get-clarity.php floating cards overflow
   ======================================== */
@media (max-width: 768px) {
    .position-absolute.bg-white.p-3.rounded-3.shadow[style*="left: -20px"] {
        left: 5px !important;
    }

    .position-absolute.bg-white.p-3.rounded-3.shadow[style*="right: -20px"] {
        right: 5px !important;
    }
}

/* ========================================
   FIX: Complaint modal tables on small mobile
   ======================================== */
@media (max-width: 576px) {
    #complaintModal .modal-dialog {
        margin: 0.25rem !important;
        max-width: calc(100% - 0.5rem) !important;
    }

    #complaintModal .modal-body {
        padding: 0.75rem !important;
    }

    #complaintModal .table {
        min-width: auto !important;
        font-size: 0.65rem !important;
    }

    #complaintModal .table th,
    #complaintModal .table td {
        padding: 0.2rem 0.25rem !important;
        font-size: 0.65rem !important;
    }

    #complaintModal h6 {
        font-size: 0.78rem !important;
    }

    #complaintModal .alert {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.8rem !important;
    }

    #complaintModal .btn-sm {
        font-size: 0.65rem !important;
        padding: 0.2rem 0.5rem !important;
    }

    #complaintModal .d-flex.flex-wrap.gap-2 {
        gap: 0.3rem !important;
    }
}

/* ========================================
   FIX: Complaints & Investor Charter page cards
   ======================================== */
@media (max-width: 768px) {
    /* Reduce card body padding */
    .card-body.p-4 {
        padding: 1rem !important;
    }

    /* Tables inside complaint/charter pages */
    .card .table-responsive .table {
        min-width: auto !important;
    }

    /* Step lists */
    .card-body ol li,
    .card-body ul li {
        font-size: 0.85rem !important;
        margin-bottom: 0.4rem !important;
    }
}

@media (max-width: 576px) {
    .card-body.p-4 {
        padding: 0.75rem !important;
    }

    .card-header h5 {
        font-size: 0.9rem !important;
    }

    .card-body ol li,
    .card-body ul li {
        font-size: 0.8rem !important;
    }
}

/* ========================================
   FIX: Contact Us page mobile layout
   ======================================== */
@media (max-width: 768px) {
    /* Contact info cards - stack properly */
    .row.g-2 .col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ========================================
   FIX: Index page modal max-width on mobile
   ======================================== */
@media (max-width: 768px) {
    .modal-dialog[style*="max-width: 900px"] {
        max-width: 95% !important;
        margin: 0.5rem auto !important;
    }
}

@media (max-width: 576px) {
    .modal-dialog[style*="max-width: 900px"] {
        max-width: calc(100% - 0.5rem) !important;
        margin: 0.25rem !important;
    }
}

/* ========================================
   END OF MOBILE RESPONSIVE STYLES
   ======================================== */