/** font face */
@font-face {
    font-family: 'Cairo';
    font-style: normal;
    font-weight: 400;
    src: url(../assets/fonts/SLXgc1nY6HkvangtZmpQdkhzfH5lkSs2SgRjCAGMQ1z0hOA-a1biLD-H.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

@font-face {
    font-family: 'Amiri Quran';
    font-style: normal;
    font-weight: 400;
    src: url(../assets/fonts/_Xmo-Hk0rD6DbUL4_vH8Zp5v5i2ssqe2.woff2) format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EFD-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/** global styles */
* {
    margin: 0;
    padding: 0;
}

:root {
    --color-green: #0b6860;
    --color-blue-light: #0b3e8a;
    --color-blue-dark: #0d2d6c;
    --color-blue-dark2: #061d38;
    --color-light: #f5f7f7;
}

noscript {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    justify-content: center;
    padding: 0.5rem 2rem;
    align-items: center;
    font-size: 1rem;
    cursor: pointer;
    background-color: rgb(228, 191, 27);
}

body {
    font-family: 'Cairo', serif;
    background-color: var(--color-light);
}

a, a:hover {
    text-decoration: none;
}

.form-control {
    border-radius: 5px;
    border: 1px solid #dedede;
    height: 2.7rem;
    direction: rtl;
}

.form-control:focus {
    box-shadow: none;
    border-color: #00756c;
    background-color: #f9fcfd;
}

::selection {
    background: var(--color-green);
    color: var(--bs-white);
}

body::-webkit-scrollbar {
    width: 8px;
}

body::-webkit-scrollbar-track {
    background-color: var(--color-light);
}

body::-webkit-scrollbar-thumb {
    background-color: var(--color-blue-dark);
}

/** loader styles */
.loader_app {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-light);
}

.loader_app img {
    height: 50px;
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
}

@keyframes up-down {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

/** top btn */
.totop__btn {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 999999;
    display: none;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    background-color: var(--color-blue-light);
    color: var(--bs-white);
    font-size: 1.3rem;
    border-radius: 3px;
    opacity: 0.7;
    transition: all 0.5s ease-in-out 0s;
}

.totop__btn:hover {
    color: var(--bs-white);
    opacity: 1;
}

/** whatsapp btn */
.whatsapp__btn {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    bottom: 1.3rem;
    left: 1.5rem;
    background-color: #00e676;
    color: var(--bs-white);
    font-size: 1.7rem;
    width: 60px;
    height: 60px;
    text-align: center;
    border-radius: 50%;
    box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31, 27, 45, .08), 0 0.25rem 0.75rem rgba(31, 27, 45, .08);
    transition: all 0.5s ease-in-out 0s;
}

.whatsapp__btn:hover {
    color: var(--bs-white);
    opacity: 0.7;
}

.whatsapp__btn span {
    top: 10px;
    right: 0px;
    width: 10px;
    height: 10px;
}

/** top bar styles */
.top_bar {
    min-height: 2.3rem;
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    background-color: var(--color-green);
    color: var(--bs-white);
}

.top_bar h6 {
    font-size: 1rem;
    font-weight: 500;
    margin-inline: 0.8rem;
    margin-bottom: 0;
    color: var(--color-light);
    position: relative;
    z-index: 100;
}

.top_bar h6::after {
    content: "";
    position: absolute;
    bottom: 0px;
    right: 0;
    left: 0px;
    height: 0.5rem;
    z-index: -1;
    background-color: var(--color-blue-light);
}

.top_bar .adkar_bar {
    font-size: 0.9rem;
    max-width: 100%;
    text-overflow: ellipsis;
}

.full_date {
    margin-bottom: 0;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
    text-align: center;
    color: var(--bs-white);
    border-radius: 0.3rem;
    background-color: #5b575747;
    background-color: #0d2d6c8a;
}

/** Header Styles */
.header {
    height: 4.5rem;
    display: flex;
    align-items: center;
    background-color: var(--color-light);
    box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31, 27, 45, .08), 0 0.25rem 0.75rem rgba(31, 27, 45, .08);
    transition: all 0.5s ease-in-out 0s;
}

.scroll__header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999;
    background-color: #ffffff91;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.scroll__header::after {
    content: "";
    position: absolute;
    height: 2px;
    bottom: 0px;
    right: 0;
    background-color: var(--color-blue-light);
    width: 100%;
    animation-name: scroll-header-border;
    animation-duration: 600ms;
}

@keyframes scroll-header-border {
    0% {
        width: 0%;
    }

    25% {
        width: 25%;
    }

    50% {
        width: 50%;
    }

    75% {
        width: 75%;
    }

    100% {
        width: 100%;
    }
}

.logo {
    height: 2.8rem;
}


.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 3rem;
    height: 100%;
    width: 100%;
}

.navbar .menu {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
}

.navbar .menu li {
    padding: 0.5rem 1rem;
}

.link__nav {
    color: var(--bs-dark);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out 0s;
}

.link__nav:hover, .navbar .menu li .active {
    color: var(--color-green);
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--color-green);
    opacity: 0.8;
}

.navbar .dropdown {
    position: relative;
}

.navbar .dropdown ul {
    position: absolute;
    list-style: none;
    background-color: var(--color-blue-dark2);
    top: calc(100% + 30px);
    z-index: 99;
    right: 0;
    margin: 0;
    padding: 10px 0;
    z-index: 99;
    opacity: 0;
    visibility: hidden;
    border-radius: 10px;
    box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31, 27, 45, .08), 0 0.25rem 0.75rem rgba(31, 27, 45, .08);
    transition: 0.3s;
}

.navbar .dropdown:hover>ul {
    opacity: 1;
    top: 2.8rem;
    visibility: visible;
}

.navbar .dropdown ul li {
    min-width: 200px;
    padding: 0.5rem 1.5rem;
    border-bottom: 1px solid #ffffff10;
}

.navbar .dropdown ul li a {
    color: var(--bs-white);
    font-size: 1rem;
    transition: 0.5s;
}

.navbar .dropdown ul li a:hover {
    opacity: 0.5;
    margin-right: 0.3rem;
}

.open_nav__btn {
    font-size: 1.4rem;
    line-height: 40px;
    color: var(--bs-white);
    display: none;
    justify-content: center;
    align-items: center;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: var(--color-green);
    transition: all 0.2s ease-in-out 0s;
}

.open_nav__btn:hover, .open_nav__btn:focus {
    color: var(--color-green);
    opacity: 0.8;
}

.close_nav__btn {
    font-size: 1.8rem;
    color: var(--color-green);
    display: none;
    transition: all 0.2s ease-in-out 0s;
}

.close_nav__btn:hover, .close_nav__btn:focus {
    color: var(--color-green);
    opacity: 0.8;
}

.quran_pdf__btn {
    background-color: var(--color-green);
    color: var(--bs-white);
    font-size: 1rem;
    border-radius: 5px;
    padding: 0.3rem 1rem;
    font-weight: 500;
    text-decoration: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    border: 1px solid var(--color-green);
    transition: all 0.2s ease-in-out 0s;
}

.quran_pdf__btn:hover {
    background-color: transparent;
    color: var(--color-green);
}

@media (max-width: 991px) {
    .open_nav__btn {
        display: flex;
    }

    .navbar {
        position: fixed;
        z-index: 10000;
        overflow: scroll;
        width: 0;
        top: 0;
        bottom: 0;
        left: -100px;
        background-color: var(--color-light);
        display: none;
        text-align: center;
        padding: 1rem 1rem;
        box-shadow: 0 0.125rem 0.125rem -0.125rem rgba(31, 27, 45, .08), 0 0.25rem 0.75rem rgba(31, 27, 45, .08);
        transition: all 8s ease-in-out 5s;
    }

    .nav-active {
        position: relative;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: #0e0d0d7c;
    }

    .nav-active .scroll__header {
        background-color: var(--color-light);
        -webkit-backdrop-filter: none;
        backdrop-filter: unset;
    }


    .nav-active .navbar {
        display: block;
        left: 0;
        width: 50%;
    }

    .nav-active .close_nav__btn {
        display: flex;
    }

    .navbar .menu {
        display: block;
        margin-bottom: 2rem;
    }

    .navbar .menu li {
        padding-block: 0.7rem;
    }

    .navbar .dropdown:hover>ul {
        position: relative;
        top: 0.4rem;
        right: 0;
        left: 0;
    }
}

@media (max-width: 509px) {
    .nav-active .navbar {
        width: 80%;
    }
}

/** Hero Styles*/
#hero {
    padding-block: 2rem;
}

#hero h1 {
    font-size: 2.3rem;
    color: var(--color-green);
    font-weight: 600;
    margin-bottom: 1rem;
}


#hero h2 {
    font-size: 2rem;
    color: var(--color-blue-light);
    margin-bottom: 1rem;
}

#hero p {
    font-size: 1.3rem;
    color: var(--bs-dark);
    margin-bottom: 0.6rem;
}

.search__hero {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-block: 2rem;
}

.search__hero .input__box {
    background: var(--bs-white);
    border: 1px solid #d2deec;
    border-radius: 50px;
    padding: 0.4rem 1rem;
    display: flex;
    align-items: center;
}

.search__hero .input__box input, .search__hero .input__box input::placeholder {
    border: none;
    outline: none;
    background: transparent;
    color: #8598ac;
    font-size: 1rem;
    width: 100%;
}

.search__hero .input__box i {
    color: #8598ac;
    font-size: 1rem;
}

.search__hero button {
    background-color: var(--color-green);
    color: var(--bs-white);
    font-size: 1rem;
    border-radius: 5px;
    padding: 0.3rem 1rem;
    font-weight: 500;
    margin-right: 1rem;
    border: 1px solid var(--color-green);
    transition: all 0.2s ease-in-out 0s;
}

.search__hero button:hover {
    background-color: var(--color-light);
    color: var(--color-green);
    border: 1px solid var(--color-green);
}

@media (max-width: 767px) {

    #hero {
        padding-block: 2rem;
    }

    #hero h1 {
        font-size: 2rem;
    }

    #hero h2 {
        font-size: 1.8rem;
    }

    #hero p {
        font-size: 1.2rem;
    }

    .search__hero {
        display: block;
    }

    .search__hero button {
        margin-top: 1rem;
    }
}

/** books_9 styles */
#books_9 {
    background-color: #edeeee;
    padding-block: 5rem;
}

.books_9__title {
    font-size: 2.8rem;
    color: var(--bs-dark);
    text-align: center;
    line-height: 3rem;
    margin-bottom: 1.5rem;
}

.books_9__title span {
    position: relative;
    z-index: 100;
}

.books_9__title h1 span::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 0;
    left: -10px;
    height: 1rem;
    z-index: -1;
    width: 115%;
    background-color: var(--color-blue-light);
    opacity: 0.5;
}

#books_9 .card {
    border-radius: 3px;
    position: relative;
    margin-bottom: 2rem;
    border: none;
}

#books_9 .card::after {
    content: "";
    position: absolute;
    border-radius: 2px;
    bottom: 0px;
    right: 0px;
    left: 0px;
    height: 0.6rem;
    width: 80%;
    background-color: var(--color-blue-dark);
}

.type__books_9 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-blue-light);
    margin-bottom: 0.8rem;
}

#books_9 .card-text {
    color: #757575;
    font-size: 0.9rem;
}

.time__books_9 {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-dark);
    margin-bottom: 0.8rem;
}

.btn__books_9 {
    background-color: var(--color-blue-light);
    color: var(--bs-white);
    font-size: 0.8rem;
    border-radius: 5px;
    padding: 0.3rem 1rem;
    font-weight: 500;
    border: 1px solid var(--color-blue-light);
    transition: all 0.2s ease-in-out 0s;
}

.btn__books_9:hover {
    background-color: var(--color-light);
    color: var(--color-blue-light);
    border: 1px solid var(--color-blue-light);
}

/** about styles */
#about {
    background-color: var(--color-green);
    padding-top: 3rem;
}

.about__title {
    font-size: 2.8rem;
    color: var(--bs-white);
    text-align: center;
    margin-bottom: 1.5rem;
}

.about__title span {
    position: relative;
    z-index: 100;
}

.about__title h1 span::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 0;
    left: -10px;
    height: 1rem;
    z-index: -1;
    width: 100%;
    opacity: 0.7;
    background-color: var(--color-blue-light);
}

#about .card-text {
    font-size: 1rem;
    color: var(--color-light);
    text-align: justify;
}

.about__btns {
    display: flex;
    flex-direction: row;
    justify-content: end;
    align-items: center;
    margin-block: 2rem;
}

.more__btn {
    background-color: var(--color-blue-light);
    color: var(--bs-white);
    font-size: 1.1rem;
    border-radius: 5px;
    padding: 0.3rem 1rem;
    font-weight: 500;
    margin-left: 1rem;
    border: 1px solid var(--color-blue-light);
    transition: all 0.2s ease-in-out 0s;
}

.more__btn:hover {
    background-color: var(--color-light);
    color: var(--color-blue-light);
}

.contact__btn {
    background-color: var(--color-blue-dark);
    color: var(--bs-white);
    font-size: 1.1rem;
    border-radius: 5px;
    padding: 0.3rem 1rem;
    font-weight: 500;
    border: 1px solid var(--color-blue-dark);
    transition: all 0.2s ease-in-out 0s;
}

.contact__btn:hover {
    background-color: var(--color-light);
    color: var(--color-blue-dark);
}

/**about_2 Styles*/
#about_2 {
    padding-block: 4rem;
}

.about_2__title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.about_2__title h1 {
    font-size: 2.5rem;
    color: var(--bs-dark);
    text-align: center;
    font-weight: 500;
}

.about_2__title>h1>span {
    color: var(--color-blue-light);
    text-decoration: underline;
}

.about_2__title>span {
    display: inline-block;
    margin-top: 0.7rem;
    border-radius: 5px;
    height: 0.5rem;
    width: 8rem;
    background-color: var(--color-blue-dark);
}

.about_2__text {
    text-align: center;
    color: #6b6b6b;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

#about_2 .card {
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: center;
}

.about_2__items {
    position: relative;
}

.about_2__items::after {
    content: "";
    position: absolute;
    top: 93px;
    right: 0px;
    left: 0px;
    width: 100%;
    z-index: -1;
    border-bottom: 0.4rem dashed #d1ddec;
}

.about_2__num {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100px;
    border-radius: 50%;
    background-color: var(--color-blue-light);
    color: var(--bs-white);
    font-size: 4rem;
    font-weight: 600;
    outline: 20px solid var(--color-light);
    margin: 28px;
}

#about_2 .card-title {
    font-size: 1.5rem;
    color: var(--bs-dark);
}

#about_2 .card-text {
    font-size: 1rem;
    color: #6b6b6b;
}

@media (max-width: 767px) {
    .about_2__title h1 {
        font-size: 2rem;
    }

    .about_2__text {
        font-size: 1rem;
    }

    #about_2 .card-title, #about_2 .card-text {
        background: var(--color-light);
    }

    .about_2__items::after {
        top: 0;
        right: 50%;
        left: 0px;
        height: 100%;
        width: auto;
        z-index: -1;
        border-right: 0.4rem dashed #d1ddec;
        border-bottom: none;
    }
}


/** ahadith nabawia styles*/
#ahadith_nabawia {
    padding-block: 4rem;
}

.ahadith_nabawia__title {
    text-align: center;
    margin-bottom: 1.5rem;
}

.ahadith_nabawia__title h1 {
    font-size: 2.5rem;
    color: var(--bs-dark);
    text-align: center;
    font-weight: 500;
}

.ahadith_nabawia__title>h1>span {
    color: var(--color-green);
    text-decoration: underline;
}

.ahadith_nabawia__title>span {
    display: inline-block;
    margin-top: 0.7rem;
    border-radius: 5px;
    height: 0.5rem;
    width: 8rem;
    background-color: var(--color-green);
}

.ahadith_nabawia__items {
    margin-top: 3rem;
}

#ahadith_nabawia .card {
    border-radius: 3px;
    box-shadow: 0 0.200rem 0.200rem -0.200rem rgba(31, 27, 45, .08), 0 0.25rem 0.75rem rgba(31, 27, 45, .08);
    border: none;
    position: relative;
    margin-bottom: 3rem;
}

#ahadith_nabawia .card::after {
    content: "";
    position: absolute;
    border-radius: 10px;
    bottom: 0px;
    top: 0;
    right: 0px;
    height: 100%;
    width: 0.4rem;
    background-color: var(--color-green);
}

#ahadith_nabawia .img-thumbnail {
    border-radius: 50%;
    margin-top: -90px;
    margin-bottom: 1rem;
}


.ahadith_nabawia__stars {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.ahadith_nabawia__stars i {
    color: var(--color-green);
    font-size: 1rem;
    margin-inline: 0.1rem;
}

#ahadith_nabawia .card-text {
    font-size: 0.9rem;
    color: #757575;
}

#ahadith_nabawia .card-body>i {
    color: var(--color-green);
    font-size: 4rem;
    margin-bottom: 1rem;
}

.ahadith_nabawia__btn {
    background-color: var(--color-green);
    color: var(--bs-white);
    font-size: 0.8rem;
    border-radius: 5px;
    padding: 0.3rem 1rem;
    font-weight: 500;
    border: 1px solid var(--color-green);
    transition: all 0.2s ease-in-out 0s;
}

.ahadith_nabawia__btn:hover {
    background-color: var(--color-light);
    color: var(--color-green);
    border: 1px solid var(--color-green);
}

/**footer Styles*/
.footer {
    background-color: var(--color-blue-dark2);
    padding-block: 3rem 1rem;
}

.footer h4 {
    color: var(--bs-white);
    margin-bottom: 1rem;
    margin-right: 0.5rem;
    position: relative;
    z-index: 20;
}

.footer h4::after {
    content: "";
    position: absolute;
    bottom: 10px;
    right: 0;
    left: -10px;
    height: 1rem;
    z-index: -1;
    width: 50%;
    background-color: var(--color-green);
}

.footer .footer-contact {
    margin-bottom: 30px;
}

.footer .footer-contact p {
    line-height: 26px;
}

.footer .footer-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer .footer-contact ul li {
    padding: 8px 0;
}

.footer .footer-contact ul li:first-child {
    padding-top: 0;
}

.footer .footer-contact ul a {
    color: var(--bs-white);
    transition: 0.5s;
    padding-right: 0px;
}

.footer .footer-contact ul a:hover {
    color: var(--color-light);
}

.footer .footer-links {
    margin-bottom: 30px;
}

.footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-right: 9px;

}

.footer .footer-links ul li {
    padding: 8px 0;
}

.footer .footer-links ul li:first-child {
    padding-top: 0;
}

.footer .footer-links ul a {
    color: var(--bs-white);
    transition: 0.5s;
    padding-right: 0px;
}

.footer .footer-links ul a:hover {
    color: var(--color-light);
    padding-right: 8px;
}

.footer .social-links a {
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--bs-white);
    color: var(--bs-white);
    margin-top: 10px;
    margin-right: 10px;
    border-radius: 50%;
    text-align: center;
    width: 30px;
    height: 30px;
    transition: 0.5s;
}

.footer .social-links a i {
    line-height: 0;
}

.footer .social-links a:hover {
    background: var(--color-green);
}

/** breadcrumb styles */
.breadcrumb-item+.breadcrumb-item::before {
    content: "\F22D";
    font-family: bootstrap-icons !important;
}

.breadcrumb-item a, .breadcrumb-item a:hover {
    color: var(--color-green) !important;
}

/** contact page styles */

.contact_page section {
    padding-top: 3rem;
}

.title_contact {
    font-size: 2.8rem;
    color: var(--bs-dark);
    text-align: center;
    line-height: 3rem;
    margin-bottom: 1.5rem;
}

.title_contact span {
    position: relative;
    z-index: 100;
}

.title_contact h1 span::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 0;
    left: -10px;
    height: 1rem;
    z-index: -1;
    width: 115%;
    background-color: var(--color-green);
    opacity: 0.5;
}

.contact_page .card {
    background-color: var(--color-green);
    border-radius: 10px;
}

.contact_page .table>:not(caption)>*>* {
    background-color: transparent;
    border-bottom: 1px solid #ffffff10;
}

.contact_page .table a {
    color: var(--color-light);
    font-weight: normal;
}

.contact_page .table td {
    color: var(--bs-white);
    font-weight: normal;
}

.contact_page .table td i {
    color: var(--color-blue-dark2);
}

/** book info*/
#book_info {
    background-color: var(--color-blue-dark2);
    padding-block: 3rem;
}

.book_info__title {
    font-size: 2.8rem;
    color: var(--bs-white);
    text-align: center;
    margin-bottom: 1.5rem;
}

.book_info__title span {
    position: relative;
    z-index: 100;
}

.book_info__title h1 span::after {
    content: "";
    position: absolute;
    bottom: 20px;
    right: 0;
    left: -10px;
    height: 1rem;
    z-index: -1;
    width: 100%;
    opacity: 0.7;
    background-color: var(--color-green);
}

#book_info .table>:not(caption)>*>* {
    background-color: transparent;
    border-bottom: 1px solid #ffffff10;
}


.page-link, .page-link:focus {
    background: transparent;
    border: 0;
    color: #93a5b8;
    box-shadow: none !important;
    font-weight: 600;
    border-radius: 0 !important;
}

.active>.page-link, .page-link.active, .page-link:hover {
    background: transparent;
    color: #5c6f7a;
}

.previous, .next {
    color: #5c6f7a;
}

/** hadith page styles */
.sharh__hadith {
    padding-block: 3rem;
}

.full-page>*, .full-page main>* {
    display: none !important;
}

.full-page main, .full-page main .sharh__hadith {
    display: block !important;
}