/* Hero section */

@layer utilities {
    .animate-rotate-slow {
        animation: Rotate 20s linear infinite;
    }

    .animate-rotate-reverse {
        animation: Rotate-reverse 20s linear infinite;
    }

    .animate-circle-rotate {
        animation: circle-rotate 20s linear infinite;
    }

    .animate-img-rotate {
        animation: img-rotate 20s linear infinite;
    }
}

@keyframes Rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes Rotate-reverse {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes circle-rotate {
    from {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(405deg);
    }
}

@keyframes img-rotate {
    from {
        transform: rotate(-45deg);
    }

    to {
        transform: rotate(-405deg);
    }
}

/*  */
@keyframes floatImage {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }

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

.animate-float {
    animation: floatImage 2s ease-in-out infinite;
}

.emblem {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    font-weight: 500;
    color: #142F80;
    animation: spinZ 20s linear infinite;
    text-align: center;
    z-index: 1;
    background: transparent;
    pointer-events: none;
}

.emblem span {
    position: absolute;
    display: inline-block;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    text-transform: uppercase;
    font-size: 1.4rem;
    transition: all .5s cubic-bezier(0, 0, 0, 1);
    pointer-events: none;
}

@keyframes spinZ {
    0% {
        transform: translateY(-50%) rotateZ(0deg);
    }

    100% {
        transform: translateY(-50%) rotateZ(360deg);
    }
}

/* FAQ */
@layer utilities {
    .animate-spin-slow {
        animation: spin 4s linear infinite;
    }
}

@keyframes spin {
    100% {
        transform: rotateY(360deg);
    }
}

/* WhatsApp Start Chat */
@keyframes shakeLeftRight {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }
}

.whatsapp-btn {
    animation: shakeLeftRight 1.5s ease-in-out infinite;
}

/* Custom Animations */
@keyframes client-slide-tw {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-client-slide-tw {
    animation: client-slide-tw 40s linear infinite;
}

@keyframes client-slide {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.animate-client-slide {
    animation: client-slide 12s linear infinite;
}

@keyframes gradient-x {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

.animate-gradient-x {
    background-size: 200% 200%;
    animation: gradient-x 3s ease-in-out infinite;
}

@keyframes float-updown {

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

    50% {
        transform: translateY(-18px);
    }
}

.animate-float-updown {
    animation: float-updown 3s ease-in-out infinite;
}


    /* <!-- Technology Tabs Section (Tailwind CSS) -->
                <section class="w-full bg-white py-16 px-2 sm:px-4">
                    <div class="max-w-7xl mx-auto">
                        <h2 class="text-3xl md:text-5xl font-bold text-center mb-10 text-gray-900">Our <span class="text-[#142F80]">Technology Stack</span></h2>
                        <div x-data="tabComponent()" class="flex flex-col md:flex-row gap-8">
                            <!-- Tab Buttons (Left) -->
                            <div class="flex md:flex-col flex-row md:w-1/3 w-full md:max-w-xs gap-2 md:gap-4 mb-4 md:mb-0 justify-center md:justify-start">
                                <template x-for="(tabName, idx) in tabs" :key="idx">
                                    <button
                                        :id="'tab-btn-' + idx"
                                        @click="tab = idx; focusTab(idx)"
                                        @keydown.right.prevent="focusTab((tab + 1) % tabs.length)"
                                        @keydown.left.prevent="focusTab((tab - 1 + tabs.length) % tabs.length)"
                                        :aria-selected="tab === idx"
                                        :tabindex="tab === idx ? 0 : -1"
                                        role="tab"
                                        :aria-controls="'tabpanel-' + idx"
                                        :class="tab === idx ? 'bg-[#142F80] text-white shadow-lg scale-105' : 'bg-gray-100 text-gray-800'"
                                        class="px-4 py-2 rounded-full font-semibold focus:outline-none focus:ring-2 focus:ring-[#142F80] transition-all duration-200 transform hover:scale-105 hover:bg-[#142F80]/90 hover:text-white w-full text-left md:text-base text-sm"
                                    >
                                        <span x-text="tabName"></span>
                                    </button>
                                </template>
                            </div>
                            <!-- Tab Panels (Right) -->
                            <div class="flex-1">
                                <div class="relative">
                                    <template x-for="(panel, idx) in panels" :key="idx">
                                        <div
                                            x-show="tab === idx"
                                            x-transition:enter="transition ease-out duration-300"
                                            x-transition:enter-start="opacity-0 scale-95"
                                            x-transition:enter-end="opacity-100 scale-100"
                                            x-transition:leave="transition ease-in duration-200"
                                            x-transition:leave-start="opacity-100 scale-100"
                                            x-transition:leave-end="opacity-0 scale-95"
                                            :id="'tabpanel-' + idx"
                                            role="tabpanel"
                                            :aria-labelledby="'tab-btn-' + idx"
                                            class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-6 sm:gap-8 justify-items-center focus:outline-none"
                                        >
                                            <template x-for="tech in panel" :key="tech.label">
                                                <div class="flex flex-col items-center group">
                                                    <img :src="tech.img" :alt="tech.label" class="w-16 h-16 mb-2 rounded-xl shadow group-hover:scale-110 group-hover:shadow-xl transition-all duration-200">
                                                    <span class="font-semibold text-center group-hover:text-[#142F80] transition">{{ tech.label }}</span>
                                                </div>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <!-- Alpine.js for tab logic (CDN) -->
                        <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script>
                        <script>
                            function tabComponent() {
                                return {
                                    tab: 0,
                                    tabs: [
                                        'Frontend Programming Languages',
                                        'Backend Programming Languages',
                                        'Databases / Data Storages',
                                        'Mobile App Development',
                                        'Design',
                                    ],
                                    panels: [
                                        [
                                            { label: 'HTML', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/frontend-icon-html-r5ghpyk8il1ush8w8x9sq503ufukn4qoohcie9utoc.webp' },
                                            { label: 'CSS', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/frontend-icon-css-r5ghpusvr8wpi1ecuvnag5y9gwd3scbrbyqkh60ed8.webp' },
                                            { label: 'JS', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/frontend-icon-js-r5ghpzi2pf35437j3fofamrkftpxutuf0lzzvjtfi4.webp' },
                                            { label: 'React', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/frontend-icon-react-r5ghq62y19c5dcxz10ita33sliticpkjdike8hjoak.webp' },
                                            { label: 'Vue', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/frontend-icon-Vue-r5ghq7ymexeq0kv8q1c2f2mpsak8s3s01rvd71gvy4.webp' },
                                            { label: 'Angular', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/frontend-icon-angular-r5ghpsx7dku4uth35uu1b6fca4mdcy4anpflim36po.webp' },
                                            { label: 'Ember', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/frontend-icon-ember-r5ghpwok4wza59bmjwgjl5h6no3u7qj8081jfpxm0s.webp' },
                                            { label: 'Meteor', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/Custom_Meteor-r5ghq1dr335prb4ssghofmahmlgoa81vovayu3qn5o.webp' },
                                        ],
                                        [
                                            { label: 'Node JS', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/backend_icon_node_js-r5gh6cnfy07ilbq9qy4z7l4xq2hx2fw9nfeuzgxhh8.webp' },
                                            { label: 'Java', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/backend_icon_jave-r5gh68w36o2davvqcwigxm33cj0g7nhcawsx2d3264.webp' },
                                            { label: 'Php', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/backend_icon_php-r5gh6dla4u8swxowlgjls2webgdaa4zzzk2cgqw3b0.webp' },
                                            { label: 'Go', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/backend_icon_go-r5gh662km5yic1zttdal84spkdeckk65aiugmj78os.webp' },
                                            { label: 'Python', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/backend_icon_phython-r5gh6fgyiibdk5m6ahcux2fbi840pj7gntdbfatayk.webp' },
                                            { label: '.NET', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/backend_icon_microsoft_net-r5gh6arrkc4xy3t01xbq2lm0jar6n1osz63w0x09to.webp' },
                                        ],
                                        [
                                            { label: 'MongoDB', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/database_icon_MongoDB-r5giy4z5q9j0gp2qa0qjwzo0ye3mf04ir562egcp8c.webp' },
                                            { label: 'Mysql', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/database_icon_Mysql-r5giy6uu3xll3wzzz1jt1z6y55ucuebzfeh1d09wvw.webp' },
                                            { label: 'Postgre SQL', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/database_icon_PostgreSQL-1-r5gj0jgb70te4tl49248aduflu9e35ntr16qjwshbw.webp' },
                                            { label: 'Oracle', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/database_icon_oracle-r5giy8qihlo5r4x9o2d26ypvbxl39sjg3ns0bk74jg.webp' },
                                            { label: 'SQL Server', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/database_icon_SQL_Server-r5giychv8xtb1krt23zkgxrpph2k4kydg6dy8o1juk.webp' },
                                            { label: 'Hive', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/database_icon_hive-r5giy33hclgfth5gkzxas053rmcvzlx22vv3fwfhks.webp' },
                                            { label: 'Cassandra', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/database_icon_cassandra-r5giy17syxdv6986vz41n0m6kum5k7plemk4hci9x8.webp' },
                                            { label: 'Apache Nifi', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/database_icon_Apache_Nifi-r5gixyeaefa07fcacfw5xjbssp01x4eee8lo1imgfw.webp' },
                                        ],
                                        [
                                            { label: 'Android', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/mobile_icon_android-r5gjm9i156jyge15eg5twwhxuf6rzbwi2jypu4kxj0.webp' },
                                            { label: 'iOS', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/ios_cutom_app-r5gjm4su70diuc7z5w4p2fomvhtxwududwpafqrwe4.webp' },
                                            { label: 'Php', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/backend_icon_php-r5gh6dla4u8swxowlgjls2webgdaa4zzzk2cgqw3b0.webp' },
                                            { label: 'React Native', img: 'https://gemwebservices.com/wp-content/uploads/elementor/thumbs/frontend-icon-react-r5ghq62y19c5dcxz10ita33sliticpkjdike8hjoak.webp' },
                                        ],
                                        [
                                            { label: 'Figma', img: 'https://gemwebservices.com/wp-content/uploads/2025/05/figma.svg' },
                                            { label: 'Photoshop', img: 'https://gemwebservices.com/wp-content/uploads/2025/05/photoshop-cc.svg' },
                                            { label: 'After Effects', img: 'https://gemwebservices.com/wp-content/uploads/2025/05/after-effects-cc.svg' },
                                            { label: 'Illustrator', img: 'https://gemwebservices.com/wp-content/uploads/2025/05/adobe-illustrator-cc.svg' },
                                        ],
                                    ],
                                    focusTab(idx) {
                                        this.tab = idx;
                                        this.$nextTick(() => {
                                            const btn = document.getElementById('tab-btn-' + idx);
                                            if (btn) btn.focus();
                                        });
                                    },
                                };
                            }
                        </script>
                    </div>
                </section> */