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

:root {
    --aca-p:      #7C3AED;
    --aca-p-dark: #5B21B6;
    --aca-p-deep: #4C1D95;
    --aca-pink:   #EC4899;
    --aca-fuchsia:#D946EF;
    --aca-amber:  #F59E0B;
    --aca-cyan:   #06B6D4;
    --aca-bg:     #FAF5FF;
    --aca-fg:     #1F1F35;

    --aca-grad:        linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    --aca-grad-aurora: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #EC4899 100%);

    --aca-shadow-card:  0 4px 20px rgba(124, 58, 237, 0.08), 0 1px 3px rgba(0,0,0,0.04);
    --aca-shadow-hover: 0 25px 50px -12px rgba(124, 58, 237, 0.28), 0 0 0 1px rgba(124,58,237,0.06);

    --aca-r-md: 16px;
    --aca-r-lg: 22px;
    --aca-r-xl: 28px;
}

* { -webkit-tap-highlight-color: rgba(124, 58, 237, 0.1); }

body, h1, h2, h3, h4, h5, h6, p, a, span, button, input, select, textarea {
    font-family: 'Heebo', 'Noto Sans Hebrew', -apple-system, system-ui, sans-serif !important;
}

h1, h2, h3 { letter-spacing: -0.02em; }

::selection { background: rgba(236, 72, 153, 0.25); color: var(--aca-p-deep); }

/* ============================================================================
   NAVBAR — frosted glass sticky
   ============================================================================ */
.header-fixed {
    background: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 0 1px 0 rgba(124, 58, 237, 0.08), 0 4px 20px rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid rgba(124, 58, 237, 0.05);
}

.main-nav > li > a {
    font-weight: 600 !important;
    color: #1f1f35 !important;
    padding: 10px 16px !important;
    position: relative;
    transition: color 0.2s ease;
}

.main-nav > li > a::after {
    content: '';
    position: absolute;
    bottom: 0; left: 16px; right: 16px;
    height: 2px;
    background: var(--aca-grad);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav > li > a:hover { color: var(--aca-p) !important; }
.main-nav > li > a:hover::after { transform: scaleX(1); }

.header-navbar-rht .header-login {
    background: var(--aca-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.35);
    transition: all 0.25s ease !important;
}
.header-navbar-rht .header-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.45);
}
.header-navbar-rht .header-sign {
    background: transparent !important;
    color: var(--aca-p) !important;
    border: 2px solid rgba(124, 58, 237, 0.25) !important;
    border-radius: 999px !important;
    padding: 9px 20px !important;
    font-weight: 700 !important;
    transition: all 0.25s ease !important;
}
.header-navbar-rht .header-sign:hover {
    background: rgba(124, 58, 237, 0.08) !important;
    border-color: var(--aca-p) !important;
}

/* ============================================================================
   HERO — Aurora animated + floating blobs
   ============================================================================ */
.home-slide {
    position: relative;
    min-height: 90vh;
    min-height: 90dvh;
    background: #0c0420 !important;
    overflow: hidden;
}

/* The aurora layer — slow moving giant blobs */
.home-slide::before {
    content: '';
    position: absolute;
    inset: -50%;
    background:
        radial-gradient(circle at 20% 30%, rgba(167, 139, 250, 0.50) 0%, transparent 35%),
        radial-gradient(circle at 80% 60%, rgba(236, 72, 153, 0.40) 0%, transparent 35%),
        radial-gradient(circle at 50% 90%, rgba(251, 191, 36, 0.30) 0%, transparent 35%),
        radial-gradient(circle at 95% 15%, rgba(6, 182, 212, 0.25) 0%, transparent 35%),
        radial-gradient(circle at 30% 80%, rgba(217, 70, 239, 0.35) 0%, transparent 35%);
    animation: acaAurora 24s ease-in-out infinite;
    will-change: transform;
}

@keyframes acaAurora {
    0%, 100% { transform: rotate(0deg) scale(1); }
    33%      { transform: rotate(120deg) scale(1.05); }
    66%      { transform: rotate(240deg) scale(0.95); }
}

/* Grain noise overlay */
.home-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1, 0 0 0 0 1, 0 0 0 0 1, 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
    opacity: 0.5;
    mix-blend-mode: overlay;
    pointer-events: none;
}

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

.home-slide h1, .home-slide .banner-content h1 {
    font-size: clamp(2rem, 7vw, 4.5rem) !important;
    font-weight: 900 !important;
    line-height: 1.05 !important;
    color: #fff !important;
    text-shadow: 0 4px 30px rgba(124, 58, 237, 0.4);
    letter-spacing: -0.03em;
}

.home-slide .banner-content p,
.home-slide .banner-content h2 {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: clamp(1rem, 2.5vw, 1.25rem) !important;
}

/* Search bar over aurora */
.banner-content .form,
.banner-content #main_search_input {
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 60px !important;
    padding: 8px !important;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
}

.banner-content .form .form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 52px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
}

.banner-content .form button[type="submit"],
.banner-content .form .btn,
.banner-content button[type="submit"] {
    background: var(--aca-grad) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    height: auto !important;
    box-shadow: 0 8px 20px -4px rgba(236, 72, 153, 0.5) !important;
    transition: all 0.25s ease !important;
}

.banner-content button[type="submit"]:hover { transform: translateY(-3px) scale(1.02); }

/* ============================================================================
   MARQUEE — infinite scroll of subject keywords below hero
   ============================================================================ */
.aca-marquee {
    background: rgba(255, 255, 255, 0.04);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
    z-index: 2;
    padding: 16px 0;
}

.aca-marquee-track {
    display: flex;
    gap: 24px;
    width: max-content;
    animation: acaMarquee 30s linear infinite;
}

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

@keyframes acaMarquee {
    to { transform: translateX(-50%); }
}

.aca-marquee-item {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 700;
    font-size: 0.95rem;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    white-space: nowrap;
}

/* ============================================================================
   SECTIONS — neutral bg
   ============================================================================ */
section.section { background: transparent !important; }

/* ============================================================================
   EQUAL-HEIGHT CARDS in Owl Carousels
   ============================================================================ */
.owl-carousel .owl-stage {
    display: flex !important;
    align-items: stretch !important;
}
.owl-carousel .owl-item {
    display: flex !important;
    height: auto !important;
}
.owl-carousel .owl-item > div,
.owl-carousel .course-box,
.owl-carousel .instructors-widget {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
}
.owl-carousel .product-content,
.owl-carousel .instructors-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.owl-carousel .product-content .all-btn,
.owl-carousel .instructors-content .all-category {
    margin-top: auto !important;
}

/* ============================================================================
   COURSE CARDS — innovative with hover spotlight
   ============================================================================ */
.course-box.trend-box, .course-box {
    background: #fff !important;
    border: 1.5px solid rgba(221, 214, 254, 0.5) !important;
    border-radius: var(--aca-r-lg) !important;
    overflow: hidden !important;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.3s ease !important;
    box-shadow: var(--aca-shadow-card);
    position: relative;
}

/* Hover spotlight — uses CSS vars set by JS */
.course-box::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        600px circle at var(--mx, 50%) var(--my, 50%),
        rgba(236, 72, 153, 0.12),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.course-box:hover::before { opacity: 1; }
.course-box:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--aca-shadow-hover) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

.course-box .product-img {
    position: relative;
    overflow: hidden;
    border-radius: 18px 18px 0 0 !important;
    aspect-ratio: 16/10;
    z-index: 0;
}

.course-box .product-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.course-box:hover .product-img img { transform: scale(1.08) !important; }

.course-box .price {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    background: var(--aca-grad) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    box-shadow: 0 8px 16px -4px rgba(236, 72, 153, 0.45);
    z-index: 2;
}

.course-box .price h3 {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    white-space: nowrap;
}

.course-box .price h3 span {
    color: rgba(255, 255, 255, 0.75) !important;
    text-decoration: line-through;
    font-size: 0.75rem;
    margin-left: 4px;
}

.course-box .product-content {
    padding: 20px !important;
    position: relative;
    z-index: 2;
    background: #fff;
}

.course-box h3.title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: #1f1f35 !important;
    min-height: 2.7em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 12px;
}

.course-box h3.title a { color: inherit !important; text-decoration: none !important; }

.course-box .course-name h4 a {
    color: var(--aca-p) !important;
    font-weight: 700 !important;
    font-size: 0.92rem !important;
    text-decoration: none !important;
}

.course-box .course-name p { color: #6b6b85 !important; font-size: 0.78rem !important; margin: 0; }

.course-box .course-share a {
    width: 36px; height: 36px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: rgba(124, 58, 237, 0.08);
    color: var(--aca-p) !important;
    transition: all 0.2s ease;
}

.course-box .course-share a:hover {
    background: var(--aca-pink) !important;
    color: #fff !important;
    transform: scale(1.1);
}

.course-box .course-info {
    border-top: 1px solid rgba(124, 58, 237, 0.1);
    padding-top: 12px;
    margin-top: 4px;
    gap: 16px;
}

.course-box .course-info p { color: #6b6b85 !important; font-size: 0.85rem !important; margin: 0 4px 0 0 !important; }

.course-box .all-btn .btn-primary {
    width: 100%;
    background: var(--aca-grad) !important;
    border: none !important;
    border-radius: 14px !important;
    padding: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    box-shadow: 0 4px 14px -2px rgba(124, 58, 237, 0.35);
}

/* ============================================================================
   TEACHER CARDS — innovative with hover spotlight
   ============================================================================ */
.instructors-widget {
    background: #fff !important;
    border: 1.5px solid rgba(221, 214, 254, 0.5) !important;
    border-radius: var(--aca-r-lg) !important;
    overflow: hidden !important;
    box-shadow: var(--aca-shadow-card);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.35s ease,
                border-color 0.3s ease !important;
    padding: 0 !important;
    position: relative;
}

.instructors-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        500px circle at var(--mx, 50%) var(--my, 50%),
        rgba(124, 58, 237, 0.14),
        transparent 40%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.instructors-widget:hover::before { opacity: 1; }
.instructors-widget:hover {
    transform: translateY(-10px) !important;
    box-shadow: var(--aca-shadow-hover) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

.instructors-widget .instructors-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1/1;
    background: linear-gradient(135deg, #FAF5FF, #F3E8FF);
    z-index: 0;
}

.instructors-widget .instructors-img a { display: block; width: 100%; height: 100%; }
.instructors-widget .instructors-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.instructors-widget:hover .instructors-img img { transform: scale(1.1) !important; }

.instructors-widget .instructors-img::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 80px;
    background: linear-gradient(180deg, transparent, rgba(76, 29, 149, 0.5));
    pointer-events: none;
}

.instructors-widget .instructors-content {
    padding: 22px 20px !important;
    text-align: center !important;
    position: relative;
    z-index: 2;
    background: #fff;
}

.instructors-widget h5 { margin-bottom: 8px !important; align-items: center !important; justify-content: center !important; }
.instructors-widget h5 a {
    color: #1f1f35 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    text-decoration: none !important;
    padding: 0 !important;
}
.instructors-widget .best-teachers {
    width: 22px !important;
    height: auto;
    margin-right: 6px;
    filter: drop-shadow(0 2px 4px rgba(124, 58, 237, 0.3));
}

.instructors-widget .instructors-content p {
    color: #6b6b85 !important;
    font-size: 0.85rem !important;
    line-height: 1.5;
    margin-bottom: 12px !important;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.instructors-widget .instructors-content p .fa-star.filled {
    color: var(--aca-amber) !important;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.4));
    margin: 0 1px;
    font-size: 14px;
}

.instructors-widget .more-details,
.instructors-widget .btn-primary {
    background: var(--aca-grad) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 10px 22px !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    box-shadow: 0 4px 14px -2px rgba(124, 58, 237, 0.4);
    transition: all 0.25s ease;
}

.instructors-widget .more-details:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -2px rgba(236, 72, 153, 0.5); }

/* ============================================================================
   SEARCH-RESULT LIST CARDS (course-list page)
   ============================================================================ */
.course-box.course-design.list-course {
    background: #fff !important;
    border: 1.5px solid rgba(221, 214, 254, 0.5) !important;
    border-radius: var(--aca-r-lg) !important;
    box-shadow: var(--aca-shadow-card) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
}

.course-box.course-design.list-course:hover {
    transform: translateY(-6px) !important;
    box-shadow: var(--aca-shadow-hover) !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
}

.course-box.course-design.list-course .product-img {
    width: 220px !important;
    flex-shrink: 0;
    overflow: hidden;
}

.course-box.course-design.list-course .product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.6s ease;
}

/* ============================================================================
   SECTION HEADERS
   ============================================================================ */
.section-header h2,
.section-sub-head h2,
.section-sub-head .feature-head h2 {
    font-weight: 900 !important;
    font-size: clamp(1.5rem, 4vw, 2.25rem) !important;
    background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #EC4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    position: relative;
    display: inline-block;
    padding-bottom: 18px;
    letter-spacing: -0.02em;
}

.section-header h2::after,
.section-sub-head .feature-head h2::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    width: 64px; height: 4px;
    background: var(--aca-grad);
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(236, 72, 153, 0.4);
}

.section-sub-head span, .section-header span {
    color: var(--aca-p) !important;
    font-weight: 700 !important;
    font-size: 0.9rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* ============================================================================
   STAT BOXES with COUNT-UP
   ============================================================================ */
.blur-border, .blur-border.course-radius {
    background: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: var(--aca-r-lg) !important;
    box-shadow: 0 10px 30px -10px rgba(124, 58, 237, 0.15) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    padding: 24px !important;
}

.blur-border:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px -15px rgba(124, 58, 237, 0.30) !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
}

.course-inner-content h4, .online-course h4 {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    font-weight: 900 !important;
    margin-bottom: 4px !important;
    background: var(--aca-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.course-inner-content p, .online-course p {
    color: #6b6b85 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* ============================================================================
   MODAL — book a lesson dramatic
   ============================================================================ */
.modal-dialog { max-width: 580px; }

.modal-content {
    border: none !important;
    border-radius: var(--aca-r-xl) !important;
    overflow: hidden !important;
    box-shadow: 0 50px 100px -20px rgba(0, 0, 0, 0.25),
                0 30px 60px -30px rgba(124, 58, 237, 0.4) !important;
    background: #fff !important;
}

.modal-content::before {
    content: '';
    display: block;
    height: 8px;
    background: var(--aca-grad-aurora);
    background-size: 200% 200%;
    animation: acaGradMove 6s ease infinite;
}

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

.modal-body { padding: 32px !important; background: #fff !important; }

#lessonModal h3, .modal-body h3 {
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #EC4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 24px !important;
    text-align: center;
}

.modal .btn-close {
    background-color: rgba(124, 58, 237, 0.08) !important;
    border-radius: 50% !important;
    width: 36px; height: 36px;
    padding: 8px !important;
    opacity: 1 !important;
    transition: all 0.2s ease;
    margin: 16px 16px 0 0 !important;
}

.modal .btn-close:hover { background-color: var(--aca-pink) !important; }

.modal label {
    display: block;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
    color: #1f1f35 !important;
    margin-bottom: 8px !important;
}

.modal .form-control {
    border: 1.5px solid #E5DEFA !important;
    background: #FAF5FF !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    height: 48px !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
}

.modal .form-control:focus {
    border-color: var(--aca-p) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}

.modal .form-control[readonly] {
    background: #F3E8FF !important;
    color: #4C1D95 !important;
    font-weight: 600 !important;
}

.modal #all-lesson-details {
    background: linear-gradient(135deg, rgba(124,58,237,0.05), rgba(236,72,153,0.04));
    border-radius: 14px;
    padding: 16px 20px !important;
    border: 1px dashed rgba(124, 58, 237, 0.2);
    margin-top: 16px !important;
}

.modal #all-lesson-details > div { color: #4C1D95; font-weight: 500; margin: 4px 0; }

.modal .btn-primary, .modal .btn-send {
    background: var(--aca-grad) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 14px 32px !important;
    font-weight: 700 !important;
    width: 100%;
    box-shadow: 0 10px 20px -4px rgba(236, 72, 153, 0.45) !important;
    transition: all 0.25s ease;
    font-size: 1rem !important;
}

.modal .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -4px rgba(236, 72, 153, 0.6) !important; }

.flag-input { position: relative; }
.flag-input .flag-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 24px; }
.flag-input input { padding-left: 48px !important; }

/* ============================================================================
   TESTIMONIALS — frosted glass premium
   ============================================================================ */
.testimonial-four { padding: 60px 0 !important; background: linear-gradient(180deg, transparent, rgba(124,58,237,0.04)); }

.testimonial-four-saying {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(20px);
    border-radius: var(--aca-r-xl) !important;
    padding: 40px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 30px 60px -15px rgba(124, 58, 237, 0.18) !important;
    margin: 20px;
}

.testimonial-four-saying p {
    font-size: 1.05rem !important;
    line-height: 1.7 !important;
    color: #2a2a40 !important;
    font-style: italic;
}

.four-testimonial-founder h3 a { color: var(--aca-p-deep) !important; font-weight: 800 !important; }
.four-testimonial-founder .fount-about-img {
    width: 64px !important; height: 64px !important;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 8px 16px -4px rgba(124, 58, 237, 0.3);
}

/* ============================================================================
   BUTTONS — magnetic effect handled by JS
   ============================================================================ */
.btn-primary, .btn.btn-primary {
    background: var(--aca-grad) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 11px 24px !important;
    font-weight: 700 !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease !important;
    box-shadow: 0 4px 14px -2px rgba(124, 58, 237, 0.35);
}

.btn-primary::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}
.btn-primary:hover::before { left: 100%; }
.btn-primary:hover, .btn-primary:focus {
    transform: translateY(-2px);
    color: #fff !important;
    box-shadow: 0 10px 24px -4px rgba(236, 72, 153, 0.5) !important;
}

/* ============================================================================
   INFO BAR — big dramatic
   ============================================================================ */
.info-bar {
    background: linear-gradient(135deg, #5B21B6 0%, #7C3AED 50%, #EC4899 100%) !important;
    border-radius: var(--aca-r-xl);
    box-shadow: 0 30px 60px -15px rgba(124, 58, 237, 0.5);
    position: relative;
    overflow: hidden;
}

/* ============================================================================
   SCROLL REVEAL
   ============================================================================ */
.aca-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.aca-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .aca-reveal { opacity: 1; transform: none; }
    .home-slide::before { animation: none !important; }
    .aca-marquee-track { animation-play-state: paused !important; }
}

/* ============================================================================
   FOOTER
   ============================================================================ */
footer.footer { background: linear-gradient(180deg, #FAF5FF 0%, #ECEEF9 100%) !important; }
footer.footer .footer-title { color: var(--aca-p-deep) !important; font-weight: 800 !important; margin-bottom: 16px !important; }
footer.footer .footer-menu ul li a {
    color: #4b4b65 !important;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
}
footer.footer .footer-menu ul li a:hover {
    color: var(--aca-p) !important;
    transform: translateX(-3px);
}
.footer-bottom.bg-dark { background: linear-gradient(135deg, #4C1D95, #5B21B6) !important; }

/* ============================================================================
   MOBILE FIRST — RESPONSIVE
   ============================================================================ */
@media (max-width: 768px) {
    .home-slide { min-height: 80vh; min-height: 80dvh; padding: 100px 0 60px !important; }
    .home-slide h1 { font-size: clamp(1.75rem, 8vw, 2.5rem) !important; }

    .banner-content .form,
    .banner-content #main_search_input {
        border-radius: 24px !important;
        padding: 14px !important;
    }
    .banner-content .form .form-control { height: 44px !important; }
    .banner-content button[type="submit"] {
        width: 100%;
        margin-top: 10px;
    }

    .course-box .product-content { padding: 16px !important; }
    .course-box h3.title { font-size: 0.95rem !important; }

    .instructors-widget .instructors-content { padding: 16px !important; }

    .modal-dialog { margin: 12px !important; max-width: calc(100% - 24px) !important; }
    .modal-body { padding: 20px !important; }
    #lessonModal h3 { font-size: 1.25rem !important; }
    .modal .form-control { height: 44px !important; font-size: 16px !important; /* avoid iOS zoom */ }

    .testimonial-four-saying { padding: 24px !important; margin: 12px !important; }
    .testimonial-four-saying p { font-size: 0.95rem !important; }

    .section-header, .section-sub-head { padding: 0 16px; }

    .blur-border { padding: 18px !important; }
    .course-inner-content h4 { font-size: 1.5rem !important; }

    .aca-marquee-item { font-size: 0.85rem; padding: 5px 12px; }

    /* Disable heavy hover effects on touch devices */
    @media (hover: none) {
        .course-box:hover, .instructors-widget:hover { transform: none !important; }
        .course-box::before, .instructors-widget::before { display: none; }
    }
}

@media (max-width: 480px) {
    .home-slide h1 { font-size: 1.75rem !important; line-height: 1.15 !important; }
    .banner-content .form,
    .banner-content #main_search_input {
        flex-direction: column !important;
    }
    .modal-content { border-radius: 20px !important; }
    .section-header h2, .section-sub-head h2 { font-size: 1.5rem !important; padding-bottom: 12px; }
    .section-header h2::after { width: 48px; height: 3px; }

    .course-box.course-design.list-course { flex-direction: column !important; }
    .course-box.course-design.list-course .product-img { width: 100% !important; height: 200px; }

    footer.footer { padding-top: 32px !important; }
}

/* iOS safe area */
@supports (padding: env(safe-area-inset-bottom)) {
    .header-fixed { padding-top: env(safe-area-inset-top, 0); }
}

/* ============================================================================
   HOTFIX (post-v4) — kill the legacy 149px min-width + bottom positioning on .price
   ============================================================================ */
.course-box .price,
.course-box.trend-box .product-img .price,
.product-img .price,
.course-design .price {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%) !important;
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    bottom: auto !important;
    left: auto !important;
    min-width: 0 !important;
    width: auto !important;
    height: auto !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    box-shadow: 0 8px 16px -4px rgba(236, 72, 153, 0.45) !important;
    line-height: 1 !important;
    z-index: 3 !important;
}

.course-box .price h3,
.product-img .price h3,
.course-design .price h3 {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

.course-box .price h3 span,
.product-img .price h3 span,
.course-design .price h3 span {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: line-through !important;
    font-size: 0.72rem !important;
    margin-left: 4px !important;
    font-weight: 500 !important;
}

/* Mobile — even smaller */
@media (max-width: 480px) {
    .course-box .price,
    .product-img .price {
        top: 10px !important;
        right: 10px !important;
        padding: 5px 11px !important;
    }
    .course-box .price h3,
    .product-img .price h3 {
        font-size: 0.78rem !important;
    }
    .course-box .price h3 span {
        font-size: 0.65rem !important;
    }
}

/* ============================================================================
   HOTFIX (post-v4) — HERO back to LIGHT bg with subtle aurora.
   The previous dark hero broke contrast on existing text/images.
   ============================================================================ */
.home-slide {
    min-height: 80vh !important;
    background:
        radial-gradient(ellipse at 18% 25%, rgba(167, 139, 250, 0.40) 0%, transparent 45%),
        radial-gradient(ellipse at 82% 70%, rgba(236, 72, 153, 0.30) 0%, transparent 45%),
        radial-gradient(ellipse at 50% 100%, rgba(251, 191, 36, 0.22) 0%, transparent 45%),
        radial-gradient(ellipse at 95% 15%, rgba(6, 182, 212, 0.18) 0%, transparent 45%),
        linear-gradient(180deg, #FAF5FF 0%, #F5EDFF 100%) !important;
}

.home-slide::before {
    background:
        radial-gradient(circle at 30% 30%, rgba(167, 139, 250, 0.30) 0%, transparent 40%),
        radial-gradient(circle at 70% 70%, rgba(236, 72, 153, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 50% 90%, rgba(251, 191, 36, 0.20) 0%, transparent 40%);
    mix-blend-mode: normal;
}

.home-slide::after { display: none; }

/* Headlines BACK to dark gradient text on light bg */
.home-slide h1, .home-slide .banner-content h1 {
    color: transparent !important;
    background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #EC4899 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: acaGradMove 8s ease infinite;
    text-shadow: none !important;
    font-weight: 900 !important;
    font-size: clamp(1.75rem, 6vw, 3.5rem) !important;
    line-height: 1.15 !important;
}

.home-slide .banner-content p,
.home-slide .banner-content h2,
.home-slide-text p,
.home-slide-text h2 {
    color: #4C1D95 !important;
    font-weight: 600;
}

.home-slide-text h2 {
    font-size: clamp(1.1rem, 3vw, 1.6rem) !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
}

/* Marquee — adapt to LIGHT bg */
.aca-marquee {
    background: rgba(124, 58, 237, 0.04) !important;
    border-top: 1px solid rgba(124, 58, 237, 0.10) !important;
    border-bottom: 1px solid rgba(124, 58, 237, 0.10) !important;
}

.aca-marquee-item {
    color: #4C1D95 !important;
    background: rgba(124, 58, 237, 0.06) !important;
    border: 1px solid rgba(124, 58, 237, 0.12) !important;
}

/* Search input on light bg — keep white pill */
.banner-content .form,
.banner-content #main_search_input {
    background: rgba(255, 255, 255, 0.95) !important;
    box-shadow: 0 20px 50px -15px rgba(124, 58, 237, 0.30), 0 0 0 1px rgba(124, 58, 237, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

.home-slide {
    min-height: auto !important;
    padding: 80px 0 60px !important;
    background:
        radial-gradient(ellipse at 80% 20%, rgba(167, 139, 250, 0.25) 0%, transparent 50%),
        radial-gradient(ellipse at 20% 80%, rgba(236, 72, 153, 0.18) 0%, transparent 50%),
        linear-gradient(180deg, #FAF5FF 0%, #F5EDFF 100%) !important;
}

.home-slide::before { display: none !important; }
.home-slide::after { display: none !important; }

/* H5 small lede */
.home-slide-text h5 {
    color: var(--aca-p) !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* H1 main headline */
.home-slide-text h1,
.home-slide h1 {
    background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #EC4899 100%) !important;
    background-size: 200% 200%;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: acaGradMove 8s ease infinite;
    font-weight: 900 !important;
    font-size: clamp(1.8rem, 5vw, 3.2rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
    text-shadow: none !important;
}

/* H1 with text-right keeps its alignment */
.home-slide-text h1.text-right { text-align: right !important; }

/* Subhead paragraph */
.home-slide-text p {
    color: #5b5b75 !important;
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    margin-bottom: 24px;
}

/* The girl image — keep it visible */
.girl-slide-img { opacity: 1 !important; }
.girl-slide-img img {
    max-width: 100% !important;
    height: auto !important;
    filter: drop-shadow(0 20px 40px rgba(124, 58, 237, 0.2));
}

/* Search form polish */
.banner-content .form,
.banner-content #main_search_input {
    background: rgba(255, 255, 255, 0.95) !important;
    border-radius: 16px !important;
    padding: 8px !important;
    box-shadow: 0 20px 50px -15px rgba(124, 58, 237, 0.30) !important;
    border: 1px solid rgba(124, 58, 237, 0.1) !important;
}

/* Remove the marquee — was disrupting layout */
.aca-marquee { display: none !important; }

/* Mobile */
@media (max-width: 768px) {
    .home-slide { padding: 60px 0 40px !important; }
    .home-slide-text h5 { font-size: 0.95rem !important; }
    .home-slide-text h1 { font-size: 1.75rem !important; line-height: 1.2 !important; }
    .home-slide-text p { font-size: 0.95rem !important; }
    .girl-slide-img { display: none !important; }
}

/* Outer card: ensure overflow hidden so image radius works */
.course-box.course-design.list-course {
    overflow: hidden !important;
    display: flex !important;
    align-items: stretch !important;
}

/* IMAGE: rounded on the side that meets the card edge (LEFT in LTR), full height */
.course-box.course-design.list-course .product-img {
    width: 220px !important;
    height: auto !important;
    aspect-ratio: auto !important;
    flex-shrink: 0;
    border-radius: 22px 0 0 22px !important;
    overflow: hidden;
    position: relative;
}

.course-box.course-design.list-course .product-img a {
    display: block;
    width: 100%;
    height: 100%;
}

.course-box.course-design.list-course .product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 22px 0 0 22px !important;
    transition: transform 0.6s ease;
}

.course-box.course-design.list-course:hover .product-img img {
    transform: scale(1.06);
}

/* CONTENT: RTL flow so name+cap go to the right edge, heart to the left */
.course-box.course-design.list-course .product-content {
    flex: 1;
    padding: 22px 24px !important;
    direction: rtl;
    text-align: right;
}

/* Top row: name+cap on one side, heart on the other */
.course-box.course-design.list-course .head-course-title {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(124, 58, 237, 0.10);
}

/* Cap + name inline group (already d-flex from Bootstrap) */
.course-box.course-design.list-course .course-group-img {
    align-items: center !important;
    gap: 12px;
    flex-shrink: 1;
}

.course-box.course-design.list-course .course-group-img > a {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.course-box.course-design.list-course .course-group-img > a img {
    width: 36px !important;
    height: auto !important;
    filter: drop-shadow(0 2px 4px rgba(124, 58, 237, 0.35));
}

.course-box.course-design.list-course .course-name h4 {
    margin: 0 0 4px 0 !important;
    line-height: 1.2;
}

.course-box.course-design.list-course .course-name h4 a {
    color: #1f1f35 !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    text-decoration: none !important;
}

.course-box.course-design.list-course .course-name p {
    color: var(--aca-p) !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
}

/* HEART (Like) — circular pill on the left edge */
.course-box.course-design.list-course .course-share.like {
    flex-shrink: 0;
}

.course-box.course-design.list-course .course-share.like .like-button {
    width: 48px;
    height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(124, 58, 237, 0.08);
    color: var(--aca-p) !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 4px;
}

.course-box.course-design.list-course .course-share.like .like-button:hover {
    background: var(--aca-pink) !important;
    color: #fff !important;
    transform: scale(1.08);
}

.course-box.course-design.list-course .course-share.like .like-button .heart-count {
    color: inherit !important;
    font-size: 0.8rem !important;
    padding: 0 !important;
}

/* Course info row (lessons, hourly price) */
.course-box.course-design.list-course .course-info {
    gap: 18px;
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
    border: none !important;
}

.course-box.course-design.list-course .course-info img {
    width: 20px;
    height: auto;
}

.course-box.course-design.list-course .course-info p {
    color: #6b6b85 !important;
    font-size: 0.88rem !important;
    margin: 0 !important;
}

/* Rating row */
.course-box.course-design.list-course .rating {
    margin: 8px 0 !important;
}

.course-box.course-design.list-course .rating .fa-star.filled {
    color: var(--aca-amber) !important;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.4));
    margin: 0 1px;
}

.course-box.course-design.list-course .rating .average-rating {
    color: #6b6b85 !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    margin-right: 8px;
}

/* Bio title */
.course-box.course-design.list-course p.title {
    color: #2a2a40 !important;
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin: 12px 0 16px !important;
    background: rgba(124, 58, 237, 0.04);
    padding: 12px 14px;
    border-radius: 12px;
    border-right: 3px solid var(--aca-p);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.course-box.course-design.list-course p.title b {
    color: var(--aca-p-deep) !important;
}

/* 3 action buttons row */
.course-box.course-design.list-course .course-group {
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-start !important;
    margin: 0 -4px !important;
}

.course-box.course-design.list-course .course-group .btn-card {
    margin: 4px !important;
    flex: 1 1 auto;
    min-width: 0;
}

.course-box.course-design.list-course .btn-primary {
    width: 100% !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    font-size: 0.9rem !important;
    white-space: nowrap;
}

/* Color variations per CTA */
.course-box.course-design.list-course .find-book-date {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%) !important;
}
.course-box.course-design.list-course .chat-teacher {
    background: linear-gradient(135deg, #10B981 0%, #06B6D4 100%) !important;
    box-shadow: 0 4px 14px -2px rgba(16, 185, 129, 0.35) !important;
}
.course-box.course-design.list-course .more-details {
    background: #fff !important;
    color: var(--aca-p) !important;
    border: 2px solid var(--aca-p) !important;
    box-shadow: none !important;
}
.course-box.course-design.list-course .more-details:hover {
    background: var(--aca-p) !important;
    color: #fff !important;
}

/* PRICE — already pill from earlier hotfix; ensure for list-course too */
.course-box.course-design.list-course .product-img .price {
    top: 12px !important;
    right: auto !important;
    left: 12px !important;
    bottom: auto !important;
}

/* MOBILE: stack vertical, image full-width on top */
@media (max-width: 768px) {
    .course-box.course-design.list-course {
        flex-direction: column !important;
    }
    .course-box.course-design.list-course .product-img {
        width: 100% !important;
        height: 240px !important;
        border-radius: 22px 22px 0 0 !important;
    }
    .course-box.course-design.list-course .product-img img {
        border-radius: 22px 22px 0 0 !important;
    }
    .course-box.course-design.list-course .product-img .price {
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
    }
    .course-box.course-design.list-course .product-content {
        padding: 18px !important;
    }
    .course-box.course-design.list-course .course-name h4 a {
        font-size: 1.1rem !important;
    }
}

/* ============================================================================
   HOTFIX: heart-like button — wrap fully around icon + count
   ============================================================================ */
.course-box.course-design.list-course .course-share.like .like-button,
.course-share.like .like-button {
    width: auto !important;
    height: auto !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    background: rgba(124, 58, 237, 0.08) !important;
    color: var(--aca-p) !important;
    transition: all 0.2s ease;
    text-decoration: none !important;
    line-height: 1 !important;
    white-space: nowrap;
}

.course-box.course-design.list-course .course-share.like .like-button:hover,
.course-share.like .like-button:hover {
    background: var(--aca-pink) !important;
    color: #fff !important;
    transform: scale(1.05);
}

.course-box.course-design.list-course .course-share.like .like-button .heart-count,
.course-share.like .like-button .heart-count {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    line-height: 1 !important;
}

.course-box.course-design.list-course .course-share.like .like-button i,
.course-share.like .like-button i {
    font-size: 0.95rem;
    line-height: 1;
}

/* ---------- HERO/BANNER section ---------- */
.page-banner.instructor-bg-blk {
    background:
        radial-gradient(ellipse at 20% 30%, rgba(167, 139, 250, 0.45) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 70%, rgba(236, 72, 153, 0.35) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 100%, rgba(251, 191, 36, 0.25) 0%, transparent 50%),
        linear-gradient(135deg, #4C1D95 0%, #5B21B6 50%, #7C3AED 100%) !important;
    padding: 80px 0 80px !important;
    position: relative;
    overflow: hidden;
}

.page-banner.instructor-bg-blk::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 0h1v40H0zM0 0v1h40V0z' fill='%23ffffff' fill-opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
}

.page-banner.instructor-bg-blk .container { position: relative; z-index: 2; }

.profile-info-blk { text-align: center; padding: 20px 0; }

/* Profile image with gradient ring */
.profile-info-blk .profile-info-img {
    display: inline-block !important;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    padding: 5px;
    background: linear-gradient(135deg, #FBBF24, #EC4899, #A78BFA);
    position: relative;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.5);
    transition: transform 0.4s ease;
    margin-bottom: 24px;
}

.profile-info-blk .profile-info-img:hover { transform: scale(1.05); }

.profile-info-blk .profile-info-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    background: #fff;
}

/* Name */
.profile-info-blk h4 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

.profile-info-blk h4 a {
    color: #fff !important;
    font-size: clamp(1.6rem, 4vw, 2.4rem) !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    letter-spacing: -0.02em;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.profile-info-blk p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin-bottom: 16px !important;
}

/* Step badge */
.profile-info-blk .btn.btn-light {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    padding: 8px 20px !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 0.88rem;
}

/* ---------- MAIN CONTENT cards ---------- */
.page-content.course-sec { padding: 60px 0 !important; background: #FAF5FF; }

.page-content.course-sec .card {
    border: none !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08), 0 1px 3px rgba(0,0,0,0.04) !important;
    overflow: hidden;
    margin-bottom: 24px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page-content.course-sec .card:hover {
    transform: translateY(-3px);
    box-shadow: 0 25px 50px -15px rgba(124, 58, 237, 0.18) !important;
}

/* Section title row inside cards */
.page-content.course-sec .card > .d-flex {
    padding: 18px 24px 0;
    align-items: center;
}

.page-content.course-sec .card .edu-name {
    width: 56px !important;
    height: 56px !important;
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    border-radius: 16px;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    margin-left: 14px !important;
    box-shadow: 0 8px 20px -4px rgba(124, 58, 237, 0.4);
    flex-shrink: 0;
}

.page-content.course-sec .card .edu-name img {
    width: 30px !important;
    height: 30px !important;
    filter: brightness(0) invert(1);
}

.page-content.course-sec .card .subs-title {
    font-size: 1.35rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #EC4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 !important;
}

.page-content.course-sec .card .card-body {
    padding: 18px 28px 28px !important;
}

/* About text */
.page-content.course-sec .overview-sec .edu-detail p {
    font-size: 1.02rem !important;
    line-height: 1.75 !important;
    color: #2a2a40 !important;
}

/* Education / Experience cards — timeline style */
.page-content.course-sec .education-list,
.page-content.course-sec .education-sec .card-body > div {
    position: relative;
}

.page-content.course-sec .edu-wrap {
    background: rgba(124, 58, 237, 0.04);
    border-right: 3px solid var(--aca-p, #7C3AED);
    border-radius: 14px;
    padding: 16px 18px !important;
    margin-bottom: 12px;
    transition: background 0.2s ease;
}

.page-content.course-sec .edu-wrap:hover {
    background: rgba(124, 58, 237, 0.08);
}

.page-content.course-sec .edu-wrap h6 {
    color: var(--aca-p, #7C3AED) !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    margin-bottom: 6px !important;
}

.page-content.course-sec .edu-wrap .edu-duration {
    color: #6b6b85 !important;
    font-size: 0.85rem !important;
    margin-bottom: 4px !important;
    font-weight: 600;
}

.page-content.course-sec .edu-wrap p {
    color: #2a2a40 !important;
    margin: 0 !important;
}

.page-content.course-sec hr { display: none; }

/* ---------- Reviews inside profile ---------- */
.page-content.course-sec .instructor-wrap {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.03), rgba(236, 72, 153, 0.03));
    border-radius: 16px;
    padding: 18px !important;
    margin-bottom: 12px !important;
    border: 1px solid rgba(124, 58, 237, 0.08);
}

.page-content.course-sec .instructor-wrap img.rounded-circle,
.page-content.course-sec .instructor-wrap .img-fluid {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2);
}

.page-content.course-sec .rev-info {
    color: #2a2a40 !important;
    font-style: italic;
    font-size: 1rem !important;
    line-height: 1.65 !important;
    padding: 12px 18px;
    background: #fff;
    border-radius: 12px;
    margin-top: 12px !important;
    border-right: 3px solid var(--aca-p, #7C3AED);
}

/* Star rating */
.page-content.course-sec .rating .fa-star.filled,
.page-content.course-sec .rating .fa-star {
    color: var(--aca-amber, #F59E0B) !important;
    filter: drop-shadow(0 1px 2px rgba(245, 158, 11, 0.4));
}

/* ---------- Review submission form ---------- */
.page-content.course-sec .submit-section,
.page-content.course-sec form .form-control {
    border-radius: 12px !important;
    border: 1.5px solid #E5DEFA !important;
    background: #FAF5FF !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
}

.page-content.course-sec form .form-control:focus {
    border-color: var(--aca-p, #7C3AED) !important;
    background: #fff !important;
    box-shadow: 0 0 0 4px rgba(124, 58, 237, 0.15) !important;
}

.page-content.course-sec .submit-section .btn {
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 12px 28px !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 8px 20px -4px rgba(236, 72, 153, 0.45);
}

/* ---------- SIDEBAR ---------- */
.page-content.course-sec .col-lg-4 .card,
.page-content.course-sec .sidebar-tag-labels {
    background: #fff !important;
    border-radius: 22px !important;
    box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08) !important;
    padding: 24px !important;
    border: none !important;
    margin-bottom: 24px;
}

.page-content.course-sec .sidebar-tag-labels {
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.06), rgba(236, 72, 153, 0.06)) !important;
}

/* Subject pills (tags) in sidebar */
.page-content.course-sec .sidebar-tag-labels a,
.page-content.course-sec .sidebar-tag-labels span.tag {
    display: inline-block;
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%) !important;
    color: #fff !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    margin: 4px !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px -2px rgba(124, 58, 237, 0.35);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.page-content.course-sec .sidebar-tag-labels a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px -4px rgba(236, 72, 153, 0.5);
}

/* Contact info list (אזור, נייד, אימייל) */
.page-content.course-sec .contact-info-list {
    display: grid;
    gap: 14px;
}

.page-content.course-sec .contact-info-list .edu-wrap {
    background: rgba(124, 58, 237, 0.04);
    border-right: 3px solid var(--aca-p, #7C3AED);
    border-radius: 14px;
    padding: 14px 16px !important;
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin: 0 !important;
}

.page-content.course-sec .contact-info-list .edu-wrap .edu-name {
    width: 44px !important;
    height: 44px !important;
    background: linear-gradient(135deg, #7C3AED, #EC4899) !important;
    border-radius: 12px !important;
    flex-shrink: 0;
    margin: 0 !important;
    padding: 8px !important;
}

.page-content.course-sec .contact-info-list .edu-wrap .edu-name span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.page-content.course-sec .contact-info-list .edu-wrap .edu-name img {
    width: 24px !important;
    height: 24px !important;
    filter: brightness(0) invert(1) !important;
}

.page-content.course-sec .contact-info-list .edu-wrap .edu-detail {
    flex: 1;
}

.page-content.course-sec .contact-info-list .edu-wrap h6 {
    color: var(--aca-p, #7C3AED) !important;
    font-weight: 800 !important;
    font-size: 0.78rem !important;
    margin-bottom: 4px !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.page-content.course-sec .contact-info-list .edu-wrap p {
    color: #1f1f35 !important;
    font-size: 0.95rem !important;
    font-weight: 600;
    margin: 0 !important;
}

.page-content.course-sec .contact-info-list .edu-wrap p .edu-blur-text {
    color: #6b6b85 !important;
    filter: blur(3.5px);
    user-select: none;
}

/* Make text-muted look nice ("לא צוין") */
.page-content.course-sec .contact-info-list p .text-muted {
    color: #9b9bb5 !important;
    font-style: italic;
}

/* ---------- Course cards inside profile (their own courses) ---------- */
.page-content.course-sec .product-content .product-content-title a {
    color: #1f1f35 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.page-content.course-sec .product-content .product-content-title a:hover { color: var(--aca-p, #7C3AED) !important; }

/* ---------- MOBILE ---------- */
@media (max-width: 991px) {
    .page-content.course-sec .col-lg-4 {
        margin-top: 24px;
    }
}

@media (max-width: 768px) {
    .page-banner.instructor-bg-blk { padding: 50px 0 50px !important; }
    .profile-info-blk .profile-info-img { width: 130px; height: 130px; }
    .profile-info-blk h4 a { font-size: 1.5rem !important; }
    .page-content.course-sec { padding: 32px 0 !important; }
    .page-content.course-sec .card .card-body { padding: 14px 18px 18px !important; }
    .page-content.course-sec .card > .d-flex { padding: 14px 18px 0; }
    .page-content.course-sec .card .edu-name { width: 44px !important; height: 44px !important; }
    .page-content.course-sec .card .edu-name img { width: 22px !important; height: 22px !important; }
    .page-content.course-sec .card .subs-title { font-size: 1.1rem !important; }
    .page-content.course-sec .sidebar-tag-labels a { font-size: 0.78rem !important; padding: 6px 12px !important; }
}

/* Reveal: visible by default. JS animates from-state via .aca-prep class instead. */
.aca-reveal {
    opacity: 1 !important;
    transform: none !important;
}

/* AOS fallback — if AOS lib fails to init, elements still show. */
[data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

[data-aos].aos-animate { opacity: 1 !important; }

/* MOBILE */
@media (max-width: 768px) {
}

@media (max-width: 480px) {
}

/* ============================================================================
   AUTH PAGES — FINAL CLEAN DESIGN (login / register / forgot)
   Uses :has() to target ONLY the outer auth row, not inner form rows.
   Layout: CSS Grid 1fr 1fr — both columns guaranteed equal height.
   ============================================================================ */

/* The OUTER auth row (has .login-bg as a child) — make it grid */

/* ---------- LEFT: banner with aurora gradient ---------- */

/* ---------- RIGHT: form column ---------- */

/* Logo + back-home */

/* H1 gradient */

/* Form labels */

/* Inputs */

/* Password show/hide */

/* Forgot link */

/* Custom checkbox */

/* Submit button */

/* Google login section */

/* Register form inner rows (col-md-6 fname/lname etc.) — keep Bootstrap behavior */

/* ---------- MOBILE: stack vertically ---------- */
@media (max-width: 991px) {
    .row:has(> .login-bg) {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    .row:has(> .login-bg) > .login-bg,
    .row:has(> .login-bg) > .login-wrap-bg {
        min-height: auto !important;
        height: auto !important;
    }
    .row:has(> .login-bg) > .login-bg {
        padding: 90px 24px 32px !important;
    }
    .row:has(> .login-bg) > .login-bg .login-banner img {
        max-height: 180px;
    }
    .row:has(> .login-bg) > .login-bg .mentor-course h2 {
        font-size: 1.5rem !important;
    }
    .row:has(> .login-bg) > .login-wrap-bg {
        padding: 32px 20px !important;
    }
    .row:has(> .login-bg) .loginbox h1 {
        font-size: 1.55rem !important;
    }
}