.elementor-52278 .elementor-element.elementor-element-422231e{--display:flex;}.elementor-52278 .elementor-element.elementor-element-cf42c0b{--display:flex;}.elementor-52278 .elementor-element.elementor-element-92596d0{--display:flex;}body.elementor-page-52278:not(.elementor-motion-effects-element-type-background), body.elementor-page-52278 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FCFCFC;}:root{--page-title-display:none;}/* Start custom CSS for html, class: .elementor-element-a07ab28 *//* ============================================================
   أفكار القدرات — Hero CSS (تجربة أولية)
   Prefix: aq-hero-
   بدون Tailwind — CSS يدوي بالكامل
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800;900&display=swap');

.aq-hero-section {
  --aq-hero-primary: hsl(215, 60%, 25%);
  --aq-hero-primary-foreground: hsl(210, 40%, 98%);
  --aq-hero-secondary: hsl(239, 84%, 67%);
  --aq-hero-accent: hsl(25, 95%, 53%);
  --aq-hero-accent-foreground: hsl(0, 0%, 100%);
  --aq-hero-foreground: hsl(210, 50%, 15%);
  --aq-hero-muted-foreground: hsl(210, 15%, 45%);
  --aq-hero-border: hsl(210, 20%, 90%);

  direction: rtl;
  font-family: 'Tajawal', sans-serif;
  position: relative;
  padding: 0 0 24px;
  overflow: hidden;
  box-sizing: border-box;
  background-color: #FCFCFC;
}

.aq-hero-section *,
.aq-hero-section *::before,
.aq-hero-section *::after {
  box-sizing: border-box;
}

.aq-hero-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(24px, 4vw, 56px);
}

.aq-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: center;
}

@media (min-width: 1024px) {
  .aq-hero-grid {
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: start;
  }
}

/* ---------- المحتوى ---------- */

.aq-hero-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.aq-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FDECE8;
  color: #C2410C;
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  width: fit-content;
}

.aq-hero-icon-star {
  flex-shrink: 0;
}

.aq-hero-title {
  font-family: 'Tajawal', sans-serif;
  font-weight: 800;
  color: #0f4c46;
  font-size: clamp(28px, 5vw + 12px, 36px);
  line-height: 1.25;
  margin: 0;
}

/* من 1024px فأكثر، الشبكة تصير عمودين (نص + صورة)
   فعمود النص ياخذ مساحة أكبر نسبيًا ويتحمل خط أكبر بدون انكسار */
@media (min-width: 1024px) {
  .aq-hero-title { font-size: 52px; }
}

.aq-hero-title-accent {
  color: #C2410C;
}

.aq-hero-description {
  font-size: 18px;
  line-height: 1.8;
  color: var(--aq-hero-muted-foreground);
  max-width: 480px;
  margin: 0;
}

@media (min-width: 768px) {
  .aq-hero-description { font-size: 20px; }
}

.aq-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.aq-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'Tajawal', sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  line-height: 1;
}

.aq-hero-btn-telegram {
  background: #229ED9;
  color: #ffffff;
}

.aq-hero-btn-telegram:hover {
  background: #1b87ba;
  color: #ffffff;
}

.aq-hero-icon-telegram {
  flex-shrink: 0;
}

.aq-hero-btn-outline {
  background: transparent;
  border-color: hsla(173, 80%, 30%, 0.3);
  color: #0D9488;
}

.aq-hero-btn-outline:hover {
  background: hsla(173, 80%, 30%, 0.05);
  color: #0D9488;
}

.aq-hero-btn-sm {
  font-size: 14px;
  padding: 10px 20px;
}

.aq-hero-icon-arrow,
.aq-hero-icon-play {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

/* ---------- الصورة ---------- */

.aq-hero-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.aq-hero-visual-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
}

.aq-hero-visual-img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  box-shadow: none;
}

/* ---------- المربعات العائمة ---------- */
/* القيم مطابقة حرفيًا لكود Atoms الأصلي:
   bg-white rounded-xl shadow-lg p-3 border border-border/50 animate-float
   موضع: -top-4/-right-4 (أي -16px) | أيقونة: w-8 h-8 rounded-lg | animate 3s ease-in-out */

.aq-hero-float {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #ffffff;
  border: 1px solid hsla(210, 20%, 90%, 0.5);
  border-radius: 10px; /* rounded-xl */
  padding: 8px 9px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); /* shadow-lg */
  animation: aq-hero-float 6s ease-in-out infinite;
  z-index: 5;
}

.aq-hero-float-top-right {
  top: -8px;
  right: -8px;
  animation-delay: 0s;
}

.aq-hero-float-top-left {
  top: -8px;
  left: -8px;
  animation-delay: 0.5s;
}

.aq-hero-float-bottom-right {
  bottom: 18px;
  right: -8px;
  animation-delay: 1s;
}

.aq-hero-float-bottom-left {
  bottom: 18px;
  left: -8px;
  animation-delay: 1.5s;
}

.aq-hero-float-icon {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.aq-hero-float-icon svg {
  width: 11px;
  height: 11px;
}

.aq-hero-float-icon-1 { background: hsla(173, 80%, 30%, 0.1); color: #0D9488; }
.aq-hero-float-icon-2 { background: hsla(25, 95%, 53%, 0.1); color: var(--aq-hero-accent); }
.aq-hero-float-icon-3 { background: hsla(173, 80%, 30%, 0.1); color: #0D9488; }
.aq-hero-float-icon-4 { background: hsla(25, 95%, 53%, 0.1); color: var(--aq-hero-accent); }

.aq-hero-float-label {
  font-size: 10.5px;
  color: #6b7280;
  font-weight: 700;
  white-space: nowrap;
}

@keyframes aq-hero-float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 640px) {
  .aq-hero-float {
    padding: 8px 10px;
  }
  .aq-hero-float-label {
    font-size: 11px;
  }
  .aq-hero-float-icon {
    width: 26px;
    height: 26px;
  }
}

/* زر "تسجيل الدخول" بقسم Hero — يظهر فقط بعرض الجوال الحقيقي
   (نفس منطق زر الهيدر بالضبط)، مخفي بالآيباد وسطح المكتب */
.aq-hero-btn-mobile-only {
  display: none;
}

@media (max-width: 600px) {
  .aq-hero-btn-mobile-only {
    display: inline-flex;
  }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-055d643 *//* ============================================================
   أفكار القدرات — Course Band CSS (تجربة تصميمية بديلة)
   Prefix: aq-band-
   معزول تمامًا عن aq-hero- و aq-course- (نسخة الـ Card السابقة)
   Full-width Band بخلفية تركوازية + انتقال عضوي (موجة)
   ============================================================ */

.aq-band-section {
  --aq-band-teal: #1D9E80;
  --aq-band-teal-light: #E4F5F1;
  --aq-band-teal-mid: #9FD9CC;
  --aq-band-teal-dark: #0D6B57;
  --aq-band-coral: #E8644A;
  --aq-band-coral-light: #FCEEE9;
  --aq-band-coral-mid: #F5B8AC;
  --aq-band-coral-dark: #9E3A26;

  direction: rtl;
  font-family: 'Tajawal', sans-serif;
  position: relative;
  width: 100%;
  background: linear-gradient(160deg, #F7F8F9 0%, #EDEFF1 100%);
  padding: 46px 0 55px;
  overflow: hidden;
  box-sizing: border-box;
}

.aq-band-section *,
.aq-band-section *::before,
.aq-band-section *::after {
  box-sizing: border-box;
}

/* دوائر زخرفية موزعة على كامل عرض الشريط */
.aq-band-section::before,
.aq-band-section::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.aq-band-section::before {
  width: 320px;
  height: 320px;
  background: var(--aq-band-teal);
  opacity: 0.05;
  top: -120px;
  right: -80px;
}

.aq-band-section::after {
  width: 260px;
  height: 260px;
  background: var(--aq-band-coral);
  opacity: 0.05;
  bottom: -100px;
  left: -60px;
}

/* ---------- الموجة الانتقالية ---------- */

.aq-band-wave {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  line-height: 0;
  z-index: 2;
}

.aq-band-wave-bottom {
  top: auto;
  bottom: 0;
}

.aq-band-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .aq-band-wave {
    height: 70px;
  }
}

/* ---------- الحاوية ---------- */

.aq-band-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 8px 24px 0;
}

.aq-band-header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
}

/* حركة الظهور — نفس لغة Hero بالضبط (منحنى، مدة، إزاحة).
   الكلاس المخفي (.aq-reveal-init) يُضاف فقط عبر JS وقت التشغيل — بدون
   JS، العنوان يبقى بحالته الطبيعية الظاهرة (لا إخفاء افتراضي بالـ CSS). */
.aq-band-header.aq-reveal-init {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 560ms cubic-bezier(0.22, 1, 0.36, 1);
}

.aq-band-header.aq-reveal-init.aq-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.aq-band-title {
  font-family: 'Tajawal', sans-serif;
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -0.3px;
  color: var(--aq-band-teal-dark);
  margin: 0 0 14px;
}

@media (min-width: 768px) {
  .aq-band-title { font-size: 38px; }
}

.aq-band-subtitle {
  font-size: 16px;
  line-height: 1.8;
  color: var(--aq-band-teal-dark);
  opacity: 0.85;
  margin: 0;
}

@media (min-width: 768px) {
  .aq-band-subtitle { font-size: 17.5px; }
}

/* ---------- شبكة العناصر ---------- */

.aq-band-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 960px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .aq-band-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .aq-band-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }
}

.aq-band-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  border-radius: 16px;
  padding: 22px 12px;
  cursor: default;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* حركة الظهور — نفس منحنى Hero، مدة أقصر (عنصر أصغر وأخف بصريًا) وإزاحة
   أخف. الكلاس المخفي يُضاف فقط عبر JS — بدون JS، البطاقات تبقى ظاهرة. */
.aq-band-item.aq-reveal-init {
  opacity: 0;
  transform: translateY(16px);
}

.aq-band-item.aq-reveal-init,
.aq-band-item.aq-reveal-init.aq-reveal-visible {
  transition: opacity 440ms cubic-bezier(0.22, 1, 0.36, 1) var(--aq-item-delay, 0ms),
              transform 440ms cubic-bezier(0.22, 1, 0.36, 1) var(--aq-item-delay, 0ms),
              box-shadow 0.25s ease;
}

.aq-band-item.aq-reveal-init.aq-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger خفيف وغير ملحوظ — فروقات 60ms بس بين كل بطاقة والتالية.
   عبر متغير CSS (مو transition-delay مباشر) لتفادي تعارض التخصيص مع
   قاعدة .aq-reveal-init.aq-reveal-visible (3 كلاسات = تخصيص أعلى كان
   يلغي التأخير بالكامل — مثبَت بالاختبار الفعلي). */
.aq-band-item:nth-child(1) { --aq-item-delay: 0ms;   }
.aq-band-item:nth-child(2) { --aq-item-delay: 60ms;  }
.aq-band-item:nth-child(3) { --aq-item-delay: 120ms; }
.aq-band-item:nth-child(4) { --aq-item-delay: 180ms; }
.aq-band-item:nth-child(5) { --aq-item-delay: 240ms; }

.aq-band-item-quant {
  background: #DDF3EA;
  border: 1px solid hsla(173, 65%, 35%, 0.2);
}

.aq-band-item-verbal {
  background: #FCE6DA;
  border: 1px solid hsla(11, 70%, 55%, 0.22);
}

.aq-band-item:hover {
  transform: translateY(-6px) scale(1.03);
}

/* استعادة تأثير hover بعد اكتمال حركة الظهور — قاعدة .aq-reveal-visible
   (3 كلاسات) كانت تطغى على :hover العادي بسبب تخصيص أعلى (مثبَت
   بالاختبار الفعلي: صفر حركة عند hover بعد ظهور البطاقة). هذي القاعدة
   بتخصيص أعلى (4) تستعيد نفس تأثير الرفع بعد الظهور بالضبط. */
.aq-band-item.aq-reveal-init.aq-reveal-visible:hover {
  transform: translateY(-6px) scale(1.03);
}

.aq-band-item-quant:hover {
  box-shadow: 0 14px 30px rgba(13, 107, 87, 0.16);
}

.aq-band-item-verbal:hover {
  box-shadow: 0 14px 30px rgba(158, 58, 38, 0.16);
}

.aq-band-item-check {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
}

.aq-band-item-quant .aq-band-item-check { color: var(--aq-band-teal-dark); }
.aq-band-item-verbal .aq-band-item-check { color: var(--aq-band-coral-dark); }

.aq-band-item-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(.22,.68,0,1.4);
}

.aq-band-item:hover .aq-band-item-icon {
  transform: scale(1.12) rotate(-5deg);
}

.aq-band-icon-quant {
  background: #AEE3D3;
  color: var(--aq-band-teal-dark);
}

.aq-band-icon-verbal {
  background: #F6C9B3;
  color: #8b4332;
}

.aq-band-item-label {
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}

.aq-band-item-quant .aq-band-item-label { color: var(--aq-band-teal-dark); }
.aq-band-item-verbal .aq-band-item-label { color: var(--aq-band-coral-dark); }

.aq-band-item-desc {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.5;
  margin-top: -4px;
  opacity: 0.65;
  color: #444;
}

@media (max-width: 480px) {
  .aq-band-item-desc { font-size: 10.5px; }
}

/* ---------- زر الدخول للدورات ---------- */

.aq-band-cta-wrap {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.aq-band-cta-wrap.aq-reveal-init {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 440ms cubic-bezier(0.22, 1, 0.36, 1) 280ms,
              transform 440ms cubic-bezier(0.22, 1, 0.36, 1) 280ms;
}

.aq-band-cta-wrap.aq-reveal-init.aq-reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.aq-band-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #ffffff;
  color: var(--aq-band-coral-dark);
  border: 1.5px solid var(--aq-band-coral);
  font-family: 'Tajawal', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 11px 32px;
  border-radius: 14px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  /* صفر transition هنا عمدًا — هذا يخلي أي جهاز لمس (بدون حالة hover
     حقيقية) يحصل تغيير فوري بالاتجاهين (دخول وخروج) تلقائيًا، بدون أي
     حاجة لتعقيد إضافي. السلاسة (Sweep) تُضاف فقط لأجهزة الماوس الحقيقية
     بالأسفل، داخل نطاق (hover: hover) — مو هنا. */
}

.aq-band-cta-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--aq-band-coral);
  transform: scaleX(0);
  transform-origin: right;
  z-index: 0;
  /* صفر transition هنا كمان لنفس السبب أعلاه */
}

/* الحركة التدريجية (Sweep) بالاتجاهين — دخول وخروج — فقط للأجهزة اللي
   فيها ماوس حقيقي. نضيف transition هنا فقط (مو بالقاعدة الأساسية)، عشان
   اللمس يبقى فوريًا دائمًا، والماوس يبقى سلسًا دائمًا (بالدخول والخروج
   معًا، بما إن :hover إزالته ترجع لنفس هذا الـ transition المعرَّف هنا). */
@media (hover: hover) and (pointer: fine) {
  .aq-band-cta-btn {
    transition: color 0.3s, border-color 0.3s;
  }

  .aq-band-cta-btn::before {
    transition: transform 0.35s cubic-bezier(.22, .68, 0, 1.2);
  }

  .aq-band-cta-btn:hover::before {
    transform: scaleX(1);
  }

  .aq-band-cta-btn:hover {
    color: #ffffff;
    border-color: var(--aq-band-coral);
  }
}

/* لأجهزة اللمس (آيباد/موبايل): تغيير فوري متزامن بالاتجاهين (دخول وخروج)،
   بدون اعتماد على :active وحدها — لأن iOS Safari أحيانًا لا يُطلِّقها
   بثقة على اللمس. الكلاس مضبوط عبر touchstart/touchend بملف
   aq-course-band.html. بما إن القاعدة الأساسية بلا transition أصلاً،
   الخروج (إزالة الكلاس) فوري تلقائيًا بدون أي قاعدة إضافية مطلوبة. */
.aq-band-cta-btn:active::before,
.aq-band-cta-btn.is-touch-active::before {
  transform: scaleX(1);
}

.aq-band-cta-btn:active,
.aq-band-cta-btn.is-touch-active {
  color: #ffffff;
  border-color: var(--aq-band-coral);

}

.aq-band-cta-btn span,
.aq-band-cta-btn svg {
  position: relative;
  z-index: 1;
}

.aq-band-cta-btn svg {
  transition: transform 0.2s ease;
}

.aq-band-cta-btn:hover svg {
  transform: translateX(-3px);
}

/* prefers-reduced-motion: ظهور فوري كامل لكل عناصر القسم، بدون أي
   انتقال أو تأخير — نفس مبدأ Hero بالضبط */
@media (prefers-reduced-motion: reduce) {
  .aq-band-header.aq-reveal-init,
  .aq-band-item.aq-reveal-init,
  .aq-band-cta-wrap.aq-reveal-init,
  .aq-band-header.aq-reveal-init.aq-reveal-visible,
  .aq-band-item.aq-reveal-init.aq-reveal-visible,
  .aq-band-cta-wrap.aq-reveal-init.aq-reveal-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}/* End custom CSS */