/* Fade animation for tabs with custom class */
.fade-tab-content .zptab-content {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    width: 100%;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-tab-content .zptab-content.zptab-active-content {
    opacity: 1;
    visibility: visible;
    position: relative;
    transform: translateY(0);
}

.fade-tab-content .zptabs-content-container {
    position: relative;
    min-height: 400px;
    overflow: hidden;
}

/* Smooth fade effect */
.fade-tab-content .zptab-content {
    animation: fadeOut 0.4s ease-in-out;
}

.fade-tab-content .zptab-content.zptab-active-content {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

/* Optional: Tab<script>
    // This self-executing function runs immediately to find and fix parent containers
    // that might be preventing the sticky effect.
    (function() {
        // Find the container for this specific code snippet
        let currentElement = document.currentScript;
        if (!currentElement) {
            // Fallback for older browsers
            const scripts = document.getElementsByTagName('script');
            currentElement = scripts[scripts.length - 1];
        }

        // Travel up the DOM tree for a few levels (Zoho wraps elements a few times)
        for (let i = 0; i < 6; i++) {
            if (currentElement.parentElement) {
                currentElement = currentElement.parentElement;
                // This is the crucial fix: If a parent has a conflicting 'overflow' style,
                // we override it to 'visible', which allows position:sticky to work correctly.
                const parentStyle = window.getComputedStyle(currentElement);
                if (parentStyle.overflow === 'hidden' || parentStyle.overflowX === 'hidden' || parentStyle.overflowY === 'hidden') {
                    currentElement.style.overflow = 'visible';
                }
            } else {
                break; // Stop if we reach the top of the page
            }
        }
    })();
</script>


<!-- 2. Links to required Fonts and Stylesheets -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<script src="https://cdn.tailwindcss.com"></script>

<!-- 3. The CSS to style the elements -->
<style>
    /* Set the font for the elements inside this snippet */
    .zoho-scroller-container {
        font-family: 'Inter', sans-serif;
    }

    /* This makes the container 'sticky' within its parent column */
    .sticky-container {
        position: -webkit-sticky; /* For Safari compatibility */
        position: sticky;
        top: 10rem; /* Adjust this value based on your nav bar height. 10rem is usually a safe bet. */
        height: fit-content;
    }
    
    .text-electric-cyan {
        color: #00E5FF;
    }

    /* Transition for the text fading in and out */
    .scroller-text-item {
        transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
        position: absolute;
        width: 100%;
    }

    .scroller-text-item.is-active {
        opacity: 1;
        transform: translateY(0);
    }

    .scroller-text-item:not(.is-active) {
        opacity: 0;
        transform: translateY(20px);
    }
</style>

<!-- 4. The HTML for the text content -->
<div class="zoho-scroller-container">
    <div class="sticky-container">
        <div class="relative h-64">
            <!-- Text for Stage 1 -->
            <div id="text-1" class="scroller-text-item is-active">
                <span class="text-electric-cyan font-bold">01 / 04</span>
                <h3 class="text-3xl font-bold text-white mt-2">Prototyping & Validation</h3>
                <p class="mt-4 text-slate-400 text-lg">We create rapid, functional prototypes to validate core concepts, gather user feedback, and refine the product's direction iteratively.</p>
            </div>
            <!-- Text for Stage 2 -->
            <div id="text-2" class="scroller-text-item">
                <span class="text-electric-cyan font-bold">02 / 04</span>
                <h3 class="text-3xl font-bold text-white mt-2">Real-World Field Testing</h3>
                <p class="mt-4 text-slate-400 text-lg">Your product is rigorously tested in real-world environments to ensure robust performance, reliability, and user acceptance under stress.</p>
            </div>
            <!-- Text for Stage 3 -->
            <div id="text-3" class="scroller-text-item">
                <span class="text-electric-cyan font-bold">03 / 04</span>
                <h3 class="text-3xl font-bold text-white mt-2">Regulatory Certification</h3>
                <p class="mt-4 text-slate-400 text-lg">We manage the complex process of achieving necessary certifications, including EMI/EMC, environmental, and industry-specific compliance.</p>
            </div>
            <!-- Text for Stage 4 -->
            <div id="text-4" class="scroller-text-item">
                <span class="text-electric-cyan font-bold">04 / 04</span>
                <h3 class="text-3xl font-bold text-white mt-2">Seamless Manufacturing Handoff</h3>
                <p class="mt-4 text-slate-400 text-lg">A fully documented, production-ready design is transitioned to our `NovaWorks` division for efficient, scalable mass production.</p>
            </div>
        </div>
    </div>
</div>
 header effects */
.fade-tab-content .zptab {
    transition: all 0.3s ease;
}

.fade-tab-content .zptab:hover {
    transform: translateY(-2px);
}

.fade-tab-content .zptab.zptab-active {
    transform: translateY(0);
}



///////////////////
.gradient-text {
  /* Set the background to a linear gradient */
  background-image: linear-gradient(to right, #ff7e5f, #feb47b); /* Example warm gradient */
  /* You can change 'to right' to other directions (e.g., 'to bottom', '45deg')
     and choose your own hex color codes for #ff7e5f and #feb47b. */

  /* Clip the background to the text area */
  -webkit-background-clip: text; /* For older WebKit browsers (Safari, Chrome) */
  background-clip: text;         /* Standard property */

  /* Make the text transparent so the background gradient is visible */
  color: transparent;

  /* Optional: For better visual appearance, specify font properties */
  font-weight: bold; /* Makes the gradient more noticeable */
  font-size: 44px;   /* Matches your initial request */

  /* Optional: For cross-browser compatibility with text fill */
  -webkit-text-fill-color: transparent;
}