@font-face {
    font-family: "hafs";
    src: url("../fonts/Nabi.ttf");
    font-display: swap;
}


.mazar__cover { display: flex; padding: 50px; gap: 20px; justify-content: center; align-items: center; border-radius: 10px; position: relative; flex-flow: column; }
.mazar__cover::before { content: ''; background-color: #ddd; position: absolute; top: 100px; height: 250px; right: 0; left: 0; z-index: 0; border-radius: 10px; }
.mazar__id { position: relative; }
.mazar__image { border-radius: 10px; border: 20px solid #eee; outline: 10px solid #000; border-radius: 50%; }
.mazar__qrcode { position: absolute; right: -50px; bottom: 0; border-radius: 50%; background-color: #FFF; padding: 30px; box-shadow: -5px -5px 10px rgba(0,0,0, .1); }
.mazar__desc { margin-bottom: 50px; }

.mazar__data { text-align: center; }

.mazar__places { display: flex; gap: 20px; justify-content: center; }
.mazar__dates { display: flex; gap: 30px; justify-content: center; }
.mazar__dates strong { display: inline-block; direction: ltr; }

.mazar__multimedia { margin-bottom: 30px; display: flex; flex-flow: column; gap: 20px; }

.mazar__audio { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.mazar__audio span { display: block; margin-bottom: 10px; }
.mazar__audio audio { width: 100%; }

.mazar__video { display: flex; gap: 20px; position: relative; background-color: rgb(229, 248, 246); padding: 20px; border-radius: 10px; align-items: center; }
.mazar__video::before { content: 'ویدیوها'; font-weight: bold; font-size: 1.2em; }

.object__share { margin-top: 10px; display: flex; gap: 10px; justify-content: center; }
.object__share > * { display: inline-block; background-color: #eee; border: 1px solid #ddd; border-radius: 20px; padding: 4px 15px 3px; cursor: pointer; }
.object__shortlink {  direction: ltr; }

.memorial-archive__title { margin-bottom: 30px; }

.memorials { display: flex; flex-flow: column; gap: 10px; }
.memorials__item { background-color: #f9f9f9; border: 1px solid rgba(0,0,0, .1); border-radius: 10px; padding: 20px; display: flex; flex-flow: column; gap: 10px; position: relative; }
.memorials__item-header { display: flex; justify-content: space-between; align-items: center; }
.memorials__item-header a { font-size: .9em; }
.memorials__item h2 { font-size: 1.2em; }
.counters { display: flex; gap: 20px; }
.counters__item { display: flex; gap: 10px; flex: 1; position: relative; }
.counters__item button,
.counters__item span { flex: 1; }

.counters__item span { background-color: #ddd; border-radius: 5px; display: flex; align-items: center; justify-content: center; }


.prayers__item { margin-bottom: 50px; position: relative; background-color: #f9f9f9; border: 1px solid rgba(0,0,0, .1); border-radius: 10px; padding: 20px; margin-bottom: 20px; }
.prayers__item-title { margin-bottom: 10px; display: flex; gap: 30px; align-items: center; }
.prayers__item-title h3 { font-size: 1.5em; }
.prayers__item-title ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 20px; }
.prayers__item-desc-container { max-height: 200px; overflow-y: hidden; position: relative; }
.prayers__item-desc-more { background: linear-gradient(to top, #f9f9f9, transparent); position: absolute; bottom: 0; right: 0; left: 0; padding: 50px 0 0; text-align: center; cursor: pointer; }
.prayers__item-desc { font-family: 'hafs'; font-size: 1.2em; padding: 20px 0 0; word-spacing: 0; line-height: 2.5; }
.prayers__item-audio audio { width: 100%; }
.prayers__item-load-audio a.active { color: #1ec90e; }




.mrj-submit-form { display: flex; flex-flow: column; gap: 10px; background-color: #f5f5f5; padding: 50px; border-radius: 10px; position: relative; }
.dou-row { display: flex; gap: 20px; }
.dou-row > div { flex: 1; }
.mrj-submit-form label { display: block; cursor: pointer; }
.mrj-submit-form label.required::after { content: '(الزامی)'; font-size: .9em; display: inline-block; color: red; margin-right: 5px; }
.mrj-submit-form select { border: 1px solid #ccc; border-radius: 5px; padding: 6px 6px 7px; flex: auto; width: 100%; }
.mrj-submit-form .mrj-date { display: flex; gap: 5px; }
.mrj-submit-form input[type="text"], .mrj-submit-form input[type="email"], .mrj-submit-form input[type="tel"], .mrj-submit-form textarea { width: 100%; }
.mrj-submit-form input[type="file"] { background-color: #FFF; border: 1px solid #ccc; padding: 8px 16px 7px; border-radius: 5px; width: 100%; }
.mrj-submit-form button { background-color: #000; color: #FFF; border-radius: 5px; }
.mrj-submit-form button:hover { background-color: #0b3d06; color: #FFF; }

.mrj-form-submit { display: flex; gap: 20px; align-items: center; }

.prayers-list { background-color: #FFF; border: 1px solid #ccc; padding: 8px 16px 7px; border-radius: 5px; display: grid; grid-template-columns: repeat(2, 1fr); }

.submit-success { text-align: center; }
.sign-up-login { text-align: center; }
.sign-up-login a { color: rgb(47, 109, 224); }

/* nav links */
.nav-links { display: flex; gap: 20px; margin-bottom: 30px; align-items: center; }
.nav-links__item { flex: auto; }
.nav-links__item a { display: block; padding: 20px; background-color: #eee; border-radius: 10px; }
.nav-links__item a:hover { background-color: antiquewhite; }

/* map */
.map-container { height: 300px; border-radius: 8px; overflow: hidden; border: 1px solid #ddd; margin-bottom: 30px; }
#map { height: 100%; width: 100%; }

/* gallery */
.gallery { display: grid; gap: 10px; }
.gallery .gallery-item { margin: 0; }
.gallery .gallery-item img { border-radius: 5px; }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }
.gallery-columns-7 { grid-template-columns: repeat(7, 1fr); }
.gallery-columns-8 { grid-template-columns: repeat(8, 1fr); }
.gallery-columns-9 { grid-template-columns: repeat(9, 1fr); }


@media screen and (max-width:834px) {
    .gallery-columns-9, .gallery-columns-8, .gallery-columns-7 { grid-template-columns: repeat(6, 1fr); }
}

@media screen and (max-width:768px) {
    .gallery-columns-9, .gallery-columns-8, .gallery-columns-7, .gallery-columns-6 { grid-template-columns: repeat(5, 1fr); }
}

@media screen and (max-width:640px) {
    .gallery-columns-9, .gallery-columns-8, .gallery-columns-7, .gallery-columns-6, .gallery-columns-5 { grid-template-columns: repeat(4, 1fr); }
}

@media screen and (max-width:480px) {
    .gallery-columns-9, .gallery-columns-8, .gallery-columns-7, .gallery-columns-6, .gallery-columns-5, .gallery-columns-4 { grid-template-columns: repeat(3, 1fr); }

    .nav-links { display: flex; flex-flow: column; align-items: normal; gap: 10px; }
}