/* =========================================================
   SARKARIPRINT EDITABLE SERVICE SYSTEM
   FINAL CLEAN VERSION
   ========================================================= */

:root{
    --spx-blue:#124e78;
    --spx-green:#16834b;
    --spx-orange:#f59e0b;
    --spx-purple:#6d4fc2;

    --spx-text:#17202a;
    --spx-muted:#667085;
    --spx-border:#e4eaf0;
    --spx-bg:#f7f9fc;
}


/* =========================================================
   COMMON
   ========================================================= */

.spx-editor-content{
    width:100%;
    max-width:100%;
    color:var(--spx-text);
}

.spx-editor-content *{
    box-sizing:border-box;
}


/* =========================================================
   MAIN SARKARI KAAM PAGE
   ========================================================= */

.spx-sarkari-kaam-page{
    background:var(--spx-bg);
    padding:30px 0 60px;
}


/* Old page title support.
   Page title PHP se hata diya gaya ho to iska koi effect nahi. */

.spx-sarkari-kaam-header{
    max-width:850px;
    margin:0 auto 30px;
    text-align:center;
}

.spx-sarkari-kaam-title{
    margin:0;
    font-size:clamp(29px,4vw,42px);
    line-height:1.25;
}


/* =========================================================
   MAIN HUB
   DESKTOP = 4 SECTION COLUMNS

   Important:
   Topic ko 4 columns me nahi baanta jayega.
   Pura section ek column item hai.
   Chhote sections same column me niche aa sakte hain.
   ========================================================= */

.spx-sarkari-kaam-page .spx-editor-content{
    column-count:4;
    column-gap:16px;
}


/* =========================================================
   MAIN HUB SECTION BOX
   ========================================================= */

.spx-sarkari-kaam-page .spx-section{
    position:relative;

    display:inline-block;
    vertical-align:top;

    width:100%;

    margin:0 0 16px;
    padding:14px 14px 12px;

    background:#fff;

    border:1px solid var(--spx-border);
    border-top:5px solid var(--spx-blue);

    border-radius:13px;

    box-shadow:0 3px 12px rgba(15,38,60,.04);

    break-inside:avoid;
    -webkit-column-break-inside:avoid;
}


/* =========================================================
   SECTION TITLE
   ========================================================= */

.spx-sarkari-kaam-page .spx-section-title{
    margin:0 0 7px !important;
    padding:0 0 9px !important;

    border-bottom:1px solid #e7edf2;

    color:var(--spx-blue) !important;

    font-size:18px !important;
    line-height:1.3 !important;
    font-weight:800 !important;

    text-align:center !important;
}


/* =========================================================
   MAIN HUB TOPIC LIST
   One vertical list inside each section
   ========================================================= */

.spx-sarkari-kaam-page .spx-topic-list{
    display:block !important;

    width:100%;

    margin:0 !important;
    padding:0 !important;

    list-style:none !important;
}


/* =========================================================
   IMPORTANT:
   LI ko class ho ya na ho same design milega.

   Gutenberg editor se naya list item add karne par
   spx-topic-item class manually lagane ki zarurat nahi.
   ========================================================= */

.spx-sarkari-kaam-page .spx-topic-list > li{
    position:relative;

    display:block;

    width:100%;
    min-width:0;
    min-height:36px;

    margin:0 !important;

    padding:6px 2px 6px 32px !important;

    list-style:none !important;

    border-bottom:1px dotted #dce3e8;

    color:var(--spx-text);

    font-size:13px;
    line-height:1.35;
    font-weight:600;

    overflow-wrap:break-word;
    word-break:normal;
}


.spx-sarkari-kaam-page .spx-topic-list > li:last-child{
    border-bottom:0;
}


/* =========================================================
   TOPIC ARROW
   Link ho ya no-link, arrow same position
   ========================================================= */

.spx-sarkari-kaam-page .spx-topic-list > li::before{
    content:"›";

    position:absolute;

    left:2px;
    top:50%;

    transform:translateY(-50%);

    width:22px;
    height:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:#edf6fb;
    color:var(--spx-blue);

    font-size:18px;
    line-height:1;
    font-weight:800;

    pointer-events:none;
}


/* Link */

.spx-sarkari-kaam-page .spx-topic-list > li > a{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    color:var(--spx-text) !important;

    text-decoration:none !important;

    overflow-wrap:break-word;
    word-break:normal;
}


.spx-sarkari-kaam-page .spx-topic-list > li > a:hover{
    color:var(--spx-blue) !important;
}


/* No-link article/topic */

.spx-sarkari-kaam-page .spx-topic-list > li > span{
    display:block;

    width:100%;

    margin:0;
    padding:0;

    overflow-wrap:break-word;
    word-break:normal;
}


/* Disabled/no-link */

.spx-sarkari-kaam-page .spx-topic-disabled{
    opacity:.68;
}


/* =========================================================
   REMOVE EMPTY ITEMS
   ========================================================= */

.spx-sarkari-kaam-page .spx-topic-list > li:empty{
    display:none !important;
}


/* Old empty generated paragraphs */

.spx-sarkari-kaam-page
.spx-topic-item:not(:has(a)):not(:has(span)):empty{
    display:none !important;
}


/* =========================================================
   CURRENT NEW BADGES HIDDEN

   Future me selected items par alag targeted NEW
   badge laga sakte hain.
   ========================================================= */

.spx-sarkari-kaam-page .spx-topic-badge{
    display:none !important;
}


/* =========================================================
   MAIN HUB TABLET
   ========================================================= */

@media (max-width:1050px) and (min-width:701px){

    .spx-sarkari-kaam-page .spx-editor-content{
        column-count:3;
        column-gap:14px;
    }

}


/* =========================================================
   MAIN HUB MOBILE
   EXACT 2 SECTION COLUMNS
   ========================================================= */

@media (max-width:700px){

    .spx-sarkari-kaam-page{
        padding:22px 0 45px;
    }

    .spx-sarkari-kaam-page .spx-editor-content{
        column-count:2;
        column-gap:8px;
    }

    .spx-sarkari-kaam-page .spx-section{
        margin-bottom:9px;

        padding:10px 7px 8px;

        border-top-width:4px;
        border-radius:9px;
    }

    .spx-sarkari-kaam-page .spx-section-title{
        margin-bottom:4px !important;
        padding-bottom:7px !important;

        font-size:14px !important;
        line-height:1.25 !important;
    }

    .spx-sarkari-kaam-page .spx-topic-list > li{
        min-height:32px;

        padding:
            5px
            1px
            5px
            25px !important;

        font-size:11.5px;
        line-height:1.3;
    }

    .spx-sarkari-kaam-page .spx-topic-list > li::before{
        left:1px;

        width:18px;
        height:18px;

        font-size:15px;
    }

}


/* =========================================================
   SERVICE PAGE HEADING
   ========================================================= */

.spx-service-heading{
    max-width:820px;

    margin:34px auto 22px;

    text-align:center;
}


.spx-service-heading h2{
    margin:0 0 6px;

    font-size:26px;
    line-height:1.35;

    text-align:center;
}


.spx-service-heading p{
    margin:0;

    color:var(--spx-muted);

    font-size:13px;
    line-height:1.7;

    text-align:center;
}


/* =========================================================
   UNIVERSAL SERVICE GRID

   Desktop:
   Full row = 4 cards

   Last row:
   1 = centered 50%
   2 = 50 / 50
   3 = centered
   4 = normal

   Works for:
   1,2,3,4,5,6,7...
   10,15,20,30 etc.
   ========================================================= */

.spx-service-grid.wp-block-columns{
    display:grid !important;

    /*
     * 8 virtual columns:
     * normal card = span 2 = 25%
     */
    grid-template-columns:repeat(8,minmax(0,1fr)) !important;

    gap:18px !important;

    width:100% !important;
    max-width:100% !important;

    margin:0 0 30px !important;

    align-items:stretch !important;

    flex-wrap:unset !important;
}


/* Gutenberg column wrapper */

.spx-service-grid.wp-block-columns > .wp-block-column{
    grid-column:span 2 !important;

    width:auto !important;
    min-width:0 !important;
    max-width:none !important;

    flex:none !important;

    margin:0 !important;
}


/* =========================================================
   DESKTOP LAST ROW = 1

   1,5,9,13,17...
   centered at 50%
   ========================================================= */

.spx-service-grid.wp-block-columns
> .wp-block-column:nth-child(4n+1):last-child{
    grid-column:3 / span 4 !important;
}


/* =========================================================
   DESKTOP LAST ROW = 2

   2,6,10,14,18...
   50 / 50
   ========================================================= */

.spx-service-grid.wp-block-columns
> .wp-block-column:nth-child(4n+1):nth-last-child(2){
    grid-column:1 / span 4 !important;
}


.spx-service-grid.wp-block-columns
> .wp-block-column:nth-child(4n+2):last-child{
    grid-column:5 / span 4 !important;
}


/* =========================================================
   DESKTOP LAST ROW = 3

   3,7,11,15,19...
   centered group
   ========================================================= */

.spx-service-grid.wp-block-columns
> .wp-block-column:nth-child(4n+1):nth-last-child(3){
    grid-column:2 / span 2 !important;
}


.spx-service-grid.wp-block-columns
> .wp-block-column:nth-child(4n+2):nth-last-child(2),
.spx-service-grid.wp-block-columns
> .wp-block-column:nth-child(4n+3):last-child{
    grid-column:span 2 !important;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.spx-service-card{
    position:relative;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    min-height:175px;
    height:100% !important;

    padding:21px 18px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start !important;

    background:#fff;

    border:1px solid var(--spx-border);
    border-radius:15px;

    box-shadow:0 3px 13px rgba(15,38,60,.04);

    text-align:center;

    box-sizing:border-box;

    overflow-wrap:break-word;
    word-break:normal;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease;
}


.spx-service-card:hover{
    transform:translateY(-3px);

    border-color:#bcd5e4;

    box-shadow:0 9px 24px rgba(15,38,60,.09);
}


/* =========================================================
   SERVICE ICON
   ========================================================= */

.spx-service-card .spx-service-icon{
    width:48px !important;
    min-width:48px !important;
    max-width:48px !important;

    height:48px !important;
    min-height:48px !important;

    margin:0 auto 13px !important;
    padding:0 !important;

    display:grid;
    place-items:center;

    flex-shrink:0;

    border-radius:13px;

    background:#edf6fb;

    font-size:24px;
    line-height:1;
}


/* =========================================================
   SERVICE CARD TITLE
   ========================================================= */

.spx-service-card h3{
    width:100%;
    min-height:46px;

    margin:0 0 7px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--spx-text);

    font-size:15px;
    line-height:1.5;
    font-weight:800;

    text-align:center;

    word-break:normal !important;
    overflow-wrap:break-word !important;
    white-space:normal !important;
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.spx-service-card p:not(.spx-service-icon):not(.spx-service-action){
    width:100%;
    min-height:40px;

    margin:0 0 11px;

    color:var(--spx-muted);

    font-size:12px;
    line-height:1.6;

    text-align:center;

    word-break:normal !important;
    overflow-wrap:break-word !important;
}


/* =========================================================
   ACTION
   ========================================================= */

.spx-service-card .spx-service-action{
    width:100%;

    min-height:0;

    margin-top:auto !important;

    padding-top:8px;

    color:var(--spx-blue);

    font-size:12px;
    font-weight:800;

    text-align:center;
}


/* Whole normal card click overlay */

.spx-service-card .spx-service-action a::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:5;

    border-radius:15px;

    cursor:pointer;
}


/* Multi button card me overlay nahi */

.spx-multi-card .spx-service-action a::after,
.spx-multi-card .spx-card-button::after{
    content:none !important;
    display:none !important;
}


/* =========================================================
   NO LINK CARD
   ========================================================= */

.spx-no-link-card{
    cursor:default;
}


.spx-no-link-card .spx-service-action-disabled,
.spx-card-button-disabled{
    opacity:.72;

    cursor:default;

    text-decoration:none;
}


/* =========================================================
   SECTION ACCENT COLORS
   ========================================================= */

.spx-accent-blue .spx-service-icon{
    background:#edf6fb;
    color:#124e78;
}


.spx-accent-green .spx-service-icon{
    background:#edf8f2;
    color:#16834b;
}


.spx-accent-orange .spx-service-icon{
    background:#fff4dd;
    color:#b86f00;
}


.spx-accent-purple .spx-service-icon{
    background:#f2effc;
    color:#6d4fc2;
}


/* =========================================================
   SERVICE GRID TABLET

   Tablet simple 2 columns.
   Desktop remainder special rules cancel.
   ========================================================= */

@media (max-width:900px) and (min-width:601px){

    .spx-service-grid.wp-block-columns{
        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:14px !important;
    }


    .spx-service-grid.wp-block-columns > .wp-block-column{
        grid-column:auto !important;

        width:100% !important;
    }

}


/* =========================================================
   SERVICE GRID MOBILE

   FINAL RULE:

   Always 2 columns.

   1 card:
   [      CARD      ]

   2:
   [ C1 ][ C2 ]

   3:
   [ C1 ][ C2 ]
   [    C3    ]

   5:
   [ C1 ][ C2 ]
   [ C3 ][ C4 ]
   [    C5    ]

   Same for any odd number.
   ========================================================= */

@media (max-width:600px){

    .spx-service-grid.wp-block-columns{
        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:10px !important;

        width:100% !important;
    }


    /* Cancel every desktop positioning rule */

    .spx-service-grid.wp-block-columns
    > .wp-block-column{
        grid-column:auto !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;

        flex:none !important;
    }


    /*
     * Total card count odd ho:
     * 1,3,5,7,9...
     * to last card full row.
     */

    .spx-service-grid.wp-block-columns
    > .wp-block-column:nth-child(odd):last-child{
        grid-column:1 / -1 !important;
    }


    .spx-service-card{
        min-height:155px;

        padding:15px 10px;

        border-radius:13px;
    }


    .spx-service-card .spx-service-icon{
        width:43px !important;
        min-width:43px !important;
        max-width:43px !important;

        height:43px !important;
        min-height:43px !important;

        margin-bottom:10px !important;

        font-size:21px;
    }


    .spx-service-card h3{
        min-height:44px;

        font-size:13px;
        line-height:1.4;
    }


    .spx-service-card p:not(.spx-service-icon):not(.spx-service-action){
        font-size:11px;
    }


    .spx-service-card .spx-service-action{
        font-size:11px;
    }


    .spx-service-heading h2{
        font-size:22px;
    }

}


/* =========================================================
   LEGACY GROUP INNER CONTAINER SUPPORT

   Sirf agar Gutenberg kisi purane page me
   wp-block-group__inner-container bana de.
   ========================================================= */

.spx-service-grid
> .wp-block-group__inner-container{
    width:100%;

    display:flex;

    flex-wrap:wrap;

    justify-content:center;
    align-items:stretch;

    gap:16px;
}


/* desktop normal legacy card */

.spx-service-grid
> .wp-block-group__inner-container
> .spx-service-card{
    flex:
        0
        0
        calc((100% - 48px) / 4);

    max-width:
        calc((100% - 48px) / 4) !important;
}


/* legacy last single */

.spx-service-grid
> .wp-block-group__inner-container
> .spx-service-card:nth-child(4n+1):last-child{
    flex-basis:
        calc((100% - 16px) / 2);

    max-width:
        calc((100% - 16px) / 2) !important;
}


/* legacy last two */

.spx-service-grid
> .wp-block-group__inner-container
> .spx-service-card:nth-child(4n+1):nth-last-child(2),

.spx-service-grid
> .wp-block-group__inner-container
> .spx-service-card:nth-child(4n+2):last-child{
    flex-basis:
        calc((100% - 16px) / 2);

    max-width:
        calc((100% - 16px) / 2) !important;
}


/* Legacy mobile */

@media (max-width:600px){

    .spx-service-grid
    > .wp-block-group__inner-container{
        gap:10px;
    }


    .spx-service-grid
    > .wp-block-group__inner-container
    > .spx-service-card{
        flex:
            0
            0
            calc((100% - 10px) / 2);

        max-width:
            calc((100% - 10px) / 2) !important;
    }


    .spx-service-grid
    > .wp-block-group__inner-container
    > .spx-service-card:nth-child(odd):last-child{
        flex-basis:100%;

        max-width:100% !important;
    }

}


/* =========================================================
   MULTI BUTTON SERVICE CARD
   ========================================================= */

.spx-card-buttons{
    width:100%;

    margin-top:auto;
    padding-top:10px;

    display:flex;
    flex-wrap:wrap;

    justify-content:center;
    align-items:center;

    gap:8px;
}


.spx-card-buttons > p{
    margin:0 !important;
}


.spx-card-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:38px;

    padding:8px 12px;

    border:1px solid #d5e2eb;
    border-radius:9px;

    background:#f5f9fc;

    color:var(--spx-blue) !important;

    font-size:13px;
    line-height:1.2;
    font-weight:700;

    text-align:center;

    text-decoration:none !important;
}


.spx-card-button:hover{
    background:#eaf4fa;
}


/* =========================================================
   LPG / CALL / SMS / WHATSAPP CONTACT SECTION
   ========================================================= */

.spx-contact-section{
    width:100%;

    margin:36px 0 30px;
}


.spx-contact-heading{
    margin:0 0 16px;

    color:var(--spx-text);

    font-size:22px;
    font-weight:800;

    text-align:center;
}


.spx-contact-list{
    display:flex;
    flex-direction:column;

    gap:12px;
}


.spx-contact-panel{
    width:100%;

    padding:15px 17px;

    border:1px solid #dfe7ed;
    border-left:4px solid var(--spx-blue);

    border-radius:12px;

    background:#fff;

    box-shadow:0 3px 12px rgba(15,38,60,.035);
}


.spx-contact-panel-title{
    margin:0 0 11px;

    color:var(--spx-blue);

    font-size:15px;
    font-weight:800;
}


.spx-contact-actions{
    display:flex;
    flex-wrap:wrap;

    gap:8px;
}


.spx-contact-action{
    flex:1 1 150px;

    min-height:43px;

    padding:8px 11px;

    display:flex;
    flex-direction:column;

    justify-content:center;
    align-items:center;

    border:1px solid #e1e7ec;
    border-radius:9px;

    background:#f8fafc;

    text-align:center;

    text-decoration:none !important;
}


.spx-contact-action strong{
    color:var(--spx-text);

    font-size:11px;
    line-height:1.3;
}


.spx-contact-action span{
    margin-top:2px;

    color:var(--spx-blue);

    font-size:12px;
    font-weight:800;
}


.spx-contact-action:hover{
    background:#eef6fb;
}


.spx-contact-action.spx-whatsapp{
    background:#f1faf5;

    border-color:#d4ecde;
}


.spx-contact-action.spx-whatsapp span{
    color:var(--spx-green);
}


.spx-service-grid + .spx-contact-section{
    margin-top:38px;
}


/* =========================================================
   INFO BOX
   ========================================================= */

.spx-info-box{
    margin:25px 0;

    padding:16px 18px;

    border:1px solid #cfe0eb;
    border-left:4px solid var(--spx-blue);

    border-radius:12px;

    background:#f0f7fb;

    color:#315064;

    font-size:13px;
    line-height:1.7;
}


/* =========================================================
   OFFICIAL LINK BOX
   ========================================================= */

.spx-official-box{
    margin:30px auto;

    padding:22px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #124e78,
            #16834b
        );

    color:#fff;

    text-align:center;
}


.spx-official-box h3{
    margin:0 0 7px;

    color:#fff;

    font-size:19px;
}


.spx-official-box p{
    margin:0 0 15px;

    color:rgba(255,255,255,.84);

    font-size:12px;
}


.spx-official-button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    padding:10px 17px;

    border-radius:9px;

    background:#fff;

    color:var(--spx-blue) !important;

    font-size:13px;
    font-weight:800;

    text-decoration:none !important;
}


/* =========================================================
   MOBILE BUTTONS + CONTACTS
   ========================================================= */

@media (max-width:600px){

    .spx-card-buttons{
        gap:6px;
    }


    .spx-card-button{
        min-height:36px;

        padding:7px 9px;

        font-size:12px;
    }


    .spx-contact-section{
        margin-top:30px;
    }


    .spx-contact-heading{
        font-size:19px;
    }


    .spx-contact-panel{
        padding:13px;
    }


    .spx-contact-actions{
        gap:7px;
    }


    .spx-contact-action{
        flex:
            1
            1
            calc(50% - 4px);

        min-height:45px;

        padding:7px;
    }

}

/* =========================================================
   FINAL MOBILE SERVICE GRID HARD RESET
   Desktop ke special grid-column rules ko mobile me
   completely cancel karta hai.

   MOBILE RULE:
   2 cards = 50/50
   odd last card = full width
   1 card = full width
   ========================================================= */

@media (max-width:600px){

    /* -----------------------------------------
       MAIN GUTENBERG COLUMNS GRID
       ----------------------------------------- */

    .spx-service-grid.spx-service-grid.wp-block-columns{
        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        grid-auto-columns:auto !important;

        gap:10px !important;

        width:100% !important;
        max-width:100% !important;
    }


    /*
     * Higher specificity जानबूझकर रखी गई है।
     * इससे desktop के:
     * grid-column:3 / span 4
     * grid-column:1 / span 4
     * grid-column:5 / span 4
     * grid-column:2 / span 2
     * आदि mobile में पूरी तरह cancel होंगे।
     */

    .spx-service-grid.spx-service-grid.wp-block-columns
    > .wp-block-column:nth-child(n){

        grid-column:auto !important;
        grid-row:auto !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;

        flex:none !important;
    }


    /* -----------------------------------------
       ODD LAST CARD = FULL ROW

       1 card  -> full
       3 cards -> third full
       5 cards -> fifth full
       7 cards -> seventh full
       etc.
       ----------------------------------------- */

    .spx-service-grid.spx-service-grid.wp-block-columns
    > .wp-block-column:nth-child(odd):last-child{

        grid-column:1 / -1 !important;
    }


    /* Card हमेशा available column को पूरा भरे */

    .spx-service-grid.spx-service-grid.wp-block-columns
    > .wp-block-column
    > .spx-service-card{

        width:100% !important;
        max-width:100% !important;
        height:100% !important;
    }


    /* =====================================================
       OLD / LEGACY GUTENBERG INNER-CONTAINER PAGES
       कुछ पुराने generated pages के लिए
       ===================================================== */

    .spx-service-grid
    > .wp-block-group__inner-container{

        display:grid !important;

        grid-template-columns:
            repeat(2,minmax(0,1fr)) !important;

        gap:10px !important;

        width:100% !important;
    }


    .spx-service-grid
    > .wp-block-group__inner-container
    > .spx-service-card:nth-child(n){

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        flex:none !important;

        grid-column:auto !important;

        margin:0 !important;
    }


    .spx-service-grid
    > .wp-block-group__inner-container
    > .spx-service-card:nth-child(odd):last-child{

        grid-column:1 / -1 !important;

        width:100% !important;
        max-width:100% !important;
    }

}

/* =========================================================
   ONLY SARKARI KAAM HUB
   Restore full-width sections
   Desktop topics = 4 columns
   Mobile topics = 2 columns
   ========================================================= */

.spx-sarkari-kaam-page .spx-editor-content{
    column-count:auto !important;
    column-width:auto !important;
    display:block !important;
}

.spx-sarkari-kaam-page .spx-section{
    display:block !important;
    width:100% !important;
    margin:0 0 18px !important;
    break-inside:auto !important;
}

.spx-sarkari-kaam-page .spx-topic-list{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    column-gap:16px !important;
    row-gap:0 !important;
    width:100% !important;
}

@media (max-width:700px){

    .spx-sarkari-kaam-page .spx-topic-list{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        column-gap:8px !important;
    }

}

/* =========================================================
   SARKARI KAAM HUB - TOPIC TEXT VERTICAL CENTER FIX
   Sirf hub page ke list items par apply hoga
   ========================================================= */

.spx-sarkari-kaam-page .spx-topic-list > li{
    display:flex !important;
    align-items:center !important;
}

.spx-sarkari-kaam-page .spx-topic-list > li > a,
.spx-sarkari-kaam-page .spx-topic-list > li > span{
    display:flex !important;
    align-items:center !important;
    min-height:100%;
}

/* =========================================================
   SARKARI KAAM HUB - REMOVE CURRENT NEW BADGES
   ========================================================= */

.spx-sarkari-kaam-page
.spx-topic-list
> li
.spx-topic-badge{
    display:none !important;
    visibility:hidden !important;
    width:0 !important;
    height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
}