/*
 * Cyber Defence - Main CSS
 * This file contains additional styling for the Cyber Defence website
 */


        :root {
            --primary-color: #26a8ff; /* Light blue as requested */
            --secondary-color: #00356b;
            --accent-color: #00eeff;
            --dark-color: #0a192f;
            --darker-color: #060f1d;
            --light-color: #f0f8ff;
            --text-color: #e0e0e0;
            --text-dark: #333;
            --transition-slow: all 0.5s ease;
            --transition-medium: all 0.3s ease;
            --transition-fast: all 0.2s ease;
        }
        

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            background-color: var(--dark-color);
            color: var(--text-color);
            overflow-x: hidden;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(0deg, rgba(10, 25, 47, 0.95), rgba(10, 25, 47, 0.95)), 
                         url('assets/images/grid-pattern.png');
            z-index: -1;
            opacity: 0.5;
        }

        /* Preloader - Disabled for performance */
        .preloader {
            display: none !important;
        }

        /* Preloader animations removed */

        /* Header */
        header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 1.5rem 8%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
            transition: var(--transition-medium);
            backdrop-filter: blur(10px);
            background: rgba(6, 15, 29, 0.8);
        }

        header.sticky {
            padding: 1rem 8%;
            background: rgba(6, 15, 29, 0.95);
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        }

        .logo {
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
        }

        .logo-img {
            width: 50px;
            height: auto;
            margin-right: 10px;
            transition: transform 0.3s ease;
        }

        .logo:hover .logo-img {
            transform: rotate(10deg);
        }

        .logo h1 {
            color: var(--text-color);
            font-size: 28px;
            font-weight: 700;
            position: relative;
        }

        .logo h1 span {
            color: var(--primary-color);
            position: relative;
            display: inline-block;
        }

        .logo h1 span::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--accent-color);
            transform: scaleX(0);
            transform-origin: left;
            transition: var(--transition-medium);
        }

        .logo:hover h1 span::after {
            transform: scaleX(1);
        }

        /* Enhanced Navigation Bar with Animations */
        .nav-toggle {
            display: none;
            cursor: pointer;
            z-index: 110;
            font-size: 24px;
            color: var(--text-color);
            position: relative;
            transition: transform 0.3s ease;
        }

        .nav-toggle:hover {
            transform: scale(1.1);
            color: var(--accent-color);
        }

        .nav-toggle.active {
            color: var(--accent-color);
        }

        nav {
            position: relative;
        }

        nav ul {
            display: flex;
            list-style: none;
        }

        nav ul li {
            margin-left: 30px;
            position: relative;
        }

        nav ul li a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 16px;
            font-weight: 500;
            padding: 5px 0;
            transition: var(--transition-fast);
            position: relative;
            display: inline-block;
            overflow: hidden;
        }

        /* New nav animations */
        nav ul li a::before {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            width: 100%;
            height: 2px;
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            transform: scaleX(0);
            transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
            transform-origin: right;
        }

        nav ul li a:hover {
            color: var(--accent-color);
            text-shadow: 0 0 5px rgba(0, 238, 255, 0.5);
        }

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

        /* Animated dot indicator for active nav item - Simplified */
        nav ul li a.active {
            color: var(--accent-color);
        }

        nav ul li a.active::before {
            transform: scaleX(1);
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
        }

        nav ul li a.active::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 5px;
            height: 5px;
            background-color: var(--accent-color);
            border-radius: 50%;
            transition: transform 0.3s ease;
        }

        nav ul li a.active:hover::after {
            transform: translateX(-50%) scale(1.3);
        }

        /* Simplified hover effect */
        nav ul li a::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 238, 255, 0.08), transparent);
            transform: translateX(-100%);
            transition: transform 0s;
        }

        nav ul li a:hover::after {
            transform: translateX(100%);
            transition: transform 0.5s ease;
        }

        /* Hero Section */
        .hero {
            position: relative;
            width: 100%;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
            background: var(--darker-color);
            padding: 0 8%;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 0%, var(--darker-color) 70%);
            z-index: 1;
        }

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

        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            max-width: 1000px;
        }

        .hero-subtitle {
            display: inline-block;
            font-size: 18px;
            margin-bottom: 20px;
            padding: 8px 15px;
            background: rgba(14, 118, 188, 0.2);
            border-left: 4px solid var(--primary-color);
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 0.6s forwards 0.1s;
        }

        .hero-title {
            font-size: 60px;
            font-weight: 800;
            line-height: 1.2;
            margin-bottom: 30px;
            text-transform: uppercase;
            overflow: hidden;
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 0.6s forwards 0.2s;
        }

        .hero-title span {
            color: var(--primary-color);
            position: relative;
            display: inline-block;
            transition: opacity 0.3s ease;
        }

        .hero-title span:hover {
            opacity: 0.9;
        }

        /* Removed glowEffect infinite animation */

        .hero-description {
            font-size: 18px;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto 40px;
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 0.6s forwards 0.4s;
        }

        .hero-buttons {
            transform: translateY(20px);
            opacity: 0;
            animation: fadeUp 0.6s forwards 0.5s;
        }

        .btn {
            display: inline-block;
            padding: 15px 30px;
            font-size: 16px;
            font-weight: 600;
            text-decoration: none;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition-medium);
            margin: 0 10px 10px;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .btn::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: var(--transition-medium);
            z-index: -1;
        }

        .btn:hover::before {
            left: 100%;
            transition: 0.7s;
        }

        .btn-primary {
            background: var(--primary-color);
            color: var(--light-color);
            border: 2px solid var(--primary-color);
        }

        .btn-primary:hover {
            background: transparent;
            color: var(--primary-color);
            box-shadow: 0 0 20px rgba(14, 118, 188, 0.5);
            transform: translateY(-3px);
        }

        .btn-secondary {
            background: transparent;
            color: var(--text-color);
            border: 2px solid var(--text-color);
        }

        .btn-secondary:hover {
            background: var(--text-color);
            color: var(--dark-color);
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
            transform: translateY(-3px);
        }

        .scroll-indicator {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 5;
            opacity: 0;
            animation: fadeIn 0.8s forwards 1s;
            transition: opacity 0.3s ease;
        }

        .scroll-indicator span {
            display: block;
            width: 30px;
            height: 50px;
            border: 2px solid var(--text-color);
            border-radius: 15px;
            position: relative;
            margin: 0 auto 8px;
        }

        .scroll-indicator span::before {
            content: '';
            position: absolute;
            top: 8px;
            left: 50%;
            width: 6px;
            height: 6px;
            background: var(--primary-color);
            border-radius: 50%;
            transform: translateX(-50%);
            transition: top 1.5s ease-in-out, opacity 1.5s ease-in-out;
        }

        .scroll-indicator:hover span::before {
            top: 30px;
            opacity: 0;
        }

        .scroll-indicator p {
            font-size: 14px;
            letter-spacing: 1px;
        }

        /* Removed scrollAnimation infinite - replaced with hover */

        @keyframes fadeIn {
            to { opacity: 1; }
        }

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

        /* Section Styling */
        .section {
            padding: 100px 8%;
            position: relative;
            overflow: hidden;
        }

        .section-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .section-header {
            text-align: center;
            margin-bottom: 60px;
            position: relative;
        }

        .subtitle {
            font-size: 16px;
            text-transform: uppercase;
            letter-spacing: 2px;
            color: var(--primary-color);
            margin-bottom: 15px;
            display: inline-block;
            padding: 5px 15px;
            background: rgba(14, 118, 188, 0.1);
            border-radius: 20px;
            position: relative;
        }

        .subtitle::before, .subtitle::after {
            content: '';
            position: absolute;
            top: 50%;
            width: 30px;
            height: 2px;
            background: var(--primary-color);
            transform: translateY(-50%);
        }

        .subtitle::before {
            left: -40px;
        }

        .subtitle::after {
            right: -40px;
        }

        .title {
            font-size: 40px;
            font-weight: 700;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
        }

        .title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            width: 80px;
            height: 3px;
            background: var(--accent-color);
            transform: translateX(-50%);
        }

        .description {
            max-width: 800px;
            margin: 0 auto;
            font-size: 16px;
            line-height: 1.7;
        }

        /* Responsive Styles */
        @media (max-width: 1200px) {
            .hero-title {
                font-size: 50px;
            }
        }

        @media (max-width: 992px) {
            .section {
                padding: 80px 6%;
            }
        }

@media (max-width: 768px) {
    header {
        padding: 1.2rem 6%;
    }
    
    .nav-toggle {
        display: block;
        z-index: 2000;
    }
    
    nav {
        position: fixed;
        top: 0;
        right: -100%;
        width: 250px;
        height: 100vh;
        background-color: #060f1d;
        z-index: 1000;
        transition: right 0.4s ease;
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.3);
        padding: 80px 20px 30px;
    }
    
    nav.active {
        right: 0;
    }
    
    nav ul {
        flex-direction: column;
    }
    
    nav ul li {
        margin: 15px 0;
        width: 100%;
    }
    
    nav ul li a {
        display: block;
        padding: 10px 15px;
        width: 100%;
    }
}

        @media (max-width: 576px) {
            .section {
                padding: 60px 4%;
            }

            .hero-title {
                font-size: 32px;
            }

            .title {
                font-size: 30px;
            }

            .subtitle::before, .subtitle::after {
                display: none;
            }

            .btn {
                padding: 12px 25px;
                margin: 0 5px 10px;
            }
        }

        /* Custom Cursor - Simplified for better performance */
        .cursor {
            position: fixed;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: rgba(14, 118, 188, 0.4);
            pointer-events: none;
            z-index: 9999;
            transform: translate(-50%, -50%);
            transition: width 0.2s, height 0.2s, opacity 0.2s;
            display: none !important; /* Completely disabled */
        }

        .cursor-follower {
            display: none !important; /* Completely disabled for performance */
        }

        .expand {
            width: 30px;
            height: 30px;
            background: rgba(0, 238, 255, 0.2);
        }

        /* Custom cursor completely disabled for performance */
        @media (min-width: 1200px) {
            .cursor {
                display: none !important;
            }
        }


/* ===== CUSTOM ANIMATIONS - Simplified ===== */
/* Removed heavy animations for performance */

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  25% { transform: translate(-1px, 1px); }
  50% { transform: translate(1px, -1px); }
  75% { transform: translate(-1px, -1px); }
}

/* Removed scanLine, flicker, matrix heavy animations */

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 1; }
  100% { transform: scale(2); opacity: 0; }
}

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

/* ===== CYBERSECURITY SPECIFIC ELEMENTS ===== */

/* Digital Noise Effect */
.digital-noise {
  position: relative;
  overflow: hidden;
}

.digital-noise::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABABAMAAABYR2ztAAAAElBMVEUAAAAAAAAAAAAAAAAAAAAAAADgKxmiAAAABnRSTlMFDg0MGA56+ksJAAAASklEQVRIx2NgGAWjYBQMPCC1RtIBjJkSZ5mAQjABJKWGZ4DYMAYKU4AiICotIaBhYBWgCMCBTAVQYYFnqIX2KBgFo2AUDFsAAHhNJsa1CiHJAAAAAElFTkSuQmCC');
  opacity: 0.04;
  z-index: 0;
  pointer-events: none;
}

/* Matrix Effect Background */
.matrix-bg {
  position: relative;
}

.matrix-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(0, 53, 107, 0.5) 25%, rgba(14, 118, 188, 0.5) 100%);
  background-size: 100% 400%;
  animation: matrix 10s linear infinite;
  opacity: 0.1;
  z-index: -1;
}

/* Simplified Glitch Effect for Text */
.glitch-text {
  position: relative;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.glitch-text:hover {
  opacity: 0.8;
}

/* Removed heavy glitch pseudo-element animations */

/* Removed Scan Line Effect - Too heavy */

/* Simplified Terminal Text Effect */
.terminal-text {
  font-family: 'Courier New', monospace;
  border-right: 2px solid rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  margin: 0 auto;
  letter-spacing: 0.15em;
  animation: typewriter 2s steps(30, end) forwards;
}

/* Simplified Binary Data Background */
.binary-bg {
  position: relative;
}

.binary-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 19px,
    rgba(14, 118, 188, 0.03) 20px
  );
  opacity: 0.5;
  z-index: -1;
  pointer-events: none;
}

/* Simplified Circuit Board Pattern */
.circuit-pattern {
  position: relative;
}

.circuit-pattern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="none" stroke="%230e76bc" stroke-width="0.5" d="M25,25 L25,75 L75,75 L75,25 L25,25 Z"/></svg>');
  background-size: 100px 100px;
  opacity: 0.03;
  z-index: -1;
}

/* Simplified Button Ripple Effect */
.btn-ripple {
  position: relative;
  overflow: hidden;
}

.btn-ripple::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 5px;
  background: rgba(255, 255, 255, 0.3);
  opacity: 0;
  border-radius: 100%;
  transform: scale(1);
  transition: transform 0.4s ease, opacity 0.4s ease;
}

.btn-ripple:hover::after {
  transform: scale(20);
  opacity: 1;
}

/* Code Block Style */
.code-block {
  font-family: 'Courier New', monospace;
  background: rgba(0, 0, 0, 0.3);
  border-left: 3px solid var(--primary-color);
  padding: 15px;
  border-radius: 5px;
  color: var(--text-color);
  white-space: pre;
  overflow-x: auto;
}

.code-block .comment {
  color: #7d8592;
}

.code-block .keyword {
  color: #e06c75;
}

.code-block .string {
  color: #98c379;
}

.code-block .number {
  color: #d19a66;
}

.code-block .function {
  color: #61afef;
}

/* Digital Counter */
.digital-counter {
  font-family: 'Courier New', monospace;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 238, 255, 0.3);
  letter-spacing: 2px;
}

/* Security Lock Icons */
.security-lock {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(14, 118, 188, 0.2);
  text-align: center;
  line-height: 40px;
}

.security-lock::before {
  content: '\f023';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: var(--primary-color);
}

.security-lock.unlocked::before {
  content: '\f3c1';
  color: #ff3860;
}

.security-lock.secured::before {
  content: '\f023';
  color: #00c851;
  text-shadow: 0 0 5px rgba(0, 200, 81, 0.5);
}

/* Progress Bars - Simplified */
.progress-wrapper {
  margin: 10px 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
  height: 8px;
  position: relative;
}

.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
  border-radius: 5px;
  position: relative;
  width: 0;
  transition: width 0.6s ease-out;
}

/* Removed shimmer infinite animation */

/* Removed Network Connection Animation - Too heavy */

/* Removed Shield Protection Animation - Too heavy */

/* Simplified Encrypted Text Effect */
.encrypted-text {
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s ease;
}

.encrypted-text:hover {
  opacity: 0.9;
}

/* Removed Data Flow Lines Animation - Too heavy */

/* Removed Digital Radar Animation - Too heavy */

/* Warning Alert Box */
.warning-alert {
  background: rgba(255, 150, 0, 0.1);
  border-left: 4px solid rgba(255, 150, 0, 0.7);
  padding: 15px;
  margin: 15px 0;
  border-radius: 5px;
  position: relative;
}

.warning-alert::before {
  content: '\f071';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: rgba(255, 150, 0, 0.7);
  margin-right: 10px;
}

/* Success Alert Box */
.success-alert {
  background: rgba(0, 200, 81, 0.1);
  border-left: 4px solid rgba(0, 200, 81, 0.7);
  padding: 15px;
  margin: 15px 0;
  border-radius: 5px;
  position: relative;
}

.success-alert::before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: rgba(0, 200, 81, 0.7);
  margin-right: 10px;
}

/* Error Alert Box */
.error-alert {
  background: rgba(255, 56, 96, 0.1);
  border-left: 4px solid rgba(255, 56, 96, 0.7);
  padding: 15px;
  margin: 15px 0;
  border-radius: 5px;
  position: relative;
}

.error-alert::before {
  content: '\f00d';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: rgba(255, 56, 96, 0.7);
  margin-right: 10px;
}

/* Info Alert Box */
.info-alert {
  background: rgba(14, 118, 188, 0.1);
  border-left: 4px solid rgba(14, 118, 188, 0.7);
  padding: 15px;
  margin: 15px 0;
  border-radius: 5px;
  position: relative;
}

.info-alert::before {
  content: '\f129';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: rgba(14, 118, 188, 0.7);
  margin-right: 10px;
}

/* SVG Path Animation */
.svg-path-animation path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dashOffset 3s ease-in-out forwards;
}

/* Data Packet Animation */
.data-packet {
  position: relative;
  width: 20px;
  height: 20px;
  background: var(--primary-color);
  border-radius: 50%;
  margin: 0 auto;
}

.data-packet::before,
.data-packet::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--primary-color);
  opacity: 0.7;
  animation: data-packet-pulse 2s infinite;
}

.data-packet::after {
  animation-delay: 0.5s;
}

@keyframes data-packet-pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Firewall Effect */
.firewall-effect {
  position: relative;
  overflow: hidden;
}

.firewall-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(14, 118, 188, 0.05) 10px,
    rgba(14, 118, 188, 0.05) 20px
  );
  z-index: -1;
}

/* ===== UTILITY CLASSES ===== */

/* Dark and Light Text */
.text-dark {
  color: var(--text-dark) !important;
}

.text-light {
  color: var(--text-color) !important;
}

/* Primary and Accent Colors */
.text-primary {
  color: var(--primary-color) !important;
}

.text-accent {
  color: var(--accent-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-accent {
  background-color: var(--accent-color) !important;
}

/* Transparent Backgrounds */
.bg-transparent-dark {
  background-color: rgba(6, 15, 29, 0.7) !important;
  backdrop-filter: blur(10px);
}

.bg-transparent-light {
  background-color: rgba(255, 255, 255, 0.05) !important;
  backdrop-filter: blur(10px);
}

/* Margins and Paddings */
.m-0 { margin: 0 !important; }
.m-1 { margin: 0.25rem !important; }
.m-2 { margin: 0.5rem !important; }
.m-3 { margin: 1rem !important; }
.m-4 { margin: 1.5rem !important; }
.m-5 { margin: 3rem !important; }

.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: 0.25rem !important; margin-right: 0.25rem !important; }
.mx-2 { margin-left: 0.5rem !important; margin-right: 0.5rem !important; }
.mx-3 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-4 { margin-left: 1.5rem !important; margin-right: 1.5rem !important; }
.mx-5 { margin-left: 3rem !important; margin-right: 3rem !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; }
.my-2 { margin-top: 0.5rem !important; margin-bottom: 0.5rem !important; }
.my-3 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-4 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-5 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: 0.25rem !important; padding-right: 0.25rem !important; }
.px-2 { padding-left: 0.5rem !important; padding-right: 0.5rem !important; }
.px-3 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-4 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-5 { padding-left: 3rem !important; padding-right: 3rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }

/* Text Alignment */
.text-center { text-align: center !important; }
.text-left { text-align: left !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }

/* Display Properties */
.d-none { display: none !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Flex Utilities */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-row-reverse { flex-direction: row-reverse !important; }
.flex-column-reverse { flex-direction: column-reverse !important; }

.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }

.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

/* Position Utilities */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }

.top-0 { top: 0 !important; }
.bottom-0 { bottom: 0 !important; }
.left-0 { left: 0 !important; }
.right-0 { right: 0 !important; }

/* Sizing */
.w-25 { width: 25% !important; }
.w-50 { width: 50% !important; }
.w-75 { width: 75% !important; }
.w-100 { width: 100% !important; }

.h-25 { height: 25% !important; }
.h-50 { height: 50% !important; }
.h-75 { height: 75% !important; }
.h-100 { height: 100% !important; }

/* Border Utilities */
.border { border: 1px solid !important; }
.border-0 { border: 0 !important; }
.border-top { border-top: 1px solid !important; }
.border-right { border-right: 1px solid !important; }
.border-bottom { border-bottom: 1px solid !important; }
.border-left { border-left: 1px solid !important; }

.border-primary { border-color: var(--primary-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }
.border-light { border-color: var(--text-color) !important; }
.border-dark { border-color: var(--darker-color) !important; }

.rounded { border-radius: 0.25rem !important; }
.rounded-top { border-top-left-radius: 0.25rem !important; border-top-right-radius: 0.25rem !important; }
.rounded-right { border-top-right-radius: 0.25rem !important; border-bottom-right-radius: 0.25rem !important; }
.rounded-bottom { border-bottom-right-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
.rounded-left { border-top-left-radius: 0.25rem !important; border-bottom-left-radius: 0.25rem !important; }
.rounded-circle { border-radius: 50% !important; }
.rounded-pill { border-radius: 50rem !important; }
.rounded-0 { border-radius: 0 !important; }

/* Shadow Utilities */
.shadow-sm { box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
.shadow { box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
.shadow-lg { box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
.shadow-none { box-shadow: none !important; }

.shadow-primary { box-shadow: 0 0.5rem 1rem rgba(14, 118, 188, 0.15) !important; }
.shadow-accent { box-shadow: 0 0.5rem 1rem rgba(0, 238, 255, 0.15) !important; }

/* Text Utilities */
.font-weight-light { font-weight: 300 !important; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }

.font-italic { font-style: italic !important; }

.text-decoration-none { text-decoration: none !important; }
.text-decoration-underline { text-decoration: underline !important; }

.text-uppercase { text-transform: uppercase !important; }
.text-lowercase { text-transform: lowercase !important; }
.text-capitalize { text-transform: capitalize !important; }

.text-wrap { white-space: normal !important; }
.text-nowrap { white-space: nowrap !important; }
.text-truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Font Sizes */
.fs-1 { font-size: 2.5rem !important; }
.fs-2 { font-size: 2rem !important; }
.fs-3 { font-size: 1.75rem !important; }
.fs-4 { font-size: 1.5rem !important; }
.fs-5 { font-size: 1.25rem !important; }
.fs-6 { font-size: 1rem !important; }
.fs-sm { font-size: 0.875rem !important; }
.fs-xs { font-size: 0.75rem !important; }

/* Letter Spacing */
.ls-1 { letter-spacing: 1px !important; }
.ls-2 { letter-spacing: 2px !important; }
.ls-3 { letter-spacing: 3px !important; }

/* Visibility */
.visible { visibility: visible !important; }
.invisible { visibility: hidden !important; }

/* Overflow */
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

/* Z-index */
.z-0 { z-index: 0 !important; }
.z-10 { z-index: 10 !important; }
.z-50 { z-index: 50 !important; }
.z-100 { z-index: 100 !important; }
.z-1000 { z-index: 1000 !important; }

/* ===== ANIMATIONS CLASSES ===== */
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.fast {
  animation-duration: 0.6s;
}

.animated.slow {
  animation-duration: 2s;
}

/* Animation Delays */
.delay-100 { animation-delay: 0.1s !important; }
.delay-200 { animation-delay: 0.2s !important; }
.delay-300 { animation-delay: 0.3s !important; }
.delay-400 { animation-delay: 0.4s !important; }
.delay-500 { animation-delay: 0.5s !important; }
.delay-600 { animation-delay: 0.6s !important; }
.delay-700 { animation-delay: 0.7s !important; }
.delay-800 { animation-delay: 0.8s !important; }
.delay-900 { animation-delay: 0.9s !important; }
.delay-1000 { animation-delay: 1s !important; }

/* Animation Durations */
.duration-100 { animation-duration: 0.1s !important; }
.duration-200 { animation-duration: 0.2s !important; }
.duration-300 { animation-duration: 0.3s !important; }
.duration-400 { animation-duration: 0.4s !important; }
.duration-500 { animation-duration: 0.5s !important; }
.duration-600 { animation-duration: 0.6s !important; }
.duration-700 { animation-duration: 0.7s !important; }
.duration-800 { animation-duration: 0.8s !important; }
.duration-900 { animation-duration: 0.9s !important; }
.duration-1000 { animation-duration: 1s !important; }

/* Animation Iterations */
.iteration-infinite { animation-iteration-count: infinite !important; }
.iteration-1 { animation-iteration-count: 1 !important; }
.iteration-2 { animation-iteration-count: 2 !important; }
.iteration-3 { animation-iteration-count: 3 !important; }

/* Fade Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.fade-in { animation-name: fadeIn; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fade-in-up { animation-name: fadeInUp; }

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -30px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fade-in-down { animation-name: fadeInDown; }

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translate3d(-30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fade-in-left { animation-name: fadeInLeft; }

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}
.fade-in-right { animation-name: fadeInRight; }

/* Slide Animations */
@keyframes slideInUp {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-up { animation-name: slideInUp; }

@keyframes slideInDown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-down { animation-name: slideInDown; }

@keyframes slideInLeft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-left { animation-name: slideInLeft; }

@keyframes slideInRight {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}
.slide-in-right { animation-name: slideInRight; }

/* Zoom Animations */
@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}
.zoom-in { animation-name: zoomIn; }

@keyframes zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}
.zoom-out { animation-name: zoomOut; }

/* Rotate Animations */
@keyframes rotateIn {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }
  to {
    transform-origin: center;
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}
.rotate-in { animation-name: rotateIn; }

/* Attention Seekers */
@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.05, 1.05, 1.05);
  }
  to {
    transform: scale3d(1, 1, 1);
  }
}
.pulse { animation-name: pulse; }

@keyframes bounce {
  from,
  20%,
  53%,
  80%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transform: translate3d(0, 0, 0);
  }
  40%,
  43% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0, -4px, 0);
  }
}
.bounce { animation-name: bounce; transform-origin: center bottom; }

@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
.flash { animation-name: flash; }

@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}
.shake { animation-name: shake; }

/* SVG-specific Animations */
@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
.dash { animation: dash 2s linear forwards; }

@keyframes fillIn {
  from {
    fill-opacity: 0;
  }
  to {
    fill-opacity: 1;
  }
}
.fill-in { animation: fillIn 1s ease forwards; }

/* ===== MEDIA QUERIES ===== */

/* Extra small devices (phones, 576px and down) */
@media (max-width: 576px) {
  .hide-xs {
    display: none !important;
  }
  
  .text-center-xs {
    text-align: center !important;
  }
  
  .w-100-xs {
    width: 100% !important;
  }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  .hide-sm {
    display: none !important;
  }
  
  .text-center-sm {
    text-align: center !important;
  }
  
  .w-100-sm {
    width: 100% !important;
  }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .hide-md {
    display: none !important;
  }
  
  .text-center-md {
    text-align: center !important;
  }
  
  .w-100-md {
    width: 100% !important;
  }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .hide-lg {
    display: none !important;
  }
  
  .text-center-lg {
    text-align: center !important;
  }
  
  .w-100-lg {
    width: 100% !important;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .hide-xl {
    display: none !important;
  }
  
  .text-center-xl {
    text-align: center !important;
  }
  
  .w-100-xl {
    width: 100% !important;
  }
}

/* Print Styles */
@media print {
  .hide-print {
    display: none !important;
  }
  
  a[href]::after {
    content: " (" attr(href) ")";
  }
}
/* Additional Service Detail Sections CSS */

/* WAPT Section */
#wapt {
    background-image: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(14, 118, 188, 0.2)), url('assets/images/wapt-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* MAPT Section */
#mapt {
    background-image: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(14, 118, 188, 0.2)), url('assets/images/mapt-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* API Testing Section */
#api-testing {
    background-image: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(14, 118, 188, 0.2)), url('assets/images/api-testing-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Network Security Section */
#network-security {
    background-image: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(14, 118, 188, 0.2)), url('assets/images/network-security-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* AI Integration Section */
#ai-integration {
    background-image: linear-gradient(135deg, rgba(10, 25, 47, 0.9), rgba(14, 118, 188, 0.2)), url('assets/images/ai-integration-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Advanced Animation Effects - Simplified */
.floating-icon {
    transition: transform 0.3s ease;
}

.floating-icon:hover {
    transform: translateY(-5px);
}

/* Removed rotating infinite animation - use hover only */

.rotating-icon {
    transition: transform 0.5s ease;
}

.rotating-icon:hover {
    transform: rotate(15deg);
}

/* Removed pulsing infinite animation - use hover only */

.pulsing-icon {
    transition: transform 0.3s ease;
}

.pulsing-icon:hover {
    transform: scale(1.1);
}

/* Service Comparison Table */
.service-comparison {
    margin-top: 50px;
    padding: 30px;
    background: rgba(6, 15, 29, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow-x: auto;
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th {
    padding: 15px;
    text-align: left;
    border-bottom: 2px solid var(--primary-color);
    color: var(--accent-color);
    font-weight: 600;
}

.comparison-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.comparison-table tr:hover {
    background: rgba(14, 118, 188, 0.1);
}

.comparison-table .feature-check {
    color: var(--accent-color);
    font-size: 18px;
    text-align: center;
}

.comparison-table .feature-x {
    color: #ff3860;
    font-size: 18px;
    text-align: center;
}

/* FAQ Section */
.faq-container {
    margin-top: 50px;
}

.faq-item {
    margin-bottom: 20px;
    background: rgba(6, 15, 29, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    overflow: hidden;
    transition: var(--transition-medium);
}

.faq-item:hover {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.faq-question {
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-medium);
}

.faq-question h3 {
    font-size: 18px;
    margin: 0;
}

.faq-question i {
    transition: var(--transition-medium);
}

.faq-answer {
    padding: 0 20px;
    height: 0;
    overflow: hidden;
    transition: var(--transition-medium);
}

.faq-item.active .faq-question {
    background: rgba(14, 118, 188, 0.1);
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    padding: 20px;
    height: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Testimonials */
.testimonial-slider {
    margin-top: 50px;
    position: relative;
    padding: 40px 0;
}

.testimonial-slide {
    background: rgba(6, 15, 29, 0.7);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 30px;
    margin: 0 20px;
    position: relative;
}

.testimonial-slide:before {
    content: '\f10d';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 40px;
    color: rgba(14, 118, 188, 0.2);
    position: absolute;
    top: 20px;
    left: 20px;
}

.testimonial-text {
    margin-bottom: 20px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
    padding-left: 20px;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: 15px;
}

.testimonial-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--primary-color);
}

.testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.testimonial-author-info h4 {
    margin: 0 0 5px;
    font-size: 18px;
}

.testimonial-author-info p {
    margin: 0;
    font-size: 14px;
    color: var(--primary-color);
}

.testimonial-controls {
    position: absolute;
    top: 50%;
    width: 100%;
    display: flex;
    justify-content: space-between;
    transform: translateY(-50%);
    z-index: 2;
}

.testimonial-control {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(14, 118, 188, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: var(--transition-medium);
}

.testimonial-control:hover {
    background: var(--primary-color);
}

.testimonial-control.prev {
    margin-left: -20px;
}

.testimonial-control.next {
    margin-right: -20px;
}

/* Call to Action */
.cta-section {
    margin-top: 0;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    padding: 80px 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta-container {
    max-width: 900px;
    margin: 0 auto;
}

.cta-content {
    position: relative;
    z-index: 2;
}

.cta-title {
    font-size: 36px;
    margin-bottom: 20px;
    color: white;
    opacity: 1 !important;
    transform: none !important;
}

.cta-description {
    font-size: 18px;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1 !important;
    transform: none !important;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.show {
    opacity: 1;
    transform: translateY(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in.show {
    opacity: 1;
    transform: scale(1);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-left.show {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-right.show {
    opacity: 1;
    transform: translateX(0);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
    .service-comparison {
        padding: 15px;
    }
    
    .comparison-table th,
    .comparison-table td {
        padding: 10px;
    }
}

@media (max-width: 768px) {
    .cta-section {
        padding: 60px 20px;
        overflow: visible;
    }

    .cta-content {
        padding: 0 15px;
        overflow: visible;
    }

    .cta-title {
        font-size: 28px;
        margin-bottom: 15px;
    }

    .cta-description {
        font-size: 16px;
        margin-bottom: 25px;
        line-height: 1.5;
        padding: 0 10px;
    }
    
    .comparison-table {
        font-size: 14px;
    }
    
    .testimonial-controls {
        position: static;
        transform: none;
        margin-top: 20px;
        justify-content: center;
        gap: 20px;
    }
    
    .testimonial-control.prev,
    .testimonial-control.next {
        margin: 0;
    }
}

@media (max-width: 576px) {
    .comparison-table {
        font-size: 12px;
    }
    
    .faq-question h3 {
        font-size: 16px;
    }
}


        /* Services Page Specific Styles */
        
        /* Service Categories */
        .categories-container {
            max-width: 1000px;
            margin: 0 auto 40px;
            text-align: center;
        }
        
        .category-tabs {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .category-tab {
            padding: 10px 25px;
            background: rgba(14, 118, 188, 0.1);
            border: 1px solid var(--primary-color);
            border-radius: 30px;
            color: var(--text-color);
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition-medium);
            position: relative;
            overflow: hidden;
        }
        
        .category-tab::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 238, 255, 0.1), transparent);
            transform: translateX(-100%);
            transition: transform 0s;
        }
        
        .category-tab:hover::before {
            transform: translateX(100%);
            transition: transform 0.8s ease;
        }
        
        .category-tab.active {
            background: var(--primary-color);
            color: white;
            box-shadow: 0 5px 15px rgba(14, 118, 188, 0.3);
        }
        
        .category-description {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: rgba(14, 118, 188, 0.05);
            border-radius: 10px;
            border-left: 3px solid var(--primary-color);
        }
        
        /* Services Grid */
        .services-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .service-card {
            background: rgba(6, 15, 29, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 30px;
            transition: var(--transition-medium);
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .service-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
            border-color: var(--primary-color);
        }
        
        .service-badge {
            position: absolute;
            top: 20px;
            right: 20px;
            background: var(--accent-color);
            color: var(--darker-color);
            padding: 5px 15px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            box-shadow: 0 0 15px rgba(0, 238, 255, 0.5);
            animation: pulse 1s ease infinite;
        }
        
        .service-icon {
            width: 70px;
            height: 70px;
            background: rgba(14, 118, 188, 0.1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            font-size: 28px;
            color: var(--accent-color);
            transition: var(--transition-medium);
            position: relative;
            z-index: 1;
        }
        
        .service-card:hover .service-icon {
            background: var(--primary-color);
            color: white;
            transform: rotate(360deg);
        }
        
        .service-title {
            font-size: 22px;
            margin-bottom: 15px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .service-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--primary-color);
            transition: var(--transition-medium);
        }
        
        .service-card:hover .service-title::after {
            width: 100%;
            background: var(--accent-color);
        }
        
        .service-description {
            margin-bottom: 20px;
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
        }
        
        .service-features {
            margin-bottom: 20px;
            display: flex;
            flex-direction: column;
            gap: 10px;
        }
        
        .feature {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
        }
        
        .feature i {
            color: var(--accent-color);
            font-size: 16px;
        }
        
        .service-link {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            transition: var(--transition-medium);
            position: relative;
        }
        
        .service-link::after {
            content: '';
            position: absolute;
            bottom: -3px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-color);
            transition: var(--transition-medium);
        }
        
        .service-link:hover {
            color: var(--accent-color);
        }
        
        .service-link:hover::after {
            width: 100%;
        }
        
        .service-link i {
            transition: var(--transition-medium);
        }
        
        .service-link:hover i {
            transform: translateX(5px);
        }
        
        /* Service Detail Sections */
        .service-detail-section {
            padding: 100px 8%;
        }
        
        .service-detail-container {
            display: flex;
            align-items: center;
            gap: 50px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .service-detail-container.reversed {
            flex-direction: row-reverse;
        }
        
        .service-detail-content {
            flex: 1;
        }
        
        .service-detail-image {
            flex: 1;
            position: relative;
            height: 400px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }
        
        .service-detail-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .service-detail-container:hover .service-detail-image img {
            transform: scale(1.05);
        }
        
        .image-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, rgba(10, 25, 47, 0.1), rgba(10, 25, 47, 0.8));
        }
        
        .price-badge {
            position: absolute;
            bottom: 20px;
            right: 20px;
            background: var(--primary-color);
            padding: 15px;
            border-radius: 10px;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 15px rgba(14, 118, 188, 0.5);
            z-index: 2;
        }
        
        .price-label {
            font-size: 12px;
            opacity: 0.8;
        }
        
        .price-value {
            font-size: 24px;
            font-weight: 700;
        }
        
        .service-features-list {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
        }
        
        .feature-item {
            display: flex;
            align-items: flex-start;
            gap: 15px;
            padding: 15px;
            background: rgba(14, 118, 188, 0.05);
            border-radius: 10px;
            transition: var(--transition-medium);
        }
        
        .feature-item:hover {
            background: rgba(14, 118, 188, 0.1);
            transform: translateY(-5px);
        }
        
        .feature-icon {
            width: 40px;
            height: 40px;
            background: rgba(14, 118, 188, 0.1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: var(--accent-color);
            transition: var(--transition-medium);
        }
        
        .feature-item:hover .feature-icon {
            background: var(--primary-color);
            color: white;
            transform: rotate(360deg);
        }
        
        .feature-content h3 {
            font-size: 18px;
            margin-bottom: 5px;
        }
        
        .feature-content p {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.5;
        }
        
        .service-cta {
            margin-top: 40px;
        }
        
        /* Pricing Section */
        .pricing-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .pricing-card {
            background: rgba(6, 15, 29, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 30px;
            transition: var(--transition-medium);
            position: relative;
            overflow: hidden;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .pricing-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }
        
        .pricing-card.featured {
            border: 2px solid var(--accent-color);
            box-shadow: 0 0 20px rgba(0, 238, 255, 0.3);
        }
        
        .pricing-badge {
            position: absolute;
            top: 0;
            right: 30px;
            background: var(--accent-color);
            color: var(--darker-color);
            padding: 5px 15px;
            border-radius: 0 0 10px 10px;
            font-size: 12px;
            font-weight: 700;
            text-transform: uppercase;
            box-shadow: 0 5px 10px rgba(0, 238, 255, 0.3);
        }
        
        .pricing-header {
            text-align: center;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .pricing-header h3 {
            font-size: 22px;
            margin-bottom: 15px;
        }
        
        .pricing-price {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 5px;
        }
        
        .price {
            font-size: 36px;
            font-weight: 700;
            color: var(--primary-color);
        }
        
        .period {
            font-size: 14px;
            color: rgba(255, 255, 255, 0.6);
        }
        
        .pricing-features {
            margin-bottom: 30px;
        }
        
        .pricing-features ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        
        .pricing-features li {
            padding: 10px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 14px;
        }
        
        .pricing-features li i {
            color: var(--accent-color);
        }
        
        .pricing-footer {
            text-align: center;
        }
        
        .custom-pricing {
            margin-top: 50px;
            background: rgba(14, 118, 188, 0.1);
            border-radius: 10px;
            padding: 40px;
            text-align: center;
        }
        
        .custom-pricing-content h3 {
            font-size: 28px;
            margin-bottom: 15px;
        }
        
        .custom-pricing-content p {
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* Why Choose Us Section */
        .advantages-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 30px;
            margin-top: 50px;
        }
        
        .advantage-card {
            background: rgba(6, 15, 29, 0.7);
            backdrop-filter: blur(10px);
            border-radius: 10px;
            padding: 30px;
            text-align: center;
            transition: var(--transition-medium);
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            border-left: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .advantage-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
        }
        
        .advantage-icon {
            width: 80px;
            height: 80px;
            background: rgba(14, 118, 188, 0.1);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto 20px;
            font-size: 32px;
            color: var(--accent-color);
            transition: var(--transition-medium);
        }
        
        .advantage-card:hover .advantage-icon {
            background: var(--primary-color);
            color: white;
            transform: rotateY(360deg);
        }
        
        .advantage-title {
            font-size: 20px;
            margin-bottom: 15px;
            position: relative;
            padding-bottom: 15px;
        }
        
        .advantage-title::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 50px;
            height: 3px;
            background: var(--primary-color);
            transition: var(--transition-medium);
        }
        
        .advantage-card:hover .advantage-title::after {
            width: 80px;
            background: var(--accent-color);
        }
        
        .advantage-description {
            line-height: 1.6;
            color: rgba(255, 255, 255, 0.8);
        }
        
        /* Security Tips */
        .security-tip {
            position: fixed;
            bottom: 20px;
            right: -350px;
            width: 300px;
            background: rgba(14, 118, 188, 0.9);
            backdrop-filter: blur(10px);
            border-left: 4px solid var(--accent-color);
            border-radius: 5px;
            padding: 15px;
            display: flex;
            align-items: center;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            transition: right 0.5s ease;
            z-index: 100;
        }
        
        .security-tip.show {
            right: 20px;
        }
        
        .security-tip i {
            font-size: 24px;
            margin-right: 15px;
        }
        
        .security-tip p {
            flex: 1;
            font-size: 14px;
            margin: 0;
        }
        
        .close-tip {
            cursor: pointer;
            padding: 5px;
        }
        
        .close-tip:hover {
            opacity: 0.8;
        }
        
        /* Responsive Styles */
        @media (max-width: 1200px) {
            .service-detail-container {
                flex-direction: column;
                gap: 50px;
            }
            
            .service-detail-container.reversed {
                flex-direction: column;
            }
            
            .service-detail-image {
                width: 100%;
            }
        }
        
        @media (max-width: 768px) {
            .services-container {
                grid-template-columns: 1fr;
            }
            
            .pricing-container {
                grid-template-columns: 1fr;
            }
            
            .advantages-container {
                grid-template-columns: 1fr;
            }
            
            .service-features-list {
                grid-template-columns: 1fr;
            }
            
            .category-tabs {
                flex-direction: column;
                align-items: center;
            }
            
            .category-tab {
                width: 100%;
                max-width: 300px;
            }
        }

        /* ===== PERFORMANCE OPTIMIZATIONS ===== */
        /* Disable AOS animations on mobile for better performance */
        @media (max-width: 992px) {
            [data-aos] {
                opacity: 1 !important;
                transform: none !important;
                transition: none !important;
                pointer-events: auto !important;
            }

            [data-aos-delay] {
                transition-delay: 0s !important;
            }

            /* Disable all heavy animations on mobile */
            .service-card,
            .pricing-card,
            .advantage-card,
            .testimonial-slide {
                transform: none !important;
                transition: none !important;
                animation: none !important;
            }

            /* Disable hover effects on mobile */
            .service-card:hover,
            .pricing-card:hover {
                transform: none !important;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
            }
        }

        /* Reduce AOS delays on smaller screens */
        @media (min-width: 993px) and (max-width: 1400px) {
            [data-aos-delay="100"] { transition-delay: 50ms !important; }
            [data-aos-delay="200"] { transition-delay: 100ms !important; }
            [data-aos-delay="300"] { transition-delay: 150ms !important; }
            [data-aos-delay="400"] { transition-delay: 200ms !important; }
            [data-aos-delay="500"] { transition-delay: 250ms !important; }
            [data-aos-delay="600"] { transition-delay: 300ms !important; }
        }