/*=================================================
            Math Categories Section
==================================================*/

.math-categories{
    padding:90px 0;
    background:#fff;
}

/*=========================
        Card
==========================*/

.category-card{

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

    height:220px;

    background:#fff;

    border-radius:22px;

    padding:30px 20px;

    text-decoration:none;

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 10px 35px rgba(0,0,0,.07);

    border:1px solid #f1f1f1;

}

/* نوار رنگی بالا */

.category-card::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:100%;

    height:4px;

}

/* Hover */

.category-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.14);

}

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

.category-icon{

    width:82px;

    height:82px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-bottom:22px;

    font-size:36px;

    transition:.35s;

}

.category-icon i{

    transition:.35s;

}

.category-card:hover .category-icon{

    transform:scale(1.1);

}

.category-card:hover .category-icon i{

    transform:rotate(10deg);

}

/*=========================
        Title
==========================*/

.category-card h5{

    font-size:18px;

    color:#222;

    font-weight:700;

    text-align:center;

    line-height:1.8;

    margin-bottom:12px;

    transition:.3s;

}

.category-card:hover h5{

    color:#0d6efd;

}

/*=========================
        Counter
==========================*/

.category-card span{

    display:inline-block;

    padding:6px 16px;

    border-radius:25px;

    font-size:13px;

    font-weight:600;

}

/*=========================
      BLUE
==========================*/

.category-card.blue::before{

    background:#2563eb;

}

.category-card.blue .category-icon{

    background:#edf4ff;

    color:#2563eb;

    box-shadow:0 0 0 15px rgba(37,99,235,.08);

}

.category-card.blue span{

    background:#edf4ff;

    color:#2563eb;

}

/*=========================
      GREEN
==========================*/

.category-card.green::before{

    background:#22c55e;

}

.category-card.green .category-icon{

    background:#ecfff3;

    color:#22c55e;

    box-shadow:0 0 0 15px rgba(34,197,94,.08);

}

.category-card.green span{

    background:#ecfff3;

    color:#22c55e;

}

/*=========================
      PURPLE
==========================*/

.category-card.purple::before{

    background:#9333ea;

}

.category-card.purple .category-icon{

    background:#f6edff;

    color:#9333ea;

    box-shadow:0 0 0 15px rgba(147,51,234,.08);

}

.category-card.purple span{

    background:#f6edff;

    color:#9333ea;

}

/*=========================
      ORANGE
==========================*/

.category-card.orange::before{

    background:#f59e0b;

}

.category-card.orange .category-icon{

    background:#fff6e8;

    color:#f59e0b;

    box-shadow:0 0 0 15px rgba(245,158,11,.08);

}

.category-card.orange span{

    background:#fff6e8;

    color:#f59e0b;

}

/*=========================
      PINK
==========================*/

.category-card.pink::before{

    background:#ec4899;

}

.category-card.pink .category-icon{

    background:#ffeef7;

    color:#ec4899;

    box-shadow:0 0 0 15px rgba(236,72,153,.08);

}

.category-card.pink span{

    background:#ffeef7;

    color:#ec4899;

}

/*=========================
      RED
==========================*/

.category-card.red::before{

    background:#ef4444;

}

.category-card.red .category-icon{

    background:#fff0f0;

    color:#ef4444;

    box-shadow:0 0 0 15px rgba(239,68,68,.08);

}

.category-card.red span{

    background:#fff0f0;

    color:#ef4444;

}

/*=========================
      CYAN
==========================*/

.category-card.cyan::before{

    background:#06b6d4;

}

.category-card.cyan .category-icon{

    background:#eafdff;

    color:#06b6d4;

    box-shadow:0 0 0 15px rgba(6,182,212,.08);

}

.category-card.cyan span{

    background:#eafdff;

    color:#06b6d4;

}

/*=========================
      YELLOW
==========================*/

.category-card.yellow::before{

    background:#eab308;

}

.category-card.yellow .category-icon{

    background:#fffbe8;

    color:#eab308;

    box-shadow:0 0 0 15px rgba(234,179,8,.08);

}

.category-card.yellow span{

    background:#fffbe8;

    color:#eab308;

}

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

@media(max-width:992px){

    .category-card{

        height:205px;

    }

    .category-icon{

        width:72px;

        height:72px;

        font-size:32px;

    }

    .category-card h5{

        font-size:16px;

    }

}

@media(max-width:768px){

    .category-card{

        height:185px;

        padding:22px 15px;

    }

    .category-icon{

        width:62px;

        height:62px;

        font-size:28px;

        margin-bottom:18px;

    }

    .category-card h5{

        font-size:15px;

    }

    .category-card span{

        font-size:12px;

        padding:5px 14px;

    }

}

@media(max-width:576px){

    .category-card{

        height:170px;

    }

    .category-icon{

        width:56px;

        height:56px;

        font-size:24px;

    }

}