:root{
    --hero-bg-color:linear-gradient(90deg, #033046,#052C3F);
    --primary-color: #2FD5C7;
    --primary-color-hover: #0eb8a9;
    --text-p-color:#64748b;
    
}


/* Page Loading Animation */
#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0a192f, #112d4e, #1a365d);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

#page-loader.hidden {
    animation: fadeOut 0.8s ease-out forwards;
}

.loader-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.floating-shapes {
    position: relative;
    width: 100%;
    height: 100%;
}

.shape {
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(45deg, #2FD5C7, #14D8C8);
    opacity: 0.3;
    animation: float 6s ease-in-out infinite;
}

.shape-1 {
    width: 80px;
    height: 80px;
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.shape-2 {
    width: 60px;
    height: 60px;
    top: 60%;
    right: 15%;
    animation-delay: 1s;
}

.shape-3 {
    width: 40px;
    height: 40px;
    top: 80%;
    left: 20%;
    animation-delay: 2s;
}

.shape-4 {
    width: 100px;
    height: 100px;
    top: 10%;
    right: 30%;
    animation-delay: 3s;
}

.shape-5 {
    width: 50px;
    height: 50px;
    top: 40%;
    left: 60%;
    animation-delay: 4s;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) rotate(180deg);
        opacity: 0.6;
    }
}

.loader-content {
    text-align: center;
    color: white;
    z-index: 10;
    position: relative;
}

.loader-logo {
    margin-bottom: 3rem;
}

.logo-container {
    position: relative;
    display: inline-block;
}

.loader-logo img {
    width: 150px;
    height: auto;
    /* Use original logo colors on loader */
    filter: none;
    animation: logoGlow 2s ease-in-out infinite;
}

.logo-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(47, 213, 199, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% {
        transform: scale(1);
        filter: brightness(0) invert(1) drop-shadow(0 0 10px rgba(47, 213, 199, 0.5));
    }
    50% {
        transform: scale(1.05);
        filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(47, 213, 199, 0.8));
    }
}

@keyframes glowPulse {
    0%, 100% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

.loader-spinner {
    margin: 0 auto 2rem;
}

.spinner-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.dot {
    width: 12px;
    height: 12px;
    background: linear-gradient(45deg, #2FD5C7, #14D8C8);
    border-radius: 50%;
    animation: dotBounce 1.4s ease-in-out infinite;
}

.dot:nth-child(1) { animation-delay: 0s; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
.dot:nth-child(4) { animation-delay: 0.6s; }
.dot:nth-child(5) { animation-delay: 0.8s; }

@keyframes dotBounce {
    0%, 80%, 100% {
        transform: scale(0.8);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2);
        opacity: 1;
    }
}

.loader-text {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 3px;
    display: flex;
    justify-content: center;
    gap: 2px;
}

.text-char {
    animation: textWave 2s ease-in-out infinite;
    display: inline-block;
}

.text-char:nth-child(1) { animation-delay: 0s; }
.text-char:nth-child(2) { animation-delay: 0.1s; }
.text-char:nth-child(3) { animation-delay: 0.2s; }
.text-char:nth-child(4) { animation-delay: 0.3s; }
.text-char:nth-child(5) { animation-delay: 0.4s; }
.text-char:nth-child(6) { animation-delay: 0.5s; }
.text-char:nth-child(7) { animation-delay: 0.6s; }
.text-char:nth-child(8) { animation-delay: 0.7s; }
.text-char:nth-child(9) { animation-delay: 0.8s; }
.text-char:nth-child(10) { animation-delay: 0.9s; }

@keyframes textWave {
    0%, 100% {
        transform: translateY(0);
        color: #ffffff;
    }
    50% {
        transform: translateY(-10px);
        color: #2FD5C7;
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

/* Hide loader after page loads */
body.loaded #page-loader {
    animation: fadeOut 0.8s ease-out forwards;
}

/* .div1,.div2,.div3,.div4,.div5,.div6 {
    width: 100px;
    height: 100px;
    margin: 10px;
    display: inline-block;
}
.div1 {
    background:linear-gradient(135deg, #2563EB, #7C3AED) ;
}
.div2 {
background: linear-gradient(135deg, #EC4899, #F59E0B);
}
.div3 {
background: linear-gradient(135deg, #10B981, #14B8A6);
}
.div4 {
background: linear-gradient(135deg, #0a192f, #0f3057, #112d4e);
}
.div5 {
background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
} */




* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', sans-serif;
            line-height: 1.6;
            color: #333;
        }

        /* Prevent any horizontal scroll from entrance animations or wide effects */
        html, body {
            max-width: 100%;
            overflow-x: hidden;
        }

        /* Navigation */
       
        nav{
            background: var(--hero-bg-color);
            width: 100%;
            height: 80px;
            display: flex;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 100;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: background-color 0.3s ease;
        }
        nav .nav-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* max-width: 1200px; */
            width: 90%;
            margin: 0 auto;
            padding: 0 2rem;
            height: 100%;
            z-index: 102;
        }
        .logo {
            display: flex;
            align-items: center;
            height: 100%;
        }
        nav .logo img {
            max-height: 60px;
            width: 150px;
            /* border-radius: 50%; */
        }

        /* Header logo slider */
        .logo-image-slider{
            position: relative;
            width: 90px;
            height: 80px;
            overflow: hidden;
        }
        .logo-image-slider .sliding-image{
            position: absolute;
            inset: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity .5s ease;
        }
        .logo-image-slider .sliding-image.active{opacity:1}
        .logo-image-slider .sliding-image img{
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        /* Logo Image Slider Animation */
        .logo {
            position: relative;
            overflow: visible;
            display: flex;
            align-items: center;
            gap: 20px;
        }
        /* .logo img{
            width: 200px;
            height: 70px;
        } */

        .logo-image-slider {
            position: relative;
            width: 150px;
            height: 60px;
            overflow: hidden;
            border-radius: 8px;
        }

        .sliding-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            transform: translateX(-100%);
            opacity: 0;
            transition: all 0.8s ease-in-out;
        }

        .sliding-image.active {
            transform: translateX(0);
            opacity: 1;
        }

        .sliding-image.sliding-out {
            transform: translateX(-100%);
            opacity: 0;
        }

        .sliding-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 8px;
            filter: brightness(0) invert(1);
        }
        .menu {
            display: flex;
            align-items: center;
            gap: 2rem;
        }
        .menu a{
            text-decoration: none;
            color: white;
            font-weight: 500;
            transition: color 0.3s ease;
            padding: 5px 16px;
            position: relative;
            background: transparent;
            border-radius: 4px;
        }

        .menu a::before {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            /* background: linear-gradient(90deg, #2FD5C7, #14D8C8, #00f0ff, #2FD5C7); */
            /* background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); */
           /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
            background: linear-gradient(135deg, #0f2027, #b6bfc2, #a4acaf);

            background-size: 300% 100%;
            border-radius: 6px;
            z-index: -1;
            animation: gradientRotate 3s linear infinite;
        }

        .menu a::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(90deg, #033046, #052C3F);

            /* background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); */

            border-radius: 4px;
            z-index: -1;
        }

        @keyframes gradientRotate {
            0% {
                background-position: 0% 50%;
            }
            100% {
                background-position: 300% 50%;
            }
        }

        .humburger{
            width: 50px;
            height: 50px;
            gap: 6px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .humburger1{
            width: 30px;
            height: 2px;
            background-color: white;
            transition: all 0.3s ease;
        }
        .humburger2{
            width: 30px;
            height: 2px;
            background-color: white;
            transition: all 0.3s ease;
        }
        /* .humburger:hover .humburger1{
            transform:  rotate(45deg) translateY(8px);
        }
        .humburger:hover .humburger2{
            transform: rotate(-45deg) translateY(-6px) translateX(-2px);
        } */

        .nav-container-menu {
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            max-height: 100vh;
            padding-bottom: 90px;
            padding-top: 50px;
            background-color: white;
            align-items: center;
            z-index: 101;
            transition: transform 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform: translateY(-120%);
            overflow-y: auto;
            cursor: none;
        }
        
        /* Cursor Trail */
        .cursor-trail {
            position: fixed;
            width: 20px;
            height: 20px;
            background-color: transparent;
            border: 2px solid var(--primary-color);
            border-radius: 50%;
            pointer-events: none;
            transform: translate(-50%, -50%) scale(1);
            z-index: 9999;
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            will-change: transform, opacity;
        }

        .cursor-trail::before,
        .cursor-trail::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            border: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: pulse 2s infinite;
            opacity: 0;
        }

        .cursor-trail::before {
            animation-delay: 0.3s;
        }

        .cursor-trail::after {
            animation-delay: 0.6s;
        }

        @keyframes pulse {
            0% {
                transform: scale(1);
                opacity: 0.8;
            }
            100% {
                transform: scale(3);
                opacity: 0;
            }
        }

        .nav-container-menu {
            cursor: none;
        }

        .nav-container-menu a {
            position: relative;
            z-index: 1;
            transition: all 0.3s ease;
            overflow: visible;
        }

        .nav-container-menu a:hover {
            color: var(--primary-color);
            transform: translateX(5px);
        }

        .nav-container-menu a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }

        .nav-container-menu a:hover::after {
            width: 100%;
        }

         .nav-container-menu-uper {
            display: flex;
            width: 100%;
            height: 75%;
        }
        .nav-container-menu-left{
            width: 60%;
            height: 75%;
            display: flex;
            justify-content:center;
            align-items: center;
            /* background-color: #033046; */

        }
        
        .nav-container-menu-left-img {
    width: 60%;
    height: 300px;
    overflow: hidden;
    /* border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease; */
    background-color: #052C3F;
}

.nav-container-menu-left-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease, opacity 0.3s ease;
}
        /* .nav-container-menu-left img{
            width: 40%;
            max-height: 30%;
            
        } */
        .nav-container-menu-right{
            width: 40%;
            height: 75%;
            display: flex;
            justify-content: start;
            align-items: center;
        }
        .nav-container-menu-right ul{
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        .nav-container-menu-right ul{
            list-style: none;
        }
        .nav-container-menu-right ul li{
            overflow: hidden;
        }
        .nav-container-menu-right ul a{
            color: rgba(0, 0, 0, 0.671);
            text-decoration: none;
            font-size: 22px;
            font-weight: 600;
            display: inline-block;         
    transition: transform 0.4s, color 0.3s; 
            
        }
       /* .nav-container-menu-right ul a:hover {
    transform: rotateX(180deg);
    color: var(--primary-color);
} */

/* Navigation Menu Hover Effect */
.nav-container-menu-right ul {
    display: flex;
    /* gap: 2rem; */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-container-menu-right ul li {
    position: relative;
    /* padding: 5px 0; */
}

.nav-container-menu-right ul li a {
    position: relative;
    color: #333;
    text-decoration: none;
    font-weight: 500;
    /* padding: 8px 0; */
    transition: all 0.3s ease;
    overflow: hidden;
}

.nav-container-menu-right ul li a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: var(--primary-color);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease;
}

.nav-container-menu-right ul li a:hover {
    color: var(--primary-color);
}

.nav-container-menu-right ul li a:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* Final overrides: Header logo slider left-in / left-out */
nav .logo .logo-image-slider{ width:150px; height:60px; overflow:hidden; position:relative; }
nav .logo .logo-image-slider .sliding-image{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; transform: translateX(-100%); opacity:0; transition: transform .8s ease-in-out, opacity .8s ease-in-out; will-change: transform, opacity; }
nav .logo .logo-image-slider .sliding-image.active{ transform: translateX(0); opacity:1; }
nav .logo .logo-image-slider .sliding-image.sliding-out{ transform: translateX(-100%); opacity:0; }
nav .logo .logo-image-slider .sliding-image img{ width:100%; height:100%; object-fit: contain; filter: brightness(0) invert(1); }

/* Menu item hover classes for image change */
.nav-container-menu-right ul li[data-image] {
    cursor: pointer;
    /* box-shadow: none; */
}

.nav-container-menu-left-img img.fade-out {
    opacity: 0;
    transform: scale(0.9);
}

/* Add a subtle animation on hover */
@keyframes slideIn {
    from { transform: translateY(5px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.nav-container-menu-right ul li a:nth-child(2):hover .nav-container-menu-right-img{
background: url(../imgaes/expertise.jpg);
}
.nav-container-menu-right ul li a span {
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

.nav-container-menu-right ul li a:hover span {
    animation: slideIn 0.3s ease;
}
        
        /* Nav Menu Lower Section */
        .nav-container-menu-lower {
            max-width: 1200px;
            height: auto;
            margin: 0 auto;
            padding: 0 2rem;
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            justify-content: space-between;
            border-top: 1px solid rgba(0, 0, 0, 0.1);
            padding-top: 2rem;
            margin-top: 2rem;
        }
        
        .nav-container-menu-lower-getintouch,
        .nav-container-menu-lower-followsus {
            flex: 1;
            min-width: 280px;
        }
        
        .nav-container-menu-lower-getintouch-text p,
        .nav-container-menu-lower-followsus-text p {
            color: #2FD5C7;
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 1.2rem;
            position: relative;
            display: inline-block;
        }
        
        .nav-container-menu-lower-getintouch-text p::after,
        .nav-container-menu-lower-followsus-text p::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 40px;
            height: 2px;
            background: linear-gradient(90deg, #2FD5C7, #14D8C8);
        }
        
        .get-in-touch-cards {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        
        .get-in-touch-card {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.8rem 1rem;
            background: #f8fafc;
            border-radius: 8px;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
        }
        
        .get-in-touch-card:hover {
            transform: translateX(5px);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
            border-color: #2FD5C7;
        }
        
        .get-in-touch-card i {
            color: #2FD5C7;
            font-size: 1.1rem;
            min-width: 20px;
            text-align: center;
        }
        
        .get-in-touch-card a {
            color: #334155;
            text-decoration: none;
            transition: color 0.3s ease;
            font-size: 0.95rem;
        }
        
        .get-in-touch-card a:hover {
            color: #2FD5C7;
        }
        
        .nav-container-menu-lower-followsus-icons {
            display: flex;
            gap: 1rem;
            margin-top: 1.2rem;
        }
        
        .nav-container-menu-lower-followsus-icons a {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #f8fafc;
            color: #2FD5C7;
            font-size: 1.1rem;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
            text-decoration: none;
        }
        
        .nav-container-menu-lower-followsus-icons a:hover {
            background: #2FD5C7;
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 4px 15px rgba(47, 213, 199, 0.3);
        }
        
       

        

        @media (max-width:768px){
            nav .nav-container{
                width: 100%;
                padding-left:0 ;
                padding-right: 10px;
            }
            .menu a{
                display: none;
            }
            .nav-container-menu-left{
                display: none;
            }
            .nav-container-menu-right{
             width: 100%;
            justify-content: center;
            }
            
            
        }






        /* Hero Section */
        .hero {
            position: relative;
            min-height: 100vh;
            display: flex;
            align-items: center;
            /* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
            /* background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); */
            /* background: linear-gradient(135deg, #0a192f, #0f3057, #112d4e); */
            /* background: linear-gradient(135deg, #10B981, #14B8A6); */
            background: linear-gradient(90deg, #033046,#052C3F);
            overflow: hidden;
            margin-top: 79px;
            
        }

        #particles-js {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            text-align: center;
            color: white;
        }

        .eyebrow {
            font-size: .9rem;
            font-weight: 600;
            letter-spacing: .15em;
            text-transform: uppercase;
            color: rgba(255,255,255,.85);
            margin-bottom: .75rem;
        }

        .hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 700;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            /* background: linear-gradient(45deg, #00d4ff, #ff6b9d, #4ecdc4); */
            /* background: linear-gradient(90deg, #00f0ff, #ff79c6); */
            /* background: linear-gradient(90deg, #1de9b6, #9c27b0, #ff4081); */
            /* background: linear-gradient(90deg, #00f0ff, #00d4ff, #0066ff); */
           /* background: linear-gradient(90deg,  #005f80, #00f0ff); */
           /* background: linear-gradient(90deg, #005f99, #00f0ff); */
           background: linear-gradient(90deg, #2FD5C7 0%, #14D8C8 50%, #FFFFFF 100%);
            /* background: linear-gradient(90deg, #00f0ff, white); */
            /* background: linear-gradient(90deg, #00f0ff, white); */


-webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero h1 span {
            /* background: linear-gradient(45deg, #ffd700, #ff6b9d, #00d4ff); */
            /* background: linear-gradient(90deg, #1de9b6, #9c27b0, #ff4081);  */
            background: linear-gradient(90deg,white, white);

            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            
        }

        .hero p {
            font-size: 1.25rem;
            margin-bottom: 2rem;
            opacity: 0.9;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            /* background: linear-gradient(45deg, #ffffff, #00d4ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text; */
            color: rgba(255, 255, 255, 0.884);
        }

        .hero-highlights {
            display: flex;
            gap: 16px;
            justify-content: center;
            margin-top: 12px;
            flex-wrap: wrap;
            color: #c9f3ef;
            font-size: .95rem;
        }
        .hero-highlights span {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 6px 10px;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 999px;
            backdrop-filter: blur(2px);
        }
        .hero-highlights i {
            color: #2FD5C7;
        }

        .cta-buttons {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
        }

        .btn {
            padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }

        .btn-primary {
            background-color: #2FD5C7;
            color: white;
            font-weight: 800;
            position: relative;
            z-index: 1;
            overflow: hidden;
            transition: all 0.3 ease;
        }
.btn-primary::before {
    content: " ";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #ffffff93, #0b9cb9);
    /* border-radius: 50px; */
    z-index: -1;
    transition: left 0.4s cubic-bezier(0.4,0,0.2,1); /* Add this line */
}
    .btn-primary:hover::before {
      left: 0;
    }
        .btn-primary:hover {
            transform: translateY(-2px);
            
        }

        .btn-secondary {
            background: transparent;
            color: #2FD5C7;
            border: 2px solid #2FD5C7;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }
   
      .btn-secondary::before {
        content: " ";
        position: absolute;
        top: 0;
        bottom: 0;
        left: -100%;
        right: 0;
        width: 100%;
        height: 100%;
        /* background: linear-gradient(); */
        background: linear-gradient(45deg, #4747473a, #0eb8aa6c);
        /* border-radius: 50px; */
        z-index: -1;
        transition: left 0.4s cubic-bezier(0.4,0,0.2,1); /* Add this line */
    }
        .btn-secondary:hover::before {
          left: 0;
        }
        .btn-secondary:hover{
            transform: translateY(-5px);
            
        }

        








        /* Services Section */
        .services {
            padding: 5rem 0;
            background: #f8fafc;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
            text-align: center;
        }

        .section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .section-header h2 {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e293b;
            margin-bottom: 1rem;
        }
        .section-header h2 span{
            /* background: linear-gradient(90deg, #2FD5C7 0%, #14D8C8 50%, #FFFFFF 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text; */
            color: #2FD5C7;
        }

        .section-header p {
            font-size: 1.1rem;
            color: #64748b;
            max-width: 600px;
            margin: 0 auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 40px 20px;
        }

        .service-card {
            background: white;
            padding: 1.5rem 1rem;
            border-radius: 15px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            min-height: 200px;
            height: auto;
            /* border-bottom: 2px solid #2FD5C7; */
            border-top: 5px solid #14D8C8;
            cursor: pointer;
            /* text-align: center; */
            position: relative;
        }
        .service-card::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            opacity: 0.1;
            border-radius: 15px;
            z-index: -1;
            display: none;
        }
        .service-card:hover::before {
            display: block;
        }
        .service-icon {
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-bottom: 1rem;
            color: #2FD5C7;
            width: 100%;
            height: 40%;
            gap: 15px;

        }
         .service-icon-icon{
            width: 50px;
            height: 50px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            border-radius: 50%;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
         }
        .service-icon-icon i{
            font-size: 24px;
            color: white;
        }

        /* Hover Arrow CTA */
        .service-card .card-cta{
            position: absolute;
            bottom: 12px;
            left: 50%;
            transform: translate(-50%, 8px);
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #2FD5C7;
            color: #fff;
            text-decoration: none;
            box-shadow: 0 10px 20px rgba(47, 213, 199, 0.35);
            opacity: 0;
            transition: opacity .25s ease, transform .25s ease, background .2s ease;
            z-index: 2;
        }
        .service-card:hover .card-cta{ opacity: 1; transform: translate(-50%, 0); }
        .service-card .card-cta:hover{ background: #0eb8a9; }
        .service-icon-title {
            width: 80%;
            text-align: left;
        }
        .service-content{
            text-align: left;
        }
        .service-content p{
            /* color: rgba(0, 0, 0, 0.555); */
            /* color: #64748b; */
            color: var(--text-p-color);
        }
        .container a{
             padding: 1rem 2rem;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: #2FD5C7;
            /* color: #333; */
            color: white;
            font-weight: 800;
            margin-top: 80px;
        }
        .container a:hover{
            background-color: var(--primary-color-hover);
        }


        

        

        /*  Choose Us */
        .why-choose-us{
            padding: 4rem 0;
            background: linear-gradient(135deg, #f8fafc 0%, #ffffff 50%, #f1f5f9 100%);
            position: relative;
            overflow: hidden;
        }
        
        .why-choose-us::before{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 20%, rgba(47, 213, 199, 0.06) 0%, transparent 40%),
                radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.06) 0%, transparent 40%);
            z-index: 0;
        }
        
        .why-choose-us .container{
            position: relative;
            z-index: 1;
        }
        
        .why-choose-us .section-subtitle{
            display: inline-block;
            background: linear-gradient(135deg, #2FD5C7, #6366F1);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }
        
        .why-features-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
            margin-bottom: 3rem;
        }
        
        .why-feature-card{
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(15, 23, 42, 0.06);
            border-radius: 18px;
            padding: 1.75rem;
            text-align: left;
            box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06);
            transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
            position: relative;
            overflow: hidden;
            min-height: 260px;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
            will-change: transform, box-shadow;
        }
        
        .why-feature-card::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #2FD5C7, #F59E0B, #6366F1);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .why-feature-card:hover::before{
            transform: scaleX(1);
        }
        
        .why-feature-card:hover{
            transform: translateY(-4px);
            box-shadow: 0 18px 48px rgba(2, 6, 23, 0.12);
            border-color: rgba(15, 23, 42, 0.12);
            background: rgba(255,255,255,0.95);
        }
        
        .feature-icon{
            width: 72px;
            height: 72px;
            margin: 0 0 0.75rem 0;
            position: relative;
            transition: transform 0.3s ease;
            flex-shrink: 0;
        }
        .feature-icon::before{
            content: "";
            position: absolute;
            inset: -6px;
            border-radius: 999px;
            background: conic-gradient(from 0deg, var(--accent, #2FD5C7), #8b5cf6, var(--accent, #2FD5C7));
            filter: blur(9px);
            opacity: 0.2;
            z-index: 0;
            transition: opacity 0.3s ease, transform 0.6s ease;
        }
        .feature-icon::after{
            content: "";
            position: absolute;
            inset: 0;
            border-radius: 999px;
            background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%),
                        linear-gradient(135deg, rgba(2,6,23,0.04), rgba(2,6,23,0.02));
            border: 1px solid rgba(2,6,23,0.08);
            z-index: 1;
        }
        
        .why-feature-card:hover .feature-icon{
            transform: translateY(-1px) scale(1.04);
        }
        
        .feature-icon svg{
            position: relative;
            z-index: 2;
            width: 100%;
            height: 100%;
            filter: drop-shadow(0 2px 6px rgba(2, 6, 23, 0.12));
        }
        
        .feature-content h3{
            font-size: 1.28rem;
            font-weight: 800;
            letter-spacing: -0.01em;
            margin-bottom: 0.35rem;
            color: var(--text-h-color);
            line-height: 1.25;
        }
        
        .feature-content p{
            font-size: 0.98rem;
            line-height: 1.65;
            color: var(--text-p-color);
            margin-bottom: 0.6rem;
        }
        
        .feature-stats{
            display: grid;
            grid-auto-rows: min-content;
            gap: 0.5rem;
        }
        
        .feature-stats span{
            display: inline-flex;
            align-items: center;
            justify-content: flex-start;
            font-size: 0.92rem;
            color: var(--text-p-color);
            line-height: 1.4;
        }
        
        .feature-stats span i{
            color: var(--accent, #22C55E);
            margin-right: 0.5rem;
            font-size: 0.85rem;
        }
        
        .why-stats{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 1rem 1.25rem;
            align-items: center;
            margin-top: 1.5rem;
        }

        /* Accent per card */
        .why-features-grid .why-feature-card:nth-child(1){ --accent:#2FD5C7; }
        .why-features-grid .why-feature-card:nth-child(2){ --accent:#F59E0B; }
        .why-features-grid .why-feature-card:nth-child(3){ --accent:#6366F1; }

        /* Subtle animated accent on hover */
        .why-feature-card:hover .feature-icon::before{
            opacity: 0.35;
            transform: rotate(25deg) scale(1.03);
        }
        
        .stat-item{
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 0.75rem;
            background: rgba(255, 255, 255, 0.92);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(15, 23, 42, 0.07);
            border-radius: 9999px;
            padding: 0.65rem 0.9rem;
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            box-shadow: 0 6px 18px rgba(2,6,23,0.06);
        }
        
        .stat-item:hover{
            transform: translateY(-2px);
            box-shadow: 0 10px 24px rgba(2,6,23,0.12);
            border-color: rgba(15, 23, 42, 0.12);
        }
        
        .stat-icon{
            width: 40px;
            height: 40px;
            border-radius: 9999px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1rem;
            flex-shrink: 0;
            position: relative;
            box-shadow: 0 4px 12px rgba(2,6,23,0.08);
        }
        .stat-icon::after{
            content: "";
            position: absolute;
            inset: -6px;
            border-radius: 9999px;
            background: currentColor;
            opacity: 0.08;
            filter: blur(6px);
        }
        
        .stat-item span{
            font-size: 0.95rem;
            font-weight: 600;
            color: var(--text-h-color);
            white-space: nowrap;
        }

        /* Per-item accent colors (keep colors, change layout only) */
        .why-stats .stat-item:nth-child(1) .stat-icon{ background: linear-gradient(135deg, #2563eb, #60a5fa); color:#2563eb; }
        .why-stats .stat-item:nth-child(2) .stat-icon{ background: linear-gradient(135deg, #16a34a, #34d399); color:#16a34a; }
        .why-stats .stat-item:nth-child(3) .stat-icon{ background: linear-gradient(135deg, #f59e0b, #fbbf24); color:#f59e0b; }
        .why-stats .stat-item:nth-child(4) .stat-icon{ background: linear-gradient(135deg, #ef4444, #f87171); color:#ef4444; }

        /* Small screens */
        @media (max-width: 768px){
            .why-stats{ grid-template-columns: 1fr 1fr; gap: 0.75rem; }
        }
        @media (max-width: 420px){
            .why-stats{ grid-template-columns: 1fr; }
        }

        /* Stats/Counter Section */
        .stats{
            padding: 5rem 0;
            background: #ffffff;
            position: relative;
            z-index: 1;
        }
        .stats::before{
            content: "";
            position: absolute;
            inset: 0;
            background:
              radial-gradient(1000px 320px at -10% 20%, rgba(47,213,199,0.06), transparent 60%),
              radial-gradient(900px 300px at 110% 80%, rgba(99,102,241,0.06), transparent 60%);
            z-index: 0;
        }
        /* Split layout for By the Numbers */
        .stats-split{
            display: grid;
            grid-template-columns: 1.1fr 0.9fr;
            gap: 2.5rem;
            align-items: center;
        }
        .section-header.compact{
            margin-bottom: 1.5rem;
            text-align: left;
            position: relative;
            z-index: 1;
        }
        .section-header.compact h2{
            font-size: 2.6rem;
            line-height: 1.1;
            letter-spacing: -0.02em;
            font-weight: 800;
            margin-bottom: 0.6rem;
        }
        .section-header.compact p{
            max-width: 560px;
            color: var(--text-p-color);
            margin-bottom: 0.5rem;
        }
        .stats-left{
            display: grid;
            gap: 1.2rem;
            position: relative;
            z-index: 1;
        }
        .metrics-points{
            margin: 0.25rem 0 0.75rem 0;
            padding: 0;
            list-style: none;
            max-width: 620px;
        }
        .metrics-points li{
            margin: 0.4rem 0;
            font-size: 0.98rem;
            color: var(--text-p-color);
            line-height: 1.6;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }
        .metrics-points li::before{
            content: "\f00c"; /* fas fa-check */
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            display: inline-flex;
            width: 22px;
            height: 22px;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: linear-gradient(135deg,#2FD5C7,#6366F1);
            color: #fff;
            font-size: 0.75rem;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(2,6,23,0.1);
        }
        .metrics-grid{
            display: grid;
            grid-template-columns: repeat(2, minmax(180px, 1fr));
            gap: 0.9rem 1rem;
            margin-top: 0.25rem;
            justify-content: start;
            justify-items: start;
        }
        .metric-card{
            background: #ffffff;
            border: 1px solid rgba(15,23,42,0.05);
            border-radius: 16px;
            padding: 0.9rem 1rem;
            display: grid;
            grid-template-columns: 56px 1fr;
            align-items: center;
            gap: 0.8rem;
            box-shadow: 0 8px 18px rgba(2,6,23,0.05);
            transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
            width: 260px;
        }
        .metric-card:hover{
            transform: translateY(-4px);
            box-shadow: 0 14px 28px rgba(2,6,23,0.1);
            border-color: rgba(15,23,42,0.12);
        }
        .metric-icon{
            width: 50px;
            height: 50px;
            border-radius: 14px;
            display: grid;
            place-items: center;
            color: #fff;
            font-size: 0.95rem;
            box-shadow: 0 8px 18px rgba(2,6,23,0.12);
        }
        .metric-icon.icon-1{ background: linear-gradient(135deg,#2563eb,#60a5fa); }
        .metric-icon.icon-2{ background: linear-gradient(135deg,#059669,#34d399); }
        .metric-icon.icon-3{ background: linear-gradient(135deg,#f59e0b,#fbbf24); }
        .metric-icon.icon-4{ background: linear-gradient(135deg,#ef4444,#f87171); }
        .metric-number{
            font-weight: 800;
            font-size: 1.7rem;
            line-height: 1;
            letter-spacing: -0.01em;
            margin-bottom: 0.15rem;
        }
        /* Per-card number color to match icon */
        .metrics-grid .metric-card:nth-child(1) .metric-number{ color:#2563eb; }
        .metrics-grid .metric-card:nth-child(2) .metric-number{ color:#059669; }
        .metrics-grid .metric-card:nth-child(3) .metric-number{ color:#f59e0b; }
        .metrics-grid .metric-card:nth-child(4) .metric-number{ color:#ef4444; }
        .metric-label{
            font-size: 0.84rem;
            color: var(--text-p-color);
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.07em;
        }
        /* Slight left nudge on desktop */
        @media (min-width: 1025px){
            /* Avoid negative margins that can cause horizontal scrollbars */
            .metrics-grid{ margin-left: 0; }
        }
        /* On small screens, allow cards to be fluid */
        @media (max-width: 560px){
            .metric-card{ width: 100%; }
        }
        .stats-illustration{
            position: relative;
            display: grid;
            place-items: center;
            z-index: 1;
            /* Clip any animated glow or transforms to prevent overflow */
            overflow: hidden;
        }
        .stats-illustration::before{
            content: "";
            position: absolute;
            inset: -10% -5% -10% -5%;
            background:
              radial-gradient(380px 260px at 70% 40%, rgba(99,102,241,0.10), transparent 65%),
              radial-gradient(420px 300px at 55% 60%, rgba(47,213,199,0.10), transparent 65%);
            filter: blur(2px);
            z-index: -1;
        }
        .stats-svg{
            width: 100%;
            max-width: 640px;
            height: auto;
            filter: none;
        }
        @media (min-width: 1280px){
            .stats-svg{ max-width: 700px; }
        }
        /* Responsive for split */
        @media (max-width: 1024px){
            .stats-split{ grid-template-columns: 1fr; gap: 2rem; }
            .section-header.compact{ text-align: center; }
            .metrics-grid{ grid-template-columns: repeat(2, minmax(200px,1fr)); justify-items: center; }
        }
        @media (max-width: 560px){
            .metrics-grid{ grid-template-columns: 1fr; }
            .metric-card{ width: 100%; }
        }
                        
        

        .stats .container{
            position: relative;
            z-index: 2;
        }
        .stats .section-header{
            text-align: center;
            margin-bottom: 4rem;
        }
        .stats .section-header h2{
            /* color: #0f172a; */
            font-size: 2.8rem;
            margin-bottom: 1rem;
            /* background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text; */
        }
        .stats .section-header p{
            color: #64748b;
            font-size: 1.2rem;
            max-width: 600px;
            margin: 0 auto;
        }
        .stats-grid{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 3rem;
            align-items: center;
            text-align: center;
        }
        .stat-item{
            background: transparent;
            border: none;
            padding: 0;
            position: relative;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        .stat-item:hover{
            transform: translateY(-5px);
        }
        .stat-icon{
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
            color: white;
            box-shadow: 0 8px 25px rgba(0,0,0,0.15);
            position: relative;
            transition: all 0.3s ease;
        }
        .stat-icon::after{
            content: '';
            position: absolute;
            top: -8px;
            left: -8px;
            right: -8px;
            bottom: -8px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
            z-index: -1;
            opacity: 0.1;
            transition: all 0.3s ease;
        }
        .stat-item:hover .stat-icon::after{
            opacity: 0.2;
            transform: scale(1.1);
        }
        .stat-icon i{
            font-size: 24px;
        }
        .stat-number{
            font-size: 3.5rem;
            font-weight: 900;
            background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 0.5rem;
            line-height: 1;
            display: block;
        }
        .stat-label{
            color: #475569;
            font-weight: 500;
            font-size: 1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
        }
        .stat-underline{
            width: 40px;
            height: 3px;
            background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
            margin: 0 auto;
            border-radius: 2px;
            opacity: 0.7;
            transition: all 0.3s ease;
        }
        .stat-item:hover .stat-underline{
            width: 70px;
        }
        
        






        /* Accent colors per stat item */
        .stat-item:nth-child(1){ --accent-1: #3B82F6; --accent-2: #1D4ED8; }
        .stat-item:nth-child(2){ --accent-1: #10B981; --accent-2: #059669; }
        .stat-item:nth-child(3){ --accent-1: #F59E0B; --accent-2: #D97706; }
        .stat-item:nth-child(4){ --accent-1: #EF4444; --accent-2: #DC2626; }

        /* Expertise Section */
        .expertise{ padding: 5rem 0; background: #ffffff; }
        .expertise .section-header{ margin-bottom: 2rem; }
        .expertise-marquee{ position: relative; overflow: hidden; border-radius: 12px; background: #f8fafc; border: 1px solid #e5e7eb; margin-bottom: 16px; }
        .expertise-marquee .marquee-track{ display: flex; gap: 28px; padding: 16px; width: max-content; animation: marquee-left 35s linear infinite; }
        .expertise-marquee.reverse .marquee-track{ animation: marquee-right 35s linear infinite; }
        .expertise-marquee:hover .marquee-track{ animation-play-state: paused; }
        .skill{ display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px; box-shadow: 0 4px 10px rgba(2,6,23,0.06); color: #0f172a; }
        .skill i{ font-size: 22px; }
        .skill .badge{ font-weight: 700; color: #7c3aed; background: #f3e8ff; border: 1px solid #e9d5ff; padding: 6px 10px; border-radius: 6px; }
        /* Brand colors for expertise icons */
        .skill .fa-react{ color:#61DAFB; }
        .skill .fa-vuejs{ color:#41B883; }
        .skill .fa-angular{ color:#DD0031; }
        .skill .fa-node{ color:#3C873A; }
        .skill .fa-laravel{ color:#FF2D20; }
        .skill .fa-php{ color:#777BB4; }
        .skill .fa-wordpress{ color:#21759B; }
        .skill .fa-figma{ color:#A259FF; }
        .skill .fa-html5{ color:#E34F26; }
        .skill .fa-css3-alt{ color:#1572B6; }
        .skill .fa-sass{ color:#CC6699; }
        .skill .fa-js{ color:#F7DF1E; }
        .skill .fa-python{ color:#3776AB; }
        .skill .fa-android{ color:#3DDC84; }
        .skill .fa-apple{ color:#0f172a; }
        .skill .fa-aws{ color:#FF9900; }
        .skill .fa-docker{ color:#0db7ed; }
        .skill .fa-git-alt{ color:#F05032; }
        /* Badge brand colors */
        .skill .badge-django{ color:#0C4B33; background:#E6F4EE; border-color:#BFE6D8; }
        .skill .badge-elementor{ color:#7A2B8A; background:#F4E9F8; border-color:#E6D1F0; }
        .skill .badge-tailwind{ color:#0EA5E9; background:#E0F2FE; border-color:#BAE6FD; }
        .skill .badge-next{ color:#111827; background:#F3F4F6; border-color:#E5E7EB; }
        .skill .badge-express{ color:#111827; background:#F3F4F6; border-color:#E5E7EB; }
        .skill .badge-flutter{ color:#02569B; background:#E0F2FF; border-color:#BAE6FF; }
        .skill .badge-reactnative{ color:#61DAFB; background:#E6FBFF; border-color:#C7F7FF; }
        .skill .badge-firebase{ color:#FF8F00; background:#FFF3E0; border-color:#FFE0B2; }
        .skill .badge-azure{ color:#0078D4; background:#E6F2FB; border-color:#CDE6F9; }
        .skill .badge-kubernetes{ color:#326CE5; background:#E7EEFD; border-color:#D6E1FB; }
        .skill .badge-cicd{ color:#6B21A8; background:#F3E8FF; border-color:#E9D5FF; }
        .skill .badge-rest{ color:#0F766E; background:#ECFDF5; border-color:#D1FAE5; }
        .skill .badge-graphql{ color:#E10098; background:#FCE7F3; border-color:#FBCFE8; }
        @keyframes marquee-left{ from{ transform: translateX(0); } to{ transform: translateX(-50%); } }
        @keyframes marquee-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } }

        /* Team Section */
        .team-section {
            padding: 5rem 0;
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            position: relative;
            overflow: hidden;
        }
        
        .team-section::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                radial-gradient(circle at 15% 20%, rgba(47, 213, 199, 0.05), transparent 40%),
                radial-gradient(circle at 85% 80%, rgba(99, 102, 241, 0.05), transparent 40%);
            z-index: 0;
            pointer-events: none;
        }
        
        .team-section .container {
            position: relative;
            z-index: 1;
        }
        
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        /* Team Marquee (auto-scroll) */
        .team-marquee{ position: relative; overflow: hidden; margin-top: 3rem; }
        .team-track{
            display: flex;
            align-items: stretch;
            gap: 1.25rem;
            width: max-content;
            will-change: transform;
            backface-visibility: hidden;
            transform: translate3d(0,0,0);
            animation: teamMarquee3d 40s linear infinite;
        }
        .team-marquee:hover .team-track{ animation-play-state: paused; }
        .team-marquee .team-card{ flex: 0 0 320px; width: 320px; transform: translateZ(0); will-change: transform; }

        @keyframes teamMarquee3d{ from{ transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } }

        /* Mobile/Tablet fallback to grid */
        @media (max-width: 1024px){
            .team-marquee{ overflow: visible; }
            .team-track{ animation-duration: 32s; }
        }
        @media (max-width: 768px){
            .team-marquee{ overflow: visible; }
            .team-track{ flex-wrap: wrap; animation: none; width: 100%; }
            .team-marquee .team-card{ flex: 1 1 85%; width: 85%; margin-left: auto; margin-right: auto; }
        }
        
        .team-card {
            background: #ffffff;
            border-radius: 20px;
            overflow: hidden;
            box-shadow: 0 8px 24px rgba(2, 6, 23, 0.06), 0 2px 8px rgba(2, 6, 23, 0.04);
            transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
            position: relative;
            border: 1px solid rgba(15, 23, 42, 0.06);
        }
        
        /* Show cards in marquee immediately */
        .team-marquee .team-card {
            opacity: 1;
            transform: translateY(0);
        }
        
        .team-card.animate-in {
            animation: teamCardFadeIn 0.6s ease forwards;
        }
        
        .team-card:nth-child(1).animate-in {
            animation-delay: 0.1s;
        }
        
        .team-card:nth-child(2).animate-in {
            animation-delay: 0.2s;
        }
        
        .team-card:nth-child(3).animate-in {
            animation-delay: 0.3s;
        }
        
        .team-card:nth-child(4).animate-in {
            animation-delay: 0.4s;
        }
        
        @keyframes teamCardFadeIn {
            from {
                opacity: 0;
                transform: translateY(40px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .team-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(47, 213, 199, 0.03), rgba(99, 102, 241, 0.03));
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 1;
            pointer-events: none;
        }
        
        .team-card::after {
            content: '';
            position: absolute;
            top: -2px;
            left: -2px;
            right: -2px;
            bottom: -2px;
            background: linear-gradient(135deg, #2FD5C7, #6366f1, #2FD5C7);
            border-radius: 20px;
            opacity: 0;
            z-index: -1;
            transition: opacity 0.4s ease;
        }
        
        .team-card:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 24px 60px rgba(47, 213, 199, 0.15), 0 8px 20px rgba(2, 6, 23, 0.1);
            border-color: transparent;
        }
        /* Prevent hover-induced reflows while marquee is moving */
        .team-marquee:not(:hover) .team-card:hover { transform: none; box-shadow: 0 10px 24px rgba(2,6,23,0.06); }
        
        .team-card:hover::before {
            opacity: 1;
        }
        
        .team-card:hover::after {
            opacity: 1;
        }
        
        .team-card-image {
            position: relative;
            overflow: hidden;
            height: 320px;
            background: linear-gradient(135deg, #f8fafc, #e2e8f0);
        }
        
        .team-card-image::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.4) 100%);
            opacity: 0;
            transition: opacity 0.4s ease;
            z-index: 1;
        }
        
        .team-card:hover .team-card-image::before {
            opacity: 1;
        }
        
        .team-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            filter: grayscale(0.2) brightness(1.05);
        }
        
        .team-card:hover .team-card-image img {
            transform: scale(1.15) rotate(2deg);
            filter: grayscale(0) brightness(1.1);
        }
        
        .team-social {
            position: absolute;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%) translateY(120%);
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2;
        }
        
        .team-card:hover .team-social {
            transform: translateX(-50%) translateY(0);
        }
        
        .team-social a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(47, 213, 199, 0.3);
            display: flex;
            align-items: center;
            justify-content: center;
            color: #2FD5C7;
            font-size: 0.95rem;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .team-social a:hover {
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            border-color: #2FD5C7;
            color: #ffffff;
            transform: translateY(-4px) scale(1.1);
            box-shadow: 0 8px 20px rgba(47, 213, 199, 0.4);
        }
        
        .team-card-content {
            padding: 2rem 1.75rem 1.75rem;
            text-align: center;
            position: relative;
            z-index: 2;
            background: #ffffff;
        }
        
        .team-card-content::before {
            content: '';
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 4px;
            background: linear-gradient(90deg, #2FD5C7, #6366f1);
            border-radius: 2px;
            opacity: 0;
            transition: opacity 0.4s ease, width 0.4s ease;
        }
        
        .team-card:hover .team-card-content::before {
            opacity: 1;
            width: 80px;
        }
        
        .team-card-content h3 {
            font-size: 1.4rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 0.5rem;
            margin-top: 0.5rem;
            transition: color 0.3s ease;
        }
        
        .team-card:hover .team-card-content h3 {
            color: #2FD5C7;
        }
        
        .team-role {
            font-size: 0.85rem;
            font-weight: 700;
            background: linear-gradient(135deg, #2FD5C7, #6366f1);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            margin-bottom: 0.85rem;
            position: relative;
            display: inline-block;
        }
        
        .team-bio {
            font-size: 0.92rem;
            color: #64748b;
            line-height: 1.65;
            margin: 0;
            transition: color 0.3s ease;
        }
        
        .team-card:hover .team-bio {
            color: #475569;
        }
        
        /* Team Section Responsive */
        @media (max-width: 1024px) {
            .team-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 1.5rem;
            }
        }
        
        @media (max-width: 640px) {
            .team-section {
                padding: 3rem 0;
            }
            
            .team-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            
            .team-card-image {
                height: 280px;
            }
        }

        /* Testimonials Section */
        .testimonials{ padding: 5rem 0; background: #f8fafc; }
        .testimonial-slider{ position: relative; max-width: 800px; margin: 0 auto; }
        .testimonial-track{ position: relative; overflow: hidden; }
        .testimonial-slide{ display: none; text-align: center; }
        .testimonial-slide.active{ display: block; animation: fadeIn 0.5s ease; }
        .testimonial-content{ background: #ffffff; border-radius: 16px; padding: 2rem; box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06); margin-bottom: 1.5rem; }
        .quote-icon{ color: #2FD5C7; font-size: 2rem; margin-bottom: 1rem; opacity: 0.7; }
        .testimonial-text{ color: var(--text-p-color); font-size: 1.1rem; line-height: 1.6; margin-bottom: 1.5rem; font-style: italic; }
        .testimonial-author{ display: flex; align-items: center; justify-content: center; gap: 12px; }
        .author-avatar{ width: 50px; height: 50px; border-radius: 50%; background: linear-gradient(135deg, #2FD5C7, #14D8C8); display: flex; align-items: center; justify-content: center; color: white; }
        .author-avatar i{ font-size: 20px; }
        .author-info h4{ color: #0f172a; font-weight: 600; margin-bottom: 2px; }
        .author-info p{ color: var(--text-p-color); font-size: 0.9rem; }
        .slider-arrow{ position: absolute; top: 50%; transform: translateY(-50%); background: #ffffff; border: 1px solid #e5e7eb; border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all .2s ease; z-index: 10; }
        .slider-arrow:hover{ background: #2FD5C7; color: white; border-color: #2FD5C7; }
        .prev-arrow{ left: -22px; }
        .next-arrow{ right: -22px; }
        .slider-dots{ display: flex; justify-content: center; gap: 8px; margin-top: 1.5rem; }
        .dot{ width: 12px; height: 12px; border-radius: 50%; background: #d1d5db; cursor: pointer; transition: background .2s ease; }
        .dot.active{ background: #2FD5C7; }
        @keyframes fadeIn{ from{ opacity: 0; transform: translateY(20px); } to{ opacity: 1; transform: translateY(0); } }

        /* Footer */
        .footer {
            background: #1e293b;
            color: white;
            text-align: center;
            padding: 2rem 0;
        }

        /* Chatbot Styles */
.chatbot-toggle{ position:fixed; bottom:24px; right:24px; width:56px; height:56px; border-radius:50%; background:#2FD5C7; color:#fff; border:2px solid rgba(2,6,23,.15); display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px rgba(2,6,23,.18); z-index: 9999; cursor:pointer; transition: transform .2s ease, box-shadow .2s ease; }
.chatbot-toggle:hover{ transform: translateY(-2px); box-shadow:0 16px 28px rgba(2,6,23,.22); }
.chatbot-toggle i{ font-size:20px; }

.chatbot-widget{ position:fixed; bottom:96px; right:24px; width:340px; max-width:calc(100vw - 32px); background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 24px 48px rgba(2,6,23,.18); z-index: 9999; display:none; flex-direction:column; overflow:hidden; }
.chatbot-widget.active{ display:flex; }
.chatbot-widget {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);
    display: none;
    flex-direction: column;
    z-index: 9999;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s ease;
}

.chatbot-widget.active {
    transform: translateY(0);
    opacity: 1;
    display: flex;
}

.chatbot-header {
    background: linear-gradient(135deg, #2FD5C7, #14D8C8);
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chatbot-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 1.1rem;
}

.chatbot-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 5px;
    border-radius: 50%;
    transition: background 0.2s;
}

.chatbot-close:hover {
    background: rgba(255, 255, 255, 0.2);
}

.chatbot-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    background: #f8fafc;
}

.chatbot-message {
    margin-bottom: 15px;
    max-width: 80%;
    animation: fadeIn 0.3s ease;
}

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

.chatbot-message.bot {
    align-self: flex-start;
}

.chatbot-message.user {
    align-self: flex-end;
    margin-left: auto;
}

.message-content {
    padding: 12px 16px;
    border-radius: 18px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.chatbot-message.bot .message-content {
    background: white;
    color: #333;
    border-top-left-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.chatbot-message.user .message-content {
    background: #2FD5C7;
    color: white;
    border-bottom-right-radius: 5px;
}

.chatbot-input {
    display: flex;
    padding: 15px;
    background: white;
    border-top: 1px solid #eee;
}

.chatbot-input input {
    flex: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 25px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color 0.3s;
}

.chatbot-input input:focus {
    border-color: #2FD5C7;
}

#send-button {
    background: #2FD5C7;
    color: white;
    border: none;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    margin-left: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

#send-button:hover {
    background: #14D8C8;
}

.chatbot-toggle {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2FD5C7, #14D8C8);
    color: white;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 5px 20px rgba(47, 213, 199, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9998;
    transition: all 0.3s ease;
}

.chatbot-toggle:hover {
    transform: scale(1.1);
    box-shadow: 0 7px 25px rgba(47, 213, 199, 0.4);
}

.typing-indicator {
    display: flex;
    gap: 5px;
    padding: 10px 15px;
    background: white;
    border-radius: 18px;
    width: fit-content;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background: #ccc;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Portfolio Section */
.portfolio {
    padding: 100px 0;
    /* background-color: #f8fafc; */
}

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

.portfolio .section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    font-weight: 700;
    color: #0f172a;
}

.portfolio .section-header h2 span {
    color: #2FD5C7;
    position: relative;
}

.portfolio .section-header p {
    color: #64748b;
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto;
}

/* Portfolio Filter Buttons */
.portfolio-filter {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 40px;
}

.filter-btn {
    padding: 10px 25px;
    background: transparent;
    border: 2px solid #2FD5C7;
    color: #2FD5C7;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    outline: none;
}

.filter-btn:hover,
.filter-btn.active {
    background: linear-gradient(135deg, #2FD5C7, #14D8C8);
    color: white;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(47, 213, 199, 0.2);
}

/* Portfolio Grid */
.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
}

.portfolio-item {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: white;
    animation: fadeInUp 0.6s ease forwards;
    opacity: 0;
}

.portfolio-item:nth-child(1) { animation-delay: 0.1s; }
.portfolio-item:nth-child(2) { animation-delay: 0.2s; }
.portfolio-item:nth-child(3) { animation-delay: 0.3s; }
.portfolio-item:nth-child(4) { animation-delay: 0.4s; }
.portfolio-item:nth-child(5) { animation-delay: 0.5s; }
.portfolio-item:nth-child(6) { animation-delay: 0.6s; }

.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.portfolio-img {
    position: relative;
    overflow: hidden;
    height: 250px;
    cursor: pointer;
}

.portfolio-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.portfolio-item:hover .portfolio-img img {
    transform: scale(1.1);
}

.portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
    opacity: 1;
}

.portfolio-overlay h3 {
    color: white;
    font-size: 1.5rem;
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.portfolio-overlay p {
    color: #94a3b8;
    transform: translateY(20px);
    transition: transform 0.3s ease 0.1s;
}

.portfolio-overlay .view-project {
    display: inline-block;
    padding: 10px 25px;
    background: transparent;
    border: 2px solid #2FD5C7;
    color: #2FD5C7;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transform: translateY(20px);
    transition: all 0.3s ease 0.2s;
}

.portfolio-overlay .view-project:hover {
    background: #2FD5C7;
    color: white;
}

.portfolio-item:hover .portfolio-overlay h3,
.portfolio-item:hover .portfolio-overlay p,
.portfolio-item:hover .portfolio-overlay .view-project {
    transform: translateY(0);
}

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

/* Latest Projects Showcase Section */
.latest-projects {
    padding: 5rem 0;
    /* background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); */
    position: relative;
    overflow: hidden;
}

.latest-projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
     background: 
        radial-gradient(circle at 20% 20%, rgba(47, 213, 199, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 50%); 
}

.latest-projects .container {
    position: relative;
    z-index: 2;
}

.latest-projects .section-header {
    text-align: center;
    margin-bottom: 4rem;
}

.latest-projects .section-header h2 {
    font-size: 3rem;
    color: #0f172a;
    margin-bottom: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.latest-projects .section-header h2 span {
    background: linear-gradient(135deg, #2FD5C7, #14D8C8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.latest-projects .section-header p {
    color: #64748b;
    font-size: 1.2rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
    font-weight: 400;
}

.projects-showcase {
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

@media(max-width:768px){
    .latest-projects{
        display: none;
    }
}
/* Featured Project */
.project-highlight {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    background: white;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.project-highlight:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
}

.project-image {
    position: relative;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.project-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    transition: transform 0.3s ease;
}

.project-highlight:hover .project-image img {
    transform: scale(1.05);
}

.project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(47, 213, 199, 0.9), rgba(99, 102, 241, 0.9));
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-highlight:hover .project-overlay {
    opacity: 1;
}

.project-tech {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

.tech-tag {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.project-content h3 {
    font-size: 2rem;
    color: #0f172a;
    margin-bottom: 1rem;
    font-weight: 700;
}

.project-content p {
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

.project-stats {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
}

.stat {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 1.8rem;
    font-weight: 800;
    color: #2FD5C7;
    line-height: 1;
}

.stat-label {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 500;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, #2FD5C7, #14D8C8);
    color: white;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 10px 25px rgba(47, 213, 199, 0.3);
}

.project-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(47, 213, 199, 0.4);
}

/* Projects Grid */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
}

.project-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

.project-card-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.project-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.project-card:hover .project-card-image img {
    transform: scale(1.1);
}

.project-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(47, 213, 199, 0.9), rgba(99, 102, 241, 0.9));
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.project-card:hover .project-card-overlay {
    opacity: 1;
}

.project-category {
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
}

.view-project-btn {
    width: 50px;
    height: 50px;
    background: rgba(255, 255, 255, 0.9);
    color: #0f172a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-project-btn:hover {
    background: white;
    transform: scale(1.1);
}

.project-card-content {
    padding: 1.5rem;
}

.project-card-content h4 {
    font-size: 1.3rem;
    color: #0f172a;
    margin-bottom: 0.8rem;
    font-weight: 700;
}

.project-card-content p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.project-tags {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.project-tags span {
    background: rgba(47, 213, 199, 0.1);
    color: #2FD5C7;
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* CTA Section */
.projects-cta {
    text-align: center;
    background: white;
    padding: 3rem;
    border-radius: 20px;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
}

.projects-cta h3 {
    font-size: 2.2rem;
    color: #0f172a;
    margin-bottom: 1rem;
    font-weight: 700;
}

.projects-cta p {
    color: #64748b;
    font-size: 1.1rem;
    margin-bottom: 2rem;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}



/* Premium Hosting Partners Section */
.premium-hosting-partners {
    padding: 7rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f0f9ff 100%);
    position: relative;
    overflow: hidden;
}

.premium-hosting-partners .section-header {
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    z-index: 2;
}

.premium-hosting-partners .section-subtitle {
    display: inline-block;
    color: #14D8C8;
    background: rgba(20, 216, 200, 0.1);
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    letter-spacing: 0.5px;
}

.premium-hosting-partners .section-header h2 {
    font-size: 3.2rem;
    color: #0f172a;
    margin-bottom: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
}

.premium-hosting-partners .section-header h2 span {
    background: linear-gradient(135deg, #2FD5C7, #14D8C8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.premium-hosting-partners .section-header p.section-description {
    color: #64748b;
    font-size: 1.2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.7;
    position: relative;
}

/* Premium Partners Grid */
.premium-partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 3rem 0;
}

.premium-partner-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
    border: 1px solid rgba(0, 0, 0, 0.03);
    cursor: pointer;
}

.premium-partner-card:hover {
    /* transform: translateY(-10px); */
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    transform: scale(1.02);
}

.partner-logo-container {
    background: #f8fafc;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logo {
    max-width: 160px;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: all 0.3s ease;
    filter: grayscale(100%) contrast(0.8);
    opacity: 0.9;
}

.premium-partner-card:hover .partner-logo {
    filter: grayscale(0%) contrast(1);
    opacity: 1;
    transform: scale(1.05);
}

.partner-badge {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    background: linear-gradient(135deg, #2FD5C7, #14D8C8);
    color: white;
    padding: 0.4rem 1rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 5px 15px rgba(20, 216, 200, 0.3);
}

.partner-badge i {
    font-size: 0.8rem;
}

.partner-details {
    padding: 1.5rem;
}

.partner-details h3 {
    font-size: 1.3rem;
    color: #0f172a;
    margin-bottom: 0.3rem;
    font-weight: 700;
}

.partner-category {
    color: #64748b;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    font-weight: 500;
}

.partner-features {
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.partner-features li {
    color: #475569;
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    line-height: 1.4;

        transition: all 0.4s ease-in-out;
    cursor: pointer;
}
.partner-features li:hover{
    transform: translateX(8px);
}

.partner-features i {
    color: #14D8C8;
    font-size: 1rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.partner-rating {
    display: flex;
    justify-content: end;
    align-items: end;
    border-top: 1px solid rgba(0, 0, 0, 0.03);
}
.partner-rating a{
    margin: 0;
    background-color: transparent;
    color: var(--primary-color);
    padding: 5px;
}
.partner-rating a:hover{
     background-color: transparent; 
    transform: translateX(6px);

}


/* Responsive Design for Premium Section */
@media (max-width: 1200px) {
    .premium-partners-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .premium-hosting-partners .section-header h2 {
        font-size: 2.5rem;
    }
    
    .premium-cta {
        padding: 3rem 2rem;
    }
    
    .premium-cta h3 {
        font-size: 1.8rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
}

/* Responsive Design */
@media (max-width: 768px) {
    /* Logo and Logo Slider */
    .logo img {
        width: 90px !important;
        height: auto !important;
    }
    
    .logo-image-slider {
        width: 120px !important;
        height: 50px !important;
    }
    
    .chatbot-widget {
        width: 90%;
        height: 70vh;
        right: 5%;
        bottom: 80px;
    }
    
    .chatbot-toggle {
        right: 20px;
        bottom: 20px;
    }
    
    .nav-links {
        display: none;
    }

    .hero-content {
        padding: 0 1rem;
    }

            .cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .contact-info {
                flex-direction: column;
                gap: 1rem;
            }

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

    .project-highlight {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    .project-stats {
        gap: 1.5rem;
    }

    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .latest-projects .section-header h2 {
        font-size: 2.2rem;
    }

    .projects-cta h3 {
        font-size: 1.8rem;
    }
}





/* Contact Section */
        .contact{
            padding: 5rem ;
               background: linear-gradient(135deg, #0f172a, #1e293b);
            color: white;
            position: relative;
            z-index: 1;
        }
        /* .contact::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 30% 20%, rgba(47, 213, 199, 0.1) 0%, transparent 50%),
                        radial-gradient(circle at 70% 80%, rgba(99, 102, 241, 0.1) 0%, transparent 50%);
     } */
      .contact::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjAzKSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==');
            opacity: 0.4;
            z-index: -1;
}
        
        .contact-container{
            position: relative;
            z-index: 2;
            
        }
        .contact-grid{
            display: flex;
            gap: 4rem;
            align-items: start;
            justify-content: center;
            align-items: center;
        }
        .contact-left{
            padding-right: 2rem;
            width: 50%;
        }
        .contact-content h2{
            font-size: 2.8rem;
            color: white;
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .contact-content p{
            color: #cbd5e1;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 2rem;
        }
        .contact-content a{
            margin-bottom: 2.5rem;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            border-radius: 50px;
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            border: none;
            color: white;
            font-weight: 600;
            box-shadow: 0 10px 25px rgba(47, 213, 199, 0.3);
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 50px;
        }
        .contact-content .btn:hover{
            transform: translateY(-2px);
            box-shadow: 0 15px 35px rgba(47, 213, 199, 0.4);
        }
        .contact-info{
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
            margin-top: 30px;
        }
        .contact-info2{
            display: flex;
            gap: 1.5rem;
        }
        .contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1.2rem 1.5rem;
            background: rgba(255,255,255,0.05);
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
            cursor: pointer;
        }
        
        .contact-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(47, 213, 199, 0.1), rgba(20, 216, 200, 0.3), rgba(47, 213, 199, 0.1));
            transform: translateX(-100%) skewX(-15deg);
            transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: -1;
            opacity: 0;
        }
        
        .contact-item:hover {
            transform: translateX(5px);
            border-color: rgba(47, 213, 199, 0.3);
        }
        
        .contact-item:hover::before {
            transform: translateX(100%) skewX(-15deg);
            opacity: 1;
        }
        .contact-item i{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            box-shadow: 0 5px 15px rgba(47, 213, 199, 0.3);
        }
        .contact-item span{
            color: #e2e8f0;
            font-weight: 500;
            font-size: 1rem;
        }
        .contact-right{
            width: 50%;
        }
        .contact-form{
            background: rgba(255, 255, 255, 0.03);
            padding: 2.5rem;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            border: 1px solid rgba(255,255,255,0.1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
        }
        .contact-form:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
        }

        .contact-form::before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #2FD5C7, #14D8C8);
        }
       .contact-form h3 {
            text-align: center;
            color: #fff;
            font-size: 1.8rem;
            margin-bottom: 2rem;
            position: relative;
            padding-bottom: 1rem;
        }
        .contact-form h3:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #2FD5C7, #14D8C8);
            border-radius: 3px;
        }
        .form-row{
            display: flex;
            gap: 1.5rem;
            margin-bottom: 1.5rem;
        }

        /* .form-field {
            flex: 1;
            position: relative;
            margin-bottom: 1.5rem;
        } */

        .form-field label {
            display: block;
            color: #e2e8f0;
            font-weight: 500;
            margin-bottom: 0.5rem;
            font-size: 0.95rem;
            transition: all 0.3s ease;
        }

        .form-field {
            position: relative;
            margin-bottom: 1.8rem;
            transition: all 0.4s ease;
        }

        .form-field input,
        .form-field textarea {
            width: 100%;
            padding: 1rem 1.25rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            font-family: 'Poppins', sans-serif;
            font-size: 0.95rem;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            background: rgba(255, 255, 255, 0.05);
            color: #fff;
            box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
            position: relative;
            z-index: 1;
        }

        .form-field label {
            display: block;
            color: #e2e8f0;
            font-weight: 500;
            margin-bottom: 0.7rem;
            font-size: 0.95rem;
            transition: all 0.3s ease;
            transform-origin: left center;
        }

        .form-field::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0;
            height: 2px;
            background: linear-gradient(90deg, #2FD5C7, #14D8C8);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: 2;
        }

        .form-field input::placeholder,
        .form-field textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        .form-field input:focus,
        .form-field textarea:focus,
        .form-field:hover input,
        .form-field:hover textarea {
            outline: none;
            border-color: rgba(47, 213, 199, 0.4);
            background: rgba(47, 213, 199, 0.03);
            box-shadow: 0 5px 20px rgba(20, 216, 200, 0.1);
            transform: translateY(-2px);
        }

        .form-field:focus-within::after,
        .form-field:hover::after {
            width: 100%;
        }

        .form-field:focus-within label,
        .form-field:hover label {
            color: #2FD5C7;
            transform: translateX(5px);
        }
        .form-field textarea {
            resize: vertical;
            min-height: 140px;
        }

        /* Submit Button */
        .btn-form-field{
            width: 100%;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
        }
        .contact-form button {
            
            padding: 1rem 2rem;
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            color: white;
            border: none;
            border-radius: 50px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-top: 1rem;
            box-shadow: 0 4px 15px rgba(20, 216, 200, 0.3);
            position: relative;
            overflow: hidden;
            z-index: 1;
            margin-bottom: 15px;
        }
        @media (max-width:1000px){
        .contact{
            padding: 5rem 1.7rem;
        }
        .contact-form{
                padding: 2.5rem  1rem;
              }
    }

        @media (max-width:768px){
        .contact{
            padding: 5rem 1rem;
        }
             .contact-grid{
                flex-direction: column;
                align-items: start;
                justify-content: start;
             }
             .contact-left{
                width: 100%;
             }
             .contact-info2{
                flex-direction: column;
                gap: 1.5rem;
             }
             .contact-item{
                padding: 1.2rem 1rem;
             }
             .contact-item span{
                font-size: 0.8rem;
             }
             .contact-right{
            width: 100%;
             }
              .contact-form{
                padding: 2.5rem  1rem;
              }
              .form-row{
            display: flex;
            flex-direction: column;
            gap: 1rem;
            margin-bottom: 1.5rem;
        }
        .form-field {
            flex: 1;
            position: relative;
            margin-bottom: 0.5rem;
        }
        }
        .copyright{
            width: 100%;
            height: 50px;
             background: linear-gradient(135deg, #0f172a, #1e293b);
             display: flex;
             justify-content: center;
             align-items: center;
        }
        .copyright p{
            color: white;
            font-size: 18px;

        }




        /* Tablet responsive styles for Why Choose Us */
        @media (max-width: 1024px) {
            .why-features-grid {
                grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                gap: 1.5rem;
            }
            
            .why-feature-card {
                padding: 1.5rem;
            }
            
            .feature-icon {
                width: 80px;
                height: 80px;
                margin-bottom: 1rem;
            }
            
            .feature-content h3 {
                font-size: 1.3rem;
            }
            
            .why-stats {
                grid-template-columns: repeat(2, 1fr);
                gap: 1rem;
            }
        }
        
        @media (max-width: 768px) {
            .why-choose-us {
                padding: 3rem 0;
            }
            
            .why-features-grid {
                grid-template-columns: 1fr;
                gap: 1.5rem;
                margin-top: 2rem;
                margin-bottom: 2rem;
            }
            
            .why-feature-card {
                padding: 1.5rem;
            }
            
            .feature-icon {
                width: 70px;
                height: 70px;
                margin-bottom: 1rem;
            }
            
            .feature-content h3 {
                font-size: 1.2rem;
            }
            
            .feature-content p {
                font-size: 0.95rem;
            }
            
            .why-stats {
                grid-template-columns: 1fr;
                gap: 1rem;
                margin-top: 1.5rem;
            }
            
            .stat-item {
                padding: 0.75rem;
            }
            
            .stat-icon {
                width: 32px;
                height: 32px;
                font-size: 0.9rem;
            }
        }

        @media(max-width:400px){
            .hero{
                padding: 40px 0;
            }
            .services,.expertise,.stats,.premium-hosting-partners,.portfolio,.testimonials{
                padding-top: 3rem;
            }
            .why-choose-us{
                padding: 2.5rem 0;
            }
            
            .why-features-grid {
                gap: 1rem;
                margin-top: 1.5rem;
                margin-bottom: 1.5rem;
            }
            
            .why-feature-card{
                padding: 1.25rem;
            }
            
            .feature-icon {
                width: 60px;
                height: 60px;
                margin-bottom: 0.75rem;
            }
            
            .feature-content h3{
                font-size: 1.1rem;
                margin-bottom: 0.5rem;
            }
            
            .feature-content p{
                font-size: 0.9rem;
                margin-bottom: 0.75rem;
            }
            
            .feature-stats span {
                font-size: 0.85rem;
            }
            
            .why-stats {
                margin-top: 1rem;
            }
            
            .stat-item {
                padding: 0.5rem;
                gap: 0.5rem;
            }
            
            .stat-icon {
                width: 28px;
                height: 28px;
                font-size: 0.8rem;
            }
            
            .stat-item span {
                font-size: 0.85rem;
            }
            .service-card{
                height: 250px;
            }
            .container {
            padding: 0 1rem;
            text-align: center;
        }
        .section-header h2{
            font-size: 2rem;
        }
        .stats .section-header h2{
            font-size: 2rem;
        }
        .premium-hosting-partners .section-header h2{
             font-size: 2rem;
        }
        .portfolio .section-header h2{
            font-size: 2rem;
        }
        .portfolio-grid{
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
        }
        .prev-arrow{ left: -10px; }
        .next-arrow{ right: -10px; }
        .contact-content h2{
            font-size: 2rem;
        }
        .contact-content p{
            font-size: 1rem;
        }
        .copyright p{
            font-size: 16px;
        }
        }

        
        
        







        .growth-partner{
            position: relative;
            overflow: hidden;
            padding: 72px 0 64px;
            background: linear-gradient(180deg, #E8F1FF 0%, #F2F7FF 45%, #FFFFFF 100%);
        }
        .growth-partner .container{ position: relative; z-index: 2; text-align: center; }
        .gp-eyebrow{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 700;
            font-size: 12.5px;
            letter-spacing: .12em;
            text-transform: uppercase;
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 14px;
        }
        .gp-eyebrow i{ font-size: 12px; color:#14D8C8; }
        .gp-title{
            margin: 0 auto 14px;
            max-width: 980px;
            font-size: clamp(28px, 4.6vw, 48px);
            line-height: 1.15;
            font-weight: 800;
            color: #0F172A;
        }
        .gp-underline{
            width: 180px;
            height: 6px;
            border-radius: 999px;
            background: linear-gradient(90deg, #2FD5C7, #14D8C8);
            margin: 18px auto 22px;
        }
        .gp-desc{
            max-width: 940px;
            margin: 0 auto;
            font-size: 18px;
            line-height: 1.8;
            color: #334155;
        }
        .gp-decor{ position: absolute; z-index: 1; filter: blur(0.2px); pointer-events: none; }
        .gp-decor-left{
            left: -80px; top: -40px; width: 240px; height: 240px;
            background: radial-gradient(circle at 50% 50%, rgba(146,190,255,.35) 0%, rgba(146,190,255,.18) 40%, rgba(146,190,255,0) 60%);
        }
        .gp-decor-right{
            right: -80px; top: 60px; width: 220px; height: 220px;
            background: radial-gradient(circle at 50% 50%, rgba(146,190,255,.35) 0%, rgba(146,190,255,.18) 40%, rgba(146,190,255,0) 60%);
        }
        .gp-decor::before{
            content:""; position:absolute; inset: 0; border-radius: 50%;
            background: radial-gradient(closest-side, rgba(255,255,255,0) 62%, rgba(255,255,255,1) 63%, rgba(30,102,245,.15) 70%, rgba(30,102,245,0) 78%);
            transform: rotate(18deg);
        }
        /* SVG ring sizing and motion */
        .gp-ring-svg{ width: 100%; height: 100%; display: block; }
        .gp-ring-svg .gp-ring-spin{ transform-origin: 50% 50%; animation: gp-spin 26s linear infinite; }
        .gp-ring-svg .gp-ring-spin.reverse{ animation-direction: reverse; animation-duration: 32s; }
        .gp-decor-left, .gp-decor-right{ animation: gp-float 10s ease-in-out infinite; }
        .gp-decor-right{ animation-duration: 12s; }

        @keyframes gp-spin{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }
        @keyframes gp-float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(12px); } }
        @media (max-width: 768px){
            .growth-partner{ padding: 56px 0 54px; }
            .gp-title{ font-size: clamp(26px, 6.2vw, 36px); }
            .gp-underline{ width: 140px; height: 5px; margin: 16px auto 18px; }
            .gp-desc{ font-size: 16px; line-height: 1.75; }
            .gp-decor-left{ width: 180px; height: 180px; left: -90px; top: -50px; }
            .gp-decor-right{ width: 170px; height: 170px; right: -90px; top: 20px; }
            .growth-partner .container{ padding: 0 1.25rem; }
        }
        @media (max-width: 480px){
            .growth-partner{ padding: 40px 0 42px; }
            .gp-title{ font-size: clamp(22px, 7vw, 28px); line-height: 1.25; }
            .gp-underline{ width: 110px; height: 4px; margin: 12px auto 14px; }
            .gp-desc{ font-size: 15px; line-height: 1.7; }
            .growth-partner .container{ padding: 0 1rem; }
            .gp-decor-left, .gp-decor-right{ display: none; }
        }

        /* Stats section responsive layout */
        .stats { padding: 64px 0; background: #ffffff; }
        .stats .container { text-align: left; }
        .stats-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 32px; align-items: center; }
        .stats-left .section-header.compact { margin-bottom: 1.5rem; text-align: left; }
        .metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(220px, 1fr)); gap: 16px 16px; max-width: 720px; }
        .stats-left .metrics-grid { margin-left: 0; }
        .metric-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #ffffff; border-radius: 14px; box-shadow: 0 10px 24px rgba(2,6,23,0.06); }
        .metric-icon { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; }
        .metric-content { display: flex; flex-direction: column; }
        .metric-number { font-size: 24px; font-weight: 800; color: #0f172a; line-height: 1; }
        .metric-label { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #64748b; }
        .stats-illustration { display: flex; align-items: center; justify-content: center; }
        .stats-svg { max-width: 520px; width: 100%; height: auto; display: block; }

        /* Tablet */
        @media (max-width: 992px){
            .stats-split { grid-template-columns: 1fr; gap: 24px; }
            .metrics-grid { grid-template-columns: repeat(2, minmax(180px, 1fr)); }
            .stats-illustration { order: 2; }
            .stats-left { order: 1; }
        }
        /* Mobile: force two per row */
        @media (max-width: 600px){
            .stats { padding: 48px 0; }
            .metrics-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
            .metric-number { font-size: 20px; }
            .metric-label { font-size: 11px; }
        }

        /* Team Section - marquee on desktop, swipe-scroll on mobile */
        .team-section { padding: 64px 0; background: #f8fafc; }
        .team-marquee { position: relative; overflow: hidden; }
        .team-track { display: flex; flex-wrap: nowrap; gap: 18px; align-items: stretch; will-change: transform; width: max-content; animation: team-scroll 20s linear infinite; animation-iteration-count: infinite; }
        .team-card { background: #ffffff; border-radius: 18px; box-shadow: 0 10px 24px rgba(2,6,23,0.06); overflow: hidden; flex: 0 0 320px; }
        .team-card-image { position: relative; width: 100%; height: 340px; overflow: hidden; }
        .team-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; border-radius: inherit; }
        .team-card-content { padding: 14px 16px; text-align: left; }
        .team-role { color: #64748b; font-size: 0.95rem; margin-top: 4px; }

        @keyframes team-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

        @media (max-width: 768px){
            .team-section { padding: 48px 0; }
            .team-marquee { overflow: hidden; }
            .team-track { animation: team-scroll 28s linear infinite; padding: 2px 8px 8px; }
            .team-card { flex: 0 0 60vw; min-width: 60vw; }
            .team-card-image { height: 320px; aspect-ratio: auto; width: 100%; }
            .team-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; background: transparent; }
        }

        /* Internships Page */
        .internship-page {
            padding-top: 96px;
            padding-bottom: 64px;
            background: #f8fafc;
        }

        .internship-hero {
            padding: 40px 0 24px;
            background: #ffffff;
            border-bottom: 1px solid #e2e8f0;
        }

        .internship-hero h1 {
            font-size: 2.2rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 0.75rem;
            text-align: center;
        }

        .internship-hero p {
            max-width: 720px;
            margin: 0 auto;
            text-align: center;
            color: #64748b;
            font-size: 1.05rem;
        }

        .internship-process {
            padding: 40px 0 24px;
            background: #f8fafc;
        }

        .internship-process h2 {
            font-size: 1.9rem;
            font-weight: 700;
            margin-bottom: 2rem;
            color: #0f172a;
        }

        .internship-process .container {
            text-align: center;
        }

        .process-steps {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            max-width: 640px;
            margin: 0 auto;
        }

        .process-step {
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            padding: 14px 18px;
            display: grid;
            grid-template-columns: auto 1fr;
            column-gap: 14px;
            row-gap: 4px;
            text-align: left;
            align-items: flex-start;
            box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04);
        }

        .process-step .step-number {
            width: 32px;
            height: 32px;
            border-radius: 999px;
            background: linear-gradient(135deg, #2FD5C7, #14D8C8);
            color: #ffffff;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 1rem;
            grid-row: span 2;
        }

        .process-step h3 {
            font-size: 1.05rem;
            font-weight: 600;
            color: #0f172a;
        }

        .process-step p {
            font-size: 0.95rem;
            color: #64748b;
            margin: 0;
        }

        .internship-form-section {
            padding: 40px 0 0;
            background: #f8fafc;
        }

        .internship-form-section h2 {
            font-size: 1.8rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: #0f172a;
        }

        .internship-form-section p {
            color: #64748b;
            font-size: 1rem;
            margin-bottom: 1.75rem;
        }

        .internship-form {
            max-width: 900px;
            margin: 0 auto;
            background: #ffffff;
            border-radius: 16px;
            padding: 24px 24px 20px;
            border: 1px solid #e2e8f0;
            box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
            text-align: left;
        }

        .internship-form .form-row {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px 20px;
            margin-bottom: 16px;
        }

        .internship-form .form-group {
            display: flex;
            flex-direction: column;
            gap: 6px;
            margin-bottom: 14px;
        }

        .internship-form label {
            font-size: 0.9rem;
            font-weight: 600;
            color: #0f172a;
        }

        .internship-form input,
        .internship-form select,
        .internship-form textarea {
            border-radius: 10px;
            border: 1px solid #cbd5f1;
            padding: 9px 11px;
            font-size: 0.95rem;
            font-family: inherit;
            outline: none;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .internship-form input[type="file"] {
            padding: 7px 10px;
            font-size: 0.9rem;
            cursor: pointer;
        }

        .internship-form input[type="file"]::-webkit-file-upload-button {
            padding: 7px 12px;
            margin-right: 10px;
            border-radius: 8px;
            border: 1px solid #cbd5f1;
            background: #f8fafc;
            font-size: 0.85rem;
            cursor: pointer;
        }

        .internship-form input[type="file"]::file-selector-button {
            padding: 7px 12px;
            margin-right: 10px;
            border-radius: 8px;
            border: 1px solid #cbd5f1;
            background: #f8fafc;
            font-size: 0.85rem;
            cursor: pointer;
        }

        .internship-form input:focus,
        .internship-form select:focus,
        .internship-form textarea:focus {
            border-color: #2FD5C7;
            box-shadow: 0 0 0 1px rgba(47, 213, 199, 0.3);
        }

        .internship-form textarea {
            resize: vertical;
            min-height: 90px;
        }

        .internship-form .form-footer {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 10px 16px;
            margin-top: 8px;
        }

        .internship-form .form-note {
            font-size: 0.85rem;
            color: #64748b;
        }

        .internship-success {
            margin: 18px auto 0;
            max-width: 900px;
            padding: 12px 14px;
            border-radius: 12px;
            background: #ecfdf5;
            border: 1px solid #22c55e55;
            color: #15803d;
            display: flex;
            align-items: center;
            gap: 10px;
            justify-content: center;
        }

        .internship-success i {
            color: #22c55e;
            font-size: 1.2rem;
        }

        @media (max-width: 768px) {
            .internship-page {
                padding-top: 88px;
                padding-bottom: 40px;
            }

            .internship-hero {
                padding: 28px 0 18px;
            }

            .internship-hero h1 {
                font-size: 1.7rem;
            }

            .internship-process h2 {
                font-size: 1.5rem;
            }

            .internship-form {
                padding: 18px 16px 16px;
            }

            .internship-form .form-row {
                grid-template-columns: 1fr;
            }

            .internship-form label {
                font-size: 0.85rem;
            }

            .internship-form select,
            .internship-form input,
            .internship-form textarea {
                font-size: 0.9rem;
            }
        }

        @media (max-width: 480px) {
            .internship-hero h1 {
                font-size: 1.5rem;
            }

            .internship-form-section h2 {
                font-size: 1.4rem;
            }
        }