#workshop-component {
        /* --- COMPONENT VARIABLES --- */
        --ws-font: 'Plus Jakarta Sans', sans-serif;
        --ws-bg: #ffffff;
        --ws-text-main: #111827;
        --ws-text-muted: #6b7280;
        --ws-white: #ffffff;
        --ws-border: #e5e7eb;
        --ws-primary: #7c3aed;
        --ws-accent-pink: #db2777;
        
        /* Tag Colors */
        --ws-bg-blue: #eff6ff; --ws-text-blue: #1d4ed8;
        --ws-bg-purple: #f3e8ff; --ws-text-purple: #7e22ce;
        --ws-bg-green: #f0fdf4; --ws-text-green: #15803d;
        --ws-bg-orange: #fff7ed; --ws-text-orange: #c2410c;

        --ws-shadow-hover: 0 20px 40px -15px rgba(0,0,0,0.1);
        --ws-radius-card: 24px;
        --ws-transition: all 0.3s ease;

        /* Container Styles */
        font-family: var(--ws-font);
        color: var(--ws-text-main);
        background-color: var(--ws-bg);
        width: 100%;
        /* Reduced max-width slightly to keep cards from getting too huge in 2x2 grid */
        max-width: 1380px;
        margin: 0 auto;
        padding: 4rem 2.5rem;
        box-sizing: border-box;
        overflow: hidden;
    }

    #workshop-component *, 
    #workshop-component *::before, 
    #workshop-component *::after {
        box-sizing: border-box;
    }

    /* --- HEADER --- */
    #workshop-component .section-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 3rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    #workshop-component .eyebrow {
        color: var(--ws-primary);
        font-size: 0.875rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        display: block;
        margin-bottom: 0.5rem;
        margin-top: 0;
    }

    #workshop-component .section-title {
        font-size: 2.25rem;
        font-weight: 700;
        color: var(--ws-text-main);
        line-height: 1.1;
        margin: 0;
    }

    @media (min-width: 768px) {
        #workshop-component .section-title { font-size: 3.2rem; }
    }

    #workshop-component .text-gradient {
        background: linear-gradient(to right, var(--ws-primary), var(--ws-accent-pink));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    #workshop-component .section-desc {
        color: var(--ws-text-muted);
        font-size: 1.125rem;
        margin-top: 0.75rem;
        max-width: 600px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    /* --- GRID / SLIDER --- */
    #workshop-component .workshop-grid {
        /* Default: Mobile Slider */
        display: flex;
        overflow-x: auto;
        gap: 1rem;
        padding-bottom: 1rem; /* Reduced padding since controls are below */
        scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
        scroll-behavior: smooth;
    }
    
    #workshop-component .workshop-grid::-webkit-scrollbar { 
        display: none; 
    }

    /* Tablet & Desktop: Switch to Grid */
    @media (min-width: 768px) {
        #workshop-component .workshop-grid { 
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            overflow-x: visible;
            padding-bottom: 0;
        }
    }

    @media (min-width: 1024px) {
        #workshop-component .workshop-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* --- CARDS --- */
    #workshop-component .card {
        background: var(--ws-white);
        border: 1px solid var(--ws-border);
        border-radius: var(--ws-radius-card);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0;
        transition: var(--ws-transition);
        position: relative;
        
        /* Mobile Specifics - Full Width Card */
        min-width: 100%; 
        width: 100%;
        flex: 0 0 100%;
        /* Adjusted height logic to be fluid based on content */
        height: auto; 
        scroll-snap-align: center; 
    }

    @media (min-width: 768px) {
        #workshop-component .card {
            min-width: auto;
            width: auto;
            flex: auto;
            height: 100%; /* Equal height in grid */
        }
    }

    #workshop-component .card:hover {
        transform: translateY(-4px);
        box-shadow: var(--ws-shadow-hover);
    }

    /* Card Image - DYNAMIC ASPECT RATIO */
    #workshop-component .card-img-wrapper {
        width: 100%;
        /* Sets the exact aspect ratio of 1824x1226 */
        aspect-ratio: 1824 / 1226;
        /* Removed fixed heights to let aspect-ratio control sizing */
        overflow: hidden;
        position: relative;
    }
    
    #workshop-component .card-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    #workshop-component .card:hover .card-img {
        transform: scale(1.05);
    }

    /* Card Content Body - COMPACT */
    #workshop-component .card-body {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    
    @media (min-width: 768px) {
        #workshop-component .card-body { padding: 1.25rem; }
    }

    #workshop-component .card-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.5rem;
    }

    #workshop-component .tag {
        font-size: 0.7rem;
        font-weight: 700;
        padding: 0.2rem 0.6rem;
        border-radius: 9999px;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        width: fit-content; 
    }

    /* Tag Variations */
    #workshop-component .tag.marketing { background: var(--ws-bg-blue); color: var(--ws-text-blue); }
    #workshop-component .tag.business { background: var(--ws-bg-purple); color: var(--ws-text-purple); }
    #workshop-component .tag.consulting { background: var(--ws-bg-green); color: var(--ws-text-green); }
    #workshop-component .tag.growth { background: var(--ws-bg-blue); color: var(--ws-text-blue); }
    #workshop-component .tag.product { background: var(--ws-bg-orange); color: var(--ws-text-orange); }
    
    #workshop-component .tag.hot {
        background: linear-gradient(to right, var(--ws-primary), var(--ws-accent-pink));
        color: white;
    }

    #workshop-component .duration {
        display: flex;
        align-items: center;
        gap: 0.3rem;
        font-size: 0.7rem;
        font-weight: 500;
        color: var(--ws-text-muted);
    }
    
    @media (min-width: 768px) {
        #workshop-component .duration { font-size: 0.8rem; }
    }

    #workshop-component .card-title {
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 0.75rem 0;
        color: var(--ws-text-main);
        transition: color 0.2s;
        flex-grow: 1;
    }
    
    @media (min-width: 768px) {
        #workshop-component .card-title { font-size: 1.1rem; margin-bottom: 1rem; }
    }

    #workshop-component .card:hover .card-title {
        color: var(--ws-primary);
    }

    /* --- PRICING & ACTION --- */
    #workshop-component .card-bottom {
        margin-top: auto;
    }

    #workshop-component .pricing-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #f3f4f6;
        padding-top: 0.75rem;
    }
    
    @media (min-width: 768px) {
        #workshop-component .pricing-row { padding-top: 1rem; }
    }

    #workshop-component .price-label {
        display: block;
        font-size: 0.7rem;
        color: #9ca3af;
        font-weight: 500;
        margin-bottom: 0;
        margin-top: 0;
    }

    #workshop-component .price-val {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--ws-text-main);
    }
    
    @media (min-width: 768px) {
        #workshop-component .price-val { font-size: 1.25rem; }
    }

    #workshop-component .btn-icon {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        border: none;
        background: var(--ws-text-main);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.2s;
        padding: 0;
    }
    
    @media (min-width: 768px) {
        #workshop-component .btn-icon { width: 40px; height: 40px; }
    }

    #workshop-component .btn-icon:hover {
        background: var(--ws-primary);
    }

    /* --- SLIDER CONTROLS (Mobile Only) --- */
    #workshop-component .slider-controls {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        margin-top: 1.5rem;
        width: 100%;
    }

    @media (min-width: 768px) {
        #workshop-component .slider-controls { display: none; }
    }

    #workshop-component .control-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        border: 1px solid var(--ws-border);
        background: white;
        color: var(--ws-text-main);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }

    #workshop-component .control-btn:hover {
        background: var(--ws-text-main);
        color: white;
    }

    #workshop-component .slider-dots {
        display: flex;
        gap: 0.5rem;
    }

    #workshop-component .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #d1d5db; /* Gray-300 */
        cursor: pointer;
        transition: all 0.3s ease;
    }

    #workshop-component .dot.active {
        width: 24px;
        background-color: var(--ws-primary);
        border-radius: 4px;
    }
    
    /* Mobile specific adjustment for main container */
    @media (max-width: 767px) {
        #workshop-component {
            padding: 3rem 1.5rem;
        }
        #workshop-component .section-title { font-size: 1.75rem; }
    }

        .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: #7c3aed; /* 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, #7c3aed, #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: #7c3aed;
      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: #7c3aed; /* Purple */
  --faq-primary-dark: #6d28d9;
  --faq-gradient: linear-gradient(135deg, #5b2dd8, #db2777);
  --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: #7c3aed;
        --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, #5b2dd8 0%, #db2777 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: #f8fafc; */
            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, #5135FF 10.65%, #FF5455 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: #5135FF;
            color: #5135FF;
        }

        .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, #5135FF 10.65%, #FF5455 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, #5135FF 10.65%, #FF5455 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: #5b2dd8; /* Primary Purple */
            --mb-secondary: #db2777; /* Accent Pink */
            --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: #8b5cf6;
            --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: #5b2dd8;
            --if-secondary: #db2777;
            --if-gradient: linear-gradient(135deg, #5b2dd8, #db2777);
            --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('/assets/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;
            }
        }