/* Holy_Quran & Allah_Name & Surahs Sounds Section */
.surahs,
.names {
    display: grid;
    place-items: center;
    gap: 20px;
    opacity: 1;
    transition: all 0.5s ease-in-out;
}

.surahs {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 345px), 1fr));
}

.names {
    grid-template-columns: repeat(auto-fit, minmax(537px, 1fr));
}

.surah,
.name {
    animation: fade 1s ease;
    border-radius: 10px 0px;
    width: 100%;
    transition: 0.5s ease;
    border: 3px solid var(--Black);
    cursor: pointer;
    font-family: var(--mff);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.surah {
    border-radius: 20px 0px;
    padding: 20px;
    text-align: center;
}

.name {
    border-radius: 10px 0px;
    padding: 10px;
    color: var(--Black);
}

.name:hover,
.surah:hover {
    transform: translateY(-10px);
    border-color: var(--Gold);
    box-shadow: 0 0 10px var(--Black);
}

.length,
.Nameslength {
    color: var(--Black);
    font-size: 2rem;
}

.surahName {
    color: var(--Black);
    font-size: 30px;
    text-align: center;
}

.surahOrder,
.surahVerses,
.surahType {
    width: 100%;
    color: var(--Black);
    text-align: center;
}

.AllahName::before {
    content: "الأسم: ";
}

.length::before,
.SurahsAudiosNumber::before {
    content: "عدد السور: ";
}

.surahName::before {
    content: "سورة ";
}

.Nameslength::before {
    content: "عدد الأسماء: ";
}

.surahOrder::before {
    content: "رقم السورة: ";
}

.surahVerses::before {
    content: "عدد الآيات: ";
}

.surahType::before {
    content: "النزول: ";
}

.settingsButton,
.settingsButtonNames {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    position: relative;
}

.Clear,
.ClearNames {
    border-radius: 10px;
    background: var(--Gold);
    font-size: 20px;
    font-family: var(--sff);
    font-weight: 700;
    padding: 10px;
}

.Clear:disabled,
.ClearNames:disabled {
    color: var(--Soft-Gray)
}

.SurahsDatas {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .625rem
}

.SurahsDatas button {
    width: 100%;
    border-radius: 10px;
    background: var(--Cream);
    font-family: var(--mff);
    font-size: 30px;
    font-weight: 600;
    transition: 0.4s;
    height: 56px;
}

.SurahsDatas button:first-child a {
    width: 100%;
}

.SurahsDatas button:hover {
    background-color: var(--Gold);
}

.surahinput,
.Nameinput,
.countryinput {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.surahInputWrapper,
.NameInputWrapper,
.countryInputWrapper {
    box-shadow: 0 0 20px var(--Black);
    width: max-content;
    height: max-content;
    border: 2px solid var(--Black);
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--Black);
    background: var(--White);
}

.surahInputWrapper>input,
.NameInputWrapper>input,
.countryInputWrapper>input {
    padding: 10px;
    width: 100%;
    height: 100%;
    border-radius: 0 5px 0 0;
    font-size: 30px;
    font-family: var(--sff);
    color: var(--Black);
    background: var(--White);
    border-radius: 7px;
}

.surahInputWrapper>input::placeholder,
.NameInputWrapper>input::placeholder,
.countryInputWrapper>input::placeholder {
    color: var(--Black);
}

.showall,
.showallNames,
.UseLocation {
    width: 436px;
    color: var(--Black);
    box-shadow: 0 0 20px var(--Black);
    background: var(--White);
    border: 2px solid var(--Black);
    border-top: none;
    height: 56px;
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    font-size: 25px;
    font-family: var(--sff);
}

.findsurah,
.findName {
    background: var(--White);
    color: var(--Black);
    width: 50px;
    height: 56px;
    background: none;
    border-right: 2px solid var(--Black);
}