/* default login css */
/* تنسيقات القوائم */
/* تنسيقات القوائم */
/* تنسيقات الزر */
.statistics-section {
    display: flex;
    justify-content: space-around;
    opacity: 0; /* لجعل العنصر غير مرئي في البداية */
    transition: opacity 0.5s;
	color:#fff;
}

.statistic-item {
    text-align: center;
    margin: 0 10px;
}

.statistic-item img {
    width: 50px; /* حجم الصورة */
    height: 50px;
}

.statistic-name {
    font-size: 20px;
    margin: 10px 0;
}

.statistic-count {
    font-size: 30px;
    font-weight: bold;
}

.regist {
    background-color: #007bff; /* لون الخلفية */
    color: white; /* لون النص */
    border: none; /* إزالة الحدود */
    padding: 10px 10px; /* مسافة داخلية */
    border-radius: 5px; /* زوايا دائرية */
    cursor: pointer; /* شكل المؤشر */
	left: 30%;
	top: 20px;
	font-weight: 500; 
	font-size: 1.8rem;
	border-radius: 50%;
}

.regist:hover {
    background-color: #0056b3; /* لون الخلفية عند المرور */
}

._headrButtons_6sg53_175 {
    position: fixed; /* تثبيت العنصر في مكانه */
    bottom: 20px; /* المسافة من الأسفل */
    right: 20px; /* المسافة من اليمين */
    background-color: rgba(0, 0, 0, 0.8); /* خلفية شبه شفافة */
    border-radius: 10px; /* زوايا دائرية */
    padding: 10px; /* هوامش داخلية */
    transition: transform 0.3s ease; /* تأثير الانتقال */
    z-index: 1000; /* تراكب العنصر */
}

/* عند عدم وجود حركة */
.hidden {
    transform: translateY(100%); /* إخفاء العنصر */
}

._list_custom {
    color: white; /* تغيير لون النص إلى الأبيض */
    display: flex; /* استخدام flexbox */
    flex-direction: column; /* ترتيب العناصر عموديًا */
    gap: 1rem; /* المسافة بين العناصر */
    font-size: 2.2rem; /* حجم الخط */
    font-weight: 500; /* وزن الخط */
    list-style: none; /* إزالة النقاط الافتراضية */
    text-align: right; /* محاذاة النص إلى اليمين */
}

/* تنسيق العناصر (li) */

/* استخدام ::marker */


/* تنسيق خاص للغة الإنجليزية */
html[lang=en] ._list_custom {
    font-weight: 300; /* وزن الخط للغة الإنجليزية */
}

/* تأثيرات التحريك */
[data-aos] {
    opacity: 0; /* بدءًا من الشفافية */
    transform: translateY(20px); /* بداية من الأسفل */
    transition: opacity 1s ease, transform 1s ease; /* تأثيرات الانتقال */
}

[data-aos].aos-animate {
    opacity: 1; /* عند التحريك تصبح واضحة */
    transform: translateY(0); /* تعود إلى الوضع الأصلي */
}

/* إعدادات عامة */
*, *:before, *:after {
    box-sizing: border-box; /* تحسين تنسيق العناصر */
    padding: 0; /* إزالة الهوامش */
    margin: 0; /* إزالة الهوامش */
    transition: background-color .3s, border .3s; /* تأثيرات الانتقال العامة */
}


.head_logo {
    height: 50px; /* تحديد ارتفاع الحاوية الخاصة بالشعار */
    display: flex; /* استخدام الفلكس لتمركز المحتويات */
    justify-content: center; /* توسيط المحتوى أفقيًا */
}

#main_logo {
	width: 166%;
    height: 350%;
    left: 0%;
    bottom: -21%;

}

/* إضافة لثبات شريط الهيدر */
#header2 {
    position: fixed; /* يجعل الهيدر ثابتًا في الأعلى */
    top: 0; /* يثبت الهيدر في أعلى الصفحة */
    width: 100%; /* يضمن أن الهيدر يغطي عرض الصفحة بالكامل */
    z-index: 1000; /* يجعل الهيدر فوق باقي المحتويات */
    background-color: #333; /* لون خلفية للهيدر، يمكنك تغييره حسب التصميم */
}

/* إضافة مساحة أعلى المحتوى حتى لا يختفي خلف الهيدر */
#intro_top {
    margin-top: 50px; /* يجب تعديل هذا الرقم بناءً على ارتفاع الهيدر */
}

.navbar {
	display: flex;
    flex-wrap: nowrap;
    /* padding: 10px; */
    list-style: none;
    flex-direction: row-reverse;
    justify-content: flex-start;
}

.navbar li {
    display: inline;
}

.navbar li a {
    display: inline-block;
    padding: 10px 15px;
    text-decoration: none;
    color: white;
    font-weight: bold;
}

.navbar li a:hover {
    background-color: #111;
    color: #fff;
}

.sections {
    list-style: none;
    padding: 0;
    margin: 20px auto;
}
.tithom{   font-size: 2.2rem;
	text-align: right; /* محاذاة النص إلى اليمين */

    font-weight: 700;
    color:#fff;
}
.section {
    display: none;
    padding: 20px;
}
/*intro css */
#intro_top { width:100%; z-index:1; position:relative; height:auto; padding:80px 0;    }
#login_wrap {
    position: relative;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-attachment: fixed;
}

#login_wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* لون أسود شفاف فوق الصورة */
    z-index: 1; /* تأكد أن اللون الشفاف فوق الخلفية */
}
#hh{
	content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* لون أسود شفاف فوق الصورة */
    z-index: 1; /* تأكد أن اللون الشفاف فوق الخلفية */

}

#login_wrap * {
    position: relative;
    z-index: 2; /* تأكد أن المحتوى يظهر فوق الخلفية الشفافة */
}
#login_all { width:800px; max-width:94%; border-radius:20px; display:block; margin:0 auto; color:#fff; }
.intro_social_container { width:100%; height:auto; text-align:center; padding-top:20px; }
.intro_social_btn { display:inline-block; width:40px; height:40px; margin:0 3px; border-radius:50%; }
.login_not_member { text-align:center; padding-top:5px; }

/* active_user intro  */
#intro_section_user { padding:72px 0; }
.active_user { height: 50%; width: 50%;  text-align:center; float:left; overflow:hidden; }
.active_avatar { height: 50%; width: 50%;  border-radius:50%; }
#last_active .left-arrow,
#last_active .right-arrow { width: 0; height: 0; border-top: 10px solid transparent;  border-bottom: 10px solid transparent;  margin-top: 5px; cursor: pointer; margin-top:40px; }
#last_active .left-arrow {  float: left; border-right: 10px solid #ccc; display:none;}
#last_active .left-arrow:hover { border-right: 10px solid #000; }
#last_active .right-arrow { float: right;  border-left: 10px solid #ccc; display:none; }
#last_active .right-arrow:hover { border-left: 10px solid #000; }
#last_active .last-clip {  margin: 0 20px; overflow: hidden; position: relative; }
#last_active .last_10 { height: 50%; width: 50%;  overflow: hidden;  position: relative; }
#last_active {
    height: 31%;
    width: 100%;
    left: -6px;}
    
/* section css */
.section { width:100%; height:auto; margin:0 auto; }
.section_content { width:100%; max-width:1100px; margin:0 auto; }
.section_inside { margin:0 auto; }

@media screen and (max-width:1120px){
	.section_inside { width:96%; }
}
@media screen and (min-width:1121px){
	#intro_top { background-attachment: fixed; }
}
@media screen and (max-width:1100px){
	#intro_top { background-size:auto 100%; background-position:center 0px; padding:80px 0; }
}
@media screen and (max-width:768px){
	#intro_top { background-size:auto 100%; background-position:center 0px;  }
}
/* لتنسيق القسم */
._why_forqan_1 {
    display: flex;
    justify-content: space-between; /* لوضع العناصر في أقصى اليمين واليسار */
    align-items: center; /* محاذاة العناصر عمودياً في المنتصف */
}
.mainHeading {
    font-size: 5rem;
    position: relative;
    padding-bottom: 1.5rem;
    width: fit-content;
	float: right;
	
}

.mainHeading:after {
    content: "";
    width: 50%;
    height: 6px;
    background: green;
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 18rem
}

html[lang=ar] .mainHeading:after {
    left: unset;
    right: 0;
}

*,*:before,*:after {
    box-sizing: border-box;
    padding: 0;
    margin: 0;

    transition: background-color .3s,border .3s
}

.mainHeading {
    color: white; /* لون الخط */
	font-weight: 700;

}

/* لتنسيق قائمة الأسباب */
._reasonsList_5kmun_55 {
    list-style: none; /* إزالة النقاط من القائمة */
    padding: 0; /* إزالة الحشوة */
    display: flex; /* استخدام flexbox لتوزيع العناصر */
    flex-wrap: wrap; /* للسماح للعناصر بالتفاف */
}

/* لتنسيق كل عنصر في القائمة */
._item_5kmun_35 {
    flex: 0 0 48%; /* عرض كل عنصر بنسبة 48% مع مساحة صغيرة */
    margin: 1%; /* إضافة مسافة بين العناصر */
    background-color: rgba(0, 0, 0, 0.5); /* لون خلفية لكل عنصر */
    border-radius: 8px; /* زوايا مستديرة */
    padding: 15px; /* حشوة داخلية */
    color: white; /* لون الخط داخل العناصر */
}

/* لتنسيق العناوين داخل العناصر */
._itemContent_5kmun_55 h3 {
    font-size: 1.5rem; /* حجم خط العنوان */
    margin: 0; /* إزالة المسافة العلوية والسفلية */
}

/* لتنسيق النص داخل العناصر */
._itemContent_5kmun_55 p {
    font-size: 1rem; /* حجم خط الوصف */
    margin: 0; /* إزالة المسافة العلوية والسفلية */
}
._FooterLinks_701bd_99 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
	font-size: 2.8rem;
}
.socialIcon {
    font-size: 2.8rem;
    display: flex;
    align-items: center;
    transition: .3s all ease
}

.mainFacebook {
    color: #00b8ff
}

.secFacebook,.mainFacebook:hover {
    color: var(--color-grey-0)
}

.secFacebook:hover {
    color: #00b8ff
}

.mainTikTok {
    color: #fe2c55
}

.secTikTok,.mainTikTok:hover {
    color: var(--color-grey-0)
}

.secTikTok:hover {
    color: #fe2c55
}

.mainYoutube {
    color: #ff5448
}

.secYoutube,.mainYoutube:hover {
    color: var(--color-grey-0)
}

.secYoutube:hover {
    color: #ff5448
}

.mainSnap {
    color: #ceff48
}

.secSnap,.mainSnap:hover {
    color: var(--color-grey-0)
}

.secSnap:hover {
    color: #ceff48
}

.mainInsta {
    color: #ff48d7
}

.secInsta,.mainInsta:hover {
    color: var(--color-grey-0)
}

.secInsta:hover {
    color: #ff48d7
}

.mainWhatsapp {
    color: #40e076
}

.secWhatsapp,.mainWhatsapp:hover {
    color: var(--color-grey-0)
}

.secWhatsapp:hover {
    color: #40e076
}

.mainTelegram {
    color: #a29bfe
}

.secTelegram,.mainTelegram:hover {
    color: var(--color-grey-0)
}

.secTelegram:hover {
    color: #a29bfe
}

.swiper-container {
    direction: rtl
}

@media (max-width: 900px) {
    html {
        font-size:60%
    }
}

@media (max-width: 500px) {
    html {
        font-size:58%
    }
}

@media (max-width: 500px) {
    .mainHeading {
        font-size:3.6rem
    }

    .section-padding {
        padding: 8rem 0
    }
}

._footer_701bd_1 {
    display: flex;
    flex-direction: column;
    background: linear-gradient(to right,rgb(49,82,89,.9),rgb(49,82,89,.9)),url(/assets/quran-011eea5f.webp) no-repeat;
    background-size: cover;
    overflow: hidden
}
._copyRight_701bd_73 {
    background: var(--color-brand-800)
}

._copyRightText_701bd_79 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    color: var(--color-grey-0);
    font-size: 2rem;
    text-align: center;
}

/* الزر العائم */
.whatsapp-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1000;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.whatsapp-button img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* الصندوق الذي يظهر عند الضغط على الزر */
.whatsapp-chatbox {
    display: none; /* إخفاء الصندوق بشكل افتراضي */
    position: fixed;
    right: 20px;
    bottom: 90px;
    width: 300px;
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    z-index: 1001;
}

.whatsapp-chatbox textarea {
    width: 100%;
    height: 100px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 10px;
    resize: none;
}

.whatsapp-chatbox button {
    width: 100%;
    background-color: #25d366;
    color: white;
    border: none;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    cursor: pointer;
	
}

.whatsapp-chatbox button:hover {
    background-color: #22c35e;
}
@media (max-width: 768px) {
    .navbar li {
        flex: 1 0 100%; /* اجعل كل عنصر يأخذ 100% من العرض على الشاشات الصغيرة */
    }
}/* أنماط عالمية (تُطبق على جميع الشاشات) */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    
}

/* على الشاشات الكبيرة */
@media (min-width: 768px) {
    body {
        background-color: lightblue; /* لون الخلفية لشاشات الكمبيوتر */
    }
    
    h1 {
        font-size: 36px; /* حجم الخط العنوان */
    }
    
    p {
        font-size: 18px; /* حجم الخط للنصوص */
    }
}

/* على الشاشات الصغيرة */
@media (max-width: 767px) {
    body {
    }
    
    h1 {
        font-size: 24px; /* حجم الخط العنوان */
    }
    
    p {
        font-size: 16px; /* حجم الخط للنصوص */
    }
}

@media (max-width: 900px) {
    html {
        font-size:60%
    }
}

@media (max-width: 500px) {
    html {
        font-size:58%
    }
}

@media (max-width: 500px) {
    .mainHeading {
        font-size:3.6rem
    }

    .section-padding {
        padding: 8rem 0
    }
}
@media (max-width: 1200px) {
    ._content_701bd_33 h2 {
        font-size:3.6rem;
        color: var(--color-grey-0)
    }
}

@media (max-width: 900px) {
    ._line_701bd_125 {
        display:none
    }

    ._copyRightText_701bd_79 {
        flex-direction: column
    }
}
.bcell_mid {
    width: 100%; /* تأكد من أن النافبار يستخدم العرض الكامل */
}

.navbar {
    display: flex; /* استخدام flex لتوزيع العناصر بشكل أفقي */
    flex-wrap: wrap; /* يسمح للعناصر بالانتقال إلى السطر التالي عند الحاجة */
    justify-content: space-between; /* توزيع العناصر بشكل متساوي */
    padding: 10px; /* مساحة داخلية */
    list-style: none; /* إزالة النقاط من القائمة */
}

.navbar li {
    flex: 1 1 auto; /* يتيح للعناصر أن تتكيف مع العرض */
    text-align: center; /* محاذاة النص في المنتصف */
}

.navbar a {
    display: block; /* تأكد من أن الرابط يغطي كامل المساحة */
    padding: 10px; /* مساحة داخلية للرابط */
    text-decoration: none; /* إزالة التسطير من الروابط */
    color: #000; /* تغيير لون النص حسب الحاجة */
}

.navbar a:hover {
    background-color: #f0f0f0; /* تغيير الخلفية عند التحويم */
}
.regist {
    /* Existing styles */
    transition: background-color 0.3s, transform 0.3s; /* Add transform transition */
}

.regist:hover {
    background-color: #0056b3; /* Existing hover color */
    transform: scale(1.05); /* Slightly increase size on hover */
}
@media screen and (max-width: 768px) {
    .statistics-section {
        flex-direction: row; /* Stack items vertically on small screens */
        align-items: center; /* Center items */
    }

    .whatsapp-chatbox {
        width: 90%; /* Full width on small screens */
        max-width: 300px; /* Limit max width */
    }
}
@media screen and (max-width: 768px) {
    #intro_top {
        background-size: auto 100%;
        background-position: center 0px;
    }
}

@media screen and (max-width: 1100px) {
    #intro_top {
        background-size: auto 100%;
        background-position: center 0px;
        padding: 80px 0;
    }
}

.navbar {
	display: flex;
    flex-wrap: nowrap;
    /* padding: 10px; */
    list-style: none;
    flex-direction: row-reverse;
    justify-content: flex-start;
}
.boxshhhs{
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 15px;
    color: white;
}
.navbar button {
    padding: 5px 0px;
    margin: 1px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    white-space: nowrap;

}

.navbar button.active {
    background-color: #2ecc71; /* لون الزر النشط */
}

.navbar button:hover {
    background-color: #2980b9; /* لون الزر عند التحويم */
}