/* Home  */

  
  /* ================= SECTIONS ================= */
  .section-padding {
    padding: 6rem 0;
  }

  /* ================= GLASS EFFECT ================= */
  .glass-effect {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* ================= GRADIENT TEXT ================= */
  .gradient-text {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ================= HOVER LIFT ================= */
  .hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  }

  /* ================= STAGGERED ANIMATION ================= */
  .staggered-animation>* {
    opacity: 0;
    animation: fadeInUp 0.6s ease-out forwards;
  }

  .staggered-animation>*:nth-child(1) {
    animation-delay: 0.1s;
  }

  .staggered-animation>*:nth-child(2) {
    animation-delay: 0.2s;
  }

  .staggered-animation>*:nth-child(3) {
    animation-delay: 0.3s;
  }

  .staggered-animation>*:nth-child(4) {
    animation-delay: 0.4s;
  }

  .staggered-animation>*:nth-child(5) {
    animation-delay: 0.5s;
  }

  .staggered-animation>*:nth-child(6) {
    animation-delay: 0.6s;
  }

  /* About -us */

  /* ===============================
   ABOUT US PAGE CSS
   =============================== */

  /* ROOT COLORS (agar base.css me nahi ho to) */
  :root {
    --primary: #3b82f6;
    --secondary: #8b5cf6;
    --accent: #10b981;
  }

  /* ===============================
   ANIMATIONS
   =============================== */
  @keyframes float {

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

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

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

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

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

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

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

  /* ===============================
   ANIMATION HELPERS
   =============================== */
  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-gradient {
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
  }

  .fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
  }

  /* ===============================
   GLASS EFFECT
   =============================== */
  .glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* ===============================
   GRADIENT TEXT
   =============================== */
  .gradient-text {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* ===============================
   VALUE CARDS (CORE VALUES)
   =============================== */
  .value-card {
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  }

  .value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  }

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

  .value-card:hover::before {
    left: 100%;
  }

  /* ===============================
   ABOUT HEADER BACKGROUND
   =============================== */
  .about-hero {
    position: relative;
    overflow: hidden;
  }

  .about-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right,
        rgba(59, 130, 246, 0.9),
        rgba(139, 92, 246, 0.9));
  }

  /* ===============================
   CUSTOM SCROLLBAR (OPTIONAL)
   =============================== */
  ::-webkit-scrollbar {
    width: 8px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f5f9;
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom,
        var(--primary),
        var(--secondary));
    border-radius: 4px;
  }


  /* services */

  /* Additional styles for services page */
  .service-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
  }

  .service-card:hover {
    transform: translateY(-5px);
    border-left-color: #3b82f6;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .platform-badge {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .scope-item {
    position: relative;
    padding-left: 1.5rem;
  }

  .scope-item:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
  }

  .section-divider {
    height: 1px;
    background: linear-gradient(to right, transparent, #d1d5db, transparent);
    margin: 3rem 0;
  }


  /* Custom styles for Cloud Services page */

  .service-section {
    scroll-margin-top: 100px;
  }

  .service-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
  }

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

  .platform-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.25rem;
  }

  .scope-item {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
  }

  .scope-item:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.25rem;
  }

  .section-gradient {
    background: linear-gradient(135deg, #f0f9ff 0%, #fdf2ff 100%);
  }

  .feature-icon {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  }

  .stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
  }

  .nav-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
    overflow-x: auto;
  }

  .nav-tab {
    padding: 1rem 2rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
  }

  .nav-tab:hover {
    color: #4f46e5;
  }

  .nav-tab.active {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
  }

  /* Custom styles for Email & Workspace page */
  .service-section {
    scroll-margin-top: 100px;
  }

  .service-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
  }

  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-left-color: #3b82f6;
  }

  .platform-card {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  }

  .platform-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
  }

  .feature-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
  }

  .feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.25rem;
  }

  .migration-badge {
    display: inline-block;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
    margin: 0.25rem;
  }

  .section-gradient {
    background: linear-gradient(135deg, #f0f9ff 0%, #fdf2ff 100%);
  }

  .hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  }

  .nav-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
    overflow-x: auto;
  }

  .nav-tab {
    padding: 1rem 2rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
  }

  .nav-tab:hover {
    color: #4f46e5;
  }

  .nav-tab.active {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
  }

  .stats-card {
    background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
    color: white;
    padding: 2rem;
    border-radius: 1rem;
    text-align: center;
  }

  /* Custom styles for Managed Services page */
  .service-section {
    scroll-margin-top: 100px;
  }

  .service-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
  }

  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border-left-color: #3b82f6;
  }

  .coverage-card {
    background: linear-gradient(135deg, #ffffff 0%, #fef2f2 100%);
    transition: all 0.3s ease;
  }

  .coverage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(239, 68, 68, 0.1);
  }

  .feature-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
  }

  .feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.25rem;
  }

  .section-gradient {
    background: linear-gradient(135deg, #fef2f2 0%, #fffbeb 100%);
  }

  .hero-gradient {
    background: linear-gradient(135deg, #667eea 0%, #7c3aed 100%);
  }

  .stats-badge {
    background: linear-gradient(135deg, #667eea 0%, #7c3aed 100%);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
  }

  .nav-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
    overflow-x: auto;
  }

  .nav-tab {
    padding: 1rem 2rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
  }

  .nav-tab:hover {
    color: #4f46e5;
  }

  .nav-tab.active {
    color: #4f46e5;
    border-bottom-color: #4f46e5;
  }

  .support-level {
    border: 2px solid #fecaca;
    transition: all 0.3s;
  }

  .support-level:hover {
    border-color: #ef4444;
    box-shadow: 0 10px 25px rgba(239, 68, 68, 0.1);
  }

  .monitoring-dashboard {
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
    color: white;
    padding: 2rem;
    border-radius: 1rem;
  }

  /* Security Services – SAME AS SERVER MANAGEMENT COLORS */
  :root {
    --server-indigo: #4f46e5;
    --server-purple: #8b5cf6;
    --server-light: #c7d2fe;
    --server-gradient: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
  }

  .service-section {
    scroll-margin-top: 100px;
  }

  .service-card {
    transition: all 0.3s ease;
    border-left: 4px solid transparent;
  }

  .service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(79, 70, 229, 0.1);
    border-left-color: var(--server-indigo);
  }

  /* Security Feature Card */
  .security-feature {
    background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%);
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
  }

  .security-feature:hover {
    border-color: var(--server-indigo);
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.1);
  }

  /* Feature List */
  .feature-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 0.75rem;
  }

  .feature-list li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
    font-size: 1.25rem;
  }

  /* Gradients */
  .hero-gradient {
    background: var(--server-gradient);
  }

  .section-gradient {
    background: linear-gradient(135deg, #f5f3ff 0%, #faf5ff 100%);
  }

  /* Badge */
  .security-badge {
    background: var(--server-gradient);
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 600;
  }

  /* Tabs */
  .nav-tabs {
    display: flex;
    border-bottom: 2px solid #e5e7eb;
    margin-bottom: 2rem;
    overflow-x: auto;
  }

  .nav-tab {
    padding: 1rem 2rem;
    font-weight: 600;
    color: #6b7280;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
  }

  .nav-tab:hover {
    color: var(--server-indigo);
  }

  .nav-tab.active {
    color: var(--server-indigo);
    border-bottom-color: var(--server-indigo);
  }

  /* Icons */
  .security-icon {
    background: var(--server-gradient);
    color: white;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
  }

  /* VAPT Steps */
  .vapt-step {
    border-left: 4px solid var(--server-indigo);
    padding-left: 1.5rem;
    position: relative;
  }

  .vapt-step:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 0;
    width: 20px;
    height: 20px;
    background: var(--server-indigo);
    border-radius: 50%;
  }
/* =====================================================
   SOPHOS – COMPLETE CSS (LIGHT + DARK MODE FIXED)
   ===================================================== */

/* ---------- ROOT COLORS ---------- */
:root {
  --sophos-blue: #005eb8;
  --sophos-light-blue: #0073e6;
  --sophos-dark-blue: #004a99;
  --sophos-gradient: linear-gradient(135deg, #005eb8 0%, #0073e6 100%);
}

/* ---------- GLOBAL ---------- */
.section-padding {
  padding: 80px 0;
}

@media (max-width: 768px) {
  .section-padding {
    padding: 60px 0;
  }
}

/* ---------- SERVICE CARD ---------- */
.service-card {
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
  border-left: 4px solid transparent;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 94, 184, 0.1);
  border-left-color: var(--sophos-blue);
}

.dark .service-card {
  border-color: #374151;
}

.dark .service-card:hover {
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
}

/* ---------- SOPHOS FEATURE CARD (MAIN FIX) ---------- */
.sophos-feature {
  background: linear-gradient(135deg, #ffffff 0%, #f0f7ff 100%);
  border: 1px solid #d1e7ff;
  border-radius: 16px;
  transition: all 0.3s ease;
}

.sophos-feature:hover {
  transform: translateY(-4px);
  border-color: var(--sophos-blue);
  box-shadow: 0 10px 25px rgba(0, 94, 184, 0.1);
}

/* 🔥 DARK MODE OVERRIDE – WHITE BACKGROUND REMOVED */
.dark .sophos-feature {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(12px);
}

.dark .sophos-feature:hover {
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}

/* ---------- BOTTOM FEATURE / BG-WHITE FIX ---------- */
.dark #policy .bg-white {
  background: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(12px);
  border-color: rgba(255,255,255,0.12) !important;
}

/* ---------- FEATURE LIST ---------- */
.feature-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 8px;
}

.feature-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}

.dark .feature-list li::before {
  color: #66b3ff;
}

/* ---------- SOPHOS BADGE ---------- */
.sophos-badge {
  background: linear-gradient(135deg, #e6f2ff 0%, #cce5ff 100%);
  border: 1px solid #b3d9ff;
  color: #0066cc;
  padding: 8px 16px;
  border-radius: 9999px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
}

.dark .sophos-badge {
  background: linear-gradient(
    135deg,
    rgba(0, 102, 204, 0.25),
    rgba(0, 153, 255, 0.25)
  );
  border-color: rgba(102, 179, 255, 0.35);
  color: #66b3ff;
}

/* ---------- ICON ---------- */
.sophos-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sophos-gradient);
  color: #fff;
  font-size: 20px;
}

/* ---------- NAV TABS ---------- */
.nav-tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 2rem;
}

.nav-tab {
  padding: 12px 24px;
  white-space: nowrap;
  cursor: pointer;
  font-weight: 600;
  color: #6b7280;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
}

.nav-tab:hover {
  color: var(--sophos-blue);
}

.nav-tab.active {
  color: var(--sophos-blue);
  border-bottom-color: var(--sophos-blue);
}

.dark .nav-tab {
  color: #9ca3af;
}

.dark .nav-tab:hover {
  color: #66b3ff;
}

.dark .nav-tab.active {
  color: #66b3ff;
  border-bottom-color: #66b3ff;
}

/* ---------- HERO / GLASS ---------- */
.hero-stats {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .hero-stats {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

/* ---------- FLOATING ANIMATION ---------- */
.floating-shield {
  animation: float 6s ease-in-out infinite;
}

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

   /* VAPT Services Specific Colors */
        :root {
            --vapt-purple: #8b5cf6;
            --vapt-indigo: #6366f1;
            --vapt-red: #ef4444;
            --vapt-gradient: linear-gradient(135deg, #8b5cf6 0%, #6366f1 50%, #ef4444 100%);
            --vapt-gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
            --vapt-gradient-red: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
        }

        .service-section {
            scroll-margin-top: 100px;
        }
        
        .service-card {
            transition: all 0.3s ease;
            border-left: 4px solid transparent;
        }
        
        .service-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(139, 92, 246, 0.1);
            border-left-color: var(--vapt-purple);
        }
        
        .vapt-feature {
            background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%);
            border: 1px solid #e9d5ff;
            transition: all 0.3s ease;
        }
        
        .vapt-feature:hover {
            border-color: var(--vapt-purple);
            box-shadow: 0 10px 25px rgba(139, 92, 246, 0.1);
        }
        
        .feature-list li {
            position: relative;
            padding-left: 2rem;
            margin-bottom: 0.75rem;
        }
        
        .feature-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #10b981;
            font-weight: bold;
            font-size: 1.25rem;
        }
        
        .hero-gradient {
            background: var(--vapt-gradient);
            position: relative;
            overflow: hidden;
        }
        
        .hero-pattern {
            position: absolute;
            top: 0;
            right: 0;
            width: 60%;
            height: 100%;
            background-image: 
                radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.3) 0%, transparent 50%),
                radial-gradient(circle at 40% 40%, rgba(239, 68, 68, 0.2) 0%, transparent 50%);
            z-index: 1;
        }
        
        .hero-content {
            position: relative;
            z-index: 2;
        }
        
        .section-gradient {
            background: linear-gradient(135deg, #faf5ff 0%, #fef2f2 100%);
        }
        
        .vapt-badge {
            background: var(--vapt-gradient-purple);
            color: white;
            padding: 0.5rem 1.5rem;
            border-radius: 9999px;
            font-size: 0.875rem;
            font-weight: 600;
        }
        
        .nav-tabs {
            display: flex;
            border-bottom: 2px solid #e5e7eb;
            margin-bottom: 2rem;
            overflow-x: auto;
        }
        
        .nav-tab {
            padding: 1rem 2rem;
            font-weight: 600;
            color: #6b7280;
            border-bottom: 3px solid transparent;
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-tab:hover {
            color: var(--vapt-purple);
        }
        
        .nav-tab.active {
            color: var(--vapt-purple);
            border-bottom-color: var(--vapt-purple);
        }
        
        .vapt-icon {
            background: var(--vapt-gradient-purple);
            color: white;
            width: 48px;
            height: 48px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.25rem;
        }
        
        .risk-badge {
            padding: 0.5rem 1rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 600;
        }
        
        .risk-critical {
            background: var(--vapt-gradient-red);
            color: white;
        }
        
        .risk-high {
            background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
            color: white;
        }
        
        .risk-medium {
            background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
            color: white;
        }
        
        .risk-low {
            background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
            color: white;
        }
        
        .scan-animation {
            position: relative;
            overflow: hidden;
        }
        
        .scan-line {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--vapt-purple), transparent);
            animation: scan 3s ease-in-out infinite;
        }
        
        @keyframes scan {
            0% {
                transform: translateY(0);
            }
            100% {
                transform: translateY(100%);
            }
        }
        
        .pulse-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--vapt-purple);
            animation: pulse 2s ease-in-out infinite;
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
                opacity: 1;
            }
            50% {
                transform: scale(1.5);
                opacity: 0.5;
            }
        }
        
        .vulnerability-card {
            border-left: 4px solid;
            transition: all 0.3s;
        }
        
        .vulnerability-card.critical {
            border-left-color: #ef4444;
        }
        
        .vulnerability-card.high {
            border-left-color: #f97316;
        }
        
        .vulnerability-card.medium {
            border-left-color: #f59e0b;
        }
        
        .vulnerability-card:hover {
            transform: translateX(5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .hero-stats {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .methodology-step {
            position: relative;
            padding-left: 3rem;
            margin-bottom: 2rem;
        }
        
        .methodology-step:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 2rem;
            height: 2rem;
            border-radius: 50%;
            background: var(--vapt-gradient-purple);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        .methodology-step.step-1:before { content: "1"; }
        .methodology-step.step-2:before { content: "2"; }
        .methodology-step.step-3:before { content: "3"; }
        .methodology-step.step-4:before { content: "4"; }
        .methodology-step.step-5:before { content: "5"; }
        
        .methodology-step:after {
            content: "";
            position: absolute;
            left: 1rem;
            top: 2rem;
            bottom: -2rem;
            width: 2px;
            background: var(--vapt-purple);
            opacity: 0.3;
        }
        
        .methodology-step:last-child:after {
            display: none;
        }
    
        
        /* Custom styles for VAPT page */
        .scan-animation {
            position: relative;
            overflow: hidden;
        }
        
        .scan-line {
            position: absolute;
            height: 3px;
            width: 100%;
            top: 0;
            background: linear-gradient(90deg, transparent, currentColor, transparent);
            animation: scan 3s linear infinite;
        }
        
        @keyframes scan {
            0% { top: 0; opacity: 0; }
            10% { opacity: 1; }
            90% { opacity: 1; }
            100% { top: 100%; opacity: 0; }
        }
        
        .pulse-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            position: absolute;
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% { transform: scale(0.8); opacity: 0.7; }
            70% { transform: scale(1.5); opacity: 0; }
            100% { transform: scale(1.5); opacity: 0; }
        }
        
        .vapt-badge {
            background: linear-gradient(135deg, #f3e8ff 0%, #fce7f3 100%);
            border: 1px solid #e9d5ff;
            color: #7c3aed;
            padding: 8px 16px;
            border-radius: 50px;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
        }
        
        .dark .vapt-badge {
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
            border: 1px solid rgba(124, 58, 237, 0.3);
            color: #c4b5fd;
        }
        
        .vapt-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            font-size: 20px;
            background: linear-gradient(135deg, #f3e8ff 0%, #fce7f3 100%);
            color: #7c3aed;
        }
        
        .dark .vapt-icon {
            background: linear-gradient(135deg, rgba(124, 58, 237, 0.2) 0%, rgba(236, 72, 153, 0.2) 100%);
            color: #c4b5fd;
        }
        
        .vapt-feature {
            transition: all 0.3s ease;
            border: 1px solid #e5e7eb;
            background: white;
        }
        
        .dark .vapt-feature {
            border-color: #374151;
            background: #1f2937;
        }
        
        .vapt-feature:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
        }
        
        .dark .vapt-feature:hover {
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        .feature-list li {
            position: relative;
            padding-left: 24px;
            margin-bottom: 8px;
            color: #4b5563;
        }
        
        .dark .feature-list li {
            color: #d1d5db;
        }
        
        .feature-list li:before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #7c3aed;
            font-weight: bold;
        }
        
        .dark .feature-list li:before {
            color: #c4b5fd;
        }
        
        .vulnerability-card {
            transition: all 0.3s ease;
            border: 1px solid #e5e7eb;
        }
        
        .dark .vulnerability-card {
            border-color: #374151;
        }
        
        .vulnerability-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
        }
        
        .dark .vulnerability-card:hover {
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .risk-badge {
            padding: 4px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .risk-critical {
            background: #fee2e2;
            color: #991b1b;
        }
        
        .dark .risk-critical {
            background: rgba(220, 38, 38, 0.2);
            color: #fca5a5;
        }
        
        .risk-high {
            background: #ffedd5;
            color: #9a3412;
        }
        
        .dark .risk-high {
            background: rgba(234, 88, 12, 0.2);
            color: #fdba74;
        }
        
        .risk-medium {
            background: #fef3c7;
            color: #92400e;
        }
        
        .dark .risk-medium {
            background: rgba(245, 158, 11, 0.2);
            color: #fcd34d;
        }
        
        .risk-low {
            background: #d1fae5;
            color: #065f46;
        }
        
        .dark .risk-low {
            background: rgba(16, 185, 129, 0.2);
            color: #6ee7b7;
        }
        
        .nav-tabs {
            display: flex;
            overflow-x: auto;
            padding: 16px 0;
        }
        
        .nav-tab {
            padding: 12px 24px;
            white-space: nowrap;
            cursor: pointer;
            font-weight: 600;
            border-bottom: 3px solid transparent;
            transition: all 0.3s ease;
            color: #4b5563;
        }
        
        .dark .nav-tab {
            color: #d1d5db;
        }
        
        .nav-tab:hover {
            color: #7c3aed;
        }
        
        .dark .nav-tab:hover {
            color: #c4b5fd;
        }
        
        .nav-tab.active {
            color: #7c3aed;
            border-bottom-color: #7c3aed;
        }
        
        .dark .nav-tab.active {
            color: #c4b5fd;
            border-bottom-color: #c4b5fd;
        }
        
        .methodology-step {
            position: relative;
            padding-left: 40px;
            padding-bottom: 24px;
        }
        
        .methodology-step:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #7c3aed;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            font-size: 12px;
        }
        
        .dark .methodology-step:before {
            background: #8b5cf6;
        }
        
        .methodology-step.step-1:before { content: "1"; }
        .methodology-step.step-2:before { content: "2"; }
        .methodology-step.step-3:before { content: "3"; }
        .methodology-step.step-4:before { content: "4"; }
        .methodology-step.step-5:before { content: "5"; }
        
        .methodology-step:after {
            content: "";
            position: absolute;
            left: 12px;
            top: 24px;
            width: 2px;
            height: calc(100% - 24px);
            background: #e5e7eb;
        }
        
        .dark .methodology-step:after {
            background: #4b5563;
        }
        
        .methodology-step:last-child:after {
            display: none;
        }
        
        .section-padding {
            padding: 80px 0;
        }
        
        @media (max-width: 768px) {
            .section-padding {
                padding: 60px 0;
            }
            
            .nav-tab {
                padding: 8px 16px;
                font-size: 14px;
            }
        }

         /* Bounce Infinite Animation */
    @keyframes bounce-infinite {
        0%, 100% {
            transform: translateY(0);
        }
        50% {
            transform: translateY(-10px);
        }
    }
    
    .animate-bounce-infinite {
        animation: bounce-infinite 2s ease-in-out infinite;
        animation-delay: 5s; /* Start after 5 seconds */
    }
    
    /* Pulse Once Animation */
    @keyframes pulse-once {
        0%, 100% {
            transform: scale(1);
            box-shadow: 0 0 0 0 rgba(72, 187, 120, 0.7);
        }
        50% {
            transform: scale(1.1);
            box-shadow: 0 0 0 15px rgba(72, 187, 120, 0);
        }
    }
    
    .animate-pulse-once {
        animation: pulse-once 2s ease-in-out;
    }
    
    /* Ping Once Animation */
    @keyframes ping-once {
        0% {
            transform: scale(0.8);
            opacity: 0.8;
        }
        80%, 100% {
            transform: scale(2.4);
            opacity: 0;
        }
    }
    
    .animate-ping-once {
        animation: ping-once 1s cubic-bezier(0, 0, 0.2, 1);
        animation-delay: 3s; /* Start after 3 seconds */
    }
    
    /* WhatsApp Float Entrance Animation */
    @keyframes float-in {
        0% {
            opacity: 0;
            transform: translateY(50px) scale(0.5);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    #whatsappFloat {
        animation: float-in 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
        animation-delay: 1s; /* Appear after 1 second */
        opacity: 0;
    }
    
    /* Hover Effects */
    #whatsappFloat:hover {
        transform: scale(1.1) rotate(5deg);
        box-shadow: 0 20px 40px rgba(72, 187, 120, 0.3);
    }
    
    #whatsappFloat:hover i {
        animation: wiggle 0.5s ease-in-out;
    }
    
    @keyframes wiggle {
        0%, 100% { transform: rotate(0deg); }
        25% { transform: rotate(-10deg); }
        75% { transform: rotate(10deg); }
    }
    
    /* Responsive adjustments */
    @media (max-width: 768px) {
        #whatsappFloat {
            bottom: 20px;
            right: 20px;
            width: 56px;
            height: 56px;
        }
        
        #whatsappFloat i {
            width: 24px;
            height: 24px;
        }
    }

  .no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}