/* اصلاح استایل ها برای سادگی و شیک‌تر شدن */  
.header {  
    background: linear-gradient(90deg, #034752, #046582);  
    color: #fff;  
    padding: 2rem 0;  
    text-align: center;  
    border-bottom: 5px solid #ffde59;  
}  
.header .logo h1 {  
    font-size: 2.5rem;  
    font-weight: bold;  
}  
.header .logo img {  
    max-width: 80px;  
    margin-bottom: 1rem;  
}  

/* حذف مقدمه اضافی در بخش دسته‌بندی */  
.categories {  
    margin: 3rem auto;  
    padding: 1rem;  
}  
.categories .grid {  
    display: grid;  
    grid-template-columns: repeat(3, 1fr); /* تغییر به 3 ستون */  
    gap: 1.5rem;  
    padding: 1rem;  
}  
.card {  
    background: white;  
    border-radius: 12px;  
    overflow: hidden;  
    transition: transform 0.3s, box-shadow 0.3s;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);  
}  
.card:hover {  
    transform: scale(1.05);  
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);  
}  
.card img {  
    width: 100%;  
    height: 150px;  
    object-fit: cover;  
    border-bottom: 5px solid #034752;  
}  
.card h4 {  
    font-size: 1.5rem;  
    font-weight: 600;  
    margin: 1rem 0;  
    color: #034752;  
    text-transform: capitalize;  
    transition: color 0.3s;  
}  
.card a {  
    text-decoration: none;  
}  
.card:hover h4 {  
    color: #046582;  
}  

/* Footer */  
.footer {  
    background: #034752;  
    color: white;  
    padding: 1rem;  
    text-align: center;  
    font-size: 0.9rem;  
    margin-top: 2rem;  
    border-top: 5px solid #ffde59;  
}  

/* Grid Layout for Miracles */  
.grid-container {  
    display: grid;  
    grid-template-columns: repeat(3, 1fr); /* تغییر به 3 ستون */  
    gap: 1rem;  
    padding: 2rem;  
    max-width: 1200px;  
    margin: auto;  
}  

.miracle-card {  
    background: white;  
    border-radius: 10px;  
    overflow: hidden;  
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  
    transition: transform 0.3s, box-shadow 0.3s;  
    cursor: pointer;  
}  
.miracle-card:hover {  
    transform: scale(1.03);  
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);  
}  

/* Summary of each miracle (shown by default) */  
.miracle-summary {  
    padding: 1rem;  
    background: #046582;  
    color: white;  
    text-align: right;  
}  
.miracle-summary h3 {  
    font-size: 1.4rem;  
    margin-bottom: 0.5rem;  
}  
.miracle-summary p {  
    font-size: 0.9rem;  
}  

/* Details of each miracle (hidden by default) */  
.miracle-details {  
    display: none;  
    padding: 1rem;  
    text-align: justify;  
    font-size: 0.9rem;  
    color: #333;  
}  
.miracle-details img {  
    width: 100%;  
    margin-bottom: 1rem;  
    border-radius: 8px;  
    border: 2px solid #046582;  
}

/* اصلاح استایل‌ها برای صفحه نمایش موبایل */  
@media screen and (max-width: 768px) {  
    .header {  
        padding: 1rem 0;  
    }  
    
    .header .logo h1 {  
        font-size: 1.8rem;  
    }  

    .categories .grid {  
        grid-template-columns: repeat(2, 1fr); /* تغییر به 2 ستون */  
    }  

    .card {  
        margin: 1rem 0; /* فاصله بین کارت‌ها */  
    }  
    
    .card h4 {  
        font-size: 1.2rem; /* کاهش اندازه فونت */  
    }  

    .footer {  
        font-size: 0.8rem; /* کاهش اندازه فونت فوتر */  
    }  

    .grid-container {  
        grid-template-columns: 1fr; /* یک ستون برای صفحه موبایل */  
        padding: 1rem; /* کاهش فضای داخلی */  
    }  
    
    .miracle-card {  
        margin-bottom: 1rem; /* فاصله بین کارت‌های معجزه */  
    }  
    
    .miracle-summary h3 {  
        font-size: 1.2rem; /* کاهش اندازه فونت */  
    }  

    .miracle-summary p {  
        font-size: 0.8rem; /* کاهش اندازه فونت */  
    }  
    
    .miracle-details {  
        font-size: 0.8rem; /* کاهش اندازه فونت */  
    }  
}