<!-- Embed FontAwesome for Icons -->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">-->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.0/css/all.min.css" rel="stylesheet">


<!-- <div class="tabs">
    <div class="tab-header">
        <div class="active">
            <i class="fa-solid fa-layer-group"></i> Platform Build and Optimization
        </div>
        <div>
            <i class="fa-solid fa-share-nodes"></i> Data Migration to GCP
        </div>
        <div>
            <i class="fa-solid fa-cloud-arrow-up"></i>Data Modernization on GCP
        </div>
        <div>
            <i class="fa-solid fa-chart-diagram "></i> AI & ML Solutions
        </div>
        <div>
            <i class="fa-solid fa-hexagon-nodes "></i> Generative AI on GCP
        </div>
    </div>
    <div class="tab-indicator"></div>
    <div class="tab-content">

        <div class="active">
            <i class="fa-solid fa-layer-group"></i>
            <h1 class="tab-heading">Platform Build and Optimization</h1>
            <p class="tab-description">We leverage microservices architecture to design loosely coupled platforms that are cost-optimized and automated, ensuring scalability and resilience. Our expertise ensures seamless integration across components for faster time to market.</p>
        </div>

        <div>
            <i class="fa-solid fa-share-nodes"></i>
            <h1 class="tab-heading">Data Migration to GCP</h1>
            <p class="tab-description">We help transform legacy workloads by migrating them to GCP, using industry-proven assets to accelerate the transition. Our approach minimizes risks and ensures a smooth shift, enabling businesses to fully benefit from cloud-native environments.</p>
        </div>

        <div>
            <i class="fa-solid fa-cloud-arrow-up"></i>
            <h1 class="tab-heading">Data Modernization on GCP</h1>
            <p class="tab-description">Our solutions empower businesses to manage data efficiently through seamless data lakes and warehouses. We enable advanced analytics using tools like BigQuery and Looker, driving insights through data visualization, semantic modeling, and more.</p>
        </div>

        <div>
            <i class="fa-solid fa-chart-diagram"></i>
            <h1 class="tab-heading">AI & ML Solutions</h1>
            <p class="tab-description">We apply GCP's AI and ML capabilities to develop intelligent applications and predictive models tailored to business needs. With MLOps practices, we ensure smooth deployment, monitoring, and continuous improvement of models to enhance operations.</p>
        </div>

        <div>
            <i class="fa-solid fa-hexagon-nodes"></i>
            <h1 class="tab-heading">Generative AI on GCP</h1>
            <p class="tab-description">Using GCP's Gemini, we build AI copilots that integrate seamlessly with business systems, driving efficiency and innovation. Our expertise ensures these AI solutions align with organizational goals to unlock new opportunities.</p>
        </div>

    </div>
</div> -->

<style>
    @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;800&display=swap');

    * {
        box-sizing: border-box;
    }

    body {
        background: #ddd;
        font-family: "Barlow", sans-serif;
    }

    .tabs {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 680px;
        height: 360px;
        padding: 30px 20px;
        background: white;
        /* box-shadow: 5px 5px 10px 5px #ccc; */
        overflow: hidden;
        border-radius: 20px;
    }

        .tabs .tab-header {
            float: left;
            width: auto;
            min-width: 150px;
            height: 100%;
            border-right: 1px solid #ccc;
            padding: 50px 0px;
        }

            .tabs .tab-header > div {
                line-height: normal;
                font-size: 20px;
                font-weight: 600;
                color: #888;
                cursor: pointer;
                padding: 10px 15px;
                min-height: 50px;
                overflow: hidden;
                white-space: normal;
                word-wrap: break-word;
                position: relative;
            }

                .tabs .tab-header > div:hover,
                .tabs .tab-header > div.active {
                    color: #FF6600;
                }

            .tabs .tab-header div i {
                display: inline-block;
                margin-left: 10px;
                margin-right: 5px;
            }

        .tabs .tab-content {
            position: relative;
            height: 100%;
            overflow: hidden;
        }

            .tabs .tab-content > div > i {
                display: inline-block;
                width: 50px;
                height: 50px;
                background: #555;
                color: #f5f5f5;
                font-size: 25px;
                font-weight: 600;
                text-align: center;
                line-height: 50px;
                border-radius: 50%;
            }

            .tabs .tab-content > div {
                position: absolute;
                text-align: center;
                padding: 40px 20px;
                top: -200%;
                transition: all 500ms ease-in-out;
            }

                .tabs .tab-content > div.active {
                    top: 0px;
                }

        .tabs .tab-indicator {
            position: absolute;
            width: 4px;
            height: 50px;
            background: #FF6600;
            left: 198px;
            top: 80px;
            transition: all 500ms ease-in-out;
        }

    .tab-heading {
        font-size: 2rem !important;
        margin-top: 1em;
    }

    .tab-description {
        font-size: 20px !important;
        line-height: 1.5;
    }


    @media(max-width:700px) {
        .tabs {
            width: 100vw;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

            .tabs .tab-header {
                width: 100%;
                border: none;
                display: flex;
                justify-content: space-between;
                padding: 10px 0px;
                height: auto;
                text-align: center;
            }

                .tabs .tab-header > div {
                    width: 25%;
                }

            .tabs .tab-indicator {
                display: none;
            }
    }
</style>

<script>
    function _class(name) {
        return document.getElementsByClassName(name);
    }

    let tabPanes = _class("tab-header")[0].getElementsByTagName("div");

    for (let i = 0; i < tabPanes.length; i++) {
        tabPanes[i].addEventListener("click", function () {
            _class("tab-header")[0].getElementsByClassName("active")[0].classList.remove("active");
            tabPanes[i].classList.add("active");

            _class("tab-indicator")[0].style.top = `calc(80px + ${i * 50}px)`;

            _class("tab-content")[0].getElementsByClassName("active")[0].classList.remove("active");
            _class("tab-content")[0].getElementsByTagName("div")[i].classList.add("active");

        });
    }







    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('.tab-header > div');
        const indicator = document.querySelector('.tab-indicator');

        // Function to update the indicator's position and height
        function updateIndicator() {
            const activeTab = document.querySelector('.tab-header .active');
            const activeTabRect = activeTab.getBoundingClientRect();

            // Update the indicator's position (left) and height (based on tab height)
            indicator.style.left = `${activeTabRect.left - tabs[0].getBoundingClientRect().left}px`; // Align left with active tab
            indicator.style.height = `${activeTabRect.height}px`; // Match the height of the active tab
        }

        // Initial update when the page loads
        updateIndicator();

        // Add click event to each tab to update the indicator when a tab is clicked
        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                tabs.forEach(t => t.classList.remove('active')); // Remove active class from all tabs
                tab.classList.add('active'); // Add active class to the clicked tab
                updateIndicator(); // Update the indicator position and height
            });
        });
    });

    document.addEventListener('DOMContentLoaded', function () {
        const tabs = document.querySelectorAll('.tab-header > div');
        const indicator = document.querySelector('.tab-indicator');

        // Function to update the indicator's position and height
        function updateIndicator() {
            const activeTab = document.querySelector('.tab-header .active');
            const activeTabRect = activeTab.getBoundingClientRect();

            // Update the indicator's position (left) and height (based on tab height)
            indicator.style.left = `${activeTabRect.left - tabs[0].getBoundingClientRect().left}px`; // Align left with active tab
            indicator.style.height = `${activeTabRect.height}px`; // Match the height of the active tab
        }

        // Initial update when the page loads
        updateIndicator();

        // Add click event to each tab to update the indicator when a tab is clicked
        tabs.forEach(tab => {
            tab.addEventListener('click', function () {
                tabs.forEach(t => t.classList.remove('active')); // Remove active class from all tabs
                tab.classList.add('active'); // Add active class to the clicked tab
                updateIndicator(); // Update the indicator position and height

                // Update the content section
                const index = Array.from(tabs).indexOf(tab);
                document.querySelector('.tab-content .active').classList.remove('active');
                document.querySelectorAll('.tab-content > div')[index].classList.add('active');
            });
        });
    });
</script>