/* =====================================================================
           ISOLATED + OPTIMIZED STYLES  (scoped to .prog-wrapper)
           ===================================================================== */
        .prog-wrapper {
            --primary: #ffffff;
            --text-dark: #ffffff;
            --text-gray: #a3a3a3;
            --text-muted: #737373;
            --bg-base: #000000;
            --border-light: rgba(255, 255, 255, 0.15);
            --accent-grad: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);

            font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: radial-gradient(circle at 50% 100%, #080808 0%, #000000 100%);
            color: var(--text-dark);
            -webkit-font-smoothing: antialiased;

            width: 100%;
            padding: 1rem 0rem;
            position: relative;
            overflow: hidden;
            z-index: 1;

            /* Skip rendering work when the section is off-screen */
            content-visibility: auto;
            contain-intrinsic-size: 1px 700px;
        }

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

        /* ---------- BACKGROUND (lightweight) ----------
           Static SVG swoosh kept. Heavy filter:blur(100px) glow replaced with a
           plain radial-gradient — visually similar, no per-frame GPU blur cost. */
        .prog-bg-swoosh {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
            transform: scaleX(-1) scaleY(-1);
            opacity: 0.85;
            background-position: center;
            background-size: cover;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 600' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='g1' x1='0%25' y1='100%25' x2='100%25' y2='0%25'%3E%3Cstop offset='0%25' stop-color='%230e0e0e'/%3E%3Cstop offset='40%25' stop-color='%232c2c2c'/%3E%3Cstop offset='100%25' stop-color='%23141414'/%3E%3C/linearGradient%3E%3ClinearGradient id='g2' x1='100%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%23242424'/%3E%3Cstop offset='100%25' stop-color='%23151515'/%3E%3C/linearGradient%3E%3Cfilter id='shadow'%3E%3CfeDropShadow dx='0' dy='15' stdDeviation='20' flood-color='%23000000' flood-opacity='1'/%3E%3C/filter%3E%3C/defs%3E%3Cpath d='M-200,800 C200,600 400,-100 800,150 C1200,400 900,900 1400,600 C1600,480 1700,200 1900,100' stroke='url(%23g1)' stroke-width='80' stroke-linecap='round' fill='none' filter='url(%23shadow)'/%3E%3Cpath d='M0,950 C350,850 650,300 1000,450 C1350,600 1200,900 1600,650 C1750,550 1850,350 2000,200' stroke='url(%23g2)' stroke-width='50' stroke-linecap='round' fill='none' filter='url(%23shadow)'/%3E%3C/svg%3E");
        }

        .prog-ambient-glow {
            position: absolute;
            top: -100px;
            left: 20%;
            width: 600px;
            height: 300px;
            z-index: 1;
            pointer-events: none;
            background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 70%);
        }

        /* ---------- LAYOUT ---------- */
        .prog-container {
            max-width: 85rem;
            margin: 0 auto;
            position: relative;
            z-index: 10;
            padding: 0 1rem;
        }

        .prog-header-area { margin-bottom: 2rem; }

        .prog-main-title {
            font-size: 2.75rem;
            font-weight: 600;
            margin-bottom: 2rem;
            letter-spacing: -0.02em;
            color: white;
        }
        .prog-main-title i {
            font-style: normal;
            background: var(--accent-grad);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .prog-nav-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
        }

        /* ---------- FILTERS ---------- */
        .prog-filters {
            display: flex;
            align-items: center;
            gap: 0.75rem;
            overflow-x: auto;
            scrollbar-width: none;
            -ms-overflow-style: none;
            padding-bottom: 0.5rem;
        }
        .prog-filters::-webkit-scrollbar { display: none; }

        .prog-filter-btn {
            white-space: nowrap;
            padding: 0.6rem 1.25rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
            background: transparent;
            border: 1px solid var(--border-light);
            color: var(--text-dark);
        }
        .prog-filter-btn:hover { border-color: rgba(255, 255, 255, 0.5); }
        .prog-filter-btn.active {
            background: var(--accent-grad);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 4px 15px rgba(81, 53, 255, 0.3);
        }

        /* ---------- ARROWS ---------- */
        .prog-arrows { display: none; align-items: center; gap: 0.75rem; flex-shrink: 0; }
        @media (min-width: 1024px) { .prog-arrows { display: flex; } }

        .prog-arrow-btn {
            width: 2.5rem; height: 2.5rem;
            border-radius: 50%;
            border: 1px solid var(--border-light);
            background: transparent;
            color: var(--primary);
            display: flex; align-items: center; justify-content: center;
            cursor: pointer;
            transition: border-color 0.3s ease, background 0.3s ease, transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
        }
        .prog-arrow-btn:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); }
        .prog-arrow-btn:active { transform: scale(0.95); }
        .swiper-button-disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }

        /* ---------- CAROUSEL ---------- */
        .prog-carousel { width: 100%; overflow: hidden; padding-bottom: 2rem; }

        .prog-card.swiper-slide {
            width: 90vw;
            max-width: 400px;
            height: auto;
            /* Solid-ish panel: backdrop-filter removed (bg was 0.9 opaque, so the
               blur was invisible but cost a full-screen GPU pass per card). */
            background-color: rgba(15, 15, 15, 0.94);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 1rem;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            box-shadow: 0 10px 30px -10px rgba(0,0,0,0.8);
            transition: border-color 0.4s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
            opacity: 0;
            animation: progFadeIn 0.5s forwards;
        }

        @keyframes progFadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to   { opacity: 1; transform: translateY(0); }
        }

        .prog-card:hover {
            border-color: rgba(255, 255, 255, 0.25);
            transform: translateY(-4px);
            box-shadow: 0 15px 40px -10px rgba(0,0,0,0.9);
        }

        .prog-card-media {
            position: relative;
            width: 100%;
            height: 220px;
            overflow: hidden;
            border-bottom: 1px solid rgba(255,255,255,0.05);
            background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01));
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .prog-text-avatar {
            font-size: 2.5rem;
            font-weight: 700;
            color: rgba(255, 255, 255, 0.4);
            letter-spacing: 2px;
            position: absolute;
            z-index: 0;
        }
        .prog-card-img {
            width: 100%; height: 100%;
            object-fit: cover;
            position: relative;
            z-index: 1;
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
        }
        /* will-change applied only while hovering the card, then released */
        .prog-card:hover .prog-card-img {
            transform: scale(1.05);
            will-change: transform;
        }

        .prog-card-content { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; }
        .prog-card-title {
            font-size: 1.25rem; font-weight: 600; color: #fff;
            margin-bottom: 0.75rem; line-height: 1.3; letter-spacing: -0.01em;
        }
        .prog-card-desc {
            font-size: 0.875rem; color: var(--text-gray); line-height: 1.5;
            margin-bottom: 1.5rem;
            display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
        }

        .prog-details-grid {
            display: grid; grid-template-columns: 1fr 1fr;
            gap: 1.25rem 1rem; margin-bottom: 2rem; margin-top: auto;
        }
        .prog-detail-item { display: flex; align-items: flex-start; gap: 0.75rem; }
        .prog-detail-icon { color: var(--text-muted); margin-top: 0.125rem; }
        .prog-detail-text { display: flex; flex-direction: column; }
        .prog-detail-label { font-size: 0.8rem; font-weight: 600; color: #fff; margin-bottom: 0.25rem; }
        .prog-detail-value { font-size: 0.8rem; color: var(--text-gray); line-height: 1.4; white-space: pre-line; }

        .prog-empty {
            width: 100%;
            padding: 3rem 1rem;
            text-align: center;
            color: var(--text-muted);
            font-size: 0.95rem;
        }

        /* ---------- BUTTON w/ spinning gradient border ---------- */
        .prog-explore-btn {
            position: relative;
            display: inline-flex; align-items: center; justify-content: space-between;
            gap: 0.75rem; width: max-content;
            padding: 0.6rem 1.25rem;
            border-radius: 999px;
            background: transparent;
            color: #fff;
            font-size: 0.875rem; font-weight: 600;
            text-decoration: none;
            overflow: hidden;
            z-index: 1;
            transition: color 0.3s ease, box-shadow 0.3s ease;
        }
        .prog-explore-btn:hover { color: #000; box-shadow: 0 0 20px rgba(81, 53, 255, 0.4); }

        .prog-explore-btn::before {
            content: '';
            position: absolute; top: 50%; left: 50%;
            width: 300%; aspect-ratio: 1;
            /* Seamless loop: transparent at BOTH 0deg and 360deg so the wrap point
               never shows a hard edge. The beam fades in and out gradually, so the
               leading/trailing edges read as a smooth sweep instead of a snap. */
            background: conic-gradient(from 0deg,
                transparent 0deg,
                transparent 170deg,
                rgba(81, 53, 255, 0.45) 235deg,
                #0d9488 295deg,
                #f97316 350deg,
                transparent 360deg);
            transform: translate(-50%, -50%) translateZ(0);
            backface-visibility: hidden;
            z-index: -2;
            will-change: transform;
            animation: progBorderSpin 3.6s linear infinite;
        }
        .prog-explore-btn::after {
            content: '';
            position: absolute; inset: 1px;
            background-color: #0c0c0c;
            border-radius: 999px;
            z-index: -1;
            transition: background-color 0.3s ease;
        }
        .prog-explore-btn:hover::after { background-color: #fff; }

        @keyframes progBorderSpin {
            to { transform: translate(-50%, -50%) translateZ(0) rotate(360deg); }
        }

        /* Pause every spinning border when the section is scrolled out of view
           (toggled by IntersectionObserver) — saves GPU when nobody's looking. */
        .prog-wrapper.is-paused .prog-explore-btn::before { animation-play-state: paused; }

        /* ---------- ACCESSIBILITY: respect reduced motion ---------- */
        @media (prefers-reduced-motion: reduce) {
            .prog-card.swiper-slide { animation: none; opacity: 1; }
            .prog-explore-btn::before { animation: none; }
            .prog-card-img,
            .prog-card,
            .prog-arrow-btn { transition: none; }
        }


    /* journey section css for about us use  */


        .tl-scope {
            /* Unique Variables for this component */
            --tl-bg: transparent;         /* Default to transparent to blend with your page */
            --tl-text-main: #171717;      /* neutral-900 */
            --tl-text-sec: #737373;       /* neutral-500 */
            --tl-text-mute: #525252;      /* neutral-600 */
            --tl-line: #e5e5e5;           /* neutral-200 */
            --tl-dot: #e5e5e5;
            --tl-dot-border: #d4d4d4;
            --tl-font: 'Inter', sans-serif;
            --tl-max-w: 1280px;
        }

        /* Dark Mode support via '.dark' class on parent/body */
        @media (prefers-color-scheme: dark) {
            .tl-scope {
                --tl-text-main: #ffffff;
                --tl-text-sec: #a3a3a3;
                --tl-text-mute: #d4d4d4;
                --tl-line: #262626;
                --tl-dot: #262626;
                --tl-dot-border: #404040;
            }
        }

        /* Component Reset - Only affects children of .tl-scope */
        .tl-scope * {
            box-sizing: border-box;
        }

        /* Main Wrapper */
        .tl-scope {
            font-family: var(--tl-font);
            /* Removed background-color here to allow parent bg to show through, or set explicitly */
            color: var(--tl-text-main);
            width: 100%;
            /* Removed overflow-x: hidden to prevent breaking position:sticky in some layouts */
            line-height: 1.5;
            /* Creates a new stacking context so z-indexes don't leak out */
            isolation: isolate; 
        }

        /* Layout Container */
        .tl-container {
            width: 100%;
            /* If you want a specific background for the timeline area, set it here */
            background-color: white; 
        }

        .tl-inner-wrap {
            width: 100%;
            max-width: var(--tl-max-w);
            margin: 0 auto;
            padding: 4rem 1rem; /* Adjusted padding for better fit */
        }

        /* Header */
        .tl-header {
            padding-bottom: 2rem;
            padding-left: 1rem;
        }
        
        .tl-title {
            font-size: 1.125rem;
            font-weight: 700;
            margin-bottom: 1rem;
            margin-top: 0;
            /* color: linear-gradient(135deg, #4500ff 0%, #010101 100%); */
        }

        .tl-desc {
            color: black;
            font-size: 0.875rem;
            max-width: 24rem;
            margin: 0;
        }

        /* Timeline Area */
        .tl-content-area {
            position: relative;
            max-width: var(--tl-max-w);
            margin: 0 auto;
            padding-bottom: 5rem;
        }

        /* Single Timeline Item */
        .tl-item {
            display: flex;
            flex-direction: column; /* Stacked on mobile */
            justify-content: flex-start;
            padding-top: 2.5rem;
        }

        /* Left Column (Date & Marker) */
        .tl-left-col {
            display: flex;
            flex-direction: row;
            align-items: center;
            z-index: 10; /* Lowered Z-index to be less aggressive */
            position: sticky;
            top: 5rem; /* Adjusted top offset */
            align-self: flex-start;
            width: 100%;
            max-width: 20rem;
        }

        /* Marker Circle */
        .tl-marker {
            height: 2.5rem;
            width: 2.5rem;
            position: absolute;
            left: 0.75rem;
            background-color: #ffffff; /* Explicit bg needed for marker to hide line behind it */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 20;
        }
        /* Dark mode adjustment for marker bg */
        @media (prefers-color-scheme: dark) {
            .tl-marker { background-color: #0a0a0a; }
        }

        .tl-dot {
            height: 1rem;
            width: 1rem;
            background-color: var(--tl-dot);
            border: 1px solid var(--tl-dot-border);
            border-radius: 50%;
        }

        /* Date Text Typography */
        .tl-date-lg {
            display: none;
            font-size: 3rem;
            font-weight: 700;
            color: var(--tl-text-sec);
            padding-left: 5rem;
            margin: 0;
        }

        .tl-date-sm {
            display: block;
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--tl-text-sec);
            margin-bottom: 1rem;
            margin-top: 0;
            text-align: left;
        }

        /* Right Column (Content) */
        .tl-right-col {
            position: relative;
            padding-left: 5rem;
            padding-right: 1rem;
            width: 100%;
        }

        .tl-text {
            color: black;
            font-size: 0.75rem;
            font-weight: 400;
            margin-bottom: 2rem;
            margin-top: 0;
        }

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

        .tl-img {
            border-radius: 0.5rem;
            object-fit: cover;
            width: 100%;
            height: auto;
            /* Aspect Ratio makes it flexible but maintains shape */
            aspect-ratio: 16 / 9; 
            display: block;
            box-shadow: 
                0 0 24px rgba(34, 42, 53, 0.06),
                0 1px 1px rgba(0, 0, 0, 0.05),
                0 0 0 1px rgba(34, 42, 53, 0.04),
                0 0 4px rgba(34, 42, 53, 0.08),
                0 16px 68px rgba(47, 48, 55, 0.05),
                0 1px 0 rgba(255, 255, 255, 0.1) inset;
        }

        /* Changelog List */
        .tl-list {
            margin-bottom: 2rem;
        }
        
        .tl-list-item {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: black;
            font-size: 0.75rem;
            margin-bottom: 0.25rem;
        }

        .tl-icon {
            width: 1rem;
            height: 1rem;
            color: #22c55e;
            display: block;
        }

        /* --- Animation Lines --- */
        .tl-line-bg {
            position: absolute;
            left: 2rem;
            top: 0;
            overflow: hidden;
            width: 2px;
            /* Track Gradient */
            background: linear-gradient(to bottom, transparent 0%, var(--tl-line) 10%, var(--tl-line) 90%, transparent 99%);
            /* Mask */
            -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);
        }

        .tl-line-fill {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            width: 2px;
            /* Fill Gradient: Purple -> Blue */
            background: linear-gradient(to top, #a855f7, #3b82f6, transparent);
            border-radius: 9999px;
            opacity: 0;
            height: 0;
            transition: opacity 0.1s;
        }

        /* --- Media Queries for Desktop --- */
        @media (min-width: 768px) {
            .tl-inner-wrap {
                padding-left: 2rem;
                padding-right: 2rem;
            }

            .tl-title {
                font-size: 2.25rem;
                text-align: center;
            }

            .tl-desc {
                font-size: 1rem;
                text-align: center;
            }

            .tl-item {
                flex-direction: row;
                padding-top: 7rem;
                gap: 2.5rem;
            }

            .tl-left-col {
                flex-direction: row;
                width: 100%;
            }
            
            .tl-date-lg {
                display: block;
            }

            .tl-date-sm {
                display: none;
            }

            .tl-right-col {
                padding-left: 1rem;
            }

            .tl-text {
                font-size: 0.875rem;
            }

            .tl-img {
                /* On desktop, we can enforce a min-height if desired, or stick to aspect-ratio */
                aspect-ratio: 4 / 3; 
            }
            
            .tl-list-item {
                font-size: 0.875rem;
            }
        }

        @media (min-width: 1024px) {
            .tl-inner-wrap {
                padding-left: 2.5rem;
                padding-right: 2.5rem;
            }
        }





        
    /* 1. Scoped Variables - Defined ONLY inside this component */
    #perks-component {
      --pk-bg: #ffffff;
      --pk-text-main: #111827;
      --pk-text-muted: #6b7280;
      --pk-text-light: #f3f4f6;
      --pk-accent: #f97316; /* Violet/Purple */
      --pk-accent-dark: #4c1d95;
      --pk-card-bg: radial-gradient(circle at top, #2e1065, #0f172a); /* Deep purple/slate */
      --pk-center-bg: linear-gradient(180deg, #f97316, #4c1d95);
      --pk-border-light: rgba(255, 255, 255, 0.1);
      --pk-font: 'Inter', system-ui, sans-serif;
      
      /* 2. Component Layout Reset */
      display: block;
      width: 100%;
      padding: 4rem 1.5rem;
      background-color: var(--pk-bg);
      color: var(--pk-text-main);
      font-family: var(--pk-font);
      line-height: 1.5;
      text-align: left; /* Reset alignment */
    }

    /* 3. Internal Box Sizing Reset */
    #perks-component *,
    #perks-component *::before,
    #perks-component *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /* Container */
    #perks-component .pk-container {
      max-width: 1200px;
      margin: 0 auto;
    }

    /* Header */
    #perks-component .pk-header {
      text-align: center;
      max-width: 800px;
      margin: 0 auto 3.5rem;
    }

    #perks-component .pk-title {
      font-size: 2.25rem;
      font-weight: 700;
      color: var(--pk-text-main);
      margin: 0 0 1rem 0;
      letter-spacing: -0.02em;
      line-height: 1.2;
    }

    #perks-component .pk-subtitle {
      font-size: 1.125rem;
      color: var(--pk-text-muted);
      margin: 0;
      line-height: 1.6;
    }

    /* Grid Layout */
    #perks-component .pk-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 1.5rem;
    }

    @media (min-width: 900px) {
      #perks-component .pk-grid {
        /* Left Column | Center Highlight | Right Column */
        grid-template-columns: 1fr 1.3fr 1fr;
        align-items: stretch;
      }
    }

    /* Stack for side columns */
    #perks-component .pk-stack {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      justify-content: space-between;
    }

    /* Common Card Styles */
    #perks-component .pk-card {
      background: var(--pk-card-bg);
      border-radius: 1.25rem;
      padding: 1.75rem;
      color: #fff;
      position: relative;
      overflow: hidden;
      box-shadow: 0 20px 40px -10px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 220px;
      border: 1px solid var(--pk-border-light);
      transition: transform 0.3s ease;
    }

    #perks-component .pk-card:hover {
      transform: translateY(-5px);
    }

    /* Glossy overlay effect */
    #perks-component .pk-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, rgba(255,255,255,0.05), rgba(255,255,255,0.01) 40%, transparent);
      pointer-events: none;
    }

    /* Icons (replacing images) */
    #perks-component .pk-icon {
      width: 48px;
      height: 48px;
      background: rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 1rem;
      backdrop-filter: blur(4px);
    }

    #perks-component .pk-card-text {
      font-size: 1.1rem;
      font-weight: 600;
      line-height: 1.4;
      z-index: 1; /* Ensure text is above overlay */
    }

    /* Center Highlight Card */
    #perks-component .pk-center-card {
      background: var(--pk-center-bg);
      border: 3px solid rgba(255, 255, 255, 0.2);
      min-height: 460px; /* Taller */
      justify-content: flex-start;
      text-align: center;
      padding: 2.5rem 2rem;
    }

    #perks-component .pk-center-title {
      font-size: 1.5rem;
      font-weight: 700;
      margin: 0 0 1.5rem 0;
      line-height: 1.3;
    }

    #perks-component .pk-partner-name {
      font-size: 1.25rem;
      font-weight: 600;
      margin: 1rem 0 2rem;
      color: rgba(255, 255, 255, 0.9);
    }
    
    #perks-component .pk-partner-tag {
      display: inline-block;
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      background: rgba(0,0,0,0.2);
      padding: 4px 8px;
      border-radius: 4px;
      margin-top: 4px;
    }

    /* Mini Certificate inside Center Card */
    #perks-component .pk-certificate {
      margin-top: auto;
      background: #ffffff;
      color: #111827;
      border-radius: 1rem;
      padding: 1.25rem;
      font-size: 0.9rem;
      box-shadow: 0 15px 30px rgba(0,0,0,0.2);
      text-align: left;
      position: relative;
    }
    
    #perks-component .pk-cert-header {
      font-weight: 700;
      font-size: 0.8rem;
      text-transform: uppercase;
      color: #f97316;
      margin-bottom: 0.5rem;
      display: block;
    }
    
    #perks-component .pk-cert-name {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
      display: block;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      #perks-component .pk-title { font-size: 1.75rem; }
      #perks-component .pk-card { min-height: 180px; }
      #perks-component .pk-center-card { min-height: auto; }
      #perks-component { padding: 3rem 1rem; }
    }








    /* fnq question and answer css  */


    /* =========================================
   ISOLATED FAQ SECTION STYLES
   ID: #faq-component-scope
   ========================================= */

#faq-component-scope {
  /* Scoped Variables */
  --faq-bg: #ffffff;
  --faq-text-main: #111827;
  --faq-text-muted: #6b7280;
  --faq-primary: #f97316; /* Purple */
  --faq-primary-dark: #6d28d9;
  --faq-gradient: linear-gradient(135deg, #0d9488, #f97316);
  --faq-border: #e5e7eb;
  --faq-bg-light: #f8fafc;
  --faq-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  
  /* Reset & Layout */
  font-family: 'Inter', sans-serif;
  color: var(--faq-text-main);
  background-color: var(--faq-bg);
  width: 100%;
  box-sizing: border-box;
  display: block;
}

#faq-component-scope * {
  box-sizing: border-box;
}

#faq-component-scope .faq-container {
  max-width: 1200px;
  margin: auto;
  padding: 80px 5%;
}

/* --- LAYOUT GRID --- */
#faq-component-scope .faq-iso-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 60px;
  align-items: start;
}

/* --- LEFT COLUMN --- */
#faq-component-scope .faq-left-col {
  min-width: 0;
}

/* --- RIGHT COLUMN --- */
#faq-component-scope .faq-right-col {
  position: sticky;
  top: 40px;
  padding-top: 20px;
}

/* --- SCROLL ANIMATION --- */
#faq-component-scope .faq-iso-fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform;
}

#faq-component-scope .faq-iso-visible {
  opacity: 1;
  transform: translateY(0);
}

#faq-component-scope .faq-img-wrapper.faq-iso-fade {
    transition-delay: 0.2s;
}

/* --- HEADER --- */
#faq-component-scope .faq-header {
  text-align: left;
  margin-bottom: 30px;
}

#faq-component-scope .faq-eyebrow {
  color: var(--faq-primary);
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: block;
  margin-bottom: 10px;
}

#faq-component-scope .faq-title {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 20px 0;
  color: var(--faq-text-main);
}

#faq-component-scope .faq-text-gradient {
  background: var(--faq-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: inherit; /* Inherit 800 from h2 */
}

/* Image */
#faq-component-scope .faq-img-wrapper {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
  border: 1px solid var(--faq-border);
}

#faq-component-scope .faq-image {
  width: 100%;
  height: auto;
  display: block;
}

/* --- TABS --- */
#faq-component-scope .faq-tabs {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 40px;
}

#faq-component-scope .faq-iso-tab {
  padding: 10px 24px;
  border-radius: 99px;
  border: 1px solid var(--faq-border);
  background: var(--faq-bg-light);
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  color: var(--faq-text-muted);
  transition: all 0.2s ease;
}

#faq-component-scope .faq-iso-tab:hover {
  border-color: var(--faq-primary);
  color: var(--faq-primary);
}

#faq-component-scope .faq-iso-tab.faq-iso-active {
  background: var(--faq-primary);
  color: #fff;
  border-color: var(--faq-primary);
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.3);
}

/* --- FAQ LIST --- */
#faq-component-scope .faq-content {
  display: none;
  animation: faqIsoFadeIn 0.4s ease;
}

#faq-component-scope .faq-content.faq-iso-active {
  display: block;
}

#faq-component-scope .faq-item {
  background: #fff;
  border: 1px solid var(--faq-border);
  border-radius: 16px;
  margin-bottom: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

#faq-component-scope .faq-item:hover {
  border-color: #d1d5db;
  box-shadow: var(--faq-shadow);
}

/* Active item styling */
#faq-component-scope .faq-item.faq-iso-active {
  border-color: var(--faq-primary);
  box-shadow: 0 4px 20px rgba(124, 58, 237, 0.08);
}

#faq-component-scope .faq-question {
  width: 100%;
  padding: 24px;
  background: none;
  border: none;
  text-align: left;
  font-family: 'Inter', sans-serif;
  font-size: 1.125rem;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  color: var(--faq-text-main);
  transition: color 0.2s;
}

#faq-component-scope .faq-question:hover {
  color: var(--faq-primary);
}

/* Plus Icon Styling */
#faq-component-scope .faq-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--faq-bg-light);
  color: var(--faq-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-left: 16px;
}

#faq-component-scope .faq-item.faq-iso-active .faq-icon {
  background: var(--faq-primary);
  color: #fff;
  transform: rotate(45deg);
}

#faq-component-scope .faq-answer {
  max-height: 0;
  overflow: hidden;
  padding: 0 24px;
  font-size: 1rem;
  color: var(--faq-text-muted);
  line-height: 1.6;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
}

#faq-component-scope .faq-item.faq-iso-active .faq-answer {
  max-height: 300px;
  padding-bottom: 24px;
  opacity: 1;
}

@keyframes faqIsoFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  #faq-component-scope .faq-iso-layout {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  #faq-component-scope .faq-right-col {
    order: -1;
    position: static;
    text-align: center;
  }

  #faq-component-scope .faq-header {
    text-align: center;
  }

  #faq-component-scope .faq-tabs {
    justify-content: center;
  }
  
  #faq-component-scope .faq-img-wrapper {
    max-width: 400px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  #faq-component-scope .faq-container {
    padding: 60px 20px;
  }
  
  #faq-component-scope .faq-iso-tab {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
  
  #faq-component-scope .faq-question {
    font-size: 1rem;
    padding: 20px;
  }
}




/* speaker  */



    #speakers-iso {
        --spk-card-bg: #ffffff;
        --spk-text-main: #111827;
        --spk-text-muted: #6b7280;
        --spk-primary: #f97316;
        --spk-border: #e5e7eb;
        --spk-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
        
        font-family: 'Inter', sans-serif;
        background: transparent; /* No Background Color */
        width: 100vw; /* Covers whole screen width */
        padding: 40px 0; /* Minimal vertical padding for shadow visibility */
        overflow: hidden;
        color: var(--spk-text-main);
    }

    #speakers-iso * { box-sizing: border-box; }

    /* --- MARQUEE CONTAINER --- */
    #speakers-iso .marquee-wrapper {
        position: relative;
        width: 100%;
        overflow: hidden;
        /* Optional: Fade edges for smoother look */
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    #speakers-iso .marquee-track {
        display: flex;
        gap: 24px;
        width: max-content;
        animation: scrollLeft 40s linear infinite;
        padding: 10px 0; /* Space for shadow */
    }

    /* Pause on hover */
    #speakers-iso .marquee-wrapper:hover .marquee-track {
        animation-play-state: paused;
    }

    @keyframes scrollLeft {
        0% { transform: translateX(0); }
        100% { transform: translateX(calc(-50% - 12px)); } /* -50% minus half gap */
    }

    /* --- CARD STYLES --- */
    #speakers-iso .speaker-card {
        background: var(--spk-card-bg);
        border: 1px solid var(--spk-border);
        border-radius: 20px;
        
        /* Dimensions */
        width: 260px; 
        height: 360px;
        
        flex-shrink: 0;
        padding: 16px; 
        text-align: center;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #speakers-iso .speaker-card:hover {
        transform: translateY(-5px);
        box-shadow: var(--spk-shadow);
        border-color: var(--spk-primary);
    }

    #speakers-iso .card-image-wrapper {
        /* Dimensions */
        width: 226px;
        height: 180px;
        
        margin: 0 auto 16px auto;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid #f3f4f6;
        background: #f9fafb;
    }

    #speakers-iso .card-image-wrapper img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #speakers-iso .card-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-grow: 1;
        width: 100%;
    }

    #speakers-iso .card-name {
        font-size: 1.125rem;
        font-weight: 700;
        margin: 0 0 8px 0;
        color: var(--spk-text-main);
        line-height: 1.3;
    }

    #speakers-iso .card-designation {
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--spk-primary);
        margin: 0 0 4px 0;
        line-height: 1.4;
    }

    #speakers-iso .card-detail {
        font-size: 0.8rem;
        color: var(--spk-text-muted);
        margin: 0;
        line-height: 1.4;
    }



    /* --- COMPONENT RESET --- */
.fndr-section { 
  font-family: 'Inter', system-ui, sans-serif;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
}

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

/* Demo Body Style */


/* ================= FOUNDER SECTION STYLES ================= */

.fndr-section {
  /* min-height: 100vh; */
  padding: 50px 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #0f172a; /* Brand Main Text */
  position: relative;
}

/* TITLE */
.fndr-title {
  font-size: 42px; /* Increased slightly for impact */
  font-weight: 800; /* Extra bold for headlines */
  margin-bottom: 12px;
  text-align: center;
  color: #0f172a;
  letter-spacing: -0.02em;
}

/* HIGHLIGHT (BRAND GRADIENT) */
.fndr-highlight {
  /* Brand Gradient: Deep Violet to Vibrant Pink */
  background: linear-gradient(135deg, #0d9488 0%, #f97316 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent; /* Fallback */
  font-weight: inherit;
}

/* SUBTITLE */
.fndr-subtitle {
  font-size: 18px;
  color: #64748b; /* Brand Muted Text */
  margin-bottom: 48px;
  text-align: center;
  font-weight: 500;
}

/* VIDEO CARD */
.fndr-video-wrapper {
  width: 100%;
  max-width: 900px;
  background: #000;
  border-radius: 24px; /* Generous Border Radius */
  overflow: hidden;
  /* Soft shadow with a hint of brand color */
  box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.25);
  border: 4px solid #fff; /* Clean white border */
}

/* VIDEO */
.fndr-video-wrapper video {
  width: 100%;
  height: auto;
  display: block;
  /* No border radius needed on video if wrapper handles overflow */
}

/* FOOT NOTE */
.fndr-video-tip {
  margin-top: 20px;
  font-size: 14px;
  color: #64748b; /* Brand Muted Text */
  text-align: center;
  font-weight: 500;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 900px) {
  .fndr-title {
    font-size: 32px;
  }
  
  .fndr-subtitle {
    font-size: 16px;
    margin-bottom: 32px;
  }

  .fndr-video-wrapper {
    border-radius: 16px;
    border-width: 2px;
  }
}


/* linkdin new css  */


        /* --- Isolation Wrapper --- */
        .testimonials-root {
            all: initial;
            font-family: 'Inter', sans-serif;
            display: block;
            background: #ffffff;
            padding: 100px 0;
            box-sizing: border-box;
            overflow-x: hidden;
            touch-action: pan-y;
        }

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

        .testimonials-root .section-header {
            max-width: 900px;
            margin: 0 auto 40px;
            text-align: center;
            padding: 0 20px;
        }

        .testimonials-root .section-header h2 {
            font-size: clamp(1.75rem, 5vw, 2.5rem);
            font-weight: 800;
            letter-spacing: -0.03em;
            background: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 15px;
        }

        .testimonials-root .section-header p {
            font-size: clamp(0.95rem, 2vw, 1.1rem);
            color: #64748b;
            line-height: 1.6;
        }

        /* --- New Robust Slider Layout --- */
        .testimonials-root .slider-viewport {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            padding: 40px 0;
        }

        .testimonials-root .slider-track {
            display: flex;
            gap: 20px;
            /* The --offset variable will be managed by JS */
            transform: translateX(var(--track-offset, 0px));
            transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            will-change: transform;
        }

        .testimonials-root .card {
            min-width: 380px;
            width: 380px;
            background: #fff;
            border-radius: 20px;
            padding: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.05);
            transition: all 0.5s ease;
            opacity: 0.3;
            filter: blur(2px) grayscale(80%);
            transform: scale(0.85);
            border: 1px solid rgba(0,0,0,0.03);
        }

        .testimonials-root .card.active {
            opacity: 1;
            filter: none;
            transform: scale(1.05);
            box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.2);
            z-index: 2;
        }

        .testimonials-root .card img {
            width: 100%;
            height: auto;
            border-radius: 14px;
            display: block;
            pointer-events: none;
        }

        /* --- Navigation --- */
        .testimonials-root .nav-controls {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 40px;
        }

        .testimonials-root .nav-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: #fff;
            color: #0f172a;
            border: 1px solid #e2e8f0;
            cursor: pointer;
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
        }

        .testimonials-root .nav-btn:hover {
            border-color: #0d9488;
            color: #0d9488;
        }

        .testimonials-root .nav-btn:active {
            background: #2563eb;
            color: #fff;
            transform: scale(0.9);
        }

        @media (max-width: 768px) {
            .testimonials-root .card {
                min-width: 280px;
                width: 280px;
                border-radius: 16px;
            }
            .testimonials-root .card.active {
                transform: scale(1);
            }
        }



/* scroll for mentor  */


       /* Scoped Root */
        #infinite-scroll-section {
            width: 100%;
            overflow: hidden;
            /* The specific gradient requested */
            background: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);
            padding: 1rem 0;
            display: flex;
            align-items: center;
            position: relative;
            z-index: 10;
        }

        /* Prevent global CSS interference */
        #infinite-scroll-section * {
            box-sizing: border-box;
        }

        /* The Moving Track */
        #infinite-scroll-section .scroll-track {
            display: flex;
            white-space: nowrap;
            /* This animation moves the track to the left */
            animation: infinite-scroll 20s linear infinite;
            /* Pause on hover (Optional - remove if not needed) */
            /* animation-play-state: running; */
        }
        
        #infinite-scroll-section:hover .scroll-track {
            animation-play-state: paused;
        }

        /* Individual Content Group */
        #infinite-scroll-section .scroll-content {
            display: flex;
            align-items: center;
            gap: 2rem; /* Space between items */
            padding-right: 2rem; /* Space before the next group starts */
        }

        /* Text Styles */
        #infinite-scroll-section .scroll-item {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #ffffff;
            font-size: 1.125rem; /* 18px */
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Separator Icon (Star) */
        #infinite-scroll-section .separator {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.8rem;
        }

        /* The Animation Logic */
        @keyframes infinite-scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                /* Moves exactly 50% because we have two identical sets of content.
                   Once it hits -50%, it snaps back to 0 instantly, creating the loop. */
                transform: translateX(-50%);
            }
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            #infinite-scroll-section {
                padding: 0.75rem 0;
            }
            #infinite-scroll-section .scroll-item {
                font-size: 0.9rem;
            }
        }



        /* benefit for mentor  */

         #infinite-scroll-section {
            width: 100%;
            overflow: hidden;
            /* The specific gradient requested */
            background: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);
            padding: 3.5rem 0; /* Increased padding */
            display: flex;
            align-items: center;
            position: relative;
            z-index: 10;
        }

        /* Prevent global CSS interference */
        #infinite-scroll-section * {
            box-sizing: border-box;
        }

        /* The Moving Track */
        #infinite-scroll-section .scroll-track {
            display: flex;
            white-space: nowrap;
            /* This animation moves the track to the left */
            animation: infinite-scroll 20s linear infinite;
            /* Pause on hover (Optional - remove if not needed) */
            /* animation-play-state: running; */
        }
        
        #infinite-scroll-section:hover .scroll-track {
            animation-play-state: paused;
        }

        /* Individual Content Group */
        #infinite-scroll-section .scroll-content {
            display: flex;
            align-items: center;
            gap: 3rem; /* Increased gap */
            padding-right: 3rem; /* Increased padding */
        }

        /* Text Styles */
        #infinite-scroll-section .scroll-item {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: #ffffff;
            font-size: 1.5rem; /* Increased font size (24px) */
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Separator Icon (Star) */
        #infinite-scroll-section .separator {
            color: rgba(255, 255, 255, 0.6);
            font-size: 1rem; /* Increased separator size */
        }

        /* The Animation Logic */
        @keyframes infinite-scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                /* Moves exactly 50% because we have two identical sets of content.
                   Once it hits -50%, it snaps back to 0 instantly, creating the loop. */
                transform: translateX(-50%);
            }
        }

        /* Mobile Adjustments */
        @media (max-width: 768px) {
            #infinite-scroll-section {
                padding: 1rem 0;
            }
            #infinite-scroll-section .scroll-item {
                font-size: 1.1rem;
            }
        }



        /* addded benifit mentor  */


               /* Scoped Root */
        #mentor-benefits {
            /* Variables */
            --mb-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            --mb-primary: #0d9488; /* Teal */
            --mb-secondary: #f97316; /* Orange */
            --mb-bg: #f8f9fc;
            --mb-card-bg: #ffffff;
            --mb-text-main: #1e293b;
            --mb-text-muted: #64748b;
            
            width: 100%;
            padding: 5rem 1.5rem;
            background: var(--mb-bg);
            font-family: var(--mb-font);
            color: var(--mb-text-main);
            overflow: hidden; /* Prevent overflow from animations */
        }

        /* Local Reset */
        #mentor-benefits *, 
        #mentor-benefits *::before, 
        #mentor-benefits *::after {
            box-sizing: border-box;
        }

        /* Container */
        #mentor-benefits .mb-container {
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
        }

        /* Header */
        #mentor-benefits .mb-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 4rem auto;
            /* Animation */
            opacity: 0;
            animation: mbFadeInUp 0.8s ease forwards;
        }

        #mentor-benefits .mb-title {
            font-size: 2.25rem;
            font-weight: 800;
            margin-bottom: 1rem;
            letter-spacing: -0.02em;
            line-height: 1.2;
        }

        #mentor-benefits .mb-highlight {
            background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #mentor-benefits .mb-subtitle {
            font-size: 1.1rem;
            color: var(--mb-text-muted);
            line-height: 1.6;
        }

        /* Grid Layout (Desktop) */
        #mentor-benefits .mb-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            padding-bottom: 1rem; /* Space for hover shadow/scroll bar */
        }

        /* Card Styles */
        #mentor-benefits .mb-card {
            background: var(--mb-card-bg);
            border-radius: 1.5rem;
            padding: 2rem;
            position: relative;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            border: 1px solid #e2e8f0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            height: 100%;
            
            /* Initial Animation State */
            opacity: 0;
            transform: translateY(30px);
            animation: mbFadeInUp 0.6s ease forwards;
        }

        /* Staggered Animations */
        #mentor-benefits .mb-card:nth-child(1) { animation-delay: 0.1s; }
        #mentor-benefits .mb-card:nth-child(2) { animation-delay: 0.2s; }
        #mentor-benefits .mb-card:nth-child(3) { animation-delay: 0.3s; }
        #mentor-benefits .mb-card:nth-child(4) { animation-delay: 0.4s; }
        #mentor-benefits .mb-card:nth-child(5) { animation-delay: 0.5s; }
        #mentor-benefits .mb-card:nth-child(6) { animation-delay: 0.6s; }

        /* Hover Effects */
        #mentor-benefits .mb-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px -5px rgba(91, 45, 216, 0.15);
            border-color: #d8b4fe;
        }

        /* Icon Circle */
        #mentor-benefits .mb-icon-box {
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background: #f3f4f6;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            color: var(--mb-primary);
            transition: all 0.4s ease;
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        #mentor-benefits .mb-card:hover .mb-icon-box {
            background: var(--mb-primary); /* Fallback */
            color: #ffffff;
            transform: scale(1.1) rotate(5deg);
        }
        
        /* Gradient Overlay for Icon on Hover */
        #mentor-benefits .mb-icon-box::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--mb-primary), var(--mb-secondary));
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: -1;
        }
        
        #mentor-benefits .mb-card:hover .mb-icon-box::after {
            opacity: 1;
        }

        /* Typography */
        #mentor-benefits .mb-card-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: 0.75rem;
            color: var(--mb-text-main);
        }

        #mentor-benefits .mb-card-desc {
            font-size: 0.95rem;
            color: var(--mb-text-muted);
            line-height: 1.6;
        }

        /* --- MOBILE CONTROLS (Hidden on Desktop) --- */
        #mentor-benefits .mb-controls {
            display: none; /* Hidden by default */
            align-items: center;
            justify-content: space-between;
            margin-top: 1.5rem;
            width: 100%;
        }

        #mentor-benefits .mb-dots {
            display: flex;
            gap: 8px;
        }

        #mentor-benefits .mb-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #cbd5e1;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        #mentor-benefits .mb-dot.active {
            width: 24px;
            border-radius: 4px;
            background: linear-gradient(90deg, var(--mb-primary), var(--mb-secondary));
        }

        #mentor-benefits .mb-nav-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1px solid #e2e8f0;
            background: white;
            color: var(--mb-text-main);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
        }

        #mentor-benefits .mb-nav-btn:active {
            transform: scale(0.95);
            background: #f1f5f9;
        }
        
        #mentor-benefits .mb-buttons-wrapper {
            display: flex;
            gap: 12px;
        }

        /* Animation Keyframes */
        @keyframes mbFadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        /* --- RESPONSIVE STYLES --- */
        @media (max-width: 1024px) {
            #mentor-benefits .mb-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Mobile Slider Implementation */
        @media (max-width: 768px) {
            #mentor-benefits {
                padding: 3rem 1rem;
            }
            
            #mentor-benefits .mb-title {
                font-size: 1.75rem;
            }

            /* Convert Grid to Horizontal Scroll Snap */
            #mentor-benefits .mb-grid {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 1rem;
                padding-bottom: 2rem; /* Space for shadow */
                
                /* Hide Scrollbar */
                -ms-overflow-style: none;  /* IE and Edge */
                scrollbar-width: none;  /* Firefox */
            }
            
            #mentor-benefits .mb-grid::-webkit-scrollbar {
                display: none;
            }

            #mentor-benefits .mb-card {
                min-width: 100%; /* Show one card fully */
                scroll-snap-align: center;
                /* Remove transform here to not conflict with scroll, 
                   animation keeps running but strictly controlled */
            }
            
            /* Show Controls on Mobile */
            #mentor-benefits .mb-controls {
                display: flex;
            }
        }



/* continue with this  */


         /* --- SHARED FONTS --- */
        :root {
            --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
        }

        body { margin: 0; font-family: var(--font-main); }
        *, *::before, *::after { box-sizing: border-box; }

        /* =========================================
           SECTION 1: ELIGIBILITY (Dark Tree)
           ========================================= */
        #mentor-eligibility {
            /* Dark Theme Variables */
            --me-primary: #f97316;
            --me-secondary: #ec4899;
            --me-bg-dark: #020617;
            --me-card-dark: #0f172a;
            --me-border-dark: #1e293b;
            --me-text-light: #f8fafc;
            --me-text-dim: #94a3b8;

            width: 100%;
            padding: 5rem 1.5rem;
            background: var(--me-bg-dark);
            color: var(--me-text-light);
            overflow: hidden;
            position: relative;
        }

        /* Background Grid Pattern */
        #mentor-eligibility::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: 
                linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent);
            pointer-events: none;
        }

        #mentor-eligibility .me-container {
            max-width: 1000px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        #mentor-eligibility .me-header {
            text-align: center;
            margin-bottom: 5rem;
        }

        #mentor-eligibility .me-title {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 0.5rem;
            color: white;
            margin-top: 0;
        }

        #mentor-eligibility .me-subtitle {
            font-size: 1.1rem;
            color: var(--me-primary);
            font-weight: 600;
        }

        /* --- TREE STRUCTURE --- */
        #mentor-eligibility .me-tree-grid {
            display: grid;
            grid-template-columns: 1fr 4px 1fr; /* Left | Trunk | Right */
            gap: 0;
            position: relative;
        }

        /* The Trunk */
        #mentor-eligibility .me-trunk {
            background: linear-gradient(to bottom, var(--me-primary), var(--me-secondary));
            border-radius: 2px;
            position: relative;
            grid-column: 2;
            grid-row: 1 / span 6;
            box-shadow: 0 0 15px rgba(139, 92, 246, 0.5);
            width: 4px;
            margin: 0 auto;
        }

        /* Item Wrapper */
        #mentor-eligibility .me-item-wrap {
            position: relative;
            padding-bottom: 3rem;
            display: flex;
            align-items: center;
        }

        /* Branch Line */
        #mentor-eligibility .me-branch {
            position: absolute;
            top: 50%;
            height: 2px;
            background: rgba(148, 163, 184, 0.3);
            width: 3rem;
        }

        /* Branch Connector Dot */
        #mentor-eligibility .me-branch::after {
            content: '';
            position: absolute;
            width: 8px;
            height: 8px;
            background: var(--me-secondary);
            border-radius: 50%;
            top: -3px;
        }

        /* Left Side Config */
        #mentor-eligibility .me-item-wrap.left {
            grid-column: 1;
            justify-content: flex-end;
            padding-right: 3rem;
            text-align: right;
        }
        #mentor-eligibility .me-item-wrap.left .me-branch { right: 0; }
        #mentor-eligibility .me-item-wrap.left .me-branch::after { right: -4px; }

        /* Right Side Config */
        #mentor-eligibility .me-item-wrap.right {
            grid-column: 3;
            justify-content: flex-start;
            padding-left: 3rem;
            text-align: left;
        }
        #mentor-eligibility .me-item-wrap.right .me-branch { left: 0; }
        #mentor-eligibility .me-item-wrap.right .me-branch::after { left: -4px; }

        /* Dark Card Styling */
        #mentor-eligibility .me-card {
            background: var(--me-card-dark);
            border: 1px solid var(--me-border-dark);
            border-radius: 1rem;
            padding: 1.5rem;
            width: 100%;
            max-width: 400px;
            transition: all 0.3s ease;
            position: relative;
            display: flex;
            align-items: center;
            gap: 1rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
            
            /* Animation */
            opacity: 0;
            transform: translateY(30px);
            animation: mbFadeInUp 0.6s ease forwards;
        }

        /* Stagger Delays */
        #mentor-eligibility .me-item-wrap:nth-child(1) .me-card { animation-delay: 0.1s; }
        #mentor-eligibility .me-item-wrap:nth-child(2) .me-card { animation-delay: 0.2s; }
        #mentor-eligibility .me-item-wrap:nth-child(3) .me-card { animation-delay: 0.3s; }
        #mentor-eligibility .me-item-wrap:nth-child(4) .me-card { animation-delay: 0.4s; }
        #mentor-eligibility .me-item-wrap:nth-child(5) .me-card { animation-delay: 0.5s; }
        #mentor-eligibility .me-item-wrap:nth-child(6) .me-card { animation-delay: 0.6s; }

        #mentor-eligibility .me-item-wrap.left .me-card { flex-direction: row-reverse; }

        #mentor-eligibility .me-card:hover {
            transform: translateY(-5px);
            border-color: var(--me-primary);
            box-shadow: 0 10px 30px -10px rgba(139, 92, 246, 0.2);
            background: #151e32;
        }

        #mentor-eligibility .me-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: rgba(139, 92, 246, 0.1);
            color: var(--me-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            transition: all 0.3s ease;
        }

        #mentor-eligibility .me-card:hover .me-icon {
            background: var(--me-primary);
            color: white;
            box-shadow: 0 0 10px var(--me-primary);
        }

        #mentor-eligibility .me-text {
            font-size: 1rem;
            font-weight: 700;
            line-height: 1.4;
            color: var(--me-text-light);
        }

        #mentor-eligibility .me-footer {
            margin-top: 3rem;
            text-align: center;
            padding: 1.5rem;
            background: rgba(139, 92, 246, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.2);
            border-radius: 1rem;
            color: #d8b4fe;
            font-weight: 600;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        /* =========================================
           SECTION 2: WHY TEACH (Bento Grid)
           ========================================= */
        #why-teach {
            --wt-primary: #4338ca;
            --wt-secondary: #f43f5e;
            --wt-bg: #F8FAFC;
            --wt-card-bg: #ffffff;
            --wt-text-head: #1e293b;
            --wt-text-body: #475569;
            
            width: 100%;
            padding: 5rem 1.5rem;
            background: var(--wt-bg);
            color: var(--wt-text-head);
        }

        #why-teach .wt-container {
            max-width: 1200px;
            margin: 0 auto;
        }

        #why-teach .wt-header {
            text-align: center;
            max-width: 800px;
            margin: 0 auto 4rem auto;
        }

        #why-teach .wt-title {
            font-size: 2.25rem;
            font-weight: 800;
            margin-bottom: 1rem;
            line-height: 1.2;
            color: var(--wt-text-head);
        }

        #why-teach .wt-title span {
            color: var(--wt-primary);
        }

        /* Bento Grid (Desktop 6-column Layout) */
        #why-teach .wt-grid {
            display: grid;
            grid-template-columns: repeat(6, 1fr); /* 6 columns for precise alignment */
            gap: 1.5rem;
        }

        /* Default Card (Spans 2 columns = 3 cards per row) */
        #why-teach .wt-card {
            background: var(--wt-card-bg);
            border-radius: 1.5rem;
            padding: 2rem;
            border: 1px solid #e2e8f0;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            grid-column: span 2; /* 3 items in top row */
            
            /* Entrance Animation */
            opacity: 0;
            transform: translateY(20px);
            animation: mbFadeInUp 0.6s ease forwards;
        }

        /* Wide Card (Spans 3 columns = 2 cards per row) */
        #why-teach .wt-card.wide {
            grid-column: span 3;
        }

        /* Staggered Animations */
        #why-teach .wt-card:nth-child(1) { animation-delay: 0.1s; }
        #why-teach .wt-card:nth-child(2) { animation-delay: 0.2s; }
        #why-teach .wt-card:nth-child(3) { animation-delay: 0.3s; }
        #why-teach .wt-card:nth-child(4) { animation-delay: 0.4s; }
        #why-teach .wt-card:nth-child(5) { animation-delay: 0.5s; }

        /* Hover Effects */
        #why-teach .wt-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px -5px rgba(67, 56, 202, 0.1);
            border-color: var(--wt-primary);
        }

        /* Gradient top border on hover */
        #why-teach .wt-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 4px;
            background: linear-gradient(90deg, var(--wt-primary), var(--wt-secondary));
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        #why-teach .wt-card:hover::before { opacity: 1; }

        /* Icon */
        #why-teach .wt-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: #e0e7ff;
            color: var(--wt-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1.5rem;
            transition: all 0.3s ease;
        }

        #why-teach .wt-card:hover .wt-icon {
            background: var(--wt-primary);
            color: white;
            transform: rotate(-5deg);
        }

        /* Content */
        #why-teach .wt-card-title {
            font-size: 1.25rem;
            font-weight: 700;
            margin: 0 0 0.75rem 0;
            color: var(--wt-text-head);
        }

        #why-teach .wt-card-text {
            font-size: 0.95rem;
            color: var(--wt-text-body);
            line-height: 1.6;
            margin: 0 0 1rem 0;
        }

        /* Lists inside cards */
        #why-teach .wt-list {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-top: auto; /* Push to bottom */
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }

        #why-teach .wt-tag {
            font-size: 0.8rem;
            font-weight: 600;
            padding: 0.25rem 0.75rem;
            border-radius: 999px;
            background: #f1f5f9;
            color: #475569;
            border: 1px solid #e2e8f0;
        }

        /* --- ANIMATIONS --- */
        @keyframes mbFadeInUp {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* --- RESPONSIVE --- */
        @media (max-width: 1024px) {
            /* Tablet: Switch to 2 columns */
            #why-teach .wt-grid { grid-template-columns: repeat(2, 1fr); }
            #why-teach .wt-card { grid-column: span 1; }
            #why-teach .wt-card.wide { grid-column: span 2; }
        }

        @media (max-width: 768px) {
            /* Eligibility Mobile */
            #mentor-eligibility { padding: 3rem 1.5rem; }
            #mentor-eligibility .me-tree-grid {
                display: flex;
                flex-direction: column;
                padding-left: 20px;
                position: relative;
            }
            #mentor-eligibility .me-trunk {
                position: absolute; left: 0; top: 0; bottom: 0; height: 100%; width: 3px;
                grid-column: auto; grid-row: auto;
            }
            #mentor-eligibility .me-item-wrap.left,
            #mentor-eligibility .me-item-wrap.right {
                grid-column: auto; justify-content: flex-start;
                padding: 0 0 2rem 1.5rem; text-align: left; width: 100%;
            }
            #mentor-eligibility .me-item-wrap.left .me-card,
            #mentor-eligibility .me-item-wrap.right .me-card {
                flex-direction: row; max-width: 100%;
            }
            #mentor-eligibility .me-branch { width: 1.5rem; left: 0; top: 50%; right: auto; }
            #mentor-eligibility .me-branch::after { left: -4px; right: auto; }
            
            /* Why Teach Mobile (Horizontal Auto-Scroll) */
            #why-teach { padding: 3rem 1rem; }
            #why-teach .wt-header { margin-bottom: 2rem; }
            
            #why-teach .wt-grid {
                display: flex;
                flex-wrap: nowrap;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                gap: 1rem;
                padding-bottom: 2rem;
                /* Hide scrollbar */
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            
            #why-teach .wt-grid::-webkit-scrollbar { display: none; }
            
            #why-teach .wt-card {
                min-width: 85vw; /* Show mostly one card */
                grid-column: auto;
                scroll-snap-align: center;
                margin: 0;
            }
            
            #why-teach .wt-card.wide {
                min-width: 85vw;
                grid-column: auto;
            }
        }

        /* from css for mentor  */


           /* Scoped Root */
        #instructor-form-section {
            --if-font: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
            --if-primary: #0d9488;
            --if-secondary: #f97316;
            --if-gradient: linear-gradient(135deg, #0d9488, #f97316);
            --if-bg: #f3f4f6;
            --if-window-bg: #ffffff;
            --if-border: #e5e7eb;
            --if-text-main: #1f2937;
            --if-text-muted: #6b7280;
            
            width: 100%;
            padding: 4rem 1.5rem;
            background: var(--if-bg);
            font-family: var(--if-font);
            color: var(--if-text-main);
            display: flex;
            justify-content: center;
        }

        #instructor-form-section *, 
        #instructor-form-section *::before, 
        #instructor-form-section *::after {
            box-sizing: border-box;
        }

        /* 3D Window Container */
        #instructor-form-section .if-window {
            background: var(--if-window-bg);
            width: 100%;
            max-width: 1100px;
            border-radius: 1.5rem;
            /* Deep shadow for 3D float effect */
            box-shadow: 
                0 0 0 1px rgba(0,0,0,0.03), /* Subtle outline */
                0 25px 50px -12px rgba(0, 0, 0, 0.15), /* Large drop shadow */
                0 0 0 8px rgba(255, 255, 255, 0.4); /* Glassy rim */
            overflow: hidden;
            display: flex;
            flex-direction: column;
            position: relative;
            transform-style: preserve-3d;
        }

        /* Window Title Bar */
        #instructor-form-section .if-titlebar {
            background: #f9fafb;
            border-bottom: 1px solid var(--if-border);
            padding: 0.75rem 1.5rem;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        /* Window Control Dots */
        #instructor-form-section .if-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
        }
        #instructor-form-section .if-dot.red { background: #ef4444; }
        #instructor-form-section .if-dot.yellow { background: #f59e0b; }
        #instructor-form-section .if-dot.green { background: #22c55e; }

        /* Address Bar Mockup (Optional aesthetic) */
        #instructor-form-section .if-address-bar {
            background: #e5e7eb;
            height: 8px;
            border-radius: 4px;
            width: 200px;
            margin-left: 1rem;
            opacity: 0.5;
        }

        /* Main Content Layout */
        #instructor-form-section .if-content {
            display: flex;
            min-height: 800px;
        }

        /* LEFT SIDE: Form */
        #instructor-form-section .if-form-panel {
            flex: 3;
            padding: 3rem;
            overflow-y: auto;
        }

        /* RIGHT SIDE: Image */
        #instructor-form-section .if-image-panel {
            flex: 2;
            background: #1e1b4b; /* Fallback */
            position: relative;
            overflow: hidden;
        }

        #instructor-form-section .if-bg-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            opacity: 0.8;
            mix-blend-mode: overlay;
        }
        
        #instructor-form-section .if-overlay-text {
            position: absolute;
            bottom: 3rem;
            left: 2rem;
            right: 2rem;
            color: white;
            z-index: 2;
        }

        /* Headings */
        #instructor-form-section h2 {
            font-size: 2rem;
            font-weight: 800;
            margin: 0 0 0.5rem 0;
            background: var(--if-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        #instructor-form-section h3 {
            font-size: 1.1rem;
            font-weight: 700;
            margin: 2rem 0 1rem 0;
            color: var(--if-text-main);
            display: flex;
            align-items: center;
            gap: 0.5rem;
            border-bottom: 2px solid #f3f4f6;
            padding-bottom: 0.5rem;
        }

        #instructor-form-section h3 i {
            color: var(--if-primary);
        }

        /* Form Groups */
        #instructor-form-section .if-grid-2 {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
        }

        #instructor-form-section .if-group {
            margin-bottom: 1.25rem;
        }

        #instructor-form-section label {
            display: block;
            font-size: 0.9rem;
            font-weight: 600;
            margin-bottom: 0.5rem;
            color: #374151;
        }

        #instructor-form-section input[type="text"],
        #instructor-form-section input[type="email"],
        #instructor-form-section input[type="tel"],
        #instructor-form-section input[type="number"],
        #instructor-form-section select,
        #instructor-form-section textarea {
            width: 100%;
            padding: 0.75rem 1rem;
            border-radius: 0.75rem;
            border: 1px solid var(--if-border);
            background: #f9fafb;
            font-family: inherit;
            font-size: 0.95rem;
            transition: all 0.2s ease;
        }

        #instructor-form-section input:focus,
        #instructor-form-section textarea:focus,
        #instructor-form-section select:focus {
            outline: none;
            border-color: var(--if-primary);
            box-shadow: 0 0 0 4px rgba(91, 45, 216, 0.1);
            background: white;
        }

        /* Checkboxes Grid */
        #instructor-form-section .if-checkbox-group {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 0.75rem;
        }

        #instructor-form-section .if-checkbox-label {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
            font-size: 0.9rem;
            color: #4b5563;
            cursor: pointer;
            padding: 0.5rem;
            border-radius: 0.5rem;
            transition: background 0.2s;
        }
        
        #instructor-form-section .if-checkbox-label:hover {
            background: #f3f4f6;
        }

        #instructor-form-section input[type="checkbox"],
        #instructor-form-section input[type="radio"] {
            accent-color: var(--if-primary);
            width: 1rem;
            height: 1rem;
        }

        /* Hidden Section Logic */
        #instructor-form-section .hidden-section {
            display: none;
            background: #f8fafc;
            padding: 1.5rem;
            border-radius: 1rem;
            border: 1px solid #e2e8f0;
            margin-top: 1rem;
            animation: slideDown 0.3s ease-out;
        }

        @keyframes slideDown {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Submit Button */
        #instructor-form-section .if-btn-submit {
            display: inline-block;
            width: 100%;
            padding: 1rem;
            margin-top: 2rem;
            background: var(--if-gradient);
            color: white;
            border: none;
            border-radius: 0.75rem;
            font-size: 1rem;
            font-weight: 700;
            cursor: pointer;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            text-transform: uppercase;
            letter-spacing: 0.05em;
        }

        #instructor-form-section .if-btn-submit:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px -5px rgba(91, 45, 216, 0.3);
        }

        /* Responsive */
        @media (max-width: 900px) {
            #instructor-form-section .if-content {
                flex-direction: column-reverse;
            }

            #instructor-form-section .if-image-panel {
                height: 200px;
                flex: none;
            }

            #instructor-form-section .if-overlay-text {
                display: none; /* Hide text on mobile banner */
            }
            
            #instructor-form-section .if-form-panel {
                padding: 2rem 1.5rem;
            }

            #instructor-form-section .if-grid-2,
            #instructor-form-section .if-checkbox-group {
                grid-template-columns: 1fr;
            }
        }


        /* button css  */
/* =========================================
       APP DOWNLOAD SECTION (ISOLATED)
       ID: #app-iso-section
       ========================================= */

    #app-iso-section {
        /* Variables */
        --app-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%);
        --app-accent: #f472b6; 
        --app-text-white: #ffffff;
        --app-text-muted: #94a3b8;
        --app-btn-bg: #000000;
        --app-btn-hover: #1f2937;
        
        font-family: 'Inter', sans-serif;
        background: var(--app-bg-gradient);
        
        /* Dimensions & Layout */
        width: 100%;
        max-width: 1200px; 
        margin: 0 auto; /* Center the card */
        padding: 34px 20px; 
        
        /* 3D Look & Borders */
        border-radius: 32px; /* High border radius */
        border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle stroke */
        
        /* Layered Shadows for 3D Effect */
        box-shadow: 
            0 50px 100px -20px rgba(0, 0, 0, 0.5), /* Deep atmospheric shadow */
            0 30px 60px -30px rgba(0, 0, 0, 0.6),  /* Closer grounded shadow */
            inset 0 1px 0 rgba(255, 255, 255, 0.15); /* Top lighting highlight */

        color: var(--app-text-white);
        position: relative;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #app-iso-section * { box-sizing: border-box; }

    /* Background decoration */
    #app-iso-section::before {
        content: '';
        position: absolute;
        top: -20%;
        right: -10%;
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
        border-radius: 50%;
        pointer-events: none;
    }

    .app-container {
        width: 100%;
        display: grid;
        grid-template-columns: 1.5fr 1fr;
        align-items: center;
        gap: 20px;
        position: relative;
        z-index: 1;
    }

    /* --- LEFT CONTENT --- */
    .app-content {
        max-width: 600px;
        padding-left: 20px;
    }

    .app-tag {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.15);
        color: #e2e8f0;
        padding: 4px 12px;
        border-radius: 99px;
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 12px;
        backdrop-filter: blur(4px);
    }

    .app-title {
        font-size: clamp(1.8rem, 3vw, 2.8rem);
        font-weight: 800;
        line-height: 1.1;
        margin: 0 0 12px 0;
        background: linear-gradient(to right, #fff, #c7d2fe);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .app-desc {
        font-size: 1rem;
        line-height: 1.5;
        color: var(--app-text-muted);
        margin-bottom: 24px;
        max-width: 450px;
    }

    .app-buttons {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }
    .app-buttons1 {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 40px;
    }

    /* Store Button Style */
    .store-btn {
        display: flex;
        align-items: center;
        gap: 10px;
        background-color: var(--app-btn-bg);
        color: white;
        padding: 8px 16px;
        border-radius: 10px;
        text-decoration: none;
        transition: transform 0.2s ease, box-shadow 0.2s ease;
        border: 1px solid rgba(255,255,255,0.15);
        min-width: 140px;
    }

    .store-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 20px -5px rgba(0,0,0,0.3);
        border-color: rgba(255,255,255,0.3);
    }

    .store-icon {
        width: 22px;
        height: 22px;
    }

    .store-text {
        display: flex;
        flex-direction: column;
        line-height: 1;
    }

    .store-text small { font-size: 0.6rem; opacity: 0.8; margin-bottom: 2px; text-transform: uppercase; }
    .store-text span { font-size: 0.85rem; font-weight: 600; }

    /* --- RIGHT IMAGE (Phone Mockup) --- */
    .app-image-wrapper {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 400px; /* Reduced height to fit 468px total */
    }

    /* Glow behind phone */
    .app-glow {
        position: absolute;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(124, 58, 237, 0.4), transparent 70%);
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        filter: blur(40px);
        z-index: 0;
    }

    .phone-frame {
        width: 200px; /* Scaled down width */
        height: 400px; /* Scaled down height */
        background: #0f172a;
        border-radius: 30px;
        padding: 8px;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
        border: 5px solid #1e293b;
        position: relative;
        overflow: hidden;
        z-index: 2;
        /* Floating Animation */
        animation: floatPhone 6s ease-in-out infinite;
    }

    /* Notch */
    .phone-frame::before {
        content: '';
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 20px;
        background: #1e293b;
        border-radius: 0 0 12px 12px;
        z-index: 10;
    }

    .phone-screen {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 22px;
        overflow: hidden;
        position: relative;
    }

    .phone-img {
        width: 100%;
        height: 100%;
        /* object-fit: cover; */
    }

    /* Floating Badge */
    .app-float-badge {
        position: absolute;
        bottom: 60px;
        left: 0px; /* Tucked closer */
        background: rgba(30, 41, 59, 0.9);
        backdrop-filter: blur(12px);
        padding: 8px 14px;
        border-radius: 12px;
        border: 1px solid rgba(255,255,255,0.1);
        box-shadow: 0 10px 30px rgba(0,0,0,0.3);
        display: flex;
        align-items: center;
        gap: 8px;
        animation: floatBadge 5s ease-in-out infinite;
        animation-delay: 1s;
        z-index: 3;
    }

    .badge-icon {
        background: #10b981;
        color: white;
        padding: 5px;
        border-radius: 50%;
        display: flex;
    }

    .badge-text strong { display: block; font-size: 0.8rem; color: #fff; }
    .badge-text span { font-size: 0.65rem; color: #94a3b8; }

    @keyframes floatPhone {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-10px); }
    }

    @keyframes floatBadge {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(8px); }
    }

    /* --- RESPONSIVE --- */
    @media (max-width: 900px) {
        #app-iso-section { padding: 50px 20px; }
        
        .app-container {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 30px;
        }

        .app-content { margin: 0 auto; padding-left: 0; }
        .app-desc { margin-left: auto; margin-right: auto; }
        .app-buttons { justify-content: center; }
        
        .app-image-wrapper { height: 350px; margin-top: 10px; }
        .phone-frame { width: 175px; height: 350px; }
        
        .app-float-badge { 
            left: 50%; 
            transform: translateX(-50%); 
            bottom: -10px; 
            width: max-content;
            background: rgba(30, 41, 59, 0.95);
        }
        
        @keyframes floatBadge {
            0%, 100% { transform: translate(-50%, 0); }
            50% { transform: translate(-50%, 6px); }
        }
    }


    /* video section css  */
            /* --- Isolation Wrapper --- */
        .player-root-container {
            all: initial; /* Reset inherited styles */
            font-family: 'Inter', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            /* min-height: 100vh;
            background-color: #f8fafc; */
            padding: 1rem;
            box-sizing: border-box;
        }

        .player-root-container * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .player-root-container .main-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
        }

        /* --- Video Card Layout with Fixed Dimensions --- */
        .player-root-container .video-card {
            position: relative;
            /* Desktop Dimensions: 892 x 488 */
            width: 1400px;
            height: 520px;
            perspective: 1000px;
            cursor: pointer;
            background-color: #000;
            border-radius: 1.5rem;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        /* --- Overlay Elements --- */
        .player-root-container .video-overlay {
            position: absolute;
            inset: 0;
            z-index: 20;
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .player-root-container .overlay-bg {
            position: absolute;
            inset: 0;
            background-image: url('../img/element/video-bg.webp');
            background-size: cover;
            background-position: center;
            transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
        }

        .player-root-container .video-card:hover .overlay-bg {
            transform: scale(1.08);
        }

        .player-root-container .overlay-tint {
            position: absolute;
            inset: 0;
            background: linear-gradient(to top, #020617 0%, rgba(15, 23, 42, 0.3) 50%, transparent 100%);
            opacity: 0.85;
        }

        .player-root-container .content-container {
            position: absolute;
            inset: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1.5rem;
            text-align: center;
        }

        /* --- UI Components --- */
        .player-root-container .badge {
            position: absolute;
            top: 1.5rem;
            left: 1.5rem;
            background: rgba(255, 255, 255, 0.12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            padding: 0.4rem 0.9rem;
            border-radius: 9999px;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: #fff;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }

        /* --- Play Button Animation --- */
        @keyframes isolated-pulse-border {
            0% { transform: scale(1); opacity: 0.8; }
            100% { transform: scale(1.7); opacity: 0; }
        }

        .player-root-container .play-button-wrapper {
            position: relative;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            z-index: 10;
            transform: scale(1);
        }

        .player-root-container .video-card:hover .play-button-wrapper {
            transform: scale(1.15);
        }

        .player-root-container .play-ring {
            position: absolute;
            inset: -6px;
            border: 2px solid #3b82f6;
            border-radius: 9999px;
            opacity: 1; 
            animation: isolated-pulse-border 2s infinite;
        }

        .player-root-container .play-icon-circle {
            width: 5.5rem;
            height: 5.5rem;
            background-color: #fff;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2563eb;
            box-shadow: 0 20px 30px -10px rgba(0, 0, 0, 0.3);
            transition: all 0.3s ease;
        }

        .player-root-container .video-card:hover .play-icon-circle {
            background-color: #2563eb;
            color: #fff;
        }

        .player-root-container .play-icon-circle svg {
            width: 2.5rem;
            height: 2.5rem;
            margin-left: 0.375rem;
        }

        /* --- Info Section --- */
        .player-root-container .bottom-info {
            position: absolute;
            bottom: 2rem;
            left: 2rem;
            right: 2rem;
            text-align: left;
        }

        .player-root-container .video-title {
            color: #fff;
            font-size: 1.75rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            opacity: 1;
            text-shadow: 0 2px 10px rgba(0,0,0,0.3);
        }

        .player-root-container .video-meta {
            display: flex;
            align-items: center;
            gap: 1rem;
            color: #e2e8f0;
            font-size: 0.9rem;
            opacity: 0.9;
        }

        .player-root-container .meta-tag {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 11px;
            letter-spacing: 0.08em;
        }

        .player-root-container .meta-tag svg {
            width: 1.1rem;
            height: 1.1rem;
        }

        /* --- Video & Logic --- */
        .player-root-container video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        .player-root-container .hidden {
            display: none !important;
        }

        .player-root-container .fade-out {
            opacity: 0;
            pointer-events: none;
            transform: scale(1.05);
        }

        /* Scrollbar Isolation */
        .player-root-container ::-webkit-scrollbar {
            display: none;
        }

        /* --- Mobile Responsive Tweaks (352x192) --- */
        @media (max-width: 920px) {
            .player-root-container .video-card {
                /* Mobile Dimensions: 352 x 192 */
                width: 352px;
                height: 192px;
                border-radius: 1rem;
            }
            
            .player-root-container .play-icon-circle {
                width: 3.5rem;
                height: 3.5rem;
            }

            .player-root-container .play-icon-circle svg {
                width: 1.5rem;
                height: 1.5rem;
            }

            .player-root-container .video-title {
                font-size: 1rem;
                margin-bottom: 0.25rem;
            }

            .player-root-container .video-meta {
                font-size: 0.75rem;
            }

            .player-root-container .bottom-info {
                bottom: 1rem;
                left: 1rem;
            }

            .player-root-container .badge {
                top: 0.75rem;
                left: 0.75rem;
                padding: 0.25rem 0.6rem;
                font-size: 8px;
            }
        }

        /* Handling extra small screens to avoid overflow */
        @media (max-width: 370px) {
            .player-root-container .video-card {
                width: 100%;
                height: auto;
                aspect-ratio: 352 / 192;
            }
        }




        /* Seamless Infinite Marquee Section */


          /* ISOLATED SCOPE: All styles prefixed with #summit-app-root */
        #summit-app-root {
            --brand-gradient: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);
            --white: #ffffff;
            --slate-50: #f8fafc;
            --slate-100: #f1f5f9;
            --slate-200: #e2e8f0;
            --slate-400: #94a3b8;
            --slate-500: #64748b;
            --slate-800: #1e293b;
            --slate-900: #0f172a;
            --deep-navy: #0b0e37;
            --blue-brand: #0d9488;
            --transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            
            font-family: 'Inter', sans-serif;
            background-color: var(--white);
            color: var(--slate-800);
            line-height: 1.5;
            overflow-x: hidden;
            display: block;
        }

        #summit-app-root * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* --- MARQUEE SECTION --- */
        #summit-app-root .ss-marquee-container {
            /* background-color: #ffffff; */
            /* padding: 80px 0; */
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
        }
        #summit-app-root .ss-marquee-container2 {
            background-color: #000000;
            /* padding: 80px 0; */
            overflow: hidden;
            display: flex;
            flex-direction: column;
            gap: 0;
            position: relative;
        }

        #summit-app-root .ss-marquee-row {
            display: flex;
            width: 100%;
            padding: 20px 0;
            position: relative;
            z-index: 2;
        }

        #summit-app-root .ss-marquee-strip {
            display: inline-flex;
            white-space: nowrap;
            animation: ssInfiniteScroll 25s linear infinite;
        }

        #summit-app-root .ss-marquee-strip-reverse {
            animation: ssInfiniteScrollReverse 25s linear infinite;
        }

        #summit-app-root .ss-marquee-content-block {
            display: flex;
            align-items: center;
            padding: 15px 0;
            background: #0d9488;
            color: white;
            font-size: 3.5rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        #summit-app-root .ss-marquee-strip-reverse .ss-marquee-content-block {
            background: #3c2bb3;
        }

        #summit-app-root .ss-marquee-item {
            display: inline-block;
            padding: 0 40px;
        }

        #summit-app-root .ss-marquee-divider {
            opacity: 0.4;
            font-weight: 300;
        }

        /* Slanted effect */
        #summit-app-root .ss-marquee-row.slant-up {
            transform: rotate(-3deg) translateY(20px);
        }
        #summit-app-root .ss-marquee-row.slant-down {
            transform: rotate(2deg) translateY(-20px);
        }

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

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

        /* RESPONSIVE MEDIA QUERIES */
        @media (min-width: 768px) {
            #summit-app-root .ss-marquee-content-block { font-size: 4.5rem; }
        }



          /* who attend  */

        /* ==========================================================================
       ISOLATED CSS SCOPE (#fc-attendees-module)
       ========================================================================== */
    
    #fc-attendees-module {
      font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
      /* UPDATED: Deep dark blue background matching the reference image */
      background-color: #0a0f25; 
      color: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 100vh;
      padding: 6rem 1.5rem;
      position: relative;
      overflow: hidden;
      border-radius: 100px 100px 0px 0px;
    }

    #fc-attendees-module *,
    #fc-attendees-module *::before,
    #fc-attendees-module *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 1.6px;
    }

    .fc-attendees-container {
      width: 100%;
      max-width: 1200px;
      display: flex;
      flex-direction: column;
      gap: 4rem;
      position: relative;
      z-index: 10;
    }

    /* --- HEADER AREA --- */
    .fc-header-wrapper {
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
    }

    .fc-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1.2rem;
      border-radius: 9999px;
      background: rgba(81, 53, 255, 0.1);
      border: 1px solid rgba(81, 53, 255, 0.3);
      color: #a78bfa;
      font-size: 0.85rem;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
    }

    .fc-section-title {
      /* font-size: clamp(2.5rem, 5vw, 4rem); */
      font-weight: 800;
      letter-spacing: -0.03em;
      line-height: 1.1;
      color: #ffffff;
      margin: 0;
    }

    /* NO SPANS USED! Using strong for gradient text */
    .fc-section-title strong {
      background: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;
      font-weight: inherit;
    }

    .fc-section-desc {
      font-size: 1.1rem;
      color: #94a3b8;
      max-width: 600px;
      line-height: 1.6;
    }

    /* --- BENTO GRID LAYOUT --- */
    .fc-bento-grid {
      display: grid;
      /* 3 Column Layout for Desktop */
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      width: 100%;
    }

    /* --- BENTO CARDS --- */
    .fc-bento-card {
      /* UPDATED: Changed to a transparent white tint so the new dark blue background shines through the glass beautifully */
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border: 1px solid rgba(255, 255, 255, 0.08);
      border-radius: 24px;
      /* INCREASED PADDING for more breathing room */
      padding: 2.5rem;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      position: relative;
      overflow: hidden;
      transition: transform 0.3s ease, border-color 0.3s ease;
    }

    /* Mouse Spotlight Hover Effect Layer */
    .fc-bento-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: inherit;
      background: radial-gradient(
        800px circle at var(--mouse-x) var(--mouse-y), 
        rgba(81, 53, 255, 0.06),
        transparent 40%
      );
      z-index: 0;
      opacity: 0;
      transition: opacity 0.5s ease;
      pointer-events: none;
    }

    .fc-bento-card:hover::before {
      opacity: 1;
    }

    .fc-bento-card:hover {
      border-color: rgba(255, 255, 255, 0.2);
      transform: translateY(-4px);
    }

    /* Bento Grid Spanning Logistics */
    .fc-span-2 { grid-column: span 2; }
    .fc-span-1 { grid-column: span 1; }

    /* --- CARD HEADER --- */
    .fc-card-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      position: relative;
      z-index: 1;
    }

    .fc-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .fc-card-icon svg {
      width: 24px;
      height: 24px;
      stroke: #a1e6ec; /* Cyber Cyan */
      fill: none;
      stroke-width: 1.5;
    }

    .fc-card-title {
      font-size: 1.25rem;
      font-weight: 700;
      color: #ffffff;
      margin: 0;
      letter-spacing: -0.01em;
    }

    /* --- CHIPS CONTAINER (Roles) --- */
    .fc-chips-container {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem;
      position: relative;
      z-index: 1;
    }

    /* The "Pill" design for each role instead of boring text lists */
    .fc-role-chip {
      background: rgba(255, 255, 255, 0.03);
      border: 1px solid rgba(255, 255, 255, 0.1);
      padding: 0.5rem 1rem;
      border-radius: 9999px;
      font-size: 0.9rem;
      color: #cbd5e1;
      font-weight: 500;
      transition: all 0.3s ease;
      cursor: default;
      display: inline-flex;
      align-items: center;
      /* FIX: Ensures long text wraps inside the chip instead of touching the card edges */
      max-width: 100%;
      white-space: normal;
      line-height: 1.4;
      text-align: left;
    }

    .fc-role-chip:hover {
      background: linear-gradient(93deg, rgba(81, 53, 255, 0.8) 10.65%, rgba(255, 84, 85, 0.8) 89.35%);
      color: #ffffff;
      border-color: transparent;
      transform: translateY(-2px);
      box-shadow: 0 4px 15px rgba(81, 53, 255, 0.4);
    }

    /* ==========================================================================
       RESPONSIVE DESIGN
       ========================================================================== */
    @media (max-width: 992px) {
      .fc-bento-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      /* Reset spans for tablet */
      .fc-span-2 { grid-column: span 1; }
      
      /* Make specific cards span 2 on tablet to keep grid full */
      .fc-bento-card:nth-child(7) { grid-column: span 2; }
    }

    @media (max-width: 768px) {
      #fc-attendees-module {
        padding: 4rem 1rem;
      }
      .fc-bento-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
      }
      .fc-bento-card:nth-child(7) { grid-column: span 1; }
      
      .fc-bento-card {
        /* INCREASED MOBILE PADDING so it doesn't touch the edges */
        padding: 2rem;
      }
      
      .fc-role-chip {
        font-size: 0.85rem;
        padding: 0.5rem 0.9rem;
      }
    }



            /* ==============================================================
           🚀 START OF ISOLATED FAB CSS (Copy to your project)
           ============================================================== */
        
        /* 1. Component Specific Reset */
        .fcrf-action-row, .fcrf-fab-master, .fcrf-fab-container, .fcrf-progress-ring {
            box-sizing: border-box;
            font-family: 'Inter', system-ui, -apple-system, sans-serif; 
        }
        .fcrf-action-row *, .fcrf-action-row *::before, .fcrf-action-row *::after {
            box-sizing: border-box;
        }

        /* 2. Action Row (Holds both buttons in a single row) */
        .fcrf-action-row {
            position: fixed;
            bottom: 77px; 
            right: 7px;
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px; 
            z-index: 99999; 
        }

        /* 3. Master Wrapper (Holds both FAB and Ring) */
        .fcrf-fab-master {
            position: relative; 
            width: 62px;
            height: 62px;
        }

        /* 4. Main FAB Container */
        .fcrf-fab-container {
            position: absolute;
            bottom: 6px; 
            right: 6px;
            width: 50px;
            height: 50px;
            border-radius: 25px;
            background: linear-gradient(#000000, #000000) padding-box, 
                        linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%) border-box;
            border: 2px solid transparent; 
            display: flex;
            flex-direction: column;
            align-items: flex-end; 
            justify-content: flex-end;
            transition: height 0.4s cubic-bezier(0.25, 1, 0.5, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1); 
            overflow: hidden;
            z-index: 2; 
        }

        /* Adjusted height back to 360px for 5 items */
        .fcrf-fab-container.active {
            height: 360px; 
            width: 210px; 
        }

        /* 5. Menu Wrapper */
        .fcrf-fab-menu {
            display: flex;
            flex-direction: column;
            align-items: stretch;
            width: 100%;
            position: absolute;
            bottom: 50px; 
            padding-bottom: 12px;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
            transform: translateY(20px);
        }

        .fcrf-fab-container.active .fcrf-fab-menu {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
            transition-delay: 0.1s; 
        }

        /* Individual Icon Buttons */
        .fcrf-fab-action {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            width: auto;
            height: 44px;
            margin: 5px 12px;
            padding: 0 16px;
            gap: 14px;
            color: #ffffff !important;
            text-decoration: none !important;
            border-radius: 22px; 
            transition: background-color 0.2s, transform 0.2s, color 0.2s;
            -webkit-tap-highlight-color: transparent;
        }

        .fcrf-fab-action svg {
            flex-shrink: 0; 
            stroke: currentColor; 
        }

        .fcrf-action-text {
            font-size: 15px;
            font-weight: 500;
            white-space: nowrap; 
            opacity: 0;
            transform: translateX(-5px);
            transition: opacity 0.2s ease, transform 0.2s ease;
        }

        .fcrf-fab-container.active .fcrf-action-text {
            opacity: 1;
            transform: translateX(0);
            transition-delay: 0.15s;
        }

        /* Main Toggle Button */
        .fcrf-fab-toggle {
            width: 46px; /* Offset for 2px border */
            height: 46px;
            border-radius: 50%;
            background: transparent;
            border: none;
            position: absolute;
            bottom: 0;
            right: 0;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            outline: none;
            -webkit-tap-highlight-color: transparent;
            padding: 0;
        }

        .fcrf-icon-squiggle, .fcrf-icon-close {
            position: absolute;
            transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease;
            stroke: #ffffff; 
        }

        .fcrf-icon-close {
            opacity: 0;
            transform: rotate(-90deg) scale(0.5);
        }

        .fcrf-fab-container.active .fcrf-icon-squiggle {
            opacity: 0;
            transform: rotate(90deg) scale(0.5);
        }

        .fcrf-fab-container.active .fcrf-icon-close {
            opacity: 1;
            transform: rotate(0) scale(1);
        }

        /* 6. Scroll Progress Ring */
        .fcrf-progress-ring {
            position: absolute;
            bottom: 0; 
            right: 0;
            width: 62px;
            height: 62px;
            pointer-events: none; 
            z-index: 1; 
            transform: rotate(-90deg); 
            transition: opacity 0.3s ease;
        }

        .fcrf-progress-ring.hidden {
            opacity: 0; 
        }

        .fcrf-progress-circle {
            fill: transparent;
            stroke-width: 3; 
            stroke-linecap: round;
        }

        /* 7. Scroll To Top Button */
        .fcrf-scroll-top {
            position: relative; 
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(#000000, #000000) padding-box, 
                        linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%) border-box;
            border: 2px solid transparent;
            color: #ffffff;
            box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            opacity: 0;
            pointer-events: none;
            /* Default hidden state */
            transform: translateY(20px);
            transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), background 0.2s ease;
            -webkit-tap-highlight-color: transparent;
        }

        .fcrf-scroll-top.visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }


        /* 🎯 SAFE HOVER: Only applied to real cursors, prevents mobile hover traps */
        @media (hover: hover) and (pointer: fine) {
            .fcrf-scroll-top:hover {
                color: #ffffff;
                /* Background change is fine, but REMOVED transform scale/translate to fix iOS bug */
                background: linear-gradient(#1f2937, #1f2937) padding-box, 
                            linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%) border-box;
            }
            .fcrf-fab-action:hover {
                background-color: rgba(255, 255, 255, 0.15); 
                color: #ffffff !important;
                transform: translateX(4px); 
            }
        }
        
        /* Mobile adjust for FAB */
        @media (max-width: 768px) {
            .fcrf-action-row { bottom: 65px; right: 7px; } 
            .fcrf-fab-menu { bottom: 50px; }
        }
        




               /* --- ISOLATED TIMELINE COMPONENT STYLES --- */
        /* All classes are prefixed with 'iso-tl-' and scoped to avoid conflicts */
        
        .iso-tl-wrapper {
            font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            color: #1a1a1a;
            line-height: 1.6;
            
        }

        /* Reset only inside the wrapper to prevent breaking parent website */
        .iso-tl-wrapper * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        .iso-tl-heading {
            max-width: 1100px;
            margin: 0 auto 60px auto;
            text-align: left;
            font-size: 36px;
            font-weight: 800;
            background: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .iso-tl-container {
            max-width: 1100px;
            margin: 0 auto;
            position: relative;
        }

        .iso-tl-track {
            position: absolute;
            left: 300px; 
            top: 24px; 
            bottom: 24px; 
            width: 2px;
            background-color: #e5e7eb;
            transform: translateX(-50%);
            z-index: 1;
        }

        .iso-tl-progress-fill {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            background: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);
            height: 0%; 
        }

        .iso-tl-step {
            display: grid;
            grid-template-columns: 250px 60px 1fr;
            gap: 20px;
            margin-bottom: 40px;
            position: relative;
            z-index: 2;
        }

        .iso-tl-step:last-child {
            margin-bottom: 0;
        }

        .iso-tl-step-left {
            text-align: left;
            padding-top: 5px;
        }

        .iso-tl-step-number {
            font-size: 14px;
            font-weight: 800;
            margin-bottom: 8px;
            color: #1a1a1a;
        }

        .iso-tl-step-title {
            font-size: 22px;
            font-weight: 600;
            line-height: 1.3;
        }

        .iso-tl-step-title strong {
            font-weight: 400;
            display: block;
            color: #374151;
        }

        .iso-tl-step-center {
            display: flex;
            justify-content: center;
            align-items: flex-start;
        }

        .iso-tl-step-icon {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            background-color: #f3f4f6; 
            display: flex;
            justify-content: center;
            align-items: center;
            border: 4px solid #ffffff; 
            box-shadow: 0 0 0 1px #e5e7eb; 
            transition: all 0.4s ease;
            color: #9ca3af; 
        }

        .iso-tl-step-icon.active {
            background: linear-gradient(93deg, #0d9488 10.65%, #f97316 89.35%);
            box-shadow: 0 0 0 1px #0d9488; 
            color: #ffffff;
        }

        .iso-tl-step-right {
            background-color: #f8f9fa;
            border-radius: 8px;
            padding: 30px;
            border: 1px solid #f3f4f6;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
        }

        .iso-tl-step-right h4 {
            font-size: 20px;
            font-weight: 500;
            color: #1a1a1a;
            margin-bottom: 12px;
        }

        .iso-tl-step-right h5 {
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-top: 20px;
            margin-bottom: 8px;
        }

        .iso-tl-step-right p {
            font-size: 12px;
            color: #4b5563;
            margin-bottom: 15px;
        }

        .iso-tl-step-right ul {
            list-style-type: none;
            padding-left: 0;
        }

        .iso-tl-step-right li {
            position: relative;
            padding-left: 14px;
            font-size: 12px;
            color: #4b5563;
            margin-bottom: 8px;
            font-weight: 500;
        }

        .iso-tl-step-right li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 6px;
            width: 4px;
            height: 4px;
            background-color: #374151;
            border-radius: 50%;
        }

        @media (max-width: 768px) {
            .iso-tl-track {
                left: 30px; 
            }
            .iso-tl-step {
                grid-template-columns: 60px 1fr; 
                gap: 15px;
            }
            .iso-tl-step-left {
                grid-column: 2; 
                grid-row: 1;
                padding-top: 0;
            }
            .iso-tl-step-right {
                grid-column: 2; 
                grid-row: 2;
                padding: 20px;
            }
            .iso-tl-step-center {
                grid-column: 1; 
                grid-row: 1 / span 2; 
            }
            .iso-tl-step-title strong {
                display: inline; 
            }
        }






     /* =========================================
           1. ISOLATED RESETS & VARIABLES
           ========================================= */
        .isolated-footer-module {
            font-family: 'Inter', sans-serif;
            background-color: #000000; /* Footer base background */
            color: #000000;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            width: 100%;
        }
        
        .isolated-footer-module *, 
        .isolated-footer-module ::before, 
        .isolated-footer-module ::after {
            box-sizing: border-box;
            border-width: 0;
            border-style: solid;
            border-color: currentColor;
            margin: 0.2px; /* Original code had this, keeping it but it's unusual */
            padding: 0;
        }

        .isolated-footer-module h1, 
        .isolated-footer-module h2, 
        .isolated-footer-module h3, 
        .isolated-footer-module p { margin: 0; padding: 0; }
        
        .isolated-footer-module button { 
            cursor: pointer; 
            background: transparent; 
            padding: 0; 
            font-family: inherit; 
            font-size: inherit; 
            line-height: inherit; 
        }
        
        .isolated-footer-module a { color: inherit; text-decoration: inherit; }
        .isolated-footer-module img, .isolated-footer-module svg { display: block; }
        .isolated-footer-module hr { height: 0; color: inherit; border-top-width: 1px; }

        /* =========================================
           2. LAYOUT WRAPPERS
           ========================================= */
        .isolated-footer-module .main-wrapper {
            background-color: #ffffff;
            position: relative;
            z-index: 10; /* Keeps the white box above the fixed footer */
            border-bottom-left-radius: 2rem;
            border-bottom-right-radius: 2rem;
            box-shadow: 0 25px 50px -12px rgba(0,0,0,0.8);
            display: flex;
            flex-direction: column;
            overflow: hidden;
        }

        @media (min-width: 768px) {
            .isolated-footer-module .main-wrapper {
                border-bottom-left-radius: 4rem;
                border-bottom-right-radius: 4rem;
            }
        }

        .isolated-footer-module .bg-pattern {
            position: absolute;
            top: 25%;
            left: 0;
            width: 100%;
            height: 400px;
            pointer-events: none;
            opacity: 0.04;
            z-index: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
        }

        /* =========================================
           3. WHAT DEFINES US SECTION
           ========================================= */
        .isolated-footer-module .defines-us-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            width: 100%;
            max-width: 1536px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
            padding: 4rem 1rem 2rem 1rem;
        }
        @media (min-width: 768px) { .isolated-footer-module .defines-us-section { padding: 6rem 3rem 3rem 3rem; } }
        @media (min-width: 1024px) { .isolated-footer-module .defines-us-section { padding: 6rem 5rem 3rem 5rem; } }

        .isolated-footer-module .defines-us-grid {
            display: grid;
            grid-template-columns: repeat(12, minmax(0, 1fr));
            gap: 1rem;
            align-items: flex-start;
            width: 100%;
            position: relative;
        }
        @media (min-width: 768px) { .isolated-footer-module .defines-us-grid { gap: 3rem; } }

        .isolated-footer-module .left-col {
            grid-column: span 5 / span 5;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            width: 100%;
        }
        @media (min-width: 768px) { .isolated-footer-module .left-col { grid-column: span 4 / span 4; } }

        .isolated-footer-module .right-col {
            grid-column: span 7 / span 7;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            position: relative;
            padding-left: 0.5rem;
        }
        @media (min-width: 768px) { .isolated-footer-module .right-col { grid-column: span 8 / span 8; padding-left: 4rem; margin-top: 0.5rem; } }
        @media (min-width: 1280px) { .isolated-footer-module .right-col { padding-left: 6rem; } }

        /* Typography */
        .isolated-footer-module .title-main {
            font-weight: 900;
            letter-spacing: -0.025em;
            color: #000000;
            margin-bottom: 1.5rem;
            font-size: clamp(1.2rem, 4vw, 3.75rem);
            line-height: 1.1;
        }
        @media (min-width: 768px) { .isolated-footer-module .title-main { margin-bottom: 5rem; } }

        .isolated-footer-module .subtitle-main {
            font-weight: 700;
            letter-spacing: -0.025em;
            color: #000000;
            margin-bottom: 1rem;
            font-size: clamp(1rem, 2.5vw, 2.75rem);
            line-height: 1.3;
        }
        @media (min-width: 768px) { .isolated-footer-module .subtitle-main { margin-bottom: 2rem; } }

        .isolated-footer-module .text-desc {
            color: #6b7280;
            font-weight: 500;
            margin-bottom: 1.5rem;
            font-size: clamp(0.6rem, 1.25vw, 1.25rem);
            line-height: 1.6;
        }
        @media (min-width: 768px) { .isolated-footer-module .text-desc { margin-bottom: 3rem; } }

        /* Button */
        .button-group{
            display: flex;
            align-items: center;
            gap: 1rem;
            flex-wrap: wrap; /* responsive */
        }

        .isolated-footer-module .btn-primary,
        .isolated-footer-module .btn-secondary {
            background-color: #000000;
            color: #ffffff;
            border-radius: 9999px;
            font-weight: 700;
            letter-spacing: 0.025em;
            transition: background-color 0.15s ease-in-out;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1rem, 3vw, 2rem);
            font-size: clamp(0.6rem, 1vw, 15px);
            border: none;
            cursor: pointer;
        }
        @media (min-width: 768px) { 
            .isolated-footer-module .btn-primary,
            .isolated-footer-module .btn-secondary { gap: 0.75rem; } 
        }
        .isolated-footer-module .btn-primary:hover,
        .isolated-footer-module .btn-secondary:hover { background-color: #1f2937; }
        .isolated-footer-module .btn-icon { font-size: clamp(0.8rem, 1.5vw, 1.25rem); line-height: 1; font-weight: inherit; }

        /* Arrow */
        .isolated-footer-module .tracking-arrow-container {
            position: relative;
            width: 20vw;
            height: 20vw;
            max-width: 280px;
            max-height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            align-self: center;
        }
        @media (min-width: 768px) {
            .isolated-footer-module .tracking-arrow-container { align-self: flex-start; margin-left: 1rem; }
        }
        .isolated-footer-module #tracking-arrow {
            width: 100%;
            height: 100%;
            overflow: visible;
            will-change: transform;
            transform-origin: 50% 50%;
        }

        /* =========================================
           4. CLOCKS SECTION
           ========================================= */
        .isolated-footer-module .clocks-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap; /* Allowed to wrap on very small screens */
            justify-content: center;
            position: relative;
            z-index: 10;
            width: 100%;
            overflow: hidden;
            gap: 0.5rem;
            padding: 1.5rem 0.5rem 2.5rem 0.5rem;
        }
        @media (min-width: 768px) {
            .isolated-footer-module .clocks-container { flex-wrap: nowrap; gap: 1.5rem; padding: 2rem 1rem 3rem 1rem; }
        }

        .isolated-footer-module .clock-item {
            border: 1px solid #000000;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            background-color: #ffffff;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
            white-space: nowrap;
            padding: 0.375rem 0.625rem;
            gap: 0.25rem;
            font-size: clamp(0.5rem, 1.2vw, 1rem);
        }
        @media (min-width: 768px) {
            .isolated-footer-module .clock-item { border-radius: 2rem; padding: 0.625rem 1.25rem; gap: 0.5rem; }
        }

        .isolated-footer-module .clock-label { font-weight: 700; }
        .isolated-footer-module .clock-time { color: #000000; font-weight: 500; }

        /* =========================================
           5. FOOTER SECTION
           ========================================= */
        .isolated-footer-module .main-footer {
            /* FIXED POSITION RESTORED for the curtain effect */
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #000000;
            color: #ffffff;
            z-index: 1; /* Prevents getting trapped behind white backgrounds */
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 5rem 1rem 6rem 1rem; /* Less padding on mobile */
            visibility: hidden; /* JS handles this so it never overlaps other sections */
        }
        @media (min-width: 768px) { .isolated-footer-module .main-footer { padding: 6rem 3rem 2.5rem 3rem; } }

        .isolated-footer-module .footer-logo-wrap {
            display: flex;
            justify-content: center;
            width: 100%;
            margin-bottom: 1.5rem;
        }
        @media (min-width: 768px) { .isolated-footer-module .footer-logo-wrap { margin-bottom: 3rem; } }

        .isolated-footer-module .footer-logo { width: 6rem; height: auto; object-fit: contain; }
        @media (min-width: 768px) { .isolated-footer-module .footer-logo { width: 12rem; } }
        @media (min-width: 1024px) { .isolated-footer-module .footer-logo { width: 16rem; } }

        .isolated-footer-module .giant-text-container {
            display: flex;
            justify-content: center;
            width: 100%;
            overflow: hidden;
            user-select: none;
            margin-bottom: 2rem;
            padding: 1rem 2vw 1rem 2vw; /* Added top padding to accommodate taller text */
        }
        @media (min-width: 768px) { .isolated-footer-module .giant-text-container { margin-bottom: 4rem; padding: 1.5rem 2vw 1.5rem 2vw; } }

        .isolated-footer-module .giant-text-inner {
            display: inline-flex;
            flex-direction: column;
            position: relative;
            transform: translateY(140px); /* Increased slightly to hide the taller text fully before reveal */
            opacity: 0;
            transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
            padding-bottom: 0.5rem; /* Extra protection against bottom cut-off */
        }

        .isolated-footer-module .main-footer.is-visible .giant-text-inner {
            transform: translateY(0);
            opacity: 1;
        }

        .isolated-footer-module .new-branding-layout {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            width: 100%;
        }

        .isolated-footer-module .branding-top {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            color: #ffffff;
        }

        .isolated-footer-module .brand-name {
            font-family: 'Aquire', sans-serif;
            font-size: clamp(1rem, 2.5vw, 1.5rem);
            font-weight: 600;
            letter-spacing: 0.1em; /* Widened slightly to fit the uppercase academy text nicely */
        }

        .isolated-footer-module .giant-muted-text {
            /* font-family: 'Aquire', sans-serif; */
            font-size: clamp(2rem, 9.5vw, 13rem); /* Increased font size slightly */
            font-weight: 900; /* Increased to maximum weight for a heavy, bold look */
            line-height: 1.3; /* Adjusted line height */
            margin-bottom: 0;
            white-space: nowrap;
            letter-spacing: -0.05em; /* Pulled closer to fit width */
            transform: scaleY(1.15); /* Vertically stretches the text to specifically increase its height */
            
            /* Moving Glowing/Shimmer Effect */
            color: #3a3a3a; /* Fallback */
            background: linear-gradient(110deg, #3a3a3a 0%, #3a3a3a 40%, #ffffff 50%, #3a3a3a 60%, #3a3a3a 100%);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: textGlowSweep 4s linear infinite;
        }

        @keyframes textGlowSweep {
            to {
                background-position: 200% center;
            }
        }

        .isolated-footer-module .footer-divider {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            margin-bottom: 1.5rem;
            width: 100%;
        }
        @media (min-width: 768px) { .isolated-footer-module .footer-divider { margin-bottom: 2rem; } }

        /* Mobile First Flex Layout - RESTORED TO PREVIOUS 3-COLUMN LAYOUT */
        .isolated-footer-module .footer-bottom {
            display: flex;
            flex-direction: column; /* Stack vertically on mobile */
            justify-content: center;
            align-items: center;
            width: 100%;
            gap: 1.25rem; /* Give them breathing room */
        }
        @media (min-width: 768px) {
            .isolated-footer-module .footer-bottom {
                flex-direction: row; /* Side-by-side on desktop */
                justify-content: space-between;
                gap: 0.5rem;
            }
        }

        .isolated-footer-module .social-icons,
        .isolated-footer-module .nav-links,
        .isolated-footer-module .footer-copy {
            display: flex;
            width: 100%; /* Full width on mobile */
            justify-content: center; /* Centered on mobile */
        }
        
        @media (min-width: 768px) {
            .isolated-footer-module .social-icons,
            .isolated-footer-module .nav-links,
            .isolated-footer-module .footer-copy {
                width: 33.333333%; /* Split into thirds on desktop */
            }
            .isolated-footer-module .social-icons { justify-content: flex-start; }
            .isolated-footer-module .footer-copy { text-align: right; display: block; }
        }

        .isolated-footer-module .social-icons {
            gap: 1rem;
        }
        @media (min-width: 768px) { .isolated-footer-module .social-icons { gap: 1.5rem; } }

        /* Store Badges CSS - MOVED TO ABSOLUTE BOTTOM */
        .isolated-footer-module .app-downloads-wrapper {
            display: flex;
            width: 100%;
            justify-content: center;
            margin-top: 2rem; /* Creates space below the social/nav row */
        }

        .isolated-footer-module .app-downloads {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .isolated-footer-module .store-badge {
            display: inline-flex;
            align-items: center;
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 0.5rem;
            padding: 0.4rem 0.75rem;
            color: #ffffff;
            gap: 0.5rem;
            transition: all 0.2s ease-in-out;
            text-decoration: none;
        }

        .isolated-footer-module .store-badge:hover {
            border-color: #ffffff;
            background-color: rgba(255, 255, 255, 0.05);
        }

        .isolated-footer-module .store-badge svg {
            width: 1.25rem;
            height: 1.25rem;
            fill: currentColor;
        }

        .isolated-footer-module .store-badge-text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .isolated-footer-module .store-badge-sub {
            font-size: 0.45rem;
            line-height: 1;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: #9ca3af;
        }

        .isolated-footer-module .store-badge-title {
            font-size: 0.75rem;
            font-weight: 600;
            line-height: 1.2;
        }

        .isolated-footer-module .social-icon-link {
            color: #ffffff;
            transition: color 0.15s ease-in-out;
        }
        .isolated-footer-module .social-icon-link:hover { color: #9ca3af; }

        .isolated-footer-module .svg-sm { width: 1.25rem; height: 1.25rem; } 
        .isolated-footer-module .svg-md { width: 1.5rem; height: 1.5rem; }

        .isolated-footer-module .nav-links {
            font-weight: 600;
            letter-spacing: 0.025em;
            white-space: normal; 
            flex-wrap: wrap;
            font-size: clamp(0.6rem, 1vw, 13px);
            column-gap: 1rem;
            row-gap: 0.5rem;
        }
        @media (min-width: 768px) { 
            .isolated-footer-module .nav-links { column-gap: 1.25rem; white-space: nowrap; flex-wrap: nowrap; font-size: clamp(0.45rem, 1vw, 13px); } 
        }
        
        .isolated-footer-module .nav-links a { transition: color 0.15s ease-in-out; }
        .isolated-footer-module .nav-links a:hover { color: #d1d5db; }

        .isolated-footer-module .footer-copy {
            text-align: center;
            color: #d1d5db;
            line-height: 1.4;
            font-size: clamp(0.55rem, 0.9vw, 12px);
        }
        @media (min-width: 768px) {
            .isolated-footer-module .footer-copy { line-height: 1.25; font-size: clamp(0.4rem, 0.9vw, 12px); }
        }

        /* Made By Section CSS */
        .isolated-footer-module .divider-bottom {
            border-top: 1px solid rgba(255, 255, 255, 0.15);
            margin-top: 2rem;
            margin-bottom: 1rem;
            width: 100%;
        }

        .isolated-footer-module .made-by-text {
            text-align: center;
            color: #9ca3af;
            font-size: clamp(0.55rem, 0.8vw, 11px);
            letter-spacing: 0.05em;
            font-weight: 500;
        }