/* ==========================================================
   Example Box
========================================================== */

.af-example{

    position:relative;

    border:1px solid #D9E7FF;

    background:#FFFFFF;

    overflow:hidden;
    transition:all .3s ease;

}

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

.af-example::before{

    content:"";

    position:absolute;

    top:0;
    right:0;
    left:0;

    height:4px;

    background:linear-gradient(90deg,#2F80ED,#56CCF2);

}

/* هدر */

.af-example .af-box-header{

    margin:-28px -28px 26px;

    padding:20px 28px;

    background:#F7FAFF;

    border-bottom:1px solid #EAF2FF;

}

/* آیکون */

.af-example .af-box-icon{

    width:48px;

    height:48px;

    border-radius:14px;

    background:#E8F1FF;

    color:#2F80ED;

    font-size:24px;

}
.af-box-content p{

    margin:0;

    font-size:16px;

    line-height:2.2;

    color:var(--af-text);

}
.af-example:hover{

    border-color:#BFD9FF;
      transform:translateY(-4px);

}