.row {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-flex-wrap: wrap;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-wrap: wrap;
    align-items: center
}

.gap-1>* {
    padding-right: 10px;
    padding-left: 10px
}

.gap-1 {
    margin-right: -10px;
    margin-left: -10px
}

@media (min-width:567px) {
    .col-6-sm {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        flex-grow: 0;
        width: 50%
    }
}

@media (min-width:768px) {
    .col-6-md {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        flex-grow: 0;
        width: 50%
    }
}

@media (min-width:992px) {
    .col-3-lg {
        width: 25%
    }

    .col-3-lg, .col-4-lg {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        flex-grow: 0
    }

    .col-4-lg {
        width: 33.3333333333%
    }
}

@media (max-width:567px) {
    .col-6-sm {
        -webkit-box-flex: 0;
        -ms-flex-positive: 0;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        flex-grow: 0;
        width: 50%
    }
}

.container-full {
    max-width: 100%
}

.container, .container-full {
    margin: 0 auto;
    padding: 0 15px
}

.container {
    max-width: 1200px
}

@media (max-width:767px) {
    .container {
        padding: 0 15px
    }
}

@media (min-width:567px) {
    .container {
        max-width: 540px
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }
}

@media (min-width:1400px) {
    .container {
        max-width: 1320px
    }
}

.d-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

*, :after, :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0;
    font-size: inherit;
    font-family: Almarai;
    direction: rtl;
    scroll-behavior: smooth
}

@font-face {
    font-style: normal;
    font-weight: 700;
    src: url(../assets/webfonts/Almarai-ExtraBold.woff2) format("woff2");
    font-family: Almarai;
    font-display: swap
}

@font-face {
    font-style: normal;
    font-weight: 700;
    src: url(../assets/webfonts/Almarai-Bold.woff2) format("woff2");
    font-family: Almarai;
    font-display: swap
}

@font-face {
    font-style: normal;
    font-weight: 400;
    src: url(../assets/webfonts/Almarai-Regular.woff2) format("woff2");
    font-family: Almarai;
    font-display: swap
}

body {
    overflow-x: hidden;
    background-color: #fafaf2
}

ul li {
    list-style: none
}

a {
    display: inline-block;
    text-decoration: none
}

button {
    height: unset;
    background-color: transparent
}

.btn {
    border: 1px solid transparent;
    outline: 0
}

.btn-base {
    border-radius: 8px;
    background-color: #db9e30;
    cursor: pointer
}

.btn-base, .btn-base a {
    -webkit-transition: .3s ease-out;
    color: #fff;
    font-weight: 600;
    transition: .3s ease-out
}

.btn-base a {
    padding: 10px 15px
}

.btn-base:hover {
    border: 1px solid #db9e30;
    background-color: transparent;
    color: #db9e30
}

.btn-base:hover a {
    color: #db9e30
}

.btn-accept {
    background-color: #3292e0
}

.btn-accept:hover {
    border-color: #3292e0;
    background-color: transparent;
    color: #3292e0
}

.btn-reject {
    -webkit-margin-start: 5px;
    margin-inline-start: 5px;
    background-color: #e03232
}

.btn-reject:hover {
    border-color: #e03232;
    background-color: transparent;
    color: #e03232
}

img, svg {
    display: block;
    width: 100%;
    height: 100%
}

header {
    -webkit-box-shadow: 0 8px 10px rgba(35, 23, 2, .51);
    z-index: 9999;
    position: relative;
    width: 100%;
    background-image: url(../assets/img/header-2-bg.webp);
    background-position: 50%;
    background-size: contain;
    background-color: #fafaf2;
    box-shadow: 0 8px 10px rgba(35, 23, 2, .51)
}

header.scroll {
    position: fixed;
    top: 0;
    left: 0
}

header nav {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-box-align: center;
    -ms-flex-align: center;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0
}

header nav .logo-nav img {
    -o-object-fit: cover;
    height: 70px;
    object-fit: cover
}

header nav .links-normal {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: auto
}

header nav .links-normal li {
    padding-right: 30px
}

header nav .links-normal li .nav-link {
    -webkit-transition: .3s ease-out;
    position: relative;
    color: #2f1e01;
    font-weight: 800;
    font-size: 1.125rem;
    cursor: pointer;
    transition: .3s ease-out
}

header nav .links-normal li .nav-link:before {
    -webkit-transition: .3s ease-out;
    position: absolute;
    right: 0;
    bottom: -3px;
    width: 0;
    height: 2px;
    border-radius: 5px;
    background-color: #db9e30;
    content: "";
    transition: .3s ease-out
}

header nav .links-normal li .nav-link.active, header nav .links-normal li .nav-link:hover {
    color: #db9e30
}

header nav .links-normal li .nav-link.active:before, header nav .links-normal li .nav-link:hover:before {
    width: 100%
}

@media (max-width:991px) {
    header nav .links-normal {
        display: none
    }
}

header nav .icons {
    display: none;
    border: 0;
    outline: 0;
    cursor: pointer
}

@media (max-width:991px) {
    header nav .icons {
        display: block
    }
}

header nav .icons i {
    padding: 5px;
    color: #2f1e01;
    font-size: 2.5rem
}

.responsive-nav {
    -webkit-transform: translateY(-100%);
    -webkit-transition: .3s ease-out;
    z-index: 9998;
    position: absolute;
    width: 100%;
    min-height: 32vh;
    min-height: calc(var(--vh, 1vh)*32);
    transform: translateY(-100%);
    border-bottom-left-radius: 100px;
    background-color: #6a4f1f;
    transition: .3s ease-out
}

.responsive-nav.active {
    -webkit-transform: translateY(0);
    transform: translateY(0)
}

.responsive-nav .links-responsive {
    padding-top: 3vh;
    padding-top: calc(var(--vh, 1vh)*3)
}

.responsive-nav .links-responsive li {
    padding-bottom: 3vh;
    padding-bottom: calc(var(--vh, 1vh)*3)
}

.responsive-nav .links-responsive li a {
    -webkit-transition: .3s ease-out;
    color: #fafaf2;
    font-weight: 700;
    font-size: 1.25rem;
    transition: .3s ease-out
}

.responsive-nav .links-responsive li a.btn-link:hover {
    -webkit-transform: translateX(0);
    transform: translateX(0)
}

.responsive-nav .links-responsive li a:hover {
    -webkit-transform: translateX(-15px);
    transform: translateX(-15px);
    color: #db9e30
}

.banner {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh)*100);
    padding-top: 5vh;
    padding-top: calc(var(--vh, 1vh)*5);
    background: url(../assets/img/banner-2.webp);
    background-size: cover
}

.banner:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    content: ""
}

.banner .details-banner {
    position: relative
}

.banner .details-banner p {
    color: #dcdcd7;
    font-size: calc(.38953rem + 2.32558vw);
    text-align: center
}

@media screen and (min-width:1280px) {
    .banner .details-banner p {
        font-size: 2.25rem
    }
}

@media screen and (max-width:420px) {
    .banner .details-banner p {
        font-size: 1rem
    }
}

.banner .details-banner .top {
    padding-bottom: 3vh;
    padding-bottom: calc(var(--vh, 1vh)*3)
}

.banner .details-banner .top .name {
    color: #fafaf2;
    font-weight: 800
}

.banner .details-banner .meddle {
    width: 400px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    border-radius: 12px
}

.banner .details-banner .meddle img {
    -webkit-box-shadow: 0 0 20px hsla(47, 78%, 68%, .4);
    -o-object-fit: cover;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 0 20px hsla(47, 78%, 68%, .4)
}

.banner .details-banner .bottom {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4vh 0;
    padding: calc(var(--vh, 1vh)*4) 0
}

.banner .details-banner .bottom p {
    font-size: calc(.75581rem + .93023vw)
}

@media screen and (min-width:1280px) {
    .banner .details-banner .bottom p {
        font-size: 1.5rem
    }
}

@media screen and (max-width:420px) {
    .banner .details-banner .bottom p {
        font-size: 1rem
    }
}

.banner .details-banner .bottom audio {
    margin-top: 3vh !important;
    margin-top: calc(var(--vh, 1vh)*3) !important
}

audio::-webkit-media-controls-panel {
    background-color: #db9e30
}

audio::-webkit-media-controls-play-button {
    border-radius: 50%;
    background-color: #edd170
}

audio::-webkit-media-controls-current-time-display, audio::-webkit-media-controls-time-remaining-display {
    color: #333
}

audio::-webkit-media-controls-mute-button {
    border-radius: 50%;
    background-color: #edd170
}

.quran {
    width: 100%;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh)*100);
    padding-top: 8vh;
    padding-top: calc(var(--vh, 1vh)*8);
    background-color: #fff
}

.quran .flip-book-container {
    width: 100%;
    height: 80vh;
    height: calc(var(--vh, 1vh)*80)
}

.quran .flip-book-container iframe {
    width: 100%;
    height: 100%
}

.main-heading {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -ms-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 8vh;
    padding-bottom: calc(var(--vh, 1vh)*8)
}

.main-heading p {
    position: relative;
    padding: .9vh;
    padding: calc(var(--vh, 1vh)*.9);
    color: #2f1e01;
    font-weight: 800;
    font-size: calc(.38953rem + 2.32558vw)
}

@media screen and (min-width:1280px) {
    .main-heading p {
        font-size: 2.25rem
    }
}

@media screen and (max-width:420px) {
    .main-heading p {
        font-size: 1rem
    }
}

.main-heading p span {
    color: #db9e30
}

.main-heading p:hover:after, .main-heading p:hover:before {
    width: 100%;
    height: 100%;
    content: ""
}

.main-heading p:hover:before {
    top: 3px;
    left: 3px
}

.main-heading p:hover:after {
    right: 3px;
    bottom: 3px
}

.main-heading p:after, .main-heading p:before {
    -webkit-transition: .3s ease-out;
    width: 30px;
    height: 30px;
    content: "";
    transition: .3s ease-out
}

.main-heading p:before {
    position: absolute;
    top: -5px;
    left: -15px;
    border-top: 2px solid #db9e30;
    border-left: 2px solid #db9e30
}

.main-heading p:after {
    position: absolute;
    right: -15px;
    bottom: -5px;
    border-right: 2px solid #db9e30;
    border-bottom: 2px solid #db9e30
}

.rosary {
    width: 100%;
    min-height: 80vh;
    min-height: calc(var(--vh, 1vh)*80);
    padding-top: 10vh;
    padding-top: calc(var(--vh, 1vh)*10);
    background: url(../assets/img/bg-section-featuredsermons.webp)
}

.rosary .RE {
    padding-top: 2vh;
    padding-top: calc(var(--vh, 1vh)*2)
}

.rosary .RE .box-rosary {
    margin-bottom: 2vh;
    margin-bottom: calc(var(--vh, 1vh)*2);
    padding: 1.5vh;
    padding: calc(var(--vh, 1vh)*1.5);
    border-radius: 12px;
    background-color: #f1ecec
}

.rosary .RE .box-rosary .top {
    border-radius: 8px;
    background-color: #db9e30
}

.rosary .RE .box-rosary .top .name-rosary {
    padding: 12px 15px;
    color: #fafaf2;
    font-weight: 800;
    font-size: calc(.47529rem + 1.04651vw);
    text-align: center
}

@media screen and (min-width:1280px) {
    .rosary .RE .box-rosary .top .name-rosary {
        font-size: 1.3125rem
    }
}

@media screen and (max-width:420px) {
    .rosary .RE .box-rosary .top .name-rosary {
        font-size: .75rem
    }
}

.rosary .RE .box-rosary .meddle {
    padding-top: 2.5vh;
    padding-top: calc(var(--vh, 1vh)*2.5)
}

.rosary .RE .box-rosary .meddle .numberRosary {
    padding-bottom: 2.5vh;
    padding-bottom: calc(var(--vh, 1vh)*2.5);
    color: #2f1e01;
    font-weight: 800;
    font-size: calc(.02326rem + 3.72093vw);
    text-align: center
}

@media screen and (min-width:1280px) {
    .rosary .RE .box-rosary .meddle .numberRosary {
        font-size: 3rem
    }
}

@media screen and (max-width:420px) {
    .rosary .RE .box-rosary .meddle .numberRosary {
        font-size: 1rem
    }
}

.rosary .RE .box-rosary .meddle button {
    width: 44%;
    max-width: 100%;
    padding: 10px 15px;
    border: 0;
    border-radius: 8px;
    outline: 0;
    color: #fff;
    font-weight: 600;
    font-size: calc(.62791rem + .46512vw);
    text-align: center;
    cursor: pointer
}

@media screen and (min-width:1280px) {
    .rosary .RE .box-rosary .meddle button {
        font-size: 1rem
    }
}

@media screen and (max-width:420px) {
    .rosary .RE .box-rosary .meddle button {
        font-size: .75rem
    }
}

@media (max-width:380px) {
    .rosary .RE .box-rosary .meddle button {
        padding: 10px 8px
    }
}

.rosary .RE .box-rosary .meddle .edit {
    margin-right: auto;
    background-color: #5f9ea0
}

.rosary .RE .box-rosary .meddle .delete {
    margin-right: 2vh;
    margin-right: calc(var(--vh, 1vh)*2);
    background-color: #d54545
}

@media (max-width:380px) {
    .rosary .RE .box-rosary .meddle .delete {
        margin-right: .9vh;
        margin-right: calc(var(--vh, 1vh)*.9)
    }
}

.prayer {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh)*100);
    padding-top: 10vh;
    padding-top: calc(var(--vh, 1vh)*10)
}

.prayer .all-image .img-prayer {
    position: absolute;
    width: 350px;
    max-width: 100%
}

.prayer .all-image .img-prayer img {
    -o-object-fit: contain;
    width: 100%;
    object-fit: contain;
    opacity: .5
}

.prayer .all-image .img-1 {
    top: 0;
    right: 0
}

.prayer .all-image .img-2 {
    top: 0;
    left: 0
}

.prayer .all-image .img-3 {
    bottom: 0;
    left: 0
}

.prayer .all-image .img-4 {
    right: 0;
    bottom: 0
}

.prayer .swiper {
    position: relative;
    width: 100%;
    min-height: 50vh;
    min-height: calc(var(--vh, 1vh)*50);
    padding: 5vh;
    padding: calc(var(--vh, 1vh)*5)
}

.prayer .swiper .swiper-slide {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    text-align: center
}

.prayer .swiper .swiper-slide .do3a {
    position: relative;
    width: 75%;
    max-width: 100%;
    padding: 8vh 4vh;
    padding: calc(var(--vh, 1vh)*8) calc(var(--vh, 1vh)*4);
    border: 2px solid #edd170;
    border-radius: 10px;
    color: #383737;
    font-weight: 600;
    font-size: calc(.63372rem + 1.39535vw);
    line-height: 1.8
}

@media screen and (min-width:1280px) {
    .prayer .swiper .swiper-slide .do3a {
        font-size: 1.75rem
    }
}

@media screen and (max-width:420px) {
    .prayer .swiper .swiper-slide .do3a {
        font-size: 1rem
    }
}

.prayer .swiper .swiper-slide .do3a:before {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 80px;
    height: 80px;
    padding-bottom: 2vh;
    padding-bottom: calc(var(--vh, 1vh)*2);
    background-color: #fafaf2;
    content: "\f10d";
    color: #db9e30;
    font-size: 2.8125rem;
    font-family: fontawesome
}

.swiper-button-next, .swiper-button-prev {
    -webkit-transition: .3s ease-out;
    width: 60px !important;
    height: 60px !important;
    border: 2px solid #db9e30;
    border-radius: 50%;
    color: #db9e30 !important;
    transition: .3s ease-out
}
/* width */
::-webkit-scrollbar {
    width: 6px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #c4c4c4;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #db9e30;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: #cc932c;
}
.swiper-button-next:after, .swiper-button-prev:after {
    font-size: 2.375rem !important;
    line-height: 0 !important
}

.swiper-button-next:hover, .swiper-button-prev:hover {
    border: 1px solid transparent;
    background-color: #db9e30;
    color: #fafaf2 !important
}

.select2-selection{
    height: 40px !important;
    text-align: center !important;
    padding-top: 4px !important;
}

.select2-selection__arrow{
    top: 6px !important;
}

.whatapp {
    z-index: 9999;
    position: fixed;
    right: 20px;
    bottom: 20px
}

.whatapp a {
    padding: 1vh;
    padding: calc(var(--vh, 1vh)*1);
    border-radius: 12px;
    background-color: #20c95e;
    color: #fff;
    font-size: calc(.56686rem + .69767vw)
}

@media screen and (min-width:1280px) {
    .whatapp a {
        font-size: 1.125rem
    }
}

@media screen and (max-width:420px) {
    .whatapp a {
        font-size: .75rem
    }
}

.whatapp a i {
    padding-left: 1vh;
    padding-left: calc(var(--vh, 1vh)*1);
    font-size: calc(.87791rem + .46512vw)
}

@media screen and (min-width:1280px) {
    .whatapp a i {
        font-size: 1.25rem
    }
}

@media screen and (max-width:420px) {
    .whatapp a i {
        font-size: 1rem
    }
}

.break-jump {
    position: relative;
    width: 100%;
    min-height: 30vh;
    min-height: calc(var(--vh, 1vh)*30);
    padding-top: 10vh;
    padding-top: calc(var(--vh, 1vh)*10);
    background: url(../assets/img/banner-1.webp) 50%;
    background-size: cover
}

.break-jump:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .4);
    content: ""
}

.break-jump .break {
    -webkit-transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.break-jump .break ul {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    align-items: center
}

.break-jump .break ul li:nth-child(2) {
    padding: 0 1.5vh;
    padding: 0 calc(var(--vh, 1vh)*1.5)
}

.break-jump .break ul a, .break-jump .break ul li {
    color: #fafaf2;
    font-size: calc(.75581rem + .93023vw)
}

@media screen and (min-width:1280px) {
    .break-jump .break ul a, .break-jump .break ul li {
        font-size: 1.5rem
    }
}

@media screen and (max-width:420px) {
    .break-jump .break ul a, .break-jump .break ul li {
        font-size: 1rem
    }
}

.break-jump .break ul a {
    color: #db9e30
}

.break-jump .break ul a:hover {
    color: #edd170
}

.radio {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh)*100);
    padding-top: 10vh;
    padding-top: calc(var(--vh, 1vh)*10);
    background: url(../assets/img/banner-3.webp) 50%;
    background-size: cover
}

.radio:before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    content: ""
}

.radio .audio-section {
    -webkit-transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.radio .audio-section img {
    -o-object-fit: contain;
    width: 100%;
    height: 320px;
    object-fit: contain;
    opacity: .5
}

.radio .audio-section audio {
    width: 100%;
    margin-top: 6vh;
    margin-top: calc(var(--vh, 1vh)*6)
}

.radio .main-heading {
    padding-bottom: 2vh;
    padding-bottom: calc(var(--vh, 1vh)*2)
}

.radio .main-heading p {
    color: #fff
}

.footer {
    width: 100%;
    min-height: 5vh;
    min-height: calc(var(--vh, 1vh)*5);
    padding: 2vh 0;
    padding: calc(var(--vh, 1vh)*2) 0;
    text-align: center
}

.footer p {
    color: #575757;
    font-size: calc(.75291rem + .46512vw)
}

@media screen and (min-width:1280px) {
    .footer p {
        font-size: 1.125rem
    }
}

@media screen and (max-width:420px) {
    .footer p {
        font-size: .875rem
    }
}

.footer p a {
    color: #575757
}

.footer p a:hover {
    color: #db9e30
}

.contact {
    width: 100%;
    min-height: 80Vh;
    padding-top: 10vh;
    padding-top: calc(var(--vh, 1vh)*10)
}

.contact .text p {
    color: #605e5e;
    font-weight: 600;
    font-size: calc(.47529rem + 1.04651vw);
    line-height: 1.7
}

@media screen and (min-width:1280px) {
    .contact .text p {
        font-size: 1.3125rem
    }
}

@media screen and (max-width:420px) {
    .contact .text p {
        font-size: .75rem
    }
}

.contact .img {
    width: 100%;
    height: 250px
}

.contact .img img {
    -o-object-fit: contain;
    width: 100%;
    height: 100%;
    object-fit: contain
}

.contact .social-icon {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 3vh;
    padding-top: calc(var(--vh, 1vh)*3)
}

.contact .social-icon li {
    padding-right: 2vh;
    padding-right: calc(var(--vh, 1vh)*2)
}

.contact .social-icon li a {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background-color: #db9e30;
    color: #fff;
    font-size: 1.125rem
}

.contact .social-icon li a:hover {
    background-color: #edd170
}

.auth {
    position: relative;
    background-color: #fff
}

.auth:before {
    -webkit-filter: blur(150px);
    position: absolute;
    width: 500px;
    height: 500px;
    inset: 50px 100px 0 0;
    border-radius: 50%;
    background-image: -webkit-gradient(linear, left top, right bottom, from(#fff), to(#db9e30));
    background-image: linear-gradient(to bottom right, #fff, #db9e30);
    content: "";
    filter: blur(150px);
    opacity: .4
}

.auth.login {
    min-height: 85vh;
    min-height: calc(var(--vh, 1vh)*85)
}

.auth.login, .auth.signUp {
    width: 100%;
    padding-top: 10vh;
    padding-top: calc(var(--vh, 1vh)*10)
}

.auth.signUp {
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh)*100);
    padding-bottom: 8vh;
    padding-bottom: calc(var(--vh, 1vh)*8)
}

.auth .AuthForm {
    -webkit-box-shadow: 0 15px 1.25rem rgba(47, 30, 1, .4);
    position: relative;
    width: min(800px, 100%);
    margin-right: auto;
    margin-left: auto;
    padding: 20px;
    border-top: 4px solid #edd170;
    border-radius: 20px;
    background-color: #fff;
    box-shadow: 0 15px 1.25rem rgba(47, 30, 1, .4);
    /*  */
    display: grid;
    grid-template-columns: repeat(2 , 1fr);
    gap: 10px;
}

.auth .AuthForm .form-group {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-align: start;
    -ms-flex-align: start;
    -ms-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: flex-start;
    margin-bottom: 15px
}

.auth .AuthForm .form-group label {
    padding: 5px 10px;
    color: #2f1e01;
    font-weight: 700;
    font-size: 1rem;
    opacity: .8
}

.auth .AuthForm .form-group input {
    -webkit-transition: .3s ease-out;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding-right: 10px;
    padding-left: 10px;
    border: 1px solid silver;
    border-radius: 8px;
    background-color: transparent;
    background-color: #fafaf2;
    font-size: 1.2rem;
    transition: .3s ease-out
}

.auth .AuthForm .form-group input:focus {
    -webkit-box-shadow: 0 0 15px rgba(219, 158, 48, .6);
    border-color: #db9e30;
    outline: none;
    box-shadow: 0 0 15px rgba(219, 158, 48, .6)
}

.auth .AuthForm .form-group input::-webkit-input-placeholder {
    font-size: 1rem
}

.auth .AuthForm .form-group input::-moz-placeholder {
    font-size: 1rem
}

.auth .AuthForm .form-group input:-ms-input-placeholder {
    font-size: 1rem
}

.auth .AuthForm .form-group input::-ms-input-placeholder {
    font-size: 1rem
}

.auth .AuthForm .form-group input::placeholder {
    font-size: 1rem
}

.auth .AuthForm .btn-auth.btn-base {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin: 25px auto 0;
    padding: 10px 15px;
    grid-column: 1 / -1;
}

.auth .AuthForm .goToSignUp {
    margin-top: 25px;
    color: rgba(47, 30, 1, .8);
    font-weight: 700;
    text-align: center;
    grid-column: 1 / -1;
}

.auth .AuthForm .goToSignUp a {
    -webkit-transition: .3s ease-out;
    padding-inline: 5px;
    color: rgba(47, 30, 1, .8);
    transition: .3s ease-out
}

.auth .AuthForm .goToSignUp a:hover {
    color: #db9e30
}

.MyAccount {
    width: 100%;
    min-height: 80vh;
    min-height: calc(var(--vh, 1vh)*80);
    padding-top: 10vh;
    padding-top: calc(var(--vh, 1vh)*10)
}

.MyAccount .MyAccountLayout {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 25px
}

@media (max-width:991px) {
    .MyAccount .MyAccountLayout {
        grid-template-rows: auto 1fr;
        grid-template-columns: 1fr
    }
}

.MyAccount .accountSideBar .accountList {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    border: 1px solid #ccc;
    border-radius: 16px
}

.MyAccount .accountSideBar .accountList li a {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-transition: .25s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    padding-inline: 16px;
    padding-block: 12px;
    gap: 6px;
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    color: #2f1e01;
    font-weight: 600;
    opacity: .8;
    transition: .25s ease-in-out
}

.MyAccount .accountSideBar .accountList li a.logOut i {
    color: #d82929
}

.MyAccount .accountSideBar .accountList li a i {
    -webkit-transition: .25s ease-in-out;
    color: #db9e30;
    font-size: 1.125rem;
    transition: .25s ease-in-out
}

.MyAccount .accountSideBar .accountList li a.active, .MyAccount .accountSideBar .accountList li a:hover {
    background-color: #db9e30;
    color: #fff
}

.MyAccount .accountSideBar .accountList li a.active i, .MyAccount .accountSideBar .accountList li a:hover i {
    color: #fff
}

@media (max-width:991px) {
    .MyAccount .accountSideBar .accountList {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-flow: row wrap;
        -ms-flex-direction: row;
        flex-direction: row;
        flex-flow: row wrap
    }

    .MyAccount .accountSideBar .accountList li {
        -webkit-box-flex: 120px;
        -ms-flex: 120px 1;
        flex: 120px 1
    }

    .MyAccount .accountSideBar .accountList li a {
        text-wrap: nowrap;
        font-size: .875rem
    }
}

.MyAccount .editForm {
    display: grid;
    grid-template-rows: 1fr 1fr auto;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
    gap: 16px
}

.MyAccount .editForm .btn-auth {
    grid-column: 1/3
}

.MyAccount .editForm .btn-auth.btn-base {
    margin: 10px auto 0
}

@media (max-width:991px) {
    .MyAccount .editForm {
        display: block
    }
}

.MyAccount .deadsCard {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px
}

.MyAccount .deadsCard .btn-add {
    grid-column: 1/-1;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    padding: 10px 25px
}

@media (max-width:380px) {
    .MyAccount .deadsCard {
        grid-template-columns: repeat(auto-fill, minmax(100%, 1fr))
    }
}

.MyAccount .deadsCard .cardDead {
    position: relative;
    padding: 12px;
    overflow: hidden;
    border-radius: 12px;
    background-color: #ededed
}

.MyAccount .deadsCard .cardDead .btn-copy {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-transform: scale(.9);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    position: absolute;
    top: 10px;
    right: 10px;
    align-items: center;
    justify-content: center;
    padding: 5px 8px;
    transform: scale(.9);
    border-radius: 4px;
    font-weight: 500;
    font-size: .875rem
}

.MyAccount .deadsCard .cardDead .btn-copy i {
    -webkit-padding-end: 5px;
    padding-inline-end: 5px;
    font-size: 1.125rem;
    line-height: 1.125rem
}

.MyAccount .deadsCard .cardDead .cardImg {
    height: clamp(200px, 25vw + 2rem, 250px);
    border-radius: 8px
}

.MyAccount .deadsCard .cardDead .cardImg img {
    -o-object-fit: contain;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 8px
}

.MyAccount .deadsCard .cardDead p {
    -webkit-padding-before: 12px;
    padding-block-start: 12px;
    font-weight: 700;
    text-align: center;
    opacity: .8
}

.MyAccount .deadsCard .cardDead .deadName {
    padding-block: 6px;
    color: #2f1e01;
    font-weight: 700;
    font-size: 1.125rem;
    text-align: center
}

.MyAccount .deadsCard .cardDead a {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0
}

.MyAccount .deadsCard .cardDead .actionBtn {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-flex-pack: distribute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 2;
    position: relative;
    align-items: center;
    justify-content: space-around;
    margin-block: 8px
}

.MyAccount .deadsCard .cardDead .actionBtn .btn-accept, .MyAccount .deadsCard .cardDead .actionBtn .btn-reject {
    -ms-flex-preferred-size: 50%;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    flex-basis: 50%;
    padding: 6px 0
}

.MyAccount .model {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-backdrop-filter: blur(2px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 9999;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    inset: 0;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, .2)
}

.MyAccount .model.open .addDead, .MyAccount .model.open .visitors {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.MyAccount .model .addDead {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    grid-template-columns: repeat(2, 1fr);
    min-height: 600px;
    gap: 16px
}

@media (max-width:767px) {
    .MyAccount .model .addDead {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr;
        width: 100%;
        padding: 20px;
        overflow-y: auto
    }
}

.MyAccount .model .addDead .uploadImg {
    position: relative;
    grid-column: 1/-1;
    height: 250px;
    padding: 15px;
    border: 3px dashed #ccc;
    border-radius: 15px
}

@media (max-width:350px) {
    .MyAccount .model .addDead .uploadImg {
        height: 100%
    }
}

.MyAccount .model .addDead .uploadImg img {
    -o-object-fit: contain;
    object-fit: contain
}

.MyAccount .model .addDead .uploadImg label {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    cursor: pointer
}

.MyAccount .model .addDead .uploadImg input[type=file] {
    display: none
}

.MyAccount .model .addDead .form-group label {
    -webkit-padding-start: 5px;
    padding-inline-start: 5px
}

.MyAccount .model .addDead .form-group input {
    -webkit-transition: .3s ease-out;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding-right: 10px;
    padding-left: 10px;
    border: 1px solid silver;
    border-radius: 8px;
    background-color: transparent;
    background-color: #fafaf2;
    font-size: 1.2rem;
    transition: .3s ease-out
}

.MyAccount .model .addDead .form-group input:focus {
    -webkit-box-shadow: 0 0 15px rgba(219, 158, 48, .6);
    border-color: #db9e30;
    outline: none;
    box-shadow: 0 0 15px rgba(219, 158, 48, .6)
}

.MyAccount .model .addDead .form-group input::-webkit-input-placeholder {
    font-size: 1rem
}

.MyAccount .model .addDead .form-group input::-moz-placeholder {
    font-size: 1rem
}

.MyAccount .model .addDead .form-group input:-ms-input-placeholder {
    font-size: 1rem
}

.MyAccount .model .addDead .form-group input::-ms-input-placeholder {
    font-size: 1rem
}

.MyAccount .model .addDead .form-group input::placeholder {
    font-size: 1rem
}

.MyAccount .model .addDead .Gender {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -ms-flex-pack: distribute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    grid-column: 1/-1;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    gap: 16px
}

.MyAccount .model .addDead .genderType {
    position: relative;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background-color: #fff;
    text-align: center
}

.MyAccount .model .addDead .genderType img {
    height: 80px
}

.MyAccount .model .addDead .genderType input[type=radio] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer
}

.MyAccount .model .addDead .genderType input[type=radio]:checked {
    border-color: #db9e30;
    background-color: rgba(219, 158, 48, .2)
}

.MyAccount .model .addDead .btn-addModel {
    grid-column: 1/-1;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    padding: 10px 15px
}


.MyAccount .tableScroll {
    width: 100%
}

@media (max-width:767px) {
    .MyAccount .tableScroll {
        overflow-x: auto
    }
}

.MyAccount .rememberDeadT {
    width: 100%;
    max-width: 100%;
    height: 0;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center
}

.MyAccount .rememberDeadT th {
    white-space: nowrap
}

.MyAccount .rememberDeadT thead {
    height: 7vh;
    height: calc(var(--vh, 1vh)*7);
    border: none;
    border-bottom: 1px solid #ccc;
    background-color: #e5e5e5
}

.MyAccount .rememberDeadT thead th {
    padding-inline: 25px
}

.MyAccount .rememberDeadT tbody tr {
    border-bottom: 1px solid #ccc
}

.MyAccount .rememberDeadT tbody tr .massage {
    text-wrap: balance;
    max-height: 200px;
    font-size: calc(.62791rem + .46512vw)
}

@media screen and (min-width:1280px) {
    .MyAccount .rememberDeadT tbody tr .massage {
        font-size: 1rem
    }
}

@media screen and (max-width:420px) {
    .MyAccount .rememberDeadT tbody tr .massage {
        font-size: .75rem
    }
}

@media (max-width:767px) {
    .MyAccount .rememberDeadT tbody tr .massage {
        display: block;
        overflow-y: auto;
        white-space: pre-wrap;
        word-break: break-word
    }
}

.MyAccount .rememberDead tbody tr .massage::-webkit-scrollbar {
    width: 6px
}

.MyAccount .rememberDeadT tbody tr .massage::-webkit-scrollbar-thumb {
    height: 180px;
    border-radius: 8px;
    background-color: #db9e30
}

.MyAccount .rememberDeadT tbody tr:nth-child(2n) {
    background-color: #e5e5e5
}

.MyAccount .rememberDeadT tbody tr td {
    padding-block: 15px;
    vertical-align: top
}

.MyAccount .rememberDeadT tbody tr td.accept {
    color: #3292e0
}

.MyAccount .rememberDeadT tbody tr td.reject {
    color: #e03232
}

.MyAccount .rememberDeadT tbody tr td.buttons .btn-accept, .MyAccount .rememberDeadT tbody tr td.buttons .btn-reject {
    padding: 5px 8px;
    font-size: .875rem
}

.rememberDead {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh)*100);
    padding-top: 10vh;
    padding-top: calc(var(--vh, 1vh)*10);
    background: url(../assets/img/bg-section-featuredsermons.webp) no-repeat fixed;
    background-size: cover
}

.rememberDead .allComment {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px
}

@media (max-width:767px) {
    .rememberDead .allComment {
        grid-template-columns: 1fr
    }
}

.rememberDead .allComment .comment {
    height: 185px;
    padding: 20px;
    border-radius: 20px;
    background-color: #e0e0e0
}

.rememberDead .allComment .comment .userDetails {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    padding-bottom: 15px;
    gap: 8px
}

.rememberDead .allComment .comment .userDetails .userImg {
    width: 55px;
    height: 55px;
    padding-top: 5px;
    border-radius: 50%;
    background-color: #989898
}

.rememberDead .allComment .comment .userDetails .userImg img {
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 50%
}

.rememberDead .allComment .comment .userDetails .userInfo {
    color: #2f1e01
}

.rememberDead .allComment .comment .userDetails .userInfo .name {
    padding-bottom: 5px;
    font-weight: 600;
    font-size: 1rem
}

.rememberDead .allComment .comment .userDetails .userInfo .time {
    font-weight: 500;
    font-size: .875rem;
    opacity: .8
}

.rememberDead .allComment .comment .userDetails .userInfo .time i {
    -webkit-padding-end: 5px;
    padding-inline-end: 5px;
    color: #db9e30;
    font-size: 1.125rem
}

.rememberDead .allComment .comment .UserComment {
    height: 75px;
    overflow: hidden
}

.rememberDead .allComment .comment .btn-more {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-transition: .3s ease-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin: 8px 0;
    gap: 4px;
    color: #2f1e01;
    font-size: 1rem;
    cursor: pointer;
    transition: .3s ease-out
}

.rememberDead .allComment .comment .btn-more i {
    font-size: .875rem;
    line-height: .875rem
}

.rememberDead .allComment .comment .btn-more:hover {
    color: #db9e30
}

.rememberDead .allComment .comment .btn-more.hide {
    display: none
}

.rememberDead .btnModel {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-inline: auto;
    margin-block: 15px
}

.rememberDead .btnModel .btn-base {
    padding: 10px 20px
}

.rememberDead .model {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-backdrop-filter: blur(2px);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 9999;
    position: fixed;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    inset: 0;
    backdrop-filter: blur(2px);
    background-color: rgba(0, 0, 0, .2)
}

.rememberDead .model .container {
    width: 100%
}

.rememberDead .model.open .addDead {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1
}

.rememberDead .model .addDead {
    -webkit-transform: scale(0);
    -webkit-transition: .3s ease-out;
    position: relative;
    width: min(700px, 100%);
    min-height: 330px;
    margin: 0 auto;
    padding: 40px 35px;
    transform: scale(0);
    border-radius: 30px;
    background-color: #efefef;
    opacity: 0;
    transition: .3s ease-out
}

.rememberDead .model .addDead .btn-close {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    position: absolute;
    top: 10px;
    left: 10px;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: #db9e30;
    cursor: pointer
}

.rememberDead .model .addDead .btn-close i {
    color: #fff;
    font-size: 1.125rem;
    line-height: 1.125rem
}

.rememberDead .model .addDead .form-group {
    width: 100%;
    margin-bottom: 16px
}

.rememberDead .model .addDead .form-group label {
    -webkit-padding-start: 5px;
    -webkit-padding-after: 5px;
    padding-inline-start: 5px;
    padding-block-end: 5px
}

.rememberDead .model .addDead .form-group input, .rememberDead .model .addDead .form-group textarea {
    -webkit-transition: .3s ease-out;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding-right: 10px;
    padding-left: 10px;
    border: 1px solid silver;
    border-radius: 8px;
    background-color: transparent;
    background-color: #fafaf2;
    font-size: 1.2rem;
    font-size: .875rem;
    transition: .3s ease-out
}

.rememberDead .model .addDead .form-group input:focus, .rememberDead .model .addDead .form-group textarea:focus {
    -webkit-box-shadow: 0 0 15px rgba(219, 158, 48, .6);
    border-color: #db9e30;
    outline: none;
    box-shadow: 0 0 15px rgba(219, 158, 48, .6)
}

.rememberDead .model .addDead .form-group input::-webkit-input-placeholder, .rememberDead .model .addDead .form-group textarea::-webkit-input-placeholder {
    font-size: .875rem
}

.rememberDead .model .addDead .form-group input::-moz-placeholder, .rememberDead .model .addDead .form-group textarea::-moz-placeholder {
    font-size: .875rem
}

.rememberDead .model .addDead .form-group input:-ms-input-placeholder, .rememberDead .model .addDead .form-group textarea:-ms-input-placeholder {
    font-size: .875rem
}

.rememberDead .model .addDead .form-group input::-ms-input-placeholder, .rememberDead .model .addDead .form-group textarea::-ms-input-placeholder {
    font-size: .875rem
}

.rememberDead .model .addDead .form-group input::placeholder, .rememberDead .model .addDead .form-group textarea::placeholder {
    font-size: .875rem
}

.rememberDead .model .addDead .form-group textarea {
    height: 150px;
    padding-top: 5px
}

.rememberDead .model .addDead .btn-addModel {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    padding: 10px 15px
}

@font-face {
    font-style: normal;
    font-weight: 400;
    src: url(../assets/webfonts/SurahNameEjazahstyle-Regular.woff2) format("woff2");
    font-family: SurahName;
    font-display: swap
}

.quranListan {
    width: 100%;
  min-height: 100vh;
    min-height: calc(var(--vh, 1vh)*100);
    padding-top: 3vh;
    padding-top: calc(var(--vh, 1vh)*3)
}

.quranListan .sectionTop {
    -webkit-box-align: center;
    -ms-flex-align: center;
    display: grid;
    grid-template-columns: 1.2fr .8fr;
    align-items: center
}

.quranListan .sectionTop .audioPlayer {
    -webkit-transform: scale(.4);
    -webkit-transition: .3s ease-out;
    transform: scale(.4);
    text-align: center;
    opacity: 0;
    transition: .3s ease-out
}

.quranListan .sectionTop .audioPlayer h4 {
    color: #2f1e01;
    font-size: 2.4rem;
    line-height: normal;
    font-family: SurahName
}

.quranListan .sectionTop .audioPlayer.open {
    -webkit-transform: scale(1);
    display: block;
    transform: scale(1);
    opacity: 1
}

.quranListan .sectionTop .audioPlayer audio {
    width: min(100%, 500px);
    height: 48px
}

.quranListan{
    background: url(../assets/img/bg-section-featuredsermons.webp) no-repeat fixed;
    background-size: cover;
}

@media (max-width:768px) {
    .quranListan .sectionTop {
        grid-template-columns: 1fr
    }

    .quranListan .sectionTop .audioPlayer {
        text-align: start
    }
}

.quranListan .formGroup {
    width: min(100%, 300px)
}

.quranListan .formGroup label {
    -webkit-padding-after: 5px;
    -webkit-padding-start: 10px;
    display: inline-block;
    padding-inline-start: 10px;
    padding-block-end: 5px;
    color: #2f1e01;
    font-weight: 600;
    font-size: 1.1rem
}

.quranListan .formGroup select {
    -webkit-transition: .3s ease-out;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding-right: 10px;
    padding-left: 10px;
    border: 1px solid silver;
    border-radius: 8px;
    background-color: transparent;
    color: #2f1e01;
    font-size: 1.2rem;
    transition: .3s ease-out
}

.quranListan .formGroup select:focus {
    -webkit-box-shadow: 0 10px 20px rgba(47, 30, 1, .1);
    border-color: #db9e30;
    outline: none;
    box-shadow: 0 10px 20px rgba(47, 30, 1, .1)
}

.quranListan .surahList {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    margin-top: 3vh;
    margin-top: calc(var(--vh, 1vh)*3);
    gap: 10px
}

.quranListan .surahList .surahItem {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-transition: .3s ease-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    gap: 10px;
    border: 1px solid #b9b9b0;
    border-radius: 6px;
    transition: .3s ease-out
}

.quranListan .surahList .surahItem h5 {
    color: #2f1e01;
    font-size: 2.4rem;
    line-height: normal;
    font-family: SurahName
}

.quranListan .surahList .surahItem .number {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-transform: rotate(45deg);
    -webkit-transition: .3s ease-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    transform: rotate(45deg);
    border-radius: 4px;
    background-color: #f0f0e6;
    transition: .3s ease-out
}

.quranListan .surahList .surahItem .number span {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    font-weight: 600;
    font-size: 1.25rem;
    opacity: .8
}

.quranListan .surahList .surahItem .ayah {
    -webkit-transition: .3s ease-out;
    font-weight: 600;
    font-size: .9rem;
    opacity: .7;
    transition: .3s ease-out
}

.quranListan .surahList .surahItem a {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0
}

.quranListan .surahList .surahItem:hover {
    border-color: #edd170
}

.quranListan .surahList .surahItem:hover .number {
    background-color: #edd170
}

.quranListan .surahList .surahItem:hover .number span {
    color: #fff
}

.quranListan .surahList .surahItem:hover .ayah {
    color: #edd170;
    opacity: 1
}

.quranListan .surahList .surahItem.selekton {
    -webkit-animation: shimmer 2s ease-in-out infinite;
    height: 82px;
    overflow: hidden;
    border: none;
    background-color: #f5f5f5;
    animation: shimmer 2s ease-in-out infinite
}

.quranListan .surahList .surahItem.selekton .name.selekton, .quranListan .surahList .surahItem.selekton .number.selekton {
    -webkit-animation: shimmer 2s ease-in-out infinite;
    background-color: rgba(209, 213, 219, .7);
    animation: shimmer 2s ease-in-out infinite
}

.quranListan .surahList .surahItem.selekton .name.selekton {
    width: 50%;
    height: 15px;
    border-radius: 16px
}

@-webkit-keyframes shimmer {
    0% {
        opacity: 1
    }

    50% {
        opacity: .7
    }

    to {
        opacity: 1
    }
}

@keyframes shimmer {
    0% {
        opacity: 1
    }

    50% {
        opacity: .7
    }

    to {
        opacity: 1
    }
}

.loading {
    display: none !important
}

.loading.loaded {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important
}

.model {
    -webkit-backdrop-filter: blur(4px);
    -webkit-transition: opacity .25s ease-in-out;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 99999;
    position: fixed;
    place-items: center;
    width: 100%;
    height: 100vh;
    height: calc(var(--vh, 1vh)*100);
    inset: 0;
    backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
    transition: opacity .25s ease-in-out
}

.model .notifications {
    position: relative;
    width: min(600px, 95%);
    margin-inline: auto;
padding: 2rem;
    border-radius: 1rem;
    background-color: #fafaf2
}

.model .notifications .notifyTop .notifyImg {
    width: 150px;
    margin-inline: auto
}

.model .notifications .notifyTop h6 {
    padding-block: 8px;
    color: #2f1e01;
    font-size: clamp(1rem, .857rem + .714vw, 1.5rem);
    text-align: center
}

.model .notifications .notifyBottom .formGroup {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
    margin-bottom: .5rem;
    gap: .2rem
}

.model .notifications .notifyBottom .formGroup input {
    -webkit-transition: .3s ease-out;
    width: 100%;
    max-width: 100%;
    height: 48px;
    padding-right: 10px;
    padding-left: 10px;
    border: 1px solid silver;
    border-radius: 8px;
    background-color: transparent;
    font-size: 1.2rem;
    transition: .3s ease-out
}

.model .notifications .notifyBottom .formGroup input:focus {
    outline: none
}

.model .notifications .notifyBottom .formGroup input::-webkit-input-placeholder {
    font-size: .875rem
}

.model .notifications .notifyBottom .formGroup input::-moz-placeholder {
    font-size: .875rem
}

.model .notifications .notifyBottom .formGroup input:-ms-input-placeholder {
    font-size: .875rem
}

.model .notifications .notifyBottom .formGroup input::-ms-input-placeholder {
    font-size: .875rem
}

.model .notifications .notifyBottom .formGroup input::placeholder {
    font-size: .875rem
}

.model .notifications .notifyBottom .formGroup label {
    padding-right: 10px;
    color: #2f1e01;
    font-size: 1.125rem
}

.model .notifications .notifyBottom .btn-base {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: 1rem;
    margin-inline: auto;
    padding: .4em .8em
}

.model .notifications .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px
}

.model.open {
    opacity: 1
}

.model.open .notifications {
    -webkit-transform: scale(1);
    -webkit-transition: .4s ease-in-out;
    transform: scale(1);
    opacity: 1;
    transition: .4s ease-in-out
}
.rememberDead .allComment .comment .UserComment {
    width: 100%;
  max-width: 600px; /* Adjust as needed */
  margin: 0 auto;
}
.rememberDead .allComment .comment .UserComment p {
    word-wrap: break-word;
    overflow-wrap: break-word;}
.rememberDead .noComment{
    width:500px;
    height:500px;
    margin-inline:auto
}
.rememberDead .noComment .commentImg{
    width:90%;
    height:90%;
}
.rememberDead .noComment p{
    text-align:center;
    font-size:24px;
    font-weight:700;
}
.rememberDead .noComment.hide{
    display:none;
}
.emptyData{
    width: 500px;
    height: 500px;
    margin-inline: auto;
}
.deadsCard:has(.emptyData){
    grid-template-columns: 1fr;
}