@font-face {
  font-family: 'Fontmagicfile';
  src:
    url('https://magicfile.ir/font/magicfile.woff2') format('woff2'),
    url('https://magicfile.ir/font/magicfile.woff') format('woff');
  font-display: swap;
}
    
    body {
        font-family: Fontmagicfile;
        margin: 0;
        direction: rtl;
        line-height: 1.6;
        background-color: #f1f5f9;
    }
    
    .main-header {
        color: #fff;
        background-color: #90F;
        padding: 20px;
        text-align: center;
    }
    
    .articles-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        padding: 10px;
    }
    
    .article {
        position: relative;
        display: inline-block;
        width: 100%;
        max-width: 410px;
        padding: 5px;
        font-size: 18px;
        background: #f4f7fb;
        border-radius: 14px;
        margin: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.26);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        will-change: transform;
        overflow: hidden;
       text-align: center;
    }
    
    .article:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.15);
    }
    
    .article img {
        border-radius: 14px;
        width: 100%;
        height: auto;
        opacity: 1;
        transition: opacity 0.3s;
    }
    
    .article img[data-src] {
        opacity: 0;
    }
    
    .span3 {
        color: #1a237e;
        font-weight: bold;
    }
    
    .listm {
        text-align: center;
        margin: 15px auto;
    }
    
    .dl {
        font-size: 17px;
        background: linear-gradient(135deg, #1b5e20, #4caf50);
        color: #fff;
        padding: 8px 26px;
        border-radius: 6px;
        margin: 4px;
        transition: all 0.25s ease;
        box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
        display: inline-block;
        border: none;
        text-decoration: none;
    }
    
    .dl:hover {
        background: linear-gradient(135deg, #145a16, #43a047);
        box-shadow: 0 7px 18px rgba(56, 142, 60, 0.45);
        transform: translateY(-2px);
    }
    
    .dl_a {
        font-size: 17px;
        background: linear-gradient(135deg, #0d47a1, #1976d2);
        color: #fff;
        padding: 8px 26px;
        border-radius: 6px;
        margin: 4px;
        transition: all 0.25s ease;
        box-shadow: 0 4px 12px rgba(25, 118, 210, 0.35);
        display: inline-block;
        border: none;
        text-decoration: none;
    }
    
    .dl_a:hover {
        background: linear-gradient(135deg, #0a3578, #1565c0);
        box-shadow: 0 7px 18px rgba(25, 118, 210, 0.45);
        transform: translateY(-2px);
    }
    
    .command {
        display: inline-block;
        padding: 20px;
        font-size: 18px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: 2px 3px 5px 2px #888;
        margin: 10px;
        background-color: #eee;
        text-align: center;
    }
    
    .command:hover {
        box-shadow: 2px 6px 10px 4px #888;
    }
    
    .entry-title {
        font-size: 24px;
    }
    
    .text-container {
        max-width: 80%;
        margin: 20px auto;
        line-height: 1.6;
        text-align: justify;
    }
    
    .text-content {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .text-content.expanded {
        -webkit-line-clamp: unset;
        display: block;
    }
    
    .show-more {
        color: #0066cc;
        cursor: pointer;
        margin-top: 10px;
        display: inline-block;
    }
    
    .show-more:hover {
        text-decoration: underline;
    }
    
    .select {
        padding: 6px 12px;
        margin: 3px;
        font-size: 14px;
        color: #555;
        background-color: #fff;
        border: 1px solid #ccc;
        border-radius: 2px;
    }
    
    .select:hover {
        box-shadow: 0 0 5px 3px #FF6;
    }
	a{text-decoration:none;}