/* Start custom CSS for html, class: .elementor-element-8ece217 *//* MAIN SECTION */

.kj-modern-categories{
    position:relative;
    overflow:hidden;
    padding:100px 20px;
    background:
    linear-gradient(
    135deg,
    #f8fafc,
    #eef2ff,
    #fdf2f8
    );
}

/* HEADING */

.modern-heading h2{
    font-size:52px;
    font-weight:900;
    color:#0f172a;
}

.modern-badge{
    background:
    linear-gradient(
    135deg,
    #2563eb,
    #7c3aed
    );
    color:#fff;
    padding:12px 24px;
    border-radius:50px;
}

/* CARDS */

.modern-card{
    position:relative;
    overflow:hidden;
    border-radius:30px;
    padding:30px;
    text-decoration:none;
    transition:.4s;
    box-shadow:
    0 20px 40px rgba(0,0,0,.08);
}

.modern-card:hover{
    transform:translateY(-10px) scale(1.02);
}

/* GOVERNMENT */

.govt-card{
    min-height:420px;
    display:flex;
    align-items:flex-end;
    background:
    linear-gradient(
    135deg,
    #2563eb,
    #06b6d4
    );
}

/* ARMY */

.army-card{
    min-height:190px;
    background:
    linear-gradient(
    135deg,
    #f97316,
    #ef4444
    );
}

/* BANK */

.bank-card{
    min-height:190px;
    background:
    linear-gradient(
    135deg,
    #10b981,
    #14b8a6
    );
}

/* PRIVATE */

.private-card{
    min-height:220px;
    background:
    linear-gradient(
    135deg,
    #8b5cf6,
    #6366f1
    );
}

/* BLOG */

.blog-card{
    min-height:220px;
    background:
    linear-gradient(
    135deg,
    #ec4899,
    #be185d
    );
}

/* ICONS */

.card-icon{
    width:72px;
    height:72px;
    border-radius:20px;
    background:rgba(255,255,255,.18);
    backdrop-filter:blur(12px);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#fff;
    margin-bottom:20px;
}

/* TEXT */

.modern-card h3{
    color:#fff;
    font-size:28px;
    font-weight:800;
    margin-bottom:12px;
}

.modern-card p{
    color:rgba(255,255,255,.95);
    line-height:1.8;
}

/* BUTTON */

.card-arrow{
    display:inline-block;
    margin-top:20px;
    padding:12px 22px;
    border-radius:50px;
    background:rgba(255,255,255,.15);
    color:#fff;
    font-weight:700;
}

/* GLOW EFFECT */

.circle1{
    width:400px;
    height:400px;
    background:#3b82f6;
    opacity:.20;
}

.circle2{
    width:400px;
    height:400px;
    background:#ec4899;
    opacity:.15;
}

/* MOBILE */

@media(max-width:768px){

    .modern-heading h2{
        font-size:36px;
    }

    .top-right-cards,
    .bottom-card-row{
        grid-template-columns:1fr;
    }

}/* End custom CSS */