/*==========================================================
    Quick Category Section
==========================================================*/

.quick-category-section{

    margin-top:var(--section-gap);

}

.section-heading{

    text-align:center;

    max-width:650px;

    margin:0 auto 36px;

}

.section-subtitle{

    display:inline-block;

    padding:6px 14px;

    border-radius:30px;

    background:var(--primary-soft);

    color:var(--primary);

    font-size:12px;

    font-weight:700;

    margin-bottom:14px;

}

.section-title{

    font-size:30px;

    font-weight:900;

    color:var(--text);

    margin-bottom:14px;

}

.section-description{

    font-size:14px;

    line-height:2;

    color:var(--muted);

}

/*==========================================================
    Grid
==========================================================*/

.quick-category-grid{

    display:grid;

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

    gap:18px;

}

/*==========================================================
    Item
==========================================================*/

.quick-category-item{

    background:var(--surface);

    border:1px solid var(--border);

    border-radius:5px;

    padding:26px 18px;

    text-align:center;

    text-decoration:none;

    transition:.25s;

}

.quick-category-item:hover{

    border-color:var(--primary);

    /*transform:translateY(-6px);*/

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}

/*==========================================================
    Icon
==========================================================*/

.quick-category-icon{

    width:68px;

    height:68px;

    margin:0 auto 18px;

    border-radius:50%;

    background:var(--primary-soft);

    color:var(--primary);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    transition:.25s;

}

.quick-category-item:hover .quick-category-icon{

    background:var(--primary);

    color:#fff;

    transform:scale(1.08);

}

/*==========================================================
    Typography
==========================================================*/

.quick-category-item h3{

    font-size:16px;

    font-weight:800;

    color:var(--text);

    margin-bottom:8px;

}

.quick-category-item p{

    font-size:13px;

    color:var(--muted);

    line-height:1.8;

}

/*==========================================================
    Responsive
==========================================================*/

@media(max-width:576px){

    .section-title{

        font-size:24px;

    }

}

@media(min-width:768px){

    .quick-category-grid{

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

    }

}

@media(min-width:992px){

    .quick-category-grid{

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

    }

}

@media(min-width:1400px){

    .quick-category-grid{

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

    }

}