@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;600;800&family=Rajdhani:wght@300;500;700&display=swap');
        
        :root {
            --neon-pink: #ff2a6d;
            --neon-blue: #05d9e8;
            --neon-purple: #d300c5;
            --dark-bg: #0d0221;
            --ui-dark: #1a1b41;
            --text-light: #f8fafc;
        }
        

        
        .hero {
            height: 50vh;
            position: relative;
            display: flex;
            align-items: center;
            overflow: hidden;
            padding: 0 8%;
            isolation: isolate;
        }
        
        /* Grid Background */
        .grid-bg {
            position: absolute;
            width: 200%;
            height: 200%;
            top: -50%;
            left: -50%;
            background-image: 
                linear-gradient(var(--ui-dark) 1px, transparent 1px),
                linear-gradient(90deg, var(--ui-dark) 1px, transparent 1px);
            background-size: 60px 60px;
            animation: gridScroll 20s linear infinite;
            z-index: -1;
            opacity: 0.3;
        }
        
        /* Neon Glow Elements */
        .neon-circle {
            position: absolute;
            border-radius: 50%;
            filter: blur(40px);
            opacity: 0.7;
            z-index: -1;
            animation: neonPulse 8s ease-in-out infinite alternate;
        }
        
        .circle-1 {
            width: 400px;
            height: 400px;
            background: var(--neon-pink);
            top: -100px;
            left: -100px;
            animation-delay: 0s;
        }
        
        .circle-2 {
            width: 600px;
            height: 600px;
            background: var(--neon-blue);
            bottom: -200px;
            right: -200px;
            animation-delay: 2s;
        }
        
        /* UI Glow Effects */
        .ui-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--neon-blue), transparent);
            box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
            animation: uiScan 4s linear infinite;
            opacity: 0;
        }
        
        .line-1 {
            top: 20%;
            left: 0;
            width: 100%;
            animation-delay: 1s;
        }
        
        .line-2 {
            top: 70%;
            left: 0;
            width: 100%;
            animation-delay: 3s;
        }
        
        /* Hero Content */
        .hero-content {
            position: relative;
            z-index: 2;
            max-width: 1200px;
        }
        
        .cyber-tag {
            font-family: 'Orbitron', sans-serif;
            font-size: 1.2rem;
            color: var(--neon-blue);
            margin-bottom: 1.5rem;
            text-shadow: 0 0 10px var(--neon-blue);
            letter-spacing: 3px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease-out 0.3s forwards;
        }
        
        h1 {
            font-family: 'Orbitron', sans-serif;
            font-size: clamp(2.5rem, 8vw, 5rem);
            font-weight: 800;
            line-height: 1.1;
            margin-bottom: 1.5rem;
            background: linear-gradient(90deg, var(--neon-pink), var(--neon-purple));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 15px rgba(255, 42, 109, 0.5);
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease-out 0.5s forwards;
        }
        
        .lead-text {
            font-size: 1.3rem;
            line-height: 1.6;
            max-width: 600px;
            margin-bottom: 3rem;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease-out 0.7s forwards;
        }
        
        .cta-container {
            display: flex;
            gap: 20px;
            opacity: 0;
            transform: translateY(30px);
            animation: fadeInUp 0.8s ease-out 0.9s forwards;
        }
        
        .cyber-btn {
            position: relative;
            display: inline-flex;
            align-items: center;
            padding: 16px 40px;
            background: var(--ui-dark);
            color: var(--text-light);
            border: none;
            border-radius: 4px;
            font-family: 'Orbitron', sans-serif;
            font-weight: 600;
            font-size: 1.1rem;
            text-decoration: none;
            overflow: hidden;
            transition: all 0.3s ease;
            box-shadow: 0 0 10px rgba(5, 217, 232, 0.3);
        }
        
        .primary-btn {
            background: linear-gradient(45deg, var(--neon-pink), var(--neon-purple));
            box-shadow: 0 0 15px rgba(255, 42, 109, 0.5);
        }
        
        .cyber-btn::before {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to bottom right,
                transparent 45%,
                rgba(255,255,255,0.3) 50%,
                transparent 55%
            );
            transform: rotate(30deg);
            transition: all 0.5s ease;
        }
        
        .cyber-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 0 25px rgba(255, 42, 109, 0.8);
        }
        
        .cyber-btn:hover::before {
            left: 100%;
        }
        
        /* Binary Rain Effect */
        .binary-rain {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0.1;
            overflow: hidden;
        }
        
        .binary-column {
            position: absolute;
            top: -100%;
            width: 20px;
            display: flex;
            flex-direction: column;
            font-family: 'Orbitron', sans-serif;
            color: var(--neon-blue);
            animation: binaryFall linear infinite;
        }
        
        /* Animations */
        @keyframes gridScroll {
            0% {
                transform: translate(0, 0);
            }
            100% {
                transform: translate(60px, 60px);
            }
        }
        
        @keyframes neonPulse {
            0%, 100% {
                opacity: 0.5;
            }
            50% {
                opacity: 0.9;
            }
        }
        
        @keyframes uiScan {
            0% {
                opacity: 0;
                transform: translateY(0);
            }
            1% {
                opacity: 1;
            }
            100% {
                opacity: 0;
                transform: translateY(20px);
            }
        }
        
        @keyframes binaryFall {
            to {
                transform: translateY(100vh);
            }
        }
        
        @keyframes fadeInUp {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .hero {
                padding: 0 5%;
                text-align: center;
            }
            
            p {
                font-size: 1.1rem;
            }
            
            .cta-container {
                flex-direction: column;
            }
            
            .circle-1, .circle-2 {
                display: none;
            }
        }
        
        
        .cta-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px; /* Adds space between the buttons */
  flex-wrap: wrap; /* Allows buttons to wrap on smaller screens */
}

/* Optional: Style adjustments for the buttons */
.cyber-btn.primary-btn {
  /* Your existing button styles */
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
}

.cta-button {
  /* Your existing button styles */
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 4px;
  background-color: #4361ee; /* Example color - adjust as needed */
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* For the phone icon */
.cta-button i {
  font-size: 1em;
}





             .breadcrumb {
            background-color: #F0F0F0 !important;
            padding: 1rem 0 !important;
            border-bottom: 1px solid var(--light-gray) !important;
        }

        .breadcrumb-list {
            display: flex !important;
            flex-wrap: wrap !important;
            list-style: none !important;
            padding: 0 !important;
            margin: 0 !important;
            font-size: 1rem !important;
            font-weight: 500;
      
          
        }

        .breadcrumb-item {
            display: flex !important;
            align-items: center !important;
            margin-right: 0.5rem !important;
        }

        .breadcrumb-item:not(:last-child)::after {
            content: '/' !important;
            margin-left: 0.5rem !important;
            color: var(--gray) !important;
        }

        .breadcrumb-link {
            color: var(--primary) !important;
            transition: var(--transition) !important;
            text-decoration: none !important;
        }

        .breadcrumb-link:hover {
            color: var(--primary-dark) !important;
             text-decoration: underline !important;
        }

        .breadcrumb-current {
            color: var(--gray) !important;
            pointer-events: none !important;
        }
   
    .cta-button {
    display: inline-block;
    padding: 12px 24px;
   background: linear-gradient(to right, #3498db, #2ecc71); /* Gradient background */
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0069d9; /* Darker blue on hover */
    color: white;
}