.elementor-222 .elementor-element.elementor-element-e022438{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-15px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for container, class: .elementor-element-e022438 */<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=Outfit:wght@400;600;700;800&display=swap" rel="stylesheet">

<style>
    /* --- V4 SCOPED CSS --- */
    /* This ensures settings don't leak out or break */
    .sac-v4-wrapper {
        font-family: 'Manrope', sans-serif;
        line-height: 1.6;
        color: #334155; /* Dark Grey for text */
        width: 100%;
        box-sizing: border-box;
    }
    .sac-v4-wrapper * { box-sizing: border-box; }

    /* --- COLORS --- */
    :root {
        --sac-navy: #0F172A;
        --sac-gold: #EAB308;
        --sac-white: #FFFFFF;
        --sac-bg-light: #F1F5F9;
    }

    /* --- TYPOGRAPHY --- */
    .sac-v4-eyebrow {
        font-family: 'Outfit', sans-serif;
        color: var(--sac-gold);
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 13px;
        margin-bottom: 15px;
        display: block;
    }

    /* Auto-scaling Headings (Responsive) */
    .sac-v4-h2 {
        font-family: 'Outfit', sans-serif;
        color: var(--sac-navy);
        font-weight: 800;
        font-size: clamp(28px, 4vw, 42px); /* Mobile: 28px, Desktop: 42px */
        line-height: 1.2;
        margin: 0 0 20px 0;
    }
    .sac-v4-h2.white { color: white; }

    .sac-v4-p {
        font-size: 16px; /* Standard readable size */
        margin-bottom: 20px;
        color: #475569;
    }
    .sac-v4-p.light { color: #CBD5E1; }

    /* --- LAYOUT UTILITIES --- */
    .sac-v4-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px; /* Safe padding for mobile edges */
    }

    .sac-v4-section {
        padding: 80px 0;
        background: white;
    }
    .sac-v4-section.dark { background: var(--sac-navy); }
    .sac-v4-section.grey { background: var(--sac-bg-light); }

    /* --- RESPONSIVE COLUMNS (The Fix) --- */
    .sac-v4-row {
        display: flex;
        flex-wrap: wrap; /* This allows stacking on mobile */
        gap: 50px;
        align-items: center;
    }

    .sac-v4-col {
        flex: 1 1 500px; /* Basis is 500px. If screen < 500px, it wraps to full width */
        width: 100%;
    }

    /* --- IMAGE PLACEHOLDERS --- */
    .sac-v4-img-box {
        background: #E2E8F0;
        border: 2px dashed #94A3B8;
        border-radius: 12px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748B;
        font-weight: bold;
        text-align: center;
        padding: 20px;
        position: relative;
    }
    .sac-h-600 { height: 600px; }
    .sac-h-400 { height: 400px; }

    /* Mobile Adjustments */
    @media (max-width: 768px) {
        .sac-v4-section { padding: 50px 0; }
        .sac-h-600 { height: 400px; } /* Smaller image on mobile */
        .sac-h-400 { height: 300px; }
        .sac-v4-row { gap: 30px; }
    }
</style>/* End custom CSS */