.sidebar { position:fixed; right:-250px; top:0; width:250px; height:100%; background:#222; padding-top:60px; transition:right .3s; z-index:999; }
.sidebar.active { right:0; }
.sidebar ul { list-style:none; padding:0; }
.sidebar ul li a { color:#fff; display:block; padding:12px 20px; }
.tabs { display:flex; justify-content:center; gap:10px; margin:15px 0; }
.tab-btn { padding:10px 20px; border-radius:8px; border:none; cursor:pointer; background:#ddd; font-weight:bold; }
.tab-btn.active { background:#111; color:#fff; }
.container { padding: 20px; max-width: 1200px; margin: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; }

.card { background: #fff; border-radius: 12px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); text-align: center; padding: 10px; transition: transform 0.3s, box-shadow 0.3s; }
.card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0,0,0,0.2); }
.card img { width: 100%; height: 120px; object-fit: contain; }
.card h3 { font-size: 16px; margin: 10px 0; }
.card a { display: inline-block; padding: 8px 15px; background: #007bff; color: #fff; border-radius: 6px; text-decoration: none; transition: background 0.3s; }
.card a:hover { background: #0056b3; }