/* ========================================================= كبسولة شرعية — Stylesheet ========================================================= */ :root { /* Brand palette (derived from logo) */ --brand-primary: #5b35d5; --brand-primary-dark: #3d2499; --brand-primary-light: #8b75f5; --brand-coral: #f45c3a; --brand-coral-dark: #c43d24; --brand-teal: #0d7a6e; --brand-orange: #e8960f; --bg-body: #f5f1ea; --bg-alt: #edeaff; --bg-dark: #120d28; --text-dark: #18152b; --text-muted: #635e7a; --text-light: #ffffff; --border-soft: rgba(91, 53, 213, 0.1); /* Themeable surface colors (used by cards, header, dropdowns) */ --card-bg: #ffffff; --header-bg: rgba(250, 249, 246, 0.85); --header-bg-scrolled: rgba(250, 249, 246, 0.96); --input-bg: var(--bg-body); --input-bg-focus: #ffffff; /* Section tint backgrounds (light mode) */ --bg-features-tint: #f0ecff; --bg-courses-tint: #fff8f0; --bg-testimonials-tint: #f0ecff; --bg-contact-tint: #ffffff; --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px; --radius-pill: 999px; --shadow-sm: 0 4px 16px rgba(91, 53, 213, 0.08); --shadow-md: 0 12px 32px rgba(91, 53, 213, 0.13); --shadow-lg: 0 24px 60px rgba(91, 53, 213, 0.18); --font-display: "Cairo", sans-serif; --font-body: "Tajawal", sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ========================================================= Dark theme overrides Toggled by adding data-theme="dark" on (see scripts.js). Every section below reads its colors from the variables above, so switching themes updates the whole page consistently. ========================================================= */ [data-theme="dark"] { --bg-body: #100c22; --bg-alt: #1c1836; --bg-dark: #0a0716; --text-dark: #f1eefc; --text-muted: #a9a4c9; --text-light: #ffffff; --border-soft: rgba(255, 255, 255, 0.09); --card-bg: #1a1533; --header-bg: rgba(16, 12, 34, 0.85); --header-bg-scrolled: rgba(16, 12, 34, 0.97); --input-bg: #150f2c; --input-bg-focus: #1a1533; --bg-features-tint: #191033; --bg-courses-tint: #1e1730; --bg-testimonials-tint: #191033; --bg-contact-tint: #150f2c; color-scheme: dark; } * { box-sizing: border-box; } :root { /* Fallback; scripts.js keeps this in sync with the real navbar height so the hero and anchor-scrolling never sit under the fixed header. */ --header-h: 84px; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 14px); } body { font-family: var(--font-body); color: var(--text-dark); background: var(--bg-body); overflow-x: hidden; transition: background-color 0.35s var(--ease), color 0.35s var(--ease); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 800; color: var(--text-dark); } p { color: var(--text-muted); line-height: 1.9; margin-bottom: 0; } a { text-decoration: none; } img { max-width: 100%; display: block; } ::selection { background: var(--brand-primary); color: #fff; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } :focus-visible { outline: 3px solid var(--brand-orange); outline-offset: 3px; } /* ========================================================= Utility ========================================================= */ .section-py { padding: 48px 0; } .section-py-sm { padding: 20px 0; } @media (min-width: 768px) { .section-py { padding: 60px 0; } .section-py-sm { padding: 24px 0; } } @media (min-width: 992px) { .section-py { padding: 72px 0; } .section-py-sm { padding: 28px 0; } } .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.5px; color: var(--brand-primary); background: rgba(91, 53, 213, 0.09); padding: 6px 18px; border-radius: var(--radius-pill); margin-bottom: 12px; } .section-heading { max-width: 640px; margin: 0 auto 40px; } .section-heading.text-start { margin: 0; } .section-heading h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); margin-bottom: 14px; } .section-heading p { font-size: 1.05rem; } .text-accent { color: var(--brand-coral); position: relative; } .link-more { font-weight: 700; color: var(--brand-primary); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .link-more i { transition: transform 0.3s var(--ease); } .link-more:hover i { transform: translateX(-6px); } .link-more:hover { color: var(--brand-primary-dark); } /* Buttons */ .btn { font-family: var(--font-display); font-weight: 700; } .btn-pill { border-radius: var(--radius-pill); padding: 0.75rem 1.75rem; } .btn-brand { background: var(--brand-primary); border-color: var(--brand-primary); color: #fff; display: inline-flex; align-items: center; gap: 8px; transition: all 0.3s var(--ease); box-shadow: 0 8px 20px rgba(91, 53, 213, 0.22); } .btn-brand:hover { background: var(--brand-primary-dark); border-color: var(--brand-primary-dark); color: #fff; transform: translateY(-3px); box-shadow: 0 14px 28px rgba(53, 37, 205, 0.32); } .btn-brand i { transition: transform 0.3s var(--ease); } .btn-brand:hover i { transform: translateX(-5px); } .btn-outline-brand { border: 2px solid var(--brand-primary); color: var(--brand-primary); background: transparent; transition: all 0.3s var(--ease); } .btn-outline-brand:hover { background: var(--brand-primary); color: #fff; transform: translateY(-3px); } .btn-whatsapp { background: #25d366; border-color: #25d366; color: #fff; display: inline-flex; align-items: center; gap: 10px; box-shadow: 0 10px 24px rgba(37, 211, 102, 0.35); transition: all 0.3s var(--ease); } .btn-whatsapp:hover { background: #1fb057; color: #fff; transform: translateY(-3px) scale(1.03); } /* ========================================================= Loader ========================================================= */ #page-loader { position: fixed; inset: 0; z-index: 9999; background: var(--bg-body); display: flex; align-items: center; justify-content: center; transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); } #page-loader.loaded { opacity: 0; visibility: hidden; } .loader-capsule { width: 60px; height: 100px; border: 4px solid var(--brand-primary); border-radius: 40px; position: relative; overflow: hidden; animation: capsuleSpin 1.4s ease-in-out infinite; } .loader-capsule span { position: absolute; right: 0; left: 0; height: 50%; } .loader-capsule span:first-child { top: 0; background: #fff; } .loader-capsule span:last-child { bottom: 0; background: var(--brand-coral); } @keyframes capsuleSpin { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } } /* ========================================================= Scroll progress bar ========================================================= */ #scroll-progress { position: fixed; top: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--brand-coral), var(--brand-primary)); width: 0%; z-index: 1100; transition: width 0.1s linear; } /* ========================================================= Navbar ========================================================= */ #main-header { z-index: 1000; background: var(--header-bg); backdrop-filter: blur(14px); border-bottom: 1px solid transparent; transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), padding 0.3s var(--ease); } #main-header.scrolled { background: var(--header-bg-scrolled); border-color: var(--border-soft); box-shadow: var(--shadow-sm); } #main-header .navbar { padding-top: 10px; padding-bottom: 10px; transition: padding 0.3s var(--ease); } #main-header.scrolled .navbar { padding-top: 6px; padding-bottom: 6px; } .brand-logo { height: 42px; width: auto; transition: transform 0.3s var(--ease); } .navbar-brand:hover .brand-logo { transform: rotate(-8deg) scale(1.05); } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--brand-primary); white-space: nowrap; } @media (min-width: 576px) { .brand-name { font-size: 1.25rem; } } .navbar-nav .nav-link { font-family: var(--font-display); font-weight: 600; color: var(--text-dark); position: relative; padding: 8px 14px !important; transition: color 0.25s; } .navbar-nav .nav-link::after { content: ""; position: absolute; right: 14px; left: 14px; bottom: 2px; height: 2px; background: var(--brand-primary); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--ease); } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--brand-primary); } .navbar-nav .nav-link:hover::after, .navbar-nav .nav-link.active::after { transform: scaleX(1); } /* Theme toggle — lives outside #navMenu so it's always visible, collapsed menu or not, mobile or desktop. */ .theme-toggle { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--border-soft); background: var(--card-bg); color: var(--brand-primary); display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; font-size: 1.05rem; cursor: pointer; flex-shrink: 0; transition: all 0.3s var(--ease); } .theme-toggle i { display: flex; align-items: center; justify-content: center; line-height: 1; } .navbar-nav .theme-toggle { margin-top: 14px; } @media (min-width: 992px) { .navbar-nav .theme-toggle { margin-top: 0; margin-inline-start: 10px; } } .theme-toggle:hover { transform: translateY(-2px) rotate(-8deg); box-shadow: var(--shadow-sm); } .theme-toggle .theme-icon-sun { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } [data-theme="dark"] .theme-toggle .theme-icon-sun { display: block; color: var(--brand-orange); } .navbar-toggler { border: none; padding: 6px; background: transparent; } .navbar-toggler:focus { box-shadow: none; outline: none; } .toggler-line { display: block; width: 26px; height: 3px; margin: 5px 0; background: var(--brand-primary); border-radius: 3px; transition: all 0.3s var(--ease); } /* ── Collapsed mobile menu ──────────────────────────── */ @media (max-width: 991.98px) { #main-header .navbar { flex-wrap: wrap; } /* الـ collapse menu: خلفية ناعمة + padding مريح */ #navMenu.show, #navMenu.collapsing { background: var(--header-bg-scrolled); border-top: 1px solid var(--border-soft); margin: 0 -12px; /* يمتد لأقصى الناڤبار */ padding: 12px 16px 16px; border-radius: 0 0 var(--radius-md) var(--radius-md); } /* قائمة الروابط: عمودية ومتساوية */ #navMenu .navbar-nav { width: 100%; gap: 2px !important; margin-top: 0 !important; } /* كل رابط: padding أكبر للمس الراحة */ #navMenu .navbar-nav .nav-link { padding: 11px 16px !important; border-radius: var(--radius-sm); transition: background-color 0.2s, color 0.2s; } #navMenu .navbar-nav .nav-link:hover, #navMenu .navbar-nav .nav-link.active { background: rgba(91, 53, 213, 0.07); } /* أزرار تسجيل الدخول / إنشاء حساب: صف ممتد */ #navMenu > div.d-flex { width: 100%; margin-top: 12px !important; margin-bottom: 0 !important; gap: 10px !important; } #navMenu > div.d-flex .btn { flex: 1; justify-content: center; text-align: center; } /* theme toggle جوه القائمة المطوية: اخفيه لأنه موجود برة */ #navMenu .navbar-nav .nav-item.d-none { display: none !important; } } /* ── Extra small (< 400px) ──────────────────────────── */ @media (max-width: 399px) { .brand-logo { height: 34px; } .brand-name { font-size: 0.95rem; } .theme-toggle { width: 36px; height: 36px; font-size: 0.95rem; } } /* ========================================================= Hero ========================================================= */ .hero-section { position: relative; /* mobile-first: padding يحسب ارتفاع الناڤبار تلقائياً */ padding: calc(var(--header-h, 72px) + 36px) 0 60px; overflow: hidden; min-height: 100svh; display: flex; align-items: center; background: var(--bg-body); } @media (min-width: 992px) { .hero-section { padding-top: calc(var(--header-h, 84px) + 56px); padding-bottom: 80px; min-height: 90vh; } } .hero-pattern { position: absolute; inset: 0; background-image: radial-gradient(var(--brand-primary) 1px, transparent 1px); background-size: 26px 26px; opacity: 0.05; pointer-events: none; } .hero-blob { position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; animation: blobFloat 12s ease-in-out infinite; } .blob-1 { width: 420px; height: 420px; top: -120px; left: -100px; background: radial-gradient(circle, rgba(91, 53, 213, 0.22), transparent 70%); } .blob-2 { width: 380px; height: 380px; bottom: -140px; right: -80px; background: radial-gradient( circle, rgba(255, 111, 94, 0.22), transparent 70% ); animation-delay: -6s; } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(20px, -30px) scale(1.08); } } .badge-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; background: #ffe2de; color: var(--brand-coral-dark); padding: 8px 18px; border-radius: var(--radius-pill); margin-bottom: 22px; } .badge-eyebrow i { color: var(--brand-coral); } .hero-title { font-size: clamp(2.2rem, 4.5vw, 3.4rem); line-height: 1.25; margin-bottom: 20px; } .hero-quote { font-family: var(--font-display); font-weight: 600; color: var(--brand-primary); border-right: 4px solid var(--brand-coral); padding-right: 16px; font-size: 1.05rem; margin-bottom: 20px; } [dir="rtl"] .hero-quote { border-right: 4px solid var(--brand-coral); border-left: none; padding-right: 16px; } .hero-text { font-size: 1.1rem; margin-bottom: 34px; max-width: 560px; } .text-lg-end.text-center .hero-text { margin-inline: auto; } .hero-cta-wrap { position: relative; margin-bottom: 36px; } /* الـ inner يوسّط الزر في منتصف الكولم مع السهم فوقه مباشرةً */ .hero-cta-inner { display: flex; flex-direction: column; align-items: center; position: relative; } @media (min-width: 992px) { .hero-cta-inner { align-items: flex-start; /* تحريك الزر والسهم مع بعض ناحية منتصف العمود. السهم والزر عنصرين جوه نفس الحاوية دي بالظبط، فلما الحاوية تتحرك بتتحرك بالكامل كوحدة واحدة، والسهم فاضل "مثبّت" ومحاذي لمكان الزر بالظبط زي ما هو من غير ما تختل المسافة بينهم. */ margin-inline-start: 72px; } } .cta-arrow-wrap { position: relative; color: var(--brand-orange); pointer-events: none; flex-shrink: 0; /* السهم يشاور على الزر - نحرّكه بشكل خفيف لليسار لمحاذاة نقطة السهم مع الزر */ align-self: center; margin-bottom: -4px; } @media (min-width: 992px) { .cta-arrow-wrap { align-self: flex-start; margin-right: 20px; } } .cta-arrow { width: 110px; height: auto; } .arrow-path { stroke-dasharray: 220; stroke-dashoffset: 220; animation: drawArrow 2s var(--ease) 0.6s forwards infinite alternate; } @keyframes drawArrow { to { stroke-dashoffset: 0; } } .cta-arrow-label { display: block; font-family: var(--font-display); font-weight: 800; font-size: 0.9rem; transform: rotate(-4deg); margin-top: -6px; } .hero-stats { display: flex; gap: 28px; flex-wrap: wrap; justify-content: center; } @media (min-width: 992px) { .hero-stats { justify-content: flex-start; } } .stat-item { text-align: center; } .stat-number { display: block; font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--brand-primary); } .stat-label { font-size: 0.85rem; color: var(--text-muted); font-weight: 600; } .hero-media { position: relative; display: flex; align-items: center; justify-content: center; } .hero-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 53, 213, 0.17), transparent 70%); filter: blur(10px); animation: pulseGlow 4s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.12); opacity: 1; } } .hero-img { position: relative; z-index: 2; width: min(360px, 78%); filter: drop-shadow(0 30px 40px rgba(91, 53, 213, 0.22)); } .float-anim { animation: floatY 5s ease-in-out infinite; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } /* ========================================================= Hero — Teacher Photo (replaces the logo in the hero visual) ========================================================= */ .hero-teacher-frame { position: relative; z-index: 2; width: min(500px, 94%); aspect-ratio: 1 / 1; border-radius: 50%; padding: 10px; background: linear-gradient(135deg, var(--brand-primary), var(--brand-coral)); box-shadow: 0 34px 60px rgba(91, 53, 213, 0.28); } .hero-teacher-photo { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 6px solid var(--card-bg); display: block; } .hero-teacher-badge { position: absolute; bottom: 4%; right: 4%; z-index: 3; display: inline-flex; align-items: center; gap: 8px; background: var(--card-bg); color: var(--text-dark); font-family: var(--font-display); font-weight: 700; font-size: 0.9rem; padding: 10px 20px; border-radius: var(--radius-pill); box-shadow: var(--shadow-md); white-space: nowrap; } .hero-teacher-badge i { color: var(--brand-teal); font-size: 1.05rem; } @media (max-width: 575.98px) { .hero-teacher-badge { font-size: 0.75rem; padding: 8px 14px; right: 2%; } } .floating-icon { position: absolute; z-index: 3; width: 48px; height: 48px; border-radius: 14px; background: #fff; box-shadow: var(--shadow-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; } .icon-book { top: 12%; right: 6%; color: var(--brand-coral); animation: floatY 4.5s ease-in-out infinite; animation-delay: 0.3s; } .icon-cap { bottom: 16%; left: 2%; color: var(--brand-primary); animation: floatY 5.5s ease-in-out infinite; animation-delay: 0.8s; } .icon-star { top: 46%; left: -6%; color: var(--brand-orange); animation: floatY 4s ease-in-out infinite; animation-delay: 1.2s; width: 44px; height: 44px; font-size: 1.1rem; } .scroll-hint { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); color: var(--brand-primary); font-size: 1.4rem; animation: bounceDown 2s ease-in-out infinite; } @keyframes bounceDown { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } } /* ========================================================= Features ========================================================= */ .feature-card { background: var(--card-bg); border: 1px solid var(--border-soft); border-radius: var(--radius-md); padding: 28px 22px; height: 100%; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease), background-color 0.35s var(--ease); position: relative; overflow: hidden; } .feature-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient( 135deg, rgba(91, 53, 213, 0.05), rgba(255, 111, 94, 0.05) ); opacity: 0; transition: opacity 0.35s var(--ease); } .feature-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); border-color: transparent; } .feature-card:hover::before { opacity: 1; } .feature-icon { width: 62px; height: 62px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin-bottom: 22px; transition: transform 0.4s var(--ease); position: relative; z-index: 1; } .feature-card:hover .feature-icon { transform: rotate(-8deg) scale(1.1); } .icon-purple { background: rgba(91, 53, 213, 0.11); color: var(--brand-primary); } .icon-coral { background: rgba(255, 111, 94, 0.14); color: var(--brand-coral); } .icon-teal { background: rgba(26, 138, 134, 0.12); color: var(--brand-teal); } .feature-card h3 { font-size: 1.2rem; margin-bottom: 10px; position: relative; z-index: 1; } .feature-card p { position: relative; z-index: 1; font-size: 0.95rem; } /* ========================================================= Video section — mobile-first ========================================================= */ .video-frame { position: relative; border-radius: var(--radius-md); /* أصغر على الموبايل */ overflow: hidden; /* موبايل: نسبة أكثر ارتفاعاً تناسب المحتوى */ aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); } @media (min-width: 576px) { .video-frame { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); } } @media (min-width: 992px) { .video-frame { aspect-ratio: 16 / 7; } } .video-cover { width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55); transition: transform 1s var(--ease), filter 0.3s var(--ease); background: #000; } .video-frame:hover .video-cover { transform: scale(1.06); } .video-frame.playing .video-cover { filter: brightness(1); } .video-frame.playing:hover .video-cover { transform: none; } .video-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 16px; gap: 0; transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease); } .video-frame.playing .video-overlay { opacity: 0; visibility: hidden; pointer-events: none; } .video-overlay h2 { color: #fff; margin: 12px 0 6px; font-size: clamp(1.1rem, 4vw, 2rem); } .video-overlay p { color: rgba(255, 255, 255, 0.85); max-width: 480px; font-size: clamp(0.82rem, 2.5vw, 1rem); line-height: 1.6; margin-bottom: 0; } .video-error-hint { color: var(--brand-coral) !important; font-weight: 700; margin-top: 8px; } /* زر التشغيل — mobile-first */ .play-btn { width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--brand-primary); border: none; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; flex-shrink: 0; transition: transform 0.3s var(--ease); } @media (min-width: 576px) { .play-btn { width: 72px; height: 72px; font-size: 1.7rem; } } @media (min-width: 992px) { .play-btn { width: 84px; height: 84px; font-size: 2rem; } } .play-btn:hover { transform: scale(1.1); } .pulse-ring { position: absolute; inset: -10px; border-radius: 50%; border: 3px solid #fff; opacity: 0.7; animation: pulseRing 2s ease-out infinite; } @keyframes pulseRing { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.5); opacity: 0; } } /* ========================================================= Courses ========================================================= */ .course-card { background: var(--card-bg); border-radius: var(--radius-md); overflow: hidden; height: 100%; border: 1px solid var(--border-soft); transition: all 0.4s var(--ease); display: flex; flex-direction: column; } .course-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); } .course-thumb { position: relative; height: 190px; overflow: hidden; } .course-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); } .course-card:hover .course-thumb img { transform: scale(1.12) rotate(1deg); } .course-badge { position: absolute; top: 14px; right: 14px; font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; padding: 5px 14px; border-radius: var(--radius-pill); color: #fff; } .badge-purple { background: var(--brand-primary); } .badge-teal { background: var(--brand-teal); } .badge-coral { background: var(--brand-coral); } .course-body { padding: 26px; display: flex; flex-direction: column; flex: 1; } .course-body h3 { font-size: 1.15rem; margin-bottom: 10px; } .course-body p { font-size: 0.92rem; flex: 1; margin-bottom: 20px; } .course-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px dashed var(--border-soft); padding-top: 18px; } .course-footer .btn { flex: 1; justify-content: center; } .course-price { font-family: var(--font-display); font-weight: 800; color: var(--brand-primary); font-size: 1.15rem; } /* ========================================================= Testimonials ========================================================= */ /* Bootstrap sets non-active carousel items to position:absolute, so height:100% on child cards never resolves. Solution: JS equalTestimonialCards() measures the tallest card across ALL slides (including inactive ones, made briefly visible) then writes --tc-h on the carousel element. CSS reads that var to lock every item + row to the same height. On screens ≤ 991 px the var resets to "auto" and cards stack freely. */ #testimonialCarousel { --tc-h: auto; } #testimonialCarousel .carousel-inner { /* needed so the container itself grows to the locked height */ min-height: var(--tc-h); } #testimonialCarousel .carousel-item { height: var(--tc-h); } #testimonialCarousel .carousel-item .row { height: 100%; align-items: stretch; } #testimonialCarousel .carousel-item .row > [class*="col-"] { display: flex; flex-direction: column; } .testimonial-card { background: var(--card-bg); border-radius: var(--radius-md); padding: 28px 24px; flex: 1; /* fills the stretched column */ width: 100%; border: 1px solid var(--border-soft); position: relative; display: flex; flex-direction: column; box-sizing: border-box; transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.35s var(--ease); } .testimonial-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); } /* Mobile / tablet — الكروت بتتكوّم فوق بعض في عمود واحد، لكن كل كارت بياخد نفس الارتفاع الموحّد (--tc-h) اللي بيتحسب بالجافاسكريبت في كل الشاشات (مش بس الديسكتوب) عشان الكروت تفضل بنفس الحجم في كل سلايد، وارتفاع السلايد الكلي يفضل ثابت بين سلايد وتاني — وده اللي بيمنع أي قفشة/تراكب أثناء التنقل بينهم. */ @media (max-width: 991.98px) { #testimonialCarousel .carousel-inner, #testimonialCarousel .carousel-item, #testimonialCarousel .carousel-item .row { height: auto; min-height: 0; } .testimonial-card { flex: none; width: 100%; height: var(--tc-h); min-height: 180px; } /* On mobile each col is full width to avoid overlap */ #testimonialCarousel .carousel-item .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 16px; } #testimonialCarousel .carousel-item .row > [class*="col-"]:last-child { margin-bottom: 0; } } .quote-icon { font-size: 2.4rem; color: rgba(91, 53, 213, 0.14); } .testimonial-card p { color: var(--text-dark); font-style: italic; margin: 16px 0 24px; flex: 1; } .testimonial-author { display: flex; align-items: center; gap: 14px; } .testimonial-author .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-alt); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-weight: 800; font-family: var(--font-display); flex-shrink: 0; } .testimonial-author h4 { font-size: 1rem; margin-bottom: 2px; } .testimonial-author span { font-size: 0.82rem; color: var(--text-muted); } .carousel-dots { display: flex; justify-content: center; gap: 10px; margin-top: 36px; } .carousel-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--border-soft); padding: 0; transition: all 0.3s var(--ease); } .carousel-dots button.active { background: var(--brand-primary); width: 28px; border-radius: var(--radius-pill); } /* ========================================================= WhatsApp CTA ========================================================= */ .whatsapp-cta { position: relative; overflow: hidden; background: linear-gradient(135deg, #5b35d5, #7c5ce0); border-radius: var(--radius-lg); padding: 60px 40px; text-align: center; } .whatsapp-pattern { position: absolute; inset: 0; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 22px 22px; opacity: 0.08; } .whatsapp-bg-icon { position: absolute; font-size: 12rem; color: rgba(255, 255, 255, 0.08); top: 50%; left: 4%; transform: translateY(-50%) rotate(15deg); } .whatsapp-content { position: relative; z-index: 1; max-width: 560px; margin: 0 auto; } .whatsapp-content h2 { color: #fff; margin-bottom: 14px; } .whatsapp-content p { color: rgba(255, 255, 255, 0.85); margin-bottom: 30px; } /* ========================================================= Contact ========================================================= */ .contact-item { display: flex; gap: 18px; margin-bottom: 20px; } .contact-icon { width: 54px; height: 54px; border-radius: 16px; flex-shrink: 0; background: rgba(91, 53, 213, 0.1); color: var(--brand-primary); display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .contact-item h4 { font-size: 1rem; margin-bottom: 4px; } .contact-item p { font-size: 0.92rem; } .contact-form { background: var(--card-bg); border-radius: var(--radius-lg); padding: 40px; box-shadow: var(--shadow-md); border: 1px solid var(--border-soft); position: relative; transition: background-color 0.35s var(--ease); } .form-label { font-weight: 700; font-size: 0.9rem; margin-bottom: 6px; color: var(--text-dark); } .form-control, .form-select { border-radius: var(--radius-sm); border: 1.5px solid var(--border-soft); padding: 0.75rem 1rem; background: var(--input-bg); color: var(--text-dark); transition: all 0.25s var(--ease); } .form-control::placeholder { color: var(--text-muted); } .form-control:focus, .form-select:focus { border-color: var(--brand-primary); box-shadow: 0 0 0 4px rgba(91, 53, 213, 0.11); background: var(--input-bg-focus); color: var(--text-dark); } [data-theme="dark"] .form-select option { background: var(--card-bg); color: var(--text-dark); } .form-success { display: none; align-items: center; gap: 10px; background: #e6f8ef; color: #1a8a52; padding: 14px 18px; border-radius: var(--radius-sm); margin-top: 18px; font-weight: 700; font-size: 0.92rem; } .form-success.show { display: flex; animation: fadeSlideUp 0.4s var(--ease); } @keyframes fadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= Footer ========================================================= */ .site-footer { background: var(--bg-dark); color: #cfcde3; padding: 56px 0 20px; } .site-footer .brand-name { color: #fff; } .footer-about { font-size: 0.92rem; color: #a5a2c2; line-height: 1.9; } .site-footer h5 { color: #fff; font-size: 1rem; margin-bottom: 20px; } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer-links a { color: #a5a2c2; font-size: 0.92rem; transition: all 0.25s; } .footer-links a:hover { color: var(--brand-orange); padding-right: 4px; } .social-links { display: flex; gap: 12px; margin-top: 20px; } .social-links a { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); color: #fff; display: flex; align-items: center; justify-content: center; transition: all 0.3s var(--ease); } .social-links a:hover { background: var(--brand-coral); transform: translateY(-4px); } .newsletter-form { display: flex; border-radius: var(--radius-pill); overflow: hidden; background: rgba(255, 255, 255, 0.08); } .newsletter-form input { flex: 1; background: transparent; border: none; color: #fff; padding: 12px 18px; outline: none; } .newsletter-form input::placeholder { color: #8683a6; } .newsletter-form button { background: var(--brand-coral); border: none; color: #fff; width: 46px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.3s; } .newsletter-form button:hover { background: var(--brand-coral-dark); } .site-footer hr { border-color: rgba(255, 255, 255, 0.1); margin: 36px 0 20px; } .footer-bottom { text-align: center; font-size: 0.85rem; color: #8683a6; } /* Footer — responsive */ @media (max-width: 767.98px) { .site-footer { padding: 40px 0 16px; } .site-footer .row { gap: 0; } /* brand + about: full width */ .site-footer .col-lg-4 { margin-bottom: 28px; } /* روابط سريعة + دعم: صف في الموبايل */ .site-footer .col-6 { margin-bottom: 24px; } /* newsletter: full width */ .site-footer .col-lg-3:last-child { margin-top: 8px; } } @media (max-width: 575.98px) { .newsletter-form { flex-direction: row; } .newsletter-form input { padding: 10px 14px; font-size: 0.85rem; } } /* ========================================================= Back to top ========================================================= */ #backToTop { position: fixed; bottom: 28px; right: 28px; z-index: 999; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-primary); color: #fff; border: none; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; font-size: 1.2rem; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.35s var(--ease); cursor: pointer; } #backToTop i { display: flex; align-items: center; justify-content: center; line-height: 1; } #backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); } #backToTop:hover { background: var(--brand-primary-dark); transform: translateY(-4px); } /* ========================================================= Scroll reveal ========================================================= */ [data-reveal] { opacity: 0; transform: translateY(36px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-reveal].in-view { opacity: 1; transform: translateY(0); } /* ========================================================= Responsive tweaks ========================================================= */ @media (max-width: 991.98px) { .hero-media { margin-bottom: 12px; } .floating-icon { display: none; } .cta-arrow-wrap { display: none !important; } } @media (max-width: 767.98px) { /* hero: صورة المعلم أصغر على الموبايل */ .hero-teacher-frame { width: min(280px, 82%); } .hero-title { font-size: clamp(1.75rem, 6vw, 2.4rem); } .hero-text { font-size: 1rem; } .hero-stats { gap: 18px; } } @media (max-width: 575.98px) { .whatsapp-cta { padding: 40px 22px; } .whatsapp-bg-icon { display: none; } .contact-form { padding: 26px; } /* back-to-top + whatsapp fab بعيدين عن بعض */ #backToTop { bottom: 90px; } } /* ========================================================= Floating WhatsApp Button ========================================================= */ .whatsapp-fab { position: fixed; bottom: 28px; left: 28px; z-index: 1001; width: 58px; height: 58px; border-radius: 50%; background: #25d366; color: #fff; display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 0; font-size: 1.65rem; text-decoration: none; box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45); transition: all 0.3s var(--ease); animation: waPulse 2.8s ease-in-out infinite; } .whatsapp-fab i { display: flex; align-items: center; justify-content: center; line-height: 1; } .whatsapp-fab:hover { background: #128c4a; color: #fff; transform: translateY(-4px) scale(1.08); box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55); animation: none; } @keyframes waPulse { 0%, 100% { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45); } 50% { box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45), 0 0 0 10px rgba(37, 211, 102, 0.12); } } .whatsapp-fab-tooltip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); background: #111; color: #fff; font-family: var(--font-display); font-size: 0.78rem; font-weight: 700; white-space: nowrap; padding: 5px 12px; border-radius: var(--radius-pill); opacity: 0; pointer-events: none; transition: opacity 0.2s; } .whatsapp-fab:hover .whatsapp-fab-tooltip { opacity: 1; } /* backToTop now sits on the opposite corner from the WhatsApp FAB, so no extra stacking offset is needed. */ #backToTop { bottom: 28px; } @media (max-width: 575.98px) { /* On small screens keep a clear gap from the WhatsApp bubble too */ #backToTop { bottom: 24px; right: 20px; } .whatsapp-fab { bottom: 24px; left: 20px; } } /* ========================================================= Section Background Variants (Color Palette Differentiation) ========================================================= */ .bg-features { background: var(--bg-features-tint); transition: background-color 0.35s var(--ease); } .bg-video { background: var(--bg-dark); transition: background-color 0.35s var(--ease); } .bg-courses { background: var(--bg-courses-tint); transition: background-color 0.35s var(--ease); } /* "قالوا عنا" now shares the same tint as "مميزات المنصة" as requested */ .bg-testimonials { background: var(--bg-testimonials-tint); transition: background-color 0.35s var(--ease); } .bg-whatsapp-cta { background: var(--bg-features-tint); transition: background-color 0.35s var(--ease); } .bg-contact { background: var(--bg-contact-tint); transition: background-color 0.35s var(--ease); } /* ========================================================= Hero Title Fix (reduce top spacing) ========================================================= */ .hero-section { padding-top: calc(var(--header-h) + 46px) !important; padding-bottom: 60px; } @media (max-width: 991.98px) { .hero-section { padding-top: calc(var(--header-h) + 30px) !important; } } .hero-title { font-size: clamp(1.8rem, 3.8vw, 2.9rem) !important; line-height: 1.3; } /* ========================================================= Orange icon color ========================================================= */ .icon-orange { background: rgba(232, 150, 15, 0.13); color: var(--brand-orange); } /* ========================================================= Courses Slider ========================================================= */ .courses-slider-wrap { position: relative; overflow: hidden; border-radius: var(--radius-lg); /* give room for the nav arrows on desktop without clipping them */ padding: 0 30px; } @media (max-width: 767.98px) { .courses-slider-wrap { padding: 0 0 8px; } } .courses-slider { display: flex; transition: transform 0.5s var(--ease); will-change: transform; } .course-slide { min-width: 100%; padding: 0 8px; } /* Mobile: show one card at a time, full-width */ @media (max-width: 767.98px) { /* Each slide holds ONE card on mobile */ .course-slide > .row > [class*="col-"] { width: 100%; flex: 0 0 100%; max-width: 100%; } /* Hide extra cards per slide on mobile - JS handles 1-per-slide */ .course-slide > .row > [class*="col-"]:not(:first-child) { display: none; } /* Equal height card on mobile */ .course-card-tall { min-height: 480px; } } /* Course slides now hold a row of cards; stretch columns to equal height */ .course-slide > .row { align-items: stretch; } .course-slide > .row > [class*="col-"] { display: flex; } .course-card-tall { background: var(--card-bg); border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-soft); display: flex; flex-direction: column; width: 100%; box-shadow: var(--shadow-sm); transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease), background-color 0.35s var(--ease); } .course-card-tall:hover { box-shadow: var(--shadow-lg); transform: translateY(-8px); } .course-thumb-tall { position: relative; width: 100%; height: 210px; flex-shrink: 0; overflow: hidden; } .course-thumb-tall img { width: 100%; height: 100%; object-fit: contain; transition: transform 0.6s var(--ease); } .course-card-tall:hover .course-thumb-tall img { transform: scale(1.06); } .course-body-tall { padding: 28px 26px; display: flex; flex-direction: column; flex: 1; } .course-body-tall h3 { font-size: 1.25rem; margin-bottom: 12px; } .course-desc { font-size: 0.92rem; line-height: 1.85; margin-bottom: 18px; flex: 1; } .course-details-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-wrap: wrap; gap: 10px 20px; } .course-details-list li { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 0.88rem; color: var(--text-dark); } .course-details-list li i { color: var(--brand-primary); font-size: 1rem; } .course-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 50px; height: 50px; border-radius: 50%; background: var(--card-bg); border: 2px solid var(--border-soft); color: var(--brand-primary); font-size: 1.2rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s var(--ease); box-shadow: var(--shadow-sm); } .course-nav-btn:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); transform: translateY(-50%) scale(1.08); } .course-nav-prev { right: -8px; } .course-nav-next { left: -8px; } .courses-dots { display: flex; justify-content: center; gap: 10px; margin-top: 28px; } .courses-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--border-soft); padding: 0; transition: all 0.3s var(--ease); cursor: pointer; } .courses-dots button.active { background: var(--brand-primary); width: 28px; border-radius: var(--radius-pill); } @media (max-width: 767.98px) { .course-thumb-tall { height: 200px; } .course-body-tall { padding: 20px 18px; } .course-nav-btn { width: 38px; height: 38px; font-size: 1rem; } .course-nav-prev { right: 2px; } .course-nav-next { left: 2px; } /* Header row: stack on mobile */ .courses-section .d-flex.flex-wrap { flex-direction: column; align-items: flex-start !important; } } /* ========================================================= Testimonials Navigation Arrows ========================================================= */ .testimonial-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; background: var(--card-bg); border: 2px solid var(--border-soft); color: var(--brand-primary); font-size: 1.1rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s var(--ease); box-shadow: var(--shadow-sm); } .testimonial-nav-btn:hover { background: var(--brand-primary); color: #fff; border-color: var(--brand-primary); } .testimonial-nav-prev { right: -24px; } .testimonial-nav-next { left: -24px; } @media (max-width: 767.98px) { .testimonial-nav-prev { right: 0; } .testimonial-nav-next { left: 0; } } /* ========================================================= Instructor Showcase (free-standing, no card/box — sits directly on the section background next to the testimonials carousel) ========================================================= */ .instructor-showcase { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; width: 100%; padding: 12px 8px; } /* Soft ambient glow behind the photo instead of a boxed panel — echoes the hero-glow so both sections share the same visual language without literally boxing the medallion in. */ .instructor-arch-wrap { position: relative; display: flex; justify-content: center; margin-bottom: 0; } .instructor-glow { position: absolute; top: -14px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 53, 213, 0.2), transparent 70%); filter: blur(8px); } /* Arch / mihrab-shaped medallion: a nod to the mosque window arch instead of a plain square or circle crop. */ .instructor-arch-frame { position: relative; z-index: 1; width: 330px; height: 430px; border-radius: 165px 165px 26px 26px; padding: 10px; background: linear-gradient(140deg, var(--brand-primary), var(--brand-teal)); box-shadow: 0 32px 60px rgba(91, 53, 213, 0.32); } .instructor-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 154px 154px 15px 15px; border: 7px solid var(--card-bg); display: block; } .instructor-glow { width: 370px; height: 370px; } @media (max-width: 991.98px) { .instructor-arch-frame { width: 265px; height: 340px; border-radius: 132px 132px 20px 20px; } .instructor-photo { border-radius: 124px 124px 13px 13px; } .instructor-showcase { padding-bottom: 8px; } } @media (max-width: 575.98px) { .instructor-arch-frame { width: 225px; height: 288px; border-radius: 112px 112px 18px 18px; } .instructor-photo { border-radius: 105px 105px 11px 11px; } } /* ========================================================= WhatsApp Phone Input Form ========================================================= */ .whatsapp-phone-form { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; margin-top: 4px; } .phone-input-wrap { display: flex; align-items: center; background: rgba(255, 255, 255, 0.15); border-radius: var(--radius-pill); overflow: hidden; border: 1.5px solid rgba(255, 255, 255, 0.3); backdrop-filter: blur(4px); } .phone-prefix { padding: 0 14px; font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 0.95rem; border-left: 1.5px solid rgba(255, 255, 255, 0.25); white-space: nowrap; } [dir="rtl"] .phone-prefix { border-left: none; border-right: 1.5px solid rgba(255, 255, 255, 0.25); } .phone-input { background: transparent; border: none; outline: none; color: #fff; padding: 14px 18px; font-size: 1rem; width: 190px; direction: ltr; } .phone-input::placeholder { color: rgba(255, 255, 255, 0.6); } .phone-input.is-invalid { box-shadow: 0 0 0 2px rgba(255, 111, 94, 0.7) inset; border-radius: var(--radius-pill); } .phone-hint { margin-top: 10px; font-size: 0.8rem; color: rgba(255, 255, 255, 0.75); text-align: center; } /* ========================================================= Contact Section — الفورم بقت على اليمين، وصورة المعلم على الشمال (بعد ما كانوا معكوسين) ========================================================= */ .contact-section .contact-form { max-width: 100%; margin: 0; } /* Teacher image in contact section */ .contact-teacher-wrap { padding: 14px 8px 4px; } .contact-teacher-glow { position: absolute; top: -10px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(91, 53, 213, 0.22), transparent 70%); filter: blur(14px); pointer-events: none; } /* زخارف عائمة صغيرة بألوان الهوية البصرية حوالين الشكل — بتضيف حيوية بسيطة من غير ما تحتاج صور إضافية، ومتحركة بـ CSS خفيف. */ .teacher-deco { pointer-events: none; } .teacher-deco-1 { width: 18px; height: 18px; top: 4%; left: 2%; background: var(--brand-coral); opacity: 0.75; animation: decoFloat 5s ease-in-out infinite; } .teacher-deco-2 { width: 13px; height: 13px; bottom: 8%; right: 0; background: var(--brand-teal); opacity: 0.7; animation: decoFloat 6s ease-in-out infinite -2s; } .teacher-deco-icon { top: 0; right: 8%; font-size: 1.5rem; color: var(--brand-orange); opacity: 0.85; animation: decoFloat 4.5s ease-in-out infinite -1s; } @keyframes decoFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* الشكل الجديد: "بلوب" عضوي بحواف منحنية غير منتظمة — مختلف تمامًا عن محراب سكشن قالوا عنا وعن السداسي القديم. الـ GSAP (في scripts.js) بيحرّك قيم الـ border-radius ببطء واستمرار لإحساس حيوي ومميز يناسب هوية المنصة. */ .contact-teacher-blob-wrap { width: 360px; height: 400px; display: flex; align-items: center; justify-content: center; } .contact-teacher-blob-ring { position: absolute; inset: -18px; z-index: 0; background: linear-gradient(155deg, var(--brand-coral), var(--brand-orange)); opacity: 0.5; border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%; } .contact-teacher-blob { position: relative; z-index: 1; width: 100%; height: 100%; padding: 10px; background: linear-gradient(140deg, var(--brand-primary), var(--brand-teal)); border-radius: 63% 37% 54% 46% / 43% 37% 63% 57%; box-shadow: 0 32px 60px rgba(91, 53, 213, 0.32); } .contact-teacher-photo { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 63% 37% 54% 46% / 43% 37% 63% 57%; border: 7px solid var(--card-bg); display: block; } @media (max-width: 1199.98px) { .contact-teacher-blob-wrap { width: 300px; height: 336px; } } /* ========================================================= Video section dark override ========================================================= */ .bg-video .section-heading h2, .bg-video .section-heading p { color: #fff; }