/*==================================================
        Programming Categories
==================================================*/

.programming-categories{

    padding:90px 0;

    background:#f8fafc;

}

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

.program-card{

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:#fff;

    border-radius:20px;

    height:170px;

    border:1px solid #edf1f7;

    position:relative;

    overflow:hidden;

    transition:.35s;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}

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

.program-card::before{

    content:"";

    position:absolute;

    top:0;

    right:0;

    width:100%;

    height:5px;

}

/* Hover */

.program-card:hover{

    transform:translateY(-10px);

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

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

.program-card i{

    width:72px;

    height:72px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    font-size:34px;

    margin-bottom:18px;

    transition:.35s;

}

.program-card:hover i{

    transform:translateY(-6px) scale(1.12) rotate(8deg);

}

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

.program-card h5{

    margin:0;

    color:#333;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}

.program-card:hover h5{

    color:#0d6efd;

}

/*==================================================
            Python
==================================================*/

.program-card.python::before{

    background:#3776AB;

}

.program-card.python i{

    background:#EEF6FF;

    color:#3776AB;

    box-shadow:0 0 0 12px rgba(55,118,171,.10);

}

/*==================================================
              ICDL
==================================================*/

.program-card.icdl::before{

    background:#00B894;

}

.program-card.icdl i{

    background:#E9FFF8;

    color:#00B894;

    box-shadow:0 0 0 12px rgba(0,184,148,.10);

}

/*==================================================
             Django
==================================================*/

.program-card.django::before{

    background:#0C4B33;

}

.program-card.django i{

    background:#ECFFF4;

    color:#0C4B33;

    box-shadow:0 0 0 12px rgba(12,75,51,.10);

}

/*==================================================
          Web Design
==================================================*/

.program-card.web::before{

    background:#FF8A00;

}

.program-card.web i{

    background:#FFF4E8;

    color:#FF8A00;

    box-shadow:0 0 0 12px rgba(255,138,0,.10);

}

/*=========================
      Hover Effect
=========================*/

.program-card:hover.python{

    border-color:#3776AB33;

}

.program-card:hover.icdl{

    border-color:#00B89433;

}

.program-card:hover.django{

    border-color:#0C4B3333;

}

.program-card:hover.web{

    border-color:#FF8A0033;

}

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

@media(max-width:992px){

    .program-card{

        height:160px;

    }

}

@media(max-width:768px){

    .program-card{

        height:145px;

    }

    .program-card i{

        width:64px;

        height:64px;

        font-size:30px;

        margin-bottom:15px;

    }

    .program-card h5{

        font-size:16px;

    }

}

@media(max-width:576px){

    .program-card{

        height:135px;

    }

    .program-card i{

        width:58px;

        height:58px;

        font-size:27px;

        box-shadow:none;

    }

    .program-card h5{

        font-size:15px;

    }

}