/*بـسـم الله الـرحـمـان الـرحـیـم*/


/* بسم الله الرحمن الرحیم */


h1{

    text-align:center;

    margin-top:40px;

    font-family:vazir--bold;

    font-size:38px;

    color:#22c55e;

    text-shadow:

    0 0 20px rgba(34,197,94,.4);

}



.line{

    width:90%;

    height:1px;

    border:none;

    background:

    linear-gradient(
        90deg,
        transparent,
        #22c55e,
        transparent
    );

}




section{

    width:min(1200px,95%);

    margin:40px auto;

    direction:rtl;

}





.articles--body--list{


    padding:0;


    list-style:none;


    display:grid;


    grid-template-columns:

    repeat(auto-fit,minmax(280px,1fr));


    gap:30px;


}




.articles--body--list > a{


    text-decoration:none;


}





.item{


    height:100%;


    overflow:hidden;


    background:


    linear-gradient(
        145deg,
        #07111d,
        #020617
    );


    border-radius:25px;


    border:

    1px solid rgba(255,255,255,.08);


    box-shadow:


    0 15px 40px rgba(0,0,0,.35);


    transition:.45s;


    position:relative;


}





.item::before{


    content:"";


    position:absolute;


    right:0;


    top:0;


    width:5px;


    height:0;


    background:#22c55e;


    transition:.4s;


}




.item:hover{


    transform:translateY(-12px);


    border-color:#22c55e;


    box-shadow:


    0 25px 60px rgba(34,197,94,.18);


}



.item:hover::before{


    height:100%;


}






.articles--img{


    width:100%;


    height:230px;


    object-fit:cover;


    display:block;


    transition:.5s;


}




.item:hover .articles--img{


    transform:scale(1.08);


}





.bottom{


    padding:20px;


    position:relative;


    background:


    linear-gradient(
        transparent,
        #07111d
    );


}




.bottom h3{


    margin:0;


    color:#fff;


    font-family:vazir--bold;


    font-size:20px;


    line-height:1.8;


    transition:.3s;


}



.item:hover h3{


    color:#4ade80;


}





/* حالت بدون مقاله */




@media(max-width:700px){


    h1{

        font-size:28px;

    }



    .articles--body--list{

        grid-template-columns:1fr;

        gap:20px;

    }



    .articles--img{

        height:190px;

    }



    .bottom h3{

        font-size:17px;

    }


}