芝麻web文件管理V1.00

编辑当前文件:/home/unicorntechnolog/public_html/elevate/index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Elevate Strategies</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:200,400,800,900&display=swap">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Urbanist:wght@300;400;500;600;700;800;900&display=swap">
    <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=Mulish:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
    
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
    
    
    <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

<script src="https://cdn.tailwindcss.com"></script>

:root {
            --primary-color: #1e62a8;
            --primary-dark: #1D4ED8;
            --primary-light: #EFF6FF;
            --secondary-color: #059669;
            --secondary-light: #D1FAE5;
            --accent-color: #2563EB;
            --accent-light: #EDE9FE;
            --light-bg: #FFFFFF;
            --section-bg: #F8FAFC;
            --text-dark: #0F172A;
            --text-medium: #334155;
            --text-light: #64748B;
            --border-color: #E2E8F0;
            --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            --hover-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
            --container-max-width: 1200px;
            --border-radius: 16px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

body {
            margin: 0;
            padding: 0;
            background: #333;
            font-family: 'Mulish', sans-serif;
            min-height: 100vh;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

/* =========================
           ANIMATED CTA SECTION STYLES
           ========================= */
        .animated-cta-section {
            position: relative;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            overflow-x: hidden;
            background: linear-gradient(
                to bottom,
                #ffffff 0%,
                #f2f6fc 45%,
                #dbe6f6 100%
            );
        }

/* Wave layers */
        .animated-cta-section::before,
        .animated-cta-section::after {
            content: "";
            position: absolute;
            left: 0;
            width: 100%;
            height: 45%;
            background-repeat: no-repeat;
            background-size: 120% 100%;
            z-index: 0;
        }

/* Dark blue wave (bottom) */
        .animated-cta-section::after {
            bottom: 0;
            background:
                radial-gradient(
                    120% 100% at 50% 0%,
                    #0a2a66 55%,
                    #071d45 100%
                );
        }

/* Mid blue wave */
        .animated-cta-section::before {
            bottom: 10%;
            background:
                radial-gradient(
                    120% 100% at 50% 0%,
                    #1f4fa3 50%,
                    transparent 55%
                );
        }

/* CTA Frame */
        .cta-frame {
            padding: 22px;
            border-radius: 28px;
            max-width: 1100px;
            width: 92%;
            position: relative;
            z-index: 1;
        }

.cta-container {
            background: #000000f6;
            border-radius: 22px;
            text-align: center;
            padding: 60px 40px 70px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }

/* Subtle background pattern */
        .cta-container::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 25% 25%, rgba(255,255,255,0.03) 1px, transparent 1px),
                radial-gradient(circle at 75% 75%, rgba(255,255,255,0.03) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: 0;
        }

.cta-heading {
            font-family: 'Mulish', sans-serif;
            font-size: clamp(1.6rem, 3vw + 1rem, 3.6rem);
            font-weight: 400;
            font-style: italic;
            margin-bottom: 32px;
            text-transform: lowercase;
        }

.cta-subheading {
            font-family: 'Mulish', sans-serif;
            font-size: clamp(1.4rem, 2vw + 0.5rem, 2.2rem);
            margin-bottom: 20px;
            color: #f0f0f0;
            position: relative;
            z-index: 1;
        }

.cta-description {
            font-size: 1.1rem;
            line-height: 1.6;
            color: #cccccc;
            margin-bottom: 40px;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            position: relative;
            z-index: 1;
        }

.cta-image-wrapper {
            display: flex;
            justify-content: center;
            margin-bottom: 46px;
            position: relative;
            z-index: 1;
        }

.cta-image {
            width: 380px;
            max-width: 100%;
            border-radius: 6px;
            object-fit: cover;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            transition: transform 0.5s ease, box-shadow 0.5s ease;
        }

.cta-image:hover {
            transform: scale(1.02);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
        }

.cta-button {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            color: #fff;
            text-decoration: none;
            font-size: 0.9rem;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            padding: 16px 36px;
            background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
            border-radius: 50px;
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            border: none;
            max-width: 300px;
            justify-content: center;
            margin: 0 auto;
            z-index: 1;
        }

.cta-button:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.7s ease;
        }

.cta-button:hover:before {
            left: 100%;
        }

.cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(30, 98, 168, 0.4);
        }

/* MOBILE */
        @media (max-width: 640px) {
            .cta-frame {
                padding: 14px;
                border-radius: 26px;
            }

.cta-container {
                padding: 36px 20px 50px;
            }

.cta-image {
                width: 100%;
                height: 42vh;
                object-fit: cover;
            }
        }

/* Animation classes for manual triggering */
        .fade-in-up {
            opacity: 0;
            transform: translateY(30px);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

.fade-in-up.visible {
            opacity: 1;
            transform: translateY(0);
        }

.scale-in {
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

.scale-in.visible {
            opacity: 1;
            transform: scale(1);
        }

/* ==================================================== */
        /* TECHNOLOGY STACK SLIDER STYLES (COPIED FROM YOUR SECTION) */
        /* ==================================================== */
        .tech-stack {
            padding: 100px 20px;
            width: 100%;
        }

.container {
            max-width: 1000px;
            margin: auto;
        }

.section-header {
            text-align: center;
            margin-bottom: 70px;
        }

.section-badge {
            display: inline-block;
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            padding: 10px 24px;
            border-radius: 30px;
            margin-bottom: 24px;
            box-shadow: 0 4px 12px rgba(30, 98, 168, 0.2);
        }

.section-badge span {
            font-size: 14px;
            font-weight: 600;
            letter-spacing: 1px;
            color: white;
            text-transform: uppercase;
        }

.section-header h2 {
            font-size: 48px;
            margin-bottom: 20px;
            color: var(--text-dark);
            line-height: 1.2;
        }

.section-header p {
            font-size: 18px;
            color: var(--text-medium);
            max-width: 600px;
            margin: 0 auto;
            line-height: 1.6;
        }

/* ===== SLIDER ===== */
        .slide_contain {
            position: relative;
            height: 550px;
            margin-bottom: 20px;
            background: 
                linear-gradient(rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.29)),
                url('/img/tech-bg.png') center/cover;
            backdrop-filter: blur(10px);
            border-radius: var(--border-radius);
            padding: 80px;
            overflow: hidden;
        }

.slide_list {
            position: relative;
            width: 100%;
            height: 100%;
            perspective: 1200px;
            padding-top: 140px;
        }

/* ===== TECH CARD ===== */
        .tech-card-slide {
            position: absolute;
            width: 100%;
            height: 320px;
            border-radius: var(--border-radius);
            padding: 40px;
            transition: var(--transition);
            box-shadow: var(--card-shadow);
            cursor: pointer;
            top: 0;
            left: 0;
            transform-origin: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            background: var(--light-bg);
            border: 1px solid var(--border-color);
        }

.tech-card-slide::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            opacity: 0.8;
        }

.tech-icon {
            font-size: 64px;
            margin-bottom: 28px;
            text-align: center;
            height: 80px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

.tech-card-slide h4 {
            font-size: 32px;
            margin-bottom: 16px;
            text-align: center;
            color: var(--text-dark);
        }

.tech-card-slide p {
            font-size: 18px;
            text-align: center;
            color: var(--text-medium);
            max-width: 320px;
            margin: 0 auto;
            line-height: 1.6;
            font-weight: 500;
        }

/* ===== CARD COLORS ===== */
        .aws-card { 
            background: linear-gradient(135deg, var(--light-bg), var(--primary-light));
        }

.azure-card { 
            background: linear-gradient(135deg, var(--light-bg), #dcf0ffff);
        }

.gcp-card { 
            background: linear-gradient(135deg, var(--light-bg), #E8F0FE);
        }

.docker-card { 
            background: linear-gradient(135deg, var(--light-bg), #E0F2FE);
        }

.react-card { 
            background: linear-gradient(135deg, var(--light-bg), #F0F9FF);
        }

.node-card { 
            background: linear-gradient(135deg, var(--light-bg), #F0FDF4);
        }

.python-card { 
            background: linear-gradient(135deg, var(--light-bg), var(--accent-light));
        }

/* Icon colors using your palette */
        .aws-card .tech-icon { color: var(--primary-color); }
        .azure-card .tech-icon { color: #0078d4; }
        .gcp-card .tech-icon { color: var(--accent-color); }
        .docker-card .tech-icon { color: #2496ed; }
        .react-card .tech-icon { color: var(--primary-color); }
        .node-card .tech-icon { color: var(--secondary-color); }
        .python-card .tech-icon { color: #3776ab; }

/* ===== STACK STATES ===== */
        .tech-card-slide[data-pos="0"] {
            transform: translateY(0) scale(1) rotateX(0deg);
            z-index: 7;
            opacity: 1;
            filter: brightness(1);
            box-shadow: var(--hover-shadow);
        }

.tech-card-slide[data-pos="1"] {
            transform: translateY(25px) scale(0.96) rotateX(-5deg);
            z-index: 6;
            opacity: 0.9;
            filter: brightness(0.98);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.06);
        }

.tech-card-slide[data-pos="2"] {
            transform: translateY(50px) scale(0.92) rotateX(-10deg);
            z-index: 5;
            opacity: 0.8;
            filter: brightness(0.96);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
        }

.tech-card-slide[data-pos="3"] {
            transform: translateY(75px) scale(0.88) rotateX(-15deg);
            z-index: 4;
            opacity: 0.7;
            filter: brightness(0.94);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.03);
        }

.tech-card-slide[data-pos="4"] {
            transform: translateY(100px) scale(0.84) rotateX(-20deg);
            z-index: 3;
            opacity: 0.6;
            filter: brightness(0.92);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);
        }

.tech-card-slide[data-pos="5"] {
            transform: translateY(125px) scale(0.80) rotateX(-25deg);
            z-index: 2;
            opacity: 0.5;
            filter: brightness(0.90);
        }

.tech-card-slide[data-pos="6"] {
            transform: translateY(150px) scale(0.76) rotateX(-30deg);
            z-index: 1;
            opacity: 0.4;
            filter: brightness(0.88);
        }

/* Hide cards beyond the stack */
        .tech-card-slide[data-pos="7"],
        .tech-card-slide[data-pos="-1"] {
            transform: translateY(175px) scale(0.72) rotateX(-35deg);
            z-index: 0;
            opacity: 0;
            pointer-events: none;
        }

/* ===== CONTENT ANIMATION ===== */
        .card-content {
            /* opacity: 0; */
            transform: translateY(20px);
            transition: var(--transition);
            transition-delay: 0.2s;
        }

.tech-card-slide[data-pos="0"] .card-content {
            opacity: 1;
            transform: translateY(0);
        }

/* ===== ARROWS ===== */
        .slide_arrows {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 60px;
        }

.slide_arrow {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--light-bg);
            color: var(--primary-color);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            cursor: pointer;
            transition: var(--transition);
            border: 2px solid var(--border-color);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
        }

.slide_arrow:hover {
            background: var(--primary-color);
            color: white;
            transform: translateY(-3px);
            border-color: var(--primary-color);
            box-shadow: 0 8px 20px rgba(30, 98, 168, 0.2);
        }

.slide_arrow.disabled {
            opacity: 0.3;
            pointer-events: none;
            background: var(--section-bg);
            color: var(--text-light);
        }

/* ===== INDICATORS ===== */
        .slide_indicators {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-top: 40px;
        }

.indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--border-color);
            cursor: pointer;
            transition: var(--transition);
        }

.indicator.active {
            background: var(--primary-color);
            transform: scale(1.2);
            box-shadow: 0 0 0 3px rgba(30, 98, 168, 0.1);
        }

.indicator:hover {
            background: var(--primary-dark);
            transform: scale(1.1);
        }

/* ===== RESPONSIVE FOR TECH STACK ===== */
        @media (max-width: 768px) {
            .tech-stack {
                padding: 60px 20px;
            }
            
            .section-header h2 {
                font-size: 36px;
            }
            
            .slide_contain {
                height: 360px;
                padding: 15px;
            }
            
            .tech-card-slide {
                height: 280px;
                padding: 30px;
            }
            
            .tech-icon {
                font-size: 56px;
                height: 70px;
                margin-bottom: 20px;
            }
            
            .tech-card-slide h4 {
                font-size: 28px;
            }
            
            .tech-card-slide p {
                font-size: 16px;
            }
            
            .slide_arrow {
                width: 50px;
                height: 50px;
                font-size: 20px;
            }
            
            .section-header p {
                font-size: 16px;
            }
        }

@media (max-width: 480px) {
            .section-header h2 {
                font-size: 32px;
            }
            
            .slide_contain {
                height: 320px;
            }
            
            .tech-card-slide {
                height: 250px;
                padding: 24px;
            }
            
            .tech-icon {
                font-size: 48px;
                height: 60px;
            }
            
            .tech-card-slide h4 {
                font-size: 24px;
                margin-bottom: 12px;
            }
            
            .tech-card-slide p {
                font-size: 15px;
                max-width: 280px;
            }
            
            .slide_arrow {
                width: 45px;
                height: 45px;
            }
            
            .section-badge {
                padding: 8px 20px;
            }
        }

/* Animation for slide in */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.section-header {
            animation: fadeInUp 0.8s ease-out;
        }

/* ==================================================== */
        /* EXACT GRID EFFECT (SAME AS THE FIRST EXAMPLE) */
        /* ==================================================== */
        .grid-effect-container {
            position: absolute;
            z-index: 0;
            inset: 0;
            display: grid;
            grid-template-columns: repeat(10, 1fr);
            grid-template-rows: repeat(10, 1fr);
            pointer-events: none;
        }

.grid-effect-tile {
            position: relative;
            display: block;
            text-decoration: none;
            pointer-events: auto;
        }

.grid-effect-tile::before {
            content: '';
            color: rgba(122, 169, 251, 0.3); /* Lighter version of #A9C9FF */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            height: 0.35rem;
            width: 0.35rem;
            border-radius: 50%;
            background: rgba(169, 201, 255, 0.6);
            transition: 500ms linear all;
            
            /* Exact same complex box-shadow */
            box-shadow: 
                0 0 0,
                3rem 0 0 -0.3rem,
                -3rem 0 0 -0.3rem,
                0 -3rem 0 -0.3rem,
                0 3rem 0 -0.3rem,
                3rem 3rem 0 -0.9rem,
                3rem -3rem 0 -0.9rem,
                -3rem 3rem 0 -0.9rem,
                -3rem -3rem 0 -0.9rem,
                6rem 0 0 -0.6rem,
                -6rem 0 0 -0.6rem,
                0 -6rem 0 -0.6rem,
                0 6rem 0 -0.6rem,
                6rem 6rem 0 -3.6rem,
                6rem -6rem 0 -3.6rem,
                -6rem 6rem 0 -3.6rem,
                -6rem -6rem 0 -3.6rem,
                9rem 0 0 -0.9rem,
                -9rem 0 0 -0.9rem,
                0 -9rem 0 -0.9rem,
                0 9rem 0 -0.9rem,
                9rem 9rem 0 -8.1rem,
                9rem -9rem 0 -8.1rem,
                -9rem 9rem 0 -8.1rem,
                -9rem -9rem 0 -8.1rem,
                12rem 0 0 -1.2rem,
                -12rem 0 0 -1.2rem,
                0 -12rem 0 -1.2rem,
                0 12rem 0 -1.2rem,
                12rem 12rem 0 -14.4rem,
                12rem -12rem 0 -14.4rem,
                -12rem 12rem 0 -14.4rem,
                -12rem -12rem 0 -14.4rem;
        }

.grid-effect-tile:hover::before {
            height: 3rem;
            width: 3rem;
            background: rgba(137, 178, 249, 0.6);
            transition: 70ms linear all;
        }

/* Dark theme version for light sections */
        .grid-effect-container.dark {
            z-index: 0;
        }

.grid-effect-container.dark .grid-effect-tile::before {
            color: rgba(255, 187, 236, 0.3); /* Lighter version of #FFBBEC */
            background: rgba(255, 187, 236, 0.3);
            box-shadow: 
                0 0 0,
                3rem 0 0 -0.3rem rgba(255, 187, 236, 0.3),
                -3rem 0 0 -0.3rem rgba(255, 187, 236, 0.3),
                0 -3rem 0 -0.3rem rgba(255, 187, 236, 0.3),
                0 3rem 0 -0.3rem rgba(255, 187, 236, 0.3),
                3rem 3rem 0 -0.9rem rgba(255, 187, 236, 0.3),
                3rem -3rem 0 -0.9rem rgba(255, 187, 236, 0.3),
                -3rem 3rem 0 -0.9rem rgba(255, 187, 236, 0.3),
                -3rem -3rem 0 -0.9rem rgba(255, 187, 236, 0.3),
                6rem 0 0 -0.6rem rgba(255, 187, 236, 0.3),
                -6rem 0 0 -0.6rem rgba(255, 187, 236, 0.3),
                0 -6rem 0 -0.6rem rgba(255, 187, 236, 0.3),
                0 6rem 0 -0.6rem rgba(255, 187, 236, 0.3),
                6rem 6rem 0 -3.6rem rgba(255, 187, 236, 0.3),
                6rem -6rem 0 -3.6rem rgba(255, 187, 236, 0.3),
                -6rem 6rem 0 -3.6rem rgba(255, 187, 236, 0.3),
                -6rem -6rem 0 -3.6rem rgba(255, 187, 236, 0.3),
                9rem 0 0 -0.9rem rgba(255, 187, 236, 0.3),
                -9rem 0 0 -0.9rem rgba(255, 187, 236, 0.3),
                0 -9rem 0 -0.9rem rgba(255, 187, 236, 0.3),
                0 9rem 0 -0.9rem rgba(255, 187, 236, 0.3),
                9rem 9rem 0 -8.1rem rgba(255, 187, 236, 0.3),
                9rem -9rem 0 -8.1rem rgba(255, 187, 236, 0.3),
                -9rem 9rem 0 -8.1rem rgba(255, 187, 236, 0.3),
                -9rem -9rem 0 -8.1rem rgba(255, 187, 236, 0.3),
                12rem 0 0 -1.2rem rgba(255, 187, 236, 0.3),
                -12rem 0 0 -1.2rem rgba(255, 187, 236, 0.3),
                0 -12rem 0 -1.2rem rgba(255, 187, 236, 0.3),
                0 12rem 0 -1.2rem rgba(255, 187, 236, 0.3),
                12rem 12rem 0 -14.4rem rgba(255, 187, 236, 0.3),
                12rem -12rem 0 -14.4rem rgba(255, 187, 236, 0.3),
                -12rem 12rem 0 -14.4rem rgba(255, 187, 236, 0.3),
                -12rem -12rem 0 -14.4rem rgba(255, 187, 236, 0.3);
        }

.grid-effect-container.dark .grid-effect-tile:hover::before {
            background: rgba(255, 187, 236, 0.6);
        }

/* Custom color variations */
        .grid-effect-container.blue .grid-effect-tile::before {
            background: rgba(30, 98, 168, 0.2); /* Your primary color */
            box-shadow: 
                0 0 0,
                3rem 0 0 -0.3rem rgba(30, 98, 168, 0.2),
                -3rem 0 0 -0.3rem rgba(30, 98, 168, 0.2),
                0 -3rem 0 -0.3rem rgba(30, 98, 168, 0.2),
                0 3rem 0 -0.3rem rgba(30, 98, 168, 0.2),
                3rem 3rem 0 -0.9rem rgba(30, 98, 168, 0.2),
                3rem -3rem 0 -0.9rem rgba(30, 98, 168, 0.2),
                -3rem 3rem 0 -0.9rem rgba(30, 98, 168, 0.2),
                -3rem -3rem 0 -0.9rem rgba(30, 98, 168, 0.2),
                6rem 0 0 -0.6rem rgba(30, 98, 168, 0.2),
                -6rem 0 0 -0.6rem rgba(30, 98, 168, 0.2),
                0 -6rem 0 -0.6rem rgba(30, 98, 168, 0.2),
                0 6rem 0 -0.6rem rgba(30, 98, 168, 0.2),
                6rem 6rem 0 -3.6rem rgba(30, 98, 168, 0.2),
                6rem -6rem 0 -3.6rem rgba(30, 98, 168, 0.2),
                -6rem 6rem 0 -3.6rem rgba(30, 98, 168, 0.2),
                -6rem -6rem 0 -3.6rem rgba(30, 98, 168, 0.2),
                9rem 0 0 -0.9rem rgba(30, 98, 168, 0.2),
                -9rem 0 0 -0.9rem rgba(30, 98, 168, 0.2),
                0 -9rem 0 -0.9rem rgba(30, 98, 168, 0.2),
                0 9rem 0 -0.9rem rgba(30, 98, 168, 0.2),
                9rem 9rem 0 -8.1rem rgba(30, 98, 168, 0.2),
                9rem -9rem 0 -8.1rem rgba(30, 98, 168, 0.2),
                -9rem 9rem 0 -8.1rem rgba(30, 98, 168, 0.2),
                -9rem -9rem 0 -8.1rem rgba(30, 98, 168, 0.2),
                12rem 0 0 -1.2rem rgba(30, 98, 168, 0.2),
                -12rem 0 0 -1.2rem rgba(30, 98, 168, 0.2),
                0 -12rem 0 -1.2rem rgba(30, 98, 168, 0.2),
                0 12rem 0 -1.2rem rgba(30, 98, 168, 0.2),
                12rem 12rem 0 -14.4rem rgba(30, 98, 168, 0.2),
                12rem -12rem 0 -14.4rem rgba(30, 98, 168, 0.2),
                -12rem 12rem 0 -14.4rem rgba(30, 98, 168, 0.2),
                -12rem -12rem 0 -14.4rem rgba(30, 98, 168, 0.2);
        }

.grid-effect-container.blue .grid-effect-tile:hover::before {
            background: rgba(30, 98, 168, 0.4);
        }

.grid-effect-container.green .grid-effect-tile::before {
            background: rgba(5, 150, 105, 0.2); /* Your secondary color */
            /* ... rest of the box-shadow with rgba(5, 150, 105, 0.2) ... */
        }

.grid-effect-container.green .grid-effect-tile:hover::before {
            background: rgba(5, 150, 105, 0.4);
        }

/* ==================================================== */
        /* HERO SECTION WITH PARALLAX EFFECT (LIKE RAKIZ CAPITALS) */
        /* ==================================================== */
        .hero {
            position: relative;
            height: 100vh;
            width: 100%;
            overflow: hidden;
            background: #000;
            transform-style: preserve-3d;
            perspective: 1000px;
            will-change: transform;
        }

/* Split Screen Container */
        .split-screen {
            display: flex;
            height: 100%;
            width: 100%;
            position: relative;
            transform-style: preserve-3d;
        }

/* Split Sections */
        .split-left, .split-right {
            flex: 1;
            height: 100%;
            position: relative;
            overflow: hidden;
            transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
            will-change: transform;
            transform-origin: center;
        }

.split-left {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(17, 17, 17, 0.34)), 
                        url('./img/hero-left.jpg') no-repeat center center;
            background-size: cover;
            clip-path: polygon(0 0, 100% 0, 75% 100%, 0 100%);
            transform: translateX(-100%);
            animation: slideInLeft 1.2s ease-out 0.3s forwards;
        }

.split-right {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(17, 17, 17, 0.34)), 
                        url('./img/hero-right.jpg') no-repeat center center;
            background-size: cover;
            clip-path: polygon(25% 0, 100% 0, 100% 100%, 0 100%);
            transform: translateX(100%);
            animation: slideInRight 1.2s ease-out 0.3s forwards;
        }

/* Hover Effects */
        .split-left:hover, .split-right:hover {
            flex: 1.2;
        }

/* Central Divider */
        .central-divider {
            position: absolute;
            left: 50%;
            top: 0;
            bottom: 0;
            width: 2px;
            background: rgba(255, 255, 255, 0.2);
            z-index: 20;
            transform: translateX(-50%);
            animation: dividerGrow 1.5s ease-out 1.5s forwards;
            height: 0;
        }

.central-divider:before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 8px;
            height: 8px;
            background: white;
            border-radius: 50%;
            opacity: 0;
            animation: dotPulse 2s ease-in-out 2s infinite;
        }

/* Main Content Container */
        .content-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 25;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 0 20px;
            transform-style: preserve-3d;
        }

/* Your Content Styles */
        .content {
            max-width: 900px;
            width: 100%;
            opacity: 0;
            transform: translateY(50px);
            animation: contentReveal 1s cubic-bezier(0.23, 1, 0.32, 1) 1.8s forwards;
            will-change: transform, opacity;
        }

.content h1 {
            font-family: 'Mulish', sans-serif;
            font-size: 5.8rem;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.95);
            text-transform: uppercase;
            letter-spacing: 2px;
            line-height: 1.1;
            margin-bottom: 30px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        }

.content p {
            font-family: 'Mulish', sans-serif;
            font-size: 1.25rem;
            font-weight: 400;
            color: rgba(255, 255, 255, 0.85);
            line-height: 1.6;
            margin-bottom: 40px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

.hero-cta-button {
            display: inline-block;
            font-family: 'Mulish', sans-serif;
            font-size: 1rem;
            font-weight: 700;
            color: rgb(255, 255, 255);
            text-transform: uppercase;
            text-decoration: none;
            letter-spacing: 2px;
            padding: 18px 42px;
            background: linear-gradient(135deg, var(--accent-color), var(--primary-color));
            border-radius: 50px;
            transition: var(--transition);
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border: none;
            max-width: 300px;
            justify-content: center;
            margin: 0 auto;
        }

.hero-cta-button:before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.7s ease;
        }

.hero-cta-button:hover:before {
            left: 100%;
        }

.hero-cta-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(30, 98, 168, 0.4);
        }

.hero-cta-button:active {
            transform: translateY(-1px);
        }

/* SCROLL PROGRESS BAR (LIKE RAKIZ CAPITALS) */
        .scroll-progress {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            transform-origin: left;
            z-index: 9999;
            transition: transform 0.1s ease;
        }

/* ==================================================== */
        /* WHY CHOOSE US SECTION - FIXED TOP SPACING */
        /* ==================================================== */
        .why-choose-us {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 60px 40px 120px 40px; /* REDUCED TOP PADDING FROM 120px TO 60px */
            color: #333;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            position: relative;
            overflow: hidden;
            
            /* 50px solid border with subtle gradient */
            border: 50px solid transparent;
            background-clip: padding-box;
            margin: 0;
            box-sizing: border-box;
        }

/* FIX: Reduce space at the top */
        #why-choose-us {
            margin-top: 0 !important;
            padding-top: 60px !important;
        }

#why-choose-us .why-choose-us {
            padding-top: 60px !important;
        }

#why-choose-us .section-title {
            margin-top: 0 !important;
            margin-bottom: 60px !important;
        }

/* Remove any extra space from before/after pseudo-elements */
        #why-choose-us::before,
        #why-choose-us::after {
            top: -50px !important;
        }

/* Border background with subtle pattern */
        .why-choose-us::before {
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            right: -50px;
            bottom: -50px;
            z-index: 0;
            pointer-events: none;
        }

/* Main border lines */
        .why-choose-us::after {
            content: '';
            position: absolute;
            top: -50px;
            left: -50px;
            right: -50px;
            bottom: -50px;
            border: 2px solid rgba(68, 138, 255, 0.15);
            pointer-events: none;
            z-index: 1;
        }

/* Main Content Title */
        .section-title {
            text-align: center;
            font-size: 2.8rem;
            font-weight: 800;
            color: var(--text-dark);
            margin-bottom: 80px;
            position: relative;
            letter-spacing: 2px;
            text-transform: uppercase;
            z-index: 10;
        }

.section-title::after {
            content: '';
            position: absolute;
            bottom: -25px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            border-radius: 2px;
        }

/* Decorative line elements on sides */
        .title-decoration {
            position: absolute;
            top: 50%;
            width: 80px;
            height: 2px;
            background: linear-gradient(90deg, var(--primary-color), transparent);
            opacity: 0.3;
        }

.title-decoration.left {
            left: -120px;
            transform: rotate(180deg);
        }

.title-decoration.right {
            right: -120px;
        }

/* Cards Container */
        .cards-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 20px;
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            position: relative;
            z-index: 10;
        }

/* Card Styling */
        .why-choose-card {
            position: relative;
            height: 390px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            border: 1px solid rgba(68, 138, 255, 0.1);
        }

.why-choose-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
            border-color: rgba(68, 138, 255, 0.3);
        }

/* Card Faces */
        .why-choose-card .face {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

/* Front Face (Content) */
        .why-choose-card .face.face1 {
            box-sizing: border-box;
            padding: 20px 20px;
            flex-direction: column;
            text-align: center;
            z-index: 2;
        }

.why-choose-card .face.face1 .card-icon {
            width: 80px;
            height: 80px;
            margin-bottom: 5px;
            transition: transform 0.3s ease;
        }

.why-choose-card:hover .face.face1 .card-icon {
            transform: scale(1.1) rotate(5deg);
        }

.why-choose-card .face.face1 h2 {
            margin: 0 0 15px 0;
            font-size: 1.8em;
            font-weight: 700;
            color: var(--primary-color);
        }

.why-choose-card .face.face1 .card-content {
            font-size: 1.05em;
            color: #475569;
            line-height: 1.6;
            font-weight: 400;
        }

/* Back Face (Gradient) */
        .why-choose-card .face.face2 {
            background: white;
            transition: 0.5s ease;
            border-radius: 15px;
            z-index: 1;
        }

/* All cards use the blue gradient */
        .why-choose-card .face.face2 {
            background: linear-gradient(45deg, rgba(68, 138, 255, 0.1), rgba(68, 138, 255, 0.05));
            border: 2px solid rgba(68, 138, 255, 0.3);
        }

/* Hover effect for back face */
        .why-choose-card:hover .face.face2 {
            height: 60px;
            border-radius: 0 0 15px 15px;
            border-width: 0 2px 2px 2px;
        }

/* Number styling on back face */
        .why-choose-card .face.face2 h2 {
            margin: 0;
            padding: 0;
            font-size: 7em;
            font-weight: 800;
            color: rgba(68, 137, 255, 0.1);
            transition: 0.5s;
        }

.why-choose-card:hover .face.face2 h2 {
            font-size: 2em;
            color: var(--primary-color);
        }

/* Add a subtle overlay to back face */
        .why-choose-card .face.face2:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 50%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255,255,255,0.15), rgba(255,255,255,0));
            border-radius: 15px 0 0 15px;
        }

/* All icons use the blue color */
        .why-choose-card .card-icon svg { 
            fill: var(--primary-color); 
        }

/* Animation Keyframes */
        @keyframes slideInLeft {
            from {
                transform: translateX(-100%);
            }
            to {
                transform: translateX(0);
            }
        }

@keyframes slideInRight {
            from {
                transform: translateX(100%);
            }
            to {
                transform: translateX(0);
            }
        }

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

@keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

@keyframes dividerGrow {
            from {
                height: 0;
            }
            to {
                height: 100%;
            }
        }

@keyframes dotPulse {
            0%, 100% {
                opacity: 0;
                transform: translate(-50%, -50%) scale(1);
            }
            50% {
                opacity: 1;
                transform: translate(-50%, -50%) scale(1.5);
            }
        }

/* Character Animation */
        .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
        }

/* Add a subtle animation on load for cards */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

.why-choose-card {
            animation: fadeInUp 0.6s ease forwards;
            opacity: 0;
        }

.why-choose-card:nth-child(1) { animation-delay: 0.1s; }
        .why-choose-card:nth-child(2) { animation-delay: 0.2s; }
        .why-choose-card:nth-child(3) { animation-delay: 0.3s; }
        .why-choose-card:nth-child(4) { animation-delay: 0.4s; }

/* Responsive Design for cards */
        @media (max-width: 1200px) {
            .cards-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

@media (max-width: 992px) {
            .why-choose-us {
                padding: 40px 20px 80px 20px; /* Reduced top padding */
                border: 40px solid transparent;
            }
            
            .why-choose-us::before {
                top: -40px;
                left: -40px;
                right: -40px;
                bottom: -40px;
            }
            
            .why-choose-us::after {
                top: -40px;
                left: -40px;
                right: -40px;
                bottom: -40px;
            }
            
            .section-title {
                font-size: 2.2rem;
            }
            
            .title-decoration.left {
                left: -80px;
                width: 60px;
            }
            
            .title-decoration.right {
                right: -80px;
                width: 60px;
            }
        }

@media (max-width: 768px) {
            .cards-container {
                grid-template-columns: 1fr;
                max-width: 400px;
            }
            
            .why-choose-us {
                padding: 30px 15px 60px 15px; /* Reduced top padding */
                border: 30px solid transparent;
            }
            
            .why-choose-us::before {
                top: -30px;
                left: -30px;
                right: -30px;
                bottom: -30px;
            }
            
            .why-choose-us::after {
                top: -30px;
                left: -30px;
                right: -30px;
                bottom: -30px;
            }
            
            .section-title {
                font-size: 1.8rem;
                margin-bottom: 60px;
            }
            
            .title-decoration {
                display: none;
            }
            
            .why-choose-card {
                height: 350px;
            }
        }

@media (max-width: 576px) {
            .why-choose-us {
                padding: 25px 10px 50px 10px; /* Reduced top padding */
                border: 25px solid transparent;
            }
            
            .why-choose-us::before {
                top: -25px;
                left: -25px;
                right: -25px;
                bottom: -25px;
            }
            
            .why-choose-us::after {
                top: -25px;
                left: -25px;
                right: -25px;
                bottom: -25px;
            }
            
            .section-title {
                font-size: 1.6rem;
                margin-bottom: 50px;
            }
            
            .why-choose-card {
                height: 320px;
            }
            
            .why-choose-card .face.face1 {
                padding: 25px 20px;
            }
            
            .why-choose-card .face.face1 .card-icon {
                width: 70px;
                height: 70px;
            }
            
            .why-choose-card .face.face1 h2 {
                font-size: 1.5em;
            }
        }

@media (max-width: 480px) {
            .why-choose-card {
                height: 300px;
            }
            
            .why-choose-card .face.face1 .card-icon {
                width: 60px;
                height: 60px;
            }
            
            .why-choose-card .face.face1 h2 {
                font-size: 1.4em;
            }
        }

/* Responsive Styles for hero */
        @media (max-width: 1200px) {
            .content h1 {
                font-size: 4.5rem;
            }
            
            .content p {
                font-size: 1.1rem;
            }
        }

@media (max-width: 992px) {
            .content h1 {
                font-size: 3.8rem;
            }
            
            .content p {
                font-size: 1rem;
            }
            
            .hero-cta-button {
                padding: 16px 36px;
                font-size: 0.9rem;
            }
        }

@media (max-width: 768px) {
            .split-screen {
                flex-direction: column;
            }
            
            .split-left, .split-right {
                clip-path: none;
                flex: 1;
                height: 50%;
            }
            
            .split-left {
                animation: slideInTop 1.2s ease-out 0.3s forwards;
            }
            
            .split-right {
                animation: slideInBottom 1.2s ease-out 0.3s forwards;
            }
            
            @keyframes slideInTop {
                from { transform: translateY(-100%); }
                to { transform: translateY(0); }
            }
            
            @keyframes slideInBottom {
                from { transform: translateY(100%); }
                to { transform: translateY(0); }
            }
            
            .content h1 {
                font-size: 3.2rem;
            }
            
            .content p {
                font-size: 1rem;
                padding: 0 20px;
            }
            
            .central-divider {
                display: none;
            }
        }

@media (max-width: 576px) {
            .content h1 {
                font-size: 2.8rem;
            }
            
            .content p {
                font-size: 0.95rem;
                padding: 0 15px;
            }
            
            .hero-cta-button {
                padding: 14px 30px;
                font-size: 0.85rem;
            }
        }

@media (max-width: 480px) {
            .content h1 {
                font-size: 2.2rem;
            }
            
            .content p {
                font-size: 0.9rem;
            }
        }

@media (max-width: 360px) {
            .content h1 {
                font-size: 1.8rem;
            }
            
            .hero-cta-button {
                padding: 12px 24px;
                font-size: 0.8rem;
            }
        }

/* ================= HORIZONTAL SCROLL SERVICES ================= */
        /* NEW SERVICES SECTION STYLES - COPIED FROM PROVIDED CODE */
        /* ================= HERO ================= */
        .services-hero {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 0 20px;
            position: relative;
        }

.hero-content {
            max-width: 1000px;
        }

.services-hero h1 {
            font-family: 'Mulish', sans-serif;
            font-size: 4.5rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }

.services-hero p {
            max-width: 700px;
            margin: auto;
            font-size: 1.3rem;
            color: #555;
            line-height: 1.7;
        }

.scroll-indicator {
            position: absolute;
            bottom: 40px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 0.8rem;
            letter-spacing: 0.2em;
            color: #777;
            text-align: center;
        }

.scroll-indicator i {
            display: block;
            margin-top: 8px;
            animation: bounce 2s infinite;
        }

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

/* ================= SERVICES ================= */
        .services {
            height: 300vh;
            background: #f8f8f8;
            position: relative;
        }

/* FIX: Make sure the counter only appears in services section */
        .services .counter {
            position: absolute;
            bottom: 40px;
            right: 60px;
            padding: 12px 22px;
            background: rgba(255,255,255,0.9);
            border: 1px solid #eee;
            letter-spacing: 0.2em;
            font-size: 0.9rem;
            z-index: 100;
            display: block !important;
        }

/* Hide counter from other sections */
        .counter:not(.services .counter) {
            display: none !important;
        }

.sticky {
            position: sticky;
            top: 0;
            height: 100vh;
            overflow: hidden;
        }

/* Horizontal track */
        .track {
            display: flex;
            width: 300vw;
            height: 100%;
            will-change: transform;
        }

/* ================= SLIDE ================= */
        .services .slide {
            width: 100vw;
            height: 100vh;
            padding: 60px 100px;
            display: grid;
            grid-template-columns: 1.3fr 2fr;
            gap: 80px;
            align-items: center;
            position: relative;
            opacity: 0.4;
            transition: opacity 0.4s ease;
        }

/* FIX: Hide slides from other sections */
        .slide:not(.services .slide) {
            opacity: 1 !important;
            transform: none !important;
        }

/* Background */
        .slide-bg {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0.1;
            filter: grayscale(100%);
        }

/* Number */
        .service-number {
            position: absolute;
            left: 5%;
            top: 50%;
            transform: translateY(-50%);
            font-family: 'Mulish', sans-serif;
            font-size: 22rem;
            color: rgba(0,0,0,0.04);
            pointer-events: none;
        }

/* Editorial */
        .editorial {
            position: relative;
            z-index: 10;
        }

.service-subtitle {
            font-size: 0.8rem;
            letter-spacing: 0.3em;
            margin-bottom: 1.5rem;
            color: #666;
        }

.editorial h2 {
            font-family: 'Mulish', sans-serif;
            font-size: 3rem;
            font-weight: 700;
            margin-bottom: 1.5rem;
        }

.editorial p {
            max-width: 500px;
            font-size: 1.1rem;
            color: #555;
            line-height: 1.8;
            margin-bottom: 2rem;
        }

.service-badge {
            font-size: 0.85rem;
            margin-bottom: 2rem;
            letter-spacing: 0.1em;
            padding-left: 18px;
            position: relative;
        }

.service-badge::before {
            content: "";
            width: 8px;
            height: 8px;
            background: #111;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
        }

.service-link {
            text-decoration: none;
            color: #111;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid transparent;
            transition: 0.3s;
        }

.service-link:hover {
            border-color: #111;
        }

/* ================= CATALOG ================= */
        .catalog {
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 24px;
            z-index: 10;
        }

.item {
            background: #fff;
            border: 1px solid #eee;
            overflow: hidden;
            transition: transform 0.4s ease;
        }

.item:hover {
            transform: translateY(-6px);
        }

.item-img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            transition: transform 0.4s ease;
            will-change: transform;
        }

.item-content {
            padding: 20px;
        }

.item-title {
            font-weight: 600;
            margin-bottom: 6px;
        }

.item-desc {
            font-size: 0.95rem;
            color: #666;
        }

/* ================= FINAL CTA ================= */
        .final-cta {
            padding: 120px 20px;
            text-align: center;
        }

.final-cta h2 {
            font-family: 'Mulish', sans-serif;
            font-size: 3rem;
            margin-bottom: 1.2rem;
        }

.final-cta p {
            max-width: 700px;
            margin: auto;
            font-size: 1.2rem;
            color: #555;
        }

/* ================= RESPONSIVE ================= */
        @media (max-width: 992px) {
            .services .slide {
                grid-template-columns: 1fr;
                text-align: center;
                padding: 40px;
            }

.catalog {
                grid-template-columns: 1fr;
            }

.service-number {
                font-size: 14rem;
                left: 50%;
                transform: translate(-50%,-50%);
            }
        }

/* ==================================================== */
        /* INDUSTRY EXCELLENCE CAROUSEL SECTION - ADDED BELOW */
        /* ==================================================== */
        .industry-excellence-section {
            color: #0F172A;
            padding: 4rem 1rem;
            position: relative;
            overflow-x: hidden;
            width: 100%;
            font-family: 'Mulish', sans-serif;
        }

.industry-container {
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 2rem;
        }
        
        /* Add a subtle pattern overlay for visual interest */
        .industry-excellence-section .industry-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 25px 25px, rgba(30, 99, 168, 0.13) 2%, transparent 0%), 
                radial-gradient(circle at 75px 75px, rgba(30, 99, 168, 0.14) 2%, transparent 0%);
            background-size: 100px 100px;
            pointer-events: none;
            z-index: 0;
        }

/* Header Section */
        .industry-header {
            text-align: center;
            margin-bottom: 4rem;
        }

.industry-badge {
            display: inline-block;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            color: white;
            padding: 0.6rem 1.8rem;
            border-radius: 50px;
            font-size: 0.9rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 1.5rem;
            box-shadow: 0 5px 15px rgba(30, 98, 168, 0.2);
        }

.industry-title {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 1rem;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

.industry-subtitle {
            font-size: 1.25rem;
            color: var(--text-medium);
            max-width: 700px;
            margin: 0 auto;
            line-height: 1.6;
        }

/* Carousel Container */
        .carousel-container {
            position: relative;
            width: 100%;
            height: 500px;
            margin: 3rem 0;
        }

.industry-swiper {
            width: 100%;
            height: 100%;
            padding: 1rem 0;
        }

/* Swiper Slide Styles */
        .industry-swiper .swiper-slide {
            width: 340px;
            height: 420px;
            opacity: 1;
            transform: scale(0.85);
            transition: var(--transition);
            position: relative;
        }

.industry-swiper .swiper-slide-prev,
        .industry-swiper .swiper-slide-next {
            opacity: 1;
            transform: scale(0.9);
        }

.industry-swiper .swiper-slide-active {
            width: 380px;
            opacity: 1;
            transform: scale(1);
            filter: blur(0);
            z-index: 10;
        }

/* Card Design */
        .industry-card {
            width: 100%;
            height: 100%;
            background: var(--light-bg);
            border-radius: 20px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
            display: flex;
            flex-direction: column;
            border: 1px solid rgba(30, 99, 168, 0.29);
        }

.industry-swiper .swiper-slide-active .industry-card {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
            border-color: rgba(30, 99, 168, 0.29);
        }

/* Card Header */
        .industry-card-header {
            height: 210px;
            background: linear-gradient(135deg, var(--primary-light), var(--light-bg));
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

.industry-swiper .swiper-slide-active .industry-card-header {
            background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
        }

.industry-card-icon {
            width: 100px;
            height: 100px;
            background: var(--light-bg);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
            transition: var(--transition);
            position: relative;
            z-index: 2;
        }

.industry-swiper .swiper-slide-active .industry-card-icon {
            background: var(--light-bg);
            transform: scale(1.1);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

.industry-card-icon i {
            font-size: 2.5rem;
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            transition: var(--transition);
        }

.industry-swiper .swiper-slide-active .industry-card-icon i {
            background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

/* Card Background Pattern */
        .industry-card-pattern {
            position: absolute;
            width: 100%;
            height: 100%;
            opacity: 0.2;
            background-size: 30px 30px;
            background-image: 
                linear-gradient(to right, var(--primary-color) 1px, transparent 1px),
                linear-gradient(to bottom, var(--primary-color) 1px, transparent 1px);
        }

.industry-swiper .swiper-slide-active .industry-card-pattern {
            opacity: 0.1;
            background-image: 
                linear-gradient(to right, var(--light-bg) 1px, transparent 1px),
                linear-gradient(to bottom, var(--light-bg) 1px, transparent 1px);
        }

/* Card Content */
        .industry-card-content {
            padding: 2rem;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

.industry-card-title {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

.industry-swiper .swiper-slide-active .industry-card-title {
            color: var(--text-dark);
        }

.industry-card-description {
            color: var(--text-medium);
            line-height: 1.6;
            font-size: 1rem;
        }

/* Card Footer */
        .industry-card-footer {
            padding: 0 2rem 2rem;
        }

.industry-card-stats {
            display: flex;
            justify-content: space-between;
            opacity: 0.7;
            font-size: 0.9rem;
        }

.industry-swiper .swiper-slide-active .industry-card-stats {
            opacity: 1;
        }

.industry-stat {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

.industry-stat i {
            color: var(--primary-color);
        }

/* Navigation Buttons */
        .industry-swiper-button-next, 
        .industry-swiper-button-prev {
            width: 60px;
            height: 60px;
            background: var(--light-bg);
            border-radius: 50%;
            border: 1px solid var(--border-color);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            color: var(--primary-color);
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }

.industry-swiper-button-next:after, 
        .industry-swiper-button-prev:after {
            font-size: 1.2rem;
            font-weight: 700;
        }

.industry-swiper-button-next:hover, 
        .industry-swiper-button-prev:hover {
            background: var(--primary-color);
            color: var(--light-bg);
            transform: scale(1.1);
        }

/* Pagination */
        .industry-swiper-pagination {
            position: relative;
            margin-top: 2rem;
        }

.industry-swiper-pagination .swiper-pagination-bullet {
            width: 12px;
            height: 12px;
            background: var(--border-color);
            opacity: 0.7;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
        }

.industry-swiper-pagination .swiper-pagination-bullet-active {
            background: var(--primary-color);
            opacity: 1;
            transform: scale(1.3);
        }

/* Background decorative elements */
        .industry-bg-blur-1 {
            position: absolute;
            top: 10%;
            left: 5%;
            width: 400px;
            height: 400px;
            background: linear-gradient(135deg, rgba(30, 98, 168, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(20px);
            z-index: 0;
        }

.industry-bg-blur-2 {
            position: absolute;
            bottom: 10%;
            right: 5%;
            width: 500px;
            height: 500px;
            background: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
            border-radius: 50%;
            filter: blur(20px);
            z-index: 0;
        }

/* Responsive Design */
        @media (max-width: 1200px) {
            .industry-title {
                font-size: 3rem;
            }
            
            .carousel-container {
                height: 480px;
            }
            
            .industry-swiper .swiper-slide {
                width: 320px;
            }
            
            .industry-swiper .swiper-slide-active {
                width: 350px;
            }
        }

@media (max-width: 992px) {
            .industry-title {
                font-size: 2.5rem;
            }
            
            .carousel-container {
                height: 450px;
            }
            
            .industry-swiper .swiper-slide {
                width: 280px;
                height: 400px;
            }
            
            .industry-swiper .swiper-slide-active {
                width: 320px;
            }
            
            .industry-card-header {
                height: 190px;
            }
            
            .industry-card-icon {
                width: 90px;
                height: 90px;
            }
            
            .industry-card-icon i {
                font-size: 2.2rem;
            }
            
            .industry-card-content {
                padding: 1.5rem;
            }
            
            .industry-card-title {
                font-size: 1.6rem;
            }
        }

@media (max-width: 768px) {
            .industry-container {
                padding: 1.5rem;
            }
            
            .industry-header {
                margin-bottom: 3rem;
            }
            
            .industry-title {
                font-size: 2.2rem;
            }
            
            .industry-subtitle {
                font-size: 1.1rem;
            }
            
            .carousel-container {
                height: 420px;
                margin: 2rem 0;
            }
            
            .industry-swiper {
                padding: 1.5rem 0;
            }
            
            .industry-swiper .swiper-slide {
                width: 250px;
                height: 380px;
            }
            
            .industry-swiper .swiper-slide-active {
                width: 280px;
            }
            
            .industry-card-header {
                height: 170px;
            }
            
            .industry-card-icon {
                width: 80px;
                height: 80px;
            }
            
            .industry-card-icon i {
                font-size: 2rem;
            }
            
            .industry-swiper-button-next, 
            .industry-swiper-button-prev {
                width: 50px;
                height: 50px;
                display: none;
            }
            
            .industry-card-content {
                padding: 1.25rem;
            }
            
            .industry-card-title {
                font-size: 1.4rem;
                margin-bottom: 0.75rem;
            }
            
            .industry-card-description {
                font-size: 0.95rem;
            }
            
            .industry-card-footer {
                padding: 0 1.25rem 1.5rem;
            }
        }

@media (max-width: 576px) {
            .industry-excellence-section {
                padding: 2rem 1rem;
            }
            
            .industry-container {
                padding: 1rem;
            }
            
            .industry-badge {
                font-size: 0.8rem;
                padding: 0.5rem 1.5rem;
            }
            
            .industry-title {
                font-size: 1.8rem;
            }
            
            .industry-subtitle {
                font-size: 1rem;
            }
            
            .carousel-container {
                height: 400px;
                margin: 1.5rem 0;
            }
            
            .industry-swiper .swiper-slide {
                width: 220px;
                height: 360px;
            }
            
            .industry-swiper .swiper-slide-active {
                width: 240px;
            }
            
            .industry-card-header {
                height: 150px;
            }
            
            .industry-card-icon {
                width: 70px;
                height: 70px;
            }
            
            .industry-card-icon i {
                font-size: 1.8rem;
            }
            
            .industry-card-content {
                padding: 1rem;
            }
            
            .industry-card-title {
                font-size: 1.3rem;
            }
            
            .industry-card-description {
                font-size: 0.9rem;
            }
            
            .industry-card-footer {
                padding: 0 1rem 1rem;
            }
            
            .industry-card-stats {
                flex-direction: column;
                gap: 0.5rem;
            }
            
            .industry-swiper-pagination {
                margin-top: 1.5rem;
            }
        }

@media (max-width: 400px) {
            .industry-title {
                font-size: 1.6rem;
            }
            
            .carousel-container {
                height: 380px;
            }
            
            .industry-swiper .swiper-slide {
                width: 200px;
                height: 340px;
            }
            
            .industry-swiper .swiper-slide-active {
                width: 220px;
            }
        }

/* Animation for active card */
        @keyframes cardGlow {
            0% { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
            50% { box-shadow: 0 25px 50px rgba(30, 98, 168, 0.2); }
            100% { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
        }

.industry-swiper .swiper-slide-active .industry-card {
            animation: cardGlow 3s infinite;
        }

/* Stats counter animation */
        .industry-stat-value {
            font-weight: 600;
            color: var(--primary-color);
        }
        
        /* Add this to ensure AOS animations work smoothly with your existing animations */
        [data-aos] {
            pointer-events: none;
        }
        [data-aos].aos-animate {
            pointer-events: auto;
        }

/* ==================================================== */
        /* RESPONSIVE STYLES FOR TABLET AND MOBILE - SERVICES SECTION */
        /* ==================================================== */

/* Tablet Devices (768px and below) */
        @media (max-width: 768px) {
            /* SERVICES HERO */
            .services-hero {
                height: 80vh;
                padding: 0 15px;
            }
            
            .hero-content {
                max-width: 100%;
            }
            
            .services-hero h1 {
                font-size: 2.8rem;
                line-height: 1.2;
            }
            
            .services-hero p {
                font-size: 1.1rem;
                padding: 0 10px;
            }
            
            .scroll-indicator {
                bottom: 30px;
                font-size: 0.7rem;
            }
            
            /* SERVICES CONTAINER */
            .services {
                height: 250vh; /* Reduced height for mobile */
            }
            
            /* TRACK CONTAINER */
            .track {
                width: 300vw; /* Maintain width for horizontal scroll */
            }
            
            /* INDIVIDUAL SLIDES */
            .services .slide {
                padding: 40px 30px;
                grid-template-columns: 1fr; /* Single column layout */
                gap: 40px;
                opacity: 1; /* Full opacity on mobile */
                width: 100vw;
                height: auto;
                min-height: 100vh;
                align-content: start;
                padding-top: 80px;
            }
            
            /* BACKGROUND */
            .slide-bg {
                opacity: 0.08; /* Lighter background for better text readability */
            }
            
            /* SERVICE NUMBER */
            .service-number {
                font-size: 12rem;
                left: 50%;
                top: 10%;
                transform: translateX(-50%);
                opacity: 0.1;
            }
            
            /* EDITORIAL SECTION */
            .editorial {
                text-align: center;
                order: 2; /* Move below catalog on mobile */
            }
            
            .service-subtitle {
                font-size: 0.7rem;
                margin-bottom: 1rem;
            }
            
            .editorial h2 {
                font-size: 2rem;
                margin-bottom: 1rem;
                line-height: 1.2;
            }
            
            .editorial p {
                font-size: 1rem;
                line-height: 1.6;
                max-width: 100%;
                margin-bottom: 1.5rem;
                padding: 0 10px;
            }
            
            .service-link {
                font-size: 0.9rem;
            }
            
            /* CATALOG/CARD SECTION */
            .catalog {
                grid-template-columns: 1fr; /* Single column cards */
                gap: 20px;
                width: 100%;
                max-width: 400px;
                margin: 0 auto;
                order: 1; /* Move above editorial on mobile */
            }
            
            .item {
                margin-bottom: 10px;
            }
            
            .item-img {
                height: 180px;
            }
            
            .item-content {
                padding: 15px;
            }
            
            .item-title {
                font-size: 1.1rem;
            }
            
            .item-desc {
                font-size: 0.9rem;
            }
            
            /* COUNTER - FIXED FOR SERVICES SECTION ONLY */
            .services .counter {
                position: fixed; /* Fixed position for better visibility */
                bottom: 20px;
                right: 20px;
                left: auto;
                background: rgba(255, 255, 255, 0.95);
                backdrop-filter: blur(10px);
                border-radius: 25px;
                padding: 10px 20px;
                font-size: 0.8rem;
                z-index: 100;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                border: 1px solid rgba(0, 0, 0, 0.1);
            }
            
            /* FINAL CTA */
            .final-cta {
                padding: 80px 20px;
            }
            
            .final-cta h2 {
                font-size: 2.2rem;
            }
            
            .final-cta p {
                font-size: 1rem;
                padding: 0 10px;
            }
            
            /* Add mobile-specific scroll indicator */
            .mobile-scroll-hint {
                display: block;
                position: fixed;
                bottom: 100px;
                left: 50%;
                transform: translateX(-50%);
                background: rgba(255, 255, 255, 0.9);
                padding: 12px 24px;
                border-radius: 30px;
                font-size: 0.8rem;
                text-align: center;
                z-index: 99;
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
                border: 1px solid rgba(0, 0, 0, 0.1);
                backdrop-filter: blur(10px);
                animation: pulse 2s infinite;
            }
            
            .mobile-scroll-hint i {
                display: inline-block;
                margin-left: 8px;
                animation: swipe 2s infinite;
            }
            
            @keyframes swipe {
                0%, 100% { transform: translateX(0); }
                50% { transform: translateX(10px); }
            }
        }

/* Small Mobile Devices (576px and below) */
        @media (max-width: 576px) {
            .services-hero h1 {
                font-size: 2.2rem;
            }
            
            .services-hero p {
                font-size: 1rem;
            }
            
            .services {
                height: 220vh; /* Further reduced height */
            }
            
            .services .slide {
                padding: 30px 20px;
                padding-top: 70px;
                gap: 30px;
            }
            
            .service-number {
                font-size: 10rem;
                top: 8%;
            }
            
            .editorial h2 {
                font-size: 1.8rem;
            }
            
            .editorial p {
                font-size: 0.95rem;
            }
            
            .catalog {
                max-width: 100%;
            }
            
            .item-img {
                height: 160px;
            }
            
            .services .counter {
                bottom: 15px;
                right: 15px;
                padding: 8px 16px;
                font-size: 0.75rem;
            }
            
            .mobile-scroll-hint {
                bottom: 80px;
                font-size: 0.75rem;
                padding: 10px 20px;
            }
        }

/* Extra Small Mobile Devices (400px and below) */
        @media (max-width: 400px) {
            .services-hero h1 {
                font-size: 1.8rem;
            }
            
            .services-hero p {
                font-size: 0.9rem;
            }
            
            .services {
                height: 200vh;
            }
            
            .services .slide {
                padding: 25px 15px;
                padding-top: 60px;
                gap: 25px;
            }
            
            .service-number {
                font-size: 8rem;
            }
            
            .editorial h2 {
                font-size: 1.6rem;
            }
            
            .editorial p {
                font-size: 0.9rem;
            }
            
            .item-img {
                height: 140px;
            }
            
            .item-title {
                font-size: 1rem;
            }
            
            .item-desc {
                font-size: 0.85rem;
            }
            
            .mobile-scroll-hint {
                font-size: 0.7rem;
                bottom: 70px;
            }
        }

/* Landscape Orientation for Mobile */
        @media (max-height: 600px) and (orientation: landscape) {
            .services-hero {
                height: 120vh;
            }
            
            .services {
                height: 180vh;
            }
            
            .services .slide {
                min-height: 100vh;
                padding-top: 60px;
                grid-template-columns: 1fr 1fr;
                gap: 30px;
            }
            
            .service-number {
                font-size: 8rem;
                top: 15%;
            }
            
            .editorial {
                order: 1;
                text-align: left;
            }
            
            .editorial p {
                padding: 0;
            }
            
            .catalog {
                order: 2;
                grid-template-columns: 1fr;
            }
            
            .item-img {
                height: 120px;
            }
            
            .mobile-scroll-hint {
                display: none;
            }
        }

/* Touch device optimizations */
        @media (hover: none) and (pointer: coarse) {
            .service-link {
                padding: 12px 24px;
                display: inline-block;
                min-height: 44px; /* Minimum touch target size */
                line-height: 20px;
            }
            
            .item {
                cursor: default; /* Remove pointer cursor on touch devices */
            }
            
            .item:hover {
                transform: none; /* Disable hover effects on touch */
            }
            
            /* Improve scroll performance on mobile */
            .track {
                transform: translate3d(0, 0, 0);
                backface-visibility: hidden;
                perspective: 1000px;
            }
        }

/* Add CSS for mobile navigation dots indicator */
        .services-mobile-indicators {
            display: none;
        }

@media (max-width: 768px) {
            .services-mobile-indicators {
                display: flex;
                position: fixed;
                bottom: 70px;
                left: 50%;
                transform: translateX(-50%);
                gap: 8px;
                z-index: 98;
            }
            
            .services-mobile-indicator {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.5);
                border: 1px solid rgba(0, 0, 0, 0.2);
                transition: all 0.3s ease;
            }
            
            .services-mobile-indicator.active {
                background: var(--primary-color);
                transform: scale(1.2);
                box-shadow: 0 0 10px rgba(30, 98, 168, 0.5);
            }
        }

/* Pulsing animation for mobile scroll hint */
        @keyframes pulse {
            0%, 100% {
                transform: translateX(-50%) scale(1);
                box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            }
            50% {
                transform: translateX(-50%) scale(1.05);
                box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
            }
        }

/* Improve scrollbar visibility on mobile */
        @media (max-width: 768px) {
            ::-webkit-scrollbar {
                width: 8px;
                height: 8px;
            }
            
            ::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 4px;
            }
            
            ::-webkit-scrollbar-track {
                background: rgba(0, 0, 0, 0.05);
            }
        }

/* Loading optimization for mobile */
        @media (max-width: 768px) {
            .item-img {
                background-color: #f5f5f5;
            }
            
            .slide-bg {
                background-attachment: scroll; /* Change from fixed to scroll for better mobile performance */
            }
        }

/* ==================================================== */
        /* FIX FOR UNWANTED DOTS AND COUNTERS */
        /* ==================================================== */

/* Hide all pagination dots and indicators globally except where specifically needed */
        .slide_indicators:not(#indicators),
        .industry-swiper-pagination:not(.industry-excellence-section .industry-swiper-pagination),
        .swiper-pagination:not(.industry-excellence-section .swiper-pagination),
        .slick-dots,
        [class*="bullet"]:not(.industry-excellence-section [class*="bullet"]),
        [class*="pagination"]:not(.industry-excellence-section [class*="pagination"]) {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

/* Specifically hide the 1/3, 2/3, 3/3 counter from all sections except services */
        .counter:not(.services .counter) {
            display: none !important;
            visibility: hidden !important;
            opacity: 0 !important;
        }

/* Hide any ::before or ::after pseudo-elements that might be creating dots */
        .section::before,
        .section::after,
        section::before,
        section::after,
        .why-choose-us::before,
        .why-choose-us::after,
        .hero::before,
        .hero::after {
            content: none !important;
        }

/* Ensure only the industry excellence section shows its pagination */
        .industry-excellence-section .industry-swiper-pagination {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            margin-top: 2rem !important;
        }

/* Ensure only the tech stack section shows its indicators */
        .tech-stack #indicators {
            display: flex !important;
            visibility: visible !important;
            opacity: 1 !important;
            position: relative !important;
            margin-top: 40px !important;
        }

/* Hide any residual indicators in other sections */
        .why-choose-us [class*="indicators"],
        .hero [class*="indicators"],
        .animated-cta-section [class*="indicators"],
        .services-hero [class*="indicators"] {
            display: none !important;
        }

/* Remove any list-style dots from unordered lists */
        ul, ol {
            list-style: none !important;
            padding-left: 0 !important;
        }

/* Hide any numeric counters except in services section */
        [class*="fraction"]:not(.services [class*="fraction"]) {
            display: none !important;
        }

/* Make sure the counter only appears in the services section */
        .services .counter {
            position: absolute;
            bottom: 40px;
            right: 60px;
            padding: 12px 22px;
            background: rgba(255,255,255,0.9);
            border: 1px solid #eee;
            letter-spacing: 0.2em;
            font-size: 0.9rem;
            z-index: 100;
            display: block !important;
        }

/* Hide slide indicators from services section since we're using custom counter */
        .services .slide_indicators {
            display: none !important;
        }

/* Make sure the services section slides don't have unwanted indicators */
        .services .slide .service-number {
            display: block !important;
        }

/* Prevent initialization conflicts */
        .swiper-initialized {
            overflow: hidden;
        }

/* Prevent AOS from interfering with other animations */
        [data-aos].aos-animate {
            pointer-events: auto !important;
        }

/* Hide any dots that might appear from browser defaults */
        ::marker {
            display: none !important;
            content: none !important;
        }

/* Target specific problematic elements */
        .swiper-pagination-bullets,
        .swiper-pagination-fraction {
            display: none !important;
        }

/* Ensure all unwanted pagination is hidden */
        .hero .swiper-pagination,
        .why-choose-us .swiper-pagination,
        .animated-cta-section .swiper-pagination,
        .services-hero .swiper-pagination,
        .tech-stack .swiper-pagination:not(#indicators) {
            display: none !important;
        }

/* ==================================================== */
        /* HIDE DOTS AND COUNTERS ON SMALL DEVICES */
        /* ==================================================== */
        @media (max-width: 768px) {
            /* Hide the counter in services section on mobile */
            .services .counter {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }
            
            /* Hide indicators in tech stack section on mobile */
            #indicators {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }
            
            /* Hide pagination dots in industry carousel on mobile */
            .industry-swiper-pagination {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }
            
            /* Hide any other unwanted indicators */
            .slide_indicators,
            .swiper-pagination,
            [class*="pagination"],
            [class*="indicators"] {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }
            
            /* Hide mobile indicators too if they exist */
            .services-mobile-indicators {
                display: none !important;
            }
        }

/* Extra small devices */
        @media (max-width: 480px) {
            /* Ensure all counters and indicators are hidden */
            .counter,
            [class*="counter"],
            [class*="fraction"] {
                display: none !important;
                visibility: hidden !important;
                opacity: 0 !important;
            }
        }
    </style>
</head>
<body>
    <?php include 'common/header.php'; ?>
    
    
    
    
    <section class="hero">
        
        <div class="split-screen">
            <div class="split-left"></div>
            <div class="split-right"></div>
            
            
            <div class="central-divider"></div>
        </div>
        
        
        <div class="content-container">
            <div class="content" data-aos="fade-up" data-aos-delay="500">
                <h1 id="mainHeading">Transform Your Digital Future</h1>
                <p>We deliver innovative technology solutions that drive measurable growth and sustainable competitive advantage for modern enterprises.</p>
                <a href="#why-choose-us" class="hero-cta-button">Get Started Today</a>
            </div>
        </div>
    </section>
    
    
    
    
    <section class="why-choose-us" id="why-choose-us">
        <div class="grid-effect-container" data-color="default"></div>
        
        
        <div class="corner-decor tl"></div>
        <div class="corner-decor tr"></div>
        <div class="corner-decor bl"></div>
        <div class="corner-decor br"></div>
        
        
        <div class="inner-line horizontal top"></div>
        <div class="inner-line horizontal bottom"></div>
        <div class="inner-line vertical left"></div>
        <div class="inner-line vertical right"></div>

<h2 class="section-title" data-aos="fade-down" data-aos-delay="50">
            <span class="title-decoration left"></span>
            WHY CHOOSE US
            <span class="title-decoration right"></span>
        </h2>

<div class="cards-container">
            
            
            <div class="why-choose-card" data-aos="fade-up" data-aos-delay="100">
                <div class="face face1">
                    <div class="card-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                        </svg>
                    </div>
                    <h2>Quality</h2>
                    <p class="card-content">Our commitment to excellence ensures every project meets the highest standards of quality and precision.</p>
                </div>
                <div class="face face2">
                    <h2>01</h2>
                </div>
            </div>

<div class="why-choose-card" data-aos="fade-up" data-aos-delay="200">
                <div class="face face1">
                    <div class="card-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
                        </svg>
                    </div>
                    <h2>Personnel</h2>
                    <p class="card-content">Expert team dedicated to delivering exceptional results with professional expertise and attention to detail.</p>
                </div>
                <div class="face face2">
                    <h2>02</h2>
                </div>
            </div>

<div class="why-choose-card" data-aos="fade-up" data-aos-delay="300">
                <div class="face face1">
                    <div class="card-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36 2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>
                        </svg>
                    </div>
                    <h2>Innovation</h2>
                    <p class="card-content">Pioneering solutions and cutting-edge approaches to solve complex challenges effectively.</p>
                </div>
                <div class="face face2">
                    <h2>03</h2>
                </div>
            </div>

<div class="why-choose-card" data-aos="fade-up" data-aos-delay="400">
                <div class="face face1">
                    <div class="card-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                        </svg>
                    </div>
                    <h2>Commitment</h2>
                    <p class="card-content">Dedicated partnership and unwavering support to ensure your complete satisfaction and success.</p>
                </div>
                <div class="face face2">
                    <h2>04</h2>
                </div>
            </div>

</div>
    </section>
    
    
    <section class="services-hero">
        <div class="hero-content">
            <h1>Enterprise Digital Solutions by Elevate Straights</h1>
            <p>
                Empowering businesses with scalable cloud, advanced cybersecurity, 
                and future-ready digital transformation solutions.
            </p>
        </div>

<div class="scroll-indicator">
            Explore Our Services
            <i class="fas fa-chevron-down"></i>
        </div>
    </section>

<section class="services">
        <div class="sticky">
            <div class="counter" id="counter">01 / 03</div>

<div class="slide">
                    <div class="slide-bg" style="background-image:url('https://images.unsplash.com/photo-1556761175-5973dc0f32e7');"></div>
                    <div class="service-number">01</div>

<div class="editorial">
                        <div class="service-subtitle">Service Focus</div>
                        <h2>Cloud Solutions & Migration </h2>
                        <p>Scalable cloud infrastructure and migration services for modern businesses. We optimize performance while reducing costs with expert cloud strategies.</p>
                        <a class="service-link">Get Started <i class="fas fa-arrow-right"></i></a>
                    </div>

<div class="catalog">
                        <div class="item">
                            <img class="item-img" src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7">
                            <div class="item-content">
                                <div class="item-title">Cloud Architecture</div>
                                <div class="item-desc">Designed for scale & performance.</div>
                            </div>
                        </div>
                        <div class="item">
                            <img class="item-img" src="https://images.unsplash.com/photo-1555949963-aa79dcee981c">
                            <div class="item-content">
                                <div class="item-title">Data Migration</div>
                                <div class="item-desc">Zero downtime transitions.</div>
                            </div>
                        </div>
                        <div class="item">
                            <img class="item-img" src="https://middleware.io/wp-content/uploads/2023/11/What-is-Serverless-Architecture.jpg">
                            <div class="item-content">
                                <div class="item-title">Serverless</div>
                                <div class="item-desc">Cost-optimized infrastructure.</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slide">
                    <div class="slide-bg" style="background-image:url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b');"></div>
                    <div class="service-number">02</div>

<div class="editorial">
                        <div class="service-subtitle">Security First</div>
                        <h2>Cybersecurity & Protection</h2>
                        <p>Advanced security solutions to protect your digital assets and data. Stay ahead of threats with our comprehensive security framework.</p>
                        <a class="service-link">Secure Now <i class="fas fa-shield-alt"></i></a>
                    </div>

<div class="catalog">
                        <div class="item">
                            <img class="item-img" src="https://images.unsplash.com/photo-1550751827-4bd374c3f58b">
                            <div class="item-content">
                                <div class="item-title">Threat Detection</div>
                                <div class="item-desc">24/7 monitoring.</div>
                            </div>
                        </div>
                        <div class="item">
                            <img class="item-img" src="https://images.unsplash.com/photo-1563986768609-322da13575f3">
                            <div class="item-content">
                                <div class="item-title">Pen Testing</div>
                                <div class="item-desc">Find vulnerabilities early.</div>
                            </div>
                        </div>
                        <div class="item">
                            <img class="item-img" src="https://images.unsplash.com/photo-1552664730-d307ca884978">
                            <div class="item-content">
                                <div class="item-title">IAM</div>
                                <div class="item-desc">Access control systems.</div>
                            </div>
                        </div>
                    </div>
                </div>

<div class="slide">
                    <div class="slide-bg" style="background-image:url('https://images.unsplash.com/photo-1581090700227-1e37b190418e');"></div>
                    <div class="service-number">03</div>

<div class="editorial">
                        <div class="service-subtitle">Modernization</div>
                        <h2>Digital Transformation</h2>
                        <p>End-to-end digital transformation strategies to modernize your business processes, improve efficiency, and drive innovation.</p>
                        <a class="service-link">Transform <i class="fas fa-sync-alt"></i></a>
                    </div>

<div class="catalog">
                        <div class="item">
                            <img class="item-img" src="https://images.unsplash.com/photo-1581090700227-1e37b190418e">
                            <div class="item-content">
                                <div class="item-title">Automation</div>
                                <div class="item-desc">Streamline operations.</div>
                            </div>
                        </div>
                        <div class="item">
                            <img class="item-img" src="https://images.unsplash.com/photo-1552664730-d307ca884978">
                            <div class="item-content">
                                <div class="item-title">Legacy Upgrade</div>
                                <div class="item-desc">Future-ready platforms.</div>
                            </div>
                        </div>
                        <div class="item">
                            <img class="item-img" src="https://images.unsplash.com/photo-1556761175-5973dc0f32e7">
                            <div class="item-content">
                                <div class="item-title">AI Integration</div>
                                <div class="item-desc">Smart decision making.</div>
                            </div>
                        </div>
                    </div>
                </div>

</div>
        </div>
    </section>
   
    
    
    
    <section class="industry-excellence-section">
        
        <div class="industry-bg-blur-1"></div>
        <div class="industry-bg-blur-2"></div>
        
        <div class="industry-container">
            
            <div class="industry-header">
                <div class="industry-badge" data-aos="fade-down" data-aos-delay="100">
                    <i class="fas fa-star"></i> INDUSTRY EXPERTISE
                </div>
                <h1 class="industry-title" data-aos="fade-up" data-aos-delay="150">Transforming Industries with Innovative Solutions</h1>
                <p class="industry-subtitle" data-aos="fade-up" data-aos-delay="200">We partner with industry leaders across diverse sectors to deliver cutting-edge technology solutions and digital transformation services.</p>
            </div>
            
            
            <div class="carousel-container" data-aos="fade-up" data-aos-delay="300">
                <div class="industry-swiper swiper">
                    <div class="swiper-wrapper">
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-car"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Automotive</h3>
                                    <p class="industry-card-description">Connected vehicle platforms, autonomous driving solutions, and digital transformation for next-gen mobility.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-project-diagram"></i>
                                            <span class="industry-stat-value">250+ Projects</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-clock"></i>
                                            <span class="industry-stat-value">24/7 Support</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-heartbeat"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Healthcare</h3>
                                    <p class="industry-card-description">HIPAA-compliant systems, telemedicine platforms, and AI-powered diagnostic tools for modern healthcare.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-shield-alt"></i>
                                            <span class="industry-stat-value">Secure</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-users"></i>
                                            <span class="industry-stat-value">50M+ Users</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-shopping-cart"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Retail & E-commerce</h3>
                                    <p class="industry-card-description">Omnichannel retail solutions, personalized shopping experiences, and scalable e-commerce platforms.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-chart-line"></i>
                                            <span class="industry-stat-value">+40% Growth</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-globe"></i>
                                            <span class="industry-stat-value">Global</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-university"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Finance & Banking</h3>
                                    <p class="industry-card-description">Fintech solutions, secure banking infrastructure, and blockchain technology for financial institutions.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-lock"></i>
                                            <span class="industry-stat-value">Bank-grade</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-bolt"></i>
                                            <span class="industry-stat-value">Fast</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-gamepad"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Entertainment</h3>
                                    <p class="industry-card-description">Immersive gaming platforms, streaming solutions, and interactive media experiences for global audiences.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-trophy"></i>
                                            <span class="industry-stat-value">Award-winning</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-expand"></i>
                                            <span class="industry-stat-value">Scalable</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-industry"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Manufacturing</h3>
                                    <p class="industry-card-description">Industry 4.0 solutions, IoT integration, and smart factory automation for modern manufacturing.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-robot"></i>
                                            <span class="industry-stat-value">Automated</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-cogs"></i>
                                            <span class="industry-stat-value">Optimized</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

<div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-car"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Automotive</h3>
                                    <p class="industry-card-description">Connected vehicle platforms, autonomous driving solutions, and digital transformation for next-gen mobility.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-project-diagram"></i>
                                            <span class="industry-stat-value">250+ Projects</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-clock"></i>
                                            <span class="industry-stat-value">24/7 Support</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-heartbeat"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Healthcare</h3>
                                    <p class="industry-card-description">HIPAA-compliant systems, telemedicine platforms, and AI-powered diagnostic tools for modern healthcare.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-shield-alt"></i>
                                            <span class="industry-stat-value">Secure</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-users"></i>
                                            <span class="industry-stat-value">50M+ Users</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-shopping-cart"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Retail & E-commerce</h3>
                                    <p class="industry-card-description">Omnichannel retail solutions, personalized shopping experiences, and scalable e-commerce platforms.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-chart-line"></i>
                                            <span class="industry-stat-value">+40% Growth</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-globe"></i>
                                            <span class="industry-stat-value">Global</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-university"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Finance & Banking</h3>
                                    <p class="industry-card-description">Fintech solutions, secure banking infrastructure, and blockchain technology for financial institutions.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-lock"></i>
                                            <span class="industry-stat-value">Bank-grade</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-bolt"></i>
                                            <span class="industry-stat-value">Fast</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-gamepad"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Entertainment</h3>
                                    <p class="industry-card-description">Immersive gaming platforms, streaming solutions, and interactive media experiences for global audiences.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-trophy"></i>
                                            <span class="industry-stat-value">Award-winning</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-expand"></i>
                                            <span class="industry-stat-value">Scalable</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        
                        <div class="swiper-slide">
                            <div class="industry-card">
                                <div class="industry-card-header">
                                    <div class="industry-card-pattern"></div>
                                    <div class="industry-card-icon">
                                        <i class="fas fa-industry"></i>
                                    </div>
                                </div>
                                <div class="industry-card-content">
                                    <h3 class="industry-card-title">Manufacturing</h3>
                                    <p class="industry-card-description">Industry 4.0 solutions, IoT integration, and smart factory automation for modern manufacturing.</p>
                                </div>
                                <div class="industry-card-footer">
                                    <div class="industry-card-stats">
                                        <div class="industry-stat">
                                            <i class="fas fa-robot"></i>
                                            <span class="industry-stat-value">Automated</span>
                                        </div>
                                        <div class="industry-stat">
                                            <i class="fas fa-cogs"></i>
                                            <span class="industry-stat-value">Optimized</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    
                    <div class="industry-swiper-button-next swiper-button-next"></div>
                    <div class="industry-swiper-button-prev swiper-button-prev"></div>
                    
                    
                    <div class="industry-swiper-pagination swiper-pagination"></div>
                </div>
            </div>
        </div>
    </section>

<section class="tech-stack" style="background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);">
        <div class="container">
            <div class="section-header">
                <div class="section-badge">
                    <span>Technologies</span>
                </div>
                <h2>Cutting-Edge Technology Stack</h2>
                <p>We leverage the latest technologies to deliver exceptional results with precision and innovation</p>
            </div>
            
            <div class="slide_contain">
                <div class="slide_list" id="slider">
                    
                    <div class="tech-card-slide aws-card">
                        <div class="card-content">
                            <div class="tech-icon">
                                <i class="fab fa-aws"></i>
                            </div>
                            <h4>AWS</h4>
                            <p>Cloud Infrastructure & Scalable Solutions</p>
                        </div>
                    </div>
                    
                    <div class="tech-card-slide azure-card">
                        <div class="card-content">
                            <div class="tech-icon">
                                <i class="fab fa-microsoft"></i>
                            </div>
                            <h4>Azure</h4>
                            <p>Enterprise Cloud & Hybrid Solutions</p>
                        </div>
                    </div>
                    
                    <div class="tech-card-slide gcp-card">
                        <div class="card-content">
                            <div class="tech-icon">
                                <i class="fab fa-google"></i>
                            </div>
                            <h4>Google Cloud</h4>
                            <p>AI, Analytics & Machine Learning</p>
                        </div>
                    </div>
                    
                    <div class="tech-card-slide docker-card">
                        <div class="card-content">
                            <div class="tech-icon">
                                <i class="fab fa-docker"></i>
                            </div>
                            <h4>Docker</h4>
                            <p>Containerization & DevOps</p>
                        </div>
                    </div>
                    
                    <div class="tech-card-slide react-card">
                        <div class="card-content">
                            <div class="tech-icon">
                                <i class="fab fa-react"></i>
                            </div>
                            <h4>React</h4>
                            <p>Modern Frontend Development</p>
                        </div>
                    </div>
                    
                    <div class="tech-card-slide node-card">
                        <div class="card-content">
                            <div class="tech-icon">
                                <i class="fab fa-node-js"></i>
                            </div>
                            <h4>Node.js</h4>
                            <p>Server-Side JavaScript</p>
                        </div>
                    </div>
                    
                    <div class="tech-card-slide python-card">
                        <div class="card-content">
                            <div class="tech-icon">
                                <i class="fab fa-python"></i>
                            </div>
                            <h4>Python</h4>
                            <p>Data Science & Backend Development</p>
                        </div>
                    </div>
                    
                </div>
            </div>
            
            <div class="slide_arrows">
                <div class="slide_arrow" id="prev">
                    <i class="fas fa-chevron-left"></i>
                </div>
                <div class="slide_arrow" id="next">
                    <i class="fas fa-chevron-right"></i>
                </div>
            </div>
            
            <div class="slide_indicators" id="indicators">
                
            </div>
        </div>
    </section>

<section class="animated-cta-section">
        <div class="cta-frame">
            <div class="cta-container">      
                
                <h2 class="cta-subheading" 
                    data-aos="fade-up" 
                    data-aos-duration="800"
                    data-aos-delay="100">
                    Ready to Transform Your Business?
                </h2>
                
                
                <p class="cta-description"
                    data-aos="fade-up"
                    data-aos-duration="800"
                    data-aos-delay="200">
                    Join hundreds of successful companies that have already transformed their operations with our cutting-edge IT solutions.
                </p>

<div class="cta-image-wrapper"
                    data-aos="zoom-in"
                    data-aos-duration="1000"
                    data-aos-delay="300">
                    <img
                    src="/img/two-hands.png"
                    alt="Golden handshake"
                    class="cta-image"
                    />
                </div>

<a href="#" class="cta-button"
                    data-aos="fade-up"
                    data-aos-duration="800"
                    data-aos-delay="400"
                    data-aos-anchor-placement="top-bottom">
                    GET IN TOUCH <i class="fas fa-arrow-right"></i>
                </a>
            </div>
        </div>
    </section>
    
    <?php include 'common/footer.php'; ?>
    
    <script>
        // ====================================================
        // INITIALIZATION MANAGEMENT
        // ====================================================
        let isInitialized = {
            parallax: false,
            services: false,
            techStack: false,
            industryCarousel: false,
            AOS: false
        };

// Initialize everything on page load
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM Content Loaded - Initializing...');
            initParallaxScroll();
            initScrollProgress();
            animateText('mainHeading');
            initSmoothScrolling();
            initTypingEffect();
            initGridEffects();
            initTechStackSlider();
            initCTAAOS();
            initMobileServices();
            initServicesSection();
            initIndustryCarousel();
        });

// ====================================================
        // AOS INITIALIZATION FOR CTA SECTION
        // ====================================================
        function initCTAAOS() {
            if (isInitialized.AOS) return;
            
            // Initialize AOS for the CTA section
            if (typeof AOS !== 'undefined') {
                AOS.init({
                    duration: 800,
                    easing: 'ease-out-cubic',
                    once: true,
                    offset: 100,
                    delay: 100,
                    mirror: false,
                });
                isInitialized.AOS = true;
            }
        }
        
        // ====================================================
        // TECHNOLOGY STACK SLIDER FUNCTIONALITY
        // ====================================================
        function initTechStackSlider() {
            if (isInitialized.techStack) return;
            
            const slides = document.querySelectorAll(".tech-card-slide");
            const indicatorsContainer = document.getElementById("indicators");
            let active = 0;
            let autoSlideInterval;

// Create indicators
            if (slides.length > 0 && indicatorsContainer) {
                // Clear any existing indicators
                indicatorsContainer.innerHTML = '';
                
                slides.forEach((_, index) => {
                    const indicator = document.createElement("div");
                    indicator.className = "indicator";
                    if (index === 0) indicator.classList.add("active");
                    indicator.addEventListener("click", () => {
                        active = index;
                        update();
                        resetAutoSlide();
                    });
                    indicatorsContainer.appendChild(indicator);
                });

const indicators = document.querySelectorAll(".indicator");

function resetAutoSlide() {
                    clearInterval(autoSlideInterval);
                    startAutoSlide();
                }

// Navigation
                const nextBtn = document.getElementById("next");
                const prevBtn = document.getElementById("prev");
                
                if (nextBtn) {
                    nextBtn.addEventListener("click", () => {
                        if (active < slides.length - 1) {
                            active++;
                            update();
                            resetAutoSlide();
                        }
                    });
                }
                
                if (prevBtn) {
                    prevBtn.addEventListener("click", () => {
                        if (active > 0) {
                            active--;
                            update();
                            resetAutoSlide();
                        }
                    });
                }

// Click on card to bring it to front
                slides.forEach((slide, index) => {
                    slide.addEventListener("click", () => {
                        if (index !== active) {
                            active = index;
                            update();
                            resetAutoSlide();
                        }
                    });
                });

// Initialize
                update();
                startAutoSlide();
                
                isInitialized.techStack = true;
            }
        }
        
        // ====================================================
        // HORIZONTAL SCROLL SERVICES - FIXED VERSION
        // ====================================================
        function initServicesSection() {
            if (isInitialized.services) return;
            
            const servicesSection = document.querySelector(".services");
            if (!servicesSection) return;
            
            const track = servicesSection.querySelector("#track");
            const counter = servicesSection.querySelector("#counter");
            const slides = servicesSection.querySelectorAll(".slide");

if (!track || !counter || slides.length === 0) {
                console.warn('Services section elements not found');
                return;
            }

let targetX = 0;
            let currentX = 0;
            let currentSlide = 0;

function lerp(a, b, n) {
                return a + (b - a) * n;
            }

function animate() {
                currentX = lerp(currentX, targetX, 0.08);
                track.style.transform = `translateX(${currentX}vw)`;

slides.forEach((slide, i) => {
                    const offset = i * -100;
                    const distance = Math.abs(currentX - offset);

slide.style.opacity = Math.max(1 - distance / 120, 0.4);

slide.querySelectorAll(".item-img").forEach(img => {
                        img.style.transform = `translateY(${distance * 0.08}px)`;
                    });
                });

requestAnimationFrame(animate);
            }

function onScroll() {
                const start = servicesSection.offsetTop;
                const end = start + servicesSection.offsetHeight - window.innerHeight;
                
                // Check if we're in the services section
                if (window.scrollY < start || window.scrollY > end) {
                    return;
                }
                
                const progress = Math.min(Math.max((window.scrollY - start) / (end - start), 0), 1);
                targetX = progress * -200;

const slideIndex = Math.round(progress * 2);
                if (slideIndex !== currentSlide) {
                    currentSlide = slideIndex;
                    counter.textContent = `0${slideIndex + 1} / 03`;
                }
            }

<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    
    
    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

</body>
</html>