.s-comments-page {
    display: none;
   }
   


.shape--head-bottom path {
    fill: #e6e6e6; /* استبدلي هذا اللون باللون اللي تحبيه */
}



.ntaq-hero {
    background-color: #a3a3a3 !important; /* اللون الخلفية */
    width: 100%;               /* يغطي العرض كامل */
    min-height: 100vh;         /* ارتفاع افتراضي يملأ الشاشة */
    background-size: cover;    /* يضمن تغطية كاملة لو في صورة خلفية */
    background-position: center; /* تمركز الخلفية */
    background-repeat: no-repeat; /* لا تكرار الخلفية */
}







/* التحكم بحجم الصور داخل السكشن الجديد فقط */
.custom-swiper-section .swiper-slide img {
  width: 100%;       /* عرض الصورة */
  height: 100%;      /* ارتفاع الصورة */
  object-fit: contain; /* يحافظ على أبعاد الصورة بدون تشويه */
  margin: 0 auto;      /* لتوسيط الصورة */
}




.custom-swiper-section .slide-label {
    margin-top: -50px;
    background-color: #f34e0c;
    }

.custom-swiper-section .swiper-slide p {
  font-size: 14px;
  margin-top: 5px;
  color: #333;
  text-align: center;
}

.custom-swiper-section .swiper-button-next,
.custom-swiper-section .swiper-button-prev {
  color: #d4af37; /* لون زرار التنقل */
}







.hero-card {
    background: #3a3a3a;
    
    
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    }








.faq-item {
    font-size: large;
    background: #f24d09;
    }






/*landing padge*/ 
.justify-center {
    background-color: #3a3a3a;
   
}
@media (min-width: 1024px) {
    .lg\:w-10\/12 {
        background-color: #3a3a3a;
        width: 100%;
    }
}

.py-5 {
    background: #3a3a3a;
    }
    
    
   



.font-bold {
    display: none;
    
}

.terms {
   
   
    padding: 50px 16px 120px;
    }
    .shape--head-bottom {
    transform: rotate(180deg);
    bottom: -22px;
    z-index: 0;
}


.title {
    color: #383838;
   
  
}

.chips {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    justify-items: center;
}



/*قائمة العناصر */ 
.banner-entry {
 
    border-radius: 20px;
    height: 300px;
    }
    
    
    
    
    
    
    .s-block__title {
  
    display: block;
    }
    
    s-comments-page {
    display: none;
   
}
    
    /* ================== Counters ================== */
.counter-section {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 2rem;
    padding: 2rem 1rem;
    text-align: center;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* تابلت */
@media (min-width: 768px) and (max-width: 1023px) {
    .counter-section {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* كمبيوتر */
@media (min-width: 1024px) {
    .counter-section {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

.counter-box {
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
    border-radius: 1rem;
    padding: 2rem 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.counter-box:hover {
    transform: translateY(-6px);
}

.counter-number {
    font-size: 2.2rem;
    font-weight: 700;
    color: #111827;
    display: block;
}

.counter-title {
    margin-top: 0.5rem;
    font-size: 1.1rem;
    color: #374151;
}


/* ==================الاقسام================== */
   


.custom-books-section {
  margin-top: 50px;
}

.custom-slider {
  position: relative;
  overflow: hidden;
  max-width: 100%;
  text-align: center;
}

.slider-wrapper {
  display: flex;
  transition: transform 0.6s ease;
}

.slide {
  min-width: 100%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.slide.active {
  display: flex;
}

.slide img {
  width: 250px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.slide a.btn {
  margin-top: 10px;
  font-size: 13px;
  padding: 6px 14px;
}

.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #071a52;
  color: #fff;
  border: none;
  font-size: 24px;
  padding: 5px 10px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 2;
}

.nav-btn:hover {
  background: #d4af37;
}

.nav-btn.prev {
  right: 10px;
}

.nav-btn.next {
  left: 10px;
}





/* ================== اقساطنا ================== */

.big-banner {
    
    box-shadow: none;
    
}
.big-banner img {
    border-radius: 20px;
    }
    
    
    .s-block__title h2 {
    color: #f0f1f3;
    font-size: 1.5rem;
    font-weight: 900;
    }
    
    
        .s-block__title p {
        font-size: larger;
        color: cornsilk;
        }
        
        
        
        
     /* ==================الشروط ================== */
  .sub {
    color: black;
    } 
        
/* الوضع الافتراضي: موبايل */
.chips {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* اتنين جنب بعض */
  gap: 10px;
  justify-items: center; /* يخلي العناصر في النص */
}

.chips .chip {
  min-width: 140px;
  padding: 6px 8px;
  font-size: 14px;
  text-align: center;
}

/* التالت ينزل لوحده في النص */
.chips .chip:nth-child(3) {
  grid-column: 1 / span 2;   /* يخليها تاخد عرض العمودين */
  justify-self: center;      /* يخليها في النص */
}

/* من أول 768px (تابلت وفوق): نخليهم صف واحد */
@media (min-width: 768px) {
  .chips {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: nowrap;
  }

  .chips .chip {
    min-width: 180px;
    font-size: 16px;
  }

  /* التالت يرجع طبيعي */
  .chips .chip:nth-child(3) {
    grid-column: auto;
    justify-self: auto;
  }
}




/* ==================اراء العمللاء   ================== */

.reviews-section {
  padding: 40px 20px;        /* المسافة الداخلية للسكشن */
     background-color: #383838; /* خلفية السكشن */
  text-align: center;        /* توسيط النصوص */
}

.reviews-title {
  font-size: 30px;           /* حجم عنوان السكشن */
  margin-bottom: 20px;       /* المسافة أسفل العنوان */
      color: #f24d09;            /* لون العنوان */
}

.reviews-slider {
  display: flex;             /* ترتيب البوكسات أفقياً */
  gap: 25px;                 /* المسافة بين البوكسات */
  overflow-x: auto;          /* السماح بالتمرير أفقياً */
  scroll-behavior: smooth;   /* حركة سلسة عند التمرير */
  padding-bottom: 10px;      /* مسافة أسفل السلايدر */
}

/* كل بوكس رأي */
.review-box {
  flex: 0 0 auto; 
      height: 550px;           /* يمنع البوكس من التقلص */
    width: 288px;           /* عرض البوكس */
 background: transparent;
    border-radius: 20px;
    box-shadow: 0 2px 6px rgb(237 106 35);
  padding: 0;                /* إزالة أي padding افتراضي */
  text-align: center;        /* توسيط المحتوى داخل البوكس */
}

/* صورة العميل داخل البوكس */
.review-box img {
     width: 100%;
    height: 60%;
    border-radius: 20px 20px 0 0;
  object-fit: cover;         /* تغطية كاملة للصورة بدون تشويه */
}

/* اسم العميل */
.review-box h4 {
  font-size: 16px;           /* حجم الاسم */
     color: #ed6a23;           /* لون الاسم */
  margin: 10px 0 5px 0;      /* مسافة فوق وتحت الاسم */
}

/* نص رأي العميل */
.review-box p.review-text {
  font-size: 14px;           /* حجم النص */
  color: white;               /* لون النص */
  margin: 0 10px 10px 10px;  /* مسافة حول النص داخل البوكس */
}

/* شريط التمرير */
.reviews-slider::-webkit-scrollbar {
  height: 6px;               /* ارتفاع شريط التمرير */
}

.reviews-slider::-webkit-scrollbar-thumb {
  background: #d4af37;       /* لون المقبض */
  border-radius: 3px;        /* تدوير زوايا المقبض */
}



/* الوضع الافتراضي (للكمبيوتر) */
.next-btn { right: 5%; }
.prev-btn { left: 5%; }
.slider-btn {
  width: 45px;
  height: 45px;
  font-size: 24px;
}

/* التابلت */
@media (max-width: 1024px) {
  .next-btn { right: 2%; }
  .prev-btn { left: 2%; }
  .slider-btn {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* الموبايل */
@media (max-width: 768px) {
  .next-btn { right: -5%; }
  .prev-btn { left: -5%; }
  .slider-btn {
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
}














/* ==================من نحن================== */

#swektAbout .swa-about .pic img {
    border-radius: 20px;
    }

#swektAbout .swa-about .pic {
   
    box-shadow: none;
}
#swektAbout {
    --bg: rgb(58 58 58);
    }
    #swektAbout .swa-card h3 {
   

    text-align: center;
    }
    
       #swektAbout .swa-card p {
  
    padding-left: 5px;
    padding-right: 5px;
    color: #ffffff;
     letter-spacing: normal; /* يلغي أي مسافة بين الحروف */
    word-spacing: normal;   /* يلغي أي مسافة بين الكلمات */
}

#swektAbout .swa-grid {
    margin-right: 10%;
  
    gap: 25px;
    grid-template-columns: repeat(14, 1fr);
}

#swektAbout .swa-sub {
    
    color: #ffffff;
    }
    
    #swektAbout .swa-h2 {
   
    margin: 24px 0 24px;
    font-size: clamp(22px, 10vw, 28px);
   
}
#swektAbout .swa-card {

    background: #ed6a23;
    }



#swektAbout .swa-h2 {
    color: burlywood;
    }
    
    #swektAbout .swa-about p {
   
    color: #ffffff;
}

#swektAbout summary {
    font-size: x-large;
    justify-content: center;
 
}
#swektAbout .swa-test h3 {
    color: white;
    
    margin: 40px 0 30px;

    font-size: 35px;
}

.swa-test > p {
  font-size: 1.4rem;   /* حجم أكبر */
  line-height: 2;      /* مسافة بين السطور */
  color: #ffffff;      /* أبيض */
  font-weight: 500;    /* وزن متوسط (اختياري) */
}


/* التنسيق الافتراضي (جوال) */
.swa-test > p {
  text-align: center;
  margin: 20px 20px;
  font-size: 1rem;
  line-height: 1.7;
  color: #ffffff;
  font-weight: 500;
}

/* تابلت (من 768px فأكثر) */
@media (min-width: 768px) {
  .swa-test > p {
    margin: 10px 80px;
    font-size: 1.1rem;
  }
}

/* كمبيوتر / لابتوب (من 1024px فأكثر) */
@media (min-width: 1024px) {
  .swa-test > p {
    margin: 20px 200px;
    font-size: 1.2rem;
  }
}

/* شاشات كبيرة جداً (من 1440px فأكثر) */
@media (min-width: 1440px) {
  .swa-test > p {
    margin: 10px 300px;
    font-size: 1.3rem;
  }
}


/* الجوال (الافتراضي) */
#swektAbout .swa-about p {
  text-align: center;
  color: #ffffff;
  margin: 20px 15px;      /* فوق وتحت 20px / يمين ويسار 15px */
  font-size: 0.95rem;
  line-height: 1.6;
}

/* التابلت (من 768px فأكثر) */
@media (min-width: 768px) {
  #swektAbout .swa-about p {
    margin: 30px 60px;   /* فوق وتحت 30px / يمين ويسار 60px */
    font-size: 1.05rem;
    line-height: 1.7;
  }
}

/* الكمبيوتر / الشاشات الكبيرة (من 1024px فأكثر) */
@media (min-width: 1024px) {
  #swektAbout .swa-about p {
   
    font-size: 1.15rem;
    line-height: 1.8;
  }
}


/* ====== النص p ====== */
.swa-cta .swa-sub {
  color: #000000 !important;  /* أسود */
  text-align: center;         /* في النص */
  margin: 15px 0;             /* مسافة فوق وتحت */
  font-size: 1rem;            /* حجم افتراضي */
  font-weight: 500;
}

/* ====== الزر a ====== */
.swa-cta .swa-whatsapp-btn {
  display: inline-block; 
  background: #25d366;   /* أخضر واتساب */
  color: #ffffff;        
  padding: 12px 24px;    
  border-radius: 8px;    
  text-decoration: none; 
  font-size: 1rem;
  font-weight: bold;
  transition: background 0.3s ease;
}

.swa-cta .swa-whatsapp-btn:hover {
  background: #d4af37;   /* ذهبي عند الهوفر */
  color: #000000;        
}

/* ================== ميديا كويريز ================== */

/* موبايل صغير */
@media (max-width: 480px) {
  .swa-cta .swa-sub {
    font-size: 0.9rem;
    margin: 10px 0;
    padding: 0 10px; /* مساحة جانبية للنص */
  }

  .swa-cta .swa-whatsapp-btn {
    font-size: 0.9rem;
    padding: 10px 18px;
    width: 90%;          /* يمتد بعرض شبه كامل */
    text-align: center;
  }
}

/* تابلت */
@media (min-width: 481px) and (max-width: 1023px) {
  .swa-cta .swa-sub {
    font-size: 1rem;
    margin: 12px 0;
  }

  .swa-cta .swa-whatsapp-btn {
    font-size: 1rem;
    padding: 12px 20px;
  }
}

/* كمبيوتر */
@media (min-width: 1024px) {
  .swa-cta .swa-sub {
    font-size: 1rem !important;
    margin: 15px auto !important;   /* يغلب الـ inline style */
    max-width: 700px;
    text-align: center !important;  /* يخلي الكلام في النص */
    display: block;
  }
}



  .swa-cta .swa-whatsapp-btn {
    font-size: 1.1rem;
    padding: 14px 28px;
  }




/* يغطي كل حالات اللينك وأي عناصر بداخل اللينك */
.acc-body a,
.acc-body a:link,
.acc-body a:visited,
.acc-body a:hover,
.acc-body a:active,
.acc-body a:focus,
.acc-body a * {
  color: #ed6a23 !important;
  -webkit-text-fill-color: #ed6a23 !important; /* لكروم/سفاري في حالات الـ webkit */
  text-decoration: none !important;
}






/* ==============تواصل معنا ==================== */

/* ================== إخفاء العنصر غير المرغوب ================== */
.bg-gray-100 {
    display: none;
}

/* ================== ضبط الهوامش والحشوة ================== */
.lg\:p-8 {
    margin: 0 auto;
    padding: 0;
}

/* ================== قسم الاتصال ================== */
.contact-hero {
    width: 88%;
    margin: 0 auto;
    background: linear-gradient(135deg, #3a3a3a 0%, #393939 60%);
}


#swektAbout .swa-about .pic img {
    border-radius: 20px;
    }

/* ترتيب عناصر الاتصال */
.contacts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* روابط النصوص */
.opt-text a {
    text-decoration: none;
    font-size: larger;
    color: white;
}

/* روابط البريد داخل tag */
a.tag.email span {
    color: white;
}

/* ================== التنسيقات العامة للـ tag ================== */
.tag {
    background: transparent;
    transition: background 0.3s ease;
        font-size: 1.3rem;
}

.tag:hover {
    background: #c65c31;
}

/* ================== الأزرار ================== */
.btn-outline {
    background: #555555;
    color: white;
    transition: background 0.3s ease;
}

.wa .btn:hover {
    background: #c65c31; /* اللون البرتقالي عند التحويم */
}

/* ================== البطاقات ================== */
.card {
    text-align: center;
    grid-column: span 12;
    background: #d5d8de;
    padding: 20px;
    border-radius: 12px;
    box-sizing: border-box;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

.card p {
    text-align: center;
    margin: 10px 0 0;
}

b, strong {
    color: white;
}

/* ================== الواتساب ================== */
.wa {
    width: 88%;
    margin: 20px auto 40px; /* مسافة فوق وتحت */
}

/* ================== الـ details ================== */
details {
    background: #f1672fc4;
    padding: 10px;
    border-radius: 8px;
}

.panel {
    color: white;
}

/* ================== البادج ================== */
.badge {
    font-size: 20px;
    color: #fdfaf9;
}

/* ================== شبكة المقالات ================== */
.grid.row-2 {
    display: flex;
    justify-content: space-between;
    width: 88%;
    margin: 40px auto; /* مسافة فوق وتحت */
    gap: 20px;
    flex-wrap: wrap; /* للجيل على شاشات أصغر */
}

.grid.row-2 .card {
    flex: 1;
    box-sizing: border-box;
    min-width: 280px; /* الحد الأدنى للعرض للجوّال */
}

/* ================== استجابة التابلت (768px - 1023px) ================== */
@media (min-width: 768px) and (max-width: 1023px) {
    .wa {
        width: 88%;
        margin-right: 33px !important;
    }

    .grid.row-2 {
        flex-direction: column; /* ترتيب المقالات تحت بعض */
        gap: 20px;
        width: 88%;
    }
}

/* ================== استجابة الجوال (<768px) ================== */
@media (max-width: 767px) {
    .grid.row-2 {
        flex-direction: column;
        gap: 15px;
        width: 95%; /* توسيع العرض للجوال */
        margin: 20px auto;
    }

    .wa {
        width: 95%;
        margin: 20px auto;
    }

    .card {
        padding: 15px;
    }
}





.contact-links {
    display: flex;
    flex-wrap: wrap;       /* يسمح بانتقال العناصر للسطر التالي */
    justify-content: center; 
    gap: 15px;             /* مسافة بين العناصر */
}

/* كل رابط ياخد نصف العرض تقريبًا على الجوال */
@media (max-width: 767px) {
    .contact-links a {
        flex: 0 0 48%;   /* عرض 48% لكل رابط مع ترك مسافة */
        box-sizing: border-box;
    }
}

/* على الشاشات الأكبر يبقى طبيعي (جانب بعض) */
@media (min-width: 768px) {
    .contact-links a {
        flex: 0 0 auto; /* يسمح بالعرض الطبيعي للروابط */
    }
}


.banner {
    
    box-shadow: none; 
    background: transparent;
}

.banner img {
    border-radius: 20px;
    }
    
    
    
    
    
    /* ==================الهيدر ================== */
    
    
  /* ====== تنسيقات الهيدر ====== */
.custom-header {
  background-color: #333537;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 30px;
  font-family: "Cairo", sans-serif;
  direction: rtl;
  position: relative;
  min-height: 56px;
}
.custom-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff6b1f, #d35400);
}
.nav-links {
  display: flex;
  gap: 18px;
  align-items: center;
  white-space: nowrap;
  font-size: 16px;
}
.nav-links a {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.95;
  transition: color .18s, opacity .18s;
}
.nav-links a:first-child {
  font-weight: 600;
}
.nav-links a:hover {
  color: #ffd4a6;
  opacity: 1;
}
.order-btn {
  background-color: #ffffff;
  color: #f15a24;
  border: none;
  border-radius: 24px;
  padding: 8px 22px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.order-btn:hover {
  transform: translateY(-2px);
  background-color: #f15a24;
  color: #fff;
}
@media (max-width: 900px) {
  .custom-header { padding: 12px 18px; }
  .nav-links { gap: 12px; font-size: 14px; }
  .order-btn { padding: 7px 16px; font-size: 15px; }
  .nav-links a { display: none; }
}