/* === ROOT VARIABLES (unchanged) === */
        :root {
            --primary: #0066FF;
            --primary-light: #3399FF;
            --primary-dark: #0047B3;
            --secondary: #00D4FF;
            --accent: #2b50e2;
            --accent-light: #5560f7;
            --dark: #0A0A14;
            --dark-light: #1A1A24;
            --light: #F0F4FF;
            --white: #FFFFFF;
            --gradient: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
            --gradient-light: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-light) 100%);
            --gradient-blue: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);

            --glass-bg: rgba(255, 255, 255, 0.08);
            --glass-border: rgba(255, 255, 255, 0.15);
            --glass-shadow: 0 8px 32px 0 rgba(0, 102, 255, 0.15);

            --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.08);
            --shadow-medium: 0 8px 30px rgba(0, 0, 0, 0.12);
            --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.2);
            --shadow-glow: 0 0 30px rgba(0, 102, 255, 0.3);

            --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 16px;
            --radius-xl: 20px;
            --radius-full: 9999px;


            /* .================= */
/* contact section  */
                 --ts-grad-primary: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
            --ts-grad-secondary: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
            --ts-grad-dark: linear-gradient(135deg, #2c2c54 0%, #40407a 100%);
            --ts-color-primary: #4e54c8;
            --ts-color-secondary: #ff6b6b;
            --ts-color-dark: #2c2c54;
            /* =================== */
        }

  

        body {
            font-family: 'Inter', sans-serif;
            /* background: var(--dark); */
            color: var(--white);
            margin: 0px !important;
            overflow-x: hidden;
        }

        /* Floating Background Elements (Unique class names) */
        .ambient-backdrop {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: -1;
            overflow: hidden;
        }

        .floating-sphere {
            position: absolute;
            border-radius: 50%;
            filter: blur(40px);
            opacity: 0.3;
            animation: driftAnimation 20s infinite ease-in-out;
        }

        .sphere-primary {
            width: 300px;
            height: 300px;
            background: var(--primary);
            top: -50px;
            left: -50px;
            animation-delay: 0s;
        }

        .sphere-accent {
            width: 250px;
            height: 250px;
            background: var(--accent);
            top: 40%;
            right: -50px;
            animation-delay: 5s;
        }

        .sphere-secondary {
            width: 200px;
            height: 200px;
            background: var(--secondary);
            bottom: -30px;
            left: 25%;
            animation-delay: 10s;
        }

        @keyframes driftAnimation {
            0%, 100% {
                transform: translate(0, 0) rotate(0deg);
            }
            33% {
                transform: translate(20px, -30px) rotate(120deg);
            }
            66% {
                transform: translate(-15px, 15px) rotate(240deg);
            }
        }

        /* === HEADER COMPONENTS (Unique class names, no "nexus") === */
        .corporate-header {
            position: fixed;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            width: 95%;
            max-width: 1600px;
            background: var(--glass-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--glass-border);
            border-radius: var(--radius-lg);
            padding: 0.6rem 1.2rem;
            z-index: 1000;
            box-shadow: var(--glass-shadow);
            transition: var(--transition-normal);
        }

        .corporate-header.scrolled {
            top: 10px;
            width: 88%;
            background: rgba(10, 10, 20, 0.95);
            border-color: rgba(0, 102, 255, 0.3);
            box-shadow: var(--shadow-glow);
        }

        .header-flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: relative;
        }

        /* Logo */
        .brand-link {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            text-decoration: none;
            z-index: 1001;
        }

        .brand-icon {
            background: var(--gradient);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .brand-icon img {
            height: 55px;
            width: auto;
            max-width: 140px;
            object-fit: contain;
            display: block;
        }

        .brand-title {
            display: flex;
            flex-direction: column;
        }

        .brand-name {
            font-size: 1.3rem;
            font-weight: 800;
            background: linear-gradient(135deg, var(--white) 0%, var(--secondary) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            letter-spacing: -0.3px;
        }

        .brand-sub {
            font-size: 0.65rem;
            font-weight: 500;
            color: var(--secondary);
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        /* Desktop Navigation (unique IDs/classes) */
        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-item {
            padding: 0.6rem 1rem;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 500;
            border-radius: var(--radius-md);
            transition: var(--transition-fast);
            font-size: 0.95rem;
            text-decoration: none;
        }

        .nav-item:hover {
            color: var(--white);
            background: rgba(255, 255, 255, 0.05);
        }

        .nav-item.current {
            color: var(--white);
            background: var(--gradient);
            box-shadow: 0 4px 15px rgba(0, 102, 255, 0.3);
        }

        /* Services Dropdown Container */
        .mega-dropdown-zone {
            position: static;
        }

        .service-trigger {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.2rem;
            background: var(--gradient);
            color: white;
            border-radius: var(--radius-md);
            font-weight: 600;
            transition: var(--transition-normal);
            box-shadow: 0 4px 12px rgba(0, 102, 255, 0.3);
            font-size: 0.95rem;
            cursor: pointer;
            border: none;
            outline: none;
            white-space: nowrap;
        }

        .service-trigger:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 102, 255, 0.4);
        }

        .service-trigger i {
            font-size: 0.8rem;
            transition: var(--transition-fast);
        }

        .service-trigger:hover i {
            transform: rotate(180deg);
        }

        /* Mega Menu (Desktop) - Unique names */
        .super-menu {
            position: fixed;
            top: 90px;
            left: 50%;
            transform: translateX(-50%) translateY(-10px);
            /* max-width: 1400px;
            width: 90%; */
            background: rgba(10, 10, 20, 0.98);
            backdrop-filter: blur(30px);
            border: 1px solid rgba(0, 102, 255, 0.2);
            border-radius: var(--radius-lg);
            padding: 2rem;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
            box-shadow: var(--shadow-large);
            overflow: hidden;
            z-index: 1000;
        }

        .super-menu::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at 10% 90%, rgba(0, 102, 255, 0.15) 0%, transparent 40%),
                        radial-gradient(circle at 90% 10%, rgba(138, 43, 226, 0.15) 0%, transparent 40%),
                        radial-gradient(circle at 30% 40%, rgba(0, 212, 255, 0.1) 0%, transparent 40%),
                        linear-gradient(45deg, transparent 0%, rgba(255, 255, 255, 0.03) 25%, transparent 50%, rgba(0, 102, 255, 0.03) 75%, transparent 100%);
            background-size: 400% 400%;
            z-index: -1;
            animation: gradientFlow 15s ease infinite;
        }

        .super-menu::after {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(0, 102, 255, 0.08) 1px, transparent 1px),
                              linear-gradient(90deg, rgba(0, 102, 255, 0.08) 1px, transparent 1px);
            background-size: 40px 40px;
            z-index: -1;
            opacity: 0.4;
        }

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

        .mega-dropdown-zone:hover .super-menu {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }

        .menu-pointer {
            position: absolute;
            top: -8px;
            left: 50%;
            transform: translateX(-50%) rotate(45deg);
            width: 16px;
            height: 16px;
            background: rgba(10, 10, 20, 0.98);
            border-left: 1px solid rgba(0, 102, 255, 0.2);
            border-top: 1px solid rgba(0, 102, 255, 0.2);
        }

        .service-layout {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5rem;
        }

        .service-group {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
        }

        .group-headline {
            display: flex;
            align-items: center;
            gap: 0.6rem;
            color: var(--secondary);
            font-weight: 700;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            margin-bottom: 0.5rem;
            padding-bottom: 0.6rem;
            border-bottom: 1px solid rgba(0, 212, 255, 0.3);
            position: relative;
        }

        .group-headline::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--gradient-blue);
        }

        .service-tile {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 1rem;
            border-radius: var(--radius-md);
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid transparent;
            transition: var(--transition-normal);
            text-decoration: none;
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
        }

        .service-tile::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: var(--transition-normal);
        }

        .service-tile:hover::before {
            left: 100%;
        }

        .service-tile:hover {
            background: rgba(0, 102, 255, 0.15);
            border-color: rgba(0, 102, 255, 0.4);
            transform: translateX(5px);
            box-shadow: 0 8px 20px rgba(0, 102, 255, 0.25);
        }

        .tile-media {
            width: 55px;
            height: 55px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(0, 102, 255, 0.3), rgba(138, 43, 226, 0.3));
            border: 1px solid rgba(255, 255, 255, 0.15);
        }

        .tile-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: var(--transition-normal);
            filter: brightness(0.9);
        }

        .service-tile:hover .tile-img {
            transform: scale(1.15);
            filter: brightness(1.2);
        }

        .service-label {
            font-weight: 600;
            font-size: 0.95rem;
            color: var(--white);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            position: relative;
            display: inline-block;
        }

        .service-label::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 0;
            height: 1px;
            background: var(--secondary);
            transition: var(--transition-normal);
        }

        .service-tile:hover .service-label::after {
            width: 100%;
        }

        .service-desc {
            font-size: 0.78rem;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .badge-hot {
            background: var(--gradient-blue);
            color: white;
            font-size: 0.7rem;
            padding: 0.2rem 0.7rem;
            border-radius: var(--radius-full);
            font-weight: 600;
            white-space: nowrap;
            margin-left: auto;
            box-shadow: 0 2px 8px rgba(0, 212, 255, 0.3);
            animation: pulseGlow 2s infinite;
        }

        @keyframes pulseGlow {
            0% { opacity: 0.8; transform: scale(0.98);}
            50% { opacity: 1; transform: scale(1.05);}
            100% { opacity: 0.8; transform: scale(0.98);}
        }

        .cta-button {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            padding: 0.6rem 1.5rem;
            background: transparent;
            color: var(--secondary);
            border: 2px solid var(--secondary);
            border-radius: var(--radius-md);
            font-weight: 600;
            transition: var(--transition-normal);
            font-size: 0.95rem;
            cursor: pointer;
            text-decoration: none;
            overflow: hidden;
            position: relative;
            z-index: 1;
        }

        .cta-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: var(--gradient-blue);
            transition: var(--transition-normal);
            z-index: -1;
        }

        .cta-button:hover {
            color: white;
            border-color: transparent;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 212, 255, 0.3);
        }

        .cta-button:hover::before {
            left: 0;
        }

        /* Mobile Toggle Button (unique) */
        .mobile-hamburger {
            display: none;
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-md);
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: var(--transition-fast);
            z-index: 1001;
        }

        .mobile-hamburger span {
            width: 18px;
            height: 2px;
            background: var(--white);
            position: relative;
            transition: var(--transition-fast);
        }

        .mobile-hamburger span::before,
        .mobile-hamburger span::after {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--white);
            transition: var(--transition-fast);
        }

        .mobile-hamburger span::before {
            top: -5px;
        }

        .mobile-hamburger span::after {
            top: 5px;
        }

        .mobile-hamburger.active span {
            background: transparent;
        }

        .mobile-hamburger.active span::before {
            top: 0;
            transform: rotate(45deg);
        }

        .mobile-hamburger.active span::after {
            top: 0;
            transform: rotate(-45deg);
        }

        /* Mobile Menu Panel (unique) */
        .offcanvas-menu {
            position: fixed;
            top: 0;
            right: -110%;
            width: 100%;
            height: 100vh;
            background: rgba(10, 10, 20, 0.98);
            backdrop-filter: blur(30px);
            padding: 5rem 1rem 2rem;
            transition: var(--transition-normal);
            z-index: 999;
            overflow-y: auto;
        }

        .offcanvas-menu.active {
            right: 0;
        }

        .mobile-group {
            margin-bottom: 1rem;
            border-bottom: 1px solid rgba(0, 212, 255, 0.1);
        }

        .mobile-group-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 1rem 0.5rem;
            cursor: pointer;
            user-select: none;
        }

        .mobile-group-title {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            color: var(--secondary);
            font-weight: 700;
            font-size: 1rem;
            text-transform: uppercase;
        }

        .mobile-group-header i {
            transition: transform 0.3s;
            color: var(--secondary);
        }

        .mobile-group-header.expanded i {
            transform: rotate(90deg);
        }

        .mobile-sub-links {
            display: none;
            padding: 0.2rem 0 1rem 0.8rem;
            flex-direction: column;
            gap: 0.5rem;
        }

        .mobile-sub-links.visible {
            display: flex;
        }

        .mobile-service-entry {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.7rem;
            background: rgba(255, 255, 255, 0.02);
            border-radius: var(--radius-md);
            border-left: 3px solid var(--primary);
            text-decoration: none;
            margin: 0.2rem 0;
        }

        .mobile-service-entry .tile-media {
            width: 45px;
            height: 45px;
        }

        .mobile-service-entry .service-label {
            font-size: 0.9rem;
        }

        .mobile-service-entry .service-desc {
            font-size: 0.7rem;
        }

        .mobile-standalone {
            display: flex;
            flex-direction: column;
            gap: 0.8rem;
            margin: 1.5rem 0 2rem;
            padding: 0 0.5rem;
        }

        .mobile-standalone-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 1rem;
            background: rgba(255, 255, 255, 0.02);
            border-radius: var(--radius-md);
            border: 1px solid rgba(0, 212, 255, 0.1);
            text-decoration: none;
            color: var(--white);
            font-weight: 600;
            transition: var(--transition-fast);
        }

        .mobile-standalone-item i {
            width: 24px;
            color: var(--secondary);
            font-size: 1.2rem;
        }

        .mobile-standalone-item:hover {
            background: rgba(0, 102, 255, 0.15);
            border-color: var(--primary);
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .desktop-nav {
                display: none;
            }
            .mobile-hamburger {
                display: flex;
            }
            .super-menu {
                display: none;
            }
            .corporate-header {
                width: 96%;
                padding: 0.6rem 1rem;
            }
        }

        @media (max-width: 480px) {
            .brand-title {
                display: none;
            }
            .brand-icon img {
                height: 45px;
            }
        }








        /* Banner Code Start */

    
        /* Google Fonts */
        @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;600;700;800&family=Plus+Jakarta+Sans:wght@800;900&display=swap');
        
    
        body {
            font-family: 'Manrope', sans-serif;
            overflow-x: hidden;
            /* background: #000; */
            color: #fff;
        }
   
        
        /* MSG_HERO_Container - Adjusted for header */
        .msg_hero_banner {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            color: #fff;
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.8)), 
                        url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') no-repeat center center;
            background-size: cover;
            transition: background 1.5s ease;
            padding-top: 70px;
        }
        
        /* MSG_Grid_Background */
        .msg_grid_lines {
            position: absolute;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                        linear-gradient(to bottom, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 60px 60px;
            animation: msgGridScroll 40s linear infinite;
            z-index: 1;
        }
        
        @keyframes msgGridScroll {
            from { background-position: 0 0; }
            to { background-position: -60px -60px; }
        }
        
        /* MSG_Floating_Dots */
        .msg_connection_dots {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
        }
        
        .msg_dot {
            position: absolute;
            width: 6px;
            height: 6px;
            background: rgba(100, 180, 255, 0.6);
            border-radius: 50%;
            filter: blur(0.5px);
            animation: msgDotPulse 3s infinite ease-in-out;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .msg_dot:hover {
            transform: scale(2);
            background: #fff;
            box-shadow: 0 0 15px rgba(100, 180, 255, 0.6);
        }
        
        @keyframes msgDotPulse {
            0%, 100% { transform: scale(1); opacity: 0.6; }
            50% { transform: scale(1.5); opacity: 1; }
        }
        
        /* MSG_Glowing_Orbs */
        .msg_orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(40px);
            opacity: 0.15;
            z-index: 1;
        }
        
        .msg_orb_one {
            width: 300px;
            height: 300px;
            background: #3E92CC;
            top: -100px;
            right: -100px;
            animation: msgOrbFloat 12s infinite ease-in-out;
        }
        
        .msg_orb_two {
            width: 400px;
            height: 400px;
            background: #FFD166;
            bottom: -150px;
            left: -150px;
            animation: msgOrbFloat 15s infinite ease-in-out reverse;
        }
        
        .msg_orb_three {
            width: 250px;
            height: 250px;
            background: #FF6B6B;
            top: 50%;
            left: 20%;
            animation: msgOrbFloat 10s infinite ease-in-out alternate;
        }
        
        @keyframes msgOrbFloat {
            0%, 100% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(20px, 30px) rotate(5deg); }
            50% { transform: translate(30px, 10px) rotate(0deg); }
            75% { transform: translate(10px, 20px) rotate(-5deg); }
        }
        
        /* MSG_Particle_Network */
        #msg_particle_network {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 2;
        }
        
        /* MSG_Background_Controls */
        .msg_bg_controls {
            position: absolute;
            top: 110px;
            right: 20px;
            z-index: 100;
            display: flex;
            flex-direction: column;
            gap: 10px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            padding: 15px;
            border-radius: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .msg_bg_btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 2px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
            background-size: cover;
            background-position: center;
        }
        
        .msg_bg_btn.active {
            border-color: #3E92CC;
            transform: scale(1.1);
            box-shadow: 0 0 10px #3E92CC;
        }
        
        .msg_bg_btn:hover {
            transform: scale(1.1);
        }
        
        /* MSG_Main_Content */
        .msg_hero_content {
            max-width: 1200px;
            padding: 40px;
            z-index: 10;
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            position: relative;
        }
        
        .msg_hero_title {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-weight: 900;
            font-size: 4rem;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            margin-top: 40px;
            background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0.8));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 2px 10px rgba(0,0,0,0.2);
            position: relative;
        }
        
        .msg_hero_title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 3px;
            background: linear-gradient(to right, transparent, #3E92CC, transparent);
            border-radius: 3px;
            opacity: 0;
            transition: all 0.5s ease;
        }
        
        .msg_hero_title:hover::after {
            width: 200px;
            opacity: 1;
        }
        
        .msg_hero_tagline {
            font-size: 1.5rem;
            max-width: 700px;
            margin-bottom: 3rem;
            color: rgba(255, 255, 255, 0.8);
            font-weight: 300;
            line-height: 1.6;
            position: relative;
        }
        
        /* MSG_Service_Categories */
        .msg_categories_wrapper {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }
        
        .msg_category_btn {
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 30px;
            color: #fff;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }
        
        .msg_category_btn:hover, .msg_category_btn.active {
            background: linear-gradient(135deg, #3E92CC, #64B4FF);
            box-shadow: 0 10px 30px rgba(62, 146, 204, 0.4);
            transform: translateY(-2px);
        }
        
        /* MSG_Solutions_Scroller */
        .msg_solutions_scroller {
            width: 100%;
            overflow: hidden;
            position: relative;
            margin: 2rem 0;
        }
        
        .msg_solutions_track {
            display: flex;
            animation: msgScrollHorizontal 30s linear infinite;
            padding: 10px 0;
            will-change: transform;
        }
        
        .msg_solutions_track:hover {
            animation-play-state: paused;
        }
        
        @keyframes msgScrollHorizontal {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        
        .msg_solution_card {
            flex: 0 0 auto;
            width: 160px;
            height: 160px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 20px;
            transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            transform-style: preserve-3d;
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            position: relative;
            overflow: hidden;
            margin: 0 10px;
            cursor: pointer;
            text-decoration: none;
        }
        
        .msg_solution_card:hover {
            transform: translateY(-10px) rotateX(5deg);
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 0 12px 40px rgba(0,0,0,0.2);
            border-color: rgba(100, 180, 255, 0.6);
        }
        
        .msg_solution_icon {
            width: 50px;
            height: 50px;
            margin-bottom: 15px;
            filter: drop-shadow(0 0 8px rgba(100, 180, 255, 0.4));
            transition: all 0.3s ease;
        }
        
        .msg_solution_card:hover .msg_solution_icon {
            transform: scale(1.2) rotate(5deg);
            filter: drop-shadow(0 0 15px rgba(100, 180, 255, 0.8));
        }
        
        .msg_solution_name {
            font-weight: 600;
            font-size: 0.95rem;
            color: #fff;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .msg_solution_card:hover .msg_solution_name {
            color: #3E92CC;
            text-shadow: 0 0 10px rgba(100, 180, 255, 0.5);
        }
        
        /* MSG_CTA_Container */
        .msg_cta_wrapper {
            position: absolute;
            bottom: 220px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 100;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .msg_cta_button {
            background: linear-gradient(135deg, #3E92CC, #64B4FF);
            color: white;
            border: none;
            padding: 12px 50px;
            font-size: 1.1rem;
            font-weight: 700;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.4s ease;
            position: relative;
            overflow: hidden;
            z-index: 1;
            box-shadow: 0 10px 30px rgba(62, 146, 204, 0.4);
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        .msg_cta_button::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, #64B4FF, #3E92CC);
            z-index: -1;
            opacity: 0;
            transition: opacity 0.4s ease;
            border-radius: 50px;
        }
        
        .msg_cta_button:hover::before {
            opacity: 1;
        }
        
        .msg_cta_button:hover {
            transform: translateY(-3px);
            box-shadow: 0 15px 40px rgba(62, 146, 204, 0.6);
        }
        
        .msg_cta_button.pulse {
            animation: msgCtaPulse 2s infinite;
        }
        
        @keyframes msgCtaPulse {
            0% {
                box-shadow: 0 0 0 0 rgba(62, 146, 204, 0.7);
            }
            70% {
                box-shadow: 0 0 0 15px rgba(62, 146, 204, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(62, 146, 204, 0);
            }
        }
        
        .msg_demo_text {
            color: rgba(255, 255, 255, 0.8);
            font-size: 0.9rem;
            margin-top: 10px;
            opacity: 0.8;
            animation: msgTextFade 3s infinite;
        }
        
        @keyframes msgTextFade {
            0%, 100% { opacity: 0.6; }
            50% { opacity: 1; }
        }
        
        /* MSG_Floating_Services */
        .msg_floating_services {
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
            z-index: 10;
            display: flex;
            flex-direction: column;
            gap: 30px;
        }
        
        .msg_floating_service {
            width: 60px;
            height: 60px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 8px 32px rgba(0,0,0,0.1);
            transition: all 0.4s ease;
            animation: msgServiceFloat 6s infinite ease-in-out;
            cursor: pointer;
        }
        
        .msg_floating_service:nth-child(1) {
            animation-delay: 0s;
        }
        
        .msg_floating_service:nth-child(2) {
            animation-delay: 1s;
        }
        
        .msg_floating_service:nth-child(3) {
            animation-delay: 2s;
        }
        
        .msg_floating_service:nth-child(4) {
            animation-delay: 3s;
        }
        
        .msg_floating_service img {
            width: 30px;
            height: 30px;
            filter: drop-shadow(0 0 5px rgba(100, 180, 255, 0.5));
        }
        
        .msg_floating_service:hover {
            transform: scale(1.2) rotate(10deg);
            background: rgba(255, 255, 255, 0.05);
            box-shadow: 0 12px 40px rgba(0,0,0,0.2);
            border-color: rgba(100, 180, 255, 0.6);
        }
        
        @keyframes msgServiceFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            33% { transform: translateY(-15px) rotate(5deg); }
            66% { transform: translateY(15px) rotate(-5deg); }
        }
        
        /* MSG_Floating_Logo */
        .msg_floating_logo {
            position: absolute;
            left: 40px;
            top: 40px;
            z-index: 10;
            width: 120px;
            filter: drop-shadow(0 0 10px rgba(100, 180, 255, 0.5));
            animation: msgLogoFloat 8s infinite ease-in-out;
            transition: all 0.5s ease;
            cursor: pointer;
        }
        
        .msg_floating_logo:hover {
            transform: scale(1.1) rotate(-5deg);
            filter: drop-shadow(0 0 20px rgba(100, 180, 255, 0.8));
        }
        
        @keyframes msgLogoFloat {
            0%, 100% { transform: translateY(0) rotate(0deg); }
            25% { transform: translateY(-10px) rotate(2deg); }
            50% { transform: translateY(0) rotate(0deg); }
            75% { transform: translateY(10px) rotate(-2deg); }
        }
        
        /* MSG_Floating_App_Icons */
        .msg_floating_apps {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 3;
            pointer-events: none;
        }
        
        .msg_app_icon {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(5px);
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            animation: msgAppFloat 20s infinite linear;
            pointer-events: auto;
            transition: transform 0.3s ease;
            cursor: pointer;
        }
        
        .msg_app_icon:hover {
            transform: scale(1.2) rotate(15deg);
            z-index: 10;
        }
        
        .msg_app_icon img {
            width: 24px;
            height: 24px;
            filter: drop-shadow(0 0 5px rgba(100, 180, 255, 0.5));
        }
        
        @keyframes msgAppFloat {
            0% {
                transform: translate(0, 0) rotate(0deg);
            }
            25% {
                transform: translate(calc(100vw - 100px), calc(50vh - 50px)) rotate(90deg);
            }
            50% {
                transform: translate(calc(50vw - 50px), calc(100vh - 100px)) rotate(180deg);
            }
            75% {
                transform: translate(calc(0vw + 20px), calc(75vh - 75px)) rotate(270deg);
            }
            100% {
                transform: translate(0, 0) rotate(360deg);
            }
        }
        
        /* MSG_Enhanced_Particles */
        .msg_enhanced_particles {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 30%;
            z-index: 5;
            overflow: hidden;
        }
        
        .msg_particle {
            position: absolute;
            background: rgba(100, 180, 255, 0.6);
            border-radius: 50%;
            pointer-events: none;
            animation: msgParticleFloat linear infinite;
        }
        
        @keyframes msgParticleFloat {
            0% {
                transform: translateY(0) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-500px) rotate(360deg);
                opacity: 0;
            }
        }
        
        /* MSG_Ripple_Effect */
        .msg_ripple {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            transform: scale(0);
            animation: msgRippleAnim 1s linear;
            pointer-events: none;
        }
        
        @keyframes msgRippleAnim {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }
        
        /* MSG_Modal */
        .msg_modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            z-index: 3000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }
        
        .msg_modal_content {
            background: rgba(255, 255, 255, 0.05);
            padding: 40px;
            border-radius: 20px;
            max-width: 500px;
            width: 90%;
            text-align: center;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
            transform: scale(0.9);
            opacity: 0;
            transition: all 0.3s ease;
        }
        
        .msg_modal.show .msg_modal_content {
            transform: scale(1);
            opacity: 1;
        }
        
        .msg_modal h2 {
            margin-bottom: 0px;
            color: #fff;
            font-size: 2rem;
            
        }
        
        .msg_modal p {
            margin-bottom: 30px;
            color: rgba(255, 255, 255, 0.8);
            line-height: 1.5;
        }
        
        .msg_modal_close {
            position: absolute;
            top: 15px;
            right: 15px;
            background: none;
            border: none;
            font-size: 24px;
            color: #fff;
            cursor: pointer;
        }
        
        .msg_modal form {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .msg_modal form input,
        .msg_modal form textarea {
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            background: rgba(255, 255, 255, 0.05);
            color: white;
            font-size: 1rem;
            font-family: 'Manrope', sans-serif;
        }
        
        .msg_modal form input::placeholder,
        .msg_modal form textarea::placeholder {
            color: rgba(255, 255, 255, 0.5);
        }
        
        .msg_modal form input:focus,
        .msg_modal form textarea:focus {
            outline: none;
            border-color: #64B4FF;
        }
        
        /* Responsive Design */
        @media (max-width: 1024px) {
            .msg_hero_title { font-size: 3.5rem; }
            .msg_hero_tagline { font-size: 1.3rem; }
            .msg_solution_card { width: 140px; height: 140px; }
            .msg_floating_services { left: 20px; }
            .msg_floating_logo { left: 20px; width: 100px; }
            .msg_bg_controls { top: 80px; right: 15px; }
        }
     
        @media (max-width: 768px) {
            .msg_hero_banner {  padding-bottom: 100px; overflow-x: hidden; }
            .msg_hero_content { padding: 20px 15px; width: 100%; margin-top: 0; }
            .msg_hero_title { font-size: 2.5rem !important; margin-bottom: 15px; }
            .msg_hero_title br { display: none; }
            .msg_hero_tagline { font-size: 1rem !important; padding: 0 10px; margin-bottom: 25px; }
            .msg_categories_wrapper { display: flex; overflow-x: auto; overflow-y: hidden; justify-content: flex-start; gap: 12px;margin-bottom: 20px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; width: 100%; flex-wrap: nowrap; }
            .msg_categories_wrapper::-webkit-scrollbar { height: 3px; }
            .msg_category_btn { flex-shrink: 0; white-space: nowrap; padding: 8px 18px; font-size: 0.85rem; }
            .msg_solutions_scroller { width: 100%; overflow-x: auto; overflow-y: hidden; margin: 20px 0; -webkit-overflow-scrolling: touch; cursor: grab; }
            .msg_solutions_scroller:active { cursor: grabbing; }
            .msg_solutions_track { display: flex; gap: 15px; padding: 10px 15px; width: max-content; animation: none !important; }
            .msg_solution_card { width: 130px; height: 130px; padding: 15px; margin: 0; flex-shrink: 0; }
            .msg_solution_icon { width: 45px; height: 45px; margin-bottom: 10px; }
            .msg_solution_name { font-size: 0.8rem; }
            .msg_cta_wrapper { position: relative; bottom: auto; left: auto; transform: none;  }
            .msg_cta_button { padding: 12px 35px; font-size: 0.95rem; }
            .msg_floating_services { left: 10px; gap: 12px; top: 50%; transform: translateY(-50%); }
            .msg_floating_service { width: 45px; height: 45px; }
            .msg_floating_service img { width: 24px; height: 24px; }
            .msg_floating_logo { left: 15px; top: 15px; width: 55px; }
            .msg_bg_controls { top: auto; bottom: 20px; right: auto; left: 50%; transform: translateX(-50%); flex-direction: row; padding: 8px 15px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); z-index: 100; }
            .msg_bg_btn { width: 35px; height: 35px; }
            .msg_connection_dots { display: none; }
            .msg_orb { display: none; }
            .msg_floating_apps { opacity: 0.4; pointer-events: none; }
            .msg_app_icon { width: 30px; height: 30px; }
            .msg_app_icon img { width: 18px; height: 18px; }
            .msg_enhanced_particles { height: 30%; }
            .msg_modal_content { width: 90%; padding: 25px 20px; margin: 20px; }
            .msg_modal h2 { font-size: 1.5rem; margin-bottom: 15px; }
            .msg_modal p { font-size: 0.9rem; margin-bottom: 20px; }
            .msg_modal form input, .msg_modal form textarea { padding: 10px 15px; font-size: 0.9rem; }
        }
        
        @media (max-width: 480px) {
            .msg_hero_banner { padding-top: 60px; padding-bottom: 80px; }
            .msg_hero_title { font-size: 1.9rem !important; }
            .msg_hero_tagline { font-size: 1.1rem !important; }
            .msg_solution_card { width: 110px; height: 110px; padding: 12px; }
            .msg_solution_icon { width: 38px; height: 38px; }
            .msg_solution_name { font-size: 0.7rem; }
            .msg_category_btn { padding: 6px 14px; font-size: 0.75rem; }
            .msg_floating_logo { width: 45px; top: 12px; left: 12px; }
            .msg_floating_services { left: 8px; gap: 10px; }
            .msg_floating_service { width: 38px; height: 38px; }
            .msg_floating_service img { width: 20px; height: 20px; }
            .msg_cta_button { padding: 10px 28px; font-size: 0.85rem; }
            .msg_bg_controls { padding: 6px 12px; bottom: 15px; }
            .msg_bg_btn { width: 30px; height: 30px; }
            .msg_demo_text { font-size: 0.7rem; }
        }
        
        @media (max-width: 768px) and (orientation: landscape) {
            .msg_hero_banner { min-height: auto; padding-bottom: 60px; }
            .msg_floating_services { display: none; }
            .msg_solution_card { width: 115px; height: 115px; }
            .msg_cta_wrapper { margin-top: 20px; }
        }
        
        @media (min-width: 769px) and (max-width: 1024px) {
            .msg_solution_card { width: 140px; height: 140px; }
            .msg_floating_services { left: 15px; }
            .msg_floating_logo { width: 65px; }
        }
  

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

        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
            min-height: 100vh;
        } */

        .second-banner{
             background: linear-gradient(135deg, #f5f7fa 0%, #eef2f7 100%);
            min-height: 100vh;
        }

        /* Hero Banner Container - Unique Classes */
        .dm-hero-wrapper {
            max-width: 1400px;
            margin: 0 auto;
            padding: 60px 40px;
            
        }

        
        /* Main Banner Card */
        .dm-banner-card {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            border-radius: 48px;
            overflow: hidden;
            position: relative;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
            transition: all 0.4s ease;
        }

        .dm-banner-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 35px 60px -15px rgba(0, 0, 0, 0.3);
        }

        /* Animated Background Elements */
        .dm-banner-card::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
            animation: dmRotateBg 30s linear infinite;
            pointer-events: none;
        }

        @keyframes dmRotateBg {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Floating Particles */
        .dm-particle-field {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }

        .dm-particle {
            position: absolute;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 50%;
            opacity: 0.3;
            animation: dmFloatParticle 15s ease-in-out infinite;
        }

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

        /* Banner Inner Content */
        .dm-banner-inner {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 40px;
            padding: 60px;
            position: relative;
            z-index: 2;
        }

        /* Left Content Section */
        .dm-banner-content {
            flex: 1;
            min-width: 300px;
            animation: dmFadeInLeft 0.8s ease-out;
        }

        @keyframes dmFadeInLeft {
            from {
                opacity: 0;
                transform: translateX(-50px);
            }
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .dm-badge {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(99, 102, 241, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(139, 92, 246, 0.3);
            padding: 8px 20px;
            border-radius: 60px;
            margin-bottom: 24px;
            animation: dmPulse 2s ease-in-out infinite;
        }

        @keyframes dmPulse {
            0%, 100% {
                box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4);
            }
            50% {
                box-shadow: 0 0 0 8px rgba(99, 102, 241, 0);
            }
        }

        .dm-badge i {
            color: #8b5cf6;
            font-size: 14px;
        }

        .dm-badge span {
            color: #cbd5e1;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .dm-banner-content h1 {
            font-size: 3.5rem;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 20px;
            background: linear-gradient(135deg, #ffffff 0%, #a78bfa 50%, #c084fc 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: dmGradientShift 3s ease-in-out infinite;
        }

        @keyframes dmGradientShift {
            0%, 100% {
                background-size: 100% 100%;
            }
            50% {
                background-size: 200% 100%;
                background-position: right;
            }
        }

        .dm-highlight-text {
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            display: inline-block;
        }

        .dm-highlight-text::after {
            content: '';
            position: absolute;
            bottom: 5px;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-radius: 4px;
            opacity: 0.3;
            z-index: -1;
        }

        .dm-description {
            color: #94a3b8;
            font-size: 1.1rem;
            line-height: 1.7;
            margin-bottom: 32px;
            max-width: 500px;
        }

        /* Stats Section */
        .dm-stats-row {
            display: flex;
            gap: 32px;
            margin-bottom: 40px;
            flex-wrap: wrap;
        }

        .dm-stat-block {
            text-align: left;
        }

        .dm-stat-number {
            font-size: 2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 0%, #a78bfa 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            display: block;
            margin-bottom: 4px;
        }

        .dm-stat-label {
            color: #64748b;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        /* CTA Buttons */
        .dm-cta-group {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
        }

        .dm-btn-primary {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            padding: 14px 32px;
            border-radius: 60px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
            position: relative;
            overflow: hidden;
        }

        .dm-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.5s ease;
        }

        .dm-btn-primary:hover::before {
            left: 100%;
        }

        .dm-btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(99, 102, 241, 0.5);
            gap: 16px;
        }

        .dm-btn-primary i {
            transition: transform 0.3s ease;
        }

        .dm-btn-primary:hover i {
            transform: translateX(4px);
        }

        .dm-btn-secondary {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(139, 92, 246, 0.3);
            color: #ffffff;
            padding: 14px 32px;
            border-radius: 60px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
        }

        .dm-btn-secondary:hover {
            background: rgba(139, 92, 246, 0.2);
            border-color: rgba(139, 92, 246, 0.6);
            transform: translateY(-2px);
            gap: 16px;
        }

        .dm-btn-secondary i {
            transition: transform 0.3s ease;
        }

        .dm-btn-secondary:hover i {
            transform: translateX(4px);
        }

        /* Right Image Section */
        .dm-banner-image {
            flex: 1;
            min-width: 300px;
            position: relative;
            animation: dmFadeInRight 0.8s ease-out;
        }

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

        .dm-img-wrapper {
            position: relative;
            border-radius: 32px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            transition: all 0.4s ease;
        }

        .dm-img-wrapper:hover {
            transform: scale(1.02);
            box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
        }

        .dm-img-wrapper img {
            width: 100%;
            height: auto;
            display: block;
            transition: transform 0.5s ease;
        }

        .dm-img-wrapper:hover img {
            transform: scale(1.05);
        }

        /* Floating Elements */
        .dm-floating-card {
            position: absolute;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 12px 20px;
            display: flex;
            align-items: center;
            gap: 12px;
            border: 1px solid rgba(139, 92, 246, 0.3);
            animation: dmFloat 3s ease-in-out infinite;
        }

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

        .dm-floating-card:nth-child(1) {
            top: -20px;
            right: -20px;
            animation-delay: 0s;
        }

        .dm-floating-card:nth-child(2) {
            bottom: 40px;
            left: -30px;
            animation-delay: 1s;
        }

        .dm-floating-card i {
            font-size: 24px;
            color: #8b5cf6;
        }

        .dm-floating-text {
            color: white;
            font-weight: 600;
            font-size: 0.9rem;
        }

        .dm-floating-subtext {
            color: #94a3b8;
            font-size: 0.7rem;
        }

        /* Trust Badges */
        .dm-trust-section {
            margin-top: 40px;
            padding-top: 32px;
            border-top: 1px solid rgba(139, 92, 246, 0.2);
        }

        .dm-trust-text {
            color: #64748b;
            font-size: 0.85rem;
            margin-bottom: 16px;
            letter-spacing: 0.5px;
        }

      
.dm-google-reviews {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    padding: 16px 20px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(139, 92, 246, 0.2);
    margin-bottom: 16px;
}

.dm-review-stars {
    display: flex;
    gap: 4px;
}

.dm-review-stars i {
    color: #ffc107;
    font-size: 18px;
}

.dm-review-rating {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.dm-rating-number {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
}

.dm-rating-out {
    color: #94a3b8;
    font-size: 0.9rem;
}

.dm-review-count {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 0.9rem;
}

.dm-review-count i {
    color: #4285f4;
    font-size: 20px;
}

.dm-review-count strong {
    color: #a78bfa;
}

.dm-trust-brands {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.dm-brand-tag {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.25);
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    color: #cbd5e1;
    font-weight: 500;
}


        /* Responsive Design */
        @media (max-width: 1024px) {
            .dm-hero-wrapper {
                padding: 40px 24px;
            }

            .dm-banner-inner {
                padding: 40px;
                flex-direction: column;
            }

            .dm-banner-content h1 {
                font-size: 2.5rem;
            }

            .dm-floating-card {
                display: none;
            }
               .dm-google-reviews {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
        }

        @media (max-width: 768px) {
            .dm-banner-inner {
                padding: 30px;
            }

            .dm-banner-content h1 {
                font-size: 2rem;
            }

            .dm-description {
                font-size: 1rem;
            }

            .dm-stats-row {
                gap: 20px;
            }

            .dm-stat-number {
                font-size: 1.5rem;
            }

            .dm-cta-group {
                flex-direction: column;
            }

            .dm-btn-primary, .dm-btn-secondary {
                justify-content: center;
            }
        }

        /* Scroll Animation */
        @keyframes dmSlideUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .dm-banner-card {
            animation: dmSlideUp 0.6s ease-out;
        }



        /* ======================================================== */
        /* ======================================================== */
        /* ======================================================== */
        /* ======================================================== */
        /* ======================================================== */
               /* Animated Background Elements */
        .proc-bg::before {
            content: '';
            position: fixed;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.03) 0%, transparent 50%);
            animation: procRotateBg 60s linear infinite;
            pointer-events: none;
            z-index: 0;
        }

        @keyframes procRotateBg {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .proc-section {
            max-width: 1400px;
            margin: 0 auto;
            padding: 80px 40px;
            position: relative;
            z-index: 1;
        }

        /* Section Header */
        .proc-section-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .proc-section-tag {
            display: inline-block;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            padding: 6px 16px;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.5px;
            margin-bottom: 20px;
            box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25);
            animation: procPulse 2s ease-in-out infinite;
            position: relative;
            overflow: hidden;
        }

        .proc-section-tag::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
            animation: procShimmer 3s infinite;
        }

        @keyframes procShimmer {
            100% { left: 100%; }
        }

        @keyframes procPulse {
            0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(99, 102, 241, 0.25); }
            50% { transform: scale(1.02); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.4); }
        }

        .proc-section-header h2 {
            font-size: 2.8rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e293b 0%, #2d3a4e 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 16px;
            position: relative;
            display: inline-block;
        }

        .proc-section-header h2::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6);
            border-radius: 3px;
            animation: procWidthExpand 1s ease-out;
        }

        @keyframes procWidthExpand {
            from { width: 0; opacity: 0; }
            to { width: 60px; opacity: 1; }
        }

        .proc-section-header p {
            font-size: 1.2rem;
            color: #5b6e8c;
            max-width: 600px;
            margin: 0 auto;
        }

        /* Process Grid */
        .proc-grid {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 24px;
            position: relative;
        }

        /* Process Card */
        .proc-card {
            flex: 1;
            min-width: 240px;
            background: white;
            border-radius: 28px;
            padding: 32px 24px;
            position: relative;
            transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
            border: 1px solid rgba(99, 102, 241, 0.1);
            overflow: hidden;
        }

        .proc-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7);
            transform: translateX(-100%);
            transition: transform 0.5s ease;
        }

        .proc-card:hover::before {
            transform: translateX(0);
        }

        .proc-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.05) 0%, transparent 70%);
            border-radius: 50%;
            pointer-events: none;
            transition: all 0.5s ease;
        }

        .proc-card:hover::after {
            width: 200px;
            height: 200px;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.1) 0%, transparent 70%);
        }

        .proc-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 24px 48px rgba(99, 102, 241, 0.12);
            border-color: rgba(99, 102, 241, 0.3);
        }

        /* Card Number */
        .proc-card-number {
            font-size: 4rem;
            font-weight: 800;
            background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            line-height: 1;
            margin-bottom: 16px;
            letter-spacing: -2px;
            transition: all 0.3s ease;
        }

        .proc-card:hover .proc-card-number {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            transform: scale(1.05);
            display: inline-block;
        }

        /* Icon */
        .proc-card-icon {
            width: 64px;
            height: 64px;
            background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
            border-radius: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 24px;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border: 1px solid rgba(99, 102, 241, 0.15);
            position: relative;
        }

        .proc-card:hover .proc-card-icon {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            transform: scale(1.05) rotate(5deg);
            border-color: transparent;
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
        }

        .proc-card:hover .proc-card-icon i {
            color: white;
            animation: procIconPop 0.3s ease-out;
        }

        @keyframes procIconPop {
            0% { transform: scale(1); }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); }
        }

        .proc-card-icon i {
            font-size: 28px;
            color: #6366f1;
            transition: all 0.3s ease;
        }

        /* Card Title */
        .proc-card-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            position: relative;
            display: inline-block;
        }

        .proc-card:hover .proc-card-title {
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Card Description */
        .proc-card-desc {
            color: #5b6e8c;
            line-height: 1.6;
            margin-bottom: 20px;
            font-size: 0.95rem;
            transition: color 0.3s ease;
        }

        .proc-card:hover .proc-card-desc {
            color: #334155;
        }

        /* Process Tags */
        .proc-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 16px;
            padding-top: 16px;
            border-top: 1px solid #eef2f6;
            transition: all 0.3s ease;
        }

        .proc-card:hover .proc-card-tags {
            border-top-color: rgba(99, 102, 241, 0.2);
        }

        .proc-card-tags span {
            font-size: 0.7rem;
            font-weight: 500;
            padding: 4px 10px;
            background: #f8fafc;
            color: #475569;
            border-radius: 30px;
            letter-spacing: 0.3px;
            transition: all 0.3s ease;
            cursor: default;
        }

        .proc-card:hover .proc-card-tags span {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
            color: #6366f1;
            transform: translateX(2px);
        }

        /* Connector Line (Desktop) */
        @media (min-width: 1024px) {
            .proc-grid {
                position: relative;
            }

            .proc-grid::before {
                content: '';
                position: absolute;
                top: 80px;
                left: 10%;
                right: 10%;
                height: 2px;
                background: linear-gradient(90deg, #6366f1, #8b5cf6, #a855f7, #6366f1);
                opacity: 0.3;
                z-index: 0;
                animation: procLineFlow 3s linear infinite;
                background-size: 200% 100%;
            }

            @keyframes procLineFlow {
                0% { background-position: 0% 0%; }
                100% { background-position: 200% 0%; }
            }
        }

        /* Responsive */
        @media (max-width: 1024px) {
            .proc-section {
                padding: 60px 24px;
            }

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

            .proc-card {
                min-width: calc(50% - 24px);
            }
        }

        @media (max-width: 768px) {
            .proc-card {
                min-width: 100%;
            }

            .proc-section-header h2 {
                font-size: 1.8rem;
            }

            .proc-section-header p {
                font-size: 1rem;
            }
        }

        /* Bottom CTA */
        .proc-cta {
            text-align: center;
            margin-top: 60px;
            padding: 40px 20px;
            background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
            border-radius: 32px;
            color: white;
            position: relative;
            overflow: hidden;
            transition: all 0.3s ease;
        }

        .proc-cta::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
            animation: procRotateCTA 20s linear infinite;
            pointer-events: none;
        }

        @keyframes procRotateCTA {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        .proc-cta:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
        }

        .proc-cta h3 {
            font-size: 1.8rem;
            font-weight: 600;
            margin-bottom: 12px;
            position: relative;
            z-index: 1;
            transition: all 0.3s ease;
        }

        .proc-cta:hover h3 {
            background: linear-gradient(135deg, #fff 0%, #a78bfa 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .proc-cta p {
            color: #94a3b8;
            margin-bottom: 24px;
            position: relative;
            z-index: 1;
        }

        .proc-cta-button {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
            color: white;
            padding: 14px 32px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 8px 20px rgba(99, 102, 241, 0.4);
            position: relative;
            z-index: 1;
            overflow: hidden;
        }

        .proc-cta-button::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.5s ease;
        }

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

        .proc-cta-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 12px 28px rgba(99, 102, 241, 0.5);
            gap: 16px;
        }

        .proc-cta-button i {
            font-size: 14px;
            transition: transform 0.3s ease;
        }

        .proc-cta-button:hover i {
            transform: translateX(4px);
        }

        /* Scroll Animation */
        @keyframes procFadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .proc-card {
            animation: procFadeInUp 0.6s ease-out backwards;
        }

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

        .proc-section-header {
            animation: procFadeInUp 0.6s ease-out;
        }

        .proc-cta {
            animation: procFadeInUp 0.6s ease-out 0.6s backwards;
        }


        /* ============================================ */
        /* ============================================ */
        /* ============================================ */
        /* ============================================ */
        /* ============================================ */
                /* Digital Transformation Section */
        .digital-section {
            position: relative;
            padding: 100px 40px;
            background: #0a0a0f;
            overflow: hidden;
        }

        /* Animated Background */
        .digital-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: 0;
        }

        .digital-orb {
            position: absolute;
            width: 500px;
            height: 500px;
            border-radius: 50%;
            filter: blur(100px);
            animation: floatOrb 20s ease-in-out infinite;
        }

        .digital-orb-1 {
            background: radial-gradient(circle, rgba(99, 102, 241, 0.12), transparent 70%);
            top: -150px;
            right: -150px;
        }

        .digital-orb-2 {
            background: radial-gradient(circle, rgba(236, 72, 153, 0.1), transparent 70%);
            bottom: -150px;
            left: -150px;
            animation-delay: -7s;
        }

        .digital-orb-3 {
            background: radial-gradient(circle, rgba(139, 92, 246, 0.08), transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 700px;
            height: 700px;
            animation: pulseOrb 10s ease-in-out infinite;
        }

        @keyframes floatOrb {
            0%, 100% {
                transform: translate(0, 0);
            }
            33% {
                transform: translate(-50px, 50px);
            }
            66% {
                transform: translate(50px, -50px);
            }
        }

        @keyframes pulseOrb {
            0%, 100% {
                transform: translate(-50%, -50%) scale(1);
                opacity: 0.4;
            }
            50% {
                transform: translate(-50%, -50%) scale(1.2);
                opacity: 0.7;
            }
        }

        /* Container */
        .digital-container {
            position: relative;
            z-index: 1;
            max-width: 1400px;
            margin: 0 auto;
        }

        /* Section Header */
        .digital-header {
            text-align: center;
            margin-bottom: 70px;
            animation: fadeInUp 0.8s ease-out;
        }

        .header-badge {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: rgba(99, 102, 241, 0.1);
            border: 1px solid rgba(139, 92, 246, 0.3);
            padding: 8px 24px;
            border-radius: 60px;
            margin-bottom: 24px;
            backdrop-filter: blur(10px);
        }

        .header-badge i {
            color: #8b5cf6;
            font-size: 14px;
        }

        .header-badge span {
            color: #c084fc;
            font-size: 0.85rem;
            font-weight: 500;
            letter-spacing: 0.5px;
        }

        .digital-header h2 {
            font-size: 3.2rem;
            font-weight: 800;
            background: linear-gradient(135deg, #ffffff 0%, #c084fc 50%, #ec489a 100%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 20px;
            animation: gradientShift 3s ease-in-out infinite;
        }

        @keyframes gradientShift {
            0%, 100% {
                background-size: 100% 100%;
            }
            50% {
                background-size: 200% 100%;
                background-position: right;
            }
        }

        .digital-header p {
            color: #9ca3af;
            font-size: 1.1rem;
            max-width: 650px;
            margin: 0 auto;
            line-height: 1.6;
        }

        /* 4 Points Grid */
        .points-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 30px;
            margin-bottom: 60px;
        }

        /* Point Card */
        .point-card {
            background: rgba(15, 23, 42, 0.6);
            backdrop-filter: blur(20px);
            border-radius: 28px;
            padding: 40px 28px;
            text-align: center;
            border: 1px solid rgba(139, 92, 246, 0.2);
            transition: all 0.4s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            animation: fadeInUp 0.6s ease-out backwards;
            position: relative;
            overflow: hidden;
        }

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

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

        .point-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.02));
            opacity: 0;
            transition: opacity 0.4s ease;
        }

        .point-card:hover::before {
            opacity: 1;
        }

        .point-card:hover {
            transform: translateY(-10px);
            border-color: rgba(139, 92, 246, 0.5);
            box-shadow: 0 25px 45px rgba(0, 0, 0, 0.3), 0 0 30px rgba(139, 92, 246, 0.1);
        }

        /* Card Icon */
        .point-icon {
            width: 80px;
            height: 80px;
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(139, 92, 246, 0.2));
            border-radius: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 28px;
            transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border: 1px solid rgba(139, 92, 246, 0.3);
        }

        .point-card:hover .point-icon {
            transform: rotate(5deg) scale(1.05);
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            border-color: transparent;
            box-shadow: 0 10px 25px rgba(99, 102, 241, 0.3);
        }

        .point-icon i {
            font-size: 36px;
            color: #8b5cf6;
            transition: all 0.3s ease;
        }

        .point-card:hover .point-icon i {
            color: white;
            transform: scale(1.1);
        }

        /* Card Number */
        .point-number {
            display: inline-block;
            font-size: 0.8rem;
            font-weight: 600;
            color: #8b5cf6;
            background: rgba(139, 92, 246, 0.15);
            padding: 4px 12px;
            border-radius: 30px;
            margin-bottom: 20px;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }

        .point-card:hover .point-number {
            background: rgba(139, 92, 246, 0.3);
            color: #c084fc;
        }

        /* Card Title */
        .point-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: white;
            margin-bottom: 16px;
            transition: all 0.3s ease;
        }

        .point-card:hover .point-title {
            background: linear-gradient(135deg, #ffffff, #c084fc);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        /* Card Description */
        .point-description {
            color: #9ca3af;
            line-height: 1.7;
            font-size: 0.95rem;
        }

        /* CTA Button */
        .digital-cta {
            text-align: center;
            margin-top: 40px;
            animation: fadeInUp 0.8s ease-out 0.5s backwards;
        }

        .transform-btn {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            color: white;
            padding: 16px 40px;
            border-radius: 60px;
            text-decoration: none;
            font-weight: 600;
            font-size: 1rem;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(99, 102, 241, 0.3);
        }

        .transform-btn:hover {
            transform: translateY(-3px);
            gap: 16px;
            box-shadow: 0 15px 35px rgba(99, 102, 241, 0.5);
        }

        /* Responsive */
        @media (max-width: 1200px) {
            .points-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 25px;
            }
        }

        @media (max-width: 768px) {
            .digital-section {
                padding: 60px 20px;
            }
            .digital-header h2 {
                font-size: 2rem;
            }
            .digital-header p {
                font-size: 1rem;
            }
            .points-grid {
                grid-template-columns: 1fr;
            }
            .point-card {
                padding: 32px 24px;
            }
            .point-title {
                font-size: 1.3rem;
            }
        }


        /* =============================================== */
        /* =============================================== */
        /* =============================================== */
        /* =============================================== */

          /* premium gradient background with subtle wave */
        .svc-bg-art {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -2;
            background: radial-gradient(circle at 10% 20%, rgba(220, 240, 255, 0.4), rgba(245, 248, 250, 0.9));
        }

        .svc-bg-art::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 40%;
            background: linear-gradient(135deg, rgba(30, 74, 118, 0.02), transparent);
            pointer-events: none;
        }

        .svc-services-section {
            max-width: 1440px;
            margin: 0 auto;
            padding: 5rem 2rem 7rem;
            position: relative;
        }

        /* header design */
        .svc-section-header {
            text-align: center;
            margin-bottom: 4rem;
        }

        .svc-section-header .svc-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            background: rgba(30, 74, 118, 0.12);
            backdrop-filter: blur(4px);
            padding: 0.45rem 1.3rem;
            border-radius: 100px;
            font-size: 0.8rem;
            font-weight: 600;
            color: #1e4a76;
            margin-bottom: 1.2rem;
            border: 1px solid rgba(30, 74, 118, 0.2);
        }

        .svc-section-header h2 {
            font-size: 3.2rem;
            font-weight: 800;
            background: linear-gradient(125deg, #0f2b3f, #1d5b8c, #2c5282);
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: -0.02em;
            line-height: 1.2;
            margin-bottom: 1rem;
        }

        .svc-section-header .svc-subhead {
            font-size: 1.2rem;
            color: #3a546d;
            max-width: 680px;
            margin: 0 auto;
            font-weight: 450;
        }

        /* 3 column grid */
        .svc-services-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            margin-top: 1.5rem;
        }

        /* card with image integration */
        .svc-service-card {
            background: #ffffff;
            border-radius: 1.8rem;
            overflow: hidden;
            transition: all 0.45s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08);
            border: 1px solid rgba(203, 213, 225, 0.5);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

        .svc-service-card:hover {
            transform: translateY(-12px);
            box-shadow: 0 30px 45px -18px rgba(0, 0, 0, 0.2);
            border-color: rgba(30, 74, 118, 0.3);
        }

        /* image container - stunning visual impact */
        .svc-card-image {
            position: relative;
            width: 100%;
            height: 250px;
            overflow: hidden;
            background: linear-gradient(145deg, #eef2f6, #e2e8f0);
        }

        .svc-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.4, 1.1);
        }

        .svc-service-card:hover .svc-card-image img {
            transform: scale(1.05);
        }

        /* gradient overlay for text contrast (optional elegance) */
        .svc-card-image::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50%;
            background: linear-gradient(to top, rgba(0,0,0,0.05), transparent);
            pointer-events: none;
        }

        .svc-card-content {
            padding: 1.6rem 1.8rem 1.8rem;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        /* header with icon + title */
        .svc-card-header {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            margin-bottom: 1.2rem;
        }

        .svc-icon-bg {
            width: 48px;
            height: 48px;
            background: linear-gradient(135deg, #eef2ff, #e4eaf7);
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            color: #1e5a8a;
            transition: all 0.3s;
        }

        .svc-service-card:hover .svc-icon-bg {
            background: linear-gradient(135deg, #1e4a76, #2c6e9e);
            color: white;
            transform: scale(0.96);
        }

        .svc-card-header h3 {
            font-size: 1.55rem;
            font-weight: 700;
            color: #0f2b3f;
            letter-spacing: -0.3px;
        }

        .svc-service-name {
            font-size: 1.2rem;
            font-weight: 700;
            color: #1f5379;
            margin-bottom: 0.6rem;
            display: inline-block;
            border-left: 3px solid #2c7eb6;
            padding-left: 0.7rem;
        }

        .svc-description {
            color: #334e68;
            font-size: 0.92rem;
            line-height: 1.55;
            margin-bottom: 1.4rem;
        }

        /* feature chips */
        .svc-feature-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.6rem;
            margin-bottom: 1.8rem;
        }

        .svc-feature-item {
            background: #f1f5f9;
            border-radius: 40px;
            padding: 0.35rem 1rem;
            font-size: 0.75rem;
            font-weight: 600;
            color: #1c577b;
            display: inline-flex;
            align-items: center;
            gap: 5px;
            transition: all 0.2s;
        }

        .svc-feature-item i {
            font-size: 0.7rem;
            color: #2c7eb6;
        }

        .svc-btn-view {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            background: transparent;
            border: 1.5px solid #cbdde9;
            color: #1e5a8c;
            font-weight: 600;
            font-size: 0.85rem;
            padding: 0.7rem 1.3rem;
            border-radius: 60px;
            text-decoration: none;
            transition: all 0.3s ease;
            width: fit-content;
            margin-top: auto;
        }

        .svc-btn-view i {
            transition: transform 0.25s;
            font-size: 0.75rem;
        }

        .svc-btn-view:hover {
            background: #1e4a76;
            border-color: #1e4a76;
            color: white;
            gap: 14px;
        }

        .svc-btn-view:hover i {
            transform: translateX(5px);
        }

        /* responsive design */
        @media (max-width: 1000px) {
            .svc-services-grid {
                gap: 1.5rem;
            }
            .svc-card-header h3 {
                font-size: 1.4rem;
            }
            .svc-card-content {
                padding: 1.4rem;
            }
            .svc-card-image {
                height: 180px;
            }
        }

        @media (max-width: 850px) {
            .svc-services-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .svc-section-header h2 {
                font-size: 2.5rem;
            }
        }

        @media (max-width: 580px) {
            .svc-services-section {
                padding: 3rem 1.2rem;
            }
            .svc-services-grid {
                grid-template-columns: 1fr;
            }
            .svc-card-image {
                height: 200px;
            }
            .svc-section-header h2 {
                font-size: 2rem;
            }
        }

        /* subtle animation delays */
        [data-aos] {
            transition-timing-function: cubic-bezier(0.2, 0.85, 0.4, 1);
        }









































        /* ========================================================== */
        /* -------------------Footer--------------------------------- */
        /* ========================================================== */
            @import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,300;14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

        /* preview content */
        .preview {
            flex: 1;
            max-width: 1300px;
            margin: 0 auto;
            padding: 6rem 3rem;
            text-align: center;
        }

        .preview h1 {
            font-size: 4.2rem;
            font-weight: 700;
            background: linear-gradient(135deg, #1e2b4f, #2d4480);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            letter-spacing: -0.02em;
            margin-bottom: 1.5rem;
        }

        .preview .pill {
            display: inline-block;
            background: white;
            padding: 0.6rem 2rem;
            border-radius: 60px;
            box-shadow: 0 10px 30px -10px rgba(0, 70, 200, 0.2);
            font-weight: 500;
            color: #1e3a8a;
            border: 1px solid rgba(0, 100, 255, 0.2);
        }

        /* ===== FOOTER – IMPROVED LOGO SPACING ===== */
        .footer-rounded {
            background: #0f1625;
            /* border-radius: 48px 48px 0 0; */
            box-shadow: 0 -30px 50px -20px rgba(0, 20, 50, 0.8), 0 0 0 1px rgba(85, 140, 255, 0.25) inset;
            position: relative;
            padding: 3.5rem 3rem 2rem;
            /* margin-top: 2rem; */
            overflow: hidden;
            animation: footerRise 1s ease-out;
            color: #eef3fc;
        }

        @keyframes footerRise {
            0% {
                transform: translateY(50px);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .footer-rounded::before {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 48px 48px 0 0;
            background: radial-gradient(ellipse at 20% 80%, rgba(0, 150, 255, 0.15) 0%, transparent 60%),
                radial-gradient(ellipse at 90% 30%, rgba(100, 70, 255, 0.12) 0%, transparent 70%);
            pointer-events: none;
            animation: bgPulse 8s infinite alternate;
        }

        @keyframes bgPulse {
            0% {
                opacity: 0.4;
                transform: scale(1);
            }

            100% {
                opacity: 1;
                transform: scale(1.1);
            }
        }

        .particle-field {
            position: absolute;
            inset: 0;
            pointer-events: none;
            z-index: 2;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            width: 4px;
            height: 4px;
            background: rgba(100, 160, 255, 0.4);
            border-radius: 50%;
            animation: floatParticle 10s infinite linear;
        }

        @keyframes floatParticle {
            0% {
                transform: translateY(0) translateX(0);
                opacity: 0;
            }

            10% {
                opacity: 0.8;
            }

            90% {
                opacity: 0.6;
            }

            100% {
                transform: translateY(-300px) translateX(100px);
                opacity: 0;
            }
        }

        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
            position: relative;
            z-index: 5;
        }

        .soft-rule {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 3rem;
            animation: ruleGlow 4s infinite alternate;
        }

        @keyframes ruleGlow {
            0% {
                filter: drop-shadow(0 0 2px #2f5eff);
            }

            100% {
                filter: drop-shadow(0 0 10px #7fa3ff);
            }
        }

        .soft-rule .line-round {
            flex: 1;
            height: 4px;
            background: linear-gradient(90deg, #2f4172, #6080dd, #2f4172);
            border-radius: 40px;
            opacity: 0.7;
            animation: lineShimmer 3s infinite;
        }

        @keyframes lineShimmer {
            0% {
                background-position: 0% 50%;
            }

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

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

        .soft-rule i {
            color: #6080dd;
            background: #1b2642;
            padding: 0.6rem;
            border-radius: 50%;
            font-size: 1.2rem;
            box-shadow: 0 4px 15px #1e3f7a;
            animation: rotateIcon 6s infinite;
        }

        @keyframes rotateIcon {

            0%,
            100% {
                transform: rotate(0deg);
            }

            25% {
                transform: rotate(10deg);
            }

            75% {
                transform: rotate(-10deg);
            }
        }

        /* MAIN GRID – FOUR COLUMNS with better proportions for logo */
        .footer-grid {
            display: grid;
            grid-template-columns: 2fr 1.3fr 1.3fr 2.1fr;
            /* wider first and last columns */
            gap: 2rem 2rem;
            margin-bottom: 3.5rem;
        }

        /* brand card - improved logo spacing */
        .brand-round {
            background: #131d32;
            border-radius: 36px;
            padding: 2rem 1.8rem 2.2rem;
            border: 1px solid #2e4580;
            box-shadow: 0 20px 30px -16px #010314;
            transition: all 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2);
            animation: cardFloat 5s infinite alternate;
            position: relative;
            overflow: hidden;
        }

        @keyframes cardFloat {
            0% {
                transform: translateY(0);
            }

            100% {
                transform: translateY(-8px);
            }
        }

        .brand-round::after {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
            transition: left 0.8s;
        }

        .brand-round:hover::after {
            left: 100%;
        }

        .brand-round:hover {
            transform: translateY(-12px) scale(1.02);
            box-shadow: 0 30px 50px -18px #3f6aff;
            border-color: #5b7df0;
        }

        /* IMPROVED LOGO CONTAINER - better spacing */
        .logo-round {
            display: flex;
            align-items: center;
            gap: 1rem;
            margin-bottom: 1.8rem;
            flex-wrap: wrap;
            /* allows wrapping on very small screens */
        }

        .icon-bubble {
            width: 70px;
            /* slightly larger */
            height: 70px;
            background: linear-gradient(135deg, #3065d5, #8a5cff);
            border-radius: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 12px 22px -8px #1d49b0;
            animation: bubblePulse 3s infinite alternate;
            flex-shrink: 0;
            /* prevents icon from shrinking */
        }

        @keyframes bubblePulse {
            0% {
                box-shadow: 0 12px 22px -8px #1d49b0;
            }

            100% {
                box-shadow: 0 18px 35px -8px #5f8aff;
            }
        }

        .icon-bubble i {
            font-size: 2.4rem;
            /* larger icon */
            color: white;
            animation: iconSpin 10s infinite linear;
        }

        @keyframes iconSpin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        .desc {
            color: #b8c7f0;
            line-height: 1.7;
            margin-bottom: 2rem;
            font-size: 0.98rem;
        }

        .pill-cta {
            display: inline-flex;
            align-items: center;
            gap: 0.8rem;
            background: #1f2d4e;
            border: 1.5px solid #5275dd;
            border-radius: 60px;
            padding: 0.7rem 1.8rem;
            font-weight: 600;
            color: #d6e4ff;
            text-decoration: none;
            transition: 0.3s;
            box-shadow: 0 6px 14px #030613;
            position: relative;
            overflow: hidden;
        }

        .pill-cta::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.2);
            transform: translate(-50%, -50%);
            transition: width 0.6s, height 0.6s;
        }

        .pill-cta:hover::before {
            width: 300px;
            height: 300px;
        }

        .pill-cta i {
            font-size: 0.9rem;
            background: #2c3f6e;
            border-radius: 50%;
            padding: 0.3rem;
            color: white;
            transition: transform 0.3s;
        }

        .pill-cta:hover {
            background: #2e4bb7;
            color: white;
            border-color: white;
            transform: translateY(-3px);
            box-shadow: 0 14px 28px -8px #2640a0;
        }

        .pill-cta:hover i {
            transform: translateX(5px) rotate(45deg);
        }

        /* SOCIAL MEDIA SECTION - NEW STYLES */
        .social-section {
            margin-top: 1.8rem;
            padding-top: 1.5rem;
            border-top: 1px solid rgba(82, 117, 221, 0.3);
        }

        .social-label {
            font-size: 0.9rem;
            font-weight: 500;
            color: #9bb3ff;
            letter-spacing: 0.5px;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            gap: 0.6rem;
        }

        .social-label i {
            font-size: 1rem;
            color: #6080dd;
        }

        .social-icons {
            display: flex;
            gap: 1rem;
            flex-wrap: wrap;
            align-items: center;
        }

        .social-icon-link {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background: #1a2745;
            border-radius: 50%;
            color: #b8c7f0;
            font-size: 1.3rem;
            transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
            border: 1px solid #2f4580;
            text-decoration: none;
            position: relative;
            overflow: hidden;
        }

        .social-icon-link::before {
            content: '';
            position: absolute;
            inset: 0;
            background: radial-gradient(circle at center, rgba(90, 140, 255, 0.3), transparent);
            opacity: 0;
            transition: opacity 0.3s;
        }

        .social-icon-link:hover {
            transform: translateY(-5px) scale(1.1);
            color: white;
            border-color: #7f9fff;
            box-shadow: 0 8px 20px -5px #2f5eff;
        }

        .social-icon-link:hover::before {
            opacity: 1;
        }

        /* individual hover colors */
        .social-icon-link:hover .fa-facebook-f {
            color: #3b82f6;
        }

        .social-icon-link:hover .fa-twitter {
            color: #1da1f2;
        }

        .social-icon-link:hover .fa-instagram {
            color: #e4405f;
        }

        .social-icon-link:hover .fa-linkedin-in {
            color: #0077b5;
        }

        .social-icon-link:hover .fa-youtube {
            color: #ff0000;
        }

        .col-title-round {
            font-size: 1.2rem;
            font-weight: 700;
            color: #d2e0ff;
            margin-bottom: 1.6rem;
            padding-bottom: 0.8rem;
            position: relative;
            display: inline-block;
        }

        .col-title-round::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 60%;
            height: 5px;
            background: linear-gradient(90deg, #5275dd, #a07cff);
            border-radius: 40px;
            animation: underlinePulse 2s infinite;
        }

        @keyframes underlinePulse {

            0%,
            100% {
                width: 60%;
                opacity: 0.7;
            }

            50% {
                width: 80%;
                opacity: 1;
            }
        }

        /* link list */
        .nav-list-round {
            list-style: none;
        }

        .nav-list-round li {
            margin-bottom: 0.8rem;
            animation: slideIn 0.5s ease-out forwards;
            opacity: 0;
            transform: translateX(-10px);
        }

        .nav-list-round li:nth-child(1) {
            animation-delay: 0.05s;
        }

        .nav-list-round li:nth-child(2) {
            animation-delay: 0.1s;
        }

        .nav-list-round li:nth-child(3) {
            animation-delay: 0.15s;
        }

        .nav-list-round li:nth-child(4) {
            animation-delay: 0.2s;
        }

        .nav-list-round li:nth-child(5) {
            animation-delay: 0.25s;
        }

        .nav-list-round li:nth-child(6) {
            animation-delay: 0.3s;
        }

        .nav-list-round li:nth-child(7) {
            animation-delay: 0.35s;
        }

        .nav-list-round li:nth-child(8) {
            animation-delay: 0.4s;
        }

        @keyframes slideIn {
            to {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .nav-list-round a {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            color: #bfd0f5;
            font-weight: 500;
            transition: 0.3s;
            background: transparent;
            padding: 0.3rem 0.8rem 0.3rem 0.4rem;
            border-radius: 40px;
            font-size: 0.95rem;
        }

        .nav-list-round a i {
            color: #6080dd;
            font-size: 0.8rem;
            background: #1d2b48;
            width: 24px;
            height: 24px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: 0.3s;
        }

        .nav-list-round a:hover {
            background: #1f3055;
            color: white;
            transform: translateX(8px);
        }

        .nav-list-round a:hover i {
            background: #5275dd;
            color: white;
            transform: rotate(360deg) scale(1.1);
        }

        /* COMBINED CONTACT & NEWSLETTER COLUMN */
        .contact-newsletter-column {
            background: #111c30;
            border-radius: 36px;
            padding: 2rem 1.8rem;
            border: 1px solid #3f5690;
            box-shadow: 0 20px 30px -16px #010314;
            transition: all 0.3s ease;
        }

        .contact-newsletter-column:hover {
            transform: translateY(-6px);
            box-shadow: 0 30px 40px -18px #3f6aff;
            border-color: #6080dd;
        }

        /* contact items */
        .combined-contact-item {
            display: flex;
            align-items: center;
            gap: 1rem;
            background: #1a2745;
            border-radius: 50px;
            padding: 0.8rem 1.2rem;
            margin-bottom: 1rem;
            border: 1px solid #2f4580;
            transition: 0.3s;
        }

        .combined-contact-item i {
            width: 38px;
            height: 38px;
            background: #1f2f55;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #9bbaff;
            font-size: 1.1rem;
            transition: 0.3s;
            flex-shrink: 0;
        }

        .combined-contact-item:hover {
            background: #1f3055;
            border-color: #6080dd;
            transform: translateX(6px);
        }

        .combined-contact-item:hover i {
            background: #3560db;
            color: white;
            transform: rotate(360deg);
        }

        .combined-contact-item span,
        .combined-contact-item a {
            color: white;
            text-decoration: none;
            font-weight: 500;
            word-break: break-word;
        }

        .combined-contact-item a:hover {
            text-decoration: underline;
        }

        /* newsletter section */
        .combined-newsletter {
            margin-top: 2rem;
            padding-top: 1rem;
            border-top: 1px solid #2f4580;
        }

        .combined-newsletter p {
            color: #b8c7f0;
            margin-bottom: 1.5rem;
            line-height: 1.6;
        }

        .combined-input-group {
            display: flex;
            background: #1c2945;
            border-radius: 60px;
            padding: 0.4rem;
            border: 1px solid #3e5690;
            transition: 0.3s;
        }

        .combined-input-group:focus-within {
            border-color: #7f9fff;
            box-shadow: 0 0 20px #3f6aff;
        }

        .combined-input-group input {
            flex: 1;
            border: none;
            padding: 0.8rem 1.2rem;
            border-radius: 60px;
            font-size: 0.95rem;
            outline: none;
            background: transparent;
            color: white;
            min-width: 0;
            /* allows input to shrink */
        }

        .combined-input-group input::placeholder {
            color: #8da3dd;
        }

        .combined-input-group button {
            background: #3560db;
            border: none;
            border-radius: 60px;
            padding: 0.7rem 1.5rem;
            color: white;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: 0.3s;
            white-space: nowrap;
        }

        .combined-input-group button:hover {
            background: #4c7cff;
            transform: scale(1.05);
            box-shadow: 0 0 25px #5275dd;
        }

        /* bottom bar */
        .footer-bottom-round {
            margin-top: 2rem;
            padding: 2rem 2rem 1rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            gap: 2rem;
            border-top: 2px solid #263968;
            border-radius: 80px 80px 0 0;
            background: #0d1424;
            animation: bottomGlow 4s infinite alternate;
        }

        @keyframes bottomGlow {
            0% {
                box-shadow: 0 -5px 20px -10px #2f5eff;
            }

            100% {
                box-shadow: 0 -10px 30px -5px #5f8aff;
            }
        }

        .copyright-round {
            color: #b2c8ff;
            font-weight: 500;
            animation: textPulse 3s infinite;
        }

        @keyframes textPulse {

            0%,
            100% {
                opacity: 0.9;
            }

            50% {
                opacity: 1;
                text-shadow: 0 0 5px #7f9fff;
            }
        }

        .legal-round a {
            color: #b8ceff;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.95rem;
            padding: 0.3rem 1rem;
            border-radius: 40px;
            background: #1f2f55;
            transition: 0.3s;
            display: inline-block;
            margin-left: 0.5rem;
        }

        .legal-round a:hover {
            background: #3560db;
            color: white;
            transform: translateY(-2px) scale(1.05);
            box-shadow: 0 10px 20px -8px #3f6aff;
        }

        /* responsive adjustments */
        @media (max-width: 1100px) {
            .footer-grid {
                grid-template-columns: 1.8fr 1.2fr 1.2fr 1.8fr;
                gap: 1.5rem;
            }
        }

        @media (max-width: 900px) {
            .footer-grid {
                grid-template-columns: 1fr 1fr;
                gap: 2rem;
            }

            .brand-round {
                grid-column: span 2;
            }

            .contact-newsletter-column {
                grid-column: span 2;
            }

            .logo-round {
                flex-wrap: nowrap;
            }
        }

        @media (max-width: 550px) {
            .footer-grid {
                grid-template-columns: 1fr;
            }

            .brand-round,
            .contact-newsletter-column {
                grid-column: auto;
            }

            .footer-bottom-round {
                flex-direction: column;
                text-align: center;
            }

            .legal-round {
                justify-content: center;
            }

            .logo-round {
                flex-wrap: wrap;
                justify-content: center;
                text-align: center;
            }

            .social-icons {
                justify-content: center;
            }
        }

        .combined-input-group button.success {
            background: #1f8f4a;
        }






        /* ================================================== */
        /* -----------------Contact section ----------------- */
        /* ================================================== */
          /* TS CTA Section - Renamed classes with ts- prefix */
        .ts-cta-wrapper {
            background: var(--ts-grad-dark);
            padding: 100px 0;
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .ts-cta-pattern-icon {
            position: absolute;
            opacity: 0.05;
            font-size: 300px;
            color: white;
            z-index: 0;
        }

        .ts-cta-pattern-1 {
            top: -50px;
            left: 10%;
        }

        .ts-cta-pattern-2 {
            bottom: -100px;
            right: 15%;
        }

        .ts-cta-main-title {
            font-family: 'Montserrat', sans-serif;
            font-weight: 800;
            margin-bottom: 1.5rem;
            font-size: 3rem;
            position: relative;
            z-index: 1;
        }

        .ts-cta-description {
            font-size: 1.3rem;
            margin-bottom: 2.5rem;
            max-width: 700px;
            margin-left: auto;
            margin-right: auto;
            opacity: 0.9;
            position: relative;
            z-index: 1;
        }

        .ts-btn-primary {
            background: var(--ts-grad-secondary);
            border: none;
            padding: 15px 35px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
            box-shadow: 0 10px 20px rgba(255, 107, 107, 0.3);
            position: relative;
            overflow: hidden;
            z-index: 1;
            display: inline-block;
            text-decoration: none;
            color: white;
        }

        .ts-btn-primary:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: var(--ts-grad-primary);
            transition: all 0.5s;
            z-index: -1;
        }

        .ts-btn-primary:hover:before {
            width: 100%;
        }

        .ts-btn-primary:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 25px rgba(255, 107, 107, 0.4);
            color: white;
        }

        .ts-btn-outline {
            border: 2px solid white;
            color: white;
            background: transparent;
            padding: 13px 32px;
            border-radius: 50px;
            font-weight: 600;
            transition: all 0.3s;
            position: relative;
            overflow: hidden;
            z-index: 1;
            display: inline-block;
            text-decoration: none;
        }

        .ts-btn-outline:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 0%;
            height: 100%;
            background: white;
            transition: all 0.5s;
            z-index: -1;
        }

        .ts-btn-outline:hover:before {
            width: 100%;
        }

        .ts-btn-outline:hover {
            color: var(--ts-color-primary);
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .ts-social-container {
            display: flex;
            justify-content: center;
            margin-top: 40px;
            position: relative;
            z-index: 1;
        }

        .ts-social-item {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: white;
            color: var(--ts-color-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 10px;
            font-size: 1.3rem;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            text-decoration: none;
        }

        .ts-social-item:hover {
            transform: translateY(-5px) rotate(10deg);
            background: var(--ts-grad-primary);
            color: white;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }

        @media (max-width: 768px) {
            .ts-cta-wrapper {
                padding: 70px 20px;
            }
            .ts-cta-main-title {
                font-size: 2.5rem;
            }
            .ts-cta-description {
                font-size: 1.1rem;
                padding: 0 20px;
            }
            .ts-btn-primary, .ts-btn-outline {
                padding: 12px 28px;
                font-size: 0.9rem;
            }
            .ts-social-item {
                width: 40px;
                height: 40px;
                font-size: 1rem;
                margin: 0 8px;
            }
        }

        @media (max-width: 480px) {
            .ts-cta-main-title {
                font-size: 2rem;
            }
            .ts-cta-buttons-group {
                display: flex;
                flex-direction: column;
                gap: 15px;
                align-items: center;
            }
            .ts-btn-primary, .ts-btn-outline {
                width: 80%;
                text-align: center;
            }
        }


        /* .About Us Page  */
                :root {
            --ts-about-primary: #0066ff;
            --ts-about-primary-dark: #0055dd;
            --ts-about-primary-light: rgba(0, 102, 255, 0.1);
            --ts-about-primary-extra-light: rgba(0, 102, 255, 0.05);
            --ts-about-secondary: #6c757d;
            --ts-about-light: #f8f9fa;
            --ts-about-dark: #212529;
            --ts-about-dark-light: #495057;
            --ts-about-success: #28a745;
            --ts-about-gradient: linear-gradient(135deg, var(--ts-about-primary) 0%, #003366 100%);
            --ts-about-gradient-light: linear-gradient(135deg, rgba(0, 102, 255, 0.8) 0%, rgba(0, 51, 102, 0.8) 100%);
            --ts-about-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            --ts-about-shadow-md: 0 10px 15px rgba(0, 0, 0, 0.1);
            --ts-about-shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.15);
            --ts-about-shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);
            --ts-about-transition: all 0.3s ease;
            --ts-about-transition-slow: all 0.6s ease;
            --ts-about-border-radius: 8px;
            --ts-about-border-radius-lg: 16px;
            --ts-about-border-radius-xl: 24px;
        }


   
       #ts-about-main-content {
   
            background-color: #f5f7fa;
            color: var(--ts-about-dark);
        
        }

     

        .ts-about-section {
            padding: 100px 0px 50px 0px;
            position: relative;
        }

        .ts-about-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* Hero Section */
        .ts-about-hero {
            background: var(--ts-about-gradient);
            padding: 120px 0 150px;
            color: white;
            height: 50%;
            position: relative;
            overflow: hidden;
            clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
            margin-bottom: 50px;
            text-align: center;
        }

        .ts-about-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('https://images.unsplash.com/photo-1517245386807-bb43f82c33c4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80') center/cover;
            opacity: 0.15;
            animation: tsAboutGrain 8s steps(10) infinite;
        }

        .ts-about-hero-content {
            position: relative;
            z-index: 3;
            max-width: 800px;
            margin: 0 auto;
        }

        .ts-about-hero-title {
            font-size: 3.5rem;
            margin-bottom: 25px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
            animation: tsAboutFadeInDown 0.8s ease-out;
        }

        .ts-about-hero-subtitle {
            font-size: 1.3rem;
            margin-bottom: 40px;
            opacity: 0.9;
            animation: tsAboutFadeIn 1s ease-out 0.3s both;
        }

        .ts-about-floating-shape {
            position: absolute;
            border-radius: 50%;
            opacity: 0.1;
            z-index: 1;
            animation: tsAboutFloat 15s ease-in-out infinite;
        }

        .ts-about-shape-1 {
            width: 300px;
            height: 300px;
            background: var(--ts-about-primary);
            top: -150px;
            right: -150px;
        }

        .ts-about-shape-2 {
            width: 200px;
            height: 200px;
            background: var(--ts-about-primary);
            bottom: -100px;
            left: -100px;
            animation: tsAboutFloat 12s ease-in-out infinite reverse;
        }

        .ts-about-vision-mission {
            background: linear-gradient(145deg, #ffffff 0%, #f2f6fe 100%);
            padding: 80px 0;
            position: relative;
            overflow: hidden;
        }

        .ts-about-vision-mission::before {
            content: '';
            position: absolute;
            inset: 0;
            background: url('data:image/svg+xml;utf8,<svg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"><path d="M30 5 L55 30 L30 55 L5 30 Z" fill="none" stroke="%230066ff" stroke-width="0.8" opacity="0.15"/></svg>');
            background-size: 80px 80px;
            z-index: 0;
        }

        .ts-about-vm-grid {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
            position: relative;
            z-index: 2;
        }

        .ts-about-vm-card {
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(8px);
            border-radius: var(--ts-about-border-radius-xl);
            padding: 50px 35px;
            box-shadow: var(--ts-about-shadow-xl);
            border: 1px solid rgba(0, 102, 255, 0.2);
            transition: var(--ts-about-transition);
            position: relative;
            overflow: hidden;
        }

        .ts-about-vm-card:hover {
            transform: translateY(-15px);
            box-shadow: 0 30px 50px rgba(0, 102, 255, 0.25);
            border-color: var(--ts-about-primary);
        }

        .ts-about-vm-card::after {
            content: '';
            position: absolute;
            top: -30px;
            right: -30px;
            width: 150px;
            height: 150px;
            background: var(--ts-about-primary-light);
            border-radius: 50%;
            z-index: -1;
            transition: var(--ts-about-transition);
        }

        .ts-about-vm-card:hover::after {
            transform: scale(2);
            opacity: 0.15;
        }

        .ts-about-vm-icon {
            font-size: 3.8rem;
            color: var(--ts-about-primary);
            margin-bottom: 25px;
            display: inline-block;
            background: var(--ts-about-primary-extra-light);
            padding: 18px;
            border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            animation: tsAboutMorph 8s ease-in-out infinite;
        }

        @keyframes tsAboutMorph {
            0% {
                border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            }

            50% {
                border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
            }

            100% {
                border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
            }
        }

        .ts-about-vm-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            background: var(--ts-about-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .ts-about-vm-text {
            font-size: 1.18rem;
            color: var(--ts-about-dark-light);
            line-height: 1.7;
        }

        .ts-about-vm-highlight {
            font-weight: 600;
            color: var(--ts-about-primary);
        }

        @media (max-width: 768px) {
            .ts-about-vm-grid {
                grid-template-columns: 1fr;
            }
        }

        /* ===== REDESIGNED ATTRACTIVE CORE VALUES SECTION ===== */
        .ts-about-core-values {
            background: linear-gradient(145deg, #0b1425 0%, #1b2a41 100%);
            padding: 100px 0 120px;
            position: relative;
            isolation: isolate;
            overflow: hidden;
        }

        /* Animated mesh gradient background */
        .ts-about-core-values::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 20% 30%, rgba(0, 102, 255, 0.25) 0%, transparent 40%),
                radial-gradient(circle at 80% 70%, rgba(100, 150, 255, 0.2) 0%, transparent 45%),
                repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0px, rgba(255, 255, 255, 0.02) 2px, transparent 2px, transparent 8px);
            z-index: 0;
        }

        /* floating orbs */
        .ts-about-core-values::after {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(0, 102, 255, 0.15) 0%, transparent 70%);
            top: -100px;
            right: -100px;
            border-radius: 50%;
            animation: tsAboutFloatOrb 18s infinite alternate ease-in-out;
            z-index: 0;
        }

        @keyframes tsAboutFloatOrb {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.5;
            }

            100% {
                transform: translate(-80px, 80px) scale(1.3);
                opacity: 0.8;
            }
        }

        .ts-about-values-header {
            text-align: center;
            margin-bottom: 70px;
            position: relative;
            z-index: 5;
        }

        .ts-about-values-header h2 {
            font-size: 3.5rem;
            background: linear-gradient(135deg, #ffffff, #b0d0ff, #ffffff);
            background-size: 300% auto;
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: tsAboutShimmer 6s linear infinite;
            display: inline-block;
            letter-spacing: 1px;
            text-shadow: 0 0 15px rgba(0, 102, 255, 0.5);
        }

        @keyframes tsAboutShimmer {
            0% {
                background-position: 0% center;
            }

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

            100% {
                background-position: 0% center;
            }
        }

        .ts-about-values-header p {
            font-size: 1.4rem;
            color: #b4c8e8;
            max-width: 700px;
            margin: 20px auto 0;
            font-weight: 300;
            text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
        }

        .ts-about-values-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
            gap: 40px;
            max-width: 1300px;
            margin: 0 auto;
            padding: 0 30px;
            position: relative;
            z-index: 5;
        }

        .ts-about-value-card {
            background: rgba(20, 30, 45, 0.6);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 50px 20px 50px 20px;
            padding: 50px 30px 45px;
            box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(0, 102, 255, 0.2) inset;
            transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
            position: relative;
            overflow: hidden;
            text-align: center;
            z-index: 2;
        }

        .ts-about-value-card::before {
            content: '';
            position: absolute;
            inset: -2px;
            background: linear-gradient(115deg, transparent 30%, #0066ff, #aaccff, #0066ff, transparent 70%);
            background-size: 300% auto;
            opacity: 0;
            transition: opacity 0.6s;
            z-index: -2;
            border-radius: inherit;
        }

        .ts-about-value-card::after {
            content: '';
            position: absolute;
            inset: 1px;
            background: rgba(15, 25, 40, 0.8);
            backdrop-filter: blur(12px);
            border-radius: inherit;
            z-index: -1;
        }

        .ts-about-value-card:hover::before {
            opacity: 1;
            animation: tsAboutBorderRotate 3s linear infinite;
        }

        @keyframes tsAboutBorderRotate {
            0% {
                background-position: 0% 50%;
            }

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

        .ts-about-value-card:hover {
            transform: translateY(-20px) scale(1.02);
            box-shadow: 0 40px 70px -10px #0066ff66;
            border-color: transparent;
        }

        .ts-about-value-icon {
            width: 120px;
            height: 120px;
            background: linear-gradient(145deg, #102b44, #021222);
            border-radius: 40% 60% 30% 70% / 50% 40% 60% 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            font-size: 4rem;
            color: #8fc5ff;
            border: 2px solid rgba(0, 102, 255, 0.5);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(0, 102, 255, 0.15);
            transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            z-index: 3;
        }

        .ts-about-value-card:hover .ts-about-value-icon {
            border-radius: 60% 40% 70% 30% / 40% 60% 40% 60%;
            background: linear-gradient(145deg, #0066ff, #003399);
            color: white;
            border-color: white;
            box-shadow: 0 25px 40px #0066ff, 0 0 0 10px rgba(0, 102, 255, 0.3);
            transform: scale(1.15) rotate(720deg);
        }

        .ts-about-value-title {
            font-size: 2.3rem;
            margin-bottom: 20px;
            color: white;
            text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8);
            position: relative;
            display: inline-block;
            background: linear-gradient(135deg, #fff, #cfdfff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .ts-about-value-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 20%;
            width: 60%;
            height: 3px;
            background: linear-gradient(90deg, transparent, #0066ff, #80b3ff, #0066ff, transparent);
            border-radius: 3px;
            transition: width 0.5s, left 0.5s;
            opacity: 0.7;
        }

        .ts-about-value-card:hover .ts-about-value-title::after {
            width: 80%;
            left: 10%;
            background: linear-gradient(90deg, #80b3ff, #ffffff, #80b3ff);
        }

        .ts-about-value-desc {
            color: #d0def0;
            line-height: 1.8;
            font-size: 1.1rem;
            text-shadow: 0 1px 3px black;
            position: relative;
            z-index: 5;
            font-weight: 400;
        }

        /* rest of your existing styles (preserved unchanged) */
        .ts-about-intro {
            text-align: center;
            margin: 100px auto;
            max-width: 800px;
        }

        .ts-about-intro h2 {
            font-size: 2.8rem;
            margin-bottom: 25px;
            color: var(--ts-about-primary);
            display: inline-block;
            position: relative;
        }

        .ts-about-intro h2::after {
            content: '';
            position: absolute;
            bottom: -15px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: var(--ts-about-primary);
            border-radius: 2px;
        }

        .ts-about-intro p {
            font-size: 1.2rem;
            color: var(--ts-about-secondary);
            line-height: 1.8;
        }

        .ts-about-about-section {
            padding: 5rem 0;
            background-color: rgba(255, 255, 255, 0.9);
            position: relative;
        }

        .ts-about-about-section .ts-about-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4rem;
            align-items: center;
        }

        .ts-about-image-container {
            position: relative;
            z-index: 1;
        }

        .ts-about-image {
            position: relative;
            border-radius: var(--ts-about-border-radius-xl);
            overflow: hidden;
            box-shadow: var(--ts-about-shadow-xl);
            transition: var(--ts-about-transition-slow);
            transform: perspective(1000px) rotateY(-5deg);
        }

        .ts-about-image img {
            width: 100%;
            height: auto;
            display: block;
            transition: var(--ts-about-transition-slow);
        }

        .ts-about-image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--ts-about-gradient);
            opacity: 0.1;
            mix-blend-mode: multiply;
            transition: var(--ts-about-transition);
        }

        .ts-about-image-container:hover .ts-about-image {
            transform: perspective(1000px) rotateY(0deg);
        }

        .ts-about-about-floating-shape {
            position: absolute;
            bottom: -2rem;
            right: -2rem;
            width: 200px;
            height: 200px;
            background: var(--ts-about-gradient);
            border-radius: var(--ts-about-border-radius-lg);
            z-index: -1;
            animation: tsAboutFloat 6s ease-in-out infinite;
        }

        .ts-about-label {
            display: inline-block;
            color: var(--ts-about-primary);
            font-weight: 600;
            margin-bottom: 1rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        .ts-about-title {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            color: var(--ts-about-dark);
        }

        .ts-about-title .ts-about-highlight {
            color: var(--ts-about-primary);
        }

        .ts-about-description {
            color: var(--ts-about-dark-light);
            margin-bottom: 2rem;
            line-height: 1.7;
            font-size: 1.1rem;
        }

        .ts-about-features {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 1.5rem;
            margin-bottom: 2.5rem;
        }

        .ts-about-feature-item {
            display: flex;
            gap: 1rem;
            align-items: flex-start;
        }

        .ts-about-feature-icon {
            width: 50px;
            height: 50px;
            background: var(--ts-about-primary-extra-light);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--ts-about-primary);
            font-size: 1.2rem;
            flex-shrink: 0;
            transition: var(--ts-about-transition);
        }

        .ts-about-feature-item:hover .ts-about-feature-icon {
            background: var(--ts-about-primary);
            color: white;
            transform: rotate(15deg) scale(1.1);
        }

        .ts-about-feature-text h3 {
            font-size: 1.1rem;
            margin-bottom: 0.5rem;
            color: var(--ts-about-dark);
        }

        .ts-about-feature-text p {
            color: var(--ts-about-dark-light);
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .ts-about-stats {
            display: flex;
            gap: 1.5rem;
            margin-top: 2rem;
        }

        .ts-about-stat-item {
            text-align: center;
            flex: 1;
        }

        .ts-about-stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--ts-about-primary);
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .ts-about-stat-label {
            font-size: 0.9rem;
            color: var(--ts-about-dark-light);
        }

        .ts-about-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            padding: 0.9rem 2rem;
            border-radius: 50px;
            font-weight: 600;
            text-decoration: none;
            transition: var(--ts-about-transition);
            font-size: 1.1rem;
            position: relative;
            overflow: hidden;
            z-index: 1;
            border: none;
            cursor: pointer;
            gap: 0.5rem;
        }

        .ts-about-btn-primary {
            background: var(--ts-about-primary);
            color: white;
            box-shadow: var(--ts-about-shadow-md);
        }

        .ts-about-btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: var(--ts-about-shadow-lg);
            background: var(--ts-about-primary-dark);
        }

        .ts-about-btn-outline {
            border: 2px solid white;
            color: white;
            background: transparent;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .ts-about-btn-outline:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }

        /* Company Profile card (original) */
        .ts-about-profile-card {
            max-width: 1100px;
            margin: 40px auto;
            padding: 60px 50px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.5);
            text-align: center;
        }

        .ts-about-main-title {
            font-size: 3rem;
            margin-bottom: 30px;
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
        }

        .ts-about-description-text {
            font-size: 1.25rem;
            color: #495057;
            line-height: 1.9;
            max-width: 90%;
            margin: 0 auto 30px;
        }

        .ts-about-text-highlight {
            color: var(--ts-about-primary);
            font-weight: 600;
        }

        .ts-about-stats-container {
            display: flex;
            gap: 30px;
            margin-top: 40px;
            flex-wrap: wrap;
            justify-content: center;
        }

        .ts-about-stat-box {
            flex: 1;
            min-width: 180px;
            background: rgba(67, 97, 238, 0.05);
            padding: 25px;
            border-radius: 12px;
            transition: transform 0.3s ease;
        }

        .ts-about-stat-box:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(67, 97, 238, 0.15);
        }

        .ts-about-stat-value {
            font-size: 2.5rem;
            font-weight: 700;
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .ts-about-stat-label-custom {
            font-size: 1.1rem;
            color: #495057;
            font-weight: 500;
        }

        .ts-about-action-btn {
            background: var(--ts-about-primary);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 50px;
            font-size: 1.1rem;
            font-weight: 600;
            margin-top: 30px;
            cursor: pointer;
            transition: var(--ts-about-transition);
        }

        .ts-about-action-btn:hover {
            background: var(--ts-about-primary-dark);
            transform: translateY(-3px);
            box-shadow: var(--ts-about-shadow-lg);
        }

        .ts-about-story-section {
            padding: 120px 0;
            background-color: #f9fbfd;
        }

        .ts-about-story-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 60px;
            align-items: center;
        }

        .ts-about-story-content {
            position: relative;
            z-index: 2;
        }

        .ts-about-story-label {
            display: inline-block;
            color: var(--ts-about-primary);
            font-weight: 600;
            margin-bottom: 1rem;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            font-size: 0.9rem;
        }

        .ts-about-story-title {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            line-height: 1.2;
            color: var(--ts-about-dark);
        }

        .ts-about-story-title .ts-about-highlight {
            color: var(--ts-about-primary);
        }

        .ts-about-story-text {
            color: var(--ts-about-dark-light);
            margin-bottom: 2rem;
            line-height: 1.7;
            font-size: 1.1rem;
        }

        .ts-about-story-stats {
            display: flex;
            gap: 2rem;
            margin-top: 3rem;
        }

        .ts-about-story-stat {
            text-align: center;
        }

        .ts-about-story-stat-number {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--ts-about-primary);
            line-height: 1;
            margin-bottom: 0.5rem;
        }

        .ts-about-story-stat-label {
            font-size: 0.9rem;
            color: var(--ts-about-dark-light);
        }

        .ts-about-story-visual {
            position: relative;
            height: 500px;
        }

        .ts-about-story-image {
            position: absolute;
            border-radius: var(--ts-about-border-radius-xl);
            overflow: hidden;
            box-shadow: var(--ts-about-shadow-xl);
            transition: var(--ts-about-transition-slow);
        }

        .ts-about-story-image-1 {
            width: 70%;
            top: 0;
            left: 0;
            z-index: 2;
            transform: rotate(-5deg);
        }

        .ts-about-story-image-2 {
            width: 60%;
            bottom: 0;
            right: 0;
            z-index: 1;
            transform: rotate(5deg);
        }

        .ts-about-story-image-3 {
            width: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(2deg);
            z-index: 3;
        }

        .ts-about-story-image img {
            width: 100%;
            height: auto;
            display: block;
        }

        .ts-about-cta-section {
            background: var(--ts-about-gradient);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
            clip-path: polygon(0 15%, 100% 0, 100% 100%, 0 100%);
            margin-top: 100px;
            padding: 100px 0;
        }

        .ts-about-cta-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }

        .ts-about-cta-title {
            font-size: 2.8rem;
            margin-bottom: 25px;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }

        .ts-about-cta-subtitle {
            font-size: 1.2rem;
            opacity: 0.9;
            margin-bottom: 40px;
        }

        @keyframes tsAboutFadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        @keyframes tsAboutFadeInDown {
            from {
                opacity: 0;
                transform: translateY(-30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes tsAboutFloat {

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

            50% {
                transform: translateY(-20px) rotate(5deg);
            }
        }

        @keyframes tsAboutGrain {

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

            10% {
                transform: translate(-5%, -10%);
            }

            20% {
                transform: translate(-15%, 5%);
            }

            30% {
                transform: translate(7%, -25%);
            }

            40% {
                transform: translate(-5%, 25%);
            }

            50% {
                transform: translate(-15%, 10%);
            }

            60% {
                transform: translate(15%, 0%);
            }

            70% {
                transform: translate(0%, 15%);
            }

            80% {
                transform: translate(3%, 35%);
            }

            90% {
                transform: translate(-10%, 10%);
            }
        }

        @media (max-width: 992px) {

            .ts-about-about-section .ts-about-container,
            .ts-about-story-container {
                grid-template-columns: 1fr;
            }

            .ts-about-story-visual {
                height: 400px;
            }
        }






        /* -----------------------------
         */


         /* Reset and Base Styles */
.privacy-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 24px;
    background: #f8fafc;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: #1e293b;
    line-height: 1.5;
}

/* Content Wrapper with Two Columns */
.privacy-content-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Sidebar TOC Styles */
.privacy-toc-sidebar {
    flex: 0 0 280px;
    position: sticky;
    top: 100px;
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid #e2e8f0;
}

.privacy-toc-header {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    color: white;
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.privacy-toc-header i {
    font-size: 1.5rem;
}

.privacy-toc-header h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: -0.01em;
}

.privacy-toc-list {
    list-style: none;
    margin: 0;
    padding: 16px 0;
}

.privacy-toc-list li {
    margin: 0;
    padding: 0;
}

.privacy-toc-list li a {
    display: block;
    padding: 12px 24px;
    color: #475569;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
    position: relative;
}

.privacy-toc-list li a:hover {
    background-color: #f1f5f9;
    color: #0f172a;
    padding-left: 28px;
}

.privacy-toc-list li a.privacy-active,
.privacy-toc-list li a:active {
    background: linear-gradient(90deg, #eef2ff 0%, #ffffff 100%);
    color: #4f46e5;
    border-left-color: #4f46e5;
    font-weight: 600;
}

/* Main Content Styles */
.privacy-policy-content {
    flex: 1;
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    padding: 40px 48px;
    border: 1px solid #e2e8f0;
}

/* Section Divider Styles */
.privacy-div {
    scroll-margin-top: 100px;
    margin-bottom: 48px;
    padding-bottom: 32px;
    border-bottom: 1px solid #eef2ff;
}

.privacy-div:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.privacy-div h2 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 20px;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 12px;
    letter-spacing: -0.02em;
}

.privacy-div h2 i {
    color: #4f46e5;
    font-size: 1.6rem;
    background: #eef2ff;
    padding: 10px;
    border-radius: 16px;
}

.privacy-div p {
    margin-bottom: 16px;
    font-size: 1rem;
    color: #334155;
}

.privacy-div ul {
    margin: 16px 0 20px 24px;
    padding-left: 0;
    list-style: none;
}

.privacy-div ul li {
    margin-bottom: 10px;
    font-size: 0.95rem;
    color: #334155;
    position: relative;
    padding-left: 28px;
}

.privacy-div ul li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: #4f46e5;
    font-weight: bold;
}

.privacy-highlight {
    background: #fefce8;
    border-left: 4px solid #eab308;
    padding: 20px 24px;
    border-radius: 16px;
    margin: 24px 0;
    background: #fffbeb;
}

.privacy-highlight p {
    margin: 0;
    font-size: 0.95rem;
    color: #854d0e;
    font-weight: 500;
}

/* Strong text within sections */
.privacy-div ul li strong {
    color: #0f172a;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: 600;
}

@media (max-width: 768px) {
    .privacy-toc-sidebar {
        display: none;
    }
}

/* Responsive Design */
@media (max-width: 992px) {
    .privacy-content-wrapper {
        flex-direction: column;
    }
    
    .privacy-toc-sidebar {
        flex: auto;
        position: relative;
        top: 0;
        width: 100%;
        margin-bottom: 24px;
    }
    
    .privacy-policy-content {
        padding: 32px 24px;
    }
    
    .privacy-div h2 {
        font-size: 1.5rem;
    }
}

@media (max-width: 640px) {
    .privacy-container {
        padding: 20px 16px;
    }
    
    .privacy-policy-content {
        padding: 24px 20px;
    }
    
    .privacy-div h2 {
        font-size: 1.35rem;
        flex-wrap: wrap;
    }
    
    .privacy-toc-header h2 {
        font-size: 1.1rem;
    }
    
    .privacy-toc-list li a {
        padding: 10px 20px;
        font-size: 0.85rem;
    }
}