@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@200;300;400;500;700;800;900&display=swap');
/* 
:root{
    --primary-gradient: linear-gradient(135deg, #006B5E 0%, #004D40 100%);
    --secondary-gradient: linear-gradient(135deg, #00897B 0%, #006B5E 100%);
    --accent-gradient: linear-gradient(135deg, #26A69A 0%, #00897B 100%);
    --header-gradient: linear-gradient(90deg, #004D40 0%, #00695C 50%, #004D40 100%);
    --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(224, 242, 241, 0.9) 100%);
    --sidebar-gradient: linear-gradient(54deg, #004D40 0%, #01c188 100%);
    --primary-color: #006B5E;
    --primary-dark-color: #004D40;
    --accent-color: #00897B;
    --text-color: #004D40;
    --bg-color: #E0F2F1;
    --white-color: #ffffff;
    --black-color: #002419;
    --arabic-font: "Tajawal", sans-serif;
    --transition: 0.5s;
    --border-color: rgba(231, 231, 231, 0.729);
    --border-radius: 16px;
    --card-shadow: 0 2px 4px rgba(0, 77, 64, 0.1);
    --success-color: #00695C;
    --warning-color: #00796B;
    --danger-color: #00695C;
    --secondary-color: #26A69A;
    --light-green: #E0F2F1;
    --menu-bg: rgba(0, 77, 64, 0.9);
    --card-bg: rgba(224, 242, 241, 0.9);
} */
:root {
    /* التدرجات */
    --primary-gradient: linear-gradient(135deg, #D4AF37 0%, #151414 100%);
    --secondary-gradient: linear-gradient(135deg, #D4AF37 0%, #151414 100%);
    --accent-gradient: linear-gradient(135deg, #D4AF37 0%, #151414 100%);
    --header-gradient: linear-gradient(135deg, #D4AF37 0%, #151414 100%);
    --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(245, 245, 245, 0.9) 0%);
    --sidebar-gradient: linear-gradient(135deg, #D4AF37 0%, #151414 100%);

    /* الألوان الأساسية */
    --primary-color: #D4AF37;
    --primary-dark-color: #B8860B;
    --accent-color: #FDB931;
    --text-color: #151414;
    --bg-color: #FFFFFF;
    --white-color: #FFFFFF;
    --black-color: #000000;
    --arabic-font: "Tajawal", sans-serif;
    --transition: 0.5s;
    --border-color: rgba(0, 0, 0, 0.1);
    --border-radius: 16px;
    --card-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    --success-color: #D4AF37;
    --danger-color: #B8860B;
    --light-gold: #FFF8E7;
    --menu-bg: rgba(0, 0, 0, 0.9);
    --card-bg: rgba(255, 255, 255, 0.9);
}

@media (min-width: 991px) {
    #navbar_content.navbar_collapse_shadow{
        display: none !important;
    }
}

@media (max-width: 991px) {
    #dropdown_location .dropdown-menu.show{
        position: absolute;
        transform: translate3d(0px, 33px, 0px);
        top: 0px;
        left: 0 !important;
        right: auto !important;
        will-change: transform;
    }
    .dropdown-item{
        font-size: 15px;
    }
    #nav{
        padding: 15px;
    }
    #nav .container{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        flex-wrap: nowrap;
    }
    .search_mobile{
        width: auto;
    }
    #navbar_content:not(.show){
        display: flex !important;
        flex-direction: column;
        position: fixed;
        transform: translateX(100%);
        top: 0;
        background: var(--white-color);
        height: 100vh;
        overflow: auto;
    }
    #navbar_content.collapse_content_shadow:not(.show){
        display: flex;
        transform: translateX(100%);
        height: 100vh;
        overflow: auto;
        top: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background: #000000cc;
    }
    #navbar_content.collapse_content_shadow{
        display: flex !important;
        position: fixed;
        height: 100%;
        width: 100%;
        transition: transform 0.4s, visibility 0.4s;
        will-change: transform, visibility;
        background: #000000cc;
        overflow: auto;
        overflow-x: hidden !important;
        right: 0;
        transform: translateX(0);
        padding: 1rem;
        z-index: 99;
    }
    #navbar_content{
        flex-direction: column;
        position: fixed;
        top: 0;
        width: 320px;
        transition: transform 0.4s, visibility 0.4s;
        will-change: transform, visibility;
        background: var(--white-color);
        height: 100vh;
        overflow: auto;
        overflow-x: hidden !important;
        right: 0;
        transform: translateX(0);
        z-index: 99;
        padding: 1rem 1rem 1rem;
    }
    #navbar_content.navbar_collapse_shadow{
        width: 100%;
        background: #010d06d8;
        z-index: 99;
    }
    #navbar_content ul{
        flex-direction: column;
    }
    #nav-item{
        justify-content: space-between;
        border-bottom: 1px solid var(--border-color);
    }
    .main-banner .container {
        flex-direction: column;
        text-align: center;
    }
    #Btnnav_toggler , .btn_search_mobile , #btn_search_mobile_close{
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 6px;
        font-size: 23px;
        color: var(--accent-color);
        border-color: var(--accent-color);
        transition: var(--transition);
        border-radius: 10px;
    }
    #btn_search_mobile_close{
        padding: 5px;
        line-height: 1rem;
        font-size: 23px;
        border-radius: 5px;
    }
    .btn_search_mobile{
        gap: 10px;
        font-size: 17px;
    }
    #Btnnav_toggler:hover , .btn_search_mobile:hover{
        color: var(--white-color);
       
        background: var(--accent-color);
    }
    .Btnnav_toggler_close{
        position: absolute;
        top: 5px;
        left: 5px;
        z-index: 1;
    }
    .banner-image img {
        margin-top: 30px;
        max-width: 300px;
    }
}
@media (max-width: 767px) {
    #nav{
        padding: 0 15px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 3;
    }
    
    .search_mobile{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        transform: translateY(-100%);
        width: 100%;
        height: auto;
        transition: var(--transition);
        border-radius: 0;
        height: 62px;
        z-index: 999;
    }
    .search_mobile .form_search{
        border-radius: 0;
        height: 100%;
    }
    .form_search input{
        font-size: 15px;
    }
    .btn_result{
        font-size: 14px;
        font-weight: 500;
        gap: 10px;
    }
    #logo_topbar{
        margin: 0;
    }
    .media_images{
        width: 35px;
        height: 35px;
    }
    .biografy_details_section ,
    .weekly-lessons-section , 
    .benefits-section , 
    .book_details_section ,
    .news-section , 
    .biografy-section, 
    .ask_question , 
    .articles-section , 
    .fatwa_section , 
    .video_section , 
    .sermons-section , 
    .phone_message_section , 
    .tafsir-section {
        padding: 80px 0 20px;
    }
    .search_mobile #ul-language_topnav{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 10px;
        flex-direction: row;
    }
    .media_content_section, .top_data_media_content{
        padding: 20px 0;
    }
    .main-banner{
        min-height: auto;
        padding: 100px 0 20px;
    }
    .banner-content h1{
        font-size: 30px;
    }
    .form_search input{
        padding-right: 90px;
    }
    .form_search button{
        font-size: 12px;
    }
    .book_details_name{
        font-size: 20px !important;
        margin: 0;
        align-content: center;
    }
}

@media (max-width: 567px) {
    #nav .container{
        gap: 5px;
    }
    #logo_topbar{
        font-size: 18px;
    }
    #logo_topbar span{
        font-size: 13px;
    }
    .btn_search_mobile{
        gap: 5px;
    }
    .btn_result{
        font-size: 12px;
    }
    .faq-container, .lessons_cards_tab, .audio-section, .videos-section  , .more-visit-section, .more-download-section{
        grid-template-columns: repeat(1, minmax(250px, 1fr));
    }
    .top_data_media_content .container{
        padding: 0;
    }
    .login-card{
        padding: 1rem;
    }
    .login-header{
        margin-bottom: 1rem;
    }
    .policy-section{
        padding-top: 80px !important;
    }
    .policy-section .section-title , .terms-section .section-title{
        font-size: 1.3rem;
        border: 0;
        margin-bottom: 1rem !important;
    }
    .policy-section .policy-subtitle , .terms-section .policy-subtitle{
        font-size: 1.1rem;
    }
}
@media (max-width: 375px) {
    #logo_topbar {
        font-size: 15px;
    }
    #logo_topbar span{
        font-size: 10px;
    }
    .btn_search_mobile{
        font-size: 12px;
    }
}