/* استایل عمومی */  
body {  
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
  margin: 0;  
  padding: 0;  
  background: #f7f7f7;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  text-align: center;  
}  

/* هدر */  
header {  
  background-color: #4CAF50;  
  color: #fff;  
  padding: 20px;  
  width: 100%;  
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
}  

header h1 {  
  margin: 0;  
  font-size: 24px;  
}  

header p {  
  margin: 5px 0 0;  
  font-size: 14px;  
}  

/* کانتینر کارت‌ها */  
.container {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));  
  gap: 20px;  
  padding: 20px;  
  max-width: 1200px;  
  width: 100%;  
}  

/* کارت‌ها */  
.card {  
  background: white;  
  border-radius: 10px;  
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);  
  overflow: hidden;  
  transition: transform 0.3s ease, box-shadow 0.3s ease;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  padding: 15px;  
}  

.card:hover {  
  transform: translateY(-10px);  
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);  
}  

.card-icon {  
  font-size: 50px;  
  margin-bottom: 10px;  
}  

.card h2 {  
  font-size: 18px;  
  margin: 10px 0 5px;  
  color: #333;  
}  

.card p {  
  font-size: 14px;  
  color: #555;  
  margin: 2px 0;  
  text-align: center;  
}  

.card-buttons {  
  margin-top: 15px;  
}  

button {  
  border: none;  
  padding: 8px 12px;  
  margin: 5px;  
  border-radius: 5px;  
  cursor: pointer;  
  font-size: 14px;  
}  

button.share {  
  background-color: #2196F3;  
  color: white;  
}  

button.share:hover {  
  background-color: #1976D2;  
}  

button.copy {  
  background-color: #f0ad4e;  
  color: white;  
}  

button.copy:hover {  
  background-color: #ec971f;  
}

/* استایل‌های پاپ آپ */  
.popup {  
    display: none; /* پاپ آپ به طور پیش‌فرض مخفی است */  
    position: fixed;  
    z-index: 1000;  
    left: 0;  
    top: 0;  
    width: 100%;  
    height: 100%;  
    overflow: auto;  
    background-color: rgba(0, 0, 0, 0.7); /* پس‌زمینه نیمه شفاف */  
}  

.popup-content {  
    background-color: #fff;  
    margin: 15% auto;  
    padding: 20px;  
    border: 1px solid #888;  
    width: 80%; /* عرض پاپ آپ */  
}  

.close {  
    color: #aaa;  
    float: right;  
    font-size: 28px;  
    font-weight: bold;  
}  

.close:hover,  
.close:focus {  
    color: black;  
    text-decoration: none;  
    cursor: pointer;  
}

/* استایل بخش جستجو */  
.search-container {  
  margin: 20px 0;  
  text-align: center;  
}  

#search-input {  
  width: 80%;  
  max-width: 600px;  
  padding: 10px;  
  font-size: 16px;  
  border: 1px solid #ccc;  
  border-radius: 5px;  
  outline: none;  
}  

#search-input:focus {  
  border-color: #4CAF50;  
  box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);  
}