:root {
    --primary: #3B3C9B;
    --primary-rgb: 59, 60, 155;
    --brand-red: #961830;
    --brand-blue: #3A42A0;
    --brand-maroon: #7E1C34;
    --brand-gold: #C4A03A;
    --brand-sand: #E5DCD2;
    --brand-gradient: linear-gradient(100deg, var(--brand-red) 0%, var(--brand-blue) 100%);
    --banner-gradient: linear-gradient(180deg, #000005 0%, #14143A 40%, var(--primary) 100%);
    --secondary: #23A6F0;
    --accent: #FFD24C;
    --text: #252B42;
    --text-muted: #737373;
    --text-light: #FFFFFF;
    --bg: #FFFFFF;
    --light-bg: #FAFAFA;
    /* Brand guideline: Switzer for Latin, Almarai for Arabic, Tahoma as the
       system fallback when brand fonts are unavailable. */
    --font-main: 'Switzer', 'Almarai', Tahoma, sans-serif;
    --font-arabic: 'Almarai', Tahoma, sans-serif;
    --transition: all 0.3s ease;
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg);
    color: var(--text);
    line-height: 1.6;
    overflow-x: hidden;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Header - Logo on RIGHT */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1rem 0;
    background: #fff;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

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

.header-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    /* lets the search shrink instead of the row overflowing */
    min-width: 0;
}

/* Logo */
.logo {
    display: block;
}

.logo img {
    height: 60px;
    width: auto;
}

.cta-button-header {
    background: var(--primary);
    color: var(--text-light);
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    border: 1px solid var(--primary);
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.cta-button-header:hover {
    background: var(--primary-dark, #2a2b80);
    transform: translateY(-2px);
}

.login-button-header {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: 0.7rem 1.5rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1.2;
    text-decoration: none;
    transition: var(--transition);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.login-button-header:hover {
    background: var(--primary);
    color: #fff;
    transform: translateY(-2px);
}

.header-left {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* Mobile nav trigger - hidden until the header can no longer fit one row */
.nav-toggle {
    display: none;
    background: none;
    border: 0;
    padding: 0.35rem;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text);
    cursor: pointer;
}

/* Navigation */
.nav>ul {
    display: flex;
    list-style: none;
    gap: 1.5rem;
}

.nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.9rem;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

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

.nav-dropdown {
    position: relative;
}

.nav-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0.5rem;
    padding-top: 0.75rem;
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 1001;
}

.nav-dropdown:hover .nav-dropdown-menu {
    display: flex;
}

.nav-dropdown-menu li {
    margin: 0;
}

.nav-dropdown-menu a {
    display: block;
    padding: 0.65rem 1rem;
    border-radius: 8px;
    color: var(--text);
    font-weight: 500;
    white-space: nowrap;
}

.nav-dropdown-menu a:hover {
    background: #F9F9FF;
    color: var(--primary);
}

/* Search and Browse */
.search-input-wrapper {
    position: relative;
    /* a width (not a flex-basis) so the 280px counts toward the row's size */
    width: 280px;
    flex-shrink: 1;
    min-width: 170px;
}

.search-input-wrapper input,
.header-search-input {
    padding: 0.7rem 1.5rem;
    border: 1px solid #E6E6E6;
    border-radius: 50px;
    outline: none;
    font-family: var(--font-main);
    width: 100%;
    color: var(--text);
    background: #fff;
}

.header-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 60, 155, 0.08);
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    width: min(360px, 80vw);
    background: #fff;
    border: 1px solid #eee;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
    z-index: 1100;
    max-height: 340px;
    overflow-y: auto;
    padding: 0.4rem;
}

.search-dropdown[hidden] {
    display: none;
}

.search-dropdown-item {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.75rem 0.9rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    transition: background 0.2s ease;
}

.search-dropdown-item:hover,
.search-dropdown-item.active {
    background: #F5F5FF;
}

.search-dropdown-item strong {
    font-size: 0.92rem;
    font-weight: 600;
}

.search-dropdown-item span {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.search-dropdown-empty {
    padding: 1rem 0.9rem;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.search-dropdown-footer {
    display: block;
    padding: 0.75rem 0.9rem;
    border-top: 1px solid #eee;
    margin-top: 0.25rem;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-decoration: none;
}

/* Hero */
.hero {
    display: flex;
    align-items: center;
    background: var(--brand-gradient);
    /* No 100vh: the image cluster plus padding already gives a sensible height,
       and 100vh just spread the content out with dead space on tall screens. */
    padding-top: 140px;
    padding-bottom: 70px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.hero-images-cluster {
    display: flex;
    /* flex-start, not the default stretch: the columns must size to their own
       content so translateY(-50%) measures the photo strip, not this 600px box. */
    align-items: flex-start;
    gap: 1.5rem;
    height: 540px;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
    z-index: 1;
}

@media (max-width: 992px) {
    .hero-images-cluster {
        display: none;
    }

    .hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-content {
        text-align: center;
        align-items: center;
    }
}

.mentor-column {
    --marquee-gap: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--marquee-gap);
    width: 200px;
    /* Promote to its own compositor layer so the loop never hitches on paint. */
    will-change: transform;
    backface-visibility: hidden;
}

.mentor-column.up {
    animation: scrollUp 36s linear infinite;
}

.mentor-column.down {
    animation: scrollDown 45s linear infinite;
}

.hero-images-cluster:hover .mentor-column {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .mentor-column {
        animation: none;
    }
}

/*
 * The column holds two identical sets of photos. A seamless loop must shift by
 * exactly one set's stride (set height + the gap that follows it). Plain -50%
 * is short by half a gap, because the duplicated list has 2n-1 gaps, not 2n --
 * that shortfall is the visible jump at the end of each cycle.
 */
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(-50% - (var(--marquee-gap) / 2)));
    }
}

@keyframes scrollDown {
    0% {
        transform: translateY(calc(-50% - (var(--marquee-gap) / 2)));
    }

    100% {
        transform: translateY(0);
    }
}

.mentor-photo {
    width: 100%;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    flex-shrink: 0;
}

.mentor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* These are wide shots dropped into a tall 200x250 frame -- a centred crop
       lands on torsos and cuts the heads off (worst on the couple and family
       photos), so anchor the crop to the top. */
    object-position: center top;
    /* transform only -- `all` re-evaluates every property each frame of the loop. */
    transition: transform 0.3s ease;
}

.mentor-photo:hover img {
    transform: scale(1.1);
}

.hero-content {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
}

.rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    background: #fff;
    padding: 0.5rem;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    flex-direction: row-reverse;
}

.stars {
    background: var(--primary);
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.2rem;
}

.rating-text {
    text-align: right;
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    align-items: flex-end;
}

.rating-text strong {
    color: var(--text);
}

.rating-text a {
    color: var(--text);
    text-decoration: underline;
}

.hero h1 {
    font-size: clamp(2.25rem, 3.4vw, 3rem);
    line-height: 1.15;
    margin-bottom: 1.1rem;
    font-weight: 800;
    color: var(--text-light);
}

.hero p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 1.75rem;
    max-width: 460px;
    margin-left: auto;
    line-height: 1.6;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

/* CTA inverted so it reads against the gradient */
.hero .btn.primary {
    background: #fff;
    color: var(--primary);
}

.hero .btn.primary:hover {
    background: rgba(255, 255, 255, 0.85);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition);
    font-size: 0.9rem;
}

.btn.primary {
    background: var(--primary);
    color: var(--text-light);
}

.btn.primary:hover {
    background: var(--primary-dark, #2a2b80);
}

/* Sections */
.section {
    padding: 5rem 0;
}

.section-header {
    margin-bottom: 3rem;
    text-align: center;
}

.section-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    /* Tight stack: the design sets each gap at roughly a third of the title
       height, so trim the line boxes as well as the margins. */
    line-height: 1.15;
    margin-bottom: 0.55rem;
    /* Section titles are brand blue in the design -- same token the split and
       grow headings already use. */
    color: var(--primary);
}

.section-header p {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.3;
}

.section-header .section-lead {
    color: var(--text);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.2rem;
}

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

/* Course Slider - Premium Design */
/* Section header eyebrow + trailing arrow */
.section-header.has-eyebrow {
    position: relative;
}

.section-eyebrow {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand-maroon);
    margin-bottom: 0.5rem;
}

.section-next {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0.5rem;
    cursor: pointer;
    font: inherit;
    color: var(--brand-maroon);
    font-size: 1.75rem;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.section-next[hidden] {
    display: none;
}

.section-next:hover {
    transform: translateY(-50%) translateX(6px);
}

@media (max-width: 768px) {
    .section-next {
        display: none;
    }
}

.course-slider-outer {
    width: 100%;
}

/* Native horizontal scroll: works with trackpad, touch drag and the arrow
   button, and needs no transform math to stay in sync with the card width. */
.course-slider {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* room for the cards' hover lift, which the scroll box would otherwise clip */
    padding: 8px 2px 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.course-slider::-webkit-scrollbar {
    display: none;
}

.course-slider .course-card-premium {
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) {
    .course-slider {
        scroll-behavior: auto;
    }
}

.course-slider .course-card-premium {
    flex: 0 0 calc(33.333% - 1rem);
    /* Show 3 popular courses */
}

@media (max-width: 1100px) {
    .course-slider .course-card-premium {
        flex: 0 0 calc(50% - 0.75rem);
    }
}

@media (max-width: 640px) {
    .course-slider .course-card-premium {
        flex: 0 0 85%;
    }
}

.courses-grid-5 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

/* Courses grouped by goal-based category */
.courses-groups {
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

.course-group-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--brand-maroon);
}

.course-group-title img {
    height: 26px;
    width: auto;
}

.course-group .courses-grid-5 {
    margin-top: 1rem;
}

.course-card-premium {
    background: #F0F0F0;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* height stays auto so the card stretches to its row/track: a fixed 100%
       cancels the default stretch in the slider and leaves cards ragged when
       one has a longer title, blurb or instructor role. */
    height: auto;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.course-card-premium:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
}

.course-img-wrapper {
    position: relative;
    height: 240px;
}

.course-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Category pill, top-right of the image */
.category-badge {
    position: absolute;
    top: 18px;
    right: 0;
    max-width: 70%;
    padding: 6px 14px;
    border-radius: 20px 0 0 20px;
    background: var(--primary);
    color: var(--text-light);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Maroon arch badge straddling the bottom-left corner of the image */
.course-icon-badge {
    position: absolute;
    left: 20px;
    bottom: -18px;
    width: 46px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--brand-maroon);
    border-radius: 23px 23px 4px 4px;
    color: var(--text-light);
    font-size: 1.25rem;
}

.course-icon-badge img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

.course-details {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.rating {
    align-self: flex-end;
    font-size: 0.8rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 0.75rem;
}

.rating i {
    color: #E8A93A;
}

.course-details h3 {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary);
    text-align: right;
    margin-bottom: 0.9rem;
    line-height: 1.3;
}

.course-details p {
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: right;
    line-height: 1.5;
    margin-bottom: 1.5rem;
}

/* Instructor block, right-aligned with the avatar on the outside */
.course-instructor {
    margin-top: auto;
}

.instructor-label {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 0.4rem;
}

.instructor-row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.85rem;
}

.instructor-text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* align-items only right-aligns each line box -- a role that wraps to two
       lines still needs text-align so the wrapped line stays flush right. */
    text-align: right;
    line-height: 1.3;
}

.instructor-text strong {
    font-size: 0.95rem;
    color: var(--primary);
}

.instructor-text span {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.instructor-avatar {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Specs strip: three equal cells with hairline dividers between them */
.course-specs {
    display: flex;
    list-style: none;
    border-top: 1px solid #E0E0E0;
    border-bottom: 1px solid #E0E0E0;
}

.course-specs li {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0.7rem 0.4rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    text-align: center;
}

.course-specs li+li {
    border-left: 1px solid #E0E0E0;
}

.course-buy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
}

.btn-view-course {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.85rem 1.75rem;
    border-radius: 50px;
    background: var(--primary);
    color: var(--text-light);
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background 0.3s ease;
}

.course-card-premium:hover .btn-view-course {
    background: var(--primary-dark, #2a2b80);
}

.course-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.course-price-label {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.course-price-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.old-price {
    font-size: 0.75rem;
    text-decoration: line-through;
    color: var(--text-muted);
}

.course-slider-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 3rem;
}

.course-dot {
    width: 6px;
    height: 6px;
    background: #ddd;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.course-dot.active {
    width: 25px;
    background: var(--primary);
    border-radius: 10px;
}

/* Features Grid - 5 columns */
.features-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
}

/* Features Grid - 4 columns (SVG icon set) */
.features-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.feature-item {
    text-align: center;
    padding: 1.5rem;
}

.features-grid-4 .icon-box {
    width: 80px;
    height: 80px;
    background: #E5DCD2;
}

.features-grid-4 .icon-box img {
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.features-grid-4 .feature-item h3 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.75rem;
}

.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(35, 166, 240, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
}

.feature-item h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.feature-item p {
    color: var(--text-muted);
    font-size: 0.85rem;
}

/* Journey Bar - 4 steps on maroon */
.journey-bar {
    background: var(--brand-maroon);
    padding: 3.5rem 0;
    color: var(--text-light);
}

.journey-grid {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 1.5rem;
    list-style: none;
}

.journey-step {
    flex: 1 1 0;
    max-width: 260px;
    text-align: center;
}

.journey-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--brand-gold);
    line-height: 1.2;
    margin-bottom: 0.35rem;
}

.journey-step h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-light);
    margin-bottom: 0.6rem;
    white-space: nowrap;
}

.journey-step p {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
}

.journey-arrow {
    flex: 0 0 auto;
    color: var(--brand-gold);
    font-size: 1.75rem;
    line-height: 1;
    /* Sit level with the step titles, not the numbers above them. */
    padding-top: 2.1rem;
}

@media (max-width: 992px) {
    .journey-grid {
        flex-wrap: wrap;
        gap: 2rem 1rem;
    }

    .journey-step {
        flex: 1 1 40%;
        max-width: none;
    }

    .journey-step h3 {
        white-space: normal;
    }

    .journey-arrow {
        display: none;
    }
}

@media (max-width: 576px) {
    .journey-step {
        flex: 1 1 100%;
    }
}

/* Where would you like to grow - arched cards */
.grow-section {
    background: var(--brand-sand);
    padding: 4rem 0 4.5rem;
}

.grow-title {
    text-align: center;
    color: var(--primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 3rem;
}

.grow-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
    justify-items: center;
}

.grow-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 240px;
    min-height: 330px;
    padding: 2.5rem 1.25rem 2rem;
    background: #FAF7F2;
    /* Arch: top radius = half the card width, bottom barely rounded. */
    border-radius: 120px 120px 12px 12px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grow-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

/* Fixed-height box: the source icons range from 71x42 to 52x61, so without it
   each card's label would sit at a different height. */
.grow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
}

.grow-icon img {
    max-width: 80px;
    max-height: 100%;
    width: auto;
    object-fit: contain;
}

.grow-card h3 {
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-muted);
    text-align: center;
}

.grow-arrow {
    font-size: 1.25rem;
    line-height: 1;
    color: var(--brand-maroon);
}

@media (max-width: 1200px) {
    .grow-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem 1.5rem;
    }
}

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

@media (max-width: 480px) {
    .grow-grid {
        grid-template-columns: 1fr;
    }
}

/* Split Section */
.split-section {
    padding: 6rem 0;
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.split-image img {
    width: 100%;
    border-radius: 20px;
    height: 400px;
    object-fit: cover;
}

.split-content h2 {
    font-size: 2.5rem;
    margin-bottom: 0.75rem;
    color: var(--primary);
    line-height: 1.2;
}

.split-content p {
    color: var(--text-muted);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* .section-lead is otherwise scoped to .section-header */
.split-content .section-lead {
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.split-image-plain {
    border-radius: 8px;
    overflow: hidden;
    height: 400px;
}

.split-image-plain img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* About Athar - full-bleed band on a flat --primary fill, which the artwork's
   own background matches, so image and band read as one surface. */
.about-band {
    background: var(--primary);
    color: var(--text-light);
}

.about-band-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.about-band-media {
    position: relative;
}

/* Fills the column edge to edge so the artwork is exactly as tall as the text
   beside it -- no band-colour gap. Any overflow is trimmed from the left and
   right, where the artwork is plain arches; centring keeps the Arabic lockup,
   which sits mid-frame, intact at every width. */
.about-band-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.about-band-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.25rem;
    padding: 4rem 4rem 4rem 3.5rem;
    max-width: 640px;
}

.about-band-eyebrow {
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-light);
}

.about-band-content h2 {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--text-light);
    margin: 0;
}

.about-band-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

.about-band-btn {
    display: inline-block;
    margin-top: 0.75rem;
    padding: 0.85rem 2.25rem;
    border-radius: 50px;
    background: #fff;
    color: var(--primary);
    font-size: 1rem;
    text-decoration: none;
    transition: var(--transition);
}

.about-band-btn:hover {
    background: rgba(255, 255, 255, 0.85);
}

@media (max-width: 900px) {
    .about-band-grid {
        grid-template-columns: 1fr;
    }

    /* Stacked, the column has no row beside it to take its height from, so
       the absolutely placed artwork would collapse to nothing. */
    .about-band-media {
        aspect-ratio: 1200 / 650;
    }

    .about-band-content {
        padding: 2.5rem 1.5rem;
        max-width: none;
    }
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 2.2rem;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 2;
}

.play-btn::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #fff;
    animation: pulsate 2s infinite;
}

.play-btn:hover {
    transform: translate(-50%, -50%) scale(1.15);
    background: var(--primary);
    color: #fff;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

/* Testimonials */
.testimonials-section {
    background: var(--light-bg);
    scroll-margin-top: 100px;
    padding: 3.5rem 0;
}

.testimonials-slider-container {
    overflow: hidden;
    width: 100%;
    position: relative;
}

.testimonials-grid {
    display: flex;
    /* one slide per view, so no gap to compensate for in the transform */
    gap: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Testimonial slide: photo left, quote on a sand panel right */
.testimonial-slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: minmax(200px, 33%) 1fr;
    background: var(--brand-sand);
    border-radius: 20px;
    overflow: hidden;
    min-height: 260px;
}

/* The photo must not contribute height. Left in flow, a portrait image with
   height:100% falls back to `auto` (no definite row height to resolve against)
   and renders at its full aspect ratio -- an 800x1199 photo in a 460px column
   is 689px tall, which then dictates the whole slide. Taking it out of flow
   lets the quote set the height and the image simply covers it. */
.testimonial-photo {
    position: relative;
    overflow: hidden;
}

.testimonial-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias the crop upward: these are tall portraits, and a short card cropped
       from the centre lands on the torso and cuts the head off. */
    object-position: center 18%;
    display: block;
}

.testimonial-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.25rem;
    padding: 2rem 2.75rem 2.75rem;
    margin: 0;
}

.testimonial-body p {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--primary);
}

.testimonial-attribution {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 0.1rem;
    color: var(--primary);
    font-size: 0.88rem;
}

.testimonial-name {
    font-size: 1.05rem;
    margin-bottom: 0.1rem;
}

/* Dots sit inside the panel, under the quote */
.testimonials-slider-container {
    position: relative;
}

.testimonials-slider-container .testimonials-pagination {
    position: absolute;
    left: 66%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    margin-top: 0;
}

@media (max-width: 900px) {
    .testimonial-slide {
        grid-template-columns: 1fr;
    }

    .testimonial-photo {
        height: 260px;
    }

    .testimonial-body {
        padding: 2.5rem 1.75rem 4rem;
    }

    .testimonial-body p {
        font-size: 1.15rem;
    }

    .testimonials-slider-container .testimonials-pagination {
        left: 50%;
    }
}

.testimonial-card {
    flex: 0 0 calc(50% - 1rem);
    /* Show 2 cards with gap */
    background: #fff;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    position: relative;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.testimonial-card p {
    font-size: 1.05rem;
    color: var(--text);
    line-height: 1.6;
    margin-bottom: 2rem;
    font-style: normal;
}

.testimonials-pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 3rem;
}

.dot {
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.dot.active {
    width: 25px;
    border-radius: 10px;
    background: var(--primary);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-info img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.user-info h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.user-info span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Mentors Grid - 4 columns */
/* Our Experts - photo left, details right */
.experts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.expert-card {
    display: grid;
    grid-template-columns: 45% 1fr;
    background: #fff;
    border: 1px solid #EDE8E0;
    overflow: hidden;
    min-height: 300px;
}

/* Same reason as .testimonial-photo: keep the image out of flow so the card's
   text sets the height. Today's photos are square so it happens to look right;
   a portrait swap would otherwise blow the card up. */
.expert-photo {
    position: relative;
    overflow: hidden;
}

.expert-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.expert-info {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.25rem;
}

.expert-info h3 {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.expert-label {
    font-size: 0.8rem;
    color: var(--brand-maroon);
    margin-bottom: 0.4rem;
}

.expert-info p {
    font-size: 0.85rem;
    line-height: 1.45;
    color: var(--text-muted);
    margin-bottom: 1.1rem;
}

.expert-rule {
    display: block;
    width: 36px;
    height: 2px;
    background: var(--brand-gold);
}

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

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

/* Events Grid - 4 columns */
.events-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

.event-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.03);
    transition: var(--transition);
    border: 1px solid #eee;
}

.event-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

.event-image-wrapper {
    position: relative;
    height: 200px;
}

.event-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.event-link {
    color: var(--primary);
    font-weight: 700;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.event-link i {
    transition: transform 0.3s;
}

.event-link:hover i {
    transform: translateX(5px);
}

/* Events card - photo left, three stacked rows right. Used on events.html
   and the homepage events section. */
.events-section .events-grid-4 {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.events-section .event-card {
    display: grid;
    grid-template-columns: minmax(120px, 36%) 1fr;
    background: #F4F4F4;
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    overflow: hidden;
}

.events-section .event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

.events-section .event-image-wrapper {
    height: 100%;
    min-height: 220px;
}

.event-body {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.event-row {
    padding: 0.85rem 1.2rem;
}

.event-row-top,
.event-row-title {
    border-bottom: 1px solid #E4E4E4;
}

.event-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.events-section .event-date {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    color: var(--brand-maroon);
    font-size: 1rem;
    font-weight: 700;
}

.events-section .event-date i {
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 400;
}

.event-year {
    font-size: 0.8rem;
}

.event-time {
    font-size: 0.9rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.event-time span {
    font-size: 0.7rem;
}

.event-row-title {
    display: flex;
    align-items: center;
    min-height: 92px;
}

.events-section .event-row-title h3 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary);
    height: auto;
    margin: 0;
}

.event-row-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.event-formats {
    display: flex;
    gap: 0.85rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.event-formats span {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.event-formats i {
    color: var(--primary);
    font-size: 0.95rem;
}

.events-section .event-link {
    font-size: 1rem;
    white-space: nowrap;
}

.events-empty {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 0;
}

.events-empty[hidden] {
    display: none;
}

@media (max-width: 1200px) {
    .events-section .events-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .events-section .events-grid-4 {
        grid-template-columns: 1fr;
    }

    /* Too narrow to sit side by side -- stack the image above the details. */
    .events-section .event-card {
        grid-template-columns: 1fr;
    }

    .events-section .event-image-wrapper {
        min-height: 180px;
    }
}

/* CTA Section */
.cta-section {
    padding: 5rem 0;
}

.cta-box {
    background: var(--primary);
    border-radius: 32px;
    padding: 4rem 2rem;
    text-align: center;
    color: var(--text-light);
}

.cta-box h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-light);
}

.cta-box p {
    max-width: 600px;
    margin: 0 auto 2.5rem;
    opacity: 0.9;
    font-size: 1.1rem;
}

/* Full-bleed CTA band (homepage). The rounded .cta-box above is still used by
   the 13 sub-pages, so this is a separate component rather than an override. */
.cta-band {
    background: var(--primary);
    padding: 4rem 0;
    color: var(--text-light);
}

.cta-band-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.cta-band h2 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-light);
    margin: 0;
}

.cta-band-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.cta-band-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    text-decoration: none;
    white-space: nowrap;
    transition: var(--transition);
}

.cta-band-btn.solid {
    background: #fff;
    color: var(--primary);
    border: 1px solid #fff;
}

.cta-band-btn.solid:hover {
    background: rgba(255, 255, 255, 0.85);
}

.cta-band-btn.outline {
    background: transparent;
    color: var(--text-light);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.cta-band-btn.outline:hover {
    background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 900px) {
    .cta-band-inner {
        flex-direction: column;
        text-align: center;
    }

    .cta-band h2 {
        font-size: 1.9rem;
    }

    .cta-band-actions {
        justify-content: center;
    }
}

/* Footer - Logo on RIGHT */
.footer {
    background: var(--primary);
    color: var(--text-light);
    padding: 0 0 1rem;
}

/* The CTA band above the footer is the same purple, so they merge into one
   block -- separate them with the same hairline the footer uses internally. */
.footer>.container {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    padding-top: 3rem;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-bottom: 2rem;
}

.footer-col h4 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.footer-col ul {
    list-style: none;
}

.footer-col ul li {
    margin-bottom: 0.5rem;
}

.footer-col a {
    color: var(--text-light);
    text-decoration: none;
    opacity: 0.8;
    transition: var(--transition);
}

.footer-col a:hover {
    opacity: 1;
}

.footer-logo {
    text-align: right;
}

.footer-logo img {
    height: 85px;
    width: auto;
    margin-bottom: 1rem;
    filter: brightness(0) invert(1);
}

.footer-logo p {
    opacity: 0.8;
    font-size: 0.9rem;
}

.footer-social {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1rem;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-light);
    font-size: 1.1rem;
    opacity: 0.9;
    transition: var(--transition);
}

.footer-social a:hover {
    background: rgba(255, 255, 255, 0.2);
    opacity: 1;
}

.footer-bottom {
    text-align: center;
    padding-top: 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
    opacity: 0.7;
    font-size: 0.9rem;
}

/* Responsive */
@media (max-width: 1200px) {

    .courses-grid-5,
    .features-grid-5 {
        grid-template-columns: repeat(3, 1fr);
    }

    .features-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .events-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {

    .hero-grid,
    .split-grid {
        grid-template-columns: 1fr;
    }

    .courses-grid-5,
    .features-grid-5,
    .features-grid-4,
    .events-grid-4 {
        grid-template-columns: 1fr;
    }

    .header-container {
        flex-wrap: wrap;
    }

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

    .hero-buttons {
        justify-content: center;
    }

    .contact-container {
        grid-template-columns: 1fr;
    }
}

/* Course Details */
.course-details-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 3rem;
    padding: 5rem 0;
}

.course-main-content h2 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--text);
}

.course-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.course-meta-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.check-list {
    list-style: none;
    margin-bottom: 2rem;
}

.check-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
    color: var(--text-muted);
}

.check-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--primary);
    font-weight: bold;
}

.curriculum-item {
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.curriculum-header {
    background: #f9f9f9;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
}

.course-sidebar-card {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: sticky;
    top: 100px;
}

.sidebar-img {
    height: 250px;
    width: 100%;
    object-fit: cover;
}

.sidebar-content {
    padding: 2rem;
}

.price-tag {
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.old-price {
    text-decoration: line-through;
    color: var(--text-muted);
    font-size: 1rem;
    margin-left: 0.5rem;
}

@media (max-width: 900px) {
    .course-details-container {
        grid-template-columns: 1fr;
    }

    .course-sidebar-card {
        position: static;
    }
}

/* Session Booking */
.mentor-select-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 10px;
    margin-bottom: 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.mentor-select-card:hover,
.mentor-select-card.selected {
    border-color: var(--primary);
    background: rgba(59, 60, 155, 0.05);
}

.mentor-select-card img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
}

.mentor-select-card h4 {
    font-size: 1rem;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.mentor-select-card span {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* About Stats - Clean */
.page-header {
    position: relative;
    background: var(--banner-gradient);
    /* top clears the fixed header; bottom clears the watermark below */
    padding: 140px 0 105px;
    text-align: center;
    color: var(--text-light);
    overflow: hidden;
}

/* Arch watermark, centred above the bottom edge. Decorative only, so it lives
   in CSS rather than an <img> repeated across all 15 sub-pages. */
.page-header::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    width: 118px;
    height: 85px;
    background: url("../images/subbanner_logo.png") no-repeat center center;
    background-size: contain;
    pointer-events: none;
}

.page-header .container {
    position: relative;
    z-index: 1;
}

.page-header h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.breadcrumb {
    font-size: 0.9rem;
    opacity: 0.8;
}

.breadcrumb a {
    color: var(--text-light);
    text-decoration: none;
}

.breadcrumb span {
    margin: 0 0.5rem;
}

/* Filters */
.filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.filter-btn {
    background: #f3f4f6;
    border: none;
    padding: 0.8rem 2.25rem;
    border-radius: 50px;
    cursor: pointer;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
    transition: var(--transition);
}

.filter-btn.active,
.filter-btn:hover {
    background: var(--primary);
    color: var(--text-light);
}

/* Courses listing filters */
.courses-listing-section {
    padding-top: 3rem;
}

.courses-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
    align-items: start;
}

.courses-filter-panel {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 1.5rem;
    position: sticky;
    top: 110px;
}

.courses-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #eee;
}

.courses-filter-header h3 {
    font-size: 1.05rem;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: var(--text);
}

.filter-clear-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    font-family: var(--font-main);
}

.filter-group {
    margin-bottom: 1.75rem;
}

.filter-group:last-child {
    margin-bottom: 0;
}

.filter-group h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.filter-check {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin-bottom: 0.7rem;
    cursor: pointer;
    color: var(--text);
    font-size: 0.92rem;
    line-height: 1.35;
}

.filter-check input {
    margin-top: 0.2rem;
    accent-color: var(--primary);
}

.filter-group-categories:not(.expanded) .filter-check-more {
    display: none;
}

.filter-show-more-btn[hidden] {
    display: none;
}

.filter-show-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.35rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--primary);
    font-family: var(--font-main);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}

.filter-show-more-btn i {
    font-size: 1.1rem;
    transition: transform 0.2s ease;
}

.filter-group-categories.expanded .filter-show-more-btn i {
    transform: rotate(180deg);
}

.courses-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.filter-toggle-btn {
    display: none;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-family: var(--font-main);
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.courses-result-count {
    color: var(--text-muted);
    font-weight: 500;
    margin: 0;
}

.courses-sort {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-left: auto;
}

.courses-sort label {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.courses-sort select {
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 0.65rem 1rem;
    font-family: var(--font-main);
    color: var(--text);
    background: #fff;
    min-width: 180px;
}

.courses-listing-section .courses-grid-5 {
    grid-template-columns: repeat(3, 1fr);
}

.courses-listing-section .category-badge {
    max-width: 70%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.courses-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-muted);
    display: none;
}

.courses-empty.visible {
    display: block;
}

@media (max-width: 1100px) {
    .courses-listing-section .courses-grid-5 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 900px) {
    .courses-layout {
        grid-template-columns: 1fr;
    }

    .filter-toggle-btn {
        display: inline-flex;
    }

    .courses-filter-panel {
        display: none;
        position: static;
    }

    .courses-filter-panel.open {
        display: block;
    }
}

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

    .courses-sort {
        width: 100%;
        margin-left: 0;
    }

    .courses-sort select {
        flex: 1;
    }
}

/* Contact Page */
.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 4rem;
    padding: 5rem 0;
}

.contact-info-item {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
}

.contact-icon {
    width: 50px;
    height: 50px;
    background: rgba(35, 166, 240, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.contact-text h3 {
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
    color: var(--text);
}

.contact-text p {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.contact-form {
    background: var(--light-bg);
    padding: 3rem;
    border-radius: 20px;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-control {
    width: 100%;
    padding: 1rem;
    border: 1px solid #eee;
    border-radius: 10px;
    font-family: var(--font-main);
    font-size: 0.9rem;
    outline: none;
    transition: var(--transition);
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(59, 60, 155, 0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

.map-section img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    margin-bottom: 5rem;
}

/* Login Page */
/* Auth card (login / signup) -- centred stack: logo, social buttons, OR rule,
   Create Account | Login tabs, then the matching form. */
.auth-section {
    /* The site header is position: fixed -- other pages clear it with the
       140px .page-header, which this one doesn't have. */
    padding: 170px 0 5rem;
}

.auth-card {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.auth-social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 1rem 1.5rem;
    margin-bottom: 1rem;
    border: 1px solid #8A8A8A;
    border-radius: 999px;
    background: #fff;
    font-family: var(--font-main);
    font-size: 1.05rem;
    color: var(--text);
    cursor: pointer;
    transition: var(--transition);
}

.auth-social-btn:hover {
    border-color: var(--primary);
    background: #FAFAFC;
}

.auth-social-icon {
    width: 1.25em;
    height: 1.25em;
    font-size: 1.25em;
    line-height: 1;
}

.auth-social-icon.is-facebook {
    color: #1877F2;
}

.auth-social-icon.is-apple {
    color: #000;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0 1.5rem;
    color: var(--text-muted);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #B9B9B9;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 2px solid #B9B9B9;
}

.auth-tab {
    padding: 0.85rem 0;
    text-align: center;
    font-size: 1.05rem;
    color: var(--text-muted);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: var(--transition);
}

.auth-tab:hover {
    color: var(--text);
}

.auth-tab.active {
    color: var(--text);
    border-bottom-color: var(--primary);
}

.auth-form {
    margin-top: 2rem;
}

.auth-form .form-group {
    margin-bottom: 1rem;
}

.auth-form .form-control {
    padding: 1rem 1.5rem;
    border: 1px solid #8A8A8A;
    border-radius: 999px;
    font-size: 1rem;
}

.auth-form .password-field .form-control {
    padding-right: 3.25rem;
}

.auth-form .toggle-password {
    border: none;
    background: none;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1;
}

/* Round checkbox to match the design's outlined circle. */
.auth-check {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    cursor: pointer;
}

.auth-check input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin: 0;
    border: 1px solid #8A8A8A;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--transition);
}

.auth-check input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: inset 0 0 0 4px #fff;
}

.auth-check-block {
    margin: 1.5rem 0 0.5rem;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 0.5rem;
    font-size: 0.95rem;
}

.auth-forgot {
    color: var(--primary);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
}

.auth-legal {
    margin-top: 1.5rem;
    text-align: center;
    color: var(--text-muted);
    line-height: 1.6;
}

.auth-legal a {
    color: var(--primary);
    text-decoration: none;
}

.auth-legal a:hover {
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    margin-top: 1.5rem;
    padding: 1rem;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: var(--text-light);
    font-family: var(--font-main);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
}

.auth-submit:hover {
    background: var(--brand-blue);
}

@media (max-width: 520px) {
    .auth-section {
        padding-top: 130px;
    }

    .auth-social-btn,
    .auth-tab {
        font-size: 0.95rem;
    }
}

.login-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 0;
}

.login-box {
    width: 100%;
    max-width: 500px;
    padding: 2rem;
    text-align: center;
}

.login-box h2 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.login-box p {
    color: var(--text-muted);
    margin-bottom: 2rem;
}

.social-login {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #eee;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-top: 1rem;
    font-weight: 500;
    transition: var(--transition);
}

.social-login:hover {
    background: #f9f9f9;
}

.password-field {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: var(--text-muted);
}

/* About Stats - Clean */
.about-intro-section {
    padding-top: 4rem;
}

.about-intro {
    max-width: 960px;
    margin: 0 auto;
}

.about-label {
    color: var(--primary);
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 1rem;
}

.about-intro h2 {
    font-size: 2.75rem;
    line-height: 1.25;
    color: var(--text);
    margin-bottom: 1.5rem;
    font-weight: 800;
}

.about-intro p {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
    max-width: 820px;
}

.about-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    justify-content: space-between;
    flex-wrap: wrap;
}

.about-stat-item h3 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
}

.about-stat-item p {
    font-size: 0.9rem;
    color: var(--text-muted);
}

/* Scroll Reveal Animations */
.reveal {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transition-property: opacity, transform;
    visibility: hidden;
}

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

/* Video Modal Styles */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.video-modal.active {
    display: flex;
    opacity: 1;
}

.video-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(5px);
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    background: #000;
    border-radius: 12px;
    overflow: hidden;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1;
}

.video-modal.active .video-modal-content {
    transform: scale(1);
}

.modal-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    transition: var(--transition);
}

.modal-close:hover {
    transform: rotate(90deg);
    color: var(--secondary);
}

.video-container {
    width: 100%;
    height: 100%;
}

.video-container iframe {
    width: 100%;
    height: 100%;
}

@media (max-width: 768px) {
    .modal-close {
        top: -35px;
        right: 10px;
    }
}

/* Legal / Terms pages */
.legal-section {
    padding-top: 3rem;
    padding-bottom: 5rem;
}

.legal-content {
    max-width: 900px;
    margin: 0 auto;
    color: var(--text);
}

.legal-updated {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
}

.legal-content>p {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
    line-height: 1.8;
}

.legal-content h2 {
    font-size: 1.35rem;
    color: var(--text);
    margin: 2.25rem 0 0.85rem;
}

.legal-content ul,
.legal-content ol {
    margin: 0 0 1.25rem 1.25rem;
    color: var(--text-muted);
    line-height: 1.8;
}

/* Numbered clauses sit under a numbered heading, so keep the marker close to
   the text rather than hanging far out in the margin. */
.legal-content ol {
    padding-left: 0.35rem;
}

.legal-content li {
    margin-bottom: 0.55rem;
}

.legal-content a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.legal-content a:hover {
    color: var(--secondary);
}

/* Join as a Coach */
.coach-intro-section {
    padding-top: 3rem;
}

.coach-intro-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 3rem;
    align-items: start;
}

.coach-intro-grid h2 {
    font-size: 2.2rem;
    margin: 0.75rem 0 1rem;
    line-height: 1.25;
}

.coach-intro-grid>div>p {
    color: var(--text-muted);
    margin-bottom: 1.75rem;
    max-width: 540px;
}

.coach-benefit-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.coach-benefit-card {
    background: var(--light-bg);
    border-radius: 16px;
    padding: 1.35rem;
}

.coach-benefit-card i {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
    display: inline-block;
}

.coach-benefit-card h3 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.coach-benefit-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.coach-form-section {
    background: var(--light-bg);
}

.coach-form-wrap {
    max-width: 960px;
    margin: 0 auto;
    background: #fff;
    border-radius: 20px;
    padding: 2.5rem;
    border: 1px solid #eee;
}

.coach-form-header {
    margin-bottom: 2rem;
}

.coach-form-header h2 {
    font-size: 1.75rem;
    margin-bottom: 0.5rem;
}

.coach-form-header p {
    color: var(--text-muted);
}

.coach-form .form-group label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.file-hint {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.82rem;
}

.form-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
}

.file-upload-box {
    position: relative;
    border: 1.5px dashed #d7d7e5;
    border-radius: 14px;
    background: #fafafa;
    min-height: 150px;
    overflow: hidden;
    transition: var(--transition);
}

.file-upload-box:hover,
.file-upload-box:focus-within {
    border-color: var(--primary);
    background: #f7f7ff;
}

.file-upload-box input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.file-upload-content {
    padding: 1.5rem 1rem;
    text-align: center;
    pointer-events: none;
}

.file-upload-content i {
    font-size: 1.75rem;
    color: var(--primary);
    display: block;
    margin-bottom: 0.5rem;
}

.file-upload-content p {
    margin: 0 0 0.35rem;
    color: var(--text);
    font-size: 0.92rem;
}

.file-upload-content span {
    display: block;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.file-upload-content .file-name {
    margin-top: 0.75rem;
    color: var(--primary);
    font-weight: 600;
}

.coach-agree {
    margin-top: 0.5rem;
}

.coach-agree a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.coach-submit-btn {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 0.5rem;
}

.coach-form-note {
    margin-top: 1rem;
    color: #1f7a4d;
    background: #eaf8f0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    font-weight: 500;
}

.coach-faq-section {
    padding-top: 2rem;
}

.coach-faq-list {
    max-width: 860px;
    margin: 0 auto;
}

.coach-faq-item {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 0.85rem;
    padding: 0.25rem 1.1rem;
}

.coach-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    padding: 1rem 0;
    list-style: none;
}

.coach-faq-item summary::-webkit-details-marker {
    display: none;
}

.coach-faq-item p {
    color: var(--text-muted);
    padding-bottom: 1rem;
    margin: 0;
}

@media (max-width: 900px) {

    .coach-intro-grid,
    .form-row-2,
    .coach-benefit-cards {
        grid-template-columns: 1fr;
    }

    .coach-form-wrap {
        padding: 1.5rem;
    }
}

/* Partners */
.partners-section {
    padding: 2.5rem 0;
    background: #fff;
    border-bottom: 1px solid #eee;
}

.partners-grid {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.partners-grid img {
    height: 42px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    opacity: 0.75;
    filter: grayscale(1);
    transition: var(--transition);
}

.partners-grid img:hover {
    opacity: 1;
    filter: grayscale(0);
}

@media (max-width: 768px) {
    .partners-grid {
        justify-content: center;
        gap: 1.75rem;
    }

    .partners-grid img {
        height: 36px;
    }
}

/* Blog */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.blog-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.blog-card-featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
}

.blog-card-image {
    height: 220px;
    overflow: hidden;
}

.blog-card-featured .blog-card-image {
    height: 100%;
    min-height: 280px;
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-card-body {
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    flex: 1;
}

.blog-tag {
    display: inline-flex;
    width: fit-content;
    background: var(--primary-tint, #F0F0FF);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
}

.blog-card-body h3 {
    font-size: 1.15rem;
    line-height: 1.35;
}

.blog-card-featured .blog-card-body h3 {
    font-size: 1.6rem;
}

.blog-card-body p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.blog-meta {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.blog-meta a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

/* Careers */
.careers-intro {
    max-width: 760px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.careers-intro h2 {
    font-size: 2rem;
    margin: 0.75rem 0 1rem;
}

.careers-intro p {
    color: var(--text-muted);
}

.careers-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.career-value-card {
    background: var(--light-bg);
    border-radius: 16px;
    padding: 1.5rem;
}

.career-value-card i {
    font-size: 1.5rem;
    color: var(--primary);
    margin-bottom: 0.75rem;
    display: inline-block;
}

.career-value-card h3 {
    margin-bottom: 0.45rem;
}

.career-value-card p {
    color: var(--text-muted);
    margin: 0;
    font-size: 0.95rem;
}

.careers-jobs-section {
    background: var(--light-bg);
}

.jobs-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 960px;
    margin: 0 auto;
}

.job-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 1.4rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.job-card-main h3 {
    margin-bottom: 0.45rem;
}

.job-card-main p {
    color: var(--text-muted);
    margin-bottom: 0.85rem;
}

.job-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.job-tags span {
    background: var(--primary-tint, #F0F0FF);
    color: var(--primary);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
}

.job-card .btn {
    white-space: nowrap;
    text-decoration: none;
}

.careers-note {
    max-width: 960px;
    margin: 2rem auto 0;
    text-align: center;
    color: var(--text-muted);
}

.careers-note a {
    color: var(--primary);
    font-weight: 600;
    text-decoration: none;
}

@media (max-width: 900px) {

    .blog-grid,
    .blog-card-featured,
    .careers-values {
        grid-template-columns: 1fr;
    }

    .blog-card-featured {
        grid-column: auto;
    }

    .job-card {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Buy Now / Checkout */
.buy-now-section {
    padding-top: 3rem;
}

.buy-now-layout {
    display: grid;
    grid-template-columns: 1.4fr 0.9fr;
    gap: 2rem;
    align-items: start;
}

.buy-now-form-card,
.buy-now-summary-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 2rem;
}

.buy-now-form-card h2 {
    margin-bottom: 0.4rem;
}

.buy-now-subtitle {
    color: var(--text-muted);
    margin-bottom: 1.75rem;
}

.buy-now-section-title {
    font-size: 1.1rem;
    margin: 0.5rem 0 1rem;
}

.payment-methods {
    display: grid;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.payment-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 0.9rem 1rem;
    cursor: pointer;
    transition: var(--transition);
}

.payment-option:hover,
.payment-option:has(input:checked) {
    border-color: var(--primary);
    background: #F7F7FF;
}

.payment-option input {
    accent-color: var(--primary);
}

.payment-option span {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 600;
}

.buy-submit-btn {
    width: 100%;
    border: none;
    cursor: pointer;
    margin-top: 0.5rem;
}

.buy-success-note {
    margin-top: 1rem;
    color: #1f7a4d;
    background: #eaf8f0;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    font-weight: 500;
}

.buy-now-summary-card h3 {
    margin-bottom: 1.25rem;
}

.buy-course-preview {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid #eee;
}

.buy-course-preview img {
    width: 84px;
    height: 84px;
    object-fit: cover;
    border-radius: 12px;
}

.buy-course-preview h4 {
    font-size: 1rem;
    margin-bottom: 0.35rem;
    line-height: 1.35;
}

.buy-course-preview p {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
}

.buy-summary-list {
    list-style: none;
    margin-bottom: 1.5rem;
}

.buy-summary-list li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
    color: var(--text-muted);
}

.buy-summary-list strong {
    color: var(--text);
}

.buy-summary-total {
    padding-top: 0.85rem;
    border-top: 1px solid #eee;
    font-size: 1.05rem;
}

.buy-summary-total span,
.buy-summary-total strong {
    color: var(--text);
    font-weight: 700;
}

.buy-back-link {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

@media (max-width: 900px) {
    .buy-now-layout {
        grid-template-columns: 1fr;
    }
}
/* ---------------------------------------------------------------------------
   Mobile header (<=1240px)
   The header packs login buttons + 5 nav items + a search + logo onto one
   row. Below 1240px that cannot fit, so everything except the logo collapses
   behind the toggle. Dropdowns render inline here -- :hover never fires on touch.
   --------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    .nav-toggle {
        display: inline-flex;
    }

    .header-container {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }

    .header-right {
        flex-wrap: wrap;
        justify-content: flex-end;
        row-gap: 0.75rem;
        flex: 1;
    }

    .header-right .logo {
        order: 1;
        margin-left: auto;
    }

    .header-left,
    .header .nav,
    .header .search-input-wrapper {
        display: none;
        order: 2;
        flex: 1 0 100%;
    }

    .header.nav-open .header-left,
    .header.nav-open .nav,
    .header.nav-open .search-input-wrapper {
        display: flex;
    }

    .header.nav-open .header-left {
        justify-content: center;
    }

    .header.nav-open .nav>ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .header.nav-open .nav>ul>li {
        border-top: 1px solid #EEE;
    }

    .header.nav-open .nav>ul>li>a {
        padding: 0.75rem 0;
    }

    /* Submenus inline: a hover-revealed flyout is unreachable on touch */
    .nav-dropdown-menu {
        position: static;
        display: flex;
        min-width: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        padding: 0 0 0.5rem 1rem;
    }

    .nav-dropdown-menu a {
        padding: 0.4rem 0;
    }

    .header-search-input {
        width: 100%;
    }
}

/* Between the one-row desktop header and the collapsed one, tighten the gaps
   so the five nav items, buttons and search still share a row. */
@media (min-width: 1241px) and (max-width: 1360px) {
    .header-right {
        gap: 1rem;
    }

    .nav>ul {
        gap: 1.1rem;
    }

    .header-left {
        gap: 0.6rem;
    }

    .cta-button-header,
    .login-button-header {
        padding: 0.65rem 1.1rem;
    }
}

/* ---------------------------------------------------------------------------
   Small-screen overflow guards
   --------------------------------------------------------------------------- */
.header-search-input {
    max-width: 100%;
}

@media (max-width: 480px) {

    /* Button + price are both nowrap; side by side they exceed a ~296px card */
    .course-buy {
        flex-wrap: wrap;
        gap: 0.75rem;
    }

    .btn-view-course {
        flex: 1 0 100%;
        justify-content: center;
    }

    .course-price {
        align-items: flex-start;
    }

    .course-specs li {
        font-size: 0.68rem;
        padding: 0.6rem 0.25rem;
    }

    .courses-sort select {
        min-width: 0;
    }

    .container {
        padding: 0 1.25rem;
    }

    .journey-step h3,
    .course-details h3 {
        font-size: 1.15rem;
    }

    .cta-band-btn,
    .about-band-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

/* Footer had a hard repeat(4, 1fr) with no breakpoint -- four ~74px columns on
   a phone. Step it down instead. */
@media (max-width: 900px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem 1.5rem;
    }
}

@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* 45% of a ~290px card leaves the details column too narrow to read */
    .expert-card {
        grid-template-columns: 1fr;
    }

    .expert-photo {
        min-height: 240px;
    }
}

/* Formats + "Register Now" are both nowrap; on the narrowest phones they
   exceed the stacked card, so let the row break. */
@media (max-width: 400px) {
    .event-row-foot {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

/* ---------------------------------------------------------------------------
   Language toggle (injected into .header-left by js/i18n.js)
   --------------------------------------------------------------------------- */
.lang-toggle {
    background: none;
    border: 0;
    padding: 0.5rem 0.25rem;
    color: var(--primary);
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.lang-toggle:lang(ar) {
    font-family: var(--font-arabic);
}

.lang-toggle:hover {
    color: var(--brand-maroon);
}

/* ---------------------------------------------------------------------------
   Arabic (html[lang="ar"], set by js/i18n.js)
   The page composition is already right-anchored, so the layout is kept and
   only text runs right-to-left: text elements get direction: rtl, and
   anything authored left-aligned for English is moved to the right.
   --------------------------------------------------------------------------- */

/* Hidden until i18n.js has swapped in the Arabic copy -- no English flash. */
html.i18n-pending body {
    visibility: hidden;
}

html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button {
    font-family: var(--font-arabic);
}

/* Letter-spacing breaks Arabic letter joining; uppercase is meaningless. */
html[lang="ar"] * {
    letter-spacing: 0 !important;
}

html[lang="ar"] :is(h1, h2, h3, h4, h5, h6) {
    line-height: 1.45;
}

html[lang="ar"] :is(p, h1, h2, h3, h4, h5, h6, li, label, blockquote, td, th,
    dt, dd, figcaption, legend, a, span, strong, button, select, textarea, input) {
    direction: rtl;
}

/* Typed values that are inherently LTR stay LTR, aligned with the Arabic. */
html[lang="ar"] :is(input[type="email"], input[type="tel"], input[type="url"],
    input[name="cardNumber"], #cardNumber, #cardExpiry, #cardCvv) {
    direction: ltr;
    text-align: right;
}

/* Blocks authored left-aligned for English read from the right in Arabic. */
html[lang="ar"] :is(.testimonial-card, .legal-content, .auth-form, .form-group,
    .contact-info, .blog-card-body, .careers-note, .faq-item, .footer-col) {
    text-align: right;
}

/* Hero copy: keep the block anchored right; the long line wraps from the right. */
html[lang="ar"] .hero p {
    margin-left: auto;
    margin-right: 0;
}

/* Lists and check-marks hang on the right. */
html[lang="ar"] :is(ul, ol) {
    padding-right: 0;
}

html[lang="ar"] .legal-content :is(ul, ol) {
    padding-left: 0;
    padding-right: 1.25rem;
}

html[lang="ar"] .check-list li {
    padding-left: 0;
    padding-right: 2rem;
}

html[lang="ar"] .check-list li::before {
    left: auto;
    right: 0;
}

html[lang="ar"] .old-price {
    margin-left: 0;
    margin-right: 0.5rem;
}

/* Password eye sits on the input's left, where the text ends. */
html[lang="ar"] .toggle-password {
    right: auto;
    left: 1rem;
}

html[lang="ar"] .auth-form .password-field .form-control {
    padding-right: 1.25rem;
    padding-left: 3.25rem;
}

/* Page content mirrors: rows, card grids, tags and meta lines all start on
   the right, so the first item is read first. */
html[lang="ar"] main {
    direction: rtl;
}

/* ...except components the design already anchors to the right, which would
   otherwise flip to the left, and the sliders, whose JS scrolls by left offset.
   Their text still runs RTL through the text-element rule above. */
html[lang="ar"] :is(.hero-grid, .about-band-grid, .course-slider,
    .testimonials-slider-container, .course-card-premium) {
    direction: ltr;
}

/* The quote block is RTL (blockquote rule above), so flex-end would push the
   attribution to the left; flex-start keeps it on the quote's right edge. */
html[lang="ar"] .testimonial-body {
    text-align: right;
}

html[lang="ar"] .testimonial-attribution {
    align-items: flex-start;
}

/* The about band's artwork stays on the left, but its copy column reads RTL so
   eyebrow, heading, text and button all share the same right edge. */
html[lang="ar"] .about-band-content {
    direction: rtl;
    text-align: right;
}

/* Arabic month names are longer; keep the date on one line. */
html[lang="ar"] .event-date strong {
    white-space: nowrap;
}

/* Directional arrows point the way Arabic reads. The course-strip arrow stays:
   the strip itself still scrolls left-to-right. */
html[lang="ar"] :is([class*="ri-arrow-right"], [class*="ri-arrow-left"]):not(.section-next *) {
    display: inline-block;
    transform: scaleX(-1);
}

html[lang="ar"] .event-link:hover i {
    transform: scaleX(-1) translateX(5px);
}

/* Course spec dividers flip with the reversed item order. */
html[lang="ar"] .course-specs li+li {
    border-left: 0;
    border-right: 1px solid #E0E0E0;
}

/* ---------------------------------------------------------------------------
   Phone layout fixes (about, course details, contact, consultation)
   --------------------------------------------------------------------------- */
.features-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* About-page feature images had no sizing and rendered at their natural 400px. */
.course-img img {
    display: block;
    width: 100%;
    height: auto;
}

@media (max-width: 900px) {
    /* .contact-container is defined after the 768px block above, so its
       two-column rule won at every width; restate the stacked layout here. */
    .contact-container {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        padding: 3rem 0;
    }

    .features-grid-3 {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Course-details reviews: a static pair of cards, not the home slider. */
    .testimonials-grid:not(#testimonialSlider) {
        flex-direction: column;
        gap: 1.25rem;
    }

    .testimonials-grid:not(#testimonialSlider) .testimonial-card {
        flex: 1 1 auto;
        padding: 1.75rem;
    }
}

/* ---------------------------------------------------------------------------
   v7 (CMS) additions
   --------------------------------------------------------------------------- */
a.lang-toggle { text-decoration: underline; display: inline-block; }

.header-logout-form { display: inline; margin: 0; }
.header-logout-form button { border: 0; cursor: pointer; font: inherit; }

a.btn-view-course { text-decoration: none; }

/* Form result banners */
.form-notice { padding: 0.9rem 1.1rem; border-radius: 12px; margin-bottom: 1.25rem; font-size: 0.95rem; line-height: 1.6; }
.form-notice-success { background: #E8F5EE; color: #1F6B45; border: 1px solid #BFE3CF; }
.form-notice-error { background: #FDECEA; color: #A3261A; border: 1px solid #F5C2BC; }

/* Spam trap: off-screen for people, still in the form for bots */
.hp-field { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.auth-hint { font-size: 0.85rem; color: var(--text-muted); margin: -0.25rem 0 1rem; }
.auth-title { font-size: 1.5rem; margin-bottom: 0.75rem; color: var(--primary); }

.buy-secure-note { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.85rem; color: var(--text-muted); margin: 0.5rem 0 1.25rem; }
.buy-secure-note i { color: var(--primary); }

/* Blog post */
.blog-post { max-width: 780px; }
.blog-post-title { font-size: clamp(1.75rem, 3vw, 2.4rem); line-height: 1.25; margin: 0.75rem 0 0.5rem; color: var(--text); }
.blog-post-date { color: var(--text-muted); margin-bottom: 1.5rem; }
.blog-post-image { width: 100%; max-height: 440px; object-fit: cover; border-radius: 16px; margin-bottom: 1.75rem; }
.blog-post-lead { font-size: 1.15rem; color: var(--text); margin-bottom: 1.25rem; }
.blog-post p { margin-bottom: 1.1rem; color: #4A4F63; line-height: 1.8; }
.blog-post-back { margin-top: 2rem; }
.blog-card h3 a { color: inherit; text-decoration: none; }

/* Account */
.account-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.account-card { background: #fff; border: 1px solid #ECECEC; border-radius: 16px; padding: 1.5rem; }
.account-card h3 { margin-bottom: 1rem; color: var(--primary); }
.account-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid #F0F0F0; }
.account-right { text-align: end; }
.account-muted { color: var(--text-muted); font-size: 0.88rem; }
.status-pill { display: inline-block; border-radius: 99px; padding: 0 0.6rem; font-size: 0.78rem; background: #F2F2F2; }
.status-paid, .status-confirmed, .status-completed { background: #E8F5EE; color: #1F6B45; }
.status-pending, .status-new { background: #FFF4D6; color: #7A5B00; }
.status-cancelled, .status-refunded { background: #FDECEA; color: #A3261A; }
@media (max-width: 800px) { .account-grid { grid-template-columns: 1fr; } }

/* Error pages */
.error-section { padding: 9rem 0 6rem; }
.error-code { font-size: 4rem; font-weight: 800; color: var(--primary); line-height: 1; margin-bottom: 0.5rem; }
.error-message { color: var(--text-muted); margin: 0.75rem auto 2rem; max-width: 520px; }

html[lang="ar"] .course-instructor-block { direction: rtl; }

/* ---------------------------------------------------------------------------
   Athar Tools: Products → Product Details → Buy Now
   --------------------------------------------------------------------------- */
.products-intro {
    color: var(--text-muted);
    font-size: 1.05rem;
    max-width: 640px;
}

.products-listing-section .products-grid {
    margin-top: 1.5rem;
}

.products-empty {
    color: var(--text-muted);
    margin-top: 1.5rem;
}

.product-type-badge {
    position: static;
    display: inline-block;
    max-width: none;
    border-radius: 20px;
    margin-bottom: 0.75rem;
}

.product-details-section [hidden],
.buy-summary-list li[hidden] {
    display: none !important;
}


/* Invisible anti-spam check: status line shown only while it finishes */
.captcha-status { display: flex; align-items: center; justify-content: flex-start; gap: 0.35rem; margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--text-muted, #6b6b7b); }
.captcha-status i { font-size: 1.05rem; }
.captcha-status.is-verified { color: #1F6B45; }
.captcha-status.is-failed { color: #A3261A; }

/* Course videos */
.course-videos { margin: 0 0 2.5rem; }
.course-videos-count { font-weight: 400; color: var(--text-muted); font-size: 0.9em; }
.video-player { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #0b0b14; margin-bottom: 1rem; }
.video-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-list { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(0, 0, 0, .08); border-radius: 12px; overflow: hidden; }
.video-item + .video-item { border-top: 1px solid rgba(0, 0, 0, .08); }
.video-item-btn { display: flex; align-items: center; gap: .75rem; width: 100%; padding: .85rem 1rem; background: #fff; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer; }
.video-item-btn:hover, .video-item-btn:focus-visible { background: #f6f6fb; }
.video-item.is-active .video-item-btn { background: #eeeefa; font-weight: 600; }
.video-item-btn i { font-size: 1.35rem; color: var(--primary, #3b3b98); flex: none; }
.video-item.is-locked .video-item-btn { cursor: default; color: var(--text-muted); }
.video-item.is-locked .video-item-btn i { color: var(--text-muted); }
.video-item-title { flex: 1; min-width: 0; }
.video-tag { flex: none; font-size: .75rem; padding: .15rem .55rem; border-radius: 99px; background: #e6f6ec; color: #1f7a45; font-weight: 600; }
.video-tag-locked { background: #f1f1f4; color: #6b6b7b; }
.video-time { flex: none; font-size: .85rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.video-note { margin-top: 1rem; color: var(--text-muted); }
.video-note-locked { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; padding: 1rem; border-radius: 12px; background: #f6f6fb; }
.video-note-locked p { margin: 0; flex-basis: 100%; }
.video-login a { font-weight: 600; }
@media (max-width: 600px) { .video-item-btn { flex-wrap: wrap; } .video-item-title { flex-basis: calc(100% - 2.2rem); } }