:root {
             --primary: #1A4F96;
             --primary-light: #3A72C7;
             --primary-dark: #0A2D5C;
             --accent: #FF7B00;
             --accent-light: #FFB066;
             --coral: #FF6B6B;
             --teal: #06B6D4;
             --dark: #FFFFFF;
             --dark-2: #F8FAFC;
             --dark-3: #F1F5F9;
             --dark-4: #E2E8F0;
             --card-bg: rgba(255, 255, 255, 0.95);
             --glass: rgba(0, 0, 0, 0.03);
             --glass-border: rgba(0, 0, 0, 0.09);
             --text: #1E293B;
             --text-muted: #64748B;
             --text-dim: #94A3B8;
             --white: #FFFFFF;
             --radius-sm: 8px;
             --radius-md: 16px;
             --radius-lg: 24px;
             --radius-xl: 32px;
             --shadow-glow: 0 0 40px rgba(45, 84, 135, 0.35);
             --shadow-card: 0 8px 40px rgba(0, 0, 0, 0.1);
             --transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
             --shadow-elev-1: 0 10px 30px rgba(2, 6, 23, 0.08);
             --shadow-elev-2: 0 20px 60px rgba(2, 6, 23, 0.14);
             --ring: 0 0 0 3px rgba(45, 84, 135, 0.18);
             --surface-1: rgba(255, 255, 255, 0.92);
             --surface-2: rgba(255, 255, 255, 0.82);
             --border-strong: rgba(15, 23, 42, 0.12);
             --space-xs: clamp(0.5rem, 1vw, 0.75rem);
             --space-sm: clamp(0.75rem, 2vw, 1rem);
             --space-md: clamp(1rem, 3vw, 1.5rem);
             --space-lg: clamp(1.5rem, 4vw, 2.5rem);
             --space-xl: clamp(2rem, 6vw, 4rem);
             --space-2xl: clamp(3rem, 8vw, 6rem);
         }

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

         html {
             scroll-behavior: smooth;
         }

         body {
             font-family: 'Cairo', 'Tajawal', sans-serif;
             background: var(--dark);
             color: var(--text);
             line-height: 1.6;
             font-size: 17px;
             overflow-x: hidden;
             direction: rtl;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
         }

          :where(a, button, [role="button"], input, select, textarea):focus-visible {
             outline: none;
             box-shadow: var(--ring);
             border-radius: 12px;
         }

         @media (prefers-reduced-motion: reduce) {
             * {
                 scroll-behavior: auto !important;
                 transition-duration: 0.001ms !important;
                 animation-duration: 0.001ms !important;
             }
         }

         .container {
             max-width: 1280px;
             margin: 0 auto;
             padding: 0 clamp(1rem, 5vw, 2rem);
         }

         .section-pad {
             padding: var(--space-2xl) 0;
         }

         .home-page .section-pad {
             padding: var(--space-2xl) 0;
         }

         .section-title {
             font-size: clamp(28px, 4vw, 42px);
             font-weight: 800;
             line-height: 1.3;
             margin-bottom: var(--space-sm);
             color: var(--text);
         }

         .section-sub {
             font-size: 1rem;
             color: var(--text-muted);
             max-width: 580px;
             margin: 0 auto var(--space-lg);
             line-height: 1.7;
         }

         .section-header {
             margin-bottom: var(--space-xl);
             gap: var(--space-md);
         }

         .course-body {
             padding: var(--space-md) var(--space-md) var(--space-lg);
         }

         .off-card-body {
             padding: var(--space-md) var(--space-md) var(--space-sm);
         }

         .off-card-footer {
             padding: var(--space-sm) var(--space-md) var(--space-md);
         }

         .testimonial-card {
             padding: var(--space-lg);
         }

         .btn,
         .course-enroll,
         .off-card-enroll {
             padding: 0.75rem 1.5rem;
             gap: 6px;
             font-size: 0.9rem;
         }

         @media (max-width: 650px) {
             .btn,
             .course-enroll,
             .off-card-enroll {
                 padding: 0.7rem 1.2rem;
                 font-size: 0.85rem;
             }
         }

         .hero-headline {
             margin-bottom: var(--space-md);
             letter-spacing: -0.02em;
         }

         .hero-desc {
             margin-bottom: var(--space-lg);
             font-size: 1rem;
             line-height: 1.7;
         }

         .hero-stats-bar {
             padding: var(--space-md) 0;
         }

         .stats-grid {
             gap: var(--space-lg);
         }

         .stat-card {
             padding: var(--space-lg) var(--space-md);
         }

         .prem-card {
             padding: var(--space-lg);
         }

         .footer-top {
             padding: var(--space-2xl) 0 var(--space-xl);
             gap: var(--space-xl);
         }

         .footer-bottom {
             padding: var(--space-md) 0;
         }

         @media (max-width: 768px) {
             body {
                 font-size: 16px;
             }
             .section-sub {
                 margin-bottom: var(--space-md);
             }
             .section-header {
                 margin-bottom: var(--space-lg);
             }
             .hero-btns {
                 gap: var(--space-sm);
             }
             .promo2-inner {
                 padding: var(--space-lg);
             }
         }

         .home-page {
             isolation: isolate;
         }

         .home-page .section-header {
             margin-bottom: clamp(26px, 3.4vw, 56px);
         }

         .home-page #courses .btn.btn-outline,
         .home-page #offerings .btn.btn-outline,
         .home-page #promo2 .btn.btn-outline {
             color: var(--text);
             border-color: rgba(15, 23, 42, 0.16);
             background: rgba(255, 255, 255, 0.55);
             backdrop-filter: blur(10px);
         }

         .home-page #courses .btn.btn-outline:hover,
         .home-page #offerings .btn.btn-outline:hover,
         .home-page #promo2 .btn.btn-outline:hover {
             border-color: rgba(45, 84, 135, 0.35);
             color: var(--primary);
             background: rgba(45, 84, 135, 0.06);
             box-shadow: 0 10px 26px rgba(2, 6, 23, 0.10);
         }

         .home-page #hero {
             background: radial-gradient(1000px 420px at 15% 18%, rgba(45, 84, 135, 0.12), transparent 55%), radial-gradient(820px 420px at 85% 22%, rgba(6, 182, 212, 0.10), transparent 58%), var(--dark);
         }

         .home-page .hero-desc {
             font-size: 17px;
             letter-spacing: 0.1px;
         }

         .home-page #promo {
             border: 1px solid rgba(255, 255, 255, 0.14);
             box-shadow: 0 18px 60px rgba(2, 6, 23, 0.18);
         }

         .home-page #courses {
             background: transparent;
         }

         .home-page .courses-filter-wrap {
             gap: 10px;
         }

         .home-page .courses-filter-tab {
             background: rgba(255, 255, 255, 0.78);
             border-color: rgba(15, 23, 42, 0.10);
             backdrop-filter: blur(12px);
         }

         .home-page .courses-filter-tab.is-active {
             box-shadow: 0 14px 34px rgba(45, 84, 135, 0.18);
         }

         .home-page .courses-grid {
             grid-template-columns: repeat(4, minmax(0, 1fr));
             gap: clamp(14px, 2.2vw, 26px);
         }

         .home-page .course-card {
             background: linear-gradient(180deg, var(--surface-1), rgba(255, 255, 255, 0.86));
             border-color: rgba(15, 23, 42, 0.10);
             box-shadow: var(--shadow-elev-1);
             transform: translateZ(0);
         }

         .home-page .course-card::after {
             content: '';
             position: absolute;
             inset: 0;
             border-radius: inherit;
             pointer-events: none;
             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
             opacity: 0.85;
         }

         .home-page .course-card:hover {
             transform: translateY(-10px);
             box-shadow: var(--shadow-elev-2), 0 0 0 1px rgba(45, 84, 135, 0.12);
         }

         .home-page .course-img-wrap {
             height: 165px;
         }

         .home-page .course-overlay {
             background: linear-gradient(to top, rgba(2, 6, 23, 0.82) 0%, rgba(2, 6, 23, 0.15) 55%, rgba(2, 6, 23, 0.0) 80%);
         }

         .home-page .course-level {
             background: rgba(2, 6, 23, 0.55);
             border: 1px solid rgba(255, 255, 255, 0.14);
         }

         .home-page .course-ribbon {
             border: 1px solid rgba(255, 255, 255, 0.18);
             box-shadow: 0 10px 28px rgba(2, 6, 23, 0.25);
         }

         .home-page .course-body {
             padding: 15px 17px 17px;
         }

         .home-page .course-title {
             font-size: 14.5px;
             font-weight: 700;
             margin-bottom: 7px;
         }

         .home-page .course-meta {
             gap: 6px 11px;
             margin-bottom: 10px;
         }

         .home-page .course-footer {
             padding-top: 10px;
         }

         .home-page .instructor {
             gap: 10px;
         }

         .home-page .instructor-avatar {
             width: 36px;
             height: 36px;
             border-radius: 50%;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             background: linear-gradient(135deg, rgba(45, 84, 135, 0.18), rgba(6, 182, 212, 0.12));
             border: 1px solid rgba(45, 84, 135, 0.26);
             color: var(--primary);
             flex-shrink: 0;
         }

         .home-page .course-price {
             color: #0f172a;
         }

         .home-page .course-enroll {
             border-radius: 14px;
         }

         @media (max-width: 1100px) {
             .home-page .courses-grid {
                 grid-template-columns: repeat(3, minmax(0, 1fr));
             }
         }

         @media (max-width: 900px) {
             .home-page .courses-grid {
                 grid-template-columns: repeat(2, minmax(0, 1fr));
             }
         }

         @media (max-width: 650px) {
             .home-page .courses-grid {
                 grid-template-columns: repeat(2, minmax(0, 1fr));
                 gap: 12px;
             }
             .home-page .course-img-wrap {
                 height: 106px;
             }
             .home-page .course-body {
                 padding: 10px 12px 11px;
             }
             .home-page .course-category {
                 letter-spacing: 0.6px;
                 margin-bottom: 6px;
             }
             .home-page .course-title {
                 font-size: 12.5px;
                 line-height: 1.4;
                 margin-bottom: 6px;
             }
             .home-page .course-meta {
                 font-size: 10.5px;
                 margin-bottom: 7px;
                 gap: 4px 7px;
             }
             .home-page .course-footer {
                 gap: 8px;
             }
             .home-page .instructor span:last-child {
                 font-size: 11.5px;
             }
             .home-page .course-price {
                 font-size: 14px;
             }
             .home-page .course-enroll {
                 font-size: 11.5px;
                 padding: 8px 10px;
                 margin-top: 9px;
             }
         }

         .home-page #offerings {
             background: radial-gradient(920px 520px at 15% 0%, rgba(0, 128, 255, 0.07), transparent 60%), radial-gradient(900px 520px at 90% 25%, rgba(45, 84, 135, 0.06), transparent 62%), var(--dark);
         }

         .home-page .off-card {
             background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.82));
             border-color: rgba(15, 23, 42, 0.10);
             box-shadow: var(--shadow-elev-1);
         }

         .home-page .off-card:hover {
             transform: translateY(-8px);
             box-shadow: var(--shadow-elev-2);
         }

         .home-page .off-card-img-wrap {
             height: 185px;
         }

         .home-page .off-card-title {
             font-size: 15.5px;
             letter-spacing: 0.1px;
         }

         .home-page .off-card-footer {
             align-items: center;
         }

         .home-page .off-card-enroll {
             border-radius: 14px;
             padding: 10px 16px;
         }

         @media (min-width: 1200px) {
             .home-page .off-swiper .swiper-slide {
                 width: 340px;
             }
         }

         @media (max-width: 650px) {
             .home-page .slider-nav-wrap {
                 padding: 0 32px;
             }
             .home-page .off-nav-btn {
                 width: 32px;
                 height: 32px;
                 font-size: 12px;
             }
             .home-page .off-swiper .swiper-slide {
                 width: 240px;
             }
             .home-page .off-card-img-wrap {
                 height: 120px;
             }
             .home-page .off-card-body {
                 padding: 14px 14px 10px;
                 height:"10rem";
             }
             .home-page .off-card-title {
                 font-size: 13px;
                 margin-bottom: 10px;
             }
             .home-page .off-card-meta {
                 font-size: 11px;
                 gap: 8px 10px;
             }
             .home-page .off-card-footer {
                 padding: 10px 14px 14px;
                 gap: 8px;
             }
             .home-page .off-card-price {
                 font-size: 14px;
             }
             .home-page .off-card-enroll {
                 font-size: 12px;
                 padding: 9px 10px;
             }
         }

         @media (max-width: 420px) {
             .home-page .off-swiper .swiper-slide {
                 width: 200px;
             }
         }

         @media (max-width: 650px) {
             .slider-nav-wrap::after {
                 content: '';
                 position: absolute;
                 top: 0;
                 bottom: 0;
                 left: 0;
                 width: 40px;
                 background: linear-gradient(to left, transparent, #fff);
                 pointer-events: none;
                 z-index: 2;
                 opacity: 0.6;
             }
             .home-page .slider-nav-wrap::after {
                 width: 32px;
             }
         }

         @media (max-width: 650px) {
             .home-page #courses .slider-nav-wrap::after {
                 background: linear-gradient(to left, transparent, #fff);
             }
         }

         .home-page #courses #categorizedCoursesSwiper .swiper-slide {
             height: auto;
             width: 320px;
         }

         .home-page #courses #categorizedCoursesSwiper .course-card {
             background: var(--dark-3);
             border: 1px solid var(--glass-border);
             border-radius: var(--radius-lg);
             overflow: hidden;
             display: flex;
             flex-direction: column;
             height: 100%;
             transition: var(--transition);
         }

         .home-page #courses #categorizedCoursesSwiper .course-card:hover {
             border-color: rgba(79, 127, 181, 0.3);
             transform: translateY(-6px);
             box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
         }

         .home-page #courses #categorizedCoursesSwiper .course-card::before,
         .home-page #courses #categorizedCoursesSwiper .course-card::after {
             display: none;
         }

         .home-page #courses #categorizedCoursesSwiper .course-img-wrap {
             height: 185px;
         }

         .home-page #courses #categorizedCoursesSwiper .course-body {
             padding: 18px 18px 12px;
             flex: 1;
         }

         .home-page #courses #categorizedCoursesSwiper .course-title {
             font-size: 15px;
             font-weight: 800;
             color: var(--text);
             line-height: 1.5;
             margin-bottom: 12px;
         }

         .home-page #courses #categorizedCoursesSwiper .course-meta {
             display: flex;
             align-items: center;
             gap: 12px;
             font-size: 12px;
             color: var(--text-muted);
             flex-wrap: wrap;
         }

         .home-page #courses #categorizedCoursesSwiper .course-footer {
             padding: 14px 20px 18px;
             border-top: 1px solid var(--glass-border);
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 10px;
         }

         .home-page #courses #categorizedCoursesSwiper .course-price {
             font-size: 20px;
             font-weight: 900;
             color: var(--text);
             display: flex;
             align-items: baseline;
             gap: 4px;
             flex-wrap: wrap;
         }

         .home-page #courses #categorizedCoursesSwiper .course-enroll {
             padding: 9px 18px;
             border-radius: var(--radius-md);
             background: var(--primary);
             border: 1px solid var(--primary);
             color: #fff;
             font-size: 13px;
             font-weight: 700;
             font-family: 'Cairo', sans-serif;
             cursor: pointer;
             transition: var(--transition);
             white-space: nowrap;
             text-decoration: none;
             display: inline-flex;
             align-items: center;
             gap: 6px;
         }

         .home-page #courses #categorizedCoursesSwiper .course-enroll:hover {
             background: var(--primary-dark);
             border-color: var(--primary-dark);
             box-shadow: 0 4px 16px rgba(45, 84, 135, 0.4);
         }

         .home-page #courses #categorizedCoursesSwiper .instructor {
             display: flex;
             align-items: center;
             gap: 10px;
             font-size: 13px;
             color: var(--text-muted);
         }

         @media (max-width: 768px) {
             .home-page #courses #categorizedCoursesSwiper .swiper-slide {
                 width: 280px;
             }
         }

         @media (max-width: 650px) {
             .home-page #courses #categorizedCoursesSwiper .course-img-wrap {
                 height: 120px;
             }
             .home-page #courses #categorizedCoursesSwiper .course-body {
                 padding: 14px 14px 10px;
             }
             .home-page #courses #categorizedCoursesSwiper .course-title {
                 font-size: 13px;
                 margin-bottom: 10px;
             }
             .home-page #courses #categorizedCoursesSwiper .course-footer {
                 padding: 10px 14px 14px;
                 gap: 8px;
             }
             .home-page #courses #categorizedCoursesSwiper .course-price {
                 font-size: 14px;
             }
             .home-page #courses #categorizedCoursesSwiper .course-enroll {
                 font-size: 12px;
                 padding: 9px 10px;
             }
             .home-page #courses #categorizedCoursesSwiper .course-meta {
                 font-size: 11px;
                 gap: 8px 10px;
             }
         }

         @media (max-width: 480px) {
             .home-page #courses #categorizedCoursesSwiper .swiper-slide {
                 width: 260px;
             }
         }

         @media (max-width: 420px) {
             .home-page #courses #categorizedCoursesSwiper .swiper-slide {
                 width: 220px;
             }
         }

         a {
             text-decoration: none;
             color: inherit;
         }

         ul {
             list-style: none;
         }

         img {
             max-width: 100%;
             display: block;
         }

         button {
             cursor: pointer;
             border: none;
             background: none;
             font-family: inherit;
         }

          ::-webkit-scrollbar {
             width: 6px;
         }

          ::-webkit-scrollbar-track {
             background: var(--dark-2);
         }

          ::-webkit-scrollbar-thumb {
             background: var(--primary);
             border-radius: 3px;
         }

         .text-center {
             text-align: center;
         }

         .flex {
             display: flex;
         }

         .items-center {
             align-items: center;
         }

         .gap-2 {
             gap: 8px;
         }

         .gap-4 {
             gap: 16px;
         }

         .badge {
             display: inline-flex;
             align-items: center;
             gap: 6px;
             padding: 6px 16px;
             border-radius: 100px;
             font-size: 13px;
             font-weight: 600;
             background: rgba(45, 84, 135, 0.15);
             border: 1px solid rgba(45, 84, 135, 0.3);
             color: var(--primary-light);
             letter-spacing: 0.3px;
         }

         .badge-accent {
             background: rgba(245, 158, 11, 0.15);
             border-color: rgba(245, 158, 11, 0.3);
             color: #b45309;
         }

         .gradient-text {
             background: linear-gradient(135deg, var(--primary-light) 0%, var(--teal) 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }

         .gradient-text-gold {
             background: linear-gradient(135deg, var(--accent) 0%, #F97316 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
         }
         
         .reveal {
             opacity: 0;
             transform: translateY(40px);
             transition: opacity 0.7s ease, transform 0.7s ease;
         }

         .reveal.visible {
             opacity: 1;
             transform: translateY(0);
         }

         .reveal-left {
             opacity: 0;
             transform: translateX(50px);
             transition: opacity 0.7s ease, transform 0.7s ease;
         }

         .reveal-left.visible {
             opacity: 1;
             transform: translateX(0);
         }

         .reveal-right {
             opacity: 0;
             transform: translateX(-50px);
             transition: opacity 0.7s ease, transform 0.7s ease;
         }

         .reveal-right.visible {
             opacity: 1;
             transform: translateX(0);
         }

         .delay-1 {
             transition-delay: 0.1s !important;
         }

         .delay-2 {
             transition-delay: 0.2s !important;
         }

         .delay-3 {
             transition-delay: 0.3s !important;
         }

         .delay-4 {
             transition-delay: 0.4s !important;
         }

         .delay-5 {
             transition-delay: 0.5s !important;
         }

         .btn {
             display: inline-flex;
             align-items: center;
             gap: 8px;
             border-radius: 100px;
             font-weight: 700;
             font-family: 'Cairo', sans-serif;
             color: #fff;
             transition: var(--transition);
             position: relative;
             overflow: hidden;
         }

         .btn::before {
             content: '';
             position: absolute;
             inset: 0;
             background: rgba(255, 255, 255, 0.1);
             opacity: 0;
             transition: opacity 0.3s;
         }

         .btn:hover::before {
             opacity: 1;
         }

         .btn-primary {
             background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
             color: #fff;
             box-shadow: 0 4px 24px rgba(45, 84, 135, 0.45);
         }

         .btn-primary:hover {
             transform: translateY(-3px);
             box-shadow: 0 8px 32px rgba(45, 84, 135, 0.6);
         }

         .btn-outline {
             border: 2px solid rgba(255, 255, 255, 0.4);
             color: #fff;
             backdrop-filter: blur(8px);
         }

         .btn-outline:hover {
             border-color: #fff;
             color: #fff;
             transform: translateY(-3px);
         }

         .btn-accent {
             background: linear-gradient(135deg, var(--accent) 0%, #F97316 100%);
             color: #fff;
             box-shadow: 0 4px 24px rgba(245, 158, 11, 0.4);
         }

         .btn-accent:hover {
             transform: translateY(-3px);
             box-shadow: 0 8px 32px rgba(245, 158, 11, 0.6);
         }

         .btn-sm {
             padding: 10px 22px;
             font-size: 13px;
         }

         #navbar {
             position: fixed;
             top: 0;
             left: 0;
             right: 0;
             z-index: 1000;
             padding: 20px 0;
             transition: var(--transition);
         }

         #navbar.scrolled {
             padding: 12px 0;
             background: rgba(255, 255, 255, 0.95);
             backdrop-filter: blur(20px);
             -webkit-backdrop-filter: blur(20px);
             border-bottom: 1px solid var(--glass-border);
             box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
         }

         .nav-inner {
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 32px;
         }

         .nav-logo {
             display: flex;
             align-items: center;
             gap: 12px;
             flex-shrink: 0;
         }

         .nav-logo img {
             height: 52px;
             width: auto;
             filter: drop-shadow(0 0 8px rgba(45, 84, 135, 0.5));
         }

         .nav-logo-text {
             font-size: 18px;
             font-weight: 800;
             line-height: 1.2;
         }

         .nav-logo-text span {
             display: block;
             font-size: 11px;
             font-weight: 500;
             color: var(--text-muted);
         }

         .nav-links {
             display: flex;
             align-items: center;
             gap: 4px;
             flex: 1;
             justify-content: center;
         }

         .nav-links a {
             padding: 8px 16px;
             border-radius: var(--radius-sm);
             font-size: 15px;
             font-weight: 600;
             color: var(--text-muted);
             transition: var(--transition);
             position: relative;
         }

         .nav-links a::after {
             content: '';
             position: absolute;
             bottom: 4px;
             left: 50%;
             right: 50%;
             height: 2px;
             background: var(--primary-light);
             border-radius: 1px;
             transition: var(--transition);
         }

         .nav-links a:hover {
             color: var(--primary);
         }

         .nav-links a:hover::after {
             left: 16px;
             right: 16px;
         }

         .nav-links a.active {
             color: var(--primary);
         }

         .nav-links a.active::after {
             left: 16px;
             right: 16px;
         }

         .nav-actions {
             display: flex;
             align-items: center;
             gap: 12px;
         }

         .nav-actions .btn {
             padding: 10px 24px;
             font-size: 14px;
         }

         .hamburger {
             display: none;
             flex-direction: column;
             gap: 5px;
             padding: 8px;
             cursor: pointer;
         }

         .hamburger span {
             display: block;
             width: 24px;
             height: 2px;
             background: var(--text);
             border-radius: 2px;
             transition: var(--transition);
         }

         .nav-overlay {
             position: fixed;
             inset: 0;
             background: rgba(0, 0, 0, 0.45);
             backdrop-filter: blur(3px);
             z-index: 1001;
             opacity: 0;
             visibility: hidden;
             transition: opacity 0.35s ease, visibility 0.35s ease;
         }

         .nav-overlay.active {
             opacity: 1;
             visibility: visible;
         }

         .mobile-nav {
             position: fixed;
             top: 0;
             right: 0;
             width: 300px;
             height: 100%;
             background: #fff;
             z-index: 1002;
             display: flex;
             flex-direction: column;
             transform: translateX(100%);
             transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             box-shadow: -8px 0 40px rgba(0, 0, 0, 0.15);
         }

         .mobile-nav.open {
             transform: translateX(0);
         }

         .mobile-nav-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 20px 20px 16px;
             border-bottom: 1px solid var(--dark-4);
             flex-shrink: 0;
         }

         .mobile-nav-logo img {
             height: 40px;
             width: auto;
         }

         .close-nav {
             width: 36px;
             height: 36px;
             border-radius: 50%;
             background: var(--dark-3);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 16px;
             color: var(--text-muted);
             cursor: pointer;
             transition: var(--transition);
             border: none;
             flex-shrink: 0;
         }

         .close-nav:hover {
             background: rgba(255, 107, 107, 0.15);
             color: var(--coral);
         }

         .mobile-nav-body {
             flex: 1;
             overflow-y: auto;
             padding: 12px 0;
         }

         .mobile-nav-links {
             list-style: none;
             margin: 0;
             padding: 0;
         }

         .mobile-nav-links li {
             opacity: 0;
             transform: translateX(20px);
             transition: opacity 0.3s ease, transform 0.3s ease;
         }

         .mobile-nav.open .mobile-nav-links li:nth-child(1) {
             transition-delay: 0.05s;
             opacity: 1;
             transform: none;
         }

         .mobile-nav.open .mobile-nav-links li:nth-child(2) {
             transition-delay: 0.10s;
             opacity: 1;
             transform: none;
         }

         .mobile-nav.open .mobile-nav-links li:nth-child(3) {
             transition-delay: 0.15s;
             opacity: 1;
             transform: none;
         }

         .mobile-nav.open .mobile-nav-links li:nth-child(4) {
             transition-delay: 0.20s;
             opacity: 1;
             transform: none;
         }

         .mobile-nav.open .mobile-nav-links li:nth-child(5) {
             transition-delay: 0.25s;
             opacity: 1;
             transform: none;
         }

         .mobile-nav.open .mobile-nav-links li:nth-child(6) {
             transition-delay: 0.30s;
             opacity: 1;
             transform: none;
         }

         .mobile-link {
             display: flex;
             align-items: center;
             gap: 14px;
             padding: 14px 20px;
             font-size: 15px;
             font-weight: 600;
             color: var(--text);
             border-radius: 0;
             transition: var(--transition);
             position: relative;
         }

         .mobile-link::before {
             content: '';
             position: absolute;
             right: 0;
             top: 4px;
             bottom: 4px;
             width: 3px;
             border-radius: 0 3px 3px 0;
             background: var(--primary);
             opacity: 0;
             transition: var(--transition);
         }

         .mobile-link:hover,
         .mobile-link.active {
             background: rgba(45, 84, 135, 0.07);
             color: var(--primary);
         }

         .mobile-link:hover::before,
         .mobile-link.active::before {
             opacity: 1;
         }

         .mnav-icon {
             width: 36px;
             height: 36px;
             border-radius: 10px;
             background: rgba(45, 84, 135, 0.1);
             color: var(--primary);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 15px;
             flex-shrink: 0;
             transition: var(--transition);
         }

         .mobile-link:hover .mnav-icon {
             background: var(--primary);
             color: #fff;
         }

         .mnav-arrow {
             margin-right: auto;
             font-size: 11px;
             color: var(--text-dim);
             transition: var(--transition);
         }

         .mobile-link:hover .mnav-arrow {
             color: var(--primary);
             transform: translateX(-3px);
         }

         .mobile-nav-divider {
             height: 1px;
             background: var(--dark-4);
             margin: 12px 20px;
         }

         .mobile-nav-stats {
             display: flex;
             justify-content: space-around;
             padding: 12px 20px;
         }

         .mnav-stat {
             text-align: center;
         }

         .mnav-stat strong {
             display: block;
             font-size: 18px;
             font-weight: 800;
             color: var(--primary);
         }

         .mnav-stat span {
             font-size: 12px;
             color: var(--text-muted);
         }

         .mobile-nav-footer {
             padding: 16px 20px;
             border-top: 1px solid var(--dark-4);
             display: flex;
             flex-direction: column;
             gap: 10px;
             flex-shrink: 0;
         }

         .hamburger.is-open span:nth-child(1) {
             transform: translateY(7px) rotate(45deg);
         }

         .hamburger.is-open span:nth-child(2) {
             opacity: 0;
             transform: scaleX(0);
         }

         .hamburger.is-open span:nth-child(3) {
             transform: translateY(-7px) rotate(-45deg);
         }

         body.nav-open {
             overflow: hidden;
         }

         #hero {
             min-height: 100vh;
             display: flex;
             flex-direction: column;
             position: relative;
             overflow: hidden;
             padding-top: 25px;
             background: var(--dark);
         }

         .hero-bg-curves {
             position: absolute;
             inset: 0;
             z-index: 0;
             pointer-events: none;
         }

         .hero-bg-curves svg {
             width: 100%;
             height: 100%;
         }

         #hero>.container {
             flex: 1;
             display: flex;
             align-items: center;
             padding-top: 40px;
             padding-bottom: 40px;
             position: relative;
             z-index: 2;
         }

         .hero-inner {
             display: grid;
             grid-template-columns: 1fr 1.3fr;
             gap: 56px;
             align-items: center;
             width: 100%;
         }

         .hero-alert-bar {
             display: inline-flex;
             align-items: center;
             gap: 10px;
             margin-bottom: 28px;
             padding: 10px 20px;
             border-radius: 100px;
             background: rgba(45, 84, 135, 0.07);
             border: 1px solid rgba(45, 84, 135, 0.18);
             font-size: 14px;
             flex-wrap: wrap;
         }

         .hero-alert-fire {
             font-size: 18px;
             flex-shrink: 0;
         }

         .hero-alert-content {
             display: flex;
             align-items: center;
             flex-wrap: wrap;
             gap: 8px;
         }

         .hero-alert-content strong {
             color: var(--text);
             font-weight: 700;
         }

         .hero-alert-link {
             color: var(--primary);
             font-weight: 600;
             text-decoration: underline;
             text-underline-offset: 3px;
             white-space: nowrap;
             transition: color 0.25s ease;
         }

         .hero-alert-link:hover {
             color: var(--primary-dark);
         }

         .hero-alert-link i {
             font-size: 12px;
         }

         .hero-headline {
             font-size: clamp(22px, 3.2vw, 36px);
             font-weight: 900;
             line-height: 1.15;
             color: var(--text);
             letter-spacing: -1px;
         }

         .hero-desc {
             font-size: 17px;
             color: var(--text-muted);
             line-height: 1.85;
             max-width: 520px;
         }

         .hero-btns {
             display: flex;
             gap: 16px;
             flex-wrap: wrap;
         }

         .btn-hero-outline {
             display: inline-flex;
             align-items: center;
             gap: 8px;
             padding: 14px 32px;
             border-radius: 100px;
             font-size: 15px;
             font-weight: 700;
             font-family: 'Cairo', sans-serif;
             cursor: pointer;
             border: 2px solid rgba(0, 0, 0, 0.18);
             background: transparent;
             color: var(--text);
             transition: var(--transition);
         }

         .btn-hero-outline:hover {
             border-color: var(--primary);
             color: var(--primary);
             background: rgba(45, 84, 135, 0.06);
             transform: translateY(-3px);
         }

         .hero-collage {
             position: relative;
             height: 520px;
         }

         .collage-grid {
             display: grid;
             grid-template-columns: 2fr 1fr;
             grid-template-rows: 1fr 1fr;
             gap: 16px;
             height: 100%;
             direction: ltr;
         }

         .collage-img {
             border-radius: 22px;
             overflow: hidden;
             position: relative;
         }

         .collage-img img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             display: block;
             transition: transform 0.55s ease;
         }

         .collage-img:hover img {
             transform: scale(1.04);
         }

         .collage-img--large {
             grid-row: 1 / 3;
         }

         .collage-img--large img {
             object-position: center 70%;
         }

         .collage-dots {
             position: absolute;
             bottom: -20px;
             left: -24px;
             width: 108px;
             height: 108px;
             background-image: radial-gradient(circle, rgba(45, 84, 135, 0.28) 1.8px, transparent 1.8px);
             background-size: 18px 18px;
             z-index: -1;
         }

         .collage-ring {
             position: absolute;
             bottom: 32px;
             right: -36px;
             width: 160px;
             height: 160px;
             z-index: -1;
             animation: ringRotate 28s linear infinite;
         }

         @keyframes ringRotate {
             from {
                 transform: rotate(0deg);
             }
             to {
                 transform: rotate(360deg);
             }
         }

         .hero-stats-bar {
             position: relative;
             z-index: 2;
             border-top: 1px solid rgba(0, 0, 0, 0.08);
             background: var(--dark);
         }

         .hero-stats-row {
             display: flex;
             align-items: center;
             justify-content: space-between;
             flex-wrap: wrap;
             gap: 16px;
         }

         .hero-stat-item {
             text-align: center;
             flex: 1;
             min-width: 80px;
         }

         .hstat-num {
             font-size: clamp(20px, 2.2vw, 30px);
             font-weight: 900;
             color: var(--text);
             line-height: 1;
             margin-bottom: 6px;
         }

         .hstat-num span {
             color: var(--primary);
         }

         .hstat-lbl {
             font-size: 13px;
             color: var(--text-muted);
             font-weight: 500;
         }

         .hstat-sep {
             width: 1px;
             height: 44px;
             background: rgba(0, 0, 0, 0.1);
             flex-shrink: 0;
         }

         @media (max-width: 900px) {
             .hero-inner {
                 grid-template-columns: 1fr;
                 gap: 44px;
             }
             .hero-collage {
                 height: 360px;
                 order: -1;
             }
             .hero-desc {
                 max-width: 100%;
             }
         }

         @media (max-width: 650px) {
            #hero {
                padding-top: 70px;
            }
            .home-page .hero-inner {
                gap: 12px;
            }
            .hero-collage {
                height: 200px;
            }
            .collage-img {
                border-radius: 14px;
            }
            .collage-grid {
                gap: 6px;
            }
            .hero-btns {
                flex-direction: column;
                gap: 6px;
            }
            .btn.btn-primary,
            .btn-hero-outline {
                margin-top: 0;
                width: 100%;
                justify-content: center;
                padding: 10px 16px;
                font-size: 13px;
            }
            .hero-headline {
                font-size: clamp(20px, 5.5vw, 28px);
                margin-bottom: 6px;
            }
            .hero-desc {
                font-size: 13px;
                margin-bottom: 10px;
            }
            .hero-search-input {
                padding: 10px 14px;
                font-size: 13px;
            }
            .hero-search-btn {
                width: 40px;
                font-size: 13px;
            }
            .hero-stats-bar {
                padding: 2px 0;
            }
            .hero-stats-row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                gap: 4px;
            }
            .hstat-sep {
                display: none;
            }
            .hstat-num {
                font-size: 13px;
                margin-bottom: 0;
            }
            .hstat-lbl {
                font-size: 9px;
            }
            .hero-stat-item {
                padding: 2px 4px;
            }
            .section-pad.features-section {
                padding: 14px 0;
            }
            .home-page .features-section {
                padding: 14px 0;
            }
            .home-page .features-title {
                margin: 0 0 6px;
                font-size: clamp(18px, 4.5vw, 22px);
            }
            .home-page .features-badge {
                margin-bottom: 6px;
                font-size: 11px;
            }
            .home-page .features-desc {
                margin-bottom: 10px;
                font-size: 12px;
                line-height: 1.5;
            }
            .home-page .features-stats {
                margin-bottom: 8px;
                border-radius: 10px;
            }
            .home-page .feat-stat {
                padding: 8px 6px;
            }
            .home-page .feat-stat-num {
                font-size: 16px;
                margin-bottom: 1px;
            }
            .home-page .feat-stat-lbl {
                font-size: 9px;
            }
            .home-page .features-list {
                gap: 4px;
            }
            .home-page .feature-item {
                padding: 8px 10px;
                gap: 8px;
            }
            .home-page .feature-icon-wrap,
            .home-page .feature-icon {
                width: 30px;
                height: 30px;
            }
            .home-page .feature-icon {
                font-size: 12px;
                border-radius: 8px;
            }
            .home-page .feature-text h3 {
                font-size: 12px;
            }
            .home-page .feature-text p {
                font-size: 10px;
            }
            .home-page #about .features-grid {
                gap: 12px;
            }
            .home-page .features-visual {
                gap: 8px;
            }
            .home-page .features-visual .prem-card {
                padding: 12px;
                border-radius: 14px;
            }
            .home-page .features-visual .prem-card-title {
                font-size: 13px;
            }
            .home-page .features-visual .prem-card-desc {
                font-size: 11px;
            }
            .section-pad {
                padding: 20px 0;
            }
            .home-page .section-pad {
                padding: 20px 0;
            }
            .slider-section {
                margin-top: 24px !important;
            }
            .slider-section-header {
                margin-bottom: 16px;
            }
            .section-title {
                font-size: clamp(18px, 4.5vw, 22px);
                margin-bottom: 4px;
            }
            .section-title[style*="margin-top"] {
                margin-top: 6px !important;
            }
            .section-header-wrap {
                margin-bottom: 20px !important;
            }
            .section-sub {
                margin-bottom: 12px;
                font-size: 12px;
            }
            .promo2-btns {
                margin-top: 16px !important;
            }
            .home-page .section-header {
                margin-bottom: 20px;
            }
            .promo2-inner {
                padding: 16px !important;
                gap: 12px;
            }
            .promo2-text h2 {
                font-size: clamp(18px, 4.5vw, 22px);
                margin-bottom: 8px !important;
            }
            .promo2-text p {
                margin-bottom: 12px !important;
                font-size: 13px;
            }
            .promo2-features {
                gap: 6px;
            }
            .promo2-feat {
                font-size: 12px;
                padding-right: 6px;
                gap: 6px;
            }
            .promo2-visual img {
                border-radius: 12px;
            }
            .swiper-testimonials {
                padding-bottom: 0 !important;
            }
            .testimonial-card {
                padding: 16px;
            }
            .testimonial-text {
                font-size: 13px;
            }
            #faq .faq-item {
                padding: 10px 14px;
            }
            .faq-trigger {
                font-size: 13px;
                padding: 10px 0;
            }
            .faq-bg-shape,
            .faq-bg-dots {
                display: none;
            }
            #trust {
                padding: 14px 0;
            }
            .hero-alert-bar {
                border-radius: 16px;
            }
        }

         #trust {
             background: var(--dark-3);
             border-top: 1px solid var(--glass-border);
             border-bottom: 1px solid var(--glass-border);
             padding: 28px 0;
             overflow: hidden;
         }

         .trust-inner {
             display: flex;
             align-items: center;
             gap: 60px;
         }

         .trust-label {
             font-size: 14px;
             font-weight: 600;
             color: var(--text-muted);
             white-space: nowrap;
             flex-shrink: 0;
         }

         .trust-marquee {
             display: flex;
             gap: 60px;
             animation: marquee 20s linear infinite;
             flex-shrink: 0;
         }

         .trust-marquee-wrap {
             overflow: hidden;
             flex: 1;
             display: flex;
             gap: 60px;
         }

         @keyframes marquee {
             0% {
                 transform: translateX(0);
             }
             100% {
                 transform: translateX(-50%);
             }
         }

         .trust-item {
             display: flex;
             align-items: center;
             gap: 10px;
             color: var(--text-dim);
             font-size: 14px;
             font-weight: 600;
             transition: var(--transition);
             white-space: nowrap;
         }

         .trust-item:hover {
             color: var(--text);
         }

         .trust-item i {
             font-size: 20px;
             color: var(--primary-light);
         }

         #stats {
             padding: 80px 0;
             background: linear-gradient(135deg, var(--dark-2) 0%, var(--dark-3) 100%);
         }

         #stats {
             background: var(--dark-3);
         }

         .stats-grid {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 28px;
         }

         .stat-card {
             background: #ffffff;
             border: 1px solid rgba(0, 0, 0, 0.06);
             border-radius: var(--radius-xl);
             padding: 40px 28px 36px;
             text-align: center;
             position: relative;
             overflow: hidden;
             transition: var(--transition);
             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
         }

         .stat-card::after {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 3px;
             background: linear-gradient(90deg, var(--primary-light), var(--teal));
             opacity: 0;
             transition: opacity 0.35s;
         }

         .stat-card:hover {
             transform: translateY(-8px);
             box-shadow: 0 16px 48px rgba(45, 84, 135, 0.14);
             border-color: rgba(45, 84, 135, 0.18);
         }

         .stat-card:hover::after {
             opacity: 1;
         }

         .stat-icon {
             width: 72px;
             height: 72px;
             border-radius: 20px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 28px;
             margin: 0 auto 24px;
             color: #fff;
             background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
             box-shadow: 0 8px 24px rgba(45, 84, 135, 0.35);
         }

         .stat-icon.teal {
             background: linear-gradient(135deg, #14B8D4 0%, #0891B2 100%);
             box-shadow: 0 8px 24px rgba(6, 182, 212, 0.35);
         }

         .stat-icon.accent {
             background: linear-gradient(135deg, #FBA931 0%, #F97316 100%);
             box-shadow: 0 8px 24px rgba(245, 158, 11, 0.35);
         }

         .stat-icon.coral {
             background: linear-gradient(135deg, #FF6B6B 0%, #E53E3E 100%);
             box-shadow: 0 8px 24px rgba(255, 107, 107, 0.35);
         }

         .stat-number {
             font-size: 46px;
             font-weight: 900;
             color: var(--text);
             line-height: 1;
             margin-bottom: 10px;
             display: flex;
             align-items: baseline;
             justify-content: center;
             gap: 1px;
         }

         .stat-prefix {
             font-size: 38px;
             font-weight: 900;
             color: var(--primary-light);
         }

         .stat-suffix {
             font-size: 32px;
             font-weight: 800;
             color: var(--primary-light);
             margin-right: 1px;
         }

         .stat-label {
             font-size: 15px;
             color: var(--text-muted);
             font-weight: 600;
             margin-top: 4px;
         }

         #promo {
             margin: 0 24px;
             background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 50%, #8B5CF6 100%);
             border-radius: var(--radius-xl);
             padding: 40px 60px;
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 24px;
             position: relative;
             overflow: hidden;
         }

         #promo::before {
             content: '';
             position: absolute;
             top: -50%;
             right: -10%;
             width: 400px;
             height: 400px;
             border-radius: 50%;
             background: rgba(255, 255, 255, 0.06);
         }

         #promo::after {
             content: '';
             position: absolute;
             bottom: -60%;
             left: 5%;
             width: 300px;
             height: 300px;
             border-radius: 50%;
             background: rgba(255, 255, 255, 0.05);
         }

         .promo-text {
             position: relative;
             z-index: 1;
         }

         .promo-text .eyebrow {
             font-size: 13px;
             font-weight: 600;
             opacity: 0.8;
             margin-bottom: 8px;
         }

         .promo-text h2 {
             font-size: clamp(22px, 3vw, 32px);
             font-weight: 900;
             color: #fff;
             margin-bottom: 8px;
         }

         .promo-text p {
             font-size: 16px;
             color: rgba(255, 255, 255, 0.75);
         }

         .promo-badge {
             position: absolute;
             top: -14px;
             left: 50px;
             background: var(--accent);
             color: #fff;
             padding: 6px 20px;
             border-radius: 100px;
             font-size: 13px;
             font-weight: 700;
             box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5);
             z-index: 1;
         }

         .promo-action {
             position: relative;
             z-index: 1;
             flex-shrink: 0;
         }

         #courses {
             background: var(--dark);
         }

         .courses-filter-wrap {
             display: flex;
             align-items: center;
             gap: 10px;
             flex-wrap: wrap;
             margin-bottom: 14px;
         }

         .courses-filter-tab {
             border: 1px solid var(--glass-border);
             background: #fff;
             color: var(--text-muted);
             padding: 9px 16px;
             border-radius: 999px;
             font-size: 13px;
             font-weight: 700;
             cursor: pointer;
             transition: var(--transition);
             font-family: 'Cairo', sans-serif;
         }

         .courses-filter-tab:hover {
             border-color: rgba(45, 84, 135, 0.35);
             color: var(--primary);
         }

         .courses-filter-tab.is-active {
             background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
             border-color: transparent;
             color: #fff;
             box-shadow: 0 8px 24px rgba(45, 84, 135, 0.3);
         }

         .courses-filter-meta {
             margin: 0 0 24px;
             color: var(--text-muted);
             font-size: 14px;
             font-weight: 600;
         }

         .courses-filter-item.is-hidden {
             display: none;
         }

         .courses-grid {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             gap: 28px;
         }

         .course-card {
             background: var(--card-bg);
             border: 1px solid var(--glass-border);
             border-radius: var(--radius-lg);
             overflow: hidden;
             transition: var(--transition);
             position: relative;
             backdrop-filter: blur(12px);
         }

         .course-card:hover {
             transform: translateY(-8px);
             border-color: rgba(45, 84, 135, 0.4);
             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15), var(--shadow-glow);
         }

         .course-img-wrap {
             position: relative;
             overflow: hidden;
             height: 170px;
         }

         .course-img-wrap img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             transition: transform 0.5s ease;
         }

         .course-card:hover .course-img-wrap img {
             transform: scale(1.07);
         }

         .course-ribbon {
             position: absolute;
             top: 16px;
             right: 16px;
             padding: 5px 14px;
             border-radius: 100px;
             font-size: 12px;
             font-weight: 700;
             z-index: 1;
         }

         .ribbon-hot {
             background: var(--coral);
             color: #fff;
         }

         .ribbon-new {
             background: var(--teal);
             color: #fff;
         }

         .ribbon-top {
             background: var(--accent);
             color: #fff;
         }

         .course-overlay {
             position: absolute;
             inset: 0;
             background: linear-gradient(to top, rgba(10, 14, 26, 0.8) 0%, transparent 60%);
         }

         .course-level {
             position: absolute;
             bottom: 12px;
             right: 16px;
             font-size: 12px;
             font-weight: 600;
             color: rgba(255, 255, 255, 0.85);
             background: rgba(0, 0, 0, 0.4);
             padding: 4px 12px;
             border-radius: 100px;
             backdrop-filter: blur(8px);
         }

         .course-category {
             font-size: 12px;
             font-weight: 700;
             color: var(--primary-light);
             text-transform: uppercase;
             letter-spacing: 1px;
             margin-bottom: 10px;
         }

         .course-title {
             font-size: 15.5px;
             font-weight: 700;
             color: var(--text);
             margin-bottom: 9px;
             line-height: 1.45;
         }

         .course-meta {
             display: flex;
             align-items: center;
             gap: 6px 12px;
             font-size: 12px;
             color: var(--text-muted);
             margin-bottom: 12px;
             flex-wrap: wrap;
         }

         .course-meta i {
             color: var(--primary-light);
             margin-left: 4px;
         }

         .course-rating {
             display: flex;
             align-items: center;
             gap: 6px;
         }

         .stars {
             color: var(--accent);
             font-size: 13px;
             letter-spacing: 1px;
         }

         .course-footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding-top: 12px;
             border-top: 1px solid var(--glass-border);
         }

         .instructor {
             display: flex;
             align-items: center;
             gap: 10px;
         }

         .instructor img {
             width: 36px;
             height: 36px;
             border-radius: 50%;
             object-fit: cover;
             border: 2px solid var(--primary);
         }

         .instructor .instructor-avatar {
             width: 36px;
             height: 36px;
             border-radius: 50%;
             display: inline-flex;
             align-items: center;
             justify-content: center;
             background: rgba(45, 84, 135, 0.12);
             border: 2px solid rgba(45, 84, 135, 0.28);
             color: var(--primary);
             flex-shrink: 0;
         }

         .instructor span {
             font-size: 13px;
             font-weight: 600;
             color: var(--text-muted);
         }

         .course-price {
             font-size: 20px;
             font-weight: 900;
             color: var(--accent-light);
         }

         .course-price .old-price {
             font-size: 14px;
             text-decoration: line-through;
             color: var(--text-dim);
             font-weight: 500;
             margin-right: 6px;
         }

         .card-hover-overlay {
             position: absolute;
             inset: 0;
             background: linear-gradient(135deg, rgba(45, 84, 135, 0.05) 0%, transparent 100%);
             opacity: 0;
             transition: opacity 0.4s;
             pointer-events: none;
         }

         .course-card:hover .card-hover-overlay {
             opacity: 1;
         }

         #categories {
             background: var(--dark);
         }

         .categories-grid {
             display: grid;
             grid-template-columns: repeat(5, 1fr);
             gap: 20px;
         }

         .cat-card {
             background: var(--glass);
             border: 1px solid var(--glass-border);
             border-radius: var(--radius-lg);
             padding: 36px 20px;
             text-align: center;
             cursor: pointer;
             transition: var(--transition);
             position: relative;
             overflow: hidden;
         }

         .cat-card::before {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 3px;
             background: var(--gradient, linear-gradient(90deg, var(--primary), var(--teal)));
             transform: scaleX(0);
             transition: transform 0.4s ease;
             transform-origin: right;
         }

         .cat-card:hover::before {
             transform: scaleX(1);
             transform-origin: left;
         }

         .cat-card:hover {
             transform: translateY(-8px);
             border-color: rgba(0, 0, 0, 0.1);
             background: var(--dark-4);
         }

         .cat-icon-wrap {
             width: 72px;
             height: 72px;
             border-radius: var(--radius-md);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 30px;
             margin: 0 auto 20px;
             transition: var(--transition);
         }

         .cat-card:hover .cat-icon-wrap {
             transform: scale(1.1) rotate(-5deg);
         }

         .cat-name {
             font-size: 16px;
             font-weight: 800;
             color: var(--text);
             margin-bottom: 6px;
         }

         .cat-count {
             font-size: 13px;
             color: var(--text-muted);
         }

         #features {
             background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-3) 100%);
         }

         .features-grid {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 60px;
             align-items: center;
         }

         .features-visual {
             position: relative;
         }

         .features-img-main {
             width: 100%;
             border-radius: var(--radius-xl);
             box-shadow: var(--shadow-card);
             border: 1px solid var(--glass-border);
         }

         .feature-float-card {
             position: absolute;
             background: var(--card-bg);
             border: 1px solid var(--glass-border);
             backdrop-filter: blur(16px);
             border-radius: var(--radius-md);
             padding: 16px 20px;
             display: flex;
             align-items: center;
             gap: 14px;
             box-shadow: var(--shadow-card);
             transition: var(--transition);
         }

         .feature-float-card:hover {
             transform: scale(1.04);
         }

         .feat-fl-1 {
             bottom: 30px;
             left: -30px;
         }

         .feat-fl-2 {
             top: 30px;
             right: -30px;
         }

         .feat-fl-icon {
             width: 44px;
             height: 44px;
             border-radius: var(--radius-sm);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 20px;
             flex-shrink: 0;
         }

         .feat-fl-icon.green {
             background: rgba(16, 185, 129, 0.2);
             color: #10B981;
         }

         .feat-fl-icon.blue {
             background: rgba(59, 130, 246, 0.2);
             color: #60A5FA;
         }

         .feat-fl-text h5 {
             font-size: 14px;
             font-weight: 700;
             color: var(--text);
         }

         .feat-fl-text p {
             font-size: 12px;
             color: var(--text-muted);
         }

         .features-list {
             display: flex;
             flex-direction: column;
             gap: 28px;
         }

         .feature-item {
             display: flex;
             gap: 20px;
             padding: 24px;
             background: var(--glass);
             border: 1px solid var(--glass-border);
             border-radius: var(--radius-md);
             transition: var(--transition);
             cursor: default;
         }

         .feature-item:hover {
             border-color: rgba(45, 84, 135, 0.35);
             background: rgba(45, 84, 135, 0.07);
             transform: translateX(-6px);
         }

         .feature-icon {
             width: 56px;
             height: 56px;
             border-radius: var(--radius-md);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 22px;
             flex-shrink: 0;
             transition: transform 0.4s;
         }

         .feature-item:hover .feature-icon {
             transform: rotate(-10deg) scale(1.1);
         }

         .feature-icon.purple {
             background: rgba(45, 84, 135, 0.2);
             color: var(--primary-light);
         }

         .feature-icon.teal {
             background: rgba(6, 182, 212, 0.2);
             color: var(--teal);
         }

         .feature-icon.accent {
             background: rgba(245, 158, 11, 0.2);
             color: var(--accent);
         }

         .feature-icon.coral {
             background: rgba(255, 107, 107, 0.2);
             color: var(--coral);
         }

         .feature-icon.green {
             background: rgba(16, 185, 129, 0.2);
             color: #10B981;
         }

         .feature-text h3 {
             font-size: 18px;
             font-weight: 800;
             color: var(--text);
             margin-bottom: 6px;
         }

         .feature-text p {
             font-size: 14px;
             color: var(--text-muted);
             line-height: 1.7;
         }

         #instructors {
             background: var(--dark-2);
         }

         .instructors-grid {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             gap: 24px;
         }

         .instructor-card {
             background: var(--glass);
             border: 1px solid var(--glass-border);
             border-radius: var(--radius-lg);
             padding: 32px 24px;
             text-align: center;
             transition: var(--transition);
             position: relative;
             overflow: hidden;
         }

         .instructor-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 3px;
             background: linear-gradient(90deg, var(--primary), var(--teal));
             transform: scaleX(0);
             transition: transform 0.4s ease;
         }

         .instructor-card:hover::before {
             transform: scaleX(1);
         }

         .instructor-card:hover {
             transform: translateY(-8px);
             border-color: rgba(45, 84, 135, 0.3);
         }

         .instructor-avatar {
             width: 100px;
             height: 100px;
             border-radius: 50%;
             object-fit: cover;
             margin: 0 auto 16px;
             border: 3px solid var(--primary);
             box-shadow: 0 0 24px rgba(45, 84, 135, 0.4);
             transition: var(--transition);
         }

         .instructor-card:hover .instructor-avatar {
             transform: scale(1.06);
             border-color: var(--teal);
         }

         .instructor-name {
             font-size: 18px;
             font-weight: 800;
             color: var(--text);
             margin-bottom: 4px;
         }

         .instructor-title {
             font-size: 13px;
             color: var(--primary-light);
             font-weight: 600;
             margin-bottom: 12px;
         }

         .instructor-stats {
             display: flex;
             justify-content: center;
             gap: 24px;
             border-top: 1px solid var(--glass-border);
             padding-top: 16px;
             margin-top: 16px;
         }

         .ins-stat span {
             display: block;
             font-size: 18px;
             font-weight: 800;
             color: var(--text);
         }

         .ins-stat small {
             font-size: 12px;
             color: var(--text-muted);
         }

         .instructor-social {
             display: flex;
             justify-content: center;
             gap: 12px;
             margin-top: 16px;
         }

         .instructor-social a {
             width: 34px;
             height: 34px;
             border-radius: 50%;
             background: var(--glass);
             border: 1px solid var(--glass-border);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 14px;
             color: var(--text-muted);
             transition: var(--transition);
         }

         .instructor-social a:hover {
             background: var(--primary);
             color: #fff;
             border-color: var(--primary);
             transform: translateY(-3px);
         }

         #testimonials {
             background: linear-gradient(135deg, var(--dark-3) 0%, var(--dark-2) 100%);
             overflow: hidden;
         }

         .swiper-testimonials {
             padding-bottom: 60px !important;
         }

         .testimonial-card {
             background: var(--card-bg);
             border: 1px solid var(--glass-border);
             border-radius: var(--radius-lg);
             padding: 36px;
             position: relative;
             overflow: hidden;
             transition: var(--transition);
             backdrop-filter: blur(12px);
             height: auto;
         }

         .testimonial-card:hover {
             border-color: rgba(45, 84, 135, 0.3);
         }

         .testimonial-card::before {
             content: '"';
             position: absolute;
             top: -20px;
             left: 24px;
             font-size: 120px;
             font-family: serif;
             color: rgba(45, 84, 135, 0.12);
             line-height: 1;
         }

         .testimonial-stars {
             color: var(--accent);
             font-size: 16px;
             margin-bottom: 16px;
         }

         .testimonial-text {
             font-size: 15px;
             color: var(--text);
             line-height: 1.85;
             margin-bottom: 28px;
         }

         .testimonial-author {
             display: flex;
             align-items: center;
             gap: 14px;
         }

         .testimonial-author img {
             width: 48px;
             height: 48px;
             border-radius: 50%;
             object-fit: cover;
             border: 2px solid var(--primary);
         }

         .testimonial-avatar-icon {
             width: 48px;
             height: 48px;
             border-radius: 50%;
             border: 2px solid var(--primary);
             background: rgba(45, 84, 135, 0.1);
             display: flex;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
             font-size: 22px;
             color: var(--primary-light);
         }

         .testimonial-author-info h4 {
             font-size: 15px;
             font-weight: 700;
             color: var(--text);
         }

         .testimonial-author-info p {
             font-size: 13px;
             color: var(--text-muted);
         }

         .swiper-pagination-bullet {
             background: var(--text-dim) !important;
         }

         .swiper-pagination-bullet-active {
             background: var(--primary) !important;
             transform: scale(1.4);
         }

         #promo2 {
             background: var(--dark);
             padding: 80px 0;
         }

         .promo2-inner {
             background: linear-gradient(135deg, var(--dark-3) 0%, var(--dark-4) 100%);
             border: 1px solid var(--glass-border);
             border-radius: var(--radius-xl);
             padding: 60px;
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 40px;
             align-items: center;
             position: relative;
             overflow: hidden;
         }

         .promo2-inner::before {
             content: '';
             position: absolute;
             top: -100px;
             right: -100px;
             width: 400px;
             height: 400px;
             border-radius: 50%;
             background: radial-gradient(circle, rgba(45, 84, 135, 0.15) 0%, transparent 70%);
         }

         .promo2-text {
             position: relative;
             z-index: 1;
             padding-top: 24px;
         }

         .promo2-text h2 {
             font-size: clamp(24px, 3vw, 38px);
             font-weight: 900;
             color: var(--text);
             margin-bottom: 16px;
             line-height: 1.5;
         }

         .promo2-text p {
             font-size: 16px;
             color: var(--text-muted);
             margin-bottom: 32px;
         }

         .promo2-features {
             display: flex;
             flex-direction: column;
             gap: 12px;
         }

         .promo2-feat {
             display: flex;
             align-items: center;
             gap: 12px;
             font-size: 15px;
             color: var(--text);
             font-weight: 600;
         }

         .promo2-feat i {
             color: #10B981;
             font-size: 16px;
         }

         .promo2-visual {
             position: relative;
             z-index: 1;
         }

         .promo2-img {
             width: 100%;
             border-radius: var(--radius-lg);
             border: 1px solid var(--glass-border);
             box-shadow: var(--shadow-card);
         }

         .promo2-badge {
             position: absolute;
             top: -16px;
             right: 30px;
             background: linear-gradient(135deg, var(--accent), #F97316);
             color: #fff;
             padding: 8px 20px;
             border-radius: 100px;
             font-size: 14px;
             font-weight: 700;
             box-shadow: 0 4px 20px rgba(245, 158, 11, 0.5);
         }

         #footer {
             background: var(--dark-2);
             border-top: 1px solid var(--glass-border);
         }

         .footer-top {
             display: grid;
             grid-template-columns: 2fr 1fr 1fr 1fr;
             gap: 48px;
             padding: 80px 0 60px;
         }

         .footer-brand .nav-logo {
             margin-bottom: 20px;
         }

         .footer-desc {
             font-size: 14px;
             color: var(--text-muted);
             line-height: 1.8;
             margin-bottom: 24px;
         }

         .footer-social {
             display: flex;
             gap: 12px;
         }

         .social-btn {
             width: 40px;
             height: 40px;
             border-radius: 50%;
             background: var(--glass);
             border: 1px solid var(--glass-border);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 16px;
             color: var(--text-muted);
             transition: var(--transition);
         }

         .social-btn:hover {
             transform: translateY(-4px);
         }

         .social-btn.twitter:hover {
             background: #1DA1F2;
             border-color: #1DA1F2;
             color: #fff;
         }

         .social-btn.instagram:hover {
             background: linear-gradient(135deg, #F09433, #E6683C, #DC2743, #CC2366, #BC1888);
             border-color: transparent;
             color: #fff;
         }

         .social-btn.linkedin:hover {
             background: #0077B5;
             border-color: #0077B5;
             color: #fff;
         }

         .social-btn.youtube:hover {
             background: #FF0000;
             border-color: #FF0000;
             color: #fff;
         }

         .social-btn.tiktok:hover {
             background: #000;
             border-color: #69C9D0;
             color: #69C9D0;
         }

         .footer-col h4 {
             font-size: 16px;
             font-weight: 800;
             color: var(--text);
             margin-bottom: 20px;
             position: relative;
             padding-bottom: 12px;
         }

         .footer-col h4::after {
             content: '';
             position: absolute;
             bottom: 0;
             right: 0;
             width: 32px;
             height: 2px;
             background: var(--primary);
             border-radius: 1px;
         }

         .footer-links {
             display: flex;
             flex-direction: column;
             gap: 12px;
         }

         .footer-links a {
             font-size: 14px;
             color: var(--text-muted);
             display: flex;
             align-items: center;
             gap: 8px;
             transition: var(--transition);
         }

         .footer-links a i {
             font-size: 12px;
             color: var(--primary-light);
             transition: var(--transition);
         }

         .footer-links a:hover {
             color: var(--primary);
             padding-right: 8px;
         }

         .footer-links a:hover i {
             color: var(--accent);
         }

         .footer-contact-item {
             display: flex;
             align-items: flex-start;
             gap: 12px;
             font-size: 14px;
             color: var(--text-muted);
             margin-bottom: 14px;
         }

         .footer-contact-item i {
             color: var(--primary-light);
             margin-top: 3px;
             flex-shrink: 0;
         }

         .footer-bottom {
             padding: 24px 0;
             border-top: 1px solid var(--glass-border);
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 16px;
             flex-wrap: wrap;
         }

         .footer-bottom-text {
             font-size: 14px;
             color: var(--text-muted);
         }

         .footer-bottom-links {
             display: flex;
             gap: 24px;
         }

         .footer-bottom-links a {
             font-size: 13px;
             color: var(--text-dim);
             transition: var(--transition);
         }

         .footer-bottom-links a:hover {
             color: var(--primary-light);
         }

         #scrollTop {
             position: fixed;
             bottom: 32px;
             left: 32px;
             width: 48px;
             height: 48px;
             border-radius: 50%;
             background: linear-gradient(135deg, var(--primary), var(--primary-dark));
             color: #fff;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 18px;
             box-shadow: 0 4px 20px rgba(45, 84, 135, 0.5);
             cursor: pointer;
             opacity: 0;
             transform: translateY(20px);
             transition: var(--transition);
             z-index: 999;
             border: none;
         }

         #scrollTop.visible {
             opacity: 1;
             transform: translateY(0);
         }

         #scrollTop:hover {
             transform: translateY(-4px);
             box-shadow: 0 8px 28px rgba(45, 84, 135, 0.7);
         }

         @media (max-width: 1100px) {
             .courses-grid {
                 grid-template-columns: repeat(2, 1fr);
             }
             .categories-grid {
                 grid-template-columns: repeat(3, 1fr);
             }
             .instructors-grid {
                 grid-template-columns: repeat(2, 1fr);
             }
             .footer-top {
                 grid-template-columns: 1fr 1fr;
                 gap: 36px;
             }
         }

         @media (max-width: 900px) {
             .hero-content {
                 grid-template-columns: 1fr;
                 gap: 48px;
             }
             .hero-visual {
                 order: -1;
             }
             .hero-main-card {
                 max-width: 100%;
             }
             .stats-grid {
                 grid-template-columns: repeat(2, 1fr);
             }
             .features-grid {
                 grid-template-columns: 1fr;
             }
             .features-visual {
                 display: none;
             }
             .promo2-inner {
                 grid-template-columns: 1fr;
             }
             .nav-links,
             .nav-actions {
                 display: none;
             }
             .hamburger {
                 display: flex;
             }
             .nav-mobile-actions {
                 display: flex;
                 align-items: center;
                 gap: 4px;
             }
             #promo {
                 padding: 32px 28px;
                 flex-direction: column;
                 text-align: center;
             }
         }

         @media (max-width: 650px) {
             .courses-grid {
                 grid-template-columns: 1fr;
             }
             .courses-filter-wrap {
                 gap: 8px;
             }
             .courses-filter-tab {
                 padding: 8px 13px;
                 font-size: 12px;
             }
             .categories-grid {
                 grid-template-columns: repeat(2, 1fr);
             }
             .instructors-grid {
                 grid-template-columns: 1fr;
             }
             .footer-top {
                 grid-template-columns: 1fr;
             }
             .hero-btns {
                 flex-direction: column;
             }
             .hero-stats {
                 gap: 20px;
             }
             .section-header {
                 flex-direction: column;
                 align-items: flex-start;
             }
             .stats-grid {
                 grid-template-columns: 1fr 1fr;
             }
         }

         .course-enroll {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
             width: 100%;
             padding: 11px 14px;
             margin-top: 12px;
             border-radius: var(--radius-md);
             background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
              font-size: 15px;
              font-weight: 800;
              font-family: 'Cairo', sans-serif;
             text-align: center;
             text-decoration: none;
             border: 1px solid rgba(255, 255, 255, 0.16);
             cursor: pointer;
             position: relative;
             overflow: hidden;
             transition: var(--transition);
             box-shadow: 0 6px 20px rgba(45, 84, 135, 0.38);
             isolation: isolate;
         }

         .course-enroll::before {
             content: '';
             position: absolute;
             inset: 0;
             background: rgba(255, 255, 255, 0.12);
             opacity: 0;
             transition: opacity 0.3s;
         }

         .course-enroll:hover {
             transform: translateY(-3px);
             box-shadow: 0 10px 30px rgba(45, 84, 135, 0.55);
         }

         .course-enroll:hover::before {
             opacity: 1;
         }

         .course-enroll:active {
             transform: translateY(0);
         }

         .course-enroll:focus-visible {
             outline: 2px solid rgba(45, 84, 135, 0.45);
             outline-offset: 2px;
         }

         .course-enroll i {
             margin-left: 0;
             font-size: 13px;
             transition: transform 0.25s ease;
         }

         .course-enroll:hover i {
             transform: translateX(-2px);
         }

         .course-enroll--enrolled {
             background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
             box-shadow: 0 6px 20px rgba(22, 163, 74, 0.35);
         }

         .course-enroll--enrolled:hover {
             box-shadow: 0 10px 30px rgba(22, 163, 74, 0.5);
         }

         .course-enroll--free {
             background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
             box-shadow: 0 6px 20px rgba(8, 145, 178, 0.35);
         }

         .course-enroll--free:hover {
             box-shadow: 0 10px 30px rgba(8, 145, 178, 0.5);
         }

         #bottom-nav {
             display: none;
             position: fixed;
             bottom: 0;
             left: 0;
             right: 0;
             z-index: 1001;
             background: #ffffff;
             border-top: 1px solid rgba(0, 0, 0, 0.08);
             padding: 0 0 env(safe-area-inset-bottom);
             box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.07);
         }

         .bottom-nav-inner {
             display: flex;
             align-items: stretch;
             justify-content: space-around;
             height: 62px;
         }

         .bnav-item {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             gap: 3px;
             padding: 0 14px;
             color: #94A3B8;
             font-size: 10.5px;
             font-weight: 600;
             font-family: 'Cairo', sans-serif;
             text-decoration: none;
             transition: color 0.25s;
             position: relative;
             flex: 1;
         }

         .bnav-item i {
             font-size: 19px;
             transition: transform 0.25s, color 0.25s;
         }

         .bnav-item.active {
             color: var(--primary);
         }

         .bnav-item.active i {
             transform: translateY(-2px);
         }

         .bnav-item.active::before {
             content: '';
             position: absolute;
             top: 0;
             left: 50%;
             transform: translateX(-50%);
             width: 28px;
             height: 3px;
             background: var(--primary);
             border-radius: 0 0 6px 6px;
         }

         .layouts-bnav-item.is-active {
             color: var(--primary);
         }

         .layouts-bnav-item.is-active i {
             transform: translateY(-2px);
         }

         .layouts-bnav-item.is-active::before {
             content: '';
             position: absolute;
             top: 0;
             left: 50%;
             transform: translateX(-50%);
             width: 28px;
             height: 3px;
             background: var(--primary);
             border-radius: 0 0 6px 6px;
         }

         .bnav-cart-wrap {
             position: relative;
             display: flex;
             align-items: center;
             justify-content: center;
         }

         .bnav-cart-badge {
             position: absolute;
             top: -7px;
             left: -7px;
             min-width: 16px;
             height: 16px;
             border-radius: 50%;
             background: var(--coral);
             color: #fff;
             font-size: 9px;
             font-weight: 700;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 0 3px;
             border: 2px solid #fff;
             line-height: 1;
         }

         .nav-mobile-actions {
             display: none;
             align-items: center;
             gap: 4px;
         }

         .btn-icon-mobile {
             width: 40px;
             height: 40px;
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 18px;
             color: var(--text-muted);
             background: var(--dark-3);
             border: 1px solid var(--dark-4);
             position: relative;
             transition: var(--transition);
         }

         .btn-icon-mobile:hover {
             color: var(--primary);
             background: rgba(45, 84, 135, 0.08);
             border-color: rgba(45, 84, 135, 0.2);
         }

         .cart-badge {
             position: absolute;
             top: 1px;
             left: 1px;
             min-width: 16px;
             height: 16px;
             border-radius: 50%;
             background: var(--coral);
             color: #fff;
             font-size: 9px;
             font-weight: 700;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 0 3px;
             border: 2px solid #fff;
             line-height: 1;
         }

         @media (max-width: 900px) {
             #bottom-nav {
                 display: block;
             }
             body {
                 padding-bottom: 62px;
             }
             #scrollTop {
                 bottom: 84px;
             }
             .nav-mobile-actions {
                 display: flex;
                 align-items: center;
                 gap: 4px;
             }
             .hamburger {
                 display: flex;
             }
         }

         #join-us {
             background: var(--dark-2);
         }

         .join-cards-grid {
             display: grid;
             grid-template-columns: 1fr 1fr;
             gap: 28px;
         }

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

         .join-card {
             background: #DCE9F7;
             border-radius: var(--radius-xl);
             padding: 40px 36px;
             display: flex;
             flex-direction: column;
             gap: 28px;
             overflow: hidden;
             position: relative;
             transition: var(--transition);
         }

         .join-card:hover {
             transform: translateY(-4px);
             box-shadow: 0 16px 48px rgba(45, 84, 135, 0.1);
         }

         .join-card-img-slot {
             width: 100%;
             height: 240px;
             border-radius: var(--radius-lg);
             overflow: hidden;
             flex-shrink: 0;
         }

         .join-card-img-slot img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             display: block;
         }

         .join-img-placeholder {
             width: 100%;
             height: 100%;
             background: rgba(45, 84, 135, 0.07);
             border: 2px dashed rgba(45, 84, 135, 0.25);
             border-radius: var(--radius-lg);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 40px;
             color: rgba(45, 84, 135, 0.3);
         }

         .join-card-content {
             display: flex;
             flex-direction: column;
             gap: 16px;
         }

         .join-card-title {
             font-size: clamp(22px, 2.5vw, 30px);
             font-weight: 900;
             color: #1A2E50;
             line-height: 1.3;
             position: relative;
             display: inline-block;
         }

         .join-card-title-accent {
             color: #1A2E50;
         }

         .join-title-underline {
             display: block;
             margin-top: 6px;
             height: 4px;
             width: 80px;
             border-radius: 4px;
             background: linear-gradient(90deg, var(--accent) 0%, #F97316 100%);
         }

         .join-card-desc {
             font-size: 16px;
             color: #3D5A80;
             line-height: 1.85;
         }

         .join-card-btn {
             align-self: stretch;
             justify-content: center;
             border-radius: var(--radius-md);
             color:#fff !important;
             padding: 14px 0;
             font-size: 16px;
             background: #1A4FAF;
             box-shadow: 0 4px 18px rgba(26, 79, 175, 0.3);
         }

         .join-card-btn:hover {
             background: #606572;
             box-shadow: 0 8px 28px rgba(26, 79, 175, 0.45);
             transform: translateY(-2px);
         }

         /* حالة الزر المقفول - رمادي بدون تفاعل */
         .join-card-btn.is-locked,
         .join-card-btn.is-locked:hover {
             background: #9AA3B2;
             box-shadow: none;
             transform: none;
             cursor: not-allowed;
         }

         @media (max-width: 480px) {
             .join-card {
                 padding: 28px 20px;
                 gap: 20px;
             }
             .join-card-img-slot {
                 height: 180px;
             }
         }

         #partners {
             background: var(--dark-2);
             padding: 90px 0 80px;
             position: relative;
             overflow: hidden;
         }

         #accreditations {
             background: var(--dark-3);
             padding: 90px 0 80px;
             position: relative;
             overflow: hidden;
             border-top: 1px solid rgba(0, 0, 0, 0.06);
         }

         #partners::before,
         #accreditations::before {
             content: '';
             position: absolute;
             inset: 0;
             background: radial-gradient(ellipse 70% 55% at 50% 0%, rgba(45, 84, 135, 0.05) 0%, transparent 68%);
             pointer-events: none;
         }

         .partners-section-header {
             text-align: center;
             margin-bottom: 56px;
             position: relative;
             z-index: 1;
         }

         .partners-slider-outer {
             position: relative;
             width: 100%;
             overflow: hidden;
             direction: ltr;
         }

         .partners-fade-left,
         .partners-fade-right {
             position: absolute;
             top: 0;
             bottom: 0;
             width: 200px;
             z-index: 3;
             pointer-events: none;
         }

         #partners .partners-fade-left {
             left: 0;
             background: linear-gradient(to right, var(--dark-2) 0%, transparent 100%);
         }

         #partners .partners-fade-right {
             right: 0;
             background: linear-gradient(to left, var(--dark-2) 0%, transparent 100%);
         }

         #accreditations .partners-fade-left {
             left: 0;
             background: linear-gradient(to right, var(--dark-3) 0%, transparent 100%);
         }

         #accreditations .partners-fade-right {
             right: 0;
             background: linear-gradient(to left, var(--dark-3) 0%, transparent 100%);
         }

         .partners-track-wrapper {
             overflow: hidden;
             padding: 24px 0;
         }

         .partners-track {
             display: flex;
             flex-wrap: nowrap;
             align-items: stretch;
             gap: 28px;
             width: max-content;
             will-change: transform;
         }

         .logo-card {
             flex-shrink: 0;
             width: 220px;
             cursor: default;
         }

         .logo-card-inner {
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 18px;
             padding: 32px 24px 26px;
             border-radius: 22px;
             background: rgba(255, 255, 255, 0.72);
             backdrop-filter: blur(18px);
             -webkit-backdrop-filter: blur(18px);
             border: 1px solid rgba(255, 255, 255, 0.82);
             box-shadow: 0 2px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 32px rgba(0, 0, 0, 0.07);
             height: 100%;
             transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
         }

         .logo-card:hover .logo-card-inner {
             transform: translateY(-8px) scale(1.045);
             box-shadow: 0 2px 0 rgba(255, 255, 255, 0.9) inset, 0 22px 60px rgba(45, 84, 135, 0.18);
             border-color: rgba(45, 84, 135, 0.35);
         }

         .logo-img-wrap {
             width: 100%;
             height: 80px;
             display: flex;
             align-items: center;
             justify-content: center;
             overflow: hidden;
         }

         .logo-img-wrap img {
             max-width: 100%;
             max-height: 80px;
             width: auto;
             height: auto;
             object-fit: contain;
             transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.35s ease;
         }

         .logo-card:hover .logo-img-wrap img {
             transform: scale(1.1);
         }

         .logo-name {
             font-size: 13px;
             font-weight: 700;
             color: var(--text-muted);
             text-align: center;
             letter-spacing: 0.3px;
             direction: rtl;
             line-height: 1.4;
             transition: color 0.3s ease;
         }

         .logo-card:hover .logo-name {
             color: var(--primary);
         }

         @media (max-width: 1024px) {
             .partners-fade-left,
             .partners-fade-right {
                 width: 120px;
             }
         }

         @media (max-width: 768px) {
             #partners,
             #accreditations {
                 padding: 70px 0 60px;
             }
             .partners-section-header {
                 margin-bottom: 44px;
             }
             .partners-fade-left,
             .partners-fade-right {
                 width: 72px;
             }
             .logo-card {
                 width: 180px;
             }
             .logo-card-inner {
                 padding: 26px 16px 20px;
                 gap: 14px;
             }
             .logo-img-wrap {
                 height: 68px;
             }
             .logo-img-wrap img {
                 max-height: 68px;
             }
             .partners-track {
                 gap: 20px;
             }
         }

         @media (max-width: 480px) {
             .logo-card {
                 width: 155px;
             }
             .logo-card-inner {
                 padding: 20px 12px 16px;
             }
             .logo-img-wrap {
                 height: 56px;
             }
             .logo-img-wrap img {
                 max-height: 56px;
             }
             .partners-fade-left,
             .partners-fade-right {
                 width: 48px;
             }
         }

         #offerings {
             background: var(--dark);
         }

         .slider-section {
             position: relative;
         }

         .slider-section-header {
             display: flex;
             align-items: flex-end;
             justify-content: space-between;
             margin-bottom: 32px;
             flex-wrap: wrap;
             gap: 16px;
         }

         .off-swiper {
             overflow: hidden;
             padding-bottom: 8px;
         }

         .off-swiper .swiper-wrapper {
             align-items: stretch;
         }

         .off-swiper .swiper-slide {
             height: auto;
             width: 320px;
         }

         @media (max-width: 768px) {
             .off-swiper .swiper-slide {
                 width: 280px;
             }
         }

         @media (max-width: 480px) {
             .off-swiper .swiper-slide {
                 width: 260px;
             }
         }

         .off-card {
             background: var(--dark-3);
             border: 1px solid var(--glass-border);
             border-radius: var(--radius-lg);
             overflow: hidden;
             display: flex;
             flex-direction: column;
             height: 100%;
             transition: var(--transition);
         }

         .off-card:hover {
             border-color: rgba(79, 127, 181, 0.3);
             transform: translateY(-6px);
             box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
         }

         .off-card-featured {
             border-color: var(--primary);
             box-shadow: 0 0 0 1px var(--primary), 0 12px 40px rgba(45, 84, 135, 0.25);
         }

         .off-card-img-wrap {
             position: relative;
             width: 100%;
             height: 185px;
             overflow: hidden;
             flex-shrink: 0;
         }

         .off-card-img-wrap img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             transition: transform 0.5s ease;
         }

         .off-card:hover .off-card-img-wrap img {
             transform: scale(1.05);
         }

         .off-card-badge {
             position: absolute;
             top: 12px;
             right: 12px;
             background: rgba(45, 84, 135, 0.9);
             color: #fff;
             font-size: 11px;
             font-weight: 700;
             padding: 5px 12px;
             border-radius: 100px;
             backdrop-filter: blur(8px);
             display: flex;
             align-items: center;
             gap: 5px;
         }

         .off-card-bookmark {
             position: absolute;
             top: 12px;
             left: 12px;
             width: 34px;
             height: 34px;
             border-radius: 50%;
             background: rgba(255, 255, 255, 0.85);
             backdrop-filter: blur(8px);
             border: 1px solid rgba(0, 0, 0, 0.12);
             color: var(--text-muted);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 14px;
             transition: var(--transition);
             cursor: pointer;
         }

         .off-card-bookmark:hover {
             color: var(--accent);
             border-color: var(--accent);
         }

         .off-card-body {
             padding: 20px 20px 14px;
             flex: 1;
         }

         .off-card-cat {
             font-size: 11px;
             font-weight: 700;
             color: var(--primary-light);
             letter-spacing: 0.5px;
             margin-bottom: 8px;
             display: block;
         }

         .off-card-title {
             font-size: 15px;
             font-weight: 800;
             color: var(--text);
             line-height: 1.5;
             margin-bottom: 12px;
         }

         .off-card-meta {
             display: flex;
             align-items: center;
             gap: 12px;
             font-size: 12px;
             color: var(--text-muted);
             flex-wrap: wrap;
         }

         .off-card-meta span {
             display: flex;
             align-items: center;
             gap: 5px;
         }

         .off-card-meta i {
             color: var(--primary-light);
             font-size: 11px;
         }

         .off-card-stars {
             color: var(--accent);
             font-size: 12px;
         }

         .off-card-stars small {
             color: var(--text-muted);
             font-size: 11px;
         }

          .off-card-footer {
              padding: 14px 20px 18px;
              border-top: 1px solid var(--glass-border);
              display: flex;
              align-items: center;
              gap: 10px;
          }

          .off-card-price {
              font-size: 16px;
              font-weight: 800;
              color: var(--text);
              display: flex;
              align-items: baseline;
              gap: 4px;
              flex-wrap: wrap;
              margin-bottom: 8px;
          }

         .off-card-price span {
             font-size: 13px;
             font-weight: 600;
             color: var(--text-muted);
         }

         .off-old {
             font-size: 12px;
             color: var(--text-dim);
             text-decoration: line-through;
             font-weight: 400;
         }

           .off-card-enroll {
               padding: 12px 18px;
               border-radius: var(--radius-md);
               background: var(--primary);
               border: 1px solid var(--primary);
               font-size: 13px;
               font-weight: 700;
               font-family: 'Cairo', sans-serif;
               cursor: pointer;
               transition: var(--transition);
               white-space: nowrap;
               display: inline-flex;
               align-items: center;
               justify-content: center;
               text-align: center;
               width: 100%;
           }

         .off-card-enroll:hover {
             background: var(--primary-dark);
             border-color: var(--primary-dark);
             box-shadow: 0 4px 16px rgba(45, 84, 135, 0.4);
         }

         .slider-nav-wrap {
             position: relative;
             padding: 0 64px;
         }

         .off-nav-btn {
             position: absolute;
             top: 50%;
             transform: translateY(-50%);
             width: 48px;
             height: 48px;
             border-radius: 50%;
             background: #fff;
             border: 2px solid var(--glass-border);
             color: var(--text);
             font-size: 18px;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: var(--transition);
             z-index: 10;
         }

         .off-nav-btn:hover {
             background: var(--primary);
             color: #fff;
             border-color: var(--primary);
             box-shadow: 0 4px 20px rgba(45, 84, 135, 0.4);
             transform: translateY(-50%) scale(1.06);
         }

         .off-nav-btn.swiper-button-disabled {
             opacity: 0.3;
             pointer-events: none;
         }

         .off-nav-r {
             right: 0;
             left: auto;
         }

         .off-nav-l {
             left: 0;
             right: auto;
         }

         @media (max-width: 600px) {
             .slider-nav-wrap {
                 padding: 0 44px;
             }
             .off-nav-btn {
                 width: 36px;
                 height: 36px;
                 font-size: 14px;
             }
         }

         .prem-card {
             position: relative;
             padding: 28px 26px 24px;
             background: rgba(255, 255, 255, 0.025);
             border: 1px solid rgba(255, 255, 255, 0.08);
             border-radius: 22px;
             overflow: hidden;
             transition: border-color 0.4s, box-shadow 0.4s;
         }

         .prem-card:hover {
             border-color: rgba(45, 84, 135, 0.38);
             box-shadow: 0 0 0 1px rgba(45, 84, 135, 0.12), 0 28px 70px rgba(0, 0, 0, 0.38);
         }

         .prem-orb {
             position: absolute;
             border-radius: 50%;
             pointer-events: none;
             filter: blur(50px);
             opacity: 0.13;
             z-index: 0;
         }

         .prem-orb-a {
             width: 180px;
             height: 180px;
             background: radial-gradient(circle, #2D5487, transparent 70%);
             top: -50px;
             left: -50px;
         }

         .prem-orb-b {
             width: 130px;
             height: 130px;
             background: radial-gradient(circle, #06B6D4, transparent 70%);
             bottom: 10px;
             right: -20px;
         }

         .prem-card-head {
             position: relative;
             z-index: 1;
             margin-bottom: 22px;
         }

         .prem-head-row {
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 10px;
             margin-bottom: 12px;
             flex-wrap: wrap;
         }

         .prem-card-title {
             font-size: 18px;
             font-weight: 700;
             color: var(--text-main, #F0F0F0);
             line-height: 1.45;
             margin: 0 0 6px;
         }

         .prem-card-desc {
             color: var(--text-muted, #888);
             font-size: 12.5px;
             line-height: 1.7;
             margin: 0;
         }

         .prem-live-badge {
             display: inline-flex;
             align-items: center;
             gap: 6px;
             font-size: 11.5px;
             font-weight: 600;
             color: #10B981;
             background: rgba(16, 185, 129, 0.10);
             border: 1px solid rgba(16, 185, 129, 0.22);
             padding: 3px 10px 3px 8px;
             border-radius: 20px;
             white-space: nowrap;
         }

         .prem-live-dot {
             width: 7px;
             height: 7px;
             background: #10B981;
             border-radius: 50%;
             animation: prem-pulse-dot 1.8s ease-in-out infinite;
         }

         @keyframes prem-pulse-dot {
             0%,
             100% {
                 box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.65);
             }
             50% {
                 box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
             }
         }

         .prem-marquee-outer {
             position: relative;
             z-index: 1;
             overflow: hidden;
             border-radius: 14px;
             background: rgba(255, 255, 255, 0.022);
             border: 1px solid rgba(255, 255, 255, 0.06);
             padding: 18px 0;
         }

         .prem-marquee-fade {
             position: absolute;
             top: 0;
             bottom: 0;
             width: 72px;
             z-index: 2;
             pointer-events: none;
         }

         .prem-marquee-fade-r {
             right: 0;
             background: linear-gradient(to left, #0d0b16 0%, transparent 100%);
         }

         .prem-marquee-fade-l {
             left: 0;
             background: linear-gradient(to right, #0d0b16 0%, transparent 100%);
         }

         .prem-marquee-track {
             overflow: hidden;
         }

         .prem-marquee-inner {
             display: flex;
             align-items: center;
             gap: 18px;
             width: max-content;
             animation: prem-scroll 20s linear infinite;
             will-change: transform;
         }

         .prem-marquee-track:hover .prem-marquee-inner {
             animation-play-state: paused;
         }

         @keyframes prem-scroll {
             0% {
                 transform: translateX(0);
             }
             100% {
                 transform: translateX(-50%);
             }
         }

         .prem-logo-item {
             width: 128px;
             height: 78px;
             flex-shrink: 0;
             background: rgba(255, 255, 255, 0.04);
             border: 1px solid rgba(255, 255, 255, 0.08);
             border-radius: 12px;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 14px;
             cursor: pointer;
             transition: background 0.3s, border-color 0.3s, transform 0.3s, box-shadow 0.3s;
         }

         .prem-logo-item:hover {
             background: rgba(45, 84, 135, 0.14);
             border-color: rgba(45, 84, 135, 0.45);
             transform: translateY(-4px) scale(1.05);
             box-shadow: 0 10px 28px rgba(45, 84, 135, 0.22);
         }

         .prem-logo-item img {
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
             filter: brightness(0) invert(1);
             opacity: 0.5;
             transition: opacity 0.3s, filter 0.3s;
         }

         .prem-logo-item:hover img {
             filter: brightness(1) invert(0);
             opacity: 1;
         }

         .prem-active-ticker {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 7px;
             margin-top: 14px;
             font-size: 12px;
             color: var(--text-muted, #888);
             position: relative;
             z-index: 1;
         }

         .prem-ticker-dot {
             width: 6px;
             height: 6px;
             background: var(--primary, #2D5487);
             border-radius: 50%;
             animation: prem-pulse-dot 2s ease infinite;
         }

         .prem-ticker-name {
             font-weight: 600;
             color: var(--text-main, #F0F0F0);
             transition: opacity 0.3s;
         }

         .prem-ticker-sep {
             opacity: 0.3;
         }

         .prem-ticker-type {
             color: var(--primary, #2D5487);
             background: rgba(45, 84, 135, 0.11);
             padding: 2px 9px;
             border-radius: 10px;
             font-size: 11px;
             font-weight: 500;
             transition: opacity 0.3s;
         }

         .prem-accred {
             position: relative;
         }

         .prem-seal-bg-icon {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
             font-size: 170px;
             color: rgba(255, 255, 255, 0.012);
             pointer-events: none;
             z-index: 0;
         }

         .prem-official-tag {
             display: inline-flex;
             align-items: center;
             gap: 5px;
             font-size: 11.5px;
             font-weight: 600;
             color: #F59E0B;
             background: rgba(245, 158, 11, 0.10);
             border: 1px solid rgba(245, 158, 11, 0.22);
             padding: 3px 10px;
             border-radius: 20px;
             white-space: nowrap;
         }

         .prem-official-tag i {
             font-size: 12px;
         }

         .prem-accred-grid {
             display: flex;
             justify-content: space-around;
             align-items: flex-start;
             gap: 10px;
             position: relative;
             z-index: 1;
         }

         .prem-accred-seal-item {
             display: flex;
             flex-direction: column;
             align-items: center;
             gap: 10px;
             cursor: pointer;
             flex: 1;
             transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
         }

         .prem-accred-seal-item:hover {
             transform: translateY(-6px);
         }

         .prem-seal-ring-wrap {
             position: relative;
             width: 88px;
             height: 88px;
         }

         .prem-seal-ring-svg {
             position: absolute;
             inset: 0;
             width: 100%;
             height: 100%;
             transform: rotate(-90deg);
         }

         .prem-seal-ring-track {
             fill: none;
             stroke: rgba(255, 255, 255, 0.06);
             stroke-width: 2.5;
             stroke-dasharray: 276.46;
         }

         .prem-seal-ring-progress {
             fill: none;
             stroke: var(--primary, #2D5487);
             stroke-width: 2.5;
             stroke-linecap: round;
             stroke-dasharray: 276.46;
             stroke-dashoffset: 276.46;
             transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
             opacity: 0.65;
         }

         .prem-accred-seal-item.is-animated .prem-seal-ring-progress {
             stroke-dashoffset: 55;
         }

         .prem-accred-seal-item:hover .prem-seal-ring-progress {
             stroke: #F59E0B;
             opacity: 1;
             stroke-dashoffset: 0;
             transition: stroke-dashoffset 0.8s ease, stroke 0.3s, opacity 0.3s;
         }

         .prem-seal-logo {
             position: absolute;
             inset: 11px;
             background: rgba(255, 255, 255, 0.04);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 12px;
             transition: background 0.3s;
         }

         .prem-accred-seal-item:hover .prem-seal-logo {
             background: rgba(245, 158, 11, 0.09);
         }

         .prem-seal-logo img {
             max-width: 100%;
             max-height: 100%;
             object-fit: contain;
             filter: brightness(0) invert(1);
             opacity: 0.55;
             transition: opacity 0.3s, filter 0.3s;
         }

         .prem-accred-seal-item:hover .prem-seal-logo img {
             filter: brightness(1) invert(0);
             opacity: 1;
         }

         .prem-seal-label {
             font-size: 11px;
             font-weight: 600;
             color: var(--text-main, #F0F0F0);
             text-align: center;
             line-height: 1.4;
         }

         .prem-seal-type {
             font-size: 10px;
             color: var(--primary, #2D5487);
             background: rgba(45, 84, 135, 0.10);
             padding: 2px 8px;
             border-radius: 10px;
         }

         .prem-accred-trust-bar {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
             margin-top: 20px;
             padding: 10px 16px;
             background: linear-gradient(90deg, rgba(45, 84, 135, 0.08), rgba(6, 182, 212, 0.08));
             border-radius: 12px;
             border: 1px solid rgba(255, 255, 255, 0.06);
             font-size: 11.5px;
             color: var(--text-muted, #888);
             position: relative;
             z-index: 1;
         }

         .prem-accred-trust-bar i {
             color: #10B981;
             font-size: 13px;
         }

         @media (max-width: 480px) {
             .prem-logo-item {
                 width: 105px;
                 height: 65px;
             }
             .prem-seal-ring-wrap {
                 width: 72px;
                 height: 72px;
             }
             .prem-card {
                 padding: 22px 18px 18px;
             }
         }

         .img-slider-wrap {
             position: relative;
             z-index: 1;
             user-select: none;
         }

         .img-slide-track {
             position: relative;
             height: 200px;
             border-radius: 18px;
             overflow: hidden;
             background: rgba(255, 255, 255, 0.03);
         }

         .img-slide {
             position: absolute;
             inset: 0;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 20px;
             opacity: 0;
             transform: translateX(50px);
             transition: opacity 0.55s cubic-bezier(0.4, 0, 0.2, 1), transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
             pointer-events: none;
             will-change: opacity, transform;
         }

         .img-slide.is-prev {
             opacity: 0;
             transform: translateX(-50px);
         }

         .img-slide.is-active {
             opacity: 1;
             transform: translateX(0);
             pointer-events: auto;
         }

         .img-slide img {
             max-width: 78%;
             max-height: 145px;
             object-fit: contain;
             display: block;
             border-radius: 0;
         }

         .img-slide-meta {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 8px;
             margin-top: 14px;
             font-size: 12.5px;
             color: var(--text-muted, #888);
             min-height: 24px;
         }

         .img-slide-label {
             font-weight: 600;
             color: var(--text-main, #F0F0F0);
         }

         .img-slide-sep {
             opacity: 0.3;
             color: #fff;
         }

         .img-slide-badge {
             color: var(--primary, #2D5487);
             background: rgba(45, 84, 135, 0.12);
             border: 1px solid rgba(45, 84, 135, 0.22);
             padding: 2px 10px;
             border-radius: 20px;
             font-size: 11px;
             font-weight: 500;
         }

         .img-slide-dots {
             display: flex;
             justify-content: center;
             gap: 7px;
             margin-top: 14px;
         }

         .img-dot-btn {
             width: 8px;
             height: 8px;
             border-radius: 4px;
             background: rgba(255, 255, 255, 0.18);
             border: none;
             cursor: pointer;
             padding: 0;
             transition: background 0.35s, width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
         }

         .img-dot-btn.is-active {
             background: var(--primary, #2D5487);
             width: 24px;
         }

         .img-dot-btn:hover:not(.is-active) {
             background: rgba(255, 255, 255, 0.4);
         }

         .img-slider-arrows {
             display: flex;
             justify-content: flex-end;
             gap: 8px;
             margin-top: 10px;
         }

         .img-arrow-btn {
             width: 32px;
             height: 32px;
             border-radius: 50%;
             background: rgba(255, 255, 255, 0.07);
             border: 1px solid rgba(255, 255, 255, 0.12);
             color: var(--text-main, #F0F0F0);
             font-size: 13px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: background 0.25s, border-color 0.25s, transform 0.2s;
         }

         .img-arrow-btn:hover {
             background: rgba(45, 84, 135, 0.22);
             border-color: rgba(45, 84, 135, 0.5);
             transform: scale(1.1);
         }

         @media (max-width: 480px) {
             .img-slide-track {
                 height: 160px;
             }
             .img-slide img {
                 max-width: 80%;
                 max-height: 110px;
                 padding: 12px 18px;
             }
         }

         @media (max-width: 768px) {
             .courses-filter-wrap {
                 flex-wrap: nowrap;
                 overflow-x: auto;
                 -webkit-overflow-scrolling: touch;
                 padding-bottom: 8px;
                 padding-right: 4px;
                 scrollbar-width: none;
                 -ms-overflow-style: none;
                 scroll-snap-type: x mandatory;
                 margin-bottom: 14px;
             }
             .courses-filter-wrap::-webkit-scrollbar {
                 display: none;
             }
             .courses-filter-tab {
                 flex-shrink: 0;
                 scroll-snap-align: start;
                 white-space: nowrap;
             }
         }

         .join-img-placeholder {
             font-size: 0 !important;
             padding: 0 !important;
             overflow: hidden;
             background: transparent !important;
             border: none !important;
             border-radius: var(--radius-lg);
             display: block;
         }

         .join-img-placeholder i {
             display: block;
             width: 100%;
             height: 100%;
             font-size: 0 !important;
             line-height: 0;
             font-style: normal;
         }

         .join-img-placeholder i img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             border-radius: var(--radius-lg);
             display: block;
         }

         /* رفع الجزء الظاهر من صورة المدرب للأعلى */
         .join-img-placeholder i img.join-img-raise {
             object-position: center 20%;
         }

         .course-card {
             will-change: transform;
         }

         .course-card::before {
             content: '';
             position: absolute;
             top: 0;
             left: 0;
             right: 0;
             height: 2px;
             background: linear-gradient(90deg, var(--primary-light), var(--teal));
             transform: scaleX(0);
             transform-origin: right;
             transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
             z-index: 2;
             border-radius: var(--radius-lg) var(--radius-lg) 0 0;
         }

         .course-card:hover::before {
             transform: scaleX(1);
             transform-origin: left;
         }

         .course-price {
             font-size: 16px;
             font-weight: 900;
             color: var(--primary-dark);
             line-height: 1;
         }

         .course-category {
             letter-spacing: 0.4px;
             font-size: 11px;
         }

         @media (max-width: 650px) {
             .home-page .instructor span:last-child {
                 max-width: 90px;
                 white-space: nowrap;
                 overflow: hidden;
                 text-overflow: ellipsis;
                 display: inline-block;
             }
             .home-page .course-footer {
                 gap: 6px;
             }
             .home-page .course-price {
                 font-size: 13px;
                 white-space: nowrap;
             }
         }

         @media (max-width: 480px) {
             .hero-headline {
                 font-size: clamp(16px, 4.5vw, 22px);
                 letter-spacing: -0.5px;
                 margin-bottom: 18px;
             }
             .hero-desc {
                 font-size: 15px;
                 line-height: 1.75;
                 margin-bottom: 26px;
             }
             .hero-stats-bar {
                 padding: 18px 0;
             }
             .hstat-num {
                 font-size: 18px;
             }
             .hero-stats-row {
                 gap: 10px;
             }
             .hero-collage {
                 height: 230px;
             }
         }

         @media (max-width: 600px) {
             #promo {
                 margin: 0 16px !important;
                 padding: 24px 22px !important;
                 border-radius: var(--radius-lg) !important;
                 flex-direction: column;
                 align-items: flex-start;
                 text-align: right;
                 gap: 18px;
             }
             .promo-text h2 {
                 font-size: 18px;
                 line-height: 1.4;
             }
             .promo-text p {
                 font-size: 13.5px;
             }
             .promo-action {
                 width: 100%;
             }
             .promo-action .btn {
                 width: 100%;
                 justify-content: center;
             }
         }

         @media (max-width: 650px) {
             .section-pad {
                 padding: 64px 0;
             }
             .home-page .section-pad {
                 padding: 60px 0;
             }
             .container {
                 margin-bottom: 10rem;
                 padding: 0 16px;
             }
         }

         @media (max-width: 640px) {
             .section-header {
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 12px;
                 margin-bottom: 18px;
             }
             .section-header .btn {
                 align-self: flex-start;
             }
             .slider-section-header {
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 10px;
                 margin-bottom: 18px;
             }
             .slider-section-header .btn {
                 align-self: flex-start;
             }
         }

         @media (max-width: 650px) {
             .promo2-inner {
                 padding: 32px 22px;
                 grid-template-columns: 1fr;
             }
             .promo2-visual {
                 display: none;
             }
         }

         .off-card {
             will-change: transform;
             transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease;
         }

         .off-card-enroll {
             border-radius: 12px;
             transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
         }

         .off-card-enroll:hover {
             transform: translateY(-2px);
             box-shadow: 0 6px 20px rgba(45, 84, 135, 0.32);
         }

         .testimonial-card {
             border-radius: 20px;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
             transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
         }

         .testimonial-card:hover {
             transform: translateY(-4px);
             box-shadow: 0 14px 44px rgba(0, 0, 0, 0.1);
         }

         .home-page #about .feature-item {
             padding: 20px;
             gap: 15px;
             transition: border-color 0.3s ease, background 0.3s ease, transform 0.3s ease;
         }

         @media (max-width: 900px) {
             .home-page #about .features-grid {
                 grid-template-columns: 1fr;
                 gap: 40px;
             }
         }

         @media (max-width: 900px) {
             .home-page .courses-grid {
                 gap: 14px;
             }
         }

         .badge-teal {
             background: rgba(6, 182, 212, 0.12);
             border-color: rgba(6, 182, 212, 0.28);
             color: #0891B2;
         }

         .home-page .course-price {
             color: var(--primary-dark);
             font-size: 15px;
             font-weight: 900;
         }

         .courses-filter-meta {
             margin-bottom: 18px;
             font-size: 13px;
         }

         .join-card-img-slot {
             border-radius: var(--radius-lg);
             overflow: hidden;
             height: 220px;
             position: relative;
         }

         @media (max-width: 420px) {
             .btn.btn-primary,
             .btn-hero-outline {
                 padding: 12px 22px;
                 font-size: 14px;
             }
         }

         #scrollTop {
             backdrop-filter: blur(10px);
             -webkit-backdrop-filter: blur(10px);
         }

         @media (max-width: 900px) and (min-width: 651px) {
             .home-page .courses-grid {
                 grid-template-columns: repeat(2, minmax(0, 1fr));
                 gap: 18px;
             }
         }

         .home-page .instructor-avatar {
             width: 30px;
             height: 30px;
             font-size: 13px;
         }

         .off-card {
             border-radius: 20px;
         }

         .hstat-sep {
             background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.12), transparent);
         }

         .home-page .section-title {
             margin-bottom: 8px;
         }

         .off-card-body {
             padding: 18px 18px 12px;
             height:10rem;
         }

         .off-card-footer {
             padding: 12px 18px 16px;
         }

         html {
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
             text-rendering: optimizeLegibility;
         }

         @media (max-width: 900px) {
             body {
                 padding-bottom: max(62px, calc(62px + env(safe-area-inset-bottom)));
             }
         }

         @keyframes heroGlow {
             0%,
             100% {
                 background-position: 0% 50%;
             }
             50% {
                 background-position: 100% 50%;
             }
         }

         @keyframes shimmerSlide {
             0% {
                 transform: translateX(100%) skewX(-15deg);
             }
             100% {
                 transform: translateX(-200%) skewX(-15deg);
             }
         }

         @keyframes floatUp {
             0% {
                 transform: translateY(0);
             }
             100% {
                 transform: translateY(-8px);
             }
         }

         @keyframes gradShift {
             0%,
             100% {
                 background-position: 0% 50%;
             }
             50% {
                 background-position: 100% 50%;
             }
         }

         @keyframes tabPop {
             0% {
                 transform: translateY(-2px) scale(1.03);
             }
             60% {
                 transform: translateY(-3px) scale(1.05);
             }
             100% {
                 transform: translateY(-2px) scale(1);
             }
         }

         @keyframes enrollShimmer {
             0% {
                 left: -100%;
             }
             100% {
                 left: 200%;
             }
         }

         @keyframes arrowBounce {
             0%,
             100% {
                 transform: translateX(0);
             }
             50% {
                 transform: translateX(-4px);
             }
         }

         @keyframes courses-skeleton-shimmer {
             0% {
                 background-position: 200% 0;
             }
             100% {
                 background-position: -200% 0;
             }
         }

         #navbar {
             transition: padding 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease, box-shadow 0.35s ease;
         }

         #navbar.scrolled {
             padding: 10px 0;
             box-shadow: 0 4px 24px rgba(0, 0, 0, 0.07), 0 1px 0 rgba(0, 0, 0, 0.04);
         }

         .home-page .hero-headline {
             background: linear-gradient(135deg, var(--text) 0%, #1E3A5F 40%, #3D3D6B 100%);
             background-size: 200% 200%;
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
             letter-spacing: -0.03em;
             padding-bottom: 4px;
             animation: heroGlow 6s ease infinite;
         }

         .home-page .hero-text {
             display: flex;
             flex-direction: column;
             justify-content: center;
         }

         .home-page .hero-desc {
             line-height: 1.85;
         }

         .home-page .hero-btns {
             margin-top: 4px;
         }

         .home-page .hero-inner {}

         .home-page .hero-cta-mobile {
             display: none;
         }

         .home-page .btn.btn-primary {
             padding: 14px 32px;
             font-size: 15px;
             letter-spacing: 0.1px;
             position: relative;
             overflow: hidden;
         }

         .home-page .btn.btn-primary::after {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 60%;
             height: 100%;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
             transform: skewX(-15deg);
             animation: shimmerSlide 3s ease-in-out infinite;
             pointer-events: none;
         }

         .home-page .btn-hero-outline {
             padding: 14px 28px;
         }

         .home-page .hero-btns .btn-hero-outline {
             display: none;
         }

         @media (min-width: 769px) {
             .home-page .hero-collage .btn-hero-outline {
                 position: absolute;
                 bottom: 60px;
                 right: 0;
             }
         }

         @media (min-width: 1024px) {
             .home-page .hero-collage .btn-hero-outline {
                 display: none;
             }
             .home-page .hero-btns {
                 flex-wrap: nowrap;
                 gap: 14px;
             }
             .home-page .hero-btns .btn-hero-outline {
                 display: inline-flex;
                 background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
                 color: #fff;
                 flex-shrink: 0;
                 white-space: nowrap;
             }
             .home-page .hero-search {
                 flex: 1;
                 max-width: none;
                 min-width: 0;
             }
         }

         .home-page .hero-search {
             display: flex;
             width: 100%;
             max-width: 480px;
             border-radius: 100px;
             overflow: hidden;
             background: #fff;
             border: 1.5px solid rgba(15, 23, 42, 0.10);
             transition: border-color 0.3s ease, box-shadow 0.3s ease;
             box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06);
         }

         .home-page .hero-search:focus-within {
             border-color: var(--primary);
             box-shadow: 0 0 0 3px rgba(45, 84, 135, 0.12), 0 4px 20px rgba(45, 84, 135, 0.10);
         }

         .home-page .hero-search-input {
             flex: 1;
             min-width: 0;
             border: none;
             outline: none;
             background: transparent;
             padding: 16px 22px;
             font-size: 15px;
             font-family: 'Cairo', sans-serif;
             color: var(--text);
             direction: rtl;
         }

         .home-page .hero-search-input::placeholder {
             color: var(--text-dim);
             font-weight: 500;
         }

         .home-page .hero-search-btn {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
             width: 54px;
             border: none;
             background: var(--primary);
             color: #fff;
             font-size: 17px;
             cursor: pointer;
             transition: background 0.25s ease, transform 0.2s ease;
         }

         .home-page .hero-search-btn:hover {
             background: var(--primary-dark, #1E3A5F);
         }

         .home-page .hero-search-btn:active {
             transform: scale(0.92);
         }

         .home-page .collage-img--large {
             animation: floatUp 3s ease-in-out infinite alternate;
         }

         .home-page .hero-slider {
             height: 100%;
         }

         .home-page .hero-slider-viewport {
             position: relative;
             width: 100%;
             height: 100%;
             overflow: hidden;
         }

         .home-page .hero-slider-track {
             position: relative;
             width: 100%;
             height: 100%;
         }

         .home-page .hero-slider-slide {
             position: absolute;
             inset: 0;
             opacity: 0;
             z-index: 1;
             will-change: transform;
         }

         .home-page .hero-slider-slide.is-active {
             opacity: 1;
             z-index: 2;
         }

         .home-page .hero-slider-slide img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             display: block;
             transition: none;
         }

         .home-page .hero-slider-slide.is-active img {
             animation: heroKenBurns 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
             transform-origin: center;
         }

         .home-page .hero-slider-overlay {
             position: absolute;
             inset: 0;
             z-index: 3;
             pointer-events: none;
             background: linear-gradient(to top, rgba(15, 23, 42, 0.5) 0%, transparent 45%), radial-gradient(ellipse at 30% 40%, rgba(45, 84, 135, 0.18) 0%, transparent 60%);
             border-radius: inherit;
         }

         .home-page .hero-slider-dots {
             position: absolute;
             bottom: 18px;
             left: 50%;
             transform: translateX(-50%);
             display: flex;
             align-items: center;
             gap: 8px;
             z-index: 5;
             direction: ltr;
         }

         .home-page .hero-slider-dot {
             width: 8px;
             height: 8px;
             border-radius: 50%;
             background: rgba(255, 255, 255, 0.40);
             border: none;
             cursor: pointer;
             padding: 0;
             transition: background 0.3s ease, width 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
             flex-shrink: 0;
             box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
         }

         .home-page .hero-slider-dot:hover {
             background: rgba(255, 255, 255, 0.7);
         }

         .home-page .hero-slider-dot.is-active {
             width: 26px;
             border-radius: 4px;
             background: #fff;
             box-shadow: 0 0 12px rgba(45, 84, 135, 0.45);
         }

         @keyframes heroKenBurns {
             0% {
                 transform: scale(1);
             }
             100% {
                 transform: scale(1.12);
             }
         }

         .home-page .hero-stats-bar {
             border-top: 1px solid rgba(45, 84, 135, 0.10);
             background: linear-gradient(to bottom, rgba(248, 250, 252, 0.7), rgba(255, 255, 255, 1));
             backdrop-filter: blur(12px);
             -webkit-backdrop-filter: blur(12px);
         }

         .home-page .hstat-num {
             font-variant-numeric: tabular-nums;
         }

         .home-page .hero-stat-item {
             padding: 6px 8px;
         }

         .home-page #courses .courses-filter-tab {
             display: inline-flex;
             align-items: center;
             gap: 6px;
         }

         .home-page #courses .courses-filter-count {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             min-width: 22px;
             height: 20px;
             padding: 0 6px;
             border-radius: 999px;
             background: rgba(45, 84, 135, 0.12);
             color: var(--primary);
             font-size: 11px;
             font-weight: 800;
             transition: var(--transition);
         }

         .home-page #courses .courses-filter-tab.is-active .courses-filter-count {
             background: rgba(255, 255, 255, 0.22);
             color: #fff;
         }

         .home-page #courses #categorizedCoursesSection.is-loading {
             min-height: 260px;
         }

         .home-page .features-section {
             position: relative;
             overflow: hidden;
             isolation: isolate;
             contain: layout;
             background: radial-gradient(ellipse at 8% 15%, rgba(45, 84, 135, 0.045) 0%, transparent 48%), radial-gradient(ellipse at 92% 85%, rgba(6, 182, 212, 0.04) 0%, transparent 48%), #f8fafc;
         }

         .home-page .features-bg-shape,
         .home-page .features-bg-grid {
             display: none;
         }

         .home-page .features-content {
             position: relative;
             z-index: 1;
             display: flex;
             flex-direction: column;
         }

         .home-page .features-badge {
             margin-bottom: 20px;
             display: inline-flex;
             align-items: center;
             gap: 6px;
             font-weight: 700;
             letter-spacing: 0.15px;
             align-self: flex-start;
         }

         .home-page .features-title {
             margin:  10 0 14px;
             line-height: 1.2;
             font-size: clamp(30px, 3.8vw, 44px);
             font-weight: 900;
             letter-spacing: -0.025em;
             color: var(--text);
         }
         .home-page .features-title-line {
             display: block;
         }
         .home-page .features-title-line:first-child {
             margin-bottom: 12px;
         }

         .home-page .features-desc {
             color: var(--text-muted);
             font-size: 15px;
             line-height: 1.78;
             margin: 0 0 26px;
             max-width: 460px;
         }

         .home-page .features-stats {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             margin-bottom: 24px;
             border-radius: 16px;
             border: 1px solid rgba(15, 23, 42, 0.08);
             background: rgba(255, 255, 255, 0.85);
             backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
             overflow: hidden;
         }

         .home-page .feat-stat {
             text-align: center;
             padding: 16px 10px;
             position: relative;
         }

         .home-page .feat-stat:not(:last-child) {
             border-left: 1px solid rgba(15, 23, 42, 0.07);
         }

         .home-page .feat-stat-num {
             font-size: clamp(20px, 2.4vw, 28px);
             font-weight: 900;
             line-height: 1;
             background: linear-gradient(135deg, var(--primary) 0%, #4F7FB5 55%, #06B6D4 100%);
             background-size: 200% 200%;
             -webkit-background-clip: text;
             background-clip: text;
             -webkit-text-fill-color: transparent;
             margin-bottom: 5px;
             font-variant-numeric: tabular-nums;
             animation: gradShift 5s ease infinite;
         }

         .home-page .feat-stat-lbl {
             font-size: 11.5px;
             color: var(--text-muted);
             font-weight: 600;
         }

         .home-page .features-list {
             display: grid;
             grid-template-columns: repeat(2, 1fr);
             gap: 10px;
         }

         .home-page .feature-item {
             position: relative;
             display: flex;
             align-items: flex-start;
             gap: 13px;
             padding: 17px 15px;
             background: #ffffff;
             border: 1px solid rgba(15, 23, 42, 0.07);
             border-radius: 15px;
             transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
             cursor: default;
             overflow: hidden;
             box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.03);
         }

         .home-page .feature-item::before {
             content: '';
             position: absolute;
             inset: 0;
             background: linear-gradient(135deg, transparent 40%, var(--accent) 220%);
             opacity: 0;
             transition: opacity 0.35s ease;
             pointer-events: none;
             border-radius: inherit;
         }

         .home-page .feature-item:hover {
             border-color: color-mix(in srgb, var(--accent) 38%, transparent);
             transform: translateY(-3px);
             box-shadow: 0 10px 26px rgba(15, 23, 42, 0.09), 0 4px 8px rgba(15, 23, 42, 0.05), 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 15%, transparent);
         }

         .home-page .feature-item:hover::before {
             opacity: 0.05;
         }

         .home-page .feature-icon-wrap {
             flex-shrink: 0;
             width: 42px;
             height: 42px;
             display: flex;
             align-items: center;
             justify-content: center;
         }

         .home-page .feature-icon {
             width: 42px;
             height: 42px;
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 17px;
             border-radius: 12px;
             background: color-mix(in srgb, var(--accent, #4F7FB5) 11%, transparent);
             color: var(--accent, #4F7FB5);
             transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, color 0.35s ease;
         }

         .home-page .feature-item:hover .feature-icon {
             transform: scale(1.1) rotate(-5deg);
             background: var(--accent, #4F7FB5);
             color: #fff;
         }

         .home-page .feature-text {
             flex: 1;
             min-width: 0;
             padding-top: 1px;
         }

         .home-page .feature-text h3 {
             font-size: 13.5px;
             font-weight: 800;
             color: var(--text);
             margin: 0 0 4px;
             line-height: 1.4;
         }

         .home-page .feature-text p {
             font-size: 12px;
             color: var(--text-muted);
             margin: 0;
             line-height: 1.6;
         }

         .home-page .feature-arrow {
             display: none;
         }

         .home-page .features-visual {
             position: relative;
             z-index: 1;
             display: flex;
             flex-direction: column;
             gap: 18px;
         }

         .home-page .features-section .prem-card {
             background: #ffffff;
             border: 1px solid rgba(15, 23, 42, 0.08);
             border-radius: 22px;
             box-shadow: 0 4px 20px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.04);
             transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.35s;
             overflow: hidden;
         }

         .home-page .features-section .prem-card:hover {
             transform: translateY(-5px);
             border-color: rgba(45, 84, 135, 0.18);
             box-shadow: 0 18px 50px rgba(15, 23, 42, 0.09), 0 0 0 1px rgba(45, 84, 135, 0.10);
         }

         .home-page .features-section .prem-orb {
             opacity: 0.07;
         }

         .home-page .features-section .prem-card-title {
             color: var(--text, #0F172A);
         }

         .home-page .features-section .prem-card-desc {
             color: var(--text-muted, #64748B);
         }

         .home-page .features-section .prem-live-badge,
         .home-page .features-section .prem-official-tag {
             background: #0F172A;
             border: 1px solid #0F172A;
         }

         .home-page .features-section .prem-live-badge>span,
         .home-page .features-section .prem-official-tag>* {
             color: #ffffff;
         }

         .home-page .features-section .prem-live-badge .prem-live-dot {
             background: #ffffff;
             box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
         }

         .home-page .features-section .prem-official-tag i {
             color: #ffffff;
         }

         .home-page .trust-carousel {
             position: relative;
         }

         .home-page .trust-viewport {
             position: relative;
             height: 164px;
             border-radius: 18px;
             overflow: hidden;
             background: linear-gradient(145deg, #f1f5f9 0%, #f8fafc 100%);
             border: 1px solid rgba(15, 23, 42, 0.07);
             box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.04);
             margin-bottom: 13px;
             touch-action: pan-y;
         }

         .home-page .trust-track {
             position: relative;
             width: 100%;
             height: 100%;
         }

         .home-page .trust-slide {
             position: absolute;
             inset: 0;
             display: flex;
             align-items: center;
             justify-content: center;
             padding: 22px 28px;
             opacity: 0;
             transform: translateX(32px) scale(0.97);
             transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
             pointer-events: none;
             will-change: opacity, transform;
         }

         .home-page .trust-slide.is-prev {
             transform: translateX(-32px) scale(0.97);
         }

         .home-page .trust-slide.is-active {
             opacity: 1;
             transform: translateX(0) scale(1);
             pointer-events: auto;
         }

         .home-page .trust-slide img {
              max-width: 70%;
              max-height: 108px;
              object-fit: contain;
              display: block;
              filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.10));
          }

         .home-page .trust-fallback {
              display: flex;
              align-items: center;
              justify-content: center;
              width: 100%;
              height: 100%;
              background: linear-gradient(145deg, #f1f5f9 0%, #f8fafc 100%);
              border-radius: 12px;
          }

         .home-page .trust-fallback::before {
              font-family: "Font Awesome 6 Free";
              font-weight: 900;
              content: "\f1b2";
              font-size: 3rem;
              color: #94a3b8;
          }

         .home-page .trust-meta {
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 8px;
             font-size: 12px;
             color: var(--text-muted);
             margin-bottom: 11px;
             padding: 0 1px;
         }

         .home-page .trust-meta-info {
             display: flex;
             align-items: center;
             gap: 5px;
             flex: 1;
             min-width: 0;
         }

         .home-page .trust-meta-icon {
             color: #10B981;
             font-size: 12px;
             flex-shrink: 0;
         }

         .home-page .trust-meta-label {
             font-size: 12px;
             font-weight: 700;
             color: var(--text);
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }

         .home-page .trust-meta-sep {
             opacity: 0.28;
             flex-shrink: 0;
         }

         .home-page .trust-meta-badge {
             color: var(--primary);
             background: color-mix(in srgb, var(--primary) 9%, transparent);
             border: 1px solid color-mix(in srgb, var(--primary) 16%, transparent);
             padding: 2px 7px;
             border-radius: 20px;
             font-size: 10px;
             font-weight: 700;
             flex-shrink: 0;
         }

         .home-page .trust-arrows {
             display: flex;
             gap: 5px;
             flex-shrink: 0;
         }

         .home-page .features-section .trust-arrow {
             width: 30px;
             height: 30px;
             border-radius: 50%;
             background: #f8fafc;
             border: 1px solid rgba(15, 23, 42, 0.10);
             color: var(--text, #0F172A);
             font-size: 11px;
             cursor: pointer;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
             box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
         }

         .home-page .features-section .trust-arrow:hover {
             background: var(--primary);
             color: #fff;
             border-color: var(--primary);
             transform: scale(1.1);
             box-shadow: 0 4px 14px color-mix(in srgb, var(--primary) 40%, transparent);
         }

         .home-page .features-section .trust-arrow:active {
             transform: scale(0.92);
         }

         .home-page .features-section .trust-dots {
             display: flex;
             justify-content: center;
             gap: 5px;
         }

         .home-page .features-section .trust-dot {
             width: 6px;
             height: 6px;
             border-radius: 3px;
             background: rgba(15, 23, 42, 0.12);
             border: none;
             cursor: pointer;
             padding: 0;
             transition: background 0.28s ease, width 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
         }

         .home-page .features-section .trust-dot.is-active {
             background: var(--primary);
             width: 24px;
         }

         .home-page .features-section .trust-dot:hover:not(.is-active) {
             background: rgba(15, 23, 42, 0.22);
         }

         .home-page [data-reveal] {
             opacity: 0;
             transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
             will-change: opacity, transform;
         }

         .home-page [data-reveal="left"] {
             transform: translateX(-40px);
         }

         .home-page [data-reveal="right"] {
             transform: translateX(40px);
         }

         .home-page [data-reveal="up"] {
             transform: translateY(40px);
         }

         .home-page [data-reveal="down"] {
             transform: translateY(-40px);
         }

         .home-page [data-reveal="scale"] {
             transform: scale(0.94);
         }

         .home-page [data-reveal].is-visible {
             opacity: 1;
             transform: translate(0, 0) scale(1);
         }

         .home-page [data-reveal].is-visible .stagger-child {
             opacity: 1;
             transform: translateY(0);
         }

         .home-page .stagger-child {
             opacity: 0;
             transform: translateY(18px);
             transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
         }

         .home-page [data-reveal].is-visible .stagger-child:nth-child(1) {
             transition-delay: 0.05s;
         }

         .home-page [data-reveal].is-visible .stagger-child:nth-child(2) {
             transition-delay: 0.13s;
         }

         .home-page [data-reveal].is-visible .stagger-child:nth-child(3) {
             transition-delay: 0.21s;
         }

         .home-page [data-reveal].is-visible .stagger-child:nth-child(4) {
             transition-delay: 0.29s;
         }

         .home-page [data-reveal].is-visible .stagger-child:nth-child(5) {
             transition-delay: 0.37s;
         }

         .home-page [data-reveal].is-visible .stagger-child:nth-child(6) {
             transition-delay: 0.45s;
         }

         .home-page {
             scroll-behavior: smooth;
             overflow-x: hidden;
         }

         .home-page .section-pad {
             position: relative;
         }

         .home-page .section-pad::before {
             content: '';
             position: absolute;
             top: 0;
             left: 50%;
             transform: translateX(-50%);
             width: min(80%, 720px);
             height: 1px;
             background: linear-gradient(90deg, transparent, rgba(45, 84, 135, 0.18), transparent);
             pointer-events: none;
         }

         .home-page .section-header {
             transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
         }

         .home-page .course-card,
         .home-page .off-card,
         .home-page .stat-card,
         .home-page .testimonial-card,
         .home-page .join-card {
             will-change: transform;
         }

         .home-page a:focus-visible,
         .home-page button:focus-visible {
             outline: 2px solid color-mix(in srgb, var(--primary) 70%, transparent);
             outline-offset: 2px;
             border-radius: 6px;
         }

         #courses {
             contain: layout;
         }

         .home-page #courses .slider-section-header {
             align-items: center;
         }

         .home-page #courses .courses-filter-wrap {
             display: flex;
             gap: 8px;
             overflow-x: auto;
             overflow-y: visible;
             padding: 2px 2px 14px;
             scrollbar-width: none;
             -ms-overflow-style: none;
             flex-wrap: nowrap;
             -webkit-overflow-scrolling: touch;
             scroll-snap-type: x mandatory;
         }

         .home-page #courses .courses-filter-wrap::-webkit-scrollbar {
             display: none;
         }

         .home-page .courses-filter-tab {
             flex-shrink: 0;
             display: inline-flex;
             align-items: center;
             gap: 7px;
             padding: 9px 20px;
             border-radius: 99px;
             font-size: 13.5px;
             font-weight: 700;
             white-space: nowrap;
             cursor: pointer;
             border: 1.5px solid rgba(15, 23, 42, 0.10);
             background: #ffffff;
             color: var(--text-muted);
             box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
             transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             letter-spacing: 0.05px;
             outline: none;
             position: relative;
             overflow: hidden;
             scroll-snap-align: start;
         }

         .home-page .courses-filter-tab::before {
             content: '';
             position: absolute;
             inset: 0;
             background: linear-gradient(135deg, rgba(45, 84, 135, 0.06) 0%, rgba(6, 182, 212, 0.04) 100%);
             opacity: 0;
             transition: opacity 0.28s ease;
             pointer-events: none;
         }

         .home-page .courses-filter-tab:hover {
             border-color: rgba(45, 84, 135, 0.30);
             color: var(--primary);
             transform: translateY(-2px);
             box-shadow: 0 5px 18px rgba(45, 84, 135, 0.14);
         }

         .home-page .courses-filter-tab:hover::before {
             opacity: 1;
         }

         .home-page .courses-filter-tab.is-active {
             background: linear-gradient(135deg, var(--primary) 0%, #4F7FB5 100%);
             border-color: transparent;
             color: #ffffff;
             box-shadow: 0 6px 22px rgba(45, 84, 135, 0.38);
             animation: tabPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
         }

         .home-page .courses-filter-tab.is-active:focus-visible {
             outline: 2px solid rgba(255, 255, 255, 0.7);
             outline-offset: 2px;
         }

         .home-page .courses-filter-tab.is-active::before {
             opacity: 0;
         }

         .home-page #courses .courses-filter-count {
             display: inline-flex;
             align-items: center;
             justify-content: center;
             min-width: 20px;
             height: 18px;
             padding: 0 5px;
             border-radius: 999px;
             font-size: 10.5px;
             font-weight: 800;
             background: rgba(45, 84, 135, 0.10);
             color: var(--primary);
             transition: all 0.28s ease;
         }

         .home-page #courses .courses-filter-tab.is-active .courses-filter-count {
             background: rgba(255, 255, 255, 0.22);
             color: #ffffff;
         }

         .home-page .courses-filter-meta {
             font-size: 13px;
             color: var(--text-muted);
             margin: 0 0 22px;
             font-weight: 500;
         }

         .home-page #courses #categorizedCoursesSwiper {
             padding-bottom: 14px;
         }

         .home-page #courses .swiper-wrapper {
             align-items: stretch;
         }

         .home-page #courses .swiper-slide {
             height: auto !important;
             display: flex;
             flex-direction: column;
         }

         .home-page #courses .course-card {
             display: flex;
             flex-direction: column;
             height: 100%;
             background: #ffffff;
             border-radius: 18px;
             border: 1px solid rgba(15, 23, 42, 0.08);
             box-shadow: 0 2px 12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
             overflow: hidden;
             transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
             position: relative;
             transform: translateZ(0);
         }

         .home-page #courses .course-card::after {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 2px;
             background: linear-gradient(90deg, var(--primary), #4F7FB5, #06B6D4);
             opacity: 0;
             transition: opacity 0.3s ease;
         }

         .home-page #courses .course-card:hover {
             transform: translateY(-6px) translateZ(0);
             box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(45, 84, 135, 0.12);
             border-color: rgba(45, 84, 135, 0.18);
         }

         .home-page #courses .course-card:hover::after {
             opacity: 1;
         }

         .home-page #courses .card-hover-overlay {
             position: absolute;
             inset: 0;
             pointer-events: none;
             z-index: 2;
         }

         .home-page #courses .course-card>a {
             display: block;
             flex-shrink: 0;
             height: 196px;
             overflow: hidden;
             background: #f1f5f9;
         }

         .home-page #courses .course-img-wrap {
             position: relative;
             width: 100%;
             height: 100%;
             overflow: hidden;
         }

         .home-page #courses .course-img-wrap img {
             width: 100%;
             height: 100%;
             object-fit: cover;
             display: block;
             transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
         }

         .home-page #courses .course-card:hover .course-img-wrap img {
             transform: scale(1.07);
         }

         .home-page #courses .course-level {
             position: absolute;
             bottom: 10px;
             right: 10px;
             padding: 4px 10px;
             background: rgba(0, 0, 0, 0.62);
             backdrop-filter: blur(8px);
             -webkit-backdrop-filter: blur(8px);
             color: #fff;
             font-size: 11px;
             font-weight: 700;
             border-radius: 8px;
             letter-spacing: 0.2px;
             border: 1px solid rgba(255, 255, 255, 0.1);
             white-space: nowrap;
         }

         .home-page #courses .course-body {
             display: flex;
             flex-direction: column;
             flex: 1;
             padding: 17px 17px 15px;
             gap: 0;
         }

         .home-page #courses .course-category {
             font-size: 10.5px;
             font-weight: 800;
             color: var(--primary);
             text-transform: uppercase;
             letter-spacing: 0.7px;
             margin-bottom: 8px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }

         .home-page #courses .course-title {
             font-size: 15px;
             font-weight: 800;
             line-height: 1.45;
             color: var(--text);
             margin: 0 0 11px;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
             min-height: calc(15px * 1.45 * 2);
         }

         .home-page #courses .course-title a {
             color: inherit;
             text-decoration: none;
             transition: color 0.2s ease;
         }

         .home-page #courses .course-title a:hover {
             color: var(--primary);
         }

         .home-page #courses .course-meta {
             display: flex;
             align-items: center;
             gap: 10px;
             flex-wrap: wrap;
             font-size: 12px;
             color: var(--text-muted);
             flex-grow: 1;
             align-content: flex-start;
             margin-bottom: 0;
             padding-bottom: 12px;
         }

         .home-page #courses .course-meta span {
             display: inline-flex;
             align-items: center;
             gap: 4px;
         }

         .home-page #courses .course-meta i {
             font-size: 10.5px;
             opacity: 0.75;
         }

         .home-page #courses .course-rating {
             margin-right: auto;
         }

         .home-page #courses .course-footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
             gap: 10px;
             padding: 11px 0 10px;
             border-top: 1px solid rgba(15, 23, 42, 0.07);
         }

         .home-page #courses .instructor {
             display: flex;
             align-items: center;
             gap: 7px;
             min-width: 0;
             flex: 1;
             font-size: 12px;
             color: var(--text-muted);
             font-weight: 600;
             overflow: hidden;
         }

         .home-page #courses .instructor>span:not(.instructor-avatar) {
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }

         .home-page #courses .instructor-avatar {
             flex-shrink: 0;
             width: 26px;
             height: 26px;
             border-radius: 50%;
             background: linear-gradient(135deg, rgba(45, 84, 135, 0.10) 0%, rgba(6, 182, 212, 0.08) 100%);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 11px;
             color: var(--primary);
         }

         .home-page #courses .course-price {
             font-size: 15px;
             font-weight: 900;
             color: var(--primary);
             white-space: nowrap;
             flex-shrink: 0;
             letter-spacing: -0.02em;
         }

         .home-page #courses .course-enroll {
             display: flex;
             align-items: center;
             justify-content: center;
             gap: 7px;
             width: 100%;
             padding: 11px 16px;
              background: linear-gradient(135deg, var(--primary) 0%, #4F7FB5 100%);
              font-size: 13.5px;
             font-weight: 800;
             border-radius: 12px;
             text-decoration: none;
             letter-spacing: 0.05px;
             transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
             overflow: hidden;
             border: none;
             cursor: pointer;
             box-shadow: 0 4px 14px rgba(45, 84, 135, 0.25);
         }

         .home-page #courses .course-enroll::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 50%;
             height: 100%;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
             transform: skewX(-15deg);
             pointer-events: none;
         }

         .home-page #courses .course-enroll:hover::before {
             animation: enrollShimmer 0.6s ease forwards;
         }

          .home-page #courses .course-enroll:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 24px rgba(45, 84, 135, 0.42);
              filter: brightness(1.08);
          }

         .home-page #courses .course-enroll:active {
             transform: translateY(0);
         }

         .home-page #courses .course-enroll i {
             font-size: 13px;
         }

         .home-page #courses .course-continue,
         .home-page .off-card-continue {
             background: linear-gradient(135deg, #015c95 0%, #0084ff 100%);
             box-shadow: 0 4px 14px #00b3ff4d !important;
         }

         .home-page #courses .course-continue:hover,
         .home-page .off-card-continue:hover {
             box-shadow: 0 8px 24px #00cafd4d !important;
             filter: brightness(1.06);
         }

         .home-page .course-enroll:disabled,
         .home-page .off-card-enroll:disabled {
             cursor: not-allowed;
             opacity: 0.6;
             transform: none !important;
             box-shadow: none !important;
         }

         .home-page #courses .off-nav-btn {
             background: #ffffff;
             border: 1.5px solid rgba(15, 23, 42, 0.10);
             color: var(--text);
             box-shadow: 0 4px 16px rgba(15, 23, 42, 0.10);
         }

         .home-page #courses .off-nav-btn:hover {
             background: var(--primary);
             border-color: var(--primary);
             color: #ffffff;
             box-shadow: 0 8px 28px rgba(45, 84, 135, 0.38);
         }

         .home-page #categorizedCoursesSection.is-loading .course-card {
             background: linear-gradient(90deg, #f0f2f5 25%, #f8fafc 50%, #f0f2f5 75%);
             background-size: 200% 100%;
             animation: courses-skeleton-shimmer 1.4s ease infinite;
             pointer-events: none;
             box-shadow: none;
         }

         .home-page #categorizedCoursesSection.is-loading .course-card * {
             opacity: 0;
         }

         .home-page .off-card {
             border-radius: 20px;
             transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
             transform: translateZ(0);
         }

         .home-page .off-card:hover {
             transform: translateY(-10px) translateZ(0);
             box-shadow: 0 24px 60px rgba(0, 0, 0, 0.13), 0 0 0 1px rgba(45, 84, 135, 0.1);
         }

         .home-page .off-card-img-wrap {
             position: relative;
         }

         .home-page .off-card-img-wrap::after {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 55%;
             background: linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, transparent 100%);
             pointer-events: none;
         }

         .home-page .off-card-badge {
             backdrop-filter: blur(4px);
             -webkit-backdrop-filter: blur(4px);
             border: 1px solid rgba(255, 255, 255, 0.15);
         }

         .home-page .off-card-bookmark {
             transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease;
         }

         .home-page .off-card-bookmark:hover {
             transform: scale(1.15) rotate(-8deg);
         }

         .home-page .off-card-enroll {
             border-radius: 12px;
             font-weight: 800;
             letter-spacing: 0.2px;
             transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
             position: relative;
             overflow: hidden;
         }

         .home-page .off-card-enroll::before {
             content: '';
             position: absolute;
             top: 0;
             left: -100%;
             width: 50%;
             height: 100%;
             background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
             transform: skewX(-15deg);
             pointer-events: none;
         }

         .home-page .off-card-enroll:hover::before {
             animation: enrollShimmer 0.6s ease forwards;
         }

         .home-page .off-card-enroll:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 24px rgba(45, 84, 135, 0.38);
         }

         .home-page .off-card-footer {
             border-top: 1px solid rgba(15, 23, 42, 0.07);
         }

         /* .home-page .off-card-featured {
             box-shadow: 0 0 0 2px var(--primary), 0 16px 48px rgba(45, 84, 135, 0.2);
         }

         .home-page .off-card-featured:hover {
             box-shadow: 0 0 0 2px var(--primary), 0 28px 70px rgba(45, 84, 135, 0.28);
         } */

         .home-page .off-nav-btn {
             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         }

         .home-page .off-nav-btn:hover {
             box-shadow: 0 8px 28px rgba(45, 84, 135, 0.35);
         }

         #testimonials {
             background: linear-gradient(160deg, #F8FAFC 0%, #F1F5F9 60%, #EEF2FF 100%);
             contain: layout;
         }

         .home-page .testimonial-card {
             border-radius: 22px;
             background: #ffffff;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
             transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.3s ease;
             position: relative;
         }

         .home-page .testimonial-card::before {
             content: '\201C';
             position: absolute;
             top: 18px;
             right: 20px;
             font-size: 56px;
             line-height: 1;
             font-family: Georgia, serif;
             color: color-mix(in srgb, var(--primary) 12%, transparent);
             pointer-events: none;
         }

         .home-page .testimonial-card:hover {
             transform: translateY(-6px);
             box-shadow: 0 20px 52px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(45, 84, 135, 0.08);
             border-color: rgba(45, 84, 135, 0.15);
         }

         .home-page .testimonial-stars {
             font-size: 17px;
             letter-spacing: 1px;
             margin-bottom: 14px;
             background: linear-gradient(90deg, #F59E0B, #F97316);
             -webkit-background-clip: text;
             background-clip: text;
             -webkit-text-fill-color: transparent;
         }

         .home-page .testimonial-text {
             font-size: 14.5px;
             line-height: 1.9;
             color: var(--text);
         }

         .home-page .testimonial-author-info h4 {
             font-weight: 800;
         }

         .home-page .testimonial-avatar-icon {
             background: linear-gradient(135deg, var(--primary) 0%, #4F7FB5 100%);
             color: #fff;
         }

         .home-page .join-card {
             transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease;
             box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
         }

         .home-page .join-card:hover {
             transform: translateY(-6px);
             box-shadow: 0 20px 56px rgba(45, 84, 135, 0.12);
             border-color: rgba(45, 84, 135, 0.18);
         }

         .home-page .join-img-placeholder {
             position: relative;
             overflow: hidden;
         }

         .home-page .join-img-placeholder::after {
             content: '';
             position: absolute;
             bottom: 0;
             left: 0;
             right: 0;
             height: 40%;
             background: linear-gradient(to top, rgba(15, 23, 42, 0.35) 0%, transparent 100%);
             pointer-events: none;
         }

         .home-page .join-card-btn {
             border-radius: 14px;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
             font-weight: 800;
         }

         .home-page .join-card-btn:hover {
             transform: translateY(-3px);
             box-shadow: 0 12px 32px rgba(26, 79, 175, 0.38);
         }

         .home-page .join-card-btn:hover i {
             animation: arrowBounce 0.6s ease infinite;
         }

         #promo2 {
             background: var(--dark);
         }

         .home-page .promo2-inner {
             background: linear-gradient(135deg, #F5F8FF 0%, #EDF1FF 40%, #E8F4FF 70%, #F0F9FF 100%);
             border: 1px solid rgba(45, 84, 135, 0.14);
             box-shadow: 0 8px 48px rgba(45, 84, 135, 0.10), 0 2px 8px rgba(45, 84, 135, 0.06);
         }

         .home-page .promo2-text h2 {
             line-height: 1.5;
         }

         .home-page .promo2-feat {
             display: flex;
             align-items: center;
             gap: 10px;
             border-right: 2px solid color-mix(in srgb, var(--primary) 20%, transparent);
             padding-right: 10px;
         }

         .home-page .promo2-feat i {
             font-size: 14px;
             flex-shrink: 0;
         }

         .home-page .promo2-img {
             border-radius: 20px;
             box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
             transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
         }

         .home-page .promo2-visual:hover .promo2-img {
             transform: scale(1.02) translateY(-4px);
         }

         .home-page .section-title {
             letter-spacing: -0.01em;
         }

         .home-page .slider-section-header {
             align-items: flex-start;
             gap: 20px;
         }

         @media (max-width: 992px) {
             .home-page #about .features-grid {
                 grid-template-columns: 1fr;
                 gap: 36px;
             }
             .home-page .features-visual {
                 display: flex;
                 flex-direction: row;
                 gap: 18px;
             }
             .home-page .features-visual .prem-card {
                 flex: 1;
             }
         }

         @media (max-width: 768px) {
             .home-page .feature-item {
                 padding: 13px 12px;
                 gap: 10px;
             }
             .home-page .feature-icon-wrap,
             .home-page .feature-icon {
                 width: 38px;
                 height: 38px;
             }
             .home-page .feature-icon {
                 font-size: 15px;
                 border-radius: 10px;
             }
             .home-page .feature-text h3 {
                 font-size: 13px;
             }
             .home-page .feature-text p {
                 font-size: 11.5px;
             }
             .home-page .trust-viewport {
                 height: 142px;
             }
             .home-page #courses .course-card>a {
                 height: 178px;
             }
             .home-page #courses .course-title {
                 font-size: 14px;
                 min-height: calc(14px * 1.45 * 2);
             }
             .home-page #courses .course-body {
                 padding: 14px 14px 12px;
             }
             .home-page #courses .course-enroll {
                 font-size: 13px;
                 padding: 10px 14px;
             }
         }

         @media (max-width: 768px) {
             .home-page .hero-inner {
                 grid-template-columns: 1fr;
                 gap: 24px;
             }
             .home-page .hero-text {
                 order: 1;
                 text-align: center;
             }
             .home-page .hero-collage {
                 order: 2;
                 height: clamp(220px, 55vw, 280px);
                 width: 100%;
                 max-width: 100%;
                 margin-top: 0;
             }
             .home-page .collage-grid {
                 grid-template-columns: 1fr;
                 grid-template-rows: 1fr;
                 gap: 0;
                 height: 100%;
             }
             .home-page .collage-img--large {
                 grid-row: 1;
                 border-radius: 24px;
                 box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
                 overflow: hidden;
                 position: relative;
             }
             .home-page .hero-slider {
                 height: 100%;
                 border-radius: 24px;
             }
             .home-page .hero-slider-viewport {
                 border-radius: 24px;
                 height: 100%;
             }
             .home-page .hero-slider-overlay {
                 border-radius: 24px;
             }
             .home-page .hero-slider-slide img {
                 width: 100%;
                 height: 100%;
                 object-fit: cover;
                 object-position: center;
                 display: block;
             }
             .home-page .hero-slider-slide.is-active img {
                 animation: heroKenBurns 8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
             }
             .home-page .hero-headline {
                 font-size: clamp(16px, 4.5vw, 22px);
                 line-height: 1.25;
                 text-align: center;
             }
             .home-page .hero-desc {
                 font-size: 15px;
                 line-height: 1.8;
                 text-align: center;
                 max-width: 100%;
             }
             .home-page .hero-btns {
                 flex-direction: column;
                 gap: 10px;
                 align-items: stretch;
                 margin-top: 0;
             }
             .home-page .hero-search {
                 max-width: 100%;
             }
             .home-page .hero-search-input {
                 padding: 14px 18px;
                 font-size: 14px;
             }
             .home-page .hero-search-btn {
                 width: 48px;
                 font-size: 15px;
             }
             .home-page .btn-hero-outline {
                 width: 100%;
                 justify-content: center;
             }
             #hero>.container {
                 padding-top: 10px;
                 padding-bottom: 12px;
             }
             .home-page .hero-text {
                 padding: 0;
             }
             .home-page .hero-slider-dots {
                 bottom: 12px;
             }
             .home-page .collage-dots,
             .home-page .collage-ring {
                 display: none;
             }
         }

         @media (max-width: 640px) {
             .home-page .slider-section-header {
                 margin-bottom: 20px;
             }
             .home-page .hero-btns {
                 gap: 12px;
             }
             .home-page .btn.btn-primary,
             .home-page .btn-hero-outline {
                 width: 100%;
                 justify-content: center;
             }
             .home-page .features-visual {
                 flex-direction: column;
             }
         }

         @media (max-width: 576px) {
             .home-page .features-stats {
                 border-radius: 12px;
             }
             .home-page .feat-stat {
                 padding: 12px 8px;
             }
             .home-page .testimonial-card {
                 padding: 24px 20px;
             }
             .home-page .promo2-text h2 {
                 font-size: clamp(22px, 5vw, 32px);
             }
             .home-page .join-card-title {
                 font-size: clamp(20px, 5vw, 26px);
             }
         }

         @media (max-width: 560px) {
             .home-page .features-list {
                 grid-template-columns: 1fr;
             }
         }

         @media (max-width: 480px) {
             .home-page .feat-stat-num {
                 font-size: 19px;
             }
             .home-page .feat-stat-lbl {
                 font-size: 11px;
             }
             .home-page .trust-meta-info {
                 flex-wrap: wrap;
             }
             .home-page #courses .course-card>a {
                 height: 162px;
             }
             .home-page .courses-filter-tab {
                 padding: 8px 14px;
                 font-size: 12.5px;
             }
         }

         @media (max-width: 425px) {
             .home-page .hero-headline {
                  font-size: clamp(15px, 5vw, 20px);
             }
             .home-page #courses .course-card>a {
                 height: 148px;
             }
             .home-page .courses-filter-tab {
                 padding: 7px 12px;
                 font-size: 12px;
             }
             .home-page .off-card {
                 border-radius: 16px;
             }
         }

         @media (max-width: 375px) {
             .home-page .hero-headline {
                  font-size: clamp(14px, 5vw, 18px);
             }
             .home-page .btn.btn-primary,
             .home-page .btn-hero-outline {
                 width: 100%;
                 justify-content: center;
             }
             .home-page .feat-stat-num {
                 font-size: 17px;
             }
             .home-page .features-stats {
                 grid-template-columns: 1fr;
             }
         }

         @media (max-width: 320px) {
              .home-page .hero-headline {
                  font-size: 14px;
              }
             .home-page .features-title {
                 font-size: 22px;
             }
             .home-page .feat-stat-num {
                 font-size: 15px;
             }
             .home-page .courses-filter-tab {
                 padding: 6px 10px;
                 font-size: 11.5px;
             }
             .home-page .off-card {
                 border-radius: 14px;
             }
         }

         @media (prefers-reduced-motion: reduce) {
             .home-page [data-reveal],
             .home-page .stagger-child,
             .home-page .features-bg-shape,
             .home-page .feature-item,
             .home-page .feature-icon,
             .home-page .feature-arrow,
             .home-page .prem-card,
             .home-page .trust-arrow,
             .home-page .hero-headline,
             .home-page .feat-stat-num,
             .home-page .btn.btn-primary::after,
             .home-page .collage-img--large,
             .home-page .hero-slider-slide,
             .home-page .hero-slider-slide.is-active img,
             .home-page .hero-slider-dot,
             .home-page .courses-filter-tab.is-active,
             .home-page .off-card-enroll::before,
             .home-page #courses .course-enroll::before,
             .home-page .join-card-btn i,
             .home-page {
                 transition: none !important;
                 animation: none !important;
                 scroll-behavior: auto !important;
             }
         }

         .gift-float-btn {
             position: fixed;
             bottom: 90px;
             right: 24px;
             z-index: 9000;
             display: flex;
             align-items: center;
             gap: 8px;
             padding: 14px 22px;
             background: linear-gradient(135deg, var(--primary, #2D5487) 0%, #4F7FB5 100%);
             color: #fff;
             border: none;
             border-radius: 50px;
             font-family: 'Cairo', sans-serif;
             font-size: 15px;
             font-weight: 700;
             cursor: pointer;
             box-shadow: 0 8px 28px rgba(45, 84, 135, 0.40), 0 2px 8px rgba(0, 0, 0, 0.12);
             transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
             white-space: nowrap;
         }

         .gift-float-btn:hover {
             transform: translateY(-3px) scale(1.03);
             box-shadow: 0 14px 40px rgba(45, 84, 135, 0.50), 0 4px 12px rgba(0, 0, 0, 0.14);
         }

         .gift-float-btn:active {
             transform: scale(0.97);
         }

         @media (max-width: 480px) {
             .gift-float-btn {
                 bottom: 80px;
                 right: 16px;
                 padding: 12px 16px;
                 font-size: 13px;
             }
         }

         #faq {
             background: radial-gradient(ellipse at 8% 25%, rgba(45, 84, 135, 0.04) 0%, transparent 50%), radial-gradient(ellipse at 92% 75%, rgba(6, 182, 212, 0.035) 0%, transparent 50%), #f8fafc;
             position: relative;
             overflow: hidden;
         }

         .faq-bg-shape {
             position: absolute;
             top: -120px;
             left: -120px;
             width: 360px;
             height: 360px;
             border-radius: 50%;
             background: radial-gradient(circle, rgba(45, 84, 135, 0.06) 0%, transparent 70%);
             pointer-events: none;
         }

         .faq-bg-dots {
             position: absolute;
             bottom: 60px;
             right: 40px;
             width: 140px;
             height: 140px;
             background-image: radial-gradient(circle, rgba(45, 84, 135, 0.12) 1.2px, transparent 1.2px);
             background-size: 18px 18px;
             pointer-events: none;
             opacity: 0.6;
         }

         .faq-accordion {
             max-width: 760px;
             margin: 0 auto;
             display: flex;
             flex-direction: column;
             gap: 12px;
         }

         .faq-item {
             background: #ffffff;
             border: 1px solid rgba(15, 23, 42, 0.08);
             border-radius: 18px;
             overflow: hidden;
             transition: border-color 0.3s ease, box-shadow 0.3s ease;
             box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
         }

         .faq-item:hover {
             border-color: rgba(45, 84, 135, 0.20);
             box-shadow: 0 6px 24px rgba(45, 84, 135, 0.08);
         }

         .faq-item.is-open {
             border-color: rgba(45, 84, 135, 0.25);
             box-shadow: 0 4px 20px rgba(45, 84, 135, 0.10);
         }

         .faq-trigger {
             display: flex;
             align-items: center;
             gap: 14px;
             width: 100%;
             padding: 20px 22px;
             background: none;
             border: none;
             cursor: pointer;
             font-family: 'Cairo', sans-serif;
             font-size: 15.5px;
             font-weight: 700;
             color: var(--text);
             text-align: right;
             transition: color 0.25s ease;
             position: relative;
         }

         .faq-item:hover .faq-trigger {
             color: var(--primary);
         }

         .faq-item.is-open .faq-trigger {
             color: var(--primary);
         }

         .faq-icon {
             display: flex;
             align-items: center;
             justify-content: center;
             width: 36px;
             height: 36px;
             border-radius: 10px;
             background: rgba(45, 84, 135, 0.08);
             color: var(--primary-light);
             font-size: 15px;
             flex-shrink: 0;
             transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
         }

         .faq-item:hover .faq-icon {
             background: rgba(45, 84, 135, 0.14);
             transform: scale(1.05);
         }

         .faq-item.is-open .faq-icon {
             background: linear-gradient(135deg, var(--primary) 0%, #4F7FB5 100%);
             color: #fff;
         }

         .faq-question {
             flex: 1;
             text-align: right;
             line-height: 1.5;
         }

         .faq-arrow {
             display: flex;
             align-items: center;
             justify-content: center;
             width: 28px;
             height: 28px;
             flex-shrink: 0;
             color: var(--text-dim);
             font-size: 13px;
             transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.25s ease;
         }

         .faq-item.is-open .faq-arrow {
             transform: rotate(180deg);
             color: var(--primary);
         }

         .faq-panel {
             display: grid;
             grid-template-rows: 0fr;
             transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1);
             padding: 0 22px;
         }

         .faq-item.is-open .faq-panel {
             grid-template-rows: 1fr;
         }

         .faq-answer {
             overflow: hidden;
             font-size: 15px;
             color: var(--text-muted);
             line-height: 1.8;
             padding-bottom: 0;
         }

         .faq-item.is-open .faq-answer {
             padding-bottom: 22px;
         }

         @media (max-width: 768px) {
             .faq-trigger {
                 padding: 16px 18px;
                 font-size: 14.5px;
                 gap: 12px;
             }
             .faq-panel {
                 padding: 0 18px;
             }
             .faq-icon {
                 width: 32px;
                 height: 32px;
                 font-size: 13px;
                 border-radius: 8px;
             }
             .faq-answer {
                 font-size: 14px;
             }
             .faq-item.is-open .faq-answer {
                 padding-bottom: 18px;
             }
             .faq-accordion {
                 gap: 10px;
             }
         }

         @media (max-width: 480px) {
             .faq-trigger {
                 padding: 14px 14px;
                 font-size: 13.5px;
                 gap: 10px;
             }
             .faq-panel {
                 padding: 0 14px;
             }
             .faq-icon {
                 width: 28px;
                 height: 28px;
                 font-size: 12px;
             }
             .faq-arrow {
                 width: 24px;
                 height: 24px;
                 font-size: 11px;
             }
             .faq-answer {
                 font-size: 13px;
             }
             .faq-item.is-open .faq-answer {
                 padding-bottom: 14px;
             }
             .faq-bg-dots {
                 display: none;
             }
             .faq-accordion {
                 gap: 8px;
             }
         }

         .gift-modal-overlay {
             display: none;
             position: fixed;
             inset: 0;
             z-index: 9999;
             background: rgba(15, 23, 42, 0.65);
             backdrop-filter: blur(4px);
             -webkit-backdrop-filter: blur(4px);
             align-items: center;
             justify-content: center;
             padding: 16px;
         }

         .gift-modal-overlay.gift-open {
             display: flex;
         }

         .gift-modal {
             background: #fff;
             border-radius: 20px;
             width: 100%;
             max-width: 680px;
             max-height: 90vh;
             display: flex;
             flex-direction: column;
             box-shadow: 0 24px 80px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08);
             direction: rtl;
             overflow: hidden;
             animation: giftModalIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
         }

         @keyframes giftModalIn {
             from {
                 transform: translateY(30px) scale(0.97);
                 opacity: 0;
             }
             to {
                 transform: translateY(0) scale(1);
                 opacity: 1;
             }
         }

         .gift-modal-header {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 20px 24px 16px;
             border-bottom: 1px solid rgba(15, 23, 42, 0.08);
             flex-shrink: 0;
         }

         .gift-modal-header h3 {
             margin: 0;
             font-size: 18px;
             font-weight: 800;
             color: var(--text, #1a202c);
             font-family: 'Cairo', sans-serif;
         }

         .gift-modal-close {
             width: 34px;
             height: 34px;
             border: none;
             background: rgba(15, 23, 42, 0.06);
             border-radius: 50%;
             cursor: pointer;
             font-size: 18px;
             color: #64748b;
             display: flex;
             align-items: center;
             justify-content: center;
             transition: background 0.2s, color 0.2s;
             flex-shrink: 0;
         }

         .gift-modal-close:hover {
             background: rgba(239, 68, 68, 0.10);
             color: #ef4444;
         }

         .gift-steps-bar {
             display: flex;
             gap: 0;
             padding: 0 24px;
             border-bottom: 1px solid rgba(15, 23, 42, 0.08);
             flex-shrink: 0;
             overflow-x: auto;
         }

         .gift-step-tab {
             padding: 14px 16px;
             font-family: 'Cairo', sans-serif;
             font-size: 13px;
             font-weight: 600;
             color: #94a3b8;
             border-bottom: 3px solid transparent;
             white-space: nowrap;
             cursor: default;
             transition: color 0.2s, border-color 0.2s;
             display: flex;
             align-items: center;
             gap: 6px;
         }

         .gift-step-tab.gift-step-active {
             color: var(--primary, #2D5487);
             border-bottom-color: var(--primary, #2D5487);
         }

         .gift-step-tab.gift-step-done {
             color: #22c55e;
         }

         .gift-step-num {
             width: 22px;
             height: 22px;
             border-radius: 50%;
             background: rgba(15, 23, 42, 0.08);
             color: #64748b;
             font-size: 11px;
             font-weight: 800;
             display: flex;
             align-items: center;
             justify-content: center;
             flex-shrink: 0;
         }

         .gift-step-active .gift-step-num {
             background: var(--primary, #2D5487);
             color: #fff;
         }

         .gift-step-done .gift-step-num {
             background: #22c55e;
             color: #fff;
         }

         .gift-modal-body {
             flex: 1;
             overflow-y: auto;
             padding: 20px 24px;
         }

         .gift-panel {
             display: none;
         }

         .gift-panel.gift-panel-active {
             display: block;
         }

         .gift-loading {
             text-align: center;
             padding: 40px 0;
             color: #94a3b8;
             font-family: 'Cairo', sans-serif;
             font-size: 15px;
         }

         .gift-courses-grid {
             display: grid;
             grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
             gap: 14px;
         }

         .gift-course-card {
             border: 2px solid rgba(15, 23, 42, 0.10);
             border-radius: 14px;
             overflow: hidden;
             cursor: pointer;
             transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
             position: relative;
             background: #fff;
             user-select: none;
         }

         .gift-course-card:hover {
             border-color: rgba(45, 84, 135, 0.35);
             transform: translateY(-2px);
             box-shadow: 0 8px 24px rgba(45, 84, 135, 0.12);
         }

         .gift-course-card.gift-selected {
             border-color: var(--primary, #2D5487);
             box-shadow: 0 0 0 3px rgba(45, 84, 135, 0.18);
         }

         .gift-course-check {
             position: absolute;
             top: 8px;
             right: 8px;
             width: 24px;
             height: 24px;
             border-radius: 50%;
             background: rgba(255, 255, 255, 0.9);
             border: 2px solid rgba(15, 23, 42, 0.20);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 12px;
             color: transparent;
             transition: all 0.2s;
             z-index: 2;
         }

         .gift-selected .gift-course-check {
             background: var(--primary, #2D5487);
             border-color: var(--primary, #2D5487);
             color: #fff;
         }

         .gift-course-img {
             width: 100%;
             height: 110px;
             object-fit: cover;
             display: block;
         }

         .gift-course-img-placeholder {
             width: 100%;
             height: 110px;
             background: linear-gradient(135deg, #EAF1F8, #DDD6FE);
             display: flex;
             align-items: center;
             justify-content: center;
             font-size: 28px;
         }

         .gift-course-info {
             padding: 10px 12px;
         }

         .gift-course-title {
             font-family: 'Cairo', sans-serif;
             font-size: 13px;
             font-weight: 700;
             color: var(--text, #1a202c);
             line-height: 1.4;
             margin-bottom: 6px;
             display: -webkit-box;
             -webkit-line-clamp: 2;
             -webkit-box-orient: vertical;
             overflow: hidden;
         }

         .gift-course-price {
             font-family: 'Cairo', sans-serif;
             font-size: 13px;
             font-weight: 800;
             color: var(--primary, #2D5487);
         }

         .gift-course-free {
             font-family: 'Cairo', sans-serif;
             font-size: 12px;
             font-weight: 700;
             color: #22c55e;
         }

         .gift-form-group {
             margin-bottom: 18px;
         }

         .gift-form-label {
             display: block;
             font-family: 'Cairo', sans-serif;
             font-size: 13px;
             font-weight: 700;
             color: var(--text, #1a202c);
             margin-bottom: 7px;
         }

         .gift-required {
             color: #ef4444;
             margin-right: 2px;
         }

         .gift-form-control {
             width: 100%;
             padding: 11px 14px;
             border: 1.5px solid rgba(15, 23, 42, 0.15);
             border-radius: 10px;
             font-family: 'Cairo', sans-serif;
             font-size: 14px;
             color: var(--text, #1a202c);
             background: #fff;
             outline: none;
             transition: border-color 0.2s, box-shadow 0.2s;
             direction: rtl;
             box-sizing: border-box;
         }

         .gift-form-control:focus {
             border-color: var(--primary, #2D5487);
             box-shadow: 0 0 0 3px rgba(45, 84, 135, 0.12);
         }

         .gift-form-control.gift-field-error {
             border-color: #ef4444;
         }

         .gift-form-textarea {
             resize: vertical;
             min-height: 80px;
         }

         .gift-template-grid {
             display: flex;
             flex-wrap: wrap;
             gap: 8px;
             margin-bottom: 10px;
         }

         .gift-template-chip {
             display: inline-flex;
             align-items: center;
             gap: 6px;
             padding: 7px 14px;
             border: 1.5px solid rgba(15, 23, 42, 0.12);
             border-radius: 20px;
             font-family: 'Cairo', sans-serif;
             font-size: 13px;
             font-weight: 600;
             color: var(--text, #1a202c);
             background: #fff;
             cursor: pointer;
             transition: all 0.2s ease;
             user-select: none;
             white-space: nowrap;
         }

         .gift-template-chip:hover {
             border-color: var(--primary, #2D5487);
             background: rgba(45, 84, 135, 0.06);
         }

         .gift-template-chip.gift-template-active {
             border-color: var(--primary, #2D5487);
             background: var(--primary, #2D5487);
             color: #fff;
         }

         .gift-template-chip .gift-template-icon {
             font-size: 14px;
         }

         .gift-show-name-label {
             display: inline-flex;
             align-items: center;
             gap: 8px;
             margin-top: 10px;
             font-family: 'Cairo', sans-serif;
             font-size: 13px;
             font-weight: 600;
             color: var(--text, #1a202c);
             cursor: pointer;
             user-select: none;
         }

         .gift-show-name-label input[type="checkbox"] {
             width: 18px;
             height: 18px;
             accent-color: var(--primary, #2D5487);
             cursor: pointer;
         }

         .gift-phone-input {
             display: flex;
             align-items: stretch;
             border: 1.5px solid rgba(15, 23, 42, 0.15);
             border-radius: 10px;
             overflow: hidden;
             transition: border-color 0.2s, box-shadow 0.2s;
         }

         .gift-phone-input:focus-within {
             border-color: var(--primary, #2D5487);
             box-shadow: 0 0 0 3px rgba(45, 84, 135, 0.12);
         }

         .gift-phone-input.gift-field-error {
             border-color: #ef4444;
         }

         .gift-phone-prefix {
             padding: 11px 14px;
             background: rgba(15, 23, 42, 0.04);
             font-family: 'Cairo', sans-serif;
             font-size: 14px;
             font-weight: 700;
             color: #64748b;
             border-left: 1.5px solid rgba(15, 23, 42, 0.10);
             flex-shrink: 0;
             direction: ltr;
         }

         .gift-phone-input .gift-form-control {
             border: none;
             border-radius: 0;
             box-shadow: none;
         }

         .gift-phone-input .gift-form-control:focus {
             box-shadow: none;
         }

         .gift-form-error {
             font-family: 'Cairo', sans-serif;
             font-size: 12px;
             color: #ef4444;
             margin-top: 5px;
             min-height: 16px;
         }
         .gift-form-hint {
             font-family: 'Cairo', sans-serif;
             font-size: 11px;
             color: var(--text-muted, #6b7280);
             margin-top: 4px;
         }

         .gift-review-section {
             background: rgba(15, 23, 42, 0.03);
             border-radius: 12px;
             padding: 16px;
             margin-bottom: 14px;
         }

         .gift-review-title {
             font-family: 'Cairo', sans-serif;
             font-size: 14px;
             font-weight: 800;
             color: var(--text, #1a202c);
             margin: 0 0 12px;
             display: flex;
             align-items: center;
             gap: 8px;
         }

         .gift-review-title i {
             color: var(--primary, #2D5487);
         }

         .gift-review-course-item {
             display: flex;
             align-items: center;
             gap: 10px;
             padding: 8px 0;
             border-bottom: 1px solid rgba(15, 23, 42, 0.07);
             font-family: 'Cairo', sans-serif;
             font-size: 13px;
             color: var(--text, #1a202c);
         }

         .gift-review-course-item:last-child {
             border-bottom: none;
         }

         .gift-review-course-price {
             margin-right: auto;
             font-weight: 800;
             color: var(--primary, #2D5487);
             flex-shrink: 0;
         }

         .gift-review-row {
             display: flex;
             gap: 8px;
             font-family: 'Cairo', sans-serif;
             font-size: 13px;
             padding: 4px 0;
         }

         .gift-review-label {
             color: #64748b;
             flex-shrink: 0;
         }

         .gift-review-value {
             color: var(--text, #1a202c);
             font-weight: 600;
         }

         .gift-review-total {
             display: flex;
             align-items: center;
             justify-content: space-between;
             background: linear-gradient(135deg, var(--primary, #2D5487), #4F7FB5);
             color: #fff;
             border-radius: 12px;
             padding: 14px 18px;
             font-family: 'Cairo', sans-serif;
             font-size: 16px;
             font-weight: 800;
             margin-top: 4px;
         }

         .gift-modal-footer {
             display: flex;
             align-items: center;
             justify-content: space-between;
             padding: 16px 24px;
             border-top: 1px solid rgba(15, 23, 42, 0.08);
             flex-shrink: 0;
             gap: 12px;
             flex-wrap: wrap;
         }

         .gift-total-bar {
             font-family: 'Cairo', sans-serif;
             font-size: 14px;
             color: #64748b;
         }

         .gift-total-bar strong {
             color: var(--primary, #2D5487);
             font-size: 16px;
             font-weight: 800;
             margin-right: 4px;
         }

         .gift-footer-actions {
             display: flex;
             gap: 10px;
         }

         .gift-btn {
             padding: 10px 22px;
             border-radius: 10px;
             font-family: 'Cairo', sans-serif;
             font-size: 14px;
             font-weight: 700;
             cursor: pointer;
             border: none;
             transition: all 0.2s;
         }

         .gift-btn-outline {
             background: rgba(15, 23, 42, 0.06);
             color: #475569;
         }

         .gift-btn-outline:hover {
             background: rgba(15, 23, 42, 0.10);
         }

         .gift-btn-primary {
             background: linear-gradient(135deg, var(--primary, #2D5487) 0%, #4F7FB5 100%);
             color: #fff;
             box-shadow: 0 4px 14px rgba(45, 84, 135, 0.35);
         }

         .gift-btn-primary:hover {
             transform: translateY(-1px);
             box-shadow: 0 8px 22px rgba(45, 84, 135, 0.45);
         }

         .gift-btn-primary:disabled {
             opacity: 0.65;
             cursor: not-allowed;
             transform: none;
             box-shadow: none;
         }

         .gift-btn-danger {
             background: linear-gradient(135deg, #ef4444, #f97316);
             color: #fff;
             box-shadow: 0 4px 14px rgba(239, 68, 68, 0.30);
         }

         @media (max-width: 480px) {
             .gift-modal {
                 max-height: 95vh;
                 border-radius: 16px;
             }
             .gift-modal-header {
                 padding: 16px 16px 12px;
             }
             .gift-modal-body {
                 padding: 16px;
             }
             .gift-modal-footer {
                 padding: 12px 16px;
             }
             .gift-steps-bar {
                 padding: 0 16px;
             }
             .gift-courses-grid {
                 grid-template-columns: repeat(2, 1fr);
             }
             .gift-footer-actions {
                 flex: 1;
                 justify-content: flex-start;
             }
         }

/* ===== ENROLL BUTTONS — FORCE WHITE TEXT ===== */
.course-enroll,
.course-enroll:link,
.course-enroll:visited,
.course-enroll:hover,
.course-enroll:focus,
.course-enroll:active,
.off-card-enroll,
.off-card-enroll:link,
.off-card-enroll:visited,
.off-card-enroll:hover,
.off-card-enroll:focus,
.off-card-enroll:active {
    color: #ffffff !important;
}
.course-enroll i,
.course-enroll svg,
.off-card-enroll i,
.off-card-enroll svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* =========================================================
   MOBILE SPACE OPTIMIZATION (max-width: 767px)
   Only reduces whitespace — preserves all visual sizes
   ========================================================= */
@media (max-width: 767px) {

  /* Fix container margin-bottom bug (was 10rem = 160px) */
  .home-page .container {
    margin-bottom: 0 !important;
  }

  /* ── SECTION SPACING ── */
  /* Reduce inter-section padding from ~60px → 30px */
  .home-page .section-pad {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  /* ── HERO ── */
  /* Reduce #hero padding-top (was 80px → 35px ~56% reduction).
     This is the MAIN cause of whitespace above the heading. */
  .home-page #hero {
    padding-top: 35px !important;
  }
  /* Remove min-height:100vh so the hero shrinks to fit its content
     instead of forcing full-screen + vertical centering (which added
     massive empty space above the title). */
  #hero {
    min-height: auto !important;
  }
  #hero > .container {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }
  .home-page .hero-inner {
    gap: 8px !important;
  }
  .home-page .hero-headline {
    margin-bottom: 2px !important;
  }
  .home-page .hero-headline:last-of-type {
    margin-bottom: 0 !important;
  }
  .home-page .hero-desc {
    margin-bottom: 8px !important;
  }
  .home-page .hero-btns {
    gap: 4px !important;
    margin-top: 0 !important;
  }
  /* Show استكشاف الدورات button on mobile (hidden by default at line 4943) */
  .home-page .hero-btns .btn-hero-outline {
    display: inline-flex !important;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
    color : #ffffff !important;
  }
  /* Stats bar — compact */
  .home-page .hero-stats-bar {
    padding: 6px 0 !important;
  }
  .home-page .hero-stats-row {
    gap: 2px !important;
  }
  .home-page .hero-stat-item {
    padding: 0 2px !important;
  }
  .home-page .hstat-num {
    margin-bottom: 0 !important;
  }
  .hstat-sep {
    display: none !important;
  }

  /* ── FEATURES (لماذا وسم المعرفة) ── */
  .home-page .features-section {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .home-page .features-badge {
    margin-bottom: 8px !important;
  }
  .home-page .features-title {
    margin: 0 0 6px !important;
  }
  .home-page .features-title-line:first-child {
    margin-bottom: 4px !important;
  }
  .home-page .features-desc {
    margin-bottom: 12px !important;
  }
  .home-page .features-stats {
    margin-bottom: 12px !important;
  }
  .home-page .feat-stat {
    padding: 8px 6px !important;
  }
  .home-page .features-list {
    gap: 6px !important;
  }
  .home-page .feature-item {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  /* Partners & accreditation cards */
  .home-page .features-visual {
    gap: 6px !important;
  }
  .home-page .features-visual .prem-card {
    padding: 14px !important;
  }
  .home-page .features-visual .prem-card-head {
    margin-bottom: 8px !important;
  }
  .home-page .trust-viewport {
    height: 110px !important;
    margin-bottom: 6px !important;
  }
  .home-page .trust-slide {
    padding: 12px 16px !important;
  }
  .home-page .trust-meta {
    margin-bottom: 4px !important;
  }

  /* ── SLIDERS / SECTIONS HEADER ── */
  .home-page .slider-section-header {
    margin-bottom: 10px !important;
  }
  .home-page .section-title {
    margin-bottom: 0 !important;
  }
  .home-page .section-title[style*="margin-top"] {
    margin-top: 4px !important;
  }
  .home-page .courses-filter-meta {
    margin-bottom: 8px !important;
  }
  .home-page #courses .courses-filter-wrap {
    gap: 6px !important;
    padding: 0 0 4px !important;
    margin-bottom: 6px !important;
  }
  .home-page #courses #categorizedCoursesSwiper {
    padding-bottom: 6px !important;
  }
  .home-page #courses .course-body {
    padding: 12px 14px 10px !important;
  }
  .home-page #courses .course-title {
    margin-bottom: 6px !important;
  }
  .home-page #courses .course-meta {
    padding-bottom: 6px !important;
  }
  .home-page #courses .course-footer {
    padding: 8px 0 6px !important;
  }
  .home-page #courses .course-enroll {
    margin-top: 6px !important;
  }

  /* dip / pkg / course sliders */
  .home-page #offerings .slider-section {
    margin-top: 20px !important;
  }
  .home-page .off-card-body {
    padding: 12px 14px 6px !important;
    height:10rem;
  }
  .home-page .off-card-meta {
    gap: 6px 8px !important;
  }
  .home-page .off-card-footer {
    padding: 8px 14px 12px !important;
    gap: 6px !important;
  }
  .home-page .off-card-title {
    margin-bottom: 6px !important;
  }

  /* ── PROMO2 (الدورة المجانية) ── */
  #promo2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  .home-page .promo2-inner {
    padding: 32px 18px !important;
    gap: 10px !important;
  }
  .home-page .promo2-text h2 {
    line-height: 1.5 !important;
  }
  .home-page .promo2-text p {
    margin-bottom: 8px !important;
  }
  .home-page .promo2-features {
    gap: 4px !important;
  }
  .home-page .promo2-btns {
    margin-top: 10px !important;
    gap: 8px !important;
  }

  /* ── TESTIMONIALS ── */
  .home-page #testimonials {
    padding-top: 24px !important;
    padding-bottom: 18px !important;
  }
  .home-page #testimonials .section-header-wrap {
    margin-bottom: 10px !important;
  }
  .home-page #testimonials .section-sub {
    margin-bottom: 6px !important;
  }
  .home-page .testimonial-card {
    padding: 18px !important;
  }
  .home-page .testimonial-text {
    margin-bottom: 12px !important;
  }
  .swiper-testimonials {
    padding-bottom: 24px !important;
  }

  /* ── FAQ ── */
  #faq.section-pad {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  #faq .section-header-wrap {
    margin-bottom: 6px !important;
  }
  #faq .section-sub {
    margin-bottom: 6px !important;
  }
  .home-page .faq-accordion {
    gap: 6px !important;
  }
  .home-page .faq-trigger {
    padding: 12px 14px !important;
    gap: 8px !important;
  }
  .home-page .faq-panel {
    padding: 0 14px !important;
  }
  .home-page .faq-item.is-open .faq-answer {
    padding-bottom: 12px !important;
  }

  /* ── FOOTER ── */
  .footer-top {
    padding: 32px 0 24px !important;
    gap: 28px !important;
  }
  .footer-bottom {
    padding: 12px 0 !important;
  }

  /* ── PARTNERS / ACCREDITATIONS ── */
  #partners,
  #accreditations {
    padding: 24px 0 !important;
  }
  #partners .partners-section-header,
  #accreditations .partners-section-header {
    margin-bottom: 16px !important;
  }

  /* ── GIFT BUTTON ── */
  .gift-float-btn {
    bottom: 74px !important;
  }
}

/* ── VISION & MISSION CARDS ── */
.vision-mission-card {
  position: relative;
  background: #ffffff;
  border: 1px solid rgba(26, 79, 150, 0.06) !important;
  border-radius: 24px !important;
  padding: 32px !important;
  box-shadow: 0 15px 35px rgba(26, 79, 150, 0.04), 0 4px 10px rgba(0, 0, 0, 0.01) !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden;
}

.vision-mission-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 25px 50px rgba(26, 79, 150, 0.08) !important;
}

.vision-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--primary), #4F7FB5);
}

.mission-card::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), #ff9f43);
}

.vision-mission-title {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: var(--primary-dark) !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
}

.vision-mission-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vision-mission-desc-ar {
  font-size: 1rem !important;
  line-height: 1.75 !important;
  color: #334155 !important;
  font-weight: 500 !important;
}

.vision-mission-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(26, 79, 150, 0.08), rgba(26, 79, 150, 0.02));
  margin: 4px 0;
}

.vision-mission-desc-en {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  color: var(--text-muted) !important;
  font-weight: 500 !important;
  font-family: 'Tajawal', sans-serif;
  direction: ltr;
  text-align: left;
}

@media (max-width: 900px) {
  .vision-mission-card {
    padding: 24px !important;
  }
}