@font-face {
    font-family: 'myfont';
    src: url('../fonts/HacenTunisia.ttf');
}

:root{
    --main-color:#204289;
    --hover-color:#2f61c4;
    --bg:#f5f7fb;
}

main{
    width:100%;
    display:flex;
    justify-content:center;
    padding:4vw 0;
    background:var(--bg);
}


.mag{
    width:90vw;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2vw;
}


.mag div{
    background:#fff;
    border-radius:1.3vw;
    box-shadow:0 0.8vw 2vw rgba(0,0,0,.08);
    padding:2vw 2.5vw;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:space-between;
    transition:.35s ease;
    overflow:hidden;
    position:relative;
}


.mag div:hover{
    transform:translateY(-0.7vw);
    box-shadow:0 1.5vw 3vw rgba(0,0,0,.15);
}


/* الدائرة العلوية */
.mag div::before{
    content:"";
    width:7vw;
    height:7vw;
    min-width:5.5vw;
    background:#eef3ff url("../images/icons/magazine.png") center/65% no-repeat;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}


.mag div:hover::before{
    transform:rotate(8deg) scale(1.1);
   
}



.mag div h2{
    margin:1.5vw 0;
    font-family:'myfont';
    font-size:1.35vw;
    color:var(--main-color);
    text-align:center;
    line-height:1.8;
}



/* الزر */
.mag div button{

    width:85%;
    padding:0.9vw;
    border:none;
    border-radius:3vw;
    background:var(--main-color);
    color:white;
    font-family:'myfont';
    font-size:1vw;
    cursor:pointer;
    transition:.3s ease;
}


.mag div button:hover{
    background:var(--hover-color);
    transform:scale(1.05);
}



.mag div .date{
    color:#666;
    font-size:0.9vw;
    margin-bottom:0.8vw;
    text-align:center;
}

.mag div .description{
    color:#444;
    font-size:1vw;
    line-height:1.7;
    text-align:center;
    margin-bottom:1.5vw;
}


/* الشاشات المتوسطة */
@media(max-width:1000px){

    .mag{
        grid-template-columns:repeat(3,1fr);
        gap:3vw;
    }


    .mag div{
        min-height:22vw;
    }

     .mag div::before{
        width:12vw;
        height:12vw;

    }


    .mag div h2{
        font-size:2vw;
    }


    .mag div button{
        font-size:1.6vw;
    }

    .mag div .date{
    font-size:1.4vw;
    margin-bottom:0.8vw;
}

.mag div .description{
    font-size:1.4vw;
    margin-bottom:2vw;
}

}




/* التابلت */
@media(max-width:768px){

    .mag{
        width:90vw;
        grid-template-columns:repeat(2,1fr);
        gap:3vw;
    }


    .mag div{
        border-radius:2vw;
        min-height:35vw;
        padding:4vw 4vw;
    }


    .mag div::before{
        width:16vw;
        height:16vw;
        min-width:10vw;
        font-size:5vw;
    }


    .mag div h2{
        font-size:3vw;
        margin:3vw 0;
    }


    .mag div button{
        width:90%;
        padding:1.8vw;
        font-size:2.5vw;
         margin-top: 2vw;
    }


        .mag div .date{
    font-size:2vw;
    margin-bottom:0.8vw;
}

.mag div .description{
    font-size:2vw;
    margin-bottom:2vw;
}

}




/* الجوال */
@media(max-width:480px){


    .mag{
        width:85vw;
        grid-template-columns:1fr;
        gap:5vw;
    }


    .mag div{

        min-height:55vw;
        padding:6vw 6vw;
        border-radius:4vw;

    }


    .mag div::before{

        width:26vw;
        height:26vw;
        min-width:18vw;
        font-size:9vw;

    }


    .mag div h2{

        font-size:6vw;
        margin:5vw 0;

    }


    .mag div button{

        width:90%;
        font-size:4.5vw;
        padding:3vw;
        margin-top: 4vw;

    }

    
        .mag div .date{
    font-size:3.5vw;
}

.mag div .description{
    font-size:3.5vw;
}

}