/* פלטת צבעים והגדרות חיות מבוססות ספירלת הלוגו */
:root {
    --brand-blue: #2E489D;
    --brand-green: #64813B;
    --spiral-orange-light: #FCC30D;
    --spiral-orange-deep: #E83E39;
    --spiral-yellow: #FCC30D;    /* תחילת ספירלה */
    --spiral-red: #ED6427;       /* סוף ספירלה */
    --gradient-spiral: linear-gradient(135deg, #FCC30D 0%, #E83E39 100%);
    --spiral-green-light: #64813B;;
    --gradient-primary: linear-gradient(135deg, #2E489D 0%, #1A2D6B 100%);
    --wa: #1B8755;
            --color-text-dark: #1e293b;
            --color-text-light: #64748b;
            --color-bg-light: #f8fafc;
    /* גווני רקע וניגודיות לשיפור ה-UI וה-SEO */
    --canvas-white: #ffffff;
    --canvas-light: #fdfefe;
    --canvas-cream: #f4f6fa;
    --ink-dark: #2E489D; /*  121824; */
    --ink-muted: #222222; /* #4e5d78; */
    --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 20px 25px -5px rgba(46, 72, 157, 0.1), 0 10px 10px -5px rgba(46, 72, 157, 0.04);
    --color-dark: #222222;
    --color-light: #F8F9FC;
    --shadow-soft: 0 10px 30px rgba(46, 72, 157, 0.08);
    --shadow-strong: 0 15px 40px rgba(0, 0, 0, 0.12);
    
    /* רדיוסים בהשראת הקימורים של הספירלה בלוגו */
    --radius-fluid: 60px 15px 60px 15px;
    --radius-standard: 24px;
    
    /* מעברים חלקים */
    --smooth-transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    
    /* טיפוגרפיה רספונסיבית עוצמתית (Clamp) */
	--h1-fluid: clamp(1.8rem, 4.5vw, 3.2rem);   /* הוקטן מ-2.4rem-4.2rem */
    --h2-fluid: clamp(1.5rem, 3.2vw, 2.2rem);   /* הוקטן מ-1.8rem-2.6rem */	
    --body-fluid: clamp(1.05rem, 1vw + 0.6rem, 1.2rem);
/*----------------------------------*/
    --font-main: 'Assistant', sans-serif;
    --border-radius-custom: 24px;
    --radius-spiral: 40px 10px 40px 10px; /* מסגרת הספירלה המיוחדת */
	--card-radius: 16px;
    --card-shadow: 0 10px 25px rgba(46, 72, 157, 0.04);
}
/* אתחול חכם למניעת בעיות פריסה */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
            font-family: var(--font-main);
    background-color: var(--canvas-light);
            color: var(--color-text-dark);
    line-height: 1.5;
            font-size: var(--body-fluid); /* 18px; */
    overflow-x: hidden;
}
/* הגדרה גלובלית שהופכת את כל התמונות באתר לרספונסיביות באופן אוטומטי */
img {
    max-width: 100%;
    height: auto;
    display: block;
}
a {
            color: var(--brand-green);
            font-weight: 700;
            font-size: 16px;
            text-decoration: underline;
}

h2 {
	font-size: var(--h2-fluid);
	color: var(--brand-blue);
	font-weight: bold;
}

h3 {
	color: var(--brand-blue);
	font-weight: bold;
}
.container {
    max-width: 1200px;
    padding: 0 24px !important;
            width: 100%;
            margin: 0 auto;
}
.container-narrow {
    max-width: 880px;
}

/* אלמנט רקע אמורפי - מדמה את רוח הספירלה הפנימית של המותג */
.bg-spiral-overlay {
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(252, 195, 13, 0.04) 0%, rgba(232, 62, 57, 0.02) 50%, transparent 70%);
    top: -100px;
    right: -200px;
    pointer-events: none;
    z-index: -1;
}

/* ==========================================
   BREADCRUMBS 
   ========================================== */
.breadcrumbs-section {
    padding: 0 0;
    background-color: #ffffff;
    font-size: 14px;
    border-bottom: 1px solid rgba(46, 72, 157, 0.08);
    position: sticky;
    top: 89px;
    z-index: 900;
}
.breadcrumbs-section .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}
        .breadcrumbs-list {
            display: flex;
            align-items: center;
            list-style: none;
            color: var(--color-text-light);
            gap: 8px;
        }

        .breadcrumbs-list a {
            color: var(--brand-blue);
            text-decoration: none;
            transition: color 0.2s;
        }

        .breadcrumbs-list a:hover {
            text-decoration: underline;
        }

        .breadcrumbs-separator {
            color: #cbd5e1;
            font-size: 11px;
        }
/* ==========================================
   END BREADCRUMBS 
   ========================================== */


/* Header א-סימטרי מעניין */
.custom-header {
    padding-block: 1.5rem;
    position: relative;
    z-index: 90;
    background-color: rgba(253, 254, 254, 0.9);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(46, 72, 157, 0.06);
}
.header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0 !important;
}

/* WhatsApp Floating */
.wa-float-btn {
    position: fixed !important; 
    bottom: 30px !important; 
    left: 30px !important;   /* קובע מרחק קשיח מצד שמאל */
    right: auto !important;  /* מבטל לחלוטין כל הגדרת ימין קודמת */
    background: var(--wa); 
    color: white;
    padding: 12px 25px; 
    border-radius: 50px; 
    text-decoration: none; 
    font-weight: bold;
    display: flex; 
    align-items: center; 
    gap: 10px; 
    z-index: 1000; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
    transition: 0.3s;
    
    /* מונע מהכפתור לנסות להתמרכז אופקית */
    transform: none !important; 
}

        /* ==========================================================================
           תפריט ניווט עליון
           ========================================================================== */
        .main-header {
            background-color: #ffffff;
            border-bottom: 3px solid var(--brand-blue); 
            box-shadow: 0 4px 25px rgba(46, 72, 157, 0.08); 
            position: sticky;
            top: 0;
            z-index: 1000;
            padding: 12px 0;
        }

        .header-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo-area {
            display: flex;
            align-items: center;
            text-decoration: none;
        }
        
/* הגדלת הלוגו והוספת אפקט מעבר עדין */
.logo-img {
    height: 65px; 
    width: auto;
    display: block;
    transition: transform 0.2s ease;
}

.logo-area:hover .logo-img {
    transform: scale(1.02);
}
        /* רשימת הניווט הראשית */
        .main-nav ul.nav-list {
            display: flex;
            list-style: none;
            align-items: center;
            gap: 10px;
        }

        .main-nav li.nav-item {
            display: flex;
            align-items: center;
            position: relative;
        }

        /* קו הפרדה אנכי עבה ומדורג */
        .main-nav li.nav-item:not(:last-child)::after {
            content: "";
            width: 3px;
            height: 26px;
            background: linear-gradient(to bottom, var(--spiral-orange-light), var(--spiral-orange-deep));
            border-radius: 2px;
            margin-right: 10px;
            pointer-events: none;
        }

        .main-nav a.nav-link {
            text-decoration: none;
            color: var(--color-text-dark);
            font-weight: 700; 
            font-size: 16px; 
            padding: 8px 14px;
            border-radius: 20px;
            transition: all 0.2s ease-in-out;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .main-nav a.nav-link:hover,
        .main-nav li.nav-item:hover > a.nav-link {
            color: var(--brand-blue);
            background-color: rgba(46, 72, 157, 0.06);
        }

        /* כפתור הנעה לפעולה "צרו קשר" */
/* עיצוב מעודן, אלגנטי ומקצועי לכפתור צרו קשר שלא יבלע את הלוגו */
.main-nav a.nav-contact-btn {
    border: 1px solid var(--brand-green);
    color: var(--brand-green) !important;
    background: transparent;
    padding: 4px 14px;
    border-radius: 20px;
    box-shadow: none;
    font-weight: 700;
    transition: all 0.2s ease-in-out;
}

.main-nav a.nav-contact-btn:hover {
    background: var(--brand-green);
    color: var(--brand-blue) !important;
    box-shadow: 0 4px 12px rgba(46, 72, 157, 0.2);
    transform: translateY(-1px);
}
        /* מנגנון תפריט נפתח (Sub-menu) - למחשב */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            background-color: #ffffff;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            border-top: 3px solid var(--brand-blue);
            border-radius: 0 0 12px 12px;
            min-width: 220px;
            list-style: none;
            padding: 10px 0;
            opacity: 0;
            visibility: hidden;
            transform: translateY(15px);
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .dropdown-menu li a {
            display: block;
            padding: 10px 20px;
            color: var(--color-text-dark);
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            transition: background 0.2s ease;
        }

        .dropdown-menu li a:hover {
            background-color: var(--color-bg-light);
            color: var(--brand-blue);
        }

        .main-nav li.has-dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        /* תפריט המבורגר למובייל */
        .hamburger-toggle {
            display: none;
            background: none;
            border: none;
            cursor: pointer;
            width: 30px;
            height: 24px;
            position: relative;
            z-index: 1100;
        }

        .hamburger-toggle span {
            display: block;
            width: 100%;
            height: 3px;
            background-color: var(--brand-blue);
            border-radius: 3px;
            transition: all 0.3s ease-in-out;
            position: absolute;
        }

        .hamburger-toggle span:nth-child(1) { top: 0; }
        .hamburger-toggle span:nth-child(2) { top: 10px; width: 75%; right: 0; }
        .hamburger-toggle span:nth-child(3) { top: 20px; }

        body.mobile-menu-active .hamburger-toggle span:nth-child(1) { transform: rotate(45deg); top: 10px; }
        body.mobile-menu-active .hamburger-toggle span:nth-child(2) { opacity: 0; width: 0; }
        body.mobile-menu-active .hamburger-toggle span:nth-child(3) { transform: rotate(-45deg); top: 10px; }
        /* ==========================================================================
           תפריט פימי בדף
           ========================================================================== */
/* ==========================================
   סרגל ניווט פנימי (Page Sub-Nav)
   ========================================== */
.page-subnav {
    background-color: #ffffff;
    border-bottom: 2px solid rgba(46, 72, 157, 0.1);
    position: sticky;
    top: 89px; /* גובה ה-header — לכוונן אם צריך */
    z-index: 900;
    padding: 0;
}

.subnav-list {
    display: flex;
    list-style: none;
    gap: 0;
    margin: 0;
    padding: 0;
    justify-content: flex-start;
}

.subnav-link {
    display: block;
    padding: 12px 20px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-dark);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.subnav-link:hover {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
    background-color: rgba(46, 72, 157, 0.04);
}

.subnav-link.active {
    color: var(--brand-blue);
    border-bottom-color: var(--brand-blue);
}

.subnav-link.subnav-cta {
    color: var(--brand-green);
    /* border: 1px solid var(--brand-green); */
	font-weight: 700;
    border-radius: 20px;
    margin: 6px 0 6px 16px;
    padding: 6px 18px;
}

.subnav-link.subnav-cta:hover {
    background-color: var(--brand-green);
    color: #ffffff;
    border-bottom-color: transparent;
}

/* ==========================================
   כפתור חזרה למעלה
   ========================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: var(--brand-blue);
    color: #ffffff;
    font-size: 22px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(46, 72, 157, 0.3);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background-color: var(--brand-green);
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .subnav-link {
        font-size: 13px;
        padding: 10px 12px;
    }
    .back-to-top {
        bottom: 80px; /* מעל כפתור הוואטסאפ */
        right: 20px;
    }
}
/* ==========================================================================
	דף הבית
	=========================================================================  */
        /* ==========================================
           HERO — רקע גרדיאנט כהה, מרכזי, שונה לחלוטין
           ========================================== */
        .home-hero {
            background: linear-gradient(135deg, #f0f4ff 0%, #ffffff 60%, #f8fafc 100%);
            padding: 30px 0;
            position: relative;
            overflow: hidden;
        }

        .home-hero::before {
            content: none;
        }

        .home-hero::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--spiral-orange-light), var(--spiral-orange-deep));
        }

        .home-hero .container {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: row-reverse;
            gap: 60px;
            align-items: center;
            padding: 0 24px !important;
            text-align: right;
        }

        .hero-text-side {
            flex: 1.1;
            background: linear-gradient(135deg, #2d4a9e 0%, #21A0FF 100%);
            border: 1px solid rgba(46,72,157,0.08);
            box-shadow: 0 8px 32px rgba(46,72,157,0.08);
            border-radius: 20px;
            padding: 28px 32px;
            text-shadow: none;

			height: 370px;
			display: flex;
			flex-direction: column;
			justify-content: center;
        }

        .hero-text-side h1 {
            font-size: var(--h1-fluid);
            color: var(--brand-blue);
            line-height: 1.25;
            font-weight: 800;
            margin-bottom: 12px;
            text-shadow: none;
        }

        .hero-text-side .hero-sub {
            font-size: 18px;
            color: var(--color-text-dark);
            line-height: 1.8;
            margin-bottom: 20px;
            text-shadow: none;
        }

        .hero-image-container {
            flex: 0.9;
            position: relative;
        }

        .hero-image-container img {
            width: 100%;
            height: auto;
            display: block;
			border-radius: var(--radius-fluid);
            box-shadow: 0 20px 40px rgba(46,72,157,0.15);
        }

        /* הצללה עדינה מאחורי התמונה */
        .hero-image-container::before {
            content: "";
            position: absolute;
            top: 20px;
            left: -12px;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(252,195,13,0.2), rgba(232,62,57,0.15));
            border-radius: var(--radius-fluid);
            z-index: -1;
        }

        .hero-image-side {
            display: none;
        }

        @media (max-width: 992px) {
            .home-hero .container {
                flex-direction: column;
                gap: 40px;
            }
            .hero-image-container {
                max-width: 480px;
                margin: 0 auto;
            }
            .home-hero {
                padding: 48px 0 56px;
            }
        }

        .home-hero .container {
            position: relative;
            z-index: 2;
        }

        .hero-eyebrow {
            display: inline-block;
            background: rgba(252,195,13,0.15);
            color: var(--spiral-orange-light);
            border: 1px solid rgba(252,195,13,0.3);
            border-radius: 30px;
            padding: 8px 22px;
            font-size: 15px;
            font-weight: 700;
            letter-spacing: 0.3px;
			text-align: center;
			margin-bottom: 16px;
        }

        .home-hero h1 {
			font-size: clamp(1.7rem, 3vw, 2.4rem);
            font-weight: 800;
            line-height: 1.25;
            max-width: 820px;
            margin: 0 auto 24px auto;
        }

        .home-hero h1 .hero-highlight {
            background: linear-gradient(135deg, var(--spiral-orange-light), var(--spiral-red));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            display: inline;
        }

        .home-hero .hero-sub {
            font-size: clamp(16px, 2vw, 19px);
            color: var(--color-light);
            max-width: 600px;
            margin: 0 auto 40px auto;
            line-height: 1.8;
        }

.hero-cta-row {
    display: flex;
    align-items: center;    /* מיישר את שני הכפתורים באותו קו גובה בדיוק */
    gap: 15px;              /* יוצר מרחק קבוע שווה ביניהם */
    flex-wrap: wrap;        /* מונע מהם לעלות אחד על השני במסכים קטנים */
}
/* הגדרת גובה ומבנה אחיד לשני הכפתורים */
.btn-hero-primary, .btn-hero-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;           /* גובה אחיד ונוח ללחיצה לשני הכפתורים */
    padding: 0 24px;        /* מרווח פנימי שווה מימין ומשמאל */
    box-sizing: border-box; /* מוודא שהפדינג לא מגדיל את הכפתור */
    text-decoration: none;  /* מוריד קו תחתון של קישורים אם קיים */
}
        .btn-hero-primary {
            background: linear-gradient(135deg, var(--spiral-orange-light), var(--spiral-orange-deep));
            color: #ffffff;
            padding: 14px 32px;
            border-radius: var(--radius-fluid);
            font-weight: 700;
            font-size: 16px;
            text-decoration: none;
            box-shadow: 0 8px 24px rgba(232,62,57,0.35);
            transition: var(--smooth-transition);
            display: inline-block;
        }

        .btn-hero-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 30px rgba(232,62,57,0.45);
        }

        .btn-hero-secondary {
            color: rgba(255,255,255,0.85);
            font-weight: 700;
            font-size: 16px;
            text-decoration: none;
            border: 1px solid rgba(255,255,255,0.25);
            padding: 14px 32px;
            border-radius: var(--radius-fluid);
            transition: var(--smooth-transition);
        }

        .btn-hero-secondary:hover {
            background: rgba(255,255,255,0.08);
            color: #ffffff;
        }

        /* ==========================================
           כרטיסי קורסים עם תמונה
           ========================================== */
        .courses-section {
            padding: 80px 0;
            background: var(--color-bg-light);
        }

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

        .course-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
			position: relative;
        }
.course-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--spiral-orange-light), var(--spiral-orange-deep));
    border-radius: 16px 16px 0 0;
}
        .course-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 32px rgba(46,72,157,0.1);
        }

        .course-card-img {
            width: 100%;
            height: 180px;
            object-fit: cover;
            display: block;
            background: #f0f4ff;
        }

        /* תמונות לוגו — ריכוז במרכז */
        .course-card-img.logo-img-card {
            object-fit: contain;
            padding: 24px;
            background: linear-gradient(135deg, #f0f4ff 0%, #e8edf8 100%);
        }

        .course-card-body {
            padding: 24px 22px 28px;
            display: flex;
            flex-direction: column;
            flex-grow: 1;
        }

        .course-card-body h3 {
            font-size: 18px;
            font-weight: 700;
            color: var(--brand-blue);
            margin-bottom: 10px;
            line-height: 1.3;
        }

        .course-card-body p {
            font-size: var(--body-fluid); /* font-size: 14px; */
            color: var(--color-text-light);
            line-height: 1.65;
            flex-grow: 1;
            margin-bottom: 20px;
        }

/* תיקון לשורת הכפתורים - תמיכה בטקסטים ארוכים וקצרים כאחד */
.course-card-footer {
    display: flex;
    flex-wrap: wrap;      /* מפתח הקסם: מאפשר לכפתורים לרדת שורה אם הטקסט ארוך */
    gap: 10px;            /* מרווח קבוע ואסתטי בין הכפתורים */
    justify-content: center;
    align-items: center;
    padding-top: 15px;    
	margin-top: auto;     
}
	
/* עיצוב גמיש לכפתורים שלא שובר את המילים */
.btn-card-primary {
    /* משנים מ-flex: 1 לרוחב דינמי */
    flex: 1 1 calc(50% - 5px); /* מנסה להיות חצי שורה, אך מאפשר גמישות */
    min-width: 120px;          /* מונע מהכפתור להתכווץ מדי */
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    
    /* מרווחים פנימיים שמגנים על הטקסט */
    padding: 10px 14px;   /* הגדלנו מעט את המרווח האנכי והאופקי */
    
    font-size: 1.2rem;    
    font-weight: 700;
    border-radius: 6px;   
    text-decoration: none;
    white-space: nowrap;  /* מונע מהמילים עצמן להתפרק (כמו "מלא" שיורד מתחת ל"אופיס") */
    
    background-color: var(--canvas-cream);    
    color: var(--brand-blue);                 
    border: 1px solid rgba(46, 72, 157, 0.25); 
    
    box-sizing: border-box;
    transition: all 0.2s ease;
}

/* אפקט מעבר עכבר חלק ומקצועי */
.btn-card-primary:hover {
    background-color: var(--brand-blue);     
    color: var(--canvas-white);              
    border-color: var(--brand-blue);
    transform: translateY(-1px);             
}
        .btn-card-secondary {
            font-size: 13px;
            color: var(--color-text-light);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .btn-card-secondary:hover {
            color: var(--brand-blue);
        }

        /* ==========================================
           פרופיל — תמונה עגולה עם מסגרת צהובה
           ========================================== */
        .profile-section {
            padding: 80px 0;
            background: #ffffff;
        }

        .profile-grid {
            display: grid;
            grid-template-columns: 250px 1fr;
            gap: 64px;
            align-items: center;
        }

        .profile-circle-wrapper {
            width: 260px;
            height: 260px;
            margin: 0 auto;
            position: relative;
        }

        .profile-circle-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 8px solid var(--spiral-orange-light);
            box-shadow: 0 15px 35px rgba(0,0,0,0.15), 0 5px 15px rgba(252,195,13,0.1);
            display: block;
            transition: transform 0.4s ease;
        }

        .profile-circle-wrapper img:hover {
            transform: scale(1.02);
        }

        .profile-content h2 {
            font-size: var(--h2-fluid);
            color: var(--brand-blue);
            font-weight: 800;
            margin-bottom: 20px;
            line-height: 1.3;
    max-width: 62ch;
        }
        .profile-content p {
            font-size: 19px; 
            color: var(--color-text-dark);
            line-height: 1.8;
            margin-bottom: 14px;
     max-width: 70ch;   /* ← הוסיפי שורה זו */
       }
	
        .profile-content a.profile-link {
            display: inline-block;
            margin-top: 8px;
            color: var(--brand-green);
            font-weight: 700;
            text-decoration: none;
            font-size: 16px;
        }

        .profile-content a.profile-link:hover {
            text-decoration: underline;
        }

        /* ==========================================
           מאמרים
           ========================================== */
        .articles-section {
            padding: 80px 0;
            background: var(--color-bg-light);
        }

        .articles-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
            margin-top: 48px;
        }

        .article-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 30px 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
            gap: 10px;
			border-top: 3px solid #64813b;
        }
        .article-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 24px rgba(46,72,157,0.07);
        }

        .article-date {
            font-size: 13px;
            color: var(--color-text-light);
        }

        .article-card h3 {
            font-size: 17px;
            font-weight: 700;
            color: var(--brand-blue);
            line-height: 1.4;
            flex-grow: 1;
        }

        .article-card p {
            font-size: var(--body-fluid); /* font-size: 14px; */
            color: var(--color-text-light);
            line-height: 1.6;
        }

        .article-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--brand-green);
            font-weight: 700;
            font-size: 16px;
            text-decoration: none;
            margin-top: 4px;
        }

        .articles-loading {
            text-align: center;
            color: var(--color-text-light);
            font-size: 16px;
            padding: 40px 0;
            grid-column: 1 / -1;
        }

        /* כותרת מקטע מרכזית */
        .section-title-center {
            text-align: center;
        }

        .section-title-center h2 {
            font-size: var(--h2-fluid);
            font-weight: 800;
            color: var(--brand-blue);
            margin-bottom: 12px;
        }
/* קו תחתון מעוצב בצבעי הלוגו מתחת לכותרת הראשית */
.section-title-center h2::after {
    /* 
	content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 4px;
    background: linear-gradient(90deg, var(--spiral-orange-light), var(--spiral-orange-deep));
    border-radius: 2px; */
}

        .section-title-center p {
            font-size: var(--body-fluid); /* 17px; */
            color: var(--color-text-light);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.7;
        }

        /* ==========================================
           רספונסיביות
           ========================================== */
        @media (max-width: 992px) {
            .courses-grid,
            .articles-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .profile-grid {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
            }

            .profile-circle-wrapper {
                width: 220px;
                height: 220px;
            }
        }

        @media (max-width: 640px) {
            .courses-grid,
            .articles-grid {
                grid-template-columns: 1fr;
            }

            .home-hero {
                padding: 48px 0 56px;
            }

            .hero-cta-row {
                flex-direction: column;
            }

            .btn-hero-primary,
            .btn-hero-secondary {
                width: 100%;
                text-align: center;
            }
        }
/* עיצוב כללי למקטע הקורסים */
.courses-section {
    max-width: 1100px;
    margin: 60px auto;
    padding: 0 20px;
    direction: rtl;
    text-align: center;
}

.courses-section h2 {
    font-size: var(--h2-fluid);
    color: var(--brand-blue);
    margin-bottom: 40px;
}

/* גריד של 3 טורים שהופך לטור אחד בנייד */
.courses-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    margin-bottom: 40px;
}

.course-card {
    flex: 1;
    min-width: 280px;
    max-width: 350px;
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    border: 1px solid #e2e8f0;
    text-align: right;
}

.course-card h3 {
    font-size: 1.3rem;
    color: var(--brand-blue);
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
}

.course-card p {
    font-size: var(--body-fluid); /* font-size: 1.2rem; */
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* אזור כפתורי ההנעה לפעולה */
.courses-cta {
    margin-top: 40px;
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.courses-cta .btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 6px;
    font-weight: 700;
    text-decoration: none;
    font-size: 1.3rem;
    transition: all 0.2s ease;
}

.courses-cta .btn-primary {
    background-color: #2563eb; /* כחול */
    color: #ffffff;
}

.courses-cta .btn-primary:hover {
    background-color: #1d4ed8;
}

.courses-cta .btn-secondary {
    background-color: #f1f5f9; /* אפור בהיר */
    color: #1e293b;
    border: 1px solid #cbd5e1;
}

.courses-cta .btn-secondary:hover {
    background-color: #e2e8f0;
}

/* ==========================================================================
   אזור ה-Hero הראשי של העמוד
   ========================================================================== */
        .hero-section {
            padding: 60px 0 80px 0;
            background-color: #ffffff;
        }

        .hero-container {
            display: flex;
            flex-direction: row-reverse;
            gap: 60px;
            align-items: center;
        }

        .hero-text {
            flex: 1.1;
        }

        .hero-image-wrapper {
            flex: 0.9;
            position: relative;
            padding: 10px;
        }

        .hero-image-wrapper::before {
            content: "";
            position: absolute;
            top: 25px;
            right: -10px;
            width: 100%;
            height: 100%;
			background: linear-gradient(135deg, rgba(46, 72, 157, 0.2), rgba(26, 45, 107, 0.15));
            border-radius: var(--radius-spiral);
            z-index: 1;
        }

        .hero-img {
            width: 100%;
            max-width: 500px;
            height: auto;
            display: block;
            position: relative;
            z-index: 2;
            border-radius: var(--radius-spiral);
            box-shadow: 0 15px 35px rgba(46, 72, 157, 0.15);
            object-fit: cover;
        }

        .badge-tag {
            background-color: rgba(100, 129, 59, 0.1);
            color: var(--brand-green);
            padding: 6px 14px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: 700;
            display: inline-block;
            margin-bottom: 20px;
        }

        .hero-text h1 {
            font-size: 44px;
            color: var(--brand-blue);
            line-height: 1.25;
            font-weight: 700;
            margin-bottom: 20px;
        }
.text-gradient {
    background: linear-gradient(135deg, var(--spiral-orange-light), var(--spiral-orange-deep));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

        .highlight-text {
            color: var(--spiral-orange-deep);
        }

        .hero-subtitle {
            font-size: 19px;
            color: var(--color-text-dark);
            margin-bottom: 35px;
            font-weight: 400;
        }

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

/* כפתור ספירלי נועז */
.btn-main-spiral {
    padding: 0.9rem 2.2rem; 
    background: linear-gradient(135deg, var(--brand-blue) 0%, #1c3175 100%);
    color: var(--canvas-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px; /* הגדרת גודל פונט מדויק ומותאם לכותרות החדשות */
    border-radius: var(--radius-fluid);
    box-shadow: 0 10px 25px rgba(46, 72, 157, 0.25);
    transition: var(--smooth-transition);
    display: inline-block; /* מבטיח שה-padding וה-transform יעבדו בצורה מושלמת על תגית a */
}

.btn-main-spiral:hover {
    transform: translateY(-2px) scale(1.01);
    box-shadow: 0 12px 28px rgba(46, 72, 157, 0.3);
}


.link-discover {
    color: var(--ink-dark);
    text-decoration: none;
    font-weight: 700;
    transition: var(--smooth-transition);
}

.link-discover:hover {
    color: var(--brand-green);
    transform: translateY(3px);
}

/* קומפוזיציית תמונות חושבת מחוץ לקופסה בשילוב צורות חתוכות (clip-path) */
.hero-visual-layer {
    position: relative;
}

.composition-holder {
    position: relative;
    width: 100%;
}

.blob-bg {
    position: absolute;
    width: 110%;
    height: 110%;
    background: linear-gradient(135deg, rgba(252, 195, 13, 0.2), rgba(232, 62, 57, 0.1));
    top: -5%;
    left: -5%;
    z-index: 1;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); /* חיתוך א-סימטרי מודרני */
    border-radius: var(--radius-standard);
}
.blob-home-bg {
    position: absolute;
    width: 110%;
    height: 110%;
    background: linear-gradient(135deg, rgba(46, 72, 157, 0.15) 0%, rgba(26, 45, 107, 0.1) 100%);
    top: -5%;
    left: -5%;
    z-index: 1;
    clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); /* חיתוך א-סימטרי מודרני */
    border-radius: var(--radius-standard);
}

.image-featured {
    width: 100%;
	max-width: 500px;  /* ← הגבלה */
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 2;
    border-radius: var(--radius-fluid);
    transform: rotate(2deg);
    transition: var(--smooth-transition);
    box-shadow: 0 30px 60px rgba(18, 24, 36, 0.12);
}

.home-image-featured {
    width: 100%;
	max-width: 500px;  /* ← הגבלה */
    height: auto;
    object-fit: cover;
    position: relative;
    z-index: 2;
    border-radius: var(--radius-fluid);
	border: 2px solid;
	border-color: #2d4a9e;
    transform: rotate(2deg);
    transition: var(--smooth-transition);
    box-shadow: 0 30px 60px rgba(18, 24, 36, 0.12);
}

.image-featured:hover {
    transform: rotate(0deg) scale(1.03);
}
.home-image-featured:hover {
    transform: rotate(0deg) scale(1.03);
}

/* ==========================================================================
   מקטע כרטיסים מדורגים (Services Sections)
   ========================================================================== */
        .services-section {
            padding: 60px 0;
            background-color: var(--color-bg-light);
        }

        .services-grid {
            display: flex;
            flex-direction: column;
            gap: 50px;
        }

        /* המיכל הכללי של הכרטיס */
        .layered-card {
            display: grid;
            grid-template-columns: 1fr 1.2fr;
            gap: 50px;
            align-items: center;
            background: transparent; /* ללא קופסה לבנה ריבועית חותכת, כמו במצגת */
            width: 100%;
        }

        .layered-card.reverse {
            grid-template-columns: 1.2fr 1fr;
        }
/* ==========================================
	רצועת המספרים
	========================================= */
        /* רצועת "מה תרוויחו" */
        .outcomes-strip {
            background: linear-gradient(135deg, var(--brand-blue) 0%, #1a2a5e 100%);
            padding: 50px 0;
            color: #ffffff;
        }

        .outcomes-strip h2 {
            text-align: center;
            font-size: 28px;
            font-weight: 700;
            margin-bottom: 36px;
            color: #ffffff;
        }

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

        .outcome-item {
            text-align: center;
            padding: 20px;
        }

        .outcome-number {
            font-size: 42px;
            font-weight: 800;
            color: var(--spiral-orange-light);
            display: block;
            line-height: 1;
            margin-bottom: 8px;
        }

        .outcome-item p {
            font-size: 15px;
            color: rgba(255,255,255,0.85);
            line-height: 1.5;
        }
/* ==========================================
	רשימת תיבות
	========================================= */
        /* גריד תוכן הנושאים */
        .topics-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 40px;
        }

        .topic-card {
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 14px;
            padding: 24px 20px;
            transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .topic-card::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            width: 4px;
            height: 100%;
            background: linear-gradient(180deg, var(--spiral-orange-light), var(--spiral-orange-deep));
            border-radius: 0 14px 14px 0;
        }

        .topic-card:hover {
            transform: translateY(-4px);
            border-color: rgba(46, 72, 157, 0.2);
            box-shadow: 0 12px 28px rgba(46, 72, 157, 0.08);
        }

        .topic-icon {
            font-size: 28px;
            color: var(--brand-blue);
            margin-bottom: 12px;
            display: block;
        }

        .topic-card h3 {
            font-size: 17px;
            font-weight: 700;
            color: var(--brand-blue);
            margin-bottom: 8px;
        }

        .topic-card p {
            font-size: 14px;
            color: var(--color-text-light);
            line-height: 1.6;
            margin: 0;
        }


/* ==========================================
   קטע תוכנית הלימודים - קורס אופיס
   ========================================== */
.office-curriculum {
    max-width: 700px;
    margin: 0 auto;
    padding: 40px 24px;
}

.curriculum-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--brand-blue);
    text-align: center;
    margin-bottom: 6px;
}

.curriculum-subtitle {
    text-align: center;
    font-size: 15px;
    color: var(--color-text-light);
    margin-bottom: 28px;
}

.office-curriculum .app-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    /*background: #ffffff; */
    border: 1px solid rgba(46, 72, 157, 0.08);
    border-radius: 12px;
    padding: 18px 20px;
    margin-bottom: 12px;
    transition: border-color 0.2s ease;
}

.office-curriculum .app-row:hover {
    border-color: rgba(46, 72, 157, 0.2);
}

.app-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.app-content { 
	flex: 1;
	font-size: 18px;
	}

.app-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--brand-blue);
    margin-bottom: 5px;
}

.app-bullets {
    list-style: none;
    margin: 0;
    padding: 0;
}

.app-bullets li {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
    display: flex;
    gap: 6px;
    align-items: flex-start;
}

.app-bullets li::before {
    content: "–";
    color: var(--brand-green);
    flex-shrink: 0;
}

        /* אלמנט הקסם: יצירת המסגרת העגולה המדויקת מהמצגת */
.layered-card-img {
    /* height: 300px;  ← למחוק את זה */
    object-fit: cover;
    position: relative;
    width: 100%;
    max-width: 280px;   /* ← הקטנה מ-400px */
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
        /* התמונה עצמה הופכת לעיגול פנימי */
        .layered-card-img img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 50% !important; /* חיתוך עיגול מושלם */
            display: block;
            /* הוספת המסגרת הצהובה העבה וההצללה הריאליסטית בדיוק כמו במצגת */
            border: 8px solid var(--spiral-orange-light) !important; 
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(252, 195, 13, 0.1) !important;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        /* התמונה עצמה הופכת לעיגול פנימי */
.layered-card-img-green {
    /* height: 300px;  ← למחוק את זה */
    object-fit: cover;
    position: relative;
    width: 100%;
    max-width: 280px;   /* ← הקטנה מ-400px */
    aspect-ratio: 1 / 1;
    margin: 0 auto;
}
        .layered-card-img-green img {
            width: 100% !important;
            height: 100% !important;
            object-fit: cover !important;
            border-radius: 50% !important; /* חיתוך עיגול מושלם */
            display: block;
            /* הוספת המסגרת הצהובה העבה וההצללה הריאליסטית בדיוק כמו במצגת */
            border: 8px solid var(--spiral-green-light) !important; 
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(252, 195, 13, 0.1) !important;
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }
        .layered-card-img-green img:hover {
            transform: scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(252, 195, 13, 0.15) !important;
        }

        .layered-card:hover .layered-card-img img {
            transform: scale(1.02);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 8px 20px rgba(252, 195, 13, 0.15) !important;
        }

        /* אזור הכתב לצד העיגול */
        .layered-card-info {
            padding: 20px 0;
        }

        .card-num {
            font-size: 54px;
            font-weight: 800;
            color: rgba(46, 72, 157, 0.1);
            display: block;
            line-height: 1;
            margin-bottom: 10px;
        }

        .layered-card-info h3 {
            font-size: 28px;
            color: var(--brand-blue);
            margin-bottom: 15px;
            font-weight: 700;
        }

        .layered-card-info p {
            color: var(--color-text-dark);
            font-size: var(--body-fluid); /* font-size: 17px; */
            margin-bottom: 25px;
            max-width: 550px;
        }

        .action-arrow-link {
            display: inline-block;
            color: var(--brand-green);
            text-decoration: none;
            font-weight: 700;
            font-size: 16px;
            transition: color 0.2s ease;
        }

        .action-arrow-link:hover {
            color: var(--brand-blue);
            text-decoration: underline;
        }
/* מיכל המסגור החדש (Hero Card) */
.feedback-hero-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 30px 40px 35px 40px; /* פדינג תחתון מוגדל כדי למרכז את התגית */
    /* max-width: 700px; */
    margin: 0 auto 10px auto;
    box-shadow: 0 10px 25px rgba(46, 72, 157, 0.04);
    text-align: center;
}
/* הכותרת בתוך המסגרת */
.feedback-pre-title {
    font-size: 26px;
    color: var(--brand-blue);
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

/* תגית קטנה ומעודנת מתחת לכותרת בתוך המסגרת */
.feedback-badge {
    display: inline-block;
    background-color: rgba(100, 129, 59, 0.08); /* רקע ירוק רך */
    color: var(--brand-green);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 14.5px;
    font-weight: 700;
}
/* =================================
   === הפנייה למרכז הידע 
   ================================= */
.knowledge-section {
    padding: 60px 0;
    background-color: #f8fafc;
}

.knowledge-section .section-title {
    text-align: center;
    margin-bottom: 48px;
}

/* ✅ Grid במקום inline-block — זה מה שמתקן את הבעיה */
.articles-knowledge-grid {
    display: grid;
	grid-template-columns: repeat(4, 1fr);
            gap: 30px;
			            margin-top: 48px;
    /* ❌ להסיר: max-width: 1200px; margin: 0 auto; */
}
.article-knowledge-card {
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(46, 72, 157, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	border-top: 2px solid #2d4a9e;
	padding: 25px;
	justify-content: flex-start;
	
	display: flex;           /* ← הוסיפי */
    flex-direction: column;  /* ← הוסיפי */
}

.article-knowledge-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(46, 72, 157, 0.1);
}
.knowledge-card-img {
    background: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.knowledge-card-img img {
    max-height: 140px;  /* קצת מרווח מהקצוות */
    width: auto;
    display: block;
}

.article-image-placeholder {
    font-size: 42px;
    padding: 28px;
    text-align: center;
    line-height: 1;
}

.article-knowledge-content {
    padding: 22px 8px 22px 8px;
	flex: 1;                 /* ← הוסיפי */
    display: flex;           /* ← הוסיפי */
    flex-direction: column;  /* ← הוסיפי */
}

.article-tag {
    display: inline-block;
    font-size: 14px;
    font-weight: 700;
    color: #4f46e5;
    background-color: #e0e7ff;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 12px;
}

.article-content h3 {
            font-size: 17px;
            font-weight: 700;
            color: var(--brand-blue);
            line-height: 1.4;
            flex-grow: 1;
}

.article-content p {
    font-size: var(--body-fluid); /* font-size: 14px; */
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 18px;
    min-height: 80px;
}

.read-more {
    display: inline-block;
    font-size: 16px;
    font-weight: 700;
    color: var(--brand-blue);
    text-decoration: none;
    border-bottom: 2px solid rgba(46, 72, 157, 0.2);
    padding-bottom: 2px;
    transition: color 0.2s, border-color 0.2s;
}

.read-more:hover {
    color: var(--brand-green);
    border-color: var(--brand-green);
}

@media (max-width: 992px) {
    .articles-grid { grid-template-columns: repeat(2, 1fr); }
	.articles-knowledge-grid {
	grid-template-columns: repeat(2, 1fr);
}

}

@media (max-width: 600px) {
    .articles-grid { grid-template-columns: 1fr; }
    .articles-knowledge-grid {
        grid-template-columns: 1fr;
    }
}


/* ================================ */   
/* =================================================== */
/* אקורדיון שאלות ותשובות צף (Floating Accordion UI) */
.floating-faq-section {
    padding: 40px 0;
    /* padding-block: clamp(5rem, 12vw, 9rem); */
    background-color: var(--canvas-white);
}

.modern-accordion {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-top: 3.5rem;
}

.accordion-box {
    background-color: var(--canvas-white); /* var(--canvas-light);*/
    border: 2px solid #c8d3e8; /* var(--canvas-cream); */
    border-radius: var(--radius-standard);
    transition: var(--smooth-transition);
    box-shadow: 0 2px 8px rgba(46,72,157,0.07);
}

.accordion-box[open] {
    /* border-color: rgba(46, 72, 157, 0.15);*/
    /* box-shadow: 0 15px 35px rgba(46, 72, 157, 0.06); */
    background-color: var(--canvas-white);
	
	border-color: var(--brand-blue);
    box-shadow: 0 8px 28px rgba(46, 72, 157, 0.13);
}

.accordion-trigger {
    padding: 2rem;
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
   justify-content: space-between;
}

.accordion-trigger::-webkit-details-marker {
    display: none;
}

.trigger-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-blue);
}

/* אייקון מותגי מותאם לאנרגיה של הספירלה */
.trigger-icon-holder {
    width: 42px;
    height: 42px;
    background-color: var(--canvas-cream);
    border-radius: 50%;
    position: relative;
    transition: var(--smooth-transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* יצירת חץ אלגנטי נקי במקום פלוס ומינוס */
.trigger-icon-holder::before {
    content: '';
    position: absolute;
    width: 8px;
    height: 8px;
    border-left: 3px solid var(--brand-blue);  /* יוצר את קווי החץ */
    border-bottom: 3px solid var(--brand-blue);
    transform: rotate(-45deg); /* כשהשאלה סגורה - החץ פונה למטה */
    transition: var(--smooth-transition);
    top: 15px; /* כיוונון עדין למרכז העיגול */
}
/* מנטרל לחלוטין את הקו השני שהיה מייצר את הפלוס/איקס */
.trigger-icon-holder::after {
    display: none !important;
}

/* כשהאקורדיון פתוח - שינוי צבע הרקע וסיבוב החץ למעלה */

.accordion-box[open] .trigger-icon-holder {
    background: linear-gradient(135deg, var(--spiral-orange-light), var(--spiral-orange-deep));
    transform: rotate(180deg); 

    border-color: transparent;
    box-shadow: 0 3px 10px rgba(232,62,57,0.3);
}

.accordion-box[open] .trigger-icon-holder::before,
.accordion-box[open] .trigger-icon-holder::after {
    /* border-color: var(--canvas-white); */)
    border-color: #fff;
    transform: rotate(135deg) translateY(-2px);
}

.accordion-body-text, .accordion-content-wrapper {
    padding: 0 2rem 2rem 2rem;
    color: var(--ink-muted);
    font-size: 1.2rem;
    animation: fadeInAnimation 0.5s ease forwards;
}
/* ================================== */
/* הפיכת ה-CTA לקארד נועז וא-סימטרי */
.creative-cta-section {
    padding-block: 2rem clamp(4rem, 10vw, 8rem);
}

.asymmetric-cta-card {
    /* background-color: var(--ink-dark); */
    background: linear-gradient(135deg, var(--brand-blue) 0%, #1a2a5e 100%);
    color: var(--canvas-white);
    border-radius: var(--radius-standard);
    padding: clamp(2.5rem, 6vw, 5rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 768px) {
    .asymmetric-cta-card {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem 1.5rem;
    }
}

/* אלמנט עיצובי שמדמה חצי מהעיגול של הספירלה שלכם */
.cta-wrapper {
    padding: clamp(2rem, 6vw, 4rem);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.asymmetric-cta-card::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border: 40px solid rgba(100, 129, 59, 0.15);
    border-radius: 50%;
    bottom: -200px;
    right: -200px;
    pointer-events: none;
}

.cta-left-content {
    color: var(--canvas-white);
    position: relative;
    z-index: 5;
}

.cta-left-content h2 {
	color: #ffffff;
    font-size: var(--h2-fluid);
    font-weight: 900;
    margin-bottom: 1.5rem;
    line-height: 1.2;
}

.cta-left-content p {
    color: #ffffff;
    font-size: font-size: 1.2rem;
    margin-bottom: 2.5rem;
}

.cta-brand-signature {
    color: var(--spiral-orange-light);
    font-weight: 700;
    font-size: 0.95rem;
}

.cta-right-form {
    position: relative;
    z-index: 5;
}

.fluid-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.input-row input {
    width: 100%;
    padding: 1.1rem 1.5rem;
    border-radius: 12px;
    border: 2px solid #2d3748;
    background-color: #ffffff; /* 1a202c; */
    color: var(--ink-muted);
    font-size: 1rem;
    transition: var(--smooth-transition);
}

.fluid-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1.5px solid #ddd;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1rem;
    resize: vertical;
    dir: rtl;
}

.fluid-form textarea:focus {
    outline: none;
    border-color: var(--brand-blue);
}

.input-row input:focus {
    outline: none;
    border-color: var(--brand-blue);
    background-color: #ffffff;
}

.btn-submit-creative {
    width: 100%;
    padding: 1.1rem;
    border: none;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--canvas-white);
    background: linear-gradient(135deg, var(--spiral-orange-light), var(--spiral-orange-deep));
    border-radius: 12px;
    cursor: pointer;
    transition: var(--smooth-transition);
    box-shadow: 0 8px 20px rgba(232, 62, 57, 0.3);
}

.btn-submit-creative:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(232, 62, 57, 0.5);
}
.upsell-block {
    padding: 40px 0;
}

.upsell-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: linear-gradient(135deg, #f0f4ff 0%, #e8f5e9 100%);
    border-radius: var(--radius-fluid);
    border-right: 4px solid var(--brand-blue);
    padding: 32px 36px;
}

.upsell-text h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--brand-blue);
    margin-bottom: 8px;
}

.upsell-text p {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-dark);
    margin: 0;
}

.btn-upsell {
    display: inline-block;
    white-space: nowrap;
    background-color: var(--brand-blue);
    color: #ffffff;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.btn-upsell:hover {
    background-color: var(--brand-green);
}

@media (max-width: 768px) {
    .upsell-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .btn-upsell {
        width: 100%;
        text-align: center;
    }
}

/* Footer */
.site-footer { background: #111; color: #eee; padding: 50px 0; }
.footer-content { display: flex; justify-content: space-between; align-items: center; }
.social-icons { display: flex; gap: 15px; margin-top: 15px; }
.social-icons a { color: white; font-size: 22px; transition: 0.3s; }
.social-icons a:hover { color: var(--orange); transform: translateY(-3px); }
.footer-content { align-items: flex-start; gap: 40px; }

.f-links h5,
.f-social h5 { color: #eee; font-size: 0.9rem; font-weight: 600;
               text-transform: uppercase; letter-spacing: 0.5px;
               margin-bottom: 12px; }

.footer-links-list {
    list-style: none; padding: 0; margin: 0;
	columns: 2;
    column-gap: 24px;
}
.footer-links-list li { margin-bottom: 6px; }
.footer-links-list a { color: #aaa; font-size: 0.88rem;
                        text-decoration: none; transition: color 0.2s; }
.footer-links-list a:hover { color: #fff; }

@media (max-width: 768px) {
  .footer-content { flex-direction: column; align-items: flex-start; gap: 30px; }
}

@media (max-width: 992px) {
    .hero-grid, .feature-card, .feature-card.reverse { flex-direction: column; text-align: center; }
    .hero-content h1 { font-size: 2.5rem; }
	.outcomes-list {grid-template-columns: repeat(2, 1fr);}
	.topics-grid {grid-template-columns: repeat(2, 1fr);}
}
/* ==========================================
   TESTIMONIALS & BLOCKQUOTE STYLING
   ========================================== */
.testimonials-section {
    padding: 60px 0;
    background: linear-gradient(180deg, var(--canvas-white) 0%, var(--color-light) 100%);
    position: relative;
}

.testimonials-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
    gap: 48px;
}

.testimonial-card {
    background: var(--canvas-white);
    border-radius: var(--border-radius-custom);
    padding: 40px;
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(46, 72, 157, 0.04);
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
	justify-content: flex-start;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-strong);
    border-color: rgba(100, 129, 59, 0.2); /* נגיעה של ירוק מהלוגו בריחופים */
}

/* כוכבי דירוג */
.rating-stars {
    color: var(--spiral-yellow); /* צהוב ספירלה */
    font-size: 14px;
    margin-bottom: 20px;
    display: flex;
    gap: 4px;
}
/* עיצוב ה-Blockquote המבוקש */
.modern-blockquote {
    font-size: 17px;
    color: #444;
    line-height: 1.8;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 25px;
     margin-top: 25px;
   position: relative;
    z-index: 2;
	
}
.modern-blockquote.multi-quotes {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 25px;
}

.modern-blockquote.multi-quotes p {
    margin: 0;
    padding: 8px 12px;
    border-right: 3px solid var(--spiral-orange-light);
    font-size: var(--body-fluid); /* font-size: 15px; */
    color: #444;
    font-style: italic;
}
/* מרכאות מעוצבות ברקע בהשראת צבעי הספירלה (SEO/UI אלגנטי) */
.modern-blockquote::before {
    content: "\f10e"; /* אייקון מרכאות של פונט אוסם */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -50px;
    right: -10px;
    font-size: 50px;
    /* גרדיאנט הלוגו מספירלה צהובה לאדומה */
    background: var(--gradient-spiral);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.12;
    z-index: -1;
}

/* פרטי כותב ההמלצה */
.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
    border-top: 1px solid #f0f2f5;
    padding-top: 20px;
	 margin-top: auto;   /* הכותב תמיד בתחתית */
}

.author-info strong {
    display: block;
    font-size: 16px;
    color: var(--brand-blue); /* כחול לוגו */
    font-weight: 700;
    margin-bottom: 2px;
}

.author-info span {
    display: block;
    font-size: 13px;
    color: #777;
}

/* כפתור המבורגר - מוסתר כברירת מחדל במחשב */
.hamburger-menu {
    display: none;
    background-color: #2E489D; /* כחול לוגו */
    color: var(--canvas-white, #ffffff);
    border: 1px solid #1c3175;
    border-radius: 6px;
    padding: 10px 14px;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
.hamburger-menu:hover {
    background-color: #1c3175;
}

@media (max-width: 768px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .testimonial-card {
        padding: 24px 20px;
    }
}
/* ==========================================================================
   מקטע יתרונות ומאפיינים (Features Grid Section)
   ========================================================================== */
.features-section {
    padding: 60px 0;
    background-color: var(--canvas-white); /* או var(--color-bg-light) אם תרצי רקע אפרפר עדין */
}

/* כותרת המקטע */
.features-title-wrapper {
    text-align: center;
    margin-bottom: 45px;
}

.features-title-wrapper h2 {
    font-size: var(--h2-fluid); /* 32px; */
    color: var(--brand-blue);
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-bottom: 12px;
}

/* קו תחתון מעוצב בצבעי הלוגו מתחת לכותרת הראשית */
.features-title-wrapper h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 4px;
    background: linear-gradient(90deg, var(--spiral-orange-light), var(--spiral-orange-deep));
    border-radius: 2px;
}

/* גריד של האלמנטים - 3 בעמודה במחשב */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}
.features-grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* כרטיס יתרון בודד */
.feature-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(46, 72, 157, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* אפקט מעבר עכבר - הכרטיס עולה מעט ומקבל מסגרת ירוקה עדינה */
.feature-card:hover {
    transform: translateY(-5px);
    border-color: var(--brand-green);
    box-shadow: 0 12px 20px rgba(46, 72, 157, 0.06);
}

/* מיכל האייקון */
.feature-icon-box {
    width: 65px;
    height: 65px;
    background-color: var(--spiral-orange-light); 
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    font-size: 28px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.feature-card:hover .feature-icon-box {
    background-color: rgba(100, 129, 59, 0.08); /* רקע ירוק מותג שקוף ורך */
    color: var(--spiral-orange-light);
}

/* כותרת היתרון */
.feature-card h3 {
    font-size: 20px;
    color: var(--brand-blue);
    margin-bottom: 12px;
    font-weight: 700;
}

/* תיאור היתרון */
.feature-card p {
    font-size: var(--body-fluid); /* font-size: 16px; */
    color: #2B2B2B; /* var(--color-text-light);*/
    line-height: 1.7;
}
.li-item {
    margin-bottom: 20px;
    font-size: 18px;
    display: flex;
    align-items: center;
}
/* התאמה לרספונסיביות ומובייל */
@media (max-width: 992px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 בשורה בטאבלט */
        gap: 20px;
    }
    .features-grid4 {
        grid-template-columns: repeat(2, 1fr); /* 2 בשורה בטאבלט */
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .features-grid {
        grid-template-columns: 1fr; /* כרטיס אחד בשורה במובייל */
    }
    .features-grid4 {
        grid-template-columns: 1fr; /* כרטיס אחד בשורה במובייל */
    }
    
    .features-title-wrapper h2 {
        font-size: var(--h2-fluid);;
    }
	.outcomes-list {
		grid-template-columns: repeat(2, 1fr);
	}
	.topics-grid {
		grid-template-columns: 1fr;
	}
}
/* ==========================================================================
   מקטע תגובות מהשטח (Live Feedback Section)
   ========================================================================== */
.live-feedback-section {
    padding: 60px 0;
    background-color: #ffffff;
    text-align: center;
}

/* מיכל בועות הדיבור */
.feedback-bubbles-container {
    display: flex;
    justify-content: center;
    gap: 24px;
    margin-bottom: 35px;
    flex-wrap: wrap;
}

/* עיצוב בועת דיבור בודדת */
.feedback-bubble {
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    font-size: 20px;
    font-weight: 600;
    font-style: italic;
    padding: 16px 35px; /* פדינג מוגדל לצדדים */
    border-radius: 30px;
    position: relative;
    box-shadow: 0 4px 15px rgba(46, 72, 157, 0.03);
    border: 1px solid #e2e8f0;
    display: inline-block;
    transition: transform 0.2s ease;
}
.feedback-bubble:hover {
    transform: scale(1.03);
    border-color: var(--brand-green);
}

/* גרף ההדגשה הציטוט - מרכאות קטנות וירוקות בתחילת ובסוף הבועה */
.feedback-bubble::before {
    content: '"';
    color: var(--brand-green);
    font-weight: 700;
    margin-left: 4px;
}

.feedback-bubble::after {
    content: '"';
    color: var(--brand-green);
    font-weight: 700;
    margin-right: 4px;
}

/* משפט הסיכום המרכזי שמתחת לבועות */
.feedback-summary-text {
    font-size: 20px;
    color: var(--brand-green);
    font-weight: 700;
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.4;
}

/* הדגשה צבעונית למילים החשובות בתוך המשפט */
.feedback-summary-text .highlight {
    color: var(--brand-green);
    position: relative;
}
/* כותרת מקדימה מעל בועות הדיבור */
.feedback-pre-title {
    font-size: 28px;
    color: var(--brand-blue);
    font-weight: 700;
    margin-bottom: 30px;
    text-align: center;
}
/* ===============================================================
   עבור דפי סילבוס
   =============================================================== */

        /* ==========================================
           Hero קומפקטי לדף פנימי
           ========================================== */
        .syllabus-hero {
            background: linear-gradient(160deg, #f0f4ff 0%, #ffffff 100%);
            padding: 48px 0 56px;
            border-bottom: 1px solid rgba(46, 72, 157, 0.08);
        }

        .syllabus-hero h1 {
            font-size: clamp(1.8rem, 3.5vw, 2.6rem);
            color: var(--brand-blue);
            font-weight: 800;
            line-height: 1.3;
            margin-bottom: 16px;
        }

        .syllabus-hero p.hero-sub {
            font-size: 18px;
            color: var(--color-text-light);
            max-width: 680px;
            line-height: 1.7;
            margin-bottom: 28px;
        }

        /* כדורי מידע מהיר */
        .meta-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
        }

        .meta-pill {
            display: flex;
            align-items: center;
            gap: 8px;
            background: #ffffff;
            border: 1px solid #e2e8f0;
            border-radius: 30px;
            padding: 8px 18px;
            font-size: 15px;
            font-weight: 600;
            color: var(--color-text-dark);
            box-shadow: 0 2px 8px rgba(46,72,157,0.05);
        }

        .meta-pill i {
            color: var(--brand-blue);
            font-size: 16px;
        }

        /* ==========================================
           פרטי הקורס — רצועת כרטיסים אופקית
           ========================================== */
        .course-details-strip {
            padding: 48px 0;
            background: #ffffff;
        }

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

        .detail-card {
            background: var(--color-bg-light);
            border: 1px solid #e8edf5;
            border-radius: 14px;
            padding: 24px 20px;
            text-align: center;
        }

        .detail-card i {
            font-size: 28px;
            color: var(--brand-blue);
            display: block;
            margin-bottom: 12px;
        }

        .detail-card .detail-label {
            font-size: 13px;
            color: var(--color-text-light);
            display: block;
            margin-bottom: 4px;
        }

        .detail-card .detail-value {
            font-size: 17px;
            font-weight: 700;
            color: var(--color-text-dark);
        }

        /* ==========================================
           נושאי הקורס
           ========================================== */
        .syllabus-content {
            padding: 56px 0;
            background: #f8fafc;
        }

        .syllabus-section {
            margin-bottom: 48px;
        }

        .syllabus-section:last-child {
            margin-bottom: 0;
        }

        .syllabus-section-title {
            font-size: 22px;
            font-weight: 700;
            color: var(--brand-blue);
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 2px solid rgba(46, 72, 157, 0.1);
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .syllabus-section-title i {
            background: linear-gradient(135deg, var(--spiral-orange-light), var(--spiral-orange-deep));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 22px;
        }

        .topics-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
        }

        .topics-list.single-col {
            grid-template-columns: 1fr;
        }

        .topics-list li {
            display: flex;
            align-items: flex-start;
            gap: 14px;
            background: #ffffff;
            border: 1px solid #e8edf5;
            border-radius: 12px;
            padding: 18px 20px;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .topics-list li:hover {
            border-color: rgba(46, 72, 157, 0.2);
            box-shadow: 0 4px 14px rgba(46, 72, 157, 0.06);
        }

        .topic-check {
            width: 24px;
            height: 24px;
            background: linear-gradient(135deg, var(--spiral-orange-light), var(--spiral-orange-deep));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .topic-check i {
            color: #ffffff;
        }

        .topic-text strong {
            display: block;
            font-size: 16px;
            font-weight: 700;
            color: var(--brand-blue);
            margin-bottom: 4px;
        }

        .topic-text span {
            font-size: 14px;
            color: var(--color-text-light);
            line-height: 1.5;
        }

        /* ==========================================
           מה כלול + קהל יעד — שני בלוקים זה לצד זה
           ========================================== */
        .included-section {
            padding: 56px 0;
            background: #ffffff;
        }

        .included-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 32px;
        }

        .included-card {
            background: var(--color-bg-light);
            border: 1px solid #e2e8f0;
            border-radius: 16px;
            padding: 32px 28px;
        }

        .included-card h3 {
            font-size: 20px;
            font-weight: 700;
            color: var(--brand-blue);
            margin-bottom: 20px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e2e8f0;
        }

        .included-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .included-list li {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 16px;
            color: var(--color-text-dark);
        }

        .included-list li i {
            color: var(--brand-green);
            font-size: 18px;
            flex-shrink: 0;
        }

        .audience-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .audience-tag {
            background: rgba(46, 72, 157, 0.07);
            color: var(--brand-blue);
            border-radius: 20px;
            padding: 7px 16px;
            font-size: 15px;
            font-weight: 600;
        }

        .prereq-note {
            font-size: 14px;
            color: var(--color-text-light);
            margin-top: 16px;
            line-height: 1.6;
            border-top: 1px solid #e2e8f0;
            padding-top: 14px;
        }
/* ================================================
   Numbers
   ================================================ */
/* מעטפת הבלוק - רקע כחול עמוק */
.stats-container-dark {
    max-width: 1100px;
    margin: 40px auto;
    padding: 40px 20px;
    background-color: #0f172a;
    border-radius: 12px;
    font-family: system-ui, -apple-system, sans-serif;
    direction: rtl;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    position: relative;    /* ← הוסיפי */
    overflow: hidden;      /* ← הוסיפי — מונע גלישה של הקשת */
}
.stats-container-dark::before {
    content: '';
    position: absolute;
    width: 400px;
    height: 400px;
    border: 40px solid rgba(100, 129, 59, 0.15);
    border-radius: 50%;
    bottom: -200px;
    right: -200px;
    pointer-events: none;
}
.stats-container-dark::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border: 30px solid rgba(252, 195, 13, 0.08);
    border-radius: 50%;
    top: -150px;
    left: -150px;
    pointer-events: none;
}
/* כותרת הבלוק */
.stats-heading-dark {
    text-align: center;
    margin-bottom: 40px;
	margin-bottom: 40px !important;
}

.stats-heading-dark h2 {
    font-size: var(--h2-fluid);;
    color: #ffffff; /* לבן */
    margin: 0;
}

/* גריד רספונסיבי */
.stats-grid-dark {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

/* כרטיסיות עם רקע כחול מעט בהיר יותר ליצירת עומק */
.stat-card-dark {
    background: #1e293b; /* כחול-אפור כהה */
    padding: 30px 20px;
    border-radius: 8px;
    border: 1px solid #334155; /* מסגרת עדינה למניעת מראה גושני */
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stat-card-dark:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* המספר הגדול בתכלת בוהק */
.stat-number-dark {
	font-size: 3.2rem !important;    /* מספר גדול ובולט */
    font-weight: 800 !important;
    color: var(--spiral-orange-light) !important; /* מוודא שימוש בצהוב-זהב של הלוגו */
    margin-bottom: 12px !important;  /* רווח קטן ונקי מתחת למספר */
    line-height: 1 !important;
}

/* כותרת המספר */
.stat-label-dark {
    color: #ffffff;
	
	font-size: 1.2rem !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;   /* רווח קטן בין הכותרת לתיאור */
}

/* תיאור קצר באפור בהיר */
.stat-desc-dark {
    color: #94a3b8; /* אפור בהיר קריא */

	font-size: 0.95rem !important;
    line-height: 1.5 !important;    /* מרווח שורות נוח לקריאה */
    opacity: 0.9;
}
        /* ==========================================
           רספונסיביות
           ========================================== */
        @media (max-width: 992px) {
            .details-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .topics-list {
                grid-template-columns: 1fr;
            }
            .included-grid {
                grid-template-columns: 1fr;
            }
    .stats-container-dark {
        margin: 20px 16px;        /* במקום margin: auto שיכול להיחתך */
        border-radius: 8px;
        padding: 40px 16px !important;
    }

    .stats-grid-dark {
        grid-template-columns: 1fr;   /* עמודה אחת בלבד */
        gap: 16px;
    }
}
        @media (max-width: 640px) {
            .details-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .meta-pill {
                font-size: 13px;
                padding: 6px 14px;
            }
        }

   
 /* ==========================================================================
           768px חוקי רספונסיביות למובייל
    ========================================================================== */

/* רספונסיביות למובייל */
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 28px;
    }	
    .feedback-bubbles-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    
    .feedback-bubble {
        font-size: 18px;
        padding: 12px 22px;
        width: 100%;
        max-width: 320px;
    }
    
    .feedback-summary-text {
        font-size: 22px;
        padding: 0 15px;
    }
    .feedback-pre-title {
        font-size: 20px;
        padding: 0 15px;
    }
.wa-float-btn {	
	bottom: 20px;
    left: 20px;       /* מצמיד לשמאל במובייל */
    right: auto;      /* מנטרל את ה-50% של הימין */
    transform: none;  /* מנטרל לחלוטין את המירכוז האופקי */
}
    .breadcrumbs-list {
        display: none;
    }
    
    .subnav-list {
        justify-content: space-between;
        width: 100%;
    }
    
    .subnav-link {
        font-size: 13px;
        padding: 10px 8px;
    }
    
    .subnav-link.subnav-cta {
        margin: 6px 0 6px 4px;
        padding: 5px 12px;
    }
	
}

        /* ==========================================================================
           992px חוקי רספונסיביות למובייל
           ========================================================================== */
        @media (max-width: 992px) {
            .hamburger-toggle {
                display: block;
            }

            .main-nav {
                position: fixed;
                top: 0;
                right: -100%; 
                width: 280px;
                height: 100vh;
                background-color: #ffffff;
                box-shadow: -4px 0 20px rgba(0,0,0,0.1);
                padding: 80px 24px 40px 24px;
                transition: right 0.3s ease-out;
                z-index: 1050;
                overflow-y: auto;
            }

            body.mobile-menu-active .main-nav {
                right: 0;
            }

            .main-nav ul.nav-list {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
            }

            .main-nav li.nav-item {
                flex-direction: column;
                align-items: stretch;
            }

            .main-nav li.nav-item:not(:last-child)::after {
                width: 100%;
                height: 1px;
                background: linear-gradient(to right, var(--spiral-orange-light), transparent);
                margin: 8px 0;
            }

            .main-nav a.nav-link {
                font-size: 18px;
                padding: 10px 12px;
                width: 100%;
                justify-content: space-between;
            }

            .dropdown-menu {
                position: static;
                box-shadow: none;
                border-top: none;
                border-right: 3px solid var(--spiral-orange-light);
                border-radius: 0;
                display: none;
                padding: 5px 15px 5px 0;
                min-width: auto;
                background-color: var(--color-bg-light);
                margin-top: 5px;
            }

            .main-nav li.has-dropdown.open-submenu .dropdown-menu {
                display: block;
            }
            /* מבנה כרטיסים למובייל */
            .layered-card, .layered-card.reverse {
                grid-template-columns: 1fr;
                gap: 30px;
                text-align: center;
            }

            .layered-card-info p {
                margin-left: auto;
                margin-right: auto;
            }

            .hero-container {
                flex-direction: column;
                text-align: center;
                gap: 40px;
            }
            
            .hero-image-wrapper {
                max-width: 420px;
                margin: 0 auto;
            }

            .hero-actions {
                flex-direction: column;
                gap: 12px;
            }

	/* שומר על פרופורציות נכונות של הלוגו וכפתור צרו קשר במובייל */
	.logo-img {
		height: 55px;
	}

	.main-nav a.nav-contact-btn {
		background: var(--brand-green);
		color: white !important;
		text-align: center;
		margin-top: 10px;
		padding: 8px;
	}
/* התאמת לחצן צרו קשר במובייל - ירוק ונמוך יותר */
            .main-nav a.nav-contact-btn {
                background: var(--brand-green);
                color: white !important;
                text-align: center;
                margin-top: 10px;
                padding: 8px; /* גובה מוקטן במובייל */
                font-size: 16px;
            }
        }