/*==================================================
POPULAR EXAMS
==================================================*/

.gjp-popular-exams{
    padding:0;
    background:transparent;
}

.gjp-card-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:18px;

}

.gjp-card-title{

    font-size:28px;

    font-weight:700;

    color:#111827;

    margin:0;

}

.gjp-view-all{

    font-size:14px;

    font-weight:600;

    color:#2563eb;

    text-decoration:none;

}

.gjp-view-all:hover{

    color:#1d4ed8;

}

.gjp-popular-wrapper{

    background:#fff;

    border:1px solid #e8edf5;

    border-radius:16px;

    padding:20px 20px 30px;

    box-shadow:0 2px 10px rgba(15,23,42,.05);

    height:100%;

    min-height:100%;

}

/*=========================
GRID
=========================*/

.gjp-popular-grid{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:12px;

    align-items:start;

}

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

.gjp-exam-card{

    position:relative;

    background:#fff;

    border-radius:14px;

    padding:14px 10px;

    min-height:132px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-align:center;

    text-decoration:none;

    overflow:hidden;

    box-shadow:0 6px 18px rgba(15,23,42,.08);

    transition:.3s;

}

/* Top Accent */

.gjp-exam-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#2563eb;

}

/* Hover */

.gjp-exam-card:hover{

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,23,42,.12);

}

/*=========================
ICON CIRCLE
=========================*/

.gjp-icon-circle{

    width:58px;

    height:58px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 10px;

    transition:.35s ease;

}

/* Icon */

.gjp-icon-circle img{

    width:42px;

    height:42px;

    object-fit:contain;

    display:block;

    transition:.35s ease;

}

/* Hover */

.gjp-exam-card:hover .gjp-icon-circle{

    filter:brightness(1.05);

}

.gjp-exam-card:hover .gjp-icon-circle img{

    transform:scale(1.08);

}

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

.gjp-exam-card h3{

    margin:0;

    font-size:15px;

    line-height:1.3;

    font-weight:700;

    color:#111827;

}

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

/* UPSC */

.upsc::before{

    background:#2563eb;

}

.upsc .gjp-icon-circle{

    background:linear-gradient(180deg,#eef4ff,#e3efff);

}

/* APPSC */

.appsc::before{

    background:#10b981;

}

.appsc .gjp-icon-circle{

    background:linear-gradient(180deg,#ecfdf5,#d9fbe8);

}

/* TGPSC */

.tgpsc::before{

    background:#7c3aed;

}

.tgpsc .gjp-icon-circle{

    background:linear-gradient(180deg,#f3e8ff,#ece1ff);

}

/* Telangana Police */

.ts-police::before{

    background:#4338ca;

}

.ts-police .gjp-icon-circle{

    background:linear-gradient(180deg,#eef2ff,#e3e8ff);

}

/* AP Police */

.ap-police::before{

    background:#06b6d4;

}

.ap-police .gjp-icon-circle{

    background:linear-gradient(180deg,#ecfeff,#d8fbff);

}

/* SSC */

.ssc::before{

    background:#f97316;

}

.ssc .gjp-icon-circle{

    background:linear-gradient(180deg,#fff7ed,#ffedd5);

}

/* RRB */

.rrb::before{

    background:#ef4444;

}

.rrb .gjp-icon-circle{

    background:linear-gradient(180deg,#fef2f2,#fee2e2);

}

/* Banking */

.banking::before{

    background:#16a34a;

}

.banking .gjp-icon-circle{

    background:linear-gradient(180deg,#ecfdf5,#dcfce7);

}

/*=========================
RESPONSIVE
=========================*/

@media(max-width:1024px){

.gjp-popular-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.gjp-popular-grid{

grid-template-columns:1fr;

}

.gjp-card-title{

font-size:22px;

}

.gjp-icon-circle{

width:110px;

height:110px;

}

.gjp-icon-circle img{

width:50px;

height:50px;

}

}