body {  
    font-family: 'Arial', sans-serif;  
    margin: 0;  
    padding: 0;  
    background-color: #f9f9f9;  
    color: #333;  
}  

/* سربرگ اصلی */  
.main-header {  
    text-align: center;  
    padding: 20px;  
    background: linear-gradient(135deg, #4caf50, #8bc34a);  
    color: white;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
}  

.main-header h1 {  
    margin: 0;  
    font-size: 2.5em;  
}  

.main-header p {  
    margin: 10px 0;  
    font-size: 1.2em;  
}  

/* بخش جستجو */  
.search-section {  
    margin-top: 15px;  
}  

#search-input {  
    padding: 10px;  
    font-size: 1em;  
    width: 60%;  
    border: 2px solid #ddd;  
    border-radius: 5px;  
}  

.search-btn {  
    padding: 10px 20px;  
    font-size: 1em;  
    background-color: #4caf50;  
    color: white;  
    border: none;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: background-color 0.3s;  
}  

.search-btn:hover {  
    background-color: #3e8e41;  
}  

/* فیلتر حروف الفبایی */  
.alphabet-filter {  
    text-align: center;  
    margin-top: 20px;  
    margin-bottom: 20px;  
}  

.alphabet-filter span {  
    display: inline-block;  
    margin: 5px;  
    padding: 10px 15px;  
    font-size: 1.1em;  
    background-color: #e0e0e0;  
    border-radius: 5px;  
    cursor: pointer;  
    transition: background-color 0.3s;  
}  

.alphabet-filter span:hover {  
    background-color: #c8e6c9;  
}  

/* نمایش شبکه‌ای اسامی */  
.name-grid {  
    display: flex;  
    justify-content: space-around;  
    padding: 20px;  
}  

.name-section {  
    flex: 1;  
    margin: 0 10px;  
    padding: 10px;  
    background-color: #fff;  
    border-radius: 10px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);  
}  

.name-list {  
    display: grid;  
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));  
    gap: 10px;  
}  

.name-item {  
    padding: 10px;  
    background-color: #f5f5f5;  
    border-radius: 5px;  
    text-align: center;  
    transition: transform 0.3s, box-shadow 0.3s;  
}  

.name-item:hover {  
    transform: scale(1.05);  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  
}  

.name-item h3 {  
    margin: 0;  
    font-size: 1.1em;  
    color: #4caf50;  
}  

.name-item p {  
    margin: 5px 0 0;  
    font-size: 0.9em;  
    color: #333;  
}  

/* فوتر */  
footer {  
    text-align: center;  
    padding: 10px;  
    background-color: #4caf50;  
    color: white;  
    margin-top: 20px;  
}

/* کانتینر اصلی برای ورودی‌ها و دکمه‌ها */  
.action-container {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
    margin: 20px 0;  
    background-color: #fff;  
    padding: 15px;  
    border-radius: 8px;  
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
    width: 80%;  
    max-width: 600px;  
    margin-right: auto;  
    margin-left: auto;  
}  

/* استایل برای ورودی‌ها (خانه‌ها) */  
.letter-inputs {  
    display: flex;  
    flex-wrap: wrap;  
    gap: 10px;  
    margin-bottom: 20px;  
    justify-content: center;  
    direction: rtl;  
}  

.letter-input {  
    width: 40px;  
    height: 40px;  
    text-align: center;  
    font-size: 1.2em;  
    border: 1px solid #ccc;  
    border-radius: 6px;  
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);  
}  

/* استایل برای دکمه‌ها */  
.action-buttons button {  
    padding: 10px 20px;  
    font-size: 1rem;  
    border: none;  
    background-color: #5c6bc0;  
    color: white;  
    border-radius: 6px;  
    cursor: pointer;  
    margin: 5px;  
    transition: background-color 0.3s;  
}  

.action-buttons button:hover {  
    background-color: #3949ab;  
}  

.action-buttons {  
    display: flex;  
    gap: 15px;  
    justify-content: center;  
}

.alphabet-filter {  
    margin: 20px 0; /* فاصله بالایی و پایینی */  
}  

#letter-select {  
    padding: 10px; /* فضای داخلی */  
    font-size: 16px; /* اندازه متن */  
    border-radius: 5px; /* گوشه‌های نرم */  
    border: 1px solid #ccc; /* حاشیه */  
    background-color: #f9f9f9; /* رنگ پس‌زمینه */  
    cursor: pointer; /* نشانگر ماوس */  
    transition: border-color 0.3s; /* افکت تغییر رنگ */  
}  

#letter-select:hover {  
    border-color: #5c6bc0; /* رنگ حاشیه حین هاور */  
}

.quranic-names-button {  
    display: inline-block; /* نمایش در خط با سایر عناصر */  
    margin-left: 15px; /* فاصله با فیلتر حروف */  
    padding: 10px 20px; /* فضای داخلی دکمه */  
    font-size: 16px; /* اندازه متن */  
    color: white; /* رنگ متن */  
    background-color: #5c6bc0; /* رنگ پس‌زمینه */  
    border-radius: 5px; /* گوشه‌های نرم */  
    text-decoration: none; /* حذف زیرخط */  
    transition: background-color 0.3s; /* افکت تغییر رنگ */  
}  

.quranic-names-button:hover {  
    background-color: #3949ab; /* رنگ پس‌زمینه هنگام هاور */  
}

#load-more {  
    margin-top: 20px; /* فاصله بالا */  
    padding: 10px 20px; /* فضای داخلی */  
    font-size: 16px; /* اندازه متن */  
    color: white; /* رنگ متن */  
    background-color: #5c6bc0; /* رنگ پس‌زمینه */  
    border-radius: 5px; /* گوشه‌های نرم */  
    cursor: pointer; /* نشانگر ماوس */  
    transition: background-color 0.3s; /* افکت تغییر رنگ */  
}  

#load-more:hover {  
    background-color: #3949ab; /* رنگ تغییر هنگام هاور */  
}