/* ==============================
   HOME GRID BUTTONS
============================== */

.home-grid-buttons{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
    margin:15px 0;
}

/* ==============================
   COMMON BUTTON
============================== */
.grid-btn{
    position:relative; /* 🔥 badge ke liye */
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:60px;
    padding:12px 8px;
    text-align:center;

    font-family:'Hind','Mukta',sans-serif;
    font-size:14px;
    font-weight:700;
    line-height:1.25;

    border-radius:14px;
    text-decoration:none !important;
    color:#fff !important;

    box-shadow:0 5px 12px rgba(0,0,0,.25);
    transition:all .3s ease;
}

/* ==============================
   TITLE (2 LINE CENTER)
============================== */
.grid-btn span{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;   /* max 2 lines */
    overflow:hidden;
    text-align:center;
}

/* ==============================
   NEW BADGE
============================== */
.grid-btn .new-badge{
    position:absolute;
    top:6px;
    right:6px;
    background:#ff0000;
    color:#fff;
    font-size:10px;
    font-weight:700;
    padding:2px 6px;
    border-radius:20px;
    line-height:1;
}

/* ==============================
   HOVER
============================== */
.grid-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 18px rgba(0,0,0,.35);
}

/* ==============================
   8 UNIQUE COLORS
============================== */

.btn-1{background:#0d6efd;}
.btn-1:hover{background:#084298;}

.btn-2{background:#198754;}
.btn-2:hover{background:#0f5132;}

.btn-3{background:#ffc107;color:#000!important;}
.btn-3:hover{background:#d39e00;}

.btn-4{background:#dc3545;}
.btn-4:hover{background:#842029;}

.btn-5{background:#6f42c1;}
.btn-5:hover{background:#4a1f8b;}

.btn-6{background:#fd7e14;}
.btn-6:hover{background:#b45306;}

.btn-7{background:#20c997;}
.btn-7:hover{background:#117a65;}

.btn-8{background:#0dcaf0;color:#000!important;}
.btn-8:hover{background:#0a7e8c;color:#fff!important;}

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

@media(max-width:1024px){
    .home-grid-buttons{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){
    .home-grid-buttons{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }
    .grid-btn{
        font-size:13px;
        min-height:52px;
    }
}

@media(max-width:480px){
    .home-grid-buttons{
        grid-template-columns:1fr;
        gap:8px;
    }
    .grid-btn{
        font-size:12px;
        min-height:48px;
    }
}

/* CLICK */
.grid-btn:active{
    transform:scale(.96);
}