/* Grid Pattern */
        .grid-pattern {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: 
                linear-gradient(rgba(6, 182, 212, 0.1) 1px, transparent 1px),
                linear-gradient(90deg, rgba(6, 182, 212, 0.1) 1px, transparent 1px);
            background-size: 50px 50px;
            animation: gridMove 20s linear infinite;
        }
        
        @keyframes gridMove {
            0% { transform: translate(0, 0); }
            100% { transform: translate(50px, 50px); }
        }
        
        .gradient-bg {
            background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 50%, #fef3c7 100%);
            position: relative;
        }
        
        .gradient-creative {
            background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #a855f7 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        /* Enhanced Buttons */
        .btn-primary {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            position: relative;
            overflow: hidden;
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            box-shadow: 0 4px 15px rgba(139, 92, 246, 0.3);
        }
        
        .btn-primary::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s;
        }
        
        .btn-primary:hover::before {
            left: 100%;
        }
        
        .btn-primary:hover {
            background: linear-gradient(135deg, #7c3aed, #6d28d9);
            transform: translateY(-3px) scale(1.05);
            box-shadow: 0 15px 35px rgba(139, 92, 246, 0.4);
        }
        
        .btn-secondary {
            border: 2px solid #8b5cf6;
            color: #8b5cf6;
            position: relative;
            overflow: hidden;
            transition: all 0.4s ease;
            background: rgba(139, 92, 246, 0.05);
        }
        
        .btn-secondary::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            transition: width 0.4s ease;
            z-index: -1;
        }
        
        .btn-secondary:hover::before {
            width: 100%;
        }
        
        .btn-secondary:hover {
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
        }
        
        /* Marketing Tags */
        .marketing-tag {
            display: inline-flex;
            align-items: center;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-size: 0.875rem;
            font-weight: 500;
            margin: 0.25rem;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .marketing-tag:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .marketing-tag::before {
            content: '🚀';
            margin-right: 0.5rem;
        }
        
        .marketing-tag.seo::before { content: '🎯'; }
        .marketing-tag.social::before { content: '📱'; }
        .marketing-tag.design::before { content: '🎨'; }
        .marketing-tag.analytics::before { content: '📊'; }
        .marketing-tag.ppc::before { content: '💡'; }
        .marketing-tag.web::before { content: '🌐'; }
        .marketing-tag.growth::before { content: '📈'; }
        .marketing-tag.conversion::before { content: '💰'; }
        .marketing-tag.roi::before { content: '📊'; }
        .marketing-tag.leads::before { content: '🎯'; }
        
        /* Different colored tags */
        .marketing-tag.growth { background: rgba(34, 197, 94, 0.15); color: #059669; border: 1px solid rgba(34, 197, 94, 0.3); }
        .marketing-tag.conversion { background: rgba(59, 130, 246, 0.15); color: #2563eb; border: 1px solid rgba(59, 130, 246, 0.3); }
        .marketing-tag.roi { background: rgba(168, 85, 247, 0.15); color: #7c3aed; border: 1px solid rgba(168, 85, 247, 0.3); }
        .marketing-tag.seo { background: rgba(236, 72, 153, 0.15); color: #be185d; border: 1px solid rgba(236, 72, 153, 0.3); }
        .marketing-tag.social { background: rgba(245, 158, 11, 0.15); color: #d97706; border: 1px solid rgba(245, 158, 11, 0.3); }
        .marketing-tag.design { background: rgba(239, 68, 68, 0.15); color: #dc2626; border: 1px solid rgba(239, 68, 68, 0.3); }
        .marketing-tag.analytics { background: rgba(6, 182, 212, 0.15); color: #0891b2; border: 1px solid rgba(6, 182, 212, 0.3); }
        .marketing-tag.ppc { background: rgba(139, 92, 246, 0.15); color: #7c3aed; border: 1px solid rgba(139, 92, 246, 0.3); }
        .marketing-tag.web { background: rgba(16, 185, 129, 0.15); color: #059669; border: 1px solid rgba(16, 185, 129, 0.3); }
        .marketing-tag.leads { background: rgba(99, 102, 241, 0.15); color: #4f46e5; border: 1px solid rgba(99, 102, 241, 0.3); }
        
        .card-hover {
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            position: relative;
            overflow: hidden;
        }
        
        .card-hover::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(139, 92, 246, 0.05), rgba(99, 102, 241, 0.05));
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .card-hover:hover::before {
            opacity: 1;
        }
        
        .card-hover:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
        }
        
        .fade-in {
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.8s ease;
        }
        
        .fade-in.animate {
            opacity: 1;
            transform: translateY(0);
        }
        
        .slide-in-left {
            opacity: 0;
            transform: translateX(-50px);
            transition: all 0.8s ease;
        }
        
        .slide-in-left.animate {
            opacity: 1;
            transform: translateX(0);
        }
        
        .slide-in-right {
            opacity: 0;
            transform: translateX(50px);
            transition: all 0.8s ease;
        }
        
        .slide-in-right.animate {
            opacity: 1;
            transform: translateX(0);
        }
        
        .hero-slider {
            position: relative;
            overflow: hidden;
        }
        
        .slide {
            opacity: 0;
            transform: translateX(100%);
            transition: all 0.8s ease-in-out;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .slide.active {
            opacity: 1;
            transform: translateX(0);
            position: relative;
        }
        
        .slide.prev {
            transform: translateX(-100%);
        }
        
        .creative-icon {
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            border: 1px solid #bae6fd;
            position: relative;
            overflow: hidden;
        }
        
        .creative-icon::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg, transparent, rgba(139, 92, 246, 0.1), transparent);
            transform: rotate(45deg);
            transition: transform 0.6s ease;
        }
        
        .creative-icon:hover::before {
            transform: rotate(45deg) translate(50%, 50%);
        }
        
        .section-padding {
            padding: 5rem 0;
        }
        
        .text-shadow {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .glass-effect {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .nav-link {
            position: relative;
            transition: all 0.3s ease;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: #3b82f6;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after {
            width: 100%;
        }
        
        .portfolio-filter {
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .portfolio-filter.active {
            background: linear-gradient(135deg, #8b5cf6, #7c3aed);
            color: white;
            box-shadow: 0 5px 15px rgba(139, 92, 246, 0.3);
        }
        
        .portfolio-item {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }
        
        .portfolio-item:hover {
            transform: scale(1.05);
        }
        
        .blog-card {
            background: white;
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            position: relative;
        }
        
        .blog-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: linear-gradient(90deg, #8b5cf6, #6366f1, #a855f7);
            transform: scaleX(0);
            transition: transform 0.3s ease;
        }
        
        .blog-card:hover::before {
            transform: scaleX(1);
        }
        
        .blog-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
        }
        
        .case-study-card {
            background: linear-gradient(135deg, #f8fafc, #f1f5f9);
            border-left: 4px solid #3b82f6;
            position: relative;
            overflow: hidden;
        }
        
        .case-study-card::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(59, 130, 246, 0.1), transparent);
            border-radius: 50%;
            transform: translate(50%, -50%);
        }
        
        .stats-counter {
            font-size: 3rem;
            font-weight: 700;
            color: #3b82f6;
        }
        

        
        /* Pulse Animation for CTAs */
        .pulse-cta {
            animation: pulseGlow 2s ease-in-out infinite;
        }
        
        @keyframes pulseGlow {
            0%, 100% { box-shadow: 0 4px 15px rgba(6, 182, 212, 0.3); }
            50% { box-shadow: 0 8px 25px rgba(6, 182, 212, 0.5); }
        }
        
        /* Neon Effect */
        .neon-text {
            text-shadow: 
                0 0 5px rgba(6, 182, 212, 0.5),
                0 0 10px rgba(6, 182, 212, 0.5),
                0 0 15px rgba(6, 182, 212, 0.5);
        }
        

         /* my chagnes  */
         #home{
            padding-top: 40px;
         }

        @media(max-width: 768px) {
            .slide h1 {
                font-size: 2.5rem;
            }
            .slide p {
                font-size: 1.25rem;
            }
            .rest-wrap{
                width: 100%;
                flex-direction: column;
                border-radius: 15px !important;
                padding: 15px !important;
                align-items: center;
                justify-content: center;
            }
            .rest-wrap button{
                min-width: 100%;
                margin: 0 !important;
            }
            #home{
                padding: 0px 15px 60px 15px;
                max-width: 100% !important;
            }
            .resp-w{
                max-width: 100% !important;
            }
            .grid-pattern {
                max-width: 85% !important;
            }
            .futuristic-bg::before {
                max-width: 80%;
            }
            .bg-element:nth-child(1){
                left: 16% !important;
            }
            .-right-6 {
                right: -0.5rem !important;
            }
            #about{
                max-width: 100% !important;
            }
        }
        
        @keyframes marquee {
            0%   { transform: translateX(0); }
            100% { transform: translateX(-50%); } /* shift by half since we duplicated */
            }

        .animate-marquee {
        display: flex;
        width: max-content;
        animation: marquee 20s linear infinite;
        }