/* ===== 1. MAIN CONTAINER (SKY BLUE GRADIENT) ===== */
.why-ai-money-guide {
    background: linear-gradient(180deg, #f5f5f7 0%, #e3f2fd 100%) !important;
    box-shadow: none !important; 
    
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(-50vw + 50%) !important;
    margin-right: calc(-50vw + 50%) !important;
    border-radius: 0px !important; 
    box-sizing: border-box !important;
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    padding: 60px 0px !important; /* اسکرین کے بالکل کناروں تک جانے کے لیے پیڈنگ زیرو */
}

/* ورڈپریس کالمز کے مین کنٹینر کی لیمٹ توڑنے کا فکس */
.why-ai-money-guide .wp-block-columns {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0px !important; 
    box-sizing: border-box !important;
}

/* ===== 2. PERFECT EQUAL WIDE CARDS (FIX FOR SMALL/BIG ISSUE) ===== */
/* یہ کوڈ سب باکسز کو بالکل ایک جتنی چوڑائی دے گا اور کوئی چھوٹا بڑا نہیں ہوگا */
.why-ai-money-guide .wp-block-column {
    background: #f5f5f7 !important; 
    border-radius: 16px !important; 
    padding: 28px 24px !important; 
    box-sizing: border-box !important;
    border: none !important; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.035) !important; 
    
    /* سب باکسز کو ہر حال میں برابر اور مکمل چوڑا رکھنے کا مستقل حل */
    width: 100% !important;
    max-width: 100% !important;
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
    flex-basis: 100% !important;
}

/* ===== 3. TEXT COLORS ===== */
.why-ai-money-guide h2.wp-block-heading {
    color: #1d1d1f !important; 
    background: transparent !important;
    border: none !important;
}

/* ===== 4. MOBILE DEVICE OPTIMIZATION ===== */
@media (max-width: 781px) {
    .why-ai-money-guide {
        padding: 50px 0px !important; 
    }
    
    .why-ai-money-guide .wp-block-columns {
        padding: 0px !important; 
    }
    
    .why-ai-money-guide .wp-block-column {
        /* موبائل پر باکسز کو اسکرین کے بالکل قریب (باہر) لانے کے لیے چوڑائی سیٹ کی گئی ہے */
        width: calc(100% - 16px) !important; 
        max-width: calc(100% - 16px) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 24px !important; 
    }
}

/* ===== 5. DESKTOP (COMPUTER) OPTIMIZATION ===== */
@media (min-width: 782px) {
    .why-ai-money-guide .wp-block-columns {
        display: flex !important;
        flex-direction: row !important; /* کمپیوٹر پر چاروں باکسز ایک لائن میں آمنے سامنے ہوں گے */
        gap: 20px !important; /* کمپیوٹر پر باکسز کے بیچ کا فاصلہ */
        padding: 0 20px !important; 
    }
    
    .why-ai-money-guide .wp-block-column {
        /* کمپیوٹر پر چاروں کالمز کو برابر ڈیوائیڈ کرنے کے لیے چوڑائی */
        width: calc(25% - 15px) !important;
        max-width: calc(25% - 15px) !important;
        margin-bottom: 0px !important;
    }
}