/* =====================================================
   New.css - SolKeys.Net v2.0
   ===================================================== */

/* صندوق حارتنا
linear-gradient(135deg, #03fcec 0%, #021a31 100%) */ 


/* ==================================================================
    نظام بلوكات الصفحة الرئيسة
   ================================================================== */
.row-container {
    display: grid;
    /* نقسم العرض إلى 12 جزءاً لتسهيل الحسابات */
    grid-template-columns: repeat(12, 1fr);
    gap: 40px; /* المسافة بين البلوكات */
    margin-bottom: 20px;
}

/* خيارات التخطيط */
.col-12 { grid-column: span 12; } /* عرض كامل */
.col-11 { grid-column: span 11; }
.col-10  { grid-column: span 10;  }
.col-9  { grid-column: span 9;  } 
.col-8  { grid-column: span 8;  } /* ثلثين العرض */
.col-7  { grid-column: span 7;  } 
.col-6  { grid-column: span 6;  } /* نصف العرض */
.col-5  { grid-column: span 5;  } 
.col-4  { grid-column: span 4;  } /* ثلث العرض */
.col-3  { grid-column: span 3;  } /* ربع العرض */
.col-2  { grid-column: span 2;  } 
.col-1  { grid-column: span 1;  } 

/* تجاوب النظام مع الشاشات الصغيرة */
@media (max-width: 768px) {
    /*.row-container { grid-template-columns: 1fr; }
    .col-12, .col-6, .col-3, .col-4, .col-8 { grid-column: span 1; }
    .col-5, .col-7, .col-9, .col-10, .col-11 { grid-column: span 1; }
    .col-1, .col-2 { grid-column: span 1; }*/
/* إلغاء الـ Grid والتحويل إلى تدفق طبيعي للعناصر */
    .row-container {
        display: block !important; /* تحويل الحاوية لكتلة عادية */
        width: 100% !important;
        margin: 0 !important;
        padding: 0 15px !important; /* إضافة هامش جانبي بسيط للحماية */
    }

    /* إلغاء قواعد الـ Grid للأعمدة لتعود لحجمها الطبيعي (100%) */
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, 
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        display: block !important;
        width: 100% !important;
        grid-column: auto !important; /* إلغاء الـ span 1 */
        margin-bottom: 20px; /* مسافة بين البلوكات في الجوال */
    }
    .stat-card { margin-bottom: 20px; }
}

/* ==================================================================
   [ تنسيقات عامة للبلكات ]
   ================================================================== */
   .modern-wrapper { 
    width: 92%; 
    max-width: 1240px; 
    margin: 0 auto; 
    padding-bottom: 60px; 
}

.section-header-modern { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin: 50px 0 30px 0; 


}

.section-header-modern h2 { 
    font-size: 1.8rem; 
    font-weight: 800; 
    color: var(--section-header-text); 
    position: relative; 
    padding-bottom: 10px; 
}

.section-header-modern h2::after { 
    content: ''; 
    position: absolute; 

    bottom: 0; right: 0; 
    width: 50px; height: 4px; 
    background: var(--section-header-bg); 
    border-radius: 2px; 
    
}

/* ==================================================================
   [بلوك الهيرو heroblock ]
   ================================================================== */
.heroblock {
    /* تجعل تموضع الحاوية نسبياً، لتسمح بالعناصر الداخلية ذات التموضع المطلق (Absolute) بالتحرك داخلها */
    position: relative;

    color: var(--hero-text);
    
    /* تحديد الحد الأدنى لارتفاع الحاوية بـ 550 بكسل، بحيث لا تصغر عن ذلك مهما كان المحتوى قليلاً */
    min-height: 550px;
    
    /* جعل حواف الحاوية دائرية، وتأخذ قيمتها من متغير CSS مسبق الصنع */
    border-radius: var(--card-radius);
    
    /* وضع مسافة خارج الحاوية: 40 بكسل من الأعلى والأسفل، وتوسيطها تلقائياً من اليمين واليسار */
    margin: 40px auto;
    
    /* تحديد عرض الحاوية ليكون 92% من عرض شاشة المتصفح المتاحة */
    width: 92%;
    
    /* وضع حد أقصى لعرض الحاوية لا يمكن تجاوزه وهو 1240 بكسل حتى لا تتمدد بشكل مفرط على الشاشات الكبيرة */
    max-width: 1240px;
    
    /* وضع خلفية مدمجة: تدرج لوني مائل بزاوية 135 درجة، وفوقه صورة ممركزة بالمنتصف، وتغطي كامل المساحة بدون تكرار */
    /* background: linear-gradient(135deg, rgba(35, 17, 51, 0.95) 30%, rgba(88, 51, 122, 0.6)); */
    background: var(--hero-bg);
    /* تفعيل نظام الشبكة لترتيب العناصر الداخلية */
    display: grid;
    
    /* تقسيم الشبكة إلى عمودين بنسبة حجم 1.2 للعمود الأول و 0.8 للعمود الثاني */
    grid-template-columns: 1.2fr 0.8fr;
    
    /* محاذاة وتوسيط العناصر الداخلية عمودياً داخل أعمدة الشبكة */
    align-items: center;
    
    /* إضافة مسافة حشو داخلية بمقدار 60 بكسل من جميع الجهات لتبتعد العناصر عن حواف الحاوية */
    padding: 60px;
    
    /* إخفاء أي محتوى داخلي أو أطراف زائدة تخرج عن حدود الحاوية الدائرية */
    overflow: hidden;
    
    /* إضافة تأثير ظل ناعم تحت الحاوية لإعطائها عمقاً بصرياً (تأثير ثلاثي الأبعاد) */
    box-shadow: 0 30px 60px rgba(35, 17, 51, 0.15);
    
    /* احتساب الحشو الداخلي (Padding) والإطار ضمن العرض والارتفاع الإجمالي للحاوية دون زيادة حجمها */
    box-sizing: border-box;
}


.heroblock::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="40" fill="rgba(255,255,255,0.03)"/><circle cx="80" cy="80" r="60" fill="rgba(255,255,255,0.03)"/></svg>');
  pointer-events: none;
  /* قمنا بجعل الخلفية تقرأ متغيراً مخصصاً، وإذا لم يجده (في حال عدم وجود صورة) يضع الدوائر تلقائياً */
}

/* سطر السحر: إذا كانت الحاوية تملك كلاس الصورة، تختفي الدوائر تماماً */
.heroblock.has-image::before {
    display: none !important;
}

.heroblock .hero-inner-content {
    /*color: var(--hero-text);*/
    z-index: 5;
}

.heroblock .hero-badge {
    background: var(--hero-badge-bg);
    color: var(--hero-badge-text);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 0.85rem;
    font-weight: 700;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid rgba(224, 170, 62, 0.3);
    animation: pulse 2s infinite;
}

.heroblock h1 {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1.4;
    margin-bottom: 20px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.3);
}

.heroblock p {
    font-size: 1.2rem;
    opacity: 0.9;
    line-height: 1.8;
    margin-bottom: 35px;
}

.heroblock .hero-buttons {
    display: flex;
    gap: 15px;
}

.heroblock .btn-hero-primary {
    background: var(--hero-btn-primary-bg);
    color: var(--hero-btn-primary-text);
    padding: 14px 32px;
    border-radius: 14px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(224, 170, 62, 0.3);
    transition: var(--transition-bounce);
}

.heroblock .btn-hero-primary:hover {
    transform: translateY(-5px);
}

.btn-hero-secondary {
  background: transparent;
  color: var(--hero-btn-secondary-text);
  border-color: rgba(255,255,255,0.7);
}
.btn-hero-secondary:hover {
  background: var(--hero-btn-secondary-text);
  color: var(--hero-btn-primary-text);
  transform: translateY(-5px);
}

/* شبكة المربعين المعلقة داخل الهيرو */
.heroblock .HangingShields-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 140px));
    gap: 20px;
    z-index: 5;
    position: relative;
    justify-content: end;
}

@media (min-width: 992px) {
    .heroblock .HangingShields-grid {
        position: absolute;      /* تفعيل الطيران والتموضع المطلق الذكي على الكمبيوتر فقط */
        top: 40px;               /* مسافة احترافية وموزونة عن الحافة العلوية للهيرو */
        left: 40px;              /* مسافة احترافية وموزونة عن الحافة اليسرى للهيرو للانسجام البصري */
        right: auto;             /* إلغاء محاذاة اليمين */
        grid-template-columns: repeat(2, 130px); /* تثبيت عرض الكروت على الكمبيوتر */
        gap: 15px;
        margin-top: 0;           /* تصفير هوامش الجوال */
        margin-bottom: 0;
    }
}

.heroblock .HangingShields-card {
    background: var(--hero-hanging-bg);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.6);
    padding: 10px;
    border-radius: var(--card-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 20px 40px rgba(35, 17, 51, 0.05);
    transition: var(--transition-bounce);
}

.heroblock .HangingShields-card img {
    max-width: 100%;
    height: auto;
}

.heroblock .HangingShields-card:hover { 
    transform: translateY(-12px); 
    background: var(--hero-hanging-hover-bg); 
    box-shadow: 0 30px 50px rgba(88, 51, 122, 0.1); 
}

@media (max-width: 992px) {
    .heroblock {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        min-height: auto;
        gap: 40px;
    }
    .heroblock h1 { font-size: 2.2rem; }
    .heroblock .HangingShields-grid { justify-content: center; }
}

/* ==================================================================
   [بلوك الإحصائيات المضمن مع الهيرو statshblock ]
   ================================================================== */
.statshblock { /* .hero-image-wrapper*/
    position: relative;
}

.statshblock .hero-image-inner {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: var(--radius-xl);
    padding: 30px;
    text-align: center;
    backdrop-filter: blur(10px);
    margin-top: 85px;
}

.statshblock .hero-stats-mini {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 1px;
}

.statshblock .hero-stat-item {
    background: rgba(255,255,255,0.1);
    border-radius: var(--radius-md);
    padding: 15px;
    text-align: center;
}

.statshblock .hero-stat-item .num {
    font-size: 1.6rem;
    font-weight: 800;
    color: #d4b896;
}

.statshblock .hero-stat-item .label {
    font-size: 0.78rem;
    opacity: 0.8;
    margin-top: 3px;
}

/* ==================================================================
   [بلوك الإحصائيات statsblock ]
   ================================================================== */

.statsblock { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); 
    gap: 25px; 
    margin-top: -20px; /*تم التحكم به من خلال دالة createBlock في ملف الدوال*/
    position: relative; 
    z-index: 10; 
    padding: 0 20px; 
    /*background: var(--stats-bg);*/
}


.statsblock .stat-blur-card { 
    background: rgba(255, 255, 255, 0.9); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255,255,255,0.6); 
    padding: 35px 25px; 
    border-radius: var(--card-radius); 
    text-align: center; 
    box-shadow: 0 20px 40px rgba(35, 17, 51, 0.05); 
    transition: var(--transition-bounce); 
}

.statsblock .stat-blur-card:hover { 
    transform: translateY(-12px); 
    background: #fff; 
    box-shadow: 0 30px 50px rgba(88, 51, 122, 0.1); 
}

/* مستقلة */

.statsblock .stat-card {
  text-align: center;
  padding: 30px 20px;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform var(--transition);
  border-top: 4px solid var(--accent-color);
}

.statsblock .stat-card:hover { transform: translateY(-5px); }
/* نهاية مستقلة */

.statsblock .stat-ico{
    font-size: 2.2rem; 
    color: var(--accent-color);
}

.statsblock .stat-label{
    font-weight: 700; 
    color: var(--stats-text);
}
.statsblock .stat-count { 
    font-size: 2.5rem; 
    font-weight: 800; 
    color: var(--stats-text); 
    margin-bottom: 5px; 
}

@media (min-width: 992px) {
    .statsblock { 
        /* يعود الكرت ليرتفع ويعلق فوق الهيرو البنفسجي على الكمبيوتر فقط */
        margin-top: -80px; 
    }
}

/* ==================================================================
   [بلوك الأخبار newsblock ]
   ================================================================== */
.newsblock {
  /*background: var(--news-bg);*/
  color: var(--news-text);
}

.newsblock .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 25px;
}

.newsblock .card {
  background: var(--white);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
}

.newsblock .card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.newsblock .card-image {
  height: 200px;
  overflow: hidden;
  background: var(--bg);
  flex-shrink: 0;
}

.newsblock .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform var(--transition);
}

.newsblock .card:hover .card-image img { 
    transform: scale(1.05); 
}

.newsblock .card-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.newsblock .card-date {
  font-size: 0.8rem;
  color: var(--secondary);
  font-weight: 600;
  margin-bottom: 8px;
}

.newsblock .card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--news-title);
  margin-bottom: 10px;
  line-height: 1.4;
}

.newsblock .card-text {
  font-size: 0.9rem;
  color: var(--news-text);
  flex: 1;
  margin-bottom: 15px;
}

.newsblock .card-link {
  color: var(--primary);
  font-weight: 600;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  align-self: flex-start;
}

.newsblock .card-link:hover { color: var(--secondary); }

@media (max-width: 768px) {
  .newsblock .cards-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}

@media (max-width: 480px) {
  .newsblock .cards-grid { grid-template-columns: 1fr; }
}

/* ==================================================================
   [بلوك البرامج programsblock ]
   ================================================================== */
.programsblock {
  /*background: var(--programs-bg);*/
  color: var(--programs-text);
}

.programsblock .programs-card { 
    background: #fff; 
    border-radius: var(--card-radius); 
    padding: 20px; 
    display: flex; 
    gap: 20px; 
    margin-bottom: 20px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.01); 
    transition: var(--transition-bounce); 
}

.programsblock .programs-card:hover { 
    transform: scale(1.02); 
    box-shadow: 0 15px 35px rgba(88, 51, 122, 0.06); 
}

.programsblock .card-content{
    display: flex; 
    flex-direction: column; 
    justify-content: center;
    color: var(--programs-text);
}

.programsblock .card-date {
    font-size: 0.8rem; 
    color: var(--accent-color); 
    font-weight: 600;
}

.programsblock .card-title {
    font-size: 1.15rem; 
    font-weight: 700; 
    margin: 5px 0 10px 0;
    color: var(--programs-title);
}

.programsblock .programs-card .img-holder { 
    width: 130px; 
    height: 130px; 
    border-radius: 16px; 
    object-fit: cover; 
}

/* ==================================================================
   [بلوك المبادرات initiativesblock ]
   ================================================================== */
.initiativesblock {
  /*background: var(--programs-bg);*/
  color: var(--initiatives-text);
}

.initiativesblock .card { 
    background: #fff; 
    padding: 20px; 
    border-radius: 16px; 
    margin-bottom: 15px; 
    border-right: 5px solid var(--initiatives-title); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.01); 
    transition: var(--transition-bounce); 
    color: var(--initiatives-text);
    cursor: pointer;
}

.initiativesblock .card:hover { 
    background: var(--initiatives-title); 
    /*color: #fff !important; */
    transform: translateX(-5px); 
}

.initiativesblock .card-title { 
    font-weight: 700; 
    font-size: 1rem; 
    margin-top: 5px; 
    color: var(--initiatives-title);
}

/* ==================================================================
   [بلوك الدونات donationsblock ]
   ================================================================== */
.donationsblock {
  /*background: var(--donation-bg);*/
  color: var(--donation-text);
}

.donationsblock .grid-donations { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); 
    gap: 30px; 
}

.donationsblock .donation-modern-card { 
    background: var(--white); 
    border-radius: var(--card-radius); 
    padding: 30px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.02); 
    border: 1px solid rgba(88, 51, 122, 0.03); 
    transition: var(--transition-bounce); 
    display: flex; 
    flex-direction: column; 
    justify-content: space-between; 
}

.donationsblock .donation-modern-card a { 
    background: var(--donations-btn); 
    color: var(--donations-btn-text); 
    text-align: center; 
    padding: 12px; 
    border-radius: 12px; 
    text-decoration: none; 
    font-weight: 700; 
    margin-top: 25px; 
    display: block; 
    transition: var(--transition-bounce);
}
.donationsblock .donation-modern-card:hover { 
    transform: translateY(-8px); 
    box-shadow: 0 20px 45px rgba(88, 51, 122, 0.08); 
}

.donationsblock .progress-bar-wrap { 
    background: var(--progress-bar-wrap);/*#eeeaf2;*/ 
    border-radius: 20px; 
    height: 10px; 
    margin: 25px 0 12px 0; 
    overflow: hidden; 
}

.donationsblock .progress-bar-fill { 
    background: var(--donations-fill);/*linear-gradient(90deg, var(--accent-color), var(--primary-color)); */
    height: 100%; 
    border-radius: 20px; 
}

/* ==================================================================
   [بلوك الشركاء partnersblock ]
   ================================================================== */
.partnersblock { 
    direction: rtl; 
    background: transparent; /*var(--partners-bg);*/
    width: 100%; 
    padding: 0; 
}

.marquee-dual-container { 
    display: flex; 
    flex-direction: column; 
    gap: 20px; 
    width: 100%; 
}

.marquee-container { 
    width: 100%; 
    overflow: hidden; 
    padding: 5px 0; 
    position: relative;
    max-width: 100vw;
    overflow: hidden;
}

.marquee-track { 
    display: flex; 
    gap: 15px; 
    width: max-content; 
    will-change: transform; 
}

.partner-card { 
    background: #ffffff; 
    border-radius: 16px; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.02); 
    width: 150px; 
    height: 125px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    padding: 10px; 
    box-sizing: border-box; 
    flex-shrink: 0; 
}

.partner-card img { 
    max-width: 100%; 
    max-height: 100%; 
    object-fit: contain; 
    filter: grayscale(1); 
    opacity: 0.6; 
    transition: 0.3s; 
}

.partner-card:hover img { 
    filter: grayscale(0); 
    opacity: 1; 
}

/* ==================================================================
   [بلوك قالوا عنا testimonialsblock ]
   ================================================================== */
.testimonialsblock { 
    direction: rtl; 
    padding: 0 20px; 
    text-align: center; 
    /*background: var(--testimonials-bg);*/
}

.testimonialsblock .slider-container { 
    max-width: 800px; 
    min-height: 350px;
    max-height: 350px;

    margin: 0 auto; 
    border: 1px solid #e2e8f0; 
    border-radius: 16px; 
    padding: 50px 60px; 
    position: relative; 
    background: #ffffff; 
    box-shadow: 0 10px 25px rgba(0,0,0,0.02); 
}

.testimonialsblock .custom-slide { 
    display: none; 
    animation: fadeIn 0.5s ease-in-out; 
}

.testimonialsblock .custom-slide.active { 
    display: block; 
}

.testimonialsblock .slide-text { 
    color: var(--testimonials-text);
    font-size: 0.80 rem;
    line-height: 1.8; 
    display: -webkit-box;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.testimonialsblock .slide-text-btn {
  /*margin-top:12px;*/
  font-size:0.8rem;
  color:var(--secondary);
  cursor: pointer;
  margin-bottom: 25px; 
  text-align: left;
}

.testimonialsblock .slide-name { 
    color: var(--testimonials-title); 
    font-size: 1.0rem; 
    margin: 0 0 5px 0; 
}

.testimonialsblock .slide-job { 
    color: var(--testimonials-text);
    font-size: 0.75rem; 
}

.testimonialsblock .nav-btn { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    background: none; 
    border: none; 
    color: #b58d4a; 
    font-size: 28px; 
    cursor: pointer; 
    padding: 10px; 
    z-index: 5; 
    transition: opacity 0.2s; 
}

.testimonialsblock .prev-btn { right: 20px; } 
.testimonialsblock .next-btn { left: 20px; }

.testimonialsblock .dots-container { 
    margin-top: -5px; 
}

.testimonialsblock .dot { 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
    background: #e2e8f0; 
    border-radius: 50%; 
    margin: 0 6px; 
    cursor: pointer; 
    transition: background 0.3s; 
}

.testimonialsblock .dot.active { 
    background: #b58d4a; 
}