/* ============================================
   Connect21 Hybrid Design System CSS
   All 5 Design Options Combined
   Version: 2.0.0 - PROFESSIONAL EDITION
   Created: October 20, 2024
   Updated: October 20, 2024 - Fixed light/dark mode issues
   ============================================ */

/* ============================================
   CRITICAL: Light/Dark Mode Color Management
   This file ensures text is ALWAYS visible
   regardless of background gradient or theme
   ============================================ */

/* ============================================
   OPTION 1: 3D GRADIENT MESH
   Use: Hero sections, premium showcases, CTAs
   LIGHT MODE: Text must be white/light on blue gradient
   DARK MODE: Text must be white on dark gradient
   ============================================ */

/* Animated Gradient Mesh Background - LIGHT MODE */
.gradient-mesh-hero {
    position: relative;
    background: linear-gradient(125deg, 
        #0085CA 0%, 
        #003DA5 35%, 
        #0085CA 70%,
        #00D4FF 100%
    );
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
    overflow: hidden;
}

/* DARK MODE Gradient */
.dark .gradient-mesh-hero {
    background: linear-gradient(125deg, 
        #002D72 0%, 
        #001A44 35%, 
        #003DA5 70%,
        #0085CA 100%
    );
    background-size: 400% 400%;
}

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

/* ============================================
   TEXT COLOR OVERRIDES FOR GRADIENT MESH HERO
   Forces white text on blue gradient backgrounds
   ============================================ */

/* All text inside gradient-mesh-hero MUST be white in LIGHT mode */
.gradient-mesh-hero,
.gradient-mesh-hero * {
    color: #FFFFFF !important;
}

/* Breadcrumbs - White text for maximum contrast on gradient */
/* Override all Tailwind text color classes in nav */
.gradient-mesh-hero nav a,
.gradient-mesh-hero nav span,
.gradient-mesh-hero nav a *,
.gradient-mesh-hero nav .text-c21-neutral-gray,
.gradient-mesh-hero nav a.text-c21-neutral-gray,
.gradient-mesh-hero nav span.text-c21-neutral-gray {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* BUT NOT active breadcrumb spans */
.gradient-mesh-hero nav span:not(.text-c21-vibrant-blue):not(.font-medium) * {
    color: rgba(255, 255, 255, 0.95) !important;
}

.gradient-mesh-hero nav a:hover,
.gradient-mesh-hero nav a:hover *,
.gradient-mesh-hero nav a:hover.text-c21-neutral-gray {
    color: #FFFFFF !important;
}

/* Active breadcrumb - ORANGE and bold for emphasis (brand color) */
/* MUST come after white rules for proper cascade */
.gradient-mesh-hero nav .text-c21-vibrant-blue,
.gradient-mesh-hero nav .text-c21-vibrant-blue *,
.gradient-mesh-hero nav .text-c21-vibrant-blue .lang-en,
.gradient-mesh-hero nav .text-c21-vibrant-blue .lang-ar,
.gradient-mesh-hero nav span.text-c21-vibrant-blue,
.gradient-mesh-hero nav span.text-c21-vibrant-blue *,
.gradient-mesh-hero nav span.text-c21-vibrant-blue .lang-en,
.gradient-mesh-hero nav span.text-c21-vibrant-blue .lang-ar,
.gradient-mesh-hero nav .font-medium,
.gradient-mesh-hero nav .font-medium *,
.gradient-mesh-hero nav .font-medium .lang-en,
.gradient-mesh-hero nav .font-medium .lang-ar {
    color: #FF8200 !important;
    font-weight: 700 !important;
}

/* Lucide icons in breadcrumb navigation */
.gradient-mesh-hero nav i[data-lucide],
.gradient-mesh-hero nav svg,
.gradient-mesh-hero nav i.text-c21-neutral-gray,
.gradient-mesh-hero nav [data-lucide="chevron-right"] {
    color: rgba(255, 255, 255, 0.85) !important;
    stroke: rgba(255, 255, 255, 0.85) !important;
}

/* Badge ABOVE TITLE: "Smart City Innovation" - glassmorphism pill */
/* Target the rounded-full badge specifically */
.gradient-mesh-hero .rounded-full,
.gradient-mesh-hero div.rounded-full,
.gradient-mesh-hero .inline-block.rounded-full {
    background: rgba(255, 255, 255, 0.25) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Badge text - WHITE and BOLD, override Tailwind text-c21-electric-cyan */
.gradient-mesh-hero .rounded-full span,
.gradient-mesh-hero .rounded-full .text-c21-electric-cyan,
.gradient-mesh-hero .rounded-full span.text-c21-electric-cyan,
.gradient-mesh-hero div.rounded-full span {
    color: #FFFFFF !important;
    font-weight: 700 !important;
    background: transparent !important;
}

/* BELOW HERO TEXT: "For City Authorities" badge with icon */
/* This is the bg-white div with icon - force blue colors */
.gradient-mesh-hero .bg-white,
.gradient-mesh-hero div.bg-white,
.gradient-mesh-hero .inline-flex.bg-white {
    background: #FFFFFF !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* All text inside white badges - FORCE BLUE */
.gradient-mesh-hero .bg-white span,
.gradient-mesh-hero .bg-white .font-medium,
.gradient-mesh-hero div.bg-white span {
    color: #0085CA !important;
}

/* Icon container inside white badge - light blue background */
.gradient-mesh-hero .bg-white .bg-c21-electric-cyan\/10,
.gradient-mesh-hero .bg-white [class*="bg-c21-electric-cyan"] {
    background: rgba(0, 133, 202, 0.1) !important;
}

/* Icon itself inside white badge - BLUE */
.gradient-mesh-hero .bg-white i,
.gradient-mesh-hero .bg-white svg,
.gradient-mesh-hero .bg-white .text-c21-electric-cyan,
.gradient-mesh-hero .bg-white i.text-c21-electric-cyan {
    color: #0085CA !important;
    stroke: #0085CA !important;
}

/* Paragraph text */
.gradient-mesh-hero p {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* CRITICAL OVERRIDES: Force specific Tailwind classes */
/* Breadcrumbs - Override Tailwind text-c21-neutral-gray */
.gradient-mesh-hero .text-c21-neutral-gray:not(.bg-white *) {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* Badge above title - Override text-c21-electric-cyan inside rounded-full */
.gradient-mesh-hero .rounded-full .text-c21-electric-cyan {
    color: #FFFFFF !important;
}

/* White badge below - Override text color classes */
.gradient-mesh-hero .bg-white .text-c21-electric-cyan {
    color: #0085CA !important;
}

/* Hero title inside gradient mesh */
.gradient-mesh-hero .hero-title .title-line {
    color: #FFFFFF !important;
}

/* 2nd line gradient text is Pantone 1575 C (orange) */
.gradient-mesh-hero .gradient-text-hero {
    background: none !important;
    -webkit-text-fill-color: #FF8200 !important;
    background-clip: unset !important;
    color: #FF8200 !important;
}

/* Dark mode - keep text white except orange 2nd line */
.dark .gradient-mesh-hero,
.dark .gradient-mesh-hero * {
    color: #FFFFFF !important;
}

.dark .gradient-mesh-hero .gradient-text-hero {
    background: none !important;
    -webkit-text-fill-color: #FF8200 !important;
    background-clip: unset !important;
    color: #FF8200 !important;
}

/* Connected Node Network Animation */
.floating-shapes-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Network Canvas */
.network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

.dark .network-canvas {
    opacity: 0.3;
}

/* Network Nodes (dots) */
.network-node {
    position: absolute;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    animation: nodeFloat 4s ease-in-out infinite;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

.dark .network-node {
    background: rgba(255, 255, 255, 0.5);
}

/* Node positions - distributed across the hero section */
.network-node:nth-child(1) { top: 15%; left: 10%; animation-delay: 0s; }
.network-node:nth-child(2) { top: 25%; left: 85%; animation-delay: 0.5s; }
.network-node:nth-child(3) { top: 45%; left: 20%; animation-delay: 1s; }
.network-node:nth-child(4) { top: 60%; left: 75%; animation-delay: 1.5s; }
.network-node:nth-child(5) { top: 70%; left: 40%; animation-delay: 2s; }
.network-node:nth-child(6) { top: 35%; left: 55%; animation-delay: 2.5s; }
.network-node:nth-child(7) { top: 80%; left: 15%; animation-delay: 3s; }
.network-node:nth-child(8) { top: 20%; left: 45%; animation-delay: 3.5s; }

@keyframes nodeFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    50% {
        transform: translate(10px, -15px) scale(1.2);
        opacity: 1;
    }
}

/* Connection Lines - SVG lines connecting nodes */
.network-line {
    stroke: rgba(255, 255, 255, 0.2);
    stroke-width: 1;
    animation: linePulse 3s ease-in-out infinite;
}

.dark .network-line {
    stroke: rgba(255, 255, 255, 0.15);
}

@keyframes linePulse {
    0%, 100% {
        opacity: 0.2;
        stroke-width: 1;
    }
    50% {
        opacity: 0.4;
        stroke-width: 1.5;
    }
}

/* Glassmorphism Cards */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.glass-card:hover {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transform: translateY(-5px);
}

.dark .glass-card {
    background: rgba(26, 35, 50, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .glass-card:hover {
    background: rgba(26, 35, 50, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Particle Grid Pattern */
.particle-grid {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.15) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.1) 2px, transparent 2px);
    background-size: 50px 50px;
    background-position: 0 0, 25px 25px;
    pointer-events: none;
}

.dark .particle-grid {
    background-image: 
        radial-gradient(circle at 25% 25%, rgba(0, 133, 202, 0.1) 2px, transparent 2px),
        radial-gradient(circle at 75% 75%, rgba(255, 130, 0, 0.08) 2px, transparent 2px);
}

/* ============================================
   OPTION 2: VIDEO BACKGROUND (Simulated)
   Use: Storytelling sections, emotional impact
   PROFESSIONAL STYLING FOR "BORN FROM EXCELLENCE"
   ============================================ */

/* Video Background Container */
.video-background-section {
    position: relative;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, 
        #003DA5 0%, 
        #0085CA 50%,
        #00D4FF 100%
    );
}

/* Animated Pattern Background */
.animated-pattern-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(125deg, 
        #003DA5 0%, 
        #0085CA 35%, 
        #00D4FF 70%,
        #0085CA 100%
    );
    background-size: 400% 400%;
    animation: patternFlow 20s ease infinite;
    opacity: 1;
}

.dark .animated-pattern-bg {
    background: linear-gradient(125deg, 
        #001A44 0%, 
        #002D72 35%, 
        #003DA5 70%,
        #0085CA 100%
    );
}

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

/* Video Overlay - Subtle darkening for readability */
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(0, 29, 72, 0.6) 0%, 
        rgba(0, 61, 165, 0.4) 100%
    );
    mix-blend-mode: multiply;
}

.dark .video-overlay {
    background: linear-gradient(135deg, 
        rgba(0, 15, 28, 0.7) 0%, 
        rgba(0, 29, 72, 0.5) 100%
    );
}

/* ============================================
   TEXT OVERRIDES FOR VIDEO BACKGROUND SECTION
   All text MUST be white for maximum contrast
   ============================================ */

.video-background-section * {
    color: #FFFFFF !important;
}

.video-background-section h2 {
    color: #FFFFFF !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
    line-height: 1.2;
}

.video-background-section p {
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 400 !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    line-height: 1.75;
}

/* Dark mode keeps same styling */
.dark .video-background-section * {
    color: #FFFFFF !important;
}

.dark .video-background-section h2 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

/* ============================================
   CURRENT YEAR CARD (2024-25) - Special Styling
   White background in light mode, proper contrast
   ============================================ */

/* Override neumorphic card for current year */
.current-year-card {
    background: #FFFFFF !important;
    border: 2px solid rgba(0, 133, 202, 0.2) !important;
    box-shadow: 0 10px 40px rgba(0, 133, 202, 0.15) !important;
}

.current-year-card:hover {
    box-shadow: 0 15px 50px rgba(0, 133, 202, 0.25) !important;
}

/* Text colors for current year card */
.current-year-card h3 {
    color: #07203F !important;
}

.current-year-card p {
    color: #4A5568 !important;
}

/* Dark mode for current year card */
.dark .current-year-card {
    background: linear-gradient(145deg, #1a2332, #1e2938) !important;
    border: 2px solid rgba(0, 163, 255, 0.3) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4) !important;
}

.dark .current-year-card h3 {
    color: #FFFFFF !important;
}

.dark .current-year-card p {
    color: #E2E8F0 !important;
}

/* Floating Stats Cards */
.floating-stat-card {
    animation: floatCard 4s ease-in-out infinite;
}

.floating-stat-card:nth-child(1) { animation-delay: 0s; }
.floating-stat-card:nth-child(2) { animation-delay: 0.5s; }
.floating-stat-card:nth-child(3) { animation-delay: 1s; }
.floating-stat-card:nth-child(4) { animation-delay: 1.5s; }

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

/* ============================================
   OPTION 3: BENTO GRID
   Use: Feature grids, service offerings
   ============================================ */

/* Bento Grid Container */
.bento-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(12, 1fr);
    }
}

/* Bento Tile Base */
.bento-tile {
    background: white;
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(7, 32, 63, 0.1), 
                0 2px 4px -1px rgba(7, 32, 63, 0.06);
    overflow: hidden;
}

.dark .bento-tile {
    background: #1A2332;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 
                0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.bento-tile:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 133, 202, 0.3);
}

.dark .bento-tile:hover {
    box-shadow: 0 20px 40px rgba(0, 163, 255, 0.2);
}

/* Bento Tile Sizes */
.bento-span-4 { grid-column: span 1; }
.bento-span-5 { grid-column: span 1; }
.bento-span-7 { grid-column: span 1; }
.bento-span-8 { grid-column: span 1; }
.bento-span-12 { grid-column: span 1; }

@media (min-width: 1024px) {
    .bento-span-4 { grid-column: span 4; }
    .bento-span-5 { grid-column: span 5; }
    .bento-span-7 { grid-column: span 7; }
    .bento-span-8 { grid-column: span 8; }
    .bento-span-12 { grid-column: span 12; }
}

/* Bento Grid Stats - Professional Blue */
.bento-tile .text-5xl,
.bento-tile .font-black {
    color: #0085CA !important;
}

.dark .bento-tile .text-5xl,
.dark .bento-tile .font-black {
    color: #00A3FF !important;
}

/* Image Zoom Effect */
.zoom-image {
    transition: transform 0.5s ease;
    overflow: hidden;
}

.bento-tile:hover .zoom-image {
    transform: scale(1.1);
}

/* Icon Grid */
.icon-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .icon-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================
   OPTION 4: ISOMETRIC ILLUSTRATION
   Use: Technical/process sections
   ============================================ */

/* Isometric Section Container */
.isometric-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .isometric-section {
        grid-template-columns: 1fr 1fr;
    }
}

/* Isometric SVG Container */
.isometric-container {
    position: relative;
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Floating Isometric Elements */
.iso-element {
    animation: float-iso 4s ease-in-out infinite;
    transform-origin: center;
}

.iso-element:nth-child(1) { animation-delay: 0s; }
.iso-element:nth-child(2) { animation-delay: 0.5s; }
.iso-element:nth-child(3) { animation-delay: 1s; }
.iso-element:nth-child(4) { animation-delay: 1.5s; }

@keyframes float-iso {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    50% { transform: translateY(-15px) translateX(5px); }
}

/* Data Flow Lines */
.data-flow {
    animation: flow 3s linear infinite;
    stroke-dasharray: 5, 5;
}

@keyframes flow {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -20; }
}

/* Pulsing Nodes */
.pulse-node {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; r: 4; }
    50% { opacity: 0.6; r: 6; }
}

/* Info Cards Overlay */
.iso-info-card {
    position: absolute;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    animation: fadeInUp 0.5s ease-out;
}

.dark .iso-info-card {
    background: rgba(26, 35, 50, 0.95);
}

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

/* ============================================
   OPTION 5: NEUMORPHIC CARDS
   Use: Team sections, testimonials
   ============================================ */

/* Neumorphic Card Base */
.neuro-card {
    background: linear-gradient(145deg, #e6f2ff, #ffffff);
    border-radius: 1.5rem;
    padding: 2rem;
    transition: all 0.3s ease;
    box-shadow: 
        20px 20px 60px #d1e3f5,
        -20px -20px 60px #ffffff;
}

.neuro-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        25px 25px 70px #d1e3f5,
        -25px -25px 70px #ffffff;
}

/* Dark Mode Neumorphism */
.dark .neuro-card {
    background: linear-gradient(145deg, #1a2332, #1e2938);
    box-shadow: 
        20px 20px 60px #0f1419,
        -20px -20px 60px #252f42;
}

.dark .neuro-card:hover {
    box-shadow: 
        25px 25px 70px #0f1419,
        -25px -25px 70px #252f42;
}

/* Neumorphic Button */
.neuro-btn {
    background: linear-gradient(145deg, #0092db, #0077b3);
    border: none;
    border-radius: 1rem;
    padding: 1rem 2rem;
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 
        10px 10px 30px #006699,
        -10px -10px 30px #00a3ff;
}

.neuro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        12px 12px 35px #006699,
        -12px -12px 35px #00a3ff;
}

.neuro-btn:active {
    transform: translateY(0);
    box-shadow: 
        inset 10px 10px 30px #006699,
        inset -10px -10px 30px #00a3ff;
}

/* Neumorphic Badge */
.neuro-badge {
    background: linear-gradient(145deg, #f0f7ff, #ffffff);
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
    box-shadow: 
        5px 5px 15px #d1e3f5,
        -5px -5px 15px #ffffff;
}

.dark .neuro-badge {
    background: linear-gradient(145deg, #151d2a, #1a2332);
    box-shadow: 
        5px 5px 15px #0a0f1c,
        -5px -5px 15px #1e2938;
}

/* Team Member Card (Neumorphic) */
.team-neuro-card {
    text-align: center;
}

.team-neuro-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: 0 auto 1.5rem;
    box-shadow: 
        10px 10px 30px #d1e3f5,
        -10px -10px 30px #ffffff;
}

.dark .team-neuro-card img {
    box-shadow: 
        10px 10px 30px #0f1419,
        -10px -10px 30px #252f42;
}

/* ============================================
   SHARED UTILITIES
   ============================================ */

/* Content Container */
.hybrid-content {
    position: relative;
    z-index: 10;
}

/* Section Spacing */
.hybrid-section {
    padding: 4rem 1rem;
}

@media (min-width: 1024px) {
    .hybrid-section {
        padding: 6rem 2rem;
    }
}

/* Gradient Text (Brand Colors) */
.gradient-text-c21 {
    background: linear-gradient(135deg, #0085CA 0%, #003DA5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Gradient Text Orange */
.gradient-text-orange {
    background: linear-gradient(135deg, #FF8200 0%, #C75B12 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Smooth Transitions */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Ensure all animations respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   BUTTONS ON GRADIENT BACKGROUNDS
   ============================================ */

/* Primary buttons on gradient backgrounds */
.gradient-mesh-hero .btn,
.gradient-mesh-hero button,
.video-background-section .btn,
.video-background-section button {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #FFFFFF !important;
    border: 2px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(10px);
}

.gradient-mesh-hero .btn:hover,
.gradient-mesh-hero button:hover,
.video-background-section .btn:hover,
.video-background-section button:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px);
}

/* ============================================
   SOLUTION PAGES CARD FIXES (LIGHT MODE)
   Forces cards to stay white with proper contrast
   ============================================ */

/* Ensure solution cards stay white on hover in light mode */
section.bg-white .group.bg-white:hover,
section[class*="bg-white"] .group.bg-white:hover,
.bg-white.group:hover {
    background-color: #FFFFFF !important;
}

/* Ensure card text stays dark on hover in light mode */
section.bg-white .group:hover h3,
section.bg-white .group:hover p,
section.bg-white .group:hover span {
    color: inherit !important;
}

/* ============================================
   SOLUTION CARDS: Enhanced Hover Effects
   ============================================ */

/* 1. Icon container: gradient → white background on hover */
.group:hover .bg-gradient-to-br {
    background: #FFFFFF !important;
    border: 2px solid rgba(0, 133, 202, 0.2);
}

/* 2. Icon: white → colored on hover */
.group:hover .bg-gradient-to-br i,
.group:hover .bg-gradient-to-br svg {
    color: #0085CA !important;
    stroke: #0085CA !important;
}

/* Handle different gradient combinations */
.group:hover .from-c21-electric-cyan.to-c21-vibrant-blue i,
.group:hover .from-c21-electric-cyan.to-c21-vibrant-blue svg {
    color: #00D4FF !important;
    stroke: #00D4FF !important;
}

.group:hover .from-c21-vibrant-blue.to-c21-deep-blue i,
.group:hover .from-c21-vibrant-blue.to-c21-deep-blue svg {
    color: #0085CA !important;
    stroke: #0085CA !important;
}

.group:hover .from-c21-warm-gold.to-c21-bright-orange i,
.group:hover .from-c21-warm-gold.to-c21-bright-orange svg {
    color: #FFB800 !important;
    stroke: #FFB800 !important;
}

.group:hover .from-c21-fresh-green.to-c21-electric-cyan i,
.group:hover .from-c21-fresh-green.to-c21-electric-cyan svg {
    color: #00CC88 !important;
    stroke: #00CC88 !important;
}

.group:hover .from-c21-digital-orange.to-c21-burnt-orange i,
.group:hover .from-c21-digital-orange.to-c21-burnt-orange svg {
    color: #FF8200 !important;
    stroke: #FF8200 !important;
}

/* 3. "Learn More" link: blue → orange on hover */
.group:hover .text-c21-vibrant-blue {
    color: #FF8200 !important;
}

/* 4. Arrow icon next to "Learn More": also orange */
.group:hover .text-c21-vibrant-blue i,
.group:hover .text-c21-vibrant-blue svg {
    color: #FF8200 !important;
    stroke: #FF8200 !important;
}

/* Dark mode: keep existing behavior */
.dark section .group.dark\:bg-c21-dark-surface:hover {
    background-color: #1A2332 !important;
}

/* ============================================
   CARD ICON HOVER EFFECTS
   Invert colors: white background + colored icon
   ============================================ */

/* Icon container: Change gradient background to white on hover */
section .group:hover .w-16.h-16[class*="bg-gradient"] {
    background: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(0, 133, 202, 0.2) !important;
    transition: all 0.3s ease !important;
}

/* Icon colors on hover - match the original gradient colors */
/* Electric Cyan to Vibrant Blue gradient */
section .group:hover .bg-gradient-to-br.from-c21-electric-cyan i,
section .group:hover .bg-gradient-to-br.from-c21-electric-cyan svg {
    color: #0085CA !important;
    stroke: #0085CA !important;
}

/* Vibrant Blue to Deep Blue gradient */
section .group:hover .bg-gradient-to-br.from-c21-vibrant-blue i,
section .group:hover .bg-gradient-to-br.from-c21-vibrant-blue svg {
    color: #0085CA !important;
    stroke: #0085CA !important;
}

/* Warm Gold to Bright Orange gradient */
section .group:hover .bg-gradient-to-br.from-c21-warm-gold i,
section .group:hover .bg-gradient-to-br.from-c21-warm-gold svg {
    color: #FF8200 !important;
    stroke: #FF8200 !important;
}

/* Bright Orange to Vibrant Blue gradient */
section .group:hover .bg-gradient-to-br.from-c21-bright-orange i,
section .group:hover .bg-gradient-to-br.from-c21-bright-orange svg {
    color: #FF6B35 !important;
    stroke: #FF6B35 !important;
}

/* Fresh Green to Electric Cyan gradient */
section .group:hover .bg-gradient-to-br.from-c21-fresh-green i,
section .group:hover .bg-gradient-to-br.from-c21-fresh-green svg {
    color: #00CC88 !important;
    stroke: #00CC88 !important;
}

/* ============================================
   LEARN MORE LINK HOVER EFFECTS
   Change color and add smooth transitions
   ============================================ */

/* Learn More link container - change to orange on hover */
section .group:hover .text-c21-vibrant-blue.font-semibold {
    color: #FF8200 !important;
    transition: all 0.3s ease !important;
}

/* Arrow icon in Learn More - also change to orange */
section .group:hover .text-c21-vibrant-blue i[data-lucide="arrow-right"],
section .group:hover .text-c21-vibrant-blue svg[data-lucide="arrow-right"] {
    color: #FF8200 !important;
    stroke: #FF8200 !important;
    transition: all 0.3s ease !important;
}

/* All spans inside Learn More link */
section .group:hover .text-c21-vibrant-blue span {
    color: #FF8200 !important;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

/* Mobile: Stack everything */
@media (max-width: 640px) {
    .gradient-mesh-hero,
    .video-background-section {
        min-height: 400px;
    }
    
    .floating-shapes-container {
        display: none; /* Hide complex animations on mobile */
    }
    
    .isometric-container {
        height: 300px;
    }
    
    .video-background-section h2 {
        font-size: 2rem !important;
    }
}

/* Tablet: Begin grid layouts */
@media (min-width: 641px) and (max-width: 1024px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .bento-span-4,
    .bento-span-5,
    .bento-span-7,
    .bento-span-8 {
        grid-column: span 1;
    }
    
    .bento-span-12 {
        grid-column: span 2;
    }
}

/* Desktop: Full layout */
@media (min-width: 1025px) {
    .gradient-mesh-hero,
    .video-background-section {
        min-height: 600px;
    }
}

/* Ultra-wide: Max content width */
@media (min-width: 1920px) {
    .hybrid-content {
        max-width: 1440px;
        margin: 0 auto;
    }
}

/* ============================================
   CRITICAL CTA BUTTON OVERRIDES - FINAL
   MUST BE AT END TO OVERRIDE ALL OTHER STYLES
   ============================================ */

/* "Start Your Project" - White bg + Blue text → Blue bg + White text on hover */
.gradient-mesh-hero .cta-button-white,
.gradient-mesh-hero button.bookConsultationTrigger.cta-button-white,
button.bookConsultationTrigger.cta-button-white,
button.cta-button-white,
.cta-button-white {
    padding: 1rem 2rem !important;
    background: #FFFFFF !important;
    color: #0085CA !important;
    border: none !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.gradient-mesh-hero .cta-button-white *,
.gradient-mesh-hero button.bookConsultationTrigger.cta-button-white *,
button.bookConsultationTrigger.cta-button-white *,
button.cta-button-white *,
.cta-button-white * {
    color: #0085CA !important;
}

.gradient-mesh-hero .cta-button-white:hover,
.gradient-mesh-hero button.bookConsultationTrigger.cta-button-white:hover,
button.bookConsultationTrigger.cta-button-white:hover,
button.cta-button-white:hover,
.cta-button-white:hover {
    background: #0085CA !important;
    color: #FFFFFF !important;
    border: none !important;
    border-color: transparent !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 133, 202, 0.4) !important;
}

.gradient-mesh-hero .cta-button-white:hover *,
.gradient-mesh-hero button.bookConsultationTrigger.cta-button-white:hover *,
button.bookConsultationTrigger.cta-button-white:hover *,
button.cta-button-white:hover *,
.cta-button-white:hover * {
    color: #FFFFFF !important;
}

/* "View Our Work" - Transparent bg + White text/border → Blue bg + White text on hover */
.gradient-mesh-hero .cta-button-outline,
.gradient-mesh-hero a.cta-button-outline,
a.cta-button-outline,
.cta-button-outline {
    display: inline-block !important;
    padding: 1rem 2rem !important;
    background: transparent !important;
    color: #FFFFFF !important;
    border: 2px solid #FFFFFF !important;
    border-radius: 0.75rem !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.gradient-mesh-hero .cta-button-outline *,
.gradient-mesh-hero a.cta-button-outline *,
a.cta-button-outline *,
.cta-button-outline * {
    color: #FFFFFF !important;
}

.gradient-mesh-hero .cta-button-outline:hover,
.gradient-mesh-hero a.cta-button-outline:hover,
a.cta-button-outline:hover,
.cta-button-outline:hover {
    background: #0085CA !important;
    color: #FFFFFF !important;
    border: 2px solid #0085CA !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 133, 202, 0.4) !important;
}

.gradient-mesh-hero .cta-button-outline:hover *,
.gradient-mesh-hero a.cta-button-outline:hover *,
a.cta-button-outline:hover *,
.cta-button-outline:hover * {
    color: #FFFFFF !important;
}