/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* Dark Cyber Color Palette */
    --primary-cyan: #00ffff;
    --primary-purple: #8b5cf6;
    --primary-pink: #ec4899;
    --primary-green: #10b981;
    --primary-orange: #f59e0b;
    --primary-red: #ef4444;
    
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #1e1e1e;
    
    --text-primary: #ffffff;
    --text-secondary: #a1a1aa;
    --text-accent: #00ffff;
    
    --border-primary: #2a2a2a;
    --border-accent: #00ffff;
    
    --gradient-primary: linear-gradient(135deg, #00ffff 0%, #8b5cf6 50%, #ec4899 100%);
    --gradient-secondary: linear-gradient(135deg, #10b981 0%, #00ffff 100%);
    --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    
    /* Typography */
    --font-primary: 'Orbitron', monospace;
    --font-secondary: 'Rajdhani', sans-serif;
    --font-accent: 'Exo 2', sans-serif;
    
    /* Spacing */
    --section-padding: 60px 0;
    --container-padding: 0 20px;
    
    /* Shadows */
    --glow-primary: 0 0 20px rgba(0, 255, 255, 0.3);
    --glow-secondary: 0 0 30px rgba(139, 92, 246, 0.4);
    --glow-accent: 0 0 25px rgba(236, 72, 153, 0.3);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-secondary);
    background: var(--bg-primary);
    color: var(--text-primary);
    overflow-x: hidden;
    line-height: 1.6;
}

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--container-padding);
}

/* Particle Background */
#particles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0a 100%);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1rem;
}

h1 { font-size: clamp(2.5rem, 6vw, 5rem); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.5rem, 4vw, 2.5rem); }

.accent {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Navigation */
.cyber-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-primary);
    z-index: 1000;
    transition: all var(--transition-normal);
}

.cyber-nav.scrolled {
    background: rgba(10, 10, 10, 0.98);
    box-shadow: var(--glow-primary);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.logo-link {
    text-decoration: none;
    transition: transform var(--transition-normal);
}

.logo-link:hover {
    transform: scale(1.05);
}

.logo-icon {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.hexagon {
    width: 40px;
    height: 40px;
    background: var(--gradient-primary);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: rotate 3s linear infinite;
}

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

.logo-text {
    font-family: var(--font-primary);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-primary);
}

.nav-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
}

/* Removed duplicate nav-link styles - using enhanced versions below */

/* Dropdown Navigation */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-toggle {
    cursor: pointer;
}

.dropdown-link {
    display: block;
    padding: 0.75rem 1rem;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-normal);
    border-bottom: 1px solid var(--border-primary);
    /* Ensure links fit properly */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.25rem;
}

.dropdown-link:last-child {
    border-bottom: none;
}

.dropdown-link:hover {
    color: var(--text-accent);
    background: rgba(0, 255, 255, 0.1);
    padding-left: 2rem;
}

.dropdown-link::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    background: var(--gradient-primary);
    transform: scaleY(0);
    transition: transform var(--transition-normal);
}

.dropdown-link:hover::before {
    transform: scaleY(1);
}

.nav-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 4px;
}

.bar {
    width: 25px;
    height: 3px;
    background: var(--text-primary);
    transition: all var(--transition-normal);
}

/* Hero Section */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 0;
}

.hero-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background: linear-gradient(45deg, 
        rgba(0, 255, 255, 0.1) 0%, 
        rgba(139, 92, 246, 0.1) 25%, 
        rgba(236, 72, 153, 0.1) 50%, 
        rgba(16, 185, 129, 0.1) 75%, 
        rgba(0, 255, 255, 0.1) 100%);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

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

.cyber-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

/* Holographic Cubes */
.holographic-cube {
    position: absolute;
    width: 60px;
    height: 60px;
    transform-style: preserve-3d;
    animation: holographicFloat 8s ease-in-out infinite;
}

.cube-1 {
    top: 10%;
    left: 5%;
    animation-delay: 0s;
}

.cube-2 {
    top: 30%;
    right: 8%;
    animation-delay: 2.5s;
}

.cube-3 {
    bottom: 20%;
    left: 15%;
    animation-delay: 5s;
}

.cube-face {
    position: absolute;
    width: 80px;
    height: 80px;
    background: linear-gradient(45deg, 
        rgba(0, 255, 255, 0.3), 
        rgba(138, 43, 226, 0.3),
        rgba(0, 255, 255, 0.1)
    );
    border: 2px solid rgba(0, 255, 255, 0.6);
    backdrop-filter: blur(5px);
}

.cube-face.front { transform: rotateY(0deg) translateZ(40px); }
.cube-face.back { transform: rotateY(180deg) translateZ(40px); }
.cube-face.right { transform: rotateY(90deg) translateZ(40px); }
.cube-face.left { transform: rotateY(-90deg) translateZ(40px); }
.cube-face.top { transform: rotateX(90deg) translateZ(40px); }
.cube-face.bottom { transform: rotateX(-90deg) translateZ(40px); }

/* Quantum Spheres */
.quantum-sphere {
    position: absolute;
    width: 80px;
    height: 80px;
    animation: quantumFloat 10s ease-in-out infinite;
}

.sphere-1 {
    top: 15%;
    right: 12%;
    animation-delay: 1s;
}

.sphere-2 {
    bottom: 25%;
    right: 20%;
    animation-delay: 4s;
}

.sphere-ring {
    position: absolute;
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 50%;
    animation: ringRotate 6s linear infinite;
}

.sphere-ring.ring-1 {
    width: 100px;
    height: 100px;
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.sphere-ring.ring-2 {
    width: 80px;
    height: 80px;
    top: 10px;
    left: 10px;
    animation-delay: 2s;
    animation-direction: reverse;
}

.sphere-ring.ring-3 {
    width: 60px;
    height: 60px;
    top: 20px;
    left: 20px;
    animation-delay: 4s;
}

.sphere-core {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 40px;
    left: 40px;
    background: radial-gradient(circle, var(--primary-cyan), transparent);
    border-radius: 50%;
    animation: corePulse 2s ease-in-out infinite;
}

/* Cyber Hexagons */
.cyber-hexagon {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--primary-cyan), var(--primary-purple));
    clip-path: polygon(30% 0%, 70% 0%, 100% 50%, 70% 100%, 30% 100%, 0% 50%);
    opacity: 0.7;
    animation: hexagonFloat 7s ease-in-out infinite;
}

.hex-1 {
    top: 40%;
    left: 3%;
    animation-delay: 1.5s;
}

.hex-2 {
    top: 60%;
    right: 5%;
    animation-delay: 3.5s;
}

.hex-3 {
    bottom: 40%;
    left: 25%;
    animation-delay: 6s;
}

/* Particle Field */
.particle-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--primary-cyan);
    border-radius: 50%;
    animation: particleFloat 12s linear infinite;
    box-shadow: 0 0 10px var(--primary-cyan);
}

.particle-1 { top: 8%; left: 12%; animation-delay: 0s; }
.particle-2 { top: 25%; right: 15%; animation-delay: 1.5s; }
.particle-3 { top: 45%; left: 8%; animation-delay: 3s; }
.particle-4 { top: 65%; right: 10%; animation-delay: 4.5s; }
.particle-5 { top: 20%; left: 60%; animation-delay: 6s; }
.particle-6 { top: 50%; right: 30%; animation-delay: 7.5s; }
.particle-7 { top: 75%; left: 40%; animation-delay: 9s; }
.particle-8 { top: 35%; left: 80%; animation-delay: 10.5s; }

/* Energy Beams */
.energy-beam {
    position: absolute;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
    animation: beamSweep 4s ease-in-out infinite;
    box-shadow: 0 0 20px var(--primary-cyan);
}

.beam-1 {
    top: 20%;
    left: 0;
    width: 30%;
    animation-delay: 0s;
}

.beam-2 {
    top: 60%;
    right: 0;
    width: 25%;
    animation-delay: 1.5s;
    animation-direction: reverse;
}

.beam-3 {
    bottom: 30%;
    left: 50%;
    width: 20%;
    animation-delay: 3s;
}

/* Animations */
@keyframes holographicFloat {
    0%, 100% {
        transform: translateY(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    25% {
        transform: translateY(-30px) rotateX(90deg) rotateY(90deg) rotateZ(45deg);
    }
    50% {
        transform: translateY(-60px) rotateX(180deg) rotateY(180deg) rotateZ(90deg);
    }
    75% {
        transform: translateY(-30px) rotateX(270deg) rotateY(270deg) rotateZ(135deg);
    }
}

@keyframes quantumFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(-40px) scale(1.2);
    }
}

@keyframes ringRotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
    }
}

@keyframes corePulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.5);
        opacity: 0.7;
    }
}

@keyframes hexagonFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-25px) rotate(180deg);
    }
}

@keyframes particleFloat {
    0% {
        transform: translateY(0px) translateX(0px);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) translateX(50px);
        opacity: 0;
    }
}

@keyframes beamSweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

.hero-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    position: relative;
    z-index: 2;
    min-height: 100vh;
    gap: 1.5rem;
    width: 100% !important;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    padding-top: 200px;
    padding-bottom: 80px;
    box-sizing: border-box;
}

.hero-text {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    max-width: 900px;
    margin: 0 auto !important;
    width: 100% !important;
}

.hero-visual {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

/* Animation Zones */
.animation-zone {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    background: rgba(0, 255, 255, 0.02);
    border: 1px solid rgba(0, 255, 255, 0.1);
    backdrop-filter: blur(5px);
}

.top-zone {
    top: 5%;
    left: 10%;
    width: 200px;
    height: 180px;
    animation: zoneFloat 8s ease-in-out infinite;
}

.middle-zone {
    top: 50%;
    right: 10%;
    width: 180px;
    height: 200px;
    animation: zoneFloat 10s ease-in-out infinite reverse;
}

.bottom-zone {
    bottom: 10%;
    left: 20%;
    width: 160px;
    height: 160px;
    animation: zoneFloat 12s ease-in-out infinite;
}

.cyber-title {
    margin-bottom: 0;
    line-height: 1.1;
    font-size: 4rem;
    font-weight: 900;
    text-align: center !important;
    position: relative;
    z-index: 10;
    width: 100% !important;
    opacity: 1;
    overflow: visible;
}

/* Typewriter Effect for Each Line */
.typewriter-text {
    display: block;
    position: relative;
    margin-bottom: 0.5rem;
    min-height: 1.2em;
}

.typewriter-cursor {
    color: var(--primary-cyan);
    animation: blink 1s infinite;
    font-weight: 900;
    font-size: inherit;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Hide cursor after animation completes */
.typewriter-text.completed .typewriter-cursor {
    display: none;
}

.cyber-title::after {
    display: none;
}

.title-line {
    display: block !important;
    margin-bottom: 0.5rem;
    position: relative;
    opacity: 1;
    z-index: 10;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center !important;
    width: 100% !important;
}

.title-line:last-child {
    margin-bottom: 1rem;
}

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

@keyframes textGlow {
    from { opacity: 0.7; }
    to { opacity: 1; }
}

.cyber-description {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 4rem;
    color: var(--text-primary);
    line-height: 1.8;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    animation: fadeInUp 1s ease-out 0.8s both;
}

.hero-buttons {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    animation: fadeInUp 1s ease-out 1s both;
    width: 100%;
    margin-top: 2rem;
}

.cyber-btn {
    position: relative;
    padding: 1rem 2rem;
    border: 2px solid var(--border-accent);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all var(--transition-normal);
    overflow: hidden;
}

.cyber-btn.primary {
    background: var(--gradient-primary);
    border: none;
}

.cyber-btn.secondary {
    background: transparent;
    border-color: var(--primary-purple);
}

.cyber-btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--glow-primary);
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
}

.cyber-btn:hover .btn-glow {
    left: 100%;
}


.hologram-container {
    position: relative;
    width: 300px;
    height: 300px;
}

.hologram-ring {
    position: absolute;
    border: 2px solid var(--primary-cyan);
    border-radius: 50%;
    animation: rotate 4s linear infinite;
}

.ring-1 {
    width: 100%;
    height: 100%;
    animation-duration: 4s;
}

.ring-2 {
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    animation-duration: 3s;
    animation-direction: reverse;
}

.ring-3 {
    width: 40%;
    height: 40%;
    top: 30%;
    left: 30%;
    animation-duration: 2s;
}

.hologram-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.core-pulse {
    width: 20px;
    height: 20px;
    background: var(--text-primary);
    border-radius: 50%;
    animation: pulse 1s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.7; }
}

.scroll-indicator {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    animation: bounce 2s infinite;
    z-index: 10;
}

.scroll-line {
    width: 2px;
    height: 40px;
    background: var(--gradient-primary);
}

.scroll-text {
    font-family: var(--font-primary);
    font-size: 0.8rem;
    color: var(--text-accent);
    letter-spacing: 2px;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
    40% { transform: translateX(-50%) translateY(-10px); }
    60% { transform: translateX(-50%) translateY(-5px); }
}

/* Section Styles */
section {
    padding: var(--section-padding);
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 2rem;
}

.section-title {
    position: relative;
    margin-bottom: 1rem;
}

.section-title::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    opacity: 0.7;
    animation: textGlow 3s ease-in-out infinite alternate;
}

.section-subtitle {
    font-size: 1.2rem;
    color: var(--text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* Sectors Section */
.sectors-section {
    background: var(--bg-secondary);
    position: relative;
    z-index: 1;
}

.sectors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    height: auto;
    position: relative;
    z-index: 2;
}

.sector-card {
    position: relative;
    background: linear-gradient(135deg, 
        rgba(10, 25, 45, 0.9) 0%, 
        rgba(20, 35, 55, 0.8) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: visible;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    backdrop-filter: blur(10px);
    min-height: 500px;
    height: auto;
    z-index: 1;
}

.sector-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(0, 255, 255, 0.05) 0%, 
        transparent 50%, 
        rgba(255, 0, 255, 0.05) 100%);
    opacity: 0;
    transition: all 0.4s ease;
    border-radius: 20px;
}

.sector-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, 
        var(--primary-cyan), 
        var(--primary-purple), 
        var(--primary-green), 
        var(--primary-cyan));
    border-radius: 21px;
    z-index: -1;
    opacity: 0;
    transition: all 0.4s ease;
}

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

.sector-card:hover::after {
    opacity: 0.6;
}

.sector-card:hover {
    border-color: var(--primary-cyan);
    box-shadow: 
        0 10px 20px rgba(0, 255, 255, 0.1),
        0 0 10px rgba(0, 255, 255, 0.05);
}

.card-header {
    text-align: center;
    margin-bottom: 2rem;
    position: relative;
    z-index: 2;
}

.sector-card h3 {
    font-family: var(--font-primary);
    font-size: 1.6rem;
    color: var(--text-primary);
    margin: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
    line-height: 1.3;
}

.sector-card:hover h3 {
    color: var(--primary-cyan);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.card-content {
    position: relative;
    z-index: 2;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1rem;
}

.card-summary {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
    transition: all 0.4s ease;
    font-weight: 400;
    overflow: visible;
    word-wrap: break-word;
    hyphens: auto;
}

.sector-card:hover .card-summary {
    color: var(--text-primary);
}


/* View More Button */
.view-more-btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));
    color: var(--text-primary);
    text-decoration: none;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    margin-top: 1.5rem;
    text-align: center;
    border: 1px solid rgba(0, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.view-more-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: left 0.5s ease;
}

.view-more-btn:hover::before {
    left: 100%;
}

.view-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-cyan));
}

.card-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gradient-primary);
    opacity: 0;
    transition: opacity var(--transition-normal);
    border-radius: 15px;
    z-index: -1;
}

.sector-card:hover .card-glow {
    opacity: 0.05;
}


/* Tech Stack Section */
.tech-section {
    background: var(--bg-primary);
    padding: 6rem 0;
}

.tech-stack-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2.5rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.tech-card {
    background: linear-gradient(135deg, 
        rgba(10, 25, 45, 0.9) 0%, 
        rgba(20, 35, 55, 0.8) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tech-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(0, 255, 255, 0.05) 0%, 
        transparent 50%, 
        rgba(255, 0, 255, 0.05) 100%);
    opacity: 0;
    transition: all 0.4s ease;
    border-radius: 20px;
}

.tech-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, 
        var(--primary-cyan), 
        var(--primary-purple), 
        var(--primary-green), 
        var(--primary-cyan));
    border-radius: 21px;
    z-index: -1;
    opacity: 0;
    transition: all 0.4s ease;
}

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

.tech-card:hover::after {
    opacity: 0.6;
}

.tech-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-cyan);
    box-shadow: 
        0 20px 40px rgba(0, 255, 255, 0.2),
        0 0 20px rgba(0, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.tech-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
}

.tech-card:hover .tech-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
}

.tech-card h3 {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

.tech-card:hover h3 {
    color: var(--primary-cyan);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.tech-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    transition: all 0.4s ease;
}

.tech-card:hover .tech-description {
    color: var(--text-primary);
}

.tech-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    margin-top: auto;
}

.tech-tag {
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.1), 
        rgba(255, 0, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    color: var(--primary-cyan);
    padding: 0.4rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.tech-tag:hover {
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.2), 
        rgba(255, 0, 255, 0.2));
    border-color: var(--primary-cyan);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 255, 255, 0.3);
}

/* Vision Section */
.vision-section {
    background: var(--bg-secondary);
    padding: 6rem 0;
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.vision-card {
    background: linear-gradient(135deg, 
        rgba(10, 25, 45, 0.9) 0%, 
        rgba(20, 35, 55, 0.8) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 3rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-height: 400px;
}

.vision-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, 
        rgba(0, 255, 255, 0.05) 0%, 
        transparent 50%, 
        rgba(255, 0, 255, 0.05) 100%);
    opacity: 0;
    transition: all 0.4s ease;
    border-radius: 20px;
}

.vision-card::after {
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    background: linear-gradient(45deg, 
        var(--primary-cyan), 
        var(--primary-purple), 
        var(--primary-green), 
        var(--primary-cyan));
    border-radius: 21px;
    z-index: -1;
    opacity: 0;
    transition: all 0.4s ease;
}

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

.vision-card:hover::after {
    opacity: 0.6;
}

.vision-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-cyan);
    box-shadow: 
        0 20px 40px rgba(0, 255, 255, 0.2),
        0 0 20px rgba(0, 255, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.vision-icon {
    font-size: 4rem;
    margin-bottom: 2rem;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.3));
}

.vision-card:hover .vision-icon {
    transform: scale(1.1);
    filter: drop-shadow(0 0 25px rgba(0, 255, 255, 0.5));
}

.vision-card h3 {
    font-family: var(--font-primary);
    font-size: 1.6rem;
    margin-bottom: 2rem;
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.4s ease;
}

.vision-card:hover h3 {
    color: var(--primary-cyan);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.4);
}

.vision-description {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.8;
    transition: all 0.4s ease;
    flex-grow: 1;
    display: flex;
    align-items: center;
}

.vision-card:hover .vision-description {
    color: var(--text-primary);
}

/* Contact Section */
.contact-section {
    background: var(--bg-primary);
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.contact-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.contact-info h3 {
    font-family: var(--font-primary);
    font-size: 3.5rem;
    margin-bottom: 0;
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    transform: translate(48px, -24px);
}


.contact-form {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 15px;
    border: 1px solid var(--border-primary);
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 1rem;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-secondary);
    font-size: 1rem;
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: var(--glow-primary);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* Footer */
.cyber-footer {
    background: linear-gradient(135deg, 
        rgba(10, 25, 45, 0.98) 0%, 
        rgba(20, 35, 55, 0.95) 100%);
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    padding: 1rem 0 0.5rem;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    margin-bottom: 0.8rem;
    position: relative;
    z-index: 2;
}

.footer-brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
}

.logo-icon {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.hexagon {
    width: 24px;
    height: 24px;
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: rotate 10s linear infinite;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.3));
}

.logo-text {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-primary);
    text-shadow: 0 0 6px rgba(0, 255, 255, 0.2);
}

.logo-text .accent {
    color: var(--primary-cyan);
}

.footer-tagline {
    color: var(--primary-cyan);
    font-size: 0.8rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.footer-nav {
    display: flex;
    gap: 1.5rem;
}

.nav-section h4 {
    font-family: var(--font-primary);
    font-size: 0.7rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.nav-section ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1rem;
}

.nav-section li {
    margin-bottom: 0;
}

.nav-section a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.75rem;
    transition: all 0.3s ease;
    display: inline-block;
}

.nav-section a:hover {
    color: var(--primary-cyan);
    transform: translateY(-1px);
    text-shadow: 0 0 4px rgba(0, 255, 255, 0.3);
}

.footer-social {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-social h4 {
    font-family: var(--font-primary);
    font-size: 0.7rem;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
}

.social-links {
    display: flex;
    gap: 0.8rem;
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.3s ease;
    border-radius: 4px;
    background: rgba(0, 255, 255, 0.08);
    border: 1px solid rgba(0, 255, 255, 0.2);
    position: relative;
    z-index: 1;
}

.social-link:hover {
    color: var(--primary-cyan);
    background: rgba(0, 255, 255, 0.15);
    border-color: var(--primary-cyan);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 255, 255, 0.3);
}

.social-link::before {
    font-family: "Font Awesome 6 Brands", "FontAwesome", sans-serif;
    font-weight: 400;
    font-size: 1rem;
    color: var(--primary-cyan);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
}

.social-instagram::before {
    content: "\f16d";
}

.social-youtube::before {
    content: "\f167";
}

.social-medium::before {
    content: "\f23a";
}

.social-github::before {
    content: "\f09b";
}

/* Fallback with Unicode symbols if Font Awesome doesn't load */
@supports not (font-family: "Font Awesome 6 Brands") {
    .social-instagram::before {
        content: "📷";
        font-family: sans-serif;
    }
    
    .social-youtube::before {
        content: "📺";
        font-family: sans-serif;
    }
    
    .social-medium::before {
        content: "📝";
        font-family: sans-serif;
    }
    
    .social-github::before {
        content: "💻";
        font-family: sans-serif;
    }
}

.social-link:hover::before {
    transform: translate(-50%, -50%) scale(1.2);
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.5));
}


.footer-bottom {
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    padding-top: 0.5rem;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.footer-bottom p {
    color: var(--text-secondary);
    font-size: 0.7rem;
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: 1rem;
}

.footer-legal a {
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.7rem;
    transition: all 0.3s ease;
}

.footer-legal a:hover {
    color: var(--primary-cyan);
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.3);
}

/* Sectors Page Hero Section Adjustments */
.page-hero {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 60vh !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-hero .container {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

.page-hero .container .hero-content {
    transform: translateY(-24px) translateX(-560px) !important; /* Move up by 24px and left by 560px (60px + 250px + 250px) */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.page-hero .cyber-title {
    text-align: center !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
}

.page-hero .cyber-description {
    font-size: 1.2rem !important; /* Increase font size from default */
    font-weight: 600 !important; /* Increase font weight */
    line-height: 1.6 !important; /* Better line height for readability */
    text-align: center !important;
    max-width: 900px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Responsive adjustments for sectors page hero */
@media (max-width: 768px) {
    .page-hero .container {
        padding: 0 15px !important;
    }
    
    .page-hero .cyber-description {
        padding: 0 10px !important;
        font-size: 1.1rem !important;
    }
}

@media (max-width: 480px) {
    .page-hero .container {
        padding: 0 10px !important;
    }
    
    .page-hero .cyber-description {
        padding: 0 5px !important;
        font-size: 1rem !important;
    }
}

/* Technology Innovation Hub Section */
.technology-innovation-hub {
    background: var(--bg-primary);
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}

.technology-innovation-hub::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.05) 0%, 
        rgba(138, 43, 226, 0.05) 50%, 
        rgba(255, 20, 147, 0.05) 100%);
    z-index: 1;
}

.technology-innovation-hub .container {
    position: relative;
    z-index: 2;
}

.innovation-content {
    max-width: 1200px;
    margin: 0 auto;
}

.innovation-intro {
    text-align: center;
    margin-bottom: 3rem;
}

.innovation-intro h3 {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.innovation-intro p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

.innovation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.innovation-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 15px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.innovation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-cyan), var(--primary-purple));
    opacity: 0;
    transition: opacity 0.3s ease;
}

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

.innovation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.1);
    border-color: var(--primary-cyan);
}

.innovation-card h4 {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

.innovation-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.tech-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-tag {
    background: rgba(0, 255, 255, 0.1);
    color: var(--primary-cyan);
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(0, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.tech-tag:hover {
    background: rgba(0, 255, 255, 0.2);
    transform: scale(1.05);
}

.innovation-approach {
    margin-bottom: 4rem;
}

.innovation-approach h3 {
    font-family: var(--font-primary);
    font-size: 2.2rem;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 2.5rem;
    font-weight: 700;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.approach-item {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.approach-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.1);
    border-color: var(--primary-cyan);
}

.approach-item h4 {
    font-family: var(--font-primary);
    font-size: 1.3rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

.approach-item p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
}

.innovation-impact {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 15px;
    padding: 3rem;
}

.innovation-impact h3 {
    font-family: var(--font-primary);
    font-size: 2.2rem;
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-weight: 700;
}

.innovation-impact p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.innovation-impact p:last-child {
    margin-bottom: 0;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }
    
    .footer-brand {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .footer-nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .nav-section ul {
        flex-wrap: wrap;
    }
    
    .social-links {
        justify-content: flex-start;
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    .footer-legal {
        justify-content: center;
    }
    
    /* Technology Innovation Hub Responsive */
    .innovation-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .innovation-card {
        padding: 1.5rem;
    }
    
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .innovation-impact {
        padding: 2rem;
    }
    
    .innovation-intro h3 {
        font-size: 2rem;
    }
    
    .innovation-approach h3,
    .innovation-impact h3 {
        font-size: 1.8rem;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

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

/* Responsive Design */
@media (max-width: 768px) {
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--bg-secondary);
        flex-direction: column;
        justify-content: start;
        padding-top: 2rem;
        transition: left var(--transition-normal);
        border-top: 1px solid var(--border-primary);
    }

    .nav-menu.active {
        left: 0;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-toggle.active .bar:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }

    .nav-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active .bar:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -6px);
    }

    .hero-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        gap: 2rem;
    }

    .hero-visual {
        height: 300px;
    }

    .contact-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .footer-links {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* FORCE CENTERING OVERRIDE */
.hero-section {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding-top: 0 !important;
}

.hero-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-left: 0 !important;
    box-sizing: border-box !important;
}

.hero-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.cyber-title {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}

.title-line {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

.glitch-text, .holographic-text, .neon-text {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
}

/* NEW SCATTERED ANIMATIONS - SMALL & COOL */
.tech-icon-small {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0.4;
    animation: floatTech 8s ease-in-out infinite;
    z-index: 1;
    filter: drop-shadow(0 0 6px rgba(0, 255, 255, 0.15));
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    user-select: none;
}

.tech-icon-small:hover {
    opacity: 0.7;
    transform: scale(1.3) rotate(360deg);
    filter: drop-shadow(0 0 15px rgba(0, 255, 255, 0.4));
    animation-play-state: paused;
}

.tech-icon-small:active {
    transform: scale(1.1) rotate(180deg);
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.6));
}

/* Particle Trail Effect */
.tech-icon-small::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 4px;
    height: 4px;
    background: var(--primary-cyan);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: particleTrail 2s ease-out infinite;
    pointer-events: none;
}

.tech-icon-small:hover::before {
    opacity: 0.8;
    animation: particleTrail 1s ease-out infinite;
}

.particle-small {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--primary-cyan);
    border-radius: 50%;
    opacity: 0.3;
    animation: floatParticle 12s linear infinite;
    z-index: 1;
    box-shadow: 0 0 3px var(--primary-cyan);
}

.line-small {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--primary-cyan), transparent);
    opacity: 0.2;
    animation: floatLine 6s ease-in-out infinite;
    z-index: 1;
    box-shadow: 0 0 2px var(--primary-cyan);
}

/* Tech Icon Positions - Evenly Scattered Across Entire Hero */
.tech-icon-small.icon-1 { top: 10%; left: 8%; animation-delay: 0s; }
.tech-icon-small.icon-2 { top: 20%; right: 12%; animation-delay: 1s; }
.tech-icon-small.icon-3 { top: 15%; left: 25%; animation-delay: 2s; }
.tech-icon-small.icon-4 { top: 30%; right: 25%; animation-delay: 3s; }
.tech-icon-small.icon-5 { top: 25%; left: 45%; animation-delay: 4s; }
.tech-icon-small.icon-6 { top: 40%; right: 8%; animation-delay: 5s; }
.tech-icon-small.icon-7 { top: 35%; left: 65%; animation-delay: 6s; }
.tech-icon-small.icon-8 { top: 50%; right: 35%; animation-delay: 7s; }
.tech-icon-small.icon-9 { top: 45%; left: 15%; animation-delay: 8s; }
.tech-icon-small.icon-10 { top: 60%; right: 50%; animation-delay: 9s; }
.tech-icon-small.icon-11 { top: 55%; left: 35%; animation-delay: 10s; }
.tech-icon-small.icon-12 { top: 70%; right: 15%; animation-delay: 11s; }
.tech-icon-small.icon-13 { top: 65%; left: 55%; animation-delay: 12s; }
.tech-icon-small.icon-14 { top: 80%; right: 40%; animation-delay: 13s; }
.tech-icon-small.icon-15 { top: 75%; left: 75%; animation-delay: 14s; }

/* Particle Positions - Evenly Scattered Across Entire Hero */
.particle-small.particle-1 { top: 12%; left: 10%; animation-delay: 0s; }
.particle-small.particle-2 { top: 22%; right: 15%; animation-delay: 1s; }
.particle-small.particle-3 { top: 18%; left: 30%; animation-delay: 2s; }
.particle-small.particle-4 { top: 32%; right: 30%; animation-delay: 3s; }
.particle-small.particle-5 { top: 28%; left: 50%; animation-delay: 4s; }
.particle-small.particle-6 { top: 42%; right: 12%; animation-delay: 5s; }
.particle-small.particle-7 { top: 38%; left: 70%; animation-delay: 6s; }
.particle-small.particle-8 { top: 52%; right: 40%; animation-delay: 7s; }
.particle-small.particle-9 { top: 48%; left: 20%; animation-delay: 8s; }
.particle-small.particle-10 { top: 62%; right: 55%; animation-delay: 9s; }
.particle-small.particle-11 { top: 58%; left: 40%; animation-delay: 10s; }
.particle-small.particle-12 { top: 72%; right: 20%; animation-delay: 11s; }
.particle-small.particle-13 { top: 68%; left: 60%; animation-delay: 12s; }
.particle-small.particle-14 { top: 82%; right: 45%; animation-delay: 13s; }
.particle-small.particle-15 { top: 78%; left: 80%; animation-delay: 14s; }
.particle-small.particle-16 { top: 8%; left: 60%; animation-delay: 15s; }
.particle-small.particle-17 { top: 88%; right: 70%; animation-delay: 16s; }
.particle-small.particle-18 { top: 92%; left: 5%; animation-delay: 17s; }
.particle-small.particle-19 { top: 5%; right: 80%; animation-delay: 18s; }
.particle-small.particle-20 { top: 95%; left: 90%; animation-delay: 19s; }

/* Line Positions - Evenly Scattered Across Entire Hero */
.line-small.line-1 { top: 15%; left: 0; width: 25%; animation-delay: 0s; }
.line-small.line-2 { top: 35%; right: 0; width: 30%; animation-delay: 1s; }
.line-small.line-3 { top: 55%; left: 0; width: 20%; animation-delay: 2s; }
.line-small.line-4 { top: 75%; right: 0; width: 25%; animation-delay: 3s; }
.line-small.line-5 { top: 25%; left: 30%; width: 20%; animation-delay: 4s; }
.line-small.line-6 { top: 45%; right: 25%; width: 25%; animation-delay: 5s; }
.line-small.line-7 { top: 65%; left: 50%; width: 15%; animation-delay: 6s; }
.line-small.line-8 { top: 85%; right: 50%; width: 20%; animation-delay: 7s; }
.line-small.line-9 { top: 5%; left: 70%; width: 18%; animation-delay: 8s; }
.line-small.line-10 { top: 95%; right: 70%; width: 22%; animation-delay: 9s; }

/* Stardust Effects */
.stardust {
    position: absolute;
    font-size: 1.2rem;
    opacity: 0.4;
    animation: twinkleStardust 3s ease-in-out infinite;
    z-index: 1;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.stardust:hover {
    opacity: 0.7;
    transform: scale(1.5);
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

/* Stardust Positions - Evenly Scattered */
.stardust.stardust-1 { top: 8%; left: 15%; animation-delay: 0s; }
.stardust.stardust-2 { top: 18%; right: 20%; animation-delay: 0.5s; }
.stardust.stardust-3 { top: 28%; left: 40%; animation-delay: 1s; }
.stardust.stardust-4 { top: 38%; right: 45%; animation-delay: 1.5s; }
.stardust.stardust-5 { top: 48%; left: 65%; animation-delay: 2s; }
.stardust.stardust-6 { top: 58%; right: 70%; animation-delay: 2.5s; }
.stardust.stardust-7 { top: 68%; left: 25%; animation-delay: 3s; }
.stardust.stardust-8 { top: 78%; right: 30%; animation-delay: 3.5s; }
.stardust.stardust-9 { top: 88%; left: 55%; animation-delay: 4s; }
.stardust.stardust-10 { top: 12%; right: 60%; animation-delay: 4.5s; }
.stardust.stardust-11 { top: 22%; left: 80%; animation-delay: 5s; }
.stardust.stardust-12 { top: 32%; right: 85%; animation-delay: 5.5s; }

/* Animations */
@keyframes floatTech {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0.4;
    }
    25% {
        transform: translateY(-10px) rotate(90deg);
        opacity: 0.5;
    }
    50% {
        transform: translateY(-5px) rotate(180deg);
        opacity: 0.6;
    }
    75% {
        transform: translateY(-15px) rotate(270deg);
        opacity: 0.5;
    }
}

@keyframes floatParticle {
    0%, 100% {
        transform: translateY(0px) translateX(0px);
        opacity: 0.3;
    }
    25% {
        transform: translateY(-8px) translateX(5px);
        opacity: 0.4;
    }
    50% {
        transform: translateY(-12px) translateX(-3px);
        opacity: 0.5;
    }
    75% {
        transform: translateY(-6px) translateX(8px);
        opacity: 0.4;
    }
}

@keyframes floatLine {
    0%, 100% {
        transform: translateX(0px);
        opacity: 0.2;
    }
    50% {
        transform: translateX(10px);
        opacity: 0.3;
    }
}

@keyframes twinkleStardust {
    0%, 100% {
        opacity: 0.2;
        transform: scale(0.8) rotate(0deg);
        filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2));
    }
    25% {
        opacity: 0.4;
        transform: scale(1.2) rotate(90deg);
        filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.4));
    }
    50% {
        opacity: 0.5;
        transform: scale(1.5) rotate(180deg);
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
    }
    75% {
        opacity: 0.3;
        transform: scale(1.1) rotate(270deg);
        filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.3));
    }
}

@keyframes particleTrail {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
    100% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
}

/* Enhanced Smooth Transitions */
* {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive Scaling */
@media (max-width: 768px) {
    .tech-icon-small {
        font-size: 1.2rem;
    }
    
    .particle-small {
        width: 2px;
        height: 2px;
    }
    
    .line-small {
        height: 0.5px;
    }
}

@media (max-width: 480px) {
    .tech-icon-small {
        font-size: 1rem;
    }
    
    .cyber-title {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    section {
        padding: 60px 0;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cyber-btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Dropdown Menu Styles - REMOVED DUPLICATE */

.dropdown-menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    min-width: 800px;
    max-width: 95vw;
    width: max-content;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-normal);
    z-index: 1000;
    display: flex;
    padding: 1.5rem;
    gap: 1.5rem;
    backdrop-filter: blur(10px);
    overflow: visible;
    /* Ensure dropdown stays within viewport */
    max-height: 80vh;
    overflow-y: auto;
}

/* Smart positioning classes for dynamic adjustment */
.dropdown-menu.smart-left {
    left: 0;
    transform: translateX(0) translateY(-10px);
}

.dropdown-menu.smart-right {
    left: 100%;
    transform: translateX(-100%) translateY(-10px);
}

.dropdown-menu.smart-center {
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
}

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

/* Smart positioning hover states - Higher specificity */
.nav-dropdown:hover .dropdown-menu.smart-left {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) translateY(0) !important;
}

.nav-dropdown:hover .dropdown-menu.smart-right {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-100%) translateY(0) !important;
}

.nav-dropdown:hover .dropdown-menu.smart-center {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
}

/* Ensure dropdown doesn't get cut off on the right side */
.nav-dropdown {
    position: relative;
}

/* Ensure dropdown content doesn't wrap and stays visible */
.dropdown-section {
    flex: 1;
    min-width: 180px;
    max-width: 220px;
    white-space: nowrap;
    overflow: visible;
    padding: 0 0.5rem;
    /* Ensure content fits within section */
    display: flex;
    flex-direction: column;
}

/* Special styling for blogs dropdown - Compact 2-row layout */
.blogs-dropdown {
    min-width: 600px !important;
    max-width: 95vw !important;
    flex-direction: column !important;
    gap: 1rem !important;
    padding: 1.5rem !important;
}

.blogs-dropdown .dropdown-row {
    display: flex;
    gap: 1.5rem;
    justify-content: space-between;
    width: 100%;
}

.blogs-dropdown .dropdown-section {
    min-width: 160px;
    max-width: 180px;
    flex: 1;
    padding: 0 0.5rem;
}

.dropdown-section h3 {
    white-space: nowrap;
    overflow: visible;
    margin-bottom: 0.8rem;
    color: #00ffff;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.dropdown-link {
    display: block;
    padding: 0.4rem 0;
    color: #ccc;
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 500;
    transition: color 0.3s ease;
    white-space: nowrap;
    overflow: visible;
    line-height: 1.3;
}

.dropdown-link:hover {
    color: #00ffff;
}

/* Ensure dropdown doesn't get cut off on any screen */
.nav-dropdown .dropdown-menu {
    overflow: visible;
    white-space: nowrap;
}

/* Smart positioning for dropdowns to stay within viewport */
.nav-dropdown {
    position: relative;
    overflow: visible;
}

/* Ensure dropdown appears below nav item with proper spacing - REMOVED DUPLICATE */

/* Prevent dropdown from being hidden behind other elements - REMOVED DUPLICATE */

/* Dropdown positioning handled by main .dropdown-menu rule */

/* Removed duplicate rule - handled by main .dropdown-link rule */

.dropdown-section h4 {
    color: var(--primary-cyan);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--border-primary);
    padding-bottom: 0.5rem;
}

/* Removed duplicate rule - handled by main .dropdown-link rule */

.dropdown-link:hover,
.dropdown-link.active {
    color: var(--text-accent);
    background: rgba(0, 255, 255, 0.1);
}

/* Page-specific styles */
.page-hero {
    min-height: 60vh;
    display: flex;
    position: relative;
    overflow: hidden;
    padding-top: 100px;
}

.breadcrumb {
    background: var(--bg-secondary);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border-primary);
}

.breadcrumb .container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.breadcrumb a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--text-accent);
}

.breadcrumb .separator {
    color: var(--text-light);
}

.breadcrumb .current {
    color: var(--text-primary);
    font-weight: 500;
}

/* Timeline Styles */
.timeline-section {
    background: var(--bg-secondary);
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gradient-primary);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-year {
    background: var(--gradient-primary);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 100px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.timeline-content {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-primary);
    margin: 0 2rem;
    flex: 1;
    position: relative;
}

.timeline-content::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
}

.timeline-item:nth-child(odd) .timeline-content::before {
    right: -30px;
    border-left-color: var(--bg-card);
}

.timeline-item:nth-child(even) .timeline-content::before {
    left: -30px;
    border-right-color: var(--bg-card);
}

.timeline-content h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.timeline-content h4 {
    color: var(--primary-cyan);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.timeline-achievements {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.achievement {
    background: rgba(0, 255, 255, 0.1);
    color: var(--primary-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Milestones Grid */
.milestones-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.milestone-card {
    background: var(--bg-card);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    border: 1px solid var(--border-primary);
    transition: transform var(--transition-normal);
}

.milestone-card:hover {
    transform: translateY(-5px);
}

.milestone-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.milestone-card h3 {
    color: var(--primary-cyan);
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.milestone-card h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Impact Stats */
.impact-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin: 3rem 0;
}

.impact-stats .stat-item {
    text-align: center;
    padding: 2rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}

.impact-stats .stat-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--primary-cyan);
    margin-bottom: 0.5rem;
}

.impact-stats .stat-label {
    color: var(--text-secondary);
    font-size: 1rem;
}

/* City Impact Grid */
.city-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}

.city-item {
    background: var(--bg-card);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid var(--border-primary);
}

.city-item h4 {
    color: var(--primary-cyan);
    margin-bottom: 0.5rem;
}

/* Leadership Styles */
.leadership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.leader-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    gap: 1.5rem;
    transition: transform var(--transition-normal);
}

.leader-card:hover {
    transform: translateY(-5px);
}

.leader-image {
    flex-shrink: 0;
    text-align: center;
}

.leader-avatar {
    width: 80px;
    height: 80px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.leader-avatar.small {
    width: 50px;
    height: 50px;
    font-size: 1rem;
}

.leader-status {
    background: var(--primary-cyan);
    color: var(--bg-dark);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

.leader-info h3 {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.leader-info h4 {
    color: var(--primary-cyan);
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.leader-location {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.leader-bio {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.leader-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.expertise-tag {
    background: rgba(0, 255, 255, 0.1);
    color: var(--primary-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
}

.leader-education,
.leader-achievements {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

/* Regional Leadership */
.regional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.region-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 1.5rem;
}

.region-card h3 {
    color: var(--primary-cyan);
    margin-bottom: 1rem;
}

.region-leader {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.leader-details h4 {
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.leader-details p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

/* Department Heads */
.department-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.department-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 1.5rem;
    text-align: center;
}

.department-card h3 {
    color: var(--primary-cyan);
    margin-bottom: 1rem;
}

.dept-leader {
    display: flex;
    align-items: center;
    gap: 1rem;
    text-align: left;
}

/* Philosophy Grid */
.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.philosophy-item {
    text-align: center;
    padding: 2rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}

.philosophy-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.philosophy-item h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

/* Trends Styles */
.trends-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
}

.trend-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    transition: transform var(--transition-normal);
}

.trend-card:hover {
    transform: translateY(-5px);
}

.trend-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.trend-icon {
    font-size: 2.5rem;
}

.trend-header h3 {
    color: var(--text-primary);
    flex: 1;
}

.trend-status {
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.trend-status.hot {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.trend-status.emerging {
    background: rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

.trend-status.stable {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.trend-status.growing {
    background: rgba(59, 130, 246, 0.2);
    color: #3b82f6;
}

.trend-status.mature {
    background: rgba(139, 92, 246, 0.2);
    color: #8b5cf6;
}

.trend-status.accelerating {
    background: rgba(236, 72, 153, 0.2);
    color: #ec4899;
}

.trend-description {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.trend-metrics {
    display: flex;
    gap: 2rem;
    margin-bottom: 1.5rem;
}

.metric {
    text-align: center;
}

.metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-cyan);
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.trend-highlights h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.trend-highlights ul {
    list-style: none;
    padding: 0;
}

.trend-highlights li {
    padding: 0.25rem 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 1rem;
}

.trend-highlights li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--primary-cyan);
    font-size: 0.8rem;
}

/* Regional Trends */
.regional-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.region-trend {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
}

.region-trend h3 {
    color: var(--primary-cyan);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.region-focus h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.region-focus p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.region-stats {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.region-stats .stat {
    background: rgba(0, 255, 255, 0.1);
    color: var(--primary-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

/* Future Outlook */
.outlook-timeline {
    max-width: 800px;
    margin: 0 auto;
}

.outlook-item {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
}

.outlook-year {
    background: var(--gradient-primary);
    color: white;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 80px;
    text-align: center;
}

.outlook-content h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.outlook-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Process Steps */
.steps-timeline {
    max-width: 1000px;
    margin: 0 auto;
}

.step-item {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border-primary);
    position: relative;
}

.step-number {
    background: var(--gradient-primary);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.step-content h3 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.step-content h4 {
    color: var(--primary-cyan);
    margin-bottom: 1rem;
    font-size: 1rem;
}

.step-content p {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.step-activities h5,
.step-deliverables h5 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.step-activities ul {
    list-style: none;
    padding: 0;
    margin-bottom: 1rem;
}

.step-activities li {
    padding: 0.25rem 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 1rem;
}

.step-activities li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--primary-cyan);
    font-size: 0.8rem;
}

.step-deliverables {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.deliverable {
    background: rgba(0, 255, 255, 0.1);
    color: var(--primary-cyan);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.step-duration {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Methodology Features */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.feature-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: transform var(--transition-normal);
}

.feature-card:hover {
    transform: translateY(-5px);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.feature-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Quality Assurance */
.qa-process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

.qa-phase h3 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
}

.qa-details {
    display: grid;
    gap: 1rem;
}

.qa-item h4 {
    color: var(--primary-cyan);
    margin-bottom: 0.5rem;
}

.qa-item p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.qa-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.qa-metrics .metric {
    text-align: center;
    padding: 1rem;
    background: var(--bg-secondary);
    border-radius: 8px;
}

.qa-metrics .metric-value {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--primary-cyan);
    margin-bottom: 0.25rem;
}

.qa-metrics .metric-label {
    color: var(--text-secondary);
    font-size: 0.9rem;
}

/* Hero Navigation */
.hero-navigation {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
}

.hero-navigation .cyber-btn {
    text-decoration: none;
    display: inline-block;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

::-webkit-scrollbar-thumb {
    background: var(--gradient-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-cyan);
}

/* Advanced Text Animations */
.glitch-text {
    position: relative;
    display: block;
    animation: glitchMain 4s ease-in-out infinite;
    text-align: center;
    width: 100%;
    transition: all 0.3s ease;
}

.glitch-text:hover {
    animation: glitchHover 0.5s ease-in-out;
    filter: hue-rotate(90deg);
}

@keyframes glitchHover {
    0%, 100% { transform: translate(0); }
    20% { transform: translate(-2px, 2px); }
    40% { transform: translate(-2px, -2px); }
    60% { transform: translate(2px, 2px); }
    80% { transform: translate(2px, -2px); }
}

.glitch-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: glitchLayer 2s ease-in-out infinite;
    pointer-events: none;
}

.layer-1 {
    color: #ff0040;
    animation-delay: 0s;
    z-index: 1;
    opacity: 0.3;
}

.layer-2 {
    color: #00ff40;
    animation-delay: 0.1s;
    z-index: 2;
    opacity: 0.3;
}

.layer-3 {
    color: #4000ff;
    animation-delay: 0.2s;
    z-index: 3;
    opacity: 0.3;
}

.main-text {
    position: relative;
    z-index: 10;
    color: var(--text-primary);
    font-weight: 900;
    text-shadow: 0 0 2px rgba(0, 255, 255, 0.2);
    filter: none;
    opacity: 1;
}

.holographic-text {
    position: relative;
    display: block;
    animation: hologramMain 5s ease-in-out infinite;
    text-align: center;
    width: 100%;
}

.hologram-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: hologramLayer 3s ease-in-out infinite;
    pointer-events: none;
}

.hologram-layer.layer-1 {
    color: rgba(0, 255, 255, 0.3);
    animation-delay: 0s;
    z-index: 1;
}

.hologram-layer.layer-2 {
    color: rgba(138, 43, 226, 0.3);
    animation-delay: 0.5s;
    z-index: 2;
}

.hologram-layer.layer-3 {
    color: rgba(0, 255, 255, 0.2);
    animation-delay: 1s;
    z-index: 3;
}

.holographic-text .main-text {
    color: var(--primary-cyan);
    text-shadow: 
        0 0 1px var(--primary-cyan),
        0 0 2px var(--primary-cyan);
    filter: none;
    opacity: 1;
}

.neon-text {
    position: relative;
    display: block;
    animation: none;
    text-align: center;
    width: 100%;
}

.neon-glow {
    display: none;
}

.neon-text .main-text {
    color: var(--primary-cyan);
    text-shadow: none;
    filter: none;
    opacity: 1;
}

/* Simple Text Styles - Clean and Simple */
.simple-text {
    color: #ffffff;
    text-shadow: none;
    filter: none;
    opacity: 1;
    animation: none;
    position: relative;
    display: block;
    text-align: center;
    width: 100%;
    font-weight: 900;
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 0.5rem;
    transition: none;
}

.simple-text:hover {
    color: #ffffff;
    text-shadow: none;
    filter: none;
    transform: none;
    animation: none;
}

/* Cyber Orbs */
.cyber-orb {
    position: relative;
    width: 120px;
    height: 120px;
    animation: orbFloat 8s ease-in-out infinite;
    margin: 0.5rem;
}

.orb-1 {
    animation-delay: 0s;
}

.orb-2 {
    animation-delay: 4s;
}

.orb-ring {
    position: absolute;
    border: 2px solid rgba(0, 255, 255, 0.6);
    border-radius: 50%;
    animation: orbRotate 8s linear infinite;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.4);
}

.orb-ring.ring-1 {
    width: 120px;
    height: 120px;
    top: 0;
    left: 0;
    animation-delay: 0s;
}

.orb-ring.ring-2 {
    width: 90px;
    height: 90px;
    top: 15px;
    left: 15px;
    animation-delay: 1s;
    animation-direction: reverse;
}

.orb-ring.ring-3 {
    width: 60px;
    height: 60px;
    top: 30px;
    left: 30px;
    animation-delay: 2s;
}

.orb-core {
    position: absolute;
    width: 20px;
    height: 20px;
    top: 50px;
    left: 50px;
    background: radial-gradient(circle, var(--primary-cyan), var(--primary-purple));
    border-radius: 50%;
    animation: corePulse 2s ease-in-out infinite;
    box-shadow: 0 0 20px var(--primary-cyan);
}

/* Tech Icons */
.tech-icon {
    position: relative;
    font-size: 1.8rem;
    animation: techFloat 6s ease-in-out infinite;
    filter: drop-shadow(0 0 8px var(--primary-cyan));
    z-index: 2;
    margin: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    transition: all var(--transition-normal);
}

.tech-icon:hover {
    transform: scale(1.2) rotate(10deg);
    background: rgba(0, 255, 255, 0.1);
    box-shadow: 0 0 20px var(--primary-cyan);
}

.icon-1 {
    animation-delay: 0s;
}

.icon-2 {
    animation-delay: 1s;
}

.icon-3 {
    animation-delay: 2s;
}

.icon-4 {
    animation-delay: 3s;
}

.icon-5 {
    animation-delay: 4s;
}

.icon-6 {
    animation-delay: 5s;
}

/* Cyber Lines */
.cyber-line {
    position: relative;
    background: linear-gradient(45deg, transparent, var(--primary-cyan), transparent);
    animation: lineSweep 4s ease-in-out infinite;
    box-shadow: 0 0 10px var(--primary-cyan);
    margin: 0.5rem;
    border-radius: 2px;
}

.line-1 {
    width: 120px;
    height: 2px;
    animation-delay: 0s;
}

.line-2 {
    width: 100px;
    height: 2px;
    animation-delay: 1s;
}

.line-3 {
    width: 140px;
    height: 2px;
    animation-delay: 2s;
}

.line-4 {
    width: 80px;
    height: 2px;
    animation-delay: 3s;
}

/* Advanced Animations */
@keyframes glitchMain {
    0%, 90%, 100% {
        transform: translate(0);
    }
    10% {
        transform: translate(-2px, 2px);
    }
    20% {
        transform: translate(2px, -2px);
    }
    30% {
        transform: translate(-2px, -2px);
    }
    40% {
        transform: translate(2px, 2px);
    }
    50% {
        transform: translate(-2px, 2px);
    }
    60% {
        transform: translate(2px, -2px);
    }
    70% {
        transform: translate(-2px, -2px);
    }
    80% {
        transform: translate(2px, 2px);
    }
}

@keyframes glitchLayer {
    0%, 90%, 100% {
        transform: translate(0);
        opacity: 0;
    }
    5% {
        transform: translate(2px, -2px);
        opacity: 0.8;
    }
    10% {
        transform: translate(-2px, 2px);
        opacity: 0.6;
    }
    15% {
        transform: translate(2px, 2px);
        opacity: 0.4;
    }
    20% {
        transform: translate(-2px, -2px);
        opacity: 0.2;
    }
}

@keyframes hologramMain {
    0%, 100% {
        transform: translate(0) scale(1);
        filter: hue-rotate(0deg);
    }
    25% {
        transform: translate(1px, -1px) scale(1.02);
        filter: hue-rotate(90deg);
    }
    50% {
        transform: translate(-1px, 1px) scale(1.04);
        filter: hue-rotate(180deg);
    }
    75% {
        transform: translate(1px, 1px) scale(1.02);
        filter: hue-rotate(270deg);
    }
}

@keyframes hologramLayer {
    0%, 100% {
        transform: translate(0) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(2px, -2px) scale(1.05);
        opacity: 0.8;
    }
}

@keyframes neonMain {
    0%, 100% {
        text-shadow: 
            0 0 5px var(--primary-cyan),
            0 0 10px var(--primary-cyan),
            0 0 15px var(--primary-cyan),
            0 0 20px var(--primary-cyan);
    }
    50% {
        text-shadow: 
            0 0 10px var(--primary-cyan),
            0 0 20px var(--primary-cyan),
            0 0 30px var(--primary-cyan),
            0 0 40px var(--primary-cyan);
    }
}

@keyframes neonGlow {
    0%, 100% {
        opacity: 0.8;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

@keyframes orbFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-30px) rotate(90deg) scale(1.1);
    }
    50% {
        transform: translateY(-60px) rotate(180deg) scale(1.2);
    }
    75% {
        transform: translateY(-30px) rotate(270deg) scale(1.1);
    }
}

@keyframes orbRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes techFloat {
    0%, 100% {
        transform: translateY(0px) rotate(0deg) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-40px) rotate(180deg) scale(1.2);
        opacity: 1;
    }
}

@keyframes lineSweep {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateX(100%);
        opacity: 0;
    }
}

@keyframes zoneFloat {
    0%, 100% {
        transform: translateY(0px) scale(1);
        opacity: 0.8;
    }
    50% {
        transform: translateY(-10px) scale(1.02);
        opacity: 1;
    }
}

/* Updated Navigation Styles - Removed duplicate */

/* Removed duplicate logo-section styles */

/* Removed duplicate logo-icon styles */

.logo-text {
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--text-primary);
}

/* Removed duplicate nav-menu styles */

.nav-link {
    position: relative;
    text-decoration: none;
    color: var(--text-secondary);
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all var(--transition-normal);
    padding: 10px 18px;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    background: transparent;
    border: 1px solid transparent;
}

.nav-text {
    position: relative;
    z-index: 2;
    transition: all var(--transition-normal);
}

.nav-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.3), transparent);
    transition: left 0.6s ease;
    z-index: 1;
    pointer-events: none;
}

.nav-link:hover .nav-glow {
    left: 100%;
}

.nav-link:hover {
    color: var(--primary-cyan);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 
        0 8px 25px rgba(0, 255, 255, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.6);
    background: rgba(0, 255, 255, 0.05);
}

.nav-link:hover .nav-text {
    text-shadow: 
        0 0 10px var(--primary-cyan),
        0 0 20px var(--primary-cyan),
        0 0 30px var(--primary-cyan);
    transform: scale(1.1);
}

.nav-link.active {
    color: var(--primary-cyan);
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--primary-cyan);
    box-shadow: 
        0 4px 15px rgba(0, 255, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.nav-link.active .nav-text {
    text-shadow: 
        0 0 5px var(--primary-cyan),
        0 0 10px var(--primary-cyan);
}


/* Hero Back Button */
.hero-back-button {
    position: absolute;
    top: 2rem;
    left: 2rem;
    z-index: 10;
}

.back-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 25px;
    color: var(--primary-cyan);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all var(--transition-normal);
    backdrop-filter: blur(10px);
}

.back-btn:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--primary-cyan);
    transform: translateX(-3px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

.back-icon {
    font-size: 1.2rem;
    transition: transform var(--transition-normal);
}

.back-btn:hover .back-icon {
    transform: translateX(-2px);
}

.back-text {
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hero Description Centering */
.cyber-description {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    font-size: 1.1rem;
    line-height: 1.8;
}




/* Auto-Sliding Carousel - No Manual Controls */

/* Sector Preview Cards */
.sector-previews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.sector-preview-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 20px;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sector-preview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
    z-index: 1;
}

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

.sector-preview-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--primary-cyan);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.3);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 255, 255, 0.15));
}

.preview-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

/* Preview icon styles removed - icons no longer used */

.preview-header h3 {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0;
    transition: all 0.4s ease;
}

.sector-preview-card:hover .preview-header h3 {
    color: var(--primary-cyan);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

.preview-content {
    flex: 1;
    position: relative;
    z-index: 2;
}

.preview-description {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 1.5rem;
    transition: all 0.4s ease;
}

.sector-preview-card:hover .preview-description {
    color: rgba(255, 255, 255, 0.9);
}

.preview-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.feature-tag {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    font-size: 0.8rem;
    color: var(--primary-cyan);
    font-weight: 600;
    transition: all 0.3s ease;
}

.sector-preview-card:hover .feature-tag {
    background: rgba(0, 255, 255, 0.2);
    border-color: var(--primary-cyan);
    transform: translateY(-2px);
}

.preview-footer {
    margin-top: auto;
    position: relative;
    z-index: 2;
}

.view-more-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8rem 1.5rem;
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));
    color: white;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    border: none;
    cursor: pointer;
    width: 100%;
}

.view-more-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-cyan));
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.view-more-btn:hover .btn-glow {
    left: 100%;
}

/* Detailed Sectors Section */
.detailed-sectors {
    padding: 4rem 0;
    background: var(--bg-primary);
}

.sector-detail {
    margin-bottom: 4rem;
    padding: 3rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 20px;
    backdrop-filter: blur(10px);
    transition: all 0.4s ease;
}

.sector-detail:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
    border-color: var(--primary-cyan);
}

.sector-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.sector-icon-large {
    font-size: 4rem;
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
    animation: float 3s ease-in-out infinite;
}

.sector-info h2 {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 3.5rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.sector-tagline {
    color: var(--text-secondary);
    font-size: 1.6rem;
    margin: 0;
    font-weight: 300;
}

.sector-content {
    margin-bottom: 2rem;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-bottom: 2rem;
}

.content-column h3 {
    color: var(--primary-cyan);
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.expertise-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.expertise-list li {
    color: var(--text-secondary);
    padding: 0.8rem 0;
    border-left: 3px solid var(--primary-cyan);
    padding-left: 1.2rem;
    margin-bottom: 0.8rem;
    transition: all 0.3s ease;
    position: relative;
    font-size: 1.1rem;
}

.expertise-list li::before {
    content: '▶';
    color: var(--primary-cyan);
    font-size: 0.8rem;
    position: absolute;
    left: -0.5rem;
    top: 0.7rem;
}

.expertise-list li:hover {
    color: var(--text-primary);
    transform: translateX(5px);
    border-left-color: var(--primary-purple);
}

.content-column p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
}

.innovation-areas {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.area {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 8px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.area:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--primary-cyan);
    transform: translateX(5px);
}

.area strong {
    color: var(--primary-cyan);
    font-weight: 600;
}

.sector-projects {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.sector-projects h3 {
    color: var(--primary-cyan);
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
}

.project-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.4), rgba(0, 255, 255, 0.05));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

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

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

.project-card:hover {
    transform: translateY(-3px);
    border-color: var(--primary-cyan);
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.2);
}

.project-title {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
}

.project-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1rem;
    position: relative;
    z-index: 2;
}

.project-status {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
}

.status-development {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.status-planning {
    background: rgba(0, 123, 255, 0.2);
    color: #007bff;
    border: 1px solid rgba(0, 123, 255, 0.3);
}


/* Contact Form Styles */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 1rem;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.4);
    color: var(--text-primary);
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-cyan);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    background: rgba(0, 0, 0, 0.6);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.submit-btn {
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    align-self: flex-start;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.3);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-cyan));
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.contact-item:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--primary-cyan);
    transform: translateY(-3px);
}

.contact-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
}

.contact-details h4 {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0 0 0.5rem 0;
}

.contact-details p {
    color: var(--text-secondary);
    font-size: 1rem;
    margin: 0;
}

/* Sector Page Styles */
.sector-vision {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 255, 255, 0.05));
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}

.vision-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

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

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

.vision-card:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--primary-cyan);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.3);
}

.vision-card .card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
    position: relative;
    z-index: 2;
}

.vision-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.6));
}

.vision-card h3 {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.vision-card:hover h3 {
    color: var(--primary-cyan);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
}

.vision-card p {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.9rem;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
}

.innovation-focus {
    padding: 4rem 0;
    background: var(--bg-primary);
}

.focus-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.focus-title {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--primary-cyan);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.focus-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.focus-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.feature-item:hover {
    background: rgba(0, 255, 255, 0.1);
    border-color: var(--primary-cyan);
    transform: translateX(10px);
}

.feature-icon {
    font-size: 2rem;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
}

.feature-content h4 {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.feature-content p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}


.development-pipeline {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 255, 255, 0.05));
}

.pipeline-timeline {
    margin-top: 3rem;
    position: relative;
}

.pipeline-timeline::before {
    content: '';
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary-cyan), transparent);
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-marker {
    width: 4rem;
    height: 4rem;
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
}

.marker-icon {
    font-size: 1.5rem;
    color: white;
}

.timeline-content {
    flex: 1;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    padding: 2rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.timeline-content:hover {
    transform: translateX(10px);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

.timeline-phase {
    color: var(--primary-cyan);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.timeline-content h3 {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.timeline-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.timeline-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(0, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary-cyan), var(--primary-purple));
    border-radius: 4px;
    transition: width 1s ease;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.progress-text {
    color: var(--text-secondary);
    font-size: 0.9rem;
    font-weight: 600;
}

/* Technology Innovation Hub Styles */
.technology-innovation-hub {
    padding: 6rem 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 255, 255, 0.05));
    position: relative;
    overflow: hidden;
}

.technology-innovation-hub::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.tech-innovation-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    margin-bottom: 4rem;
}

.tech-innovation-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.tech-innovation-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.tech-innovation-card:hover::before {
    opacity: 1;
}

.tech-innovation-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 0.5);
}

.tech-card-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.tech-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

.tech-card-header h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tech-description {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.tech-features {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.tech-feature {
    background: rgba(0, 255, 255, 0.1);
    color: var(--accent-color);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.tech-applications h4 {
    color: var(--text-primary);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tech-applications ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.tech-applications li {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
    padding-left: 1.5rem;
    position: relative;
}

.tech-applications li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-size: 0.8rem;
}

.tech-approach {
    margin: 4rem 0;
    text-align: center;
}

.tech-approach h3 {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 3rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.approach-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
}

.approach-item {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 255, 255, 0.05));
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.approach-item:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 15px 30px rgba(0, 255, 255, 0.1);
}

.approach-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
}

.approach-item h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.approach-item p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.tech-impact {
    margin: 4rem 0;
    text-align: center;
}

.tech-impact h3 {
    color: var(--text-primary);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.impact-content p {
    color: var(--text-secondary);
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.impact-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
}

.benefit-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.6), rgba(0, 255, 255, 0.05));
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.benefit-item:hover {
    border-color: rgba(0, 255, 255, 0.4);
    box-shadow: 0 10px 20px rgba(0, 255, 255, 0.1);
}

.benefit-icon {
    font-size: 1.5rem;
    filter: drop-shadow(0 0 5px rgba(0, 255, 255, 0.5));
}

.benefit-item span:last-child {
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 500;
}

/* Responsive Design for Technology Innovation Hub */
@media (max-width: 768px) {
    .tech-innovation-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .tech-innovation-card {
        padding: 1.5rem;
    }
    
    .tech-card-header {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }
    
    .tech-icon {
        font-size: 2rem;
    }
    
    .tech-card-header h3 {
        font-size: 1.3rem;
    }
    
    .approach-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .approach-item {
        padding: 1.5rem;
    }
    
    .impact-benefits {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .benefit-item {
        padding: 1rem;
    }
}

/* About Pages Enhanced Styles */
.mission-statement, .core-values, .vision-section, .company-timeline, .milestones,
.leadership-overview, .leadership-principles, .team-expertise, .values-overview,
.values-grid-section, .value-in-action, .recognition-overview, .excellence-areas,
.future-recognition, .heritage-overview, .heritage-values, .innovation-commitment,
.tech-scene-overview, .tech-focus, .industry-impact, .case-studies-overview,
.development-methodology, .tech-expertise, .client-success-overview, .success-framework,
.success-metrics, .future-predictions-overview, .technology-trends, .industry-analysis-overview,
.market-trends, .technology-adoption, .innovation-insights-overview, .innovation-areas,
.research-development, .methodology-overview, .development-process, .quality-assurance,
.process-overview, .process-steps, .process-benefits, .partnerships-overview,
.partnership-types, .partnership-benefits, .quality-standards-overview, .quality-framework,
.research-overview, .research-areas, .research-impact, .tech-trends-overview,
.current-trends, .future-trends {
    padding: 4rem 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95), rgba(0, 255, 255, 0.05));
    position: relative;
    overflow: hidden;
}

.mission-statement::before, .core-values::before, .vision-section::before,
.company-timeline::before, .milestones::before, .leadership-overview::before,
.leadership-principles::before, .team-expertise::before, .values-overview::before,
.values-grid-section::before, .value-in-action::before, .recognition-overview::before,
.excellence-areas::before, .future-recognition::before, .heritage-overview::before,
.heritage-values::before, .innovation-commitment::before, .tech-scene-overview::before,
.tech-focus::before, .industry-impact::before, .case-studies-overview::before,
.development-methodology::before, .tech-expertise::before, .client-success-overview::before,
.success-framework::before, .success-metrics::before, .future-predictions-overview::before,
.technology-trends::before, .industry-analysis-overview::before, .market-trends::before,
.technology-adoption::before, .innovation-insights-overview::before, .innovation-areas::before,
.research-development::before, .methodology-overview::before, .development-process::before,
.quality-assurance::before, .process-overview::before, .process-steps::before,
.process-benefits::before, .partnerships-overview::before, .partnership-types::before,
.partnership-benefits::before, .quality-standards-overview::before, .quality-framework::before,
.research-overview::before, .research-areas::before, .research-impact::before,
.tech-trends-overview::before, .current-trends::before, .future-trends::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(0, 255, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0, 255, 255, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.statement-content, .mission-text, .vision-text, .heritage-intro, .tech-intro,
.case-intro, .success-intro, .predictions-intro, .analysis-intro, .insights-intro,
.methodology-intro, .process-intro, .partnerships-intro, .quality-intro,
.research-intro, .trends-intro, .commitment-text, .impact-text, .future-text {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.mission-text, .vision-text, .heritage-intro, .tech-intro, .case-intro,
.success-intro, .predictions-intro, .analysis-intro, .insights-intro,
.methodology-intro, .process-intro, .partnerships-intro, .quality-intro,
.research-intro, .trends-intro, .commitment-text, .impact-text, .future-text {
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-secondary);
    margin-bottom: 3rem;
}

.values-grid, .focus-grid, .methodology-grid, .framework-grid, .trends-grid,
.areas-grid, .expertise-grid, .metrics-grid, .types-grid, .benefits-grid,
.impact-grid, .adoption-grid, .rd-grid, .qa-grid, .future-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.value-card, .focus-card, .method-card, .framework-card, .trend-card,
.area-card, .expertise-item, .metric-item, .type-card, .benefit-item,
.impact-item, .adoption-item, .rd-item, .qa-item, .future-item {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    padding: 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.value-card::before, .focus-card::before, .method-card::before, .framework-card::before,
.trend-card::before, .area-card::before, .expertise-item::before, .metric-item::before,
.type-card::before, .benefit-item::before, .impact-item::before, .adoption-item::before,
.rd-item::before, .qa-item::before, .future-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.value-card:hover::before, .focus-card:hover::before, .method-card:hover::before,
.framework-card:hover::before, .trend-card:hover::before, .area-card:hover::before,
.expertise-item:hover::before, .metric-item:hover::before, .type-card:hover::before,
.benefit-item:hover::before, .impact-item:hover::before, .adoption-item:hover::before,
.rd-item:hover::before, .qa-item:hover::before, .future-item:hover::before {
    opacity: 1;
}

.value-card:hover, .focus-card:hover, .method-card:hover, .framework-card:hover,
.trend-card:hover, .area-card:hover, .expertise-item:hover, .metric-item:hover,
.type-card:hover, .benefit-item:hover, .impact-item:hover, .adoption-item:hover,
.rd-item:hover, .qa-item:hover, .future-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 0.5);
}

.value-icon, .focus-icon, .method-icon, .framework-icon, .trend-icon,
.area-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.5));
}

.value-card h3, .focus-card h3, .method-card h3, .framework-card h3,
.trend-card h3, .area-card h3, .expertise-item h3, .metric-item h3,
.type-card h3, .benefit-item h3, .impact-item h3, .adoption-item h3,
.rd-item h3, .qa-item h3, .future-item h3 {
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.value-card p, .focus-card p, .method-card p, .framework-card p,
.trend-card p, .area-card p, .expertise-item p, .metric-item p,
.type-card p, .benefit-item p, .impact-item p, .adoption-item p,
.rd-item p, .qa-item p, .future-item p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Timeline Styles */
.timeline, .steps-timeline {
    position: relative;
    padding: 2rem 0;
}

.timeline::before, .steps-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--accent-color), transparent);
    transform: translateX(-50%);
}

.timeline-item, .step-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
}

.timeline-item:nth-child(odd), .step-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even), .step-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-year, .step-number {
    background: var(--accent-color);
    color: var(--bg-primary);
    padding: 1rem 2rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 120px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.timeline-content, .step-content {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    padding: 2rem;
    margin: 0 2rem;
    flex: 1;
    max-width: 400px;
}

.timeline-content h3, .step-content h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.timeline-content p, .step-content p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Process Steps */
.qa-process {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.qa-step {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(0, 255, 255, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.qa-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 0.5);
}

.qa-step h3 {
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.qa-step p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Responsive Design for About Pages */
@media (max-width: 768px) {
    .values-grid, .focus-grid, .methodology-grid, .framework-grid, .trends-grid,
    .areas-grid, .expertise-grid, .metrics-grid, .types-grid, .benefits-grid,
    .impact-grid, .adoption-grid, .rd-grid, .qa-grid, .future-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .timeline::before, .steps-timeline::before {
        left: 20px;
    }
    
    .timeline-item, .step-item {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 3rem;
    }
    
    .timeline-year, .step-number {
        position: absolute;
        left: -60px;
        top: 0;
        min-width: 100px;
        font-size: 0.9rem;
        padding: 0.75rem 1rem;
    }
    
    .timeline-content, .step-content {
        margin: 0;
        margin-top: 1rem;
        max-width: none;
    }
    
    .qa-process {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

/* Call to Action Section */
.cta-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.1) 0%, 
        rgba(138, 43, 226, 0.1) 50%, 
        rgba(255, 20, 147, 0.1) 100%);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(0, 255, 255, 0.05) 0%, 
        rgba(138, 43, 226, 0.05) 50%, 
        rgba(255, 20, 147, 0.05) 100%);
    z-index: 1;
}

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

.cta-content {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.cta-header {
    margin-bottom: 3rem;
}

.cta-title {
    font-family: var(--font-primary);
    font-size: 3rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    position: relative;
}

.cta-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-cyan), var(--primary-purple));
    border-radius: 2px;
}

.cta-description {
    font-size: 1.3rem;
    color: var(--text-secondary);
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    font-weight: 400;
}

.cta-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.feature-item {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 15px;
    padding: 2.5rem 2rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-cyan), var(--primary-purple));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.feature-item:hover::before {
    opacity: 1;
}

.feature-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.15);
    border-color: var(--primary-cyan);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    display: block;
}

.feature-item h4 {
    font-family: var(--font-primary);
    font-size: 1.4rem;
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-weight: 700;
}

.feature-item p {
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1rem;
}

.cta-buttons {
    display: flex;
    gap: 2rem;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-btn {
    padding: 1.2rem 2.5rem;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    font-size: 1.1rem;
    border: 2px solid transparent;
    min-width: 200px;
    justify-content: center;
}

.cta-btn.primary {
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-purple));
    color: white;
    border-color: transparent;
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.3);
}

.cta-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 255, 255, 0.4);
    background: linear-gradient(135deg, var(--primary-purple), var(--primary-cyan));
}

.cta-btn.secondary {
    background: transparent;
    color: var(--primary-cyan);
    border-color: var(--primary-cyan);
}

.cta-btn.secondary:hover {
    background: var(--primary-cyan);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(0, 255, 255, 0.3);
}

.cta-btn .btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s ease;
}

.cta-btn:hover .btn-glow {
    left: 100%;
}

.cta-footer {
    margin-top: 2rem;
}

.cta-note {
    font-size: 1rem;
    color: var(--text-secondary);
    font-style: italic;
    opacity: 0.8;
}

/* CTA Section Responsive */
@media (max-width: 768px) {
    .cta-section {
        padding: 4rem 0;
    }
    
    .cta-title {
        font-size: 2.2rem;
    }
    
    .cta-description {
        font-size: 1.1rem;
    }
    
    .cta-features {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }
    
    .feature-item {
        padding: 2rem 1.5rem;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
    }
    
    .cta-btn {
        width: 100%;
        max-width: 300px;
    }
}

.btn-secondary {
    background: transparent;
    color: white;
    border-color: white;
}

.btn-secondary:hover {
    background: white;
    color: var(--primary-cyan);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

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

/* Responsive Design */
@media (max-width: 1200px) {
    .sectors-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cards per row on medium screens */
    }
    
    .tech-stack-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cards per row on medium screens */
        gap: 2rem;
    }
    
    .vision-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cards per row on medium screens */
        gap: 2.5rem;
    }
    
    .sector-previews-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cards per row on medium screens */
    }
    
    .vision-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .focus-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 768px) {
    .sector-previews-grid {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        gap: 1.5rem;
    }
    
    .sector-preview-card {
        padding: 1.5rem;
    }
    
    .preview-header {
        flex-direction: column;
        text-align: center;
        gap: 0.5rem;
    }
    
    /* Preview icon responsive styles removed - icons no longer used */
    
    .preview-header h3 {
        font-size: 1.2rem;
    }
    
    /* Detailed Sectors Mobile */
    .sector-detail {
        padding: 2rem;
        margin-bottom: 2rem;
    }
    
    .sector-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }
    
    .sector-icon-large {
        font-size: 3rem;
    }
    
    .sector-info h2 {
        font-size: 2rem;
    }
    
    .content-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .projects-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    /* Contact Forms Mobile */
    .contact-info {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    
    .contact-item {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .contact-icon {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .hero-back-button {
        top: 1rem;
        left: 1rem;
    }
    
    .back-btn {
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
    }
    
    .cyber-description {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    .sectors-grid {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        gap: 2rem;
        padding: 1rem;
    }
    
    .tech-stack-grid {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        gap: 2rem;
        padding: 1rem;
    }
    
    .vision-grid {
        grid-template-columns: 1fr; /* 1 card per row on mobile */
        gap: 2rem;
        padding: 1rem;
    }
    
    .vision-card {
        min-height: 350px;
        padding: 2rem;
    }
    
    .sector-card {
        aspect-ratio: 1.3; /* Slightly taller on mobile */
        min-height: 350px;
    }
    
    .overview-card {
        padding: 1.5rem 1rem;
        min-height: 200px;
    }
}

@media (max-width: 480px) {
    .sectors-grid {
        grid-template-columns: 1fr; /* 1 card per row on small mobile */
        gap: 0.5rem;
        padding: 0.5rem;
    }
    
    .overview-card {
        padding: 1rem;
        min-height: 180px;
    }
}

/* Card Icon and Text Styles */
.card-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    display: block;
    transition: all 0.4s ease;
    filter: drop-shadow(0 0 10px rgba(0, 255, 255, 0.3));
    position: relative;
    z-index: 2;
}

.overview-card:hover .card-icon {
    transform: scale(1.1) rotate(5deg);
    filter: drop-shadow(0 0 20px rgba(0, 255, 255, 0.6));
}

.overview-card h3 {
    color: var(--text-primary);
    font-family: var(--font-primary);
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
}

.overview-card:hover h3 {
    color: var(--primary-cyan);
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.6);
    transform: translateY(-2px);
}

.overview-card p {
    color: var(--text-secondary);
    line-height: 1.5;
    font-size: 0.9rem;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
    opacity: 0.9;
}

.overview-card:hover p {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
    transform: translateY(-1px);
}

/* Innovation Areas Styles */
.innovation-areas {
    margin-top: 1.5rem;
}

.area {
    background: rgba(0, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.area strong {
    color: var(--primary-cyan);
}

/* Project Status Styles */
.project-status {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.project-status:contains("Research Phase") {
    background: rgba(255, 193, 7, 0.2);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.project-status:contains("Concept Phase") {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
    border: 1px solid rgba(108, 117, 125, 0.3);
}

.project-status:contains("In Development") {
    background: rgba(0, 123, 255, 0.2);
    color: #007bff;
    border: 1px solid rgba(0, 123, 255, 0.3);
}

.project-status:contains("Planning Phase") {
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

/* ========================================
   ABOUT PAGES ENHANCED UI STYLES
   Updated: 2025-01-09 - Enhanced UI Components
   Fixed: 2025-01-09 - Removed duplicate navbar styles
   ======================================== */

/* ========================================
   BLOG PAGES STYLES
   Updated: 2025-01-09 - Blog Components & Layout
   Fixed: 2025-01-09 - Dropdown positioning and responsiveness
   Fixed: 2025-01-09 - Blog dropdown visibility and overflow issues
   Updated: 2025-01-09 - Professional blog styling without icons
   Cache-bust: 1757325660552
   ======================================== */

/* Blog Hero Section */
.blog-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
}

.blog-page-hero {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0a0a 0%, #1a1a2e 50%, #16213e 100%);
}

.blog-page-hero .container {
    position: relative;
    padding-top: 2rem;
}

.blog-hero .hero-content,
.blog-page-hero .hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    margin-top: 4rem;
}

.blog-stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
    padding: 1rem;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 10px;
    backdrop-filter: blur(10px);
}

.stat-number {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ffff;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.9rem;
    color: #b0b0b0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Breadcrumb */
.breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: #888;
}

.breadcrumb a {
    color: #00ffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumb a:hover {
    color: #ffffff;
}

.breadcrumb span {
    color: #666;
}

/* Back to Home Link */
.back-to-home {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    padding-left: 0;
    width: auto;
    max-width: calc(100% - 2rem);
}

.back-link {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    margin: 0.5rem 0 0 0.5rem;
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 25px;
    color: #00ffff;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    white-space: nowrap;
    max-width: 100%;
}

.back-link:hover {
    background: rgba(0, 255, 255, 0.2);
    border-color: rgba(0, 255, 255, 0.5);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 255, 255, 0.3);
}

.back-text {
    margin-left: 0.5rem;
}

/* Responsive adjustments for back button */
@media (max-width: 1200px) {
    .back-to-home {
        top: 0;
        left: 0;
        padding-left: 0;
        max-width: calc(100% - 2rem);
    }
}

@media (max-width: 768px) {
    .back-to-home {
        top: 0;
        left: 0;
        padding-left: 0;
        max-width: calc(100% - 1.5rem);
    }
    
    .back-link {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

@media (max-width: 480px) {
    .back-to-home {
        top: 0;
        left: 0;
        padding-left: 0;
        max-width: calc(100% - 1rem);
    }
    
    .back-link {
        padding: 0.3rem 0.6rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 320px) {
    .back-to-home {
        top: 0;
        left: 0;
        padding-left: 0;
        max-width: calc(100% - 0.5rem);
    }
    
    .back-link {
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }
}

/* Article Meta */
.article-meta {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.article-meta span {
    font-size: 1rem;
    color: #b0b0b0;
    font-weight: 500;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

/* Blog Categories Grid */
.blog-categories {
    padding: 6rem 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
}

.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    gap: 2.5rem;
    margin-top: 3rem;
}

.category-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 15px;
    padding: 2.5rem;
    text-align: center;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

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

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

.category-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

.category-icon {
    font-size: 3rem;
    color: #00ffff;
    margin-bottom: 1rem;
}

.category-card h3 {
    font-size: 1.3rem;
    color: #ffffff;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.category-card p {
    color: #b0b0b0;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    flex-grow: 1;
    font-size: 0.9rem;
}

.category-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: auto;
}

.category-link {
    color: #00ffff;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: all 0.3s ease;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.category-link:hover {
    background: rgba(0, 255, 255, 0.1);
    color: #ffffff;
    transform: translateX(5px);
}

/* Featured Articles */
.featured-articles {
    padding: 6rem 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #0a0a0a 100%);
}

.articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.article-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.article-card:hover {
    transform: translateY(-5px);
    border-color: rgba(0, 255, 255, 0.5);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

.article-card.featured {
    grid-column: span 2;
    display: block;
}

.article-image {
    display: none;
}

.article-card.featured .article-image {
    display: none;
}

.image-placeholder {
    display: none;
}

.article-content {
    padding: 2rem;
}

.article-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.article-content h3 a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-content h3 a:hover {
    color: #00ffff;
}

.article-content p {
    color: #cccccc;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.article-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.category-tag {
    background: rgba(0, 255, 255, 0.2);
    color: #00ffff;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 500;
}

.publish-date {
    color: #888;
    font-size: 0.8rem;
}

.article-content h3 {
    color: #ffffff;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    line-height: 1.4;
}

.article-content h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.article-content h3 a:hover {
    color: #00ffff;
}

.article-content p {
    color: #b0b0b0;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.read-more {
    color: #00ffff;
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.read-more:hover {
    color: #ffffff;
    transform: translateX(5px);
}

/* Blog Article Content */
.blog-article {
    padding: 4rem 0;
    background: linear-gradient(180deg, #0a0a0a 0%, #1a1a2e 100%);
}

.article-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}

.article-content h2 {
    color: #ffffff;
    font-size: 2.8rem;
    margin: 2rem 0 2rem 0;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: left;
}

.article-content h3 {
    color: #00ffff;
    font-size: 2rem;
    margin: 3rem 0 1.5rem 0;
    font-weight: 600;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 2px solid #00ffff;
    padding-bottom: 0.5rem;
}

.article-content p {
    color: #cccccc;
    font-size: 1.2rem;
    line-height: 1.9;
    margin-bottom: 2rem;
    text-align: left;
    font-weight: 400;
}

.image-placeholder {
    display: none;
}

.article-content h4 {
    color: #ffffff;
    font-size: 1.2rem;
    margin: 1.5rem 0 0.75rem 0;
    font-weight: 600;
}

.article-content p {
    color: #b0b0b0;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.article-image {
    width: 100%;
    height: 300px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
    overflow: hidden;
}

.article-image .image-placeholder {
    font-size: 5rem;
    color: #00ffff;
    opacity: 0.7;
}

/* Article Tags */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 2rem 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
}

.tag {
    background: rgba(0, 255, 255, 0.1);
    color: #00ffff;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid rgba(0, 255, 255, 0.3);
    transition: all 0.3s ease;
}

.tag:hover {
    background: rgba(0, 255, 255, 0.2);
    transform: translateY(-2px);
}

/* Article Navigation */
.article-navigation {
    display: flex;
    justify-content: space-between;
    margin: 3rem 0;
    padding: 2rem 0;
    border-top: 1px solid rgba(0, 255, 255, 0.2);
}

.article-nav-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #00ffff;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 25px;
    transition: all 0.3s ease;
    background: rgba(0, 255, 255, 0.05);
}

.article-nav-link:hover {
    background: rgba(0, 255, 255, 0.1);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.2);
}

/* Related Articles */
.related-articles {
    padding: 4rem 0;
    background: linear-gradient(180deg, #1a1a2e 0%, #0a0a0a 100%);
}

.related-articles h3 {
    color: #ffffff;
    font-size: 2rem;
    text-align: center;
    margin-bottom: 3rem;
    font-weight: 600;
}

.related-articles .articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.related-articles .article-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(0, 255, 255, 0.1);
}

.related-articles .article-card:hover {
    border-color: rgba(0, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.05);
}

.related-articles .article-content h4 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.related-articles .article-content h4 a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.related-articles .article-content h4 a:hover {
    color: #00ffff;
}

.related-articles .article-content p {
    font-size: 0.9rem;
    color: #888;
    margin-bottom: 0;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .dropdown-menu {
        left: 50%;
        transform: translateX(-50%) translateY(-10px);
        min-width: 700px;
        max-width: 90vw;
        gap: 1rem;
        padding: 1rem;
        max-height: 70vh;
    }
    
    .blogs-dropdown {
        min-width: 500px !important;
        max-width: 90vw !important;
    }
    
    .blogs-dropdown .dropdown-row {
        gap: 1rem;
    }
    
    .dropdown-section {
        flex: 1;
        min-width: 150px;
        max-width: 180px;
    }
    
    .blogs-dropdown .dropdown-section {
        min-width: 120px;
        max-width: 160px;
    }
    
    .dropdown-link {
        padding: 0.6rem 0.8rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 768px) {
    .dropdown-menu {
        min-width: 300px;
        max-width: 95vw;
        flex-direction: column;
        gap: 1.5rem;
        padding: 1rem;
        left: 10px;
        right: 10px;
        transform: translateX(0) translateY(-10px);
        width: auto;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .blogs-dropdown {
        min-width: 300px !important;
        max-width: 95vw !important;
        left: 10px !important;
        right: 10px !important;
        transform: translateX(0) translateY(-10px) !important;
    }
    
    .blogs-dropdown .dropdown-row {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .blogs-dropdown .dropdown-section {
        min-width: 100%;
        max-width: 100%;
    }
    
    .nav-dropdown:hover .dropdown-menu {
        transform: translateX(0) translateY(0);
    }
    
    .nav-dropdown:hover .blogs-dropdown {
        transform: translateX(0) translateY(0) !important;
    }
    
    .dropdown-section {
        min-width: 100%;
        max-width: 100%;
    }
    
    .dropdown-section h3 {
        font-size: 0.8rem;
        margin-bottom: 0.75rem;
    }
    
    .dropdown-link {
        font-size: 0.75rem;
        padding: 0.5rem 0.75rem;
        white-space: normal;
        text-overflow: unset;
    }
    
    .blog-stats {
        gap: 1.5rem;
    }
    
    .stat-item {
        padding: 0.75rem;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .category-card {
        min-height: 320px;
        padding: 1.5rem;
    }
    
    .category-links {
        gap: 0.4rem;
    }
    
    .category-link {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .article-card.featured {
        grid-column: span 1;
        grid-template-columns: 1fr;
    }
    
    .article-card.featured .article-image {
        height: 200px;
    }
    
    .articles-grid {
        grid-template-columns: 1fr;
    }
    
    .article-meta {
        gap: 1rem;
        justify-content: center;
    }
    
    .article-navigation {
        flex-direction: column;
        gap: 1rem;
    }
    
    .article-nav-link {
        justify-content: center;
    }
    
    .article-content {
        padding: 0 1rem;
    }
    
    .article-content h2 {
        font-size: 1.5rem;
    }
    
    .article-content h3 {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .blog-hero .hero-content,
    .blog-page-hero .hero-content {
        padding: 1rem;
    }
    
    .category-card {
        padding: 1.5rem;
    }
    
    .article-content {
        padding: 0 0.5rem;
    }
    
    .article-tags {
        justify-content: center;
    }
}

/* Section Headers */
.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-title {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 2.5rem;
    font-weight: 700;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background: var(--gradient-primary);
    border-radius: 2px;
}

.section-subtitle {
    color: var(--text-secondary);
    font-size: 1.2rem;
    font-weight: 300;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Page Hero Enhancements */
.page-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--bg-primary) 100%);
    overflow: hidden;
}

.page-hero .hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.page-hero .cyber-grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 255, 255, 0.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 50px 50px;
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 50px); }
}

.page-hero .floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.page-hero .floating-cube {
    position: absolute;
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, var(--primary-cyan), var(--primary-purple));
    border-radius: 8px;
    animation: float 6s ease-in-out infinite;
    opacity: 0.3;
}

.page-hero .floating-cube.cube-1 {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
}

.page-hero .floating-cube.cube-2 {
    top: 60%;
    right: 15%;
    animation-delay: 2s;
}

.page-hero .floating-sphere {
    position: absolute;
    width: 40px;
    height: 40px;
    background: radial-gradient(circle, var(--primary-pink), var(--primary-orange));
    border-radius: 50%;
    animation: float 8s ease-in-out infinite;
    opacity: 0.4;
}

.page-hero .floating-sphere.sphere-1 {
    top: 40%;
    right: 20%;
    animation-delay: 1s;
}

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

.page-hero .hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    align-self: flex-start;
    padding-top: 2rem;
}

.page-hero .cyber-title {
    margin-bottom: 2rem;
}

.page-hero .cyber-description {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.8;
}

.page-hero .leadership-highlights,
.page-hero .history-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.page-hero .highlight-tag {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-cyan);
    transition: var(--transition-normal);
}

.page-hero .highlight-tag:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(139, 92, 246, 0.2));
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

/* Leadership Team Styles */
.leadership-approach {
    padding: var(--section-padding);
    background: var(--bg-secondary);
    position: relative;
}

.leadership-approach::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 0%, rgba(0, 255, 255, 0.05) 50%, transparent 100%);
    pointer-events: none;
}

.leadership-principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.principle-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 255, 255, 0.05) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

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

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

.principle-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-cyan);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

.principle-card .principle-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.principle-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.principle-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Core Competencies */
.core-competencies {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.competencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.competency-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.competency-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transition: var(--transition-normal);
}

.competency-card:hover::after {
    transform: scaleX(1);
}

.competency-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-purple);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2);
}

.competency-card .competency-icon {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    display: block;
}

.competency-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.competency-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.competency-examples {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.example-tag {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(236, 72, 153, 0.2));
    border: 1px solid rgba(139, 92, 246, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--primary-purple);
    transition: var(--transition-fast);
}

.example-tag:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(236, 72, 153, 0.3));
    transform: scale(1.05);
}

/* Real-World Solutions */
.real-world-solutions {
    padding: var(--section-padding);
    background: var(--bg-secondary);
    position: relative;
}

.real-world-solutions::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(16, 185, 129, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.solution-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.solution-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(16, 185, 129, 0.1) 100%);
    opacity: 0;
    transition: var(--transition-normal);
}

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

.solution-card:hover {
    transform: translateY(-10px) scale(1.02);
    border-color: var(--primary-green);
    box-shadow: 0 20px 50px rgba(16, 185, 129, 0.2);
}

.solution-card .solution-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
}

.solution-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.solution-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.solution-benefits {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.benefit {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(0, 255, 255, 0.2));
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--primary-green);
    transition: var(--transition-fast);
}

.benefit:hover {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(0, 255, 255, 0.3));
    transform: scale(1.05);
}

/* Leadership Philosophy */
.leadership-philosophy {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.philosophy-content {
    max-width: 1000px;
    margin: 0 auto;
}

.philosophy-item {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(236, 72, 153, 0.05) 100%);
    border: 1px solid rgba(236, 72, 153, 0.2);
    border-radius: 16px;
    padding: 2.5rem;
    margin-bottom: 2rem;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.philosophy-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--gradient-accent);
    transform: scaleY(0);
    transition: var(--transition-normal);
}

.philosophy-item:hover::before {
    transform: scaleY(1);
}

.philosophy-item:hover {
    transform: translateX(10px);
    border-color: var(--primary-pink);
    box-shadow: 0 10px 30px rgba(236, 72, 153, 0.2);
}

.philosophy-item h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.6rem;
}

.philosophy-item p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Company History Styles */
.foundation-section {
    padding: var(--section-padding);
    background: var(--bg-secondary);
    position: relative;
}

.foundation-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-top: 3rem;
}

.foundation-text h3 {
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.foundation-text p {
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.foundation-principles {
    display: grid;
    gap: 1.5rem;
}

.foundation-principles .principle-item {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 255, 255, 0.05) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    transition: var(--transition-normal);
}

.foundation-principles .principle-item:hover {
    transform: translateY(-3px);
    border-color: var(--primary-cyan);
    box-shadow: 0 8px 25px rgba(0, 255, 255, 0.15);
}

.foundation-principles .principle-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    display: block;
}

.foundation-principles h4 {
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 1.2rem;
}

.foundation-principles p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

/* Technology Evolution */
.technology-evolution {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.evolution-timeline {
    margin-top: 3rem;
    position: relative;
}

.evolution-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--gradient-primary);
    transform: translateX(-50%);
    border-radius: 2px;
}

.evolution-item {
    display: flex;
    align-items: center;
    margin-bottom: 4rem;
    position: relative;
}

.evolution-item:nth-child(odd) {
    flex-direction: row;
}

.evolution-item:nth-child(even) {
    flex-direction: row-reverse;
}

.evolution-year {
    background: var(--gradient-primary);
    color: white;
    padding: 1rem 2rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 150px;
    text-align: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 255, 255, 0.3);
}

.evolution-content {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 255, 255, 0.05) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    margin: 0 2rem;
    flex: 1;
    max-width: 500px;
    transition: var(--transition-normal);
    position: relative;
}

.evolution-content::before {
    content: '';
    position: absolute;
    top: 50%;
    width: 0;
    height: 0;
    border: 15px solid transparent;
    transform: translateY(-50%);
}

.evolution-item:nth-child(odd) .evolution-content::before {
    right: -30px;
    border-left-color: var(--bg-card);
}

.evolution-item:nth-child(even) .evolution-content::before {
    left: -30px;
    border-right-color: var(--bg-card);
}

.evolution-content:hover {
    transform: translateY(-5px);
    border-color: var(--primary-cyan);
    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.2);
}

.evolution-content h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.evolution-content p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.evolution-technologies {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.tech-tag {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--primary-cyan);
    transition: var(--transition-fast);
}

.tech-tag:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(139, 92, 246, 0.3));
    transform: scale(1.05);
}

/* Industry Expertise */
.industry-expertise {
    padding: var(--section-padding);
    background: var(--bg-secondary);
    position: relative;
}

.industry-expertise::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent 0%, rgba(245, 158, 11, 0.05) 50%, transparent 100%);
    pointer-events: none;
}

.industries-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.industry-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(245, 158, 11, 0.05) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.industry-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-accent);
    transform: scaleX(0);
    transition: var(--transition-normal);
}

.industry-card:hover::after {
    transform: scaleX(1);
}

.industry-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-orange);
    box-shadow: 0 15px 40px rgba(245, 158, 11, 0.2);
}

.industry-card .industry-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
}

.industry-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.industry-card p {
    color: var(--text-secondary);
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.industry-solutions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.solution-tag {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(239, 68, 68, 0.2));
    border: 1px solid rgba(245, 158, 11, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--primary-orange);
    transition: var(--transition-fast);
}

.solution-tag:hover {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.3), rgba(239, 68, 68, 0.3));
    transform: scale(1.05);
}

/* Awards & Recognition Styles */
.quality-standards {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.standards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.standard-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 255, 255, 0.05) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.standard-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-cyan);
    box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

.standard-card .standard-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.standard-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.standard-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.standard-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.detail-tag {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.2), rgba(139, 92, 246, 0.2));
    border: 1px solid rgba(0, 255, 255, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    color: var(--primary-cyan);
    transition: var(--transition-fast);
}

.detail-tag:hover {
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(139, 92, 246, 0.3));
    transform: scale(1.05);
}

/* Tech Trends Enhanced Styles */
.trend-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 255, 255, 0.05) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.trend-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-cyan);
    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.2);
}

.trend-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.trend-icon {
    font-size: 3rem;
}

.trend-status {
    padding: 0.3rem 0.8rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: auto;
}

.trend-status.growing {
    background: rgba(16, 185, 129, 0.2);
    color: var(--primary-green);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.trend-status.stable {
    background: rgba(0, 255, 255, 0.2);
    color: var(--primary-cyan);
    border: 1px solid rgba(0, 255, 255, 0.3);
}

.trend-status.mature {
    background: rgba(139, 92, 246, 0.2);
    color: var(--primary-purple);
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.trend-metrics {
    display: flex;
    gap: 2rem;
    margin: 1.5rem 0;
}

.metric {
    text-align: center;
}

.metric-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-cyan);
    margin-bottom: 0.3rem;
}

.metric-label {
    font-size: 0.9rem;
    color: var(--text-secondary);
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-hero {
        min-height: 50vh;
        padding: 2rem 0;
    }
    
    .page-hero .cyber-title {
        font-size: 2.5rem;
    }
    
    .page-hero .cyber-description {
        font-size: 1rem;
    }
    
    .leadership-principles,
    .competencies-grid,
    .solutions-grid,
    .standards-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .foundation-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .evolution-timeline::before {
        left: 2rem;
    }
    
    .evolution-item {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 4rem;
    }
    
    .evolution-year {
        position: absolute;
        left: -60px;
        top: 0;
        min-width: 120px;
    }
    
    .evolution-content {
        margin: 0;
        margin-top: 1rem;
        max-width: none;
    }
    
    .evolution-content::before {
        display: none;
    }
    
    .philosophy-item:hover {
        transform: none;
    }
    
    .principle-card:hover,
    .competency-card:hover,
    .solution-card:hover,
    .industry-card:hover {
        transform: translateY(-3px);
    }
    
    .trend-metrics {
        flex-direction: column;
        gap: 1rem;
    }
    
    .trend-header {
        flex-wrap: wrap;
    }
    
    .trend-status {
        margin-left: 0;
    }
}

@media (max-width: 480px) {
    .page-hero .highlight-tag {
        font-size: 0.8rem;
        padding: 0.4rem 0.8rem;
    }
    
    .principle-card,
    .competency-card,
    .solution-card,
    .industry-card,
    .standard-card {
        padding: 1.5rem;
    }
    
    .evolution-year {
        font-size: 0.9rem;
        padding: 0.8rem 1.5rem;
        min-width: 100px;
    }
    
    .trend-card {
        padding: 1.5rem;
    }
    
    .trend-icon {
        font-size: 2.5rem;
    }
}

/* Mission Page Styles */
.mission-statement {
    padding: var(--section-padding);
    background: var(--bg-secondary);
    position: relative;
}

.mission-statement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(0, 255, 255, 0.05) 0%, transparent 70%);
    pointer-events: none;
}

.statement-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.statement-content h2 {
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.mission-text {
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-weight: 300;
}

.core-values {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.core-values h2 {
    text-align: center;
    margin-bottom: 3rem;
    color: var(--text-primary);
    font-size: 2.5rem;
}

.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.value-card {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(0, 255, 255, 0.05) 100%);
    border: 1px solid rgba(0, 255, 255, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

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

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

.value-card:hover {
    transform: translateY(-8px);
    border-color: var(--primary-cyan);
    box-shadow: 0 15px 40px rgba(0, 255, 255, 0.2);
}

.value-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
}

.value-card h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.value-card p {
    color: var(--text-secondary);
    line-height: 1.7;
}

.vision-section {
    padding: var(--section-padding);
    background: var(--bg-secondary);
    text-align: center;
}

.vision-section h2 {
    color: var(--text-primary);
    margin-bottom: 2rem;
    font-size: 2.5rem;
}

.vision-text {
    font-size: 1.3rem;
    line-height: 1.8;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
    font-weight: 300;
}

/* Company Values Page */
.values-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.values-grid-section {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.value-in-action {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Our Process Page */
.process-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.process-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.process-step {
    background: linear-gradient(135deg, var(--bg-card) 0%, rgba(139, 92, 246, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.2);
    border-radius: 20px;
    padding: 2.5rem;
    text-align: center;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.process-step:hover {
    transform: translateY(-8px);
    border-color: var(--primary-purple);
    box-shadow: 0 15px 40px rgba(139, 92, 246, 0.2);
}

.process-step .step-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    display: block;
}

.process-step h3 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.process-step p {
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Methodology Page */
.methodology-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.methodology-approach {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.methodology-tools {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Quality Standards Page */
.quality-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.standards-implementation {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.quality-metrics {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Partnerships Page */
.partnerships-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.partnership-types {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.partnership-benefits {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Research Papers Page */
.research-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.research-areas {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.research-publications {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Innovation Insights Page */
.innovation-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.innovation-focus {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.innovation-impact {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Future Predictions Page */
.future-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.future-trends {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.future-vision {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Industry Analysis Page */
.analysis-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.analysis-focus {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.analysis-insights {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Canadian Heritage Page */
.heritage-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.heritage-values {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.heritage-commitment {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Canadian Tech Scene Page */
.tech-scene-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.tech-focus {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.tech-impact {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Case Studies Page */
.case-studies-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.case-methodology {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.future-cases {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Client Success Page */
.success-overview {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.success-metrics {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

.future-success {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* ========================================
   ADDITIONAL STYLING FOR ABOUT PAGES
   ======================================== */

/* Mission Statement Section */
.mission-statement {
    padding: var(--section-padding);
    background: var(--bg-secondary);
    position: relative;
    overflow: hidden;
}

.mission-statement::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 0%, rgba(0, 255, 255, 0.05) 50%, transparent 100%);
    pointer-events: none;
}

.statement-content {
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.statement-content h2 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    margin-bottom: 2rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.mission-text {
    font-size: 1.25rem;
    line-height: 1.8;
    color: var(--text-secondary);
    font-weight: 300;
}

/* Vision Section */
.vision-section {
    padding: var(--section-padding);
    background: var(--bg-primary);
    position: relative;
}

.vision-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.vision-text {
    font-size: 1.5rem;
    line-height: 1.8;
    color: var(--text-primary);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    font-weight: 300;
    position: relative;
    z-index: 2;
}

/* Values Overview */
.values-overview {
    padding: var(--section-padding);
    background: var(--bg-secondary);
}

/* Case Studies Specific Styling */
.case-notice {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 3rem;
    text-align: center;
    margin-bottom: 4rem;
    position: relative;
    overflow: hidden;
}

.case-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    pointer-events: none;
}

.case-notice h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
}

.case-notice p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    position: relative;
    z-index: 2;
}

.case-framework {
    margin-bottom: 4rem;
}

.case-framework h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.framework-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.framework-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.framework-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

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

.framework-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-primary);
}

.framework-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
}

.framework-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Sector Cases */
.sector-cases {
    margin-bottom: 4rem;
}

.sector-cases h2 {
    text-align: center;
    margin-bottom: 3rem;
    font-size: 2.5rem;
    background: var(--gradient-secondary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sector-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
}

.sector-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--gradient-primary);
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    align-items: center;
    margin-bottom: 3rem;
    position: relative;
}

.timeline-item:nth-child(odd) {
    flex-direction: row;
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
}

.timeline-year {
    background: var(--gradient-primary);
    color: var(--bg-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    font-weight: 700;
    font-size: 1.1rem;
    min-width: 120px;
    text-align: center;
    position: relative;
    z-index: 2;
}

.timeline-content {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    margin: 0 2rem;
    flex: 1;
    position: relative;
    z-index: 2;
}

.timeline-content h4 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.timeline-content p {
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Leadership Highlights */
.leadership-highlights {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin-top: 2rem;
}

.highlight-tag {
    background: rgba(0, 255, 255, 0.1);
    border: 1px solid var(--border-accent);
    color: var(--text-accent);
    padding: 0.5rem 1rem;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-normal);
}

.highlight-tag:hover {
    background: rgba(0, 255, 255, 0.2);
    transform: translateY(-2px);
    box-shadow: var(--glow-primary);
}

/* Leadership Principles */
.leadership-principles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.principle-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.principle-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 255, 255, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

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

.principle-card:hover {
    transform: translateY(-5px);
    border-color: var(--border-accent);
    box-shadow: var(--glow-primary);
}

.principle-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.principle-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
}

.principle-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Core Competencies */
.core-competencies {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

.competencies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.competency-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.competency-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(0, 255, 255, 0.05) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

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

.competency-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-green);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.3);
}

.competency-icon {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--primary-green);
}

.competency-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
}

.competency-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Values Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.value-card {
    background: var(--bg-card);
    border: 1px solid var(--border-primary);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.value-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    opacity: 0;
    transition: opacity var(--transition-normal);
    pointer-events: none;
}

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

.value-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary-pink);
    box-shadow: var(--glow-accent);
}

.value-icon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

.value-card h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    position: relative;
    z-index: 2;
}

.value-card p {
    color: var(--text-secondary);
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Breadcrumb Styling */
.breadcrumb {
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.breadcrumb a {
    color: var(--text-accent);
    text-decoration: none;
    transition: color var(--transition-normal);
}

.breadcrumb a:hover {
    color: var(--text-primary);
}

.breadcrumb span {
    color: var(--text-primary);
}

/* Content Section */
.content-section {
    padding: var(--section-padding);
    background: var(--bg-primary);
}

/* Glitch Text Effects */
.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: glitch 2s infinite;
}

.glitch-layer.layer-1 {
    color: #ff0000;
    animation-delay: 0.1s;
}

.glitch-layer.layer-2 {
    color: #00ff00;
    animation-delay: 0.2s;
}

.glitch-layer.layer-3 {
    color: #0000ff;
    animation-delay: 0.3s;
}

.main-text {
    position: relative;
    z-index: 1;
}

@keyframes glitch {
    0%, 100% { opacity: 0; transform: translate(0); }
    20% { opacity: 0.8; transform: translate(-2px, 2px); }
    40% { opacity: 0.8; transform: translate(-2px, -2px); }
    60% { opacity: 0.8; transform: translate(2px, 2px); }
    80% { opacity: 0.8; transform: translate(2px, -2px); }
}

/* Holographic Text Effects */
.holographic-text {
    position: relative;
    display: inline-block;
}

.hologram-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    animation: hologram 3s infinite;
}

.hologram-layer.layer-1 {
    color: #00ffff;
    animation-delay: 0.1s;
}

.hologram-layer.layer-2 {
    color: #ff00ff;
    animation-delay: 0.2s;
}

.hologram-layer.layer-3 {
    color: #ffff00;
    animation-delay: 0.3s;
}

@keyframes hologram {
    0%, 100% { opacity: 0; transform: translate(0) scale(1); }
    25% { opacity: 0.6; transform: translate(1px, 1px) scale(1.02); }
    50% { opacity: 0.8; transform: translate(-1px, 1px) scale(1.01); }
    75% { opacity: 0.6; transform: translate(1px, -1px) scale(1.02); }
}

/* Responsive Design */
@media (max-width: 768px) {
    .framework-grid {
        grid-template-columns: 1fr;
    }
    
    .sector-timeline::before {
        left: 20px;
    }
    
    .timeline-item {
        flex-direction: column !important;
        align-items: flex-start;
        padding-left: 3rem;
    }
    
    .timeline-year {
        margin-bottom: 1rem;
        align-self: flex-start;
    }
    
    .timeline-content {
        margin: 0;
        width: 100%;
    }
    
    .leadership-principles {
        grid-template-columns: 1fr;
    }
    
    .competencies-grid {
        grid-template-columns: 1fr;
    }
    
    .values-grid {
        grid-template-columns: 1fr;
    }
    
    .leadership-highlights {
        justify-content: flex-start;
    }
}