* { margin:0; padding:0; box-sizing:border-box; font-family:sans-serif; }
    body { background:#f9f9f9; line-height:1.6; background-image: url(../images/reg-back.jpg)}

header {

    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: rgb(255 255 255 / 0.14)
}
    header h1 { font-size:20px; color:#333; }
    nav a { margin:0 10px; text-decoration:none; color:#555; font-weight:bold; transition:color 0.3s; }
    nav a:hover { color:#007BFF; }

    section { padding:40px 30px; width:100%; max-width:1200px; margin:auto; }
    section h2 { text-align:center; font-size:26px; margin-bottom:30px; color:#222; }

    .filter-bar {
      display:flex; justify-content:space-between; align-items:center; margin-bottom:30px;
      flex-wrap:wrap;
    }
    .filter-bar input[type="text"], .filter-bar select {
      padding:10px; border-radius:6px; border:1px solid #ccc; font-size:14px; margin:5px 0;
    }

    .blog-list {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
      gap:20px;
      min-height:200px;
    }

    .blog-item {
      background:#fff; padding:20px; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,0.1);
      transition:transform 0.3s;
    }
    .blog-item:hover { transform:translateY(-5px); }
    .blog-item h3 { margin-bottom:10px; font-size:18px; color:#333; }
    .blog-item p { font-size:14px; color:#555; margin-bottom:15px; }
    .blog-item a { display:inline-block; padding:8px 15px; background:linear-gradient(90deg, #7952c0, #573b8a);; color:#fff; text-decoration:none; border-radius:6px; transition: background 0.3s; }
    .blog-item a:hover { background:#0056b3; }

    .no-results { text-align:center; color:#888; font-size:16px; margin-top:20px; }

    /* Pagination */
    .pagination { text-align:center; margin-top:30px; }
    .pagination button {
      padding:8px 12px; margin:0 3px; border:none; border-radius:5px;
      background:linear-gradient(90deg, #7952c0, #573b8a); color:#fff; cursor:pointer; transition:background 0.3s;
    }
    .pagination button:hover { background:#0056b3; }
    .pagination button.active { background:#222; }
/* دکمه های pagination */
#pagination button {
  margin: 0 5px;
  padding: 8px 12px;
  border: none;
  background: #eee;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
    color: #222;
}

#pagination button.active {
  background: #0073e6;
  color: #fff;
  transform: scale(1.2);
  animation: bounce 0.4s;
}

/* انیمیشن bounce */
@keyframes bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.4); }
  50%  { transform: scale(1.1); }
  70%  { transform: scale(1.3); }
  100% { transform: scale(1.2); }
}