/* Custom styles for HMD website */

/* ===== DARK/LIGHT MODE THEME SYSTEM ===== */
:root {
    /* Light mode (default) */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-surface: #f3f4f6;
    --bg-hover: #e5e7eb;
    --bg-nav: rgba(255, 255, 255, 0.95);
    --text-primary: #111827;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --border-color: #e5e7eb;
    --primary-color: #f97316;
    --primary-hover: #ea580c;
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --shadow-color: rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] {
    --bg-primary: #111827;
    --bg-secondary: #1f2937;
    --bg-surface: #374151;
    --bg-hover: #4b5563;
    --bg-nav: rgba(17, 24, 39, 0.95);
    --text-primary: #f9fafb;
    --text-secondary: #e5e7eb;
    --text-muted: #9ca3af;
    --border-color: #374151;
    --primary-color: #f97316;
    --primary-hover: #fb923c;
    --card-bg: #1f2937;
    --card-border: #374151;
    --shadow-color: rgba(0, 0, 0, 0.3);
}

/* Theme utility classes */
.theme-bg-primary { background-color: var(--bg-primary) !important; }
.theme-bg-secondary { background-color: var(--bg-secondary) !important; }
.theme-bg-surface { background-color: var(--bg-surface) !important; }
.theme-bg-hover { background-color: var(--bg-hover) !important; }
.theme-bg-nav { background-color: var(--bg-nav) !important; }

.theme-text-primary { color: var(--text-primary) !important; }
.theme-text-secondary { color: var(--text-secondary) !important; }
.theme-text-muted { color: var(--text-muted) !important; }

.theme-border { border-color: var(--border-color) !important; }

/* Theme toggle button - REVERSED LOGIC */
.theme-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.theme-icon-dark,
.theme-icon-light {
    transition: transform 0.3s ease;
}

.theme-toggle-btn:hover .theme-icon-dark,
.theme-toggle-btn:hover .theme-icon-light {
    transform: rotate(15deg);
}

/* REVERSED: Dark mode shows sun, Light mode shows moon */
[data-theme="dark"] .theme-icon-dark {
    display: none;  /* Hide moon in dark mode */
}

[data-theme="dark"] .theme-icon-light {
    display: block; /* Show sun in dark mode */
}

[data-theme="light"] .theme-icon-dark {
    display: block; /* Show moon in light mode */
}

[data-theme="light"] .theme-icon-light {
    display: none;  /* Hide sun in light mode */
}

/* Apply theme to existing elements */
body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.bg-white,
.bg-gray-50,
section.bg-white,
section.bg-gray-50 {
    background-color: var(--bg-primary) !important;
}

.bg-gray-100,
.bg-gray-200 {
    background-color: var(--bg-surface) !important;
}

.text-gray-900,
.text-gray-800,
.text-gray-700 {
    color: var(--text-primary) !important;
}

.text-gray-600,
.text-gray-500 {
    color: var(--text-secondary) !important;
}

.border-gray-200,
.border-gray-300 {
    border-color: var(--border-color) !important;
}

/* Project cards */
.bg-white.rounded-2xl {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
}

/* Process section images */
.bg-gray-50.p-6.rounded-2xl {
    background-color: var(--bg-surface) !important;
}

/* Feature cards */
.bg-gray-50.p-8.rounded-2xl {
    background-color: var(--bg-surface) !important;
    border-color: var(--card-border) !important;
}

/* Gradient adjustments for dark mode */
[data-theme="dark"] .bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, 
        rgba(249, 115, 22, 0.2), 
        var(--bg-primary), 
        rgba(0, 0, 0, 0.3)
    ) !important;
}

[data-theme="dark"] section.bg-gradient-to-r {
    background-image: linear-gradient(to right, 
        #f97316, 
        #1f2937
    ) !important;
}

[data-theme="dark"] .hover\:shadow-xl:hover,
[data-theme="dark"] .hover\:shadow-2xl:hover {
    --tw-shadow-color: var(--shadow-color) !important;
    box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color) !important;
}

/* Nav link animation for dark mode */
[data-theme="dark"] .nav-link::after {
    background: linear-gradient(135deg, #f97316 0%, #fff 100%);
}

/* Scrollbar for dark mode */
[data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f97316 0%, #4b5563 100%);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #4b5563 0%, #f97316 100%);
}

/* Logo text color in dark mode */
[data-theme="dark"] .text-xl.font-bold.text-gray-900 {
    color: var(--text-primary) !important;
}

/* Footer text colors */
[data-theme="dark"] .text-gray-400,
[data-theme="dark"] .text-gray-500 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] .text-gray-700 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-900 {
    color: var(--text-primary) !important;
}

/* Hero section overlay adjustments for dark mode */
[data-theme="dark"] .absolute.inset-0 {
    opacity: 0.2 !important;
}

/* Smooth transitions for theme switching */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Buttons in dark mode */
[data-theme="dark"] .bg-white.hover\:bg-gray-100 {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white.hover\:bg-gray-100:hover {
    background-color: var(--bg-hover) !important;
}

/* Project location text */
[data-theme="dark"] .text-gray-500.text-sm {
    color: var(--text-muted) !important;
}

/* Reset some Tailwind conflicts */
* {
    box-sizing: border-box;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Ensure components display correctly */
custom-navigation, custom-footer {
    display: block;
    width: 100%;
}

/* Fix for navigation background */
custom-navigation nav {
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(10px) !important;
}

/* Fix for footer spacing */
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}
/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Custom component styles */
.custom-shape-divider {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}

/* Custom button styles */
.btn-primary {
    background: linear-gradient(135deg, #0ea5e9 0%, #0ea5e9 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(14, 165, 233, 0.2);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(14, 165, 233, 0.3);
}

.btn-secondary {
    background: linear-gradient(135deg, #f97316 0%, #f97316 100%);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(249, 115, 22, 0.2);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.3);
}

/* Custom card hover effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Image hover effects */
.img-hover-zoom {
    overflow: hidden;
}

.img-hover-zoom img {
    transition: transform 0.7s ease;
}

.img-hover-zoom:hover img {
    transform: scale(1.1);
}

/* Custom section spacing */
.section-padding {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

@media (min-width: 768px) {
    .section-padding {
        padding-top: 7rem;
        padding-bottom: 7rem;
    }
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #0ea5e9 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #f97316 0%, #000 100%);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #000 0%, #f97316 100%);
    opacity: 0.8;
}
/* Custom color definitions for missing Tailwind v4 colors */
:root {
  --color-primary: #f97316;
  --color-primary-50: rgba(249, 115, 22, 0.1);
  --color-primary-100: rgba(249, 115, 22, 0.2);
  --color-primary-500: #f97316;
  --color-primary-600: #ea580c;
  --color-primary-700: #c2410c;
  
  --color-secondary: #000000;
  --color-secondary-50: rgba(0, 0, 0, 0.1);
  --color-secondary-100: rgba(0, 0, 0, 0.2);
  --color-secondary-500: #000000;
  --color-secondary-600: #1c1917;
  --color-secondary-700: #292524;
}

/* Apply custom colors to Tailwind classes */
.text-primary { color: var(--color-primary) !important; }
.bg-primary { background-color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }

.text-secondary { color: var(--color-secondary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

/* For opacity variants */
.text-primary\/10 { color: var(--color-primary-50) !important; }
.bg-primary\/10 { background-color: var(--color-primary-50) !important; }
.border-primary\/30 { border-color: rgba(249, 115, 22, 0.3) !important; }

.text-secondary\/10 { color: var(--color-secondary-50) !important; }
.bg-secondary\/10 { background-color: var(--color-secondary-50) !important; }
.border-secondary\/30 { border-color: rgba(0, 0, 0, 0.3) !important; }

/* For gradient stops */
.from-primary { --tw-gradient-from: var(--color-primary) !important; }
.to-secondary { --tw-gradient-to: var(--color-secondary) !important; }
.via-primary\/10 { --tw-gradient-via: var(--color-primary-50) !important; }
.via-secondary\/10 { --tw-gradient-via: var(--color-secondary-50) !important; }

/* For hover states */
.hover\:bg-primary:hover { background-color: var(--color-primary) !important; }
.hover\:bg-primary\/90:hover { background-color: rgba(249, 115, 22, 0.9) !important; }
.hover\:border-primary\/30:hover { border-color: rgba(249, 115, 22, 0.3) !important; }
.hover\:border-secondary\/30:hover { border-color: rgba(0, 0, 0, 0.3) !important; }

/* Text color utilities */
.hover\:text-primary\/80:hover { color: rgba(249, 115, 22, 0.8) !important; }

/* ===== COMPLETE CUSTOM COLOR FIX ===== */
/* Primary color (orange) */
:root {
  /* Primary color shades */
  --color-primary: #f97316;
  --color-primary-10: rgba(249, 115, 22, 0.1);
  --color-primary-30: rgba(249, 115, 22, 0.3);
  --color-primary-50: rgba(249, 115, 22, 0.5);
  --color-primary-90: rgba(249, 115, 22, 0.9);
  
  /* Secondary color (black) */
  --color-secondary: #000000;
  --color-secondary-10: rgba(0, 0, 0, 0.1);
  --color-secondary-30: rgba(0, 0, 0, 0.3);
  
  /* White with opacity */
  --color-white-10: rgba(255, 255, 255, 0.1);
}

/* ===== SOLID COLORS ===== */
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }

.bg-secondary { background-color: var(--color-secondary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

/* ===== OPACITY VARIANTS ===== */
.bg-primary\/10 { background-color: var(--color-primary-10) !important; }
.bg-primary\/30 { background-color: var(--color-primary-30) !important; }
.bg-primary\/90 { background-color: var(--color-primary-90) !important; }

.bg-secondary\/10 { background-color: var(--color-secondary-10) !important; }
.bg-secondary\/30 { background-color: var(--color-secondary-30) !important; }

.text-primary\/10 { color: var(--color-primary-10) !important; }
.text-primary\/80 { color: rgba(249, 115, 22, 0.8) !important; }

.border-primary\/30 { border-color: var(--color-primary-30) !important; }
.border-secondary\/30 { border-color: var(--color-secondary-30) !important; }

/* ===== GRADIENT STOPS ===== */
/* For: from-primary/10 via-white to-secondary/10 */
.from-primary\/10 { 
  --tw-gradient-from: var(--color-primary-10) !important;
  --tw-gradient-stops: var(--tw-gradient-position), var(--color-primary-10) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position) !important;
}

.via-white { 
  --tw-gradient-via: var(--color-white) !important;
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--color-white) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-via-stops) !important;
}

.to-secondary\/10 { 
  --tw-gradient-to: var(--color-secondary-10) !important;
}

/* For: from-primary to-secondary (CTA section) */
.from-primary { 
  --tw-gradient-from: var(--color-primary) !important;
  --tw-gradient-stops: var(--tw-gradient-position), var(--color-primary) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position) !important;
}

.to-secondary { 
  --tw-gradient-to: var(--color-secondary) !important;
}

/* ===== HOVER STATES ===== */
.hover\:bg-primary:hover { background-color: var(--color-primary) !important; }
.hover\:bg-primary\/90:hover { background-color: var(--color-primary-90) !important; }
.hover\:bg-primary\/20:hover { background-color: rgba(249, 115, 22, 0.2) !important; }

.hover\:border-primary\/30:hover { border-color: var(--color-primary-30) !important; }
.hover\:border-secondary\/30:hover { border-color: var(--color-secondary-30) !important; }

.hover\:text-primary\/80:hover { color: rgba(249, 115, 22, 0.8) !important; }

/* ===== SPECIAL FIXES ===== */
/* For CTA section buttons */
.bg-white { background-color: var(--color-white) !important; }
.bg-transparent { background-color: transparent !important; }

/* White with opacity for hover */
.hover\:bg-white\/20:hover { background-color: var(--color-white-10) !important; }

/* ===== FORCE OVERRIDES ===== */
section.bg-gradient-to-br { 
  background-image: linear-gradient(to bottom right, 
    rgba(249, 115, 22, 0.1), 
    white, 
    rgba(0, 0, 0, 0.1)
  ) !important;
}

section.bg-gradient-to-r { 
  background-image: linear-gradient(to right, 
    #f97316, 
    #000000
  ) !important;
}

/* Feature cards */
.hover\:shadow-xl { 
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

/* Process section line */
.bg-gradient-to-b.from-primary.to-secondary {
  /*background-image: linear-gradient(to bottom, #f97316, #000000) !important;*/
  background-image: linear-gradient(to bottom, #f97316 0%, #000 50%, #f97316 100%);
}

/* ===== NAVIGATION STYLES ===== */
/* Nav link animation */
.nav-link {
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(135deg, #000 0%, #f97316 100%);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Mobile menu animation */
.mobile-menu {
    transition: all 0.3s ease;
    max-height: 0;
    overflow: hidden;
}

.mobile-menu:not(.hidden) {
    max-height: 500px;
}

/* Ensure navigation stays on top */
custom-navigation nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 50 !important;
}

/* ===== NEW HEADER STYLES - ADD AT THE END OF FILE ===== */

/* Header height */
.h-20 {
    height: 5rem;
}

/* Increased header height on mobile for better logo spacing */
@media (max-width: 768px) {
    .h-24 {
        height: 6rem; /* 96px - gives 1rem padding top and bottom */
    }
}

/* Logo heights */
.h-12 {
    height: 3rem;
}
.h-16 {
    height: 4rem;
}

/* Mobile menu */
.mobile-menu {
    transition: all 0.3s ease-in-out;
}

.mobile-menu.hidden {
    display: none !important;
}

/* Navigation links */
.whitespace-nowrap {
    white-space: nowrap;
}

/* Flex utilities */
.flex-1 {
    flex: 1 1 0%;
}

/* Space utilities */
.space-x-8 > * + * {
    margin-left: 2rem;
}

.space-y-4 > * + * {
    margin-top: 1rem;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .h-24 {
        height: 6rem; /* Taller header on mobile */
    }
}

/* Theme toggle button */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    background: transparent;
}

/* Header background with blur */
.theme-bg-nav {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Dark mode header */
[data-theme="dark"] .theme-bg-nav {
    background-color: rgba(17, 24, 39, 0.95) !important;
    border-color: #374151 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Light mode header */
[data-theme="light"] .theme-bg-nav {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: #e5e7eb !important;
}

/* ===== FIXES FOR MOBILE DARK THEME ===== */

/* Ensure dark theme is applied correctly on mobile */
@media (max-width: 768px) {
    [data-theme="dark"] {
        color-scheme: dark;
    }
    
    [data-theme="dark"] body {
        background-color: var(--bg-secondary);
        color: var(--text-primary);
    }
    
    /* Force dark theme on mobile menu */
    [data-theme="dark"] .mobile-menu {
        background-color: var(--bg-nav);
    }
    
    [data-theme="dark"] .mobile-menu a {
        color: var(--text-secondary);
    }
    
    [data-theme="dark"] .mobile-menu a:hover {
        color: var(--primary-color);
    }
}

.custom-nav-logo-mobile {
    height: 4rem !important;  /* 64px - fits in h-24 */
}

.custom-nav-logo-desktop {
    height: 5rem !important;  /* 80px - fits in md:h-28 */
}

@media (min-width: 768px) {
    .custom-nav-logo-desktop {
        height: 6rem !important;  /* 96px - still fits in md:h-28 with py-2 */
    }
}

/* Bigger navigation text */
.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

@media (min-width: 768px) {
    .md\:text-xl {
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
}

/* Bigger icons */
.w-6 {
    width: 1.5rem;
}

.h-6 {
    height: 1.5rem;
}

.w-7 {
    width: 1.75rem;
}

.h-7 {
    height: 1.75rem;
}

/* Increase spacing */
.space-x-10 > * + * {
    margin-left: 2.5rem;
}

/* Mobile menu improvements */
.pb-6 {
    padding-bottom: 1.5rem;
}

.space-y-5 > * + * {
    margin-top: 1.25rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pt-5 {
    padding-top: 1.25rem;
}

/* Theme toggle button adjustments */
.p-2\.5 {
    padding: 0.625rem;
}

/* Ensure theme toggle button icons are visible */
.theme-icon-dark,
.theme-icon-light {
    transition: transform 0.3s ease;
}

/* Force correct icon visibility on page load */
[data-theme="dark"] .theme-icon-dark {
    display: none !important;
}

[data-theme="dark"] .theme-icon-light {
    display: block !important;
}

[data-theme="light"] .theme-icon-dark {
    display: block !important;
}

[data-theme="light"] .theme-icon-light {
    display: none !important;
}

.nav-spacing {
    gap: 5rem; /* This creates space BETWEEN items, not around them */
}

/* ===== FEATHER ICONS THEME FIXES ===== */

/* Default feather icon color - makes all icons theme-aware */
.feather {
    color: var(--text-secondary) !important;
    transition: color 0.2s ease;
}

/* Icons in dark areas/buttons should use appropriate theme color */
.theme-toggle-btn .feather,
.social-link .feather,
.nav-link .feather,
button .feather {
    color: currentColor !important;  /* Inherit from parent button/text */
}

/* Primary-colored icons (orange) */
.feather.text-primary,
[class*="bg-primary"] .feather,
[class*="text-primary"] .feather {
    color: var(--primary-color) !important;
}

/* Make icons inherit parent color on buttons with white text */
button .feather, 
a .feather,
[class*="text-white"] .feather {
    color: inherit !important;
}

/* Icons in white/dark theme toggle areas */
[data-theme="dark"] .feather {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .bg-white .feather,
[data-theme="dark"] .bg-gray-50 .feather,
[data-theme="dark"] .bg-gray-100 .feather {
    color: var(--text-primary) !important;
}

/* Fix for specific icon containers */
.feather.icon-light-mode {
    color: var(--text-primary) !important;
}

.feather.icon-dark-mode {
    color: var(--text-secondary) !important;
}

/* Icon circles/badges */
.rounded-full .feather,
.w-14.h-14 .feather,
.w-12.h-12 .feather {
    color: currentColor !important;
}

/* Feature card icons - should be orange */
.bg-primary\/10 .feather,
.bg-secondary\/10 .feather,
[class*="bg-primary"] .feather,
[class*="bg-secondary"] .feather {
    color: var(--primary-color) !important;
}

/* Force all icons in feature cards to be orange */
.bg-gray-50.p-8.rounded-2xl .feather {
    color: var(--primary-color) !important;
}

/* ===== CENTER FEATURE CARD ICONS GLOBALLY ===== */

/* Target any icon circle inside feature cards */
.bg-gray-50.p-8.rounded-2xl .rounded-full {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center all headings inside feature cards */
.bg-gray-50.p-8.rounded-2xl h3 {
    text-align: center !important;
}

/* Center all paragraphs inside feature cards */
.bg-gray-50.p-8.rounded-2xl p {
    text-align: center !important;
}

/* ===== CENTER FEATURE CARD ICONS GLOBALLY ===== */

/* Target any icon circle inside feature cards */
.bg-gray-50.p-8.rounded-2xl .rounded-full {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Center all headings inside feature cards */
.bg-gray-50.p-8.rounded-2xl h3 {
    text-align: center !important;
}

/* Center all paragraphs inside feature cards */
.bg-gray-50.p-8.rounded-2xl p {
    text-align: center !important;
}

/* ===== CENTER TIMELINE/STAT CARDS ===== */

/* Center content in cards with bg-white p-6 rounded-2xl */
.bg-white.p-6.rounded-2xl {
    text-align: center !important;
}

/* Center the numbers (2015, etc.) */
.bg-white.p-6.rounded-2xl .text-4xl {
    text-align: center !important;
}

/* Center the titles (Основание Компании, etc.) */
.bg-white.p-6.rounded-2xl .text-gray-700.font-semibold {
    text-align: center !important;
}

/* Center the descriptions */
.bg-white.p-6.rounded-2xl p {
    text-align: center !important;
}

/* ===== CENTER EVERYTHING IN ALL CARDS ===== */

/* Center everything in feature cards */
.bg-gray-50.p-8.rounded-2xl {
    text-align: center !important;
}

/* Center everything in stat cards */
.bg-white.p-6.rounded-2xl {
    text-align: center !important;
}

/* Center everything in project cards */
.bg-white.rounded-2xl {
    text-align: center !important;
}

/* Ensure icons are centered (they will be because of text-align: center on parent) */
/* But just to be extra sure, keep the icon circle centering */
.bg-gray-50.p-8.rounded-2xl .rounded-full,
.bg-white.p-6.rounded-2xl .rounded-full,
.bg-white.rounded-2xl .rounded-full {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ===== COMPETITIVE ADVANTAGE CARDS DARK MODE ===== */
[data-theme="dark"] .bg-white.p-6.rounded-xl.shadow-lg {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-white.p-6.rounded-xl.shadow-lg p {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .bg-white.p-6.rounded-xl.shadow-lg .text-gray-700 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .border-l-4.border-primary {
    border-left-color: var(--primary-color) !important;
}

/* Stats row dark mode */
[data-theme="dark"] .text-gray-600 {
    color: var(--text-muted) !important;
}

[data-theme="dark"] .bg-gray-50 {
    background-color: var(--bg-secondary) !important;
}

/* Fix for the decorative divider in dark mode */
[data-theme="dark"] .border-t.border-gray-200 {
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-gray-50.px-4 {
    background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .text-gray-400 {
    color: var(--text-muted) !important;
}

/* Ensure feather icons in competitive advantage cards are orange */
[data-theme="dark"] .bg-white.p-6.rounded-xl.shadow-lg .feather.text-primary {
    color: var(--primary-color) !important;
}

/* Card hover effects in dark mode */
[data-theme="dark"] .hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color) !important;
}

/* ===== TRANSITION FIXES ===== */
/* Restore smooth transitions for all interactive elements */
a, button, .filter-btn, .nav-link, .social-link, 
.project-card, [class*="hover:"],
img, .hover\:scale-110, .hover\:-translate-y-1, .hover\:-translate-y-2,
.bg-white.rounded-2xl, .bg-gray-50.p-8.rounded-2xl,
.theme-toggle-btn, .mobile-menu, .footer-section a {
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Ensure specific transitions work */
.hover\:scale-110:hover {
    transform: scale(1.1) !important;
}

.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem) !important;
}

.hover\:-translate-y-2:hover {
    transform: translateY(-0.5rem) !important;
}

.hover\:shadow-xl:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
}

.hover\:shadow-2xl:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
}

/* Dark mode shadow adjustments */
[data-theme="dark"] .hover\:shadow-xl:hover,
[data-theme="dark"] .hover\:shadow-2xl:hover {
    box-shadow: 0 20px 25px -5px var(--shadow-color), 0 8px 10px -6px var(--shadow-color) !important;
}

/* ===== FILTER BUTTON HOVER EFFECTS ===== */
.filter-btn {
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.filter-btn:hover:not(.active) {
    background-color: #9ca3af !important;  /* gray-400 */
    color: #111827 !important;             /* gray-900 */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.filter-btn.active:hover {
    background-color: #fb923c !important;  /* primary/90 */
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.3), 0 2px 4px -1px rgba(249, 115, 22, 0.2) !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .filter-btn:hover:not(.active) {
    background-color: #6b7280 !important;  /* gray-500 */
    color: #f9fafb !important;              /* gray-50 */
}

/* ===== PROJECTS PAGE LEFT ALIGNMENT ===== */
.projects-page .bg-white.rounded-2xl {
    text-align: left !important;
}

.projects-page .bg-white.rounded-2xl .inline-block {
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
}

.projects-page .bg-white.rounded-2xl h3,
.projects-page .bg-white.rounded-2xl p,
.projects-page .bg-white.rounded-2xl .flex {
    text-align: left !important;
}

.projects-page .bg-white.rounded-2xl .rounded-full {
    margin-left: 0 !important;
    margin-right: auto !important;
}

/* Optional: If you want the icons to stay inline with text */
.projects-page .bg-white.rounded-2xl .flex.items-center {
    justify-content: space-between !important;
}

/* ===== CONTACT PAGE DARK MODE FIXES ===== */

/* Form container */
[data-theme="dark"] .bg-white.rounded-2xl.shadow-lg.p-8 {
    background-color: var(--bg-surface) !important;
}

/* Form labels */
[data-theme="dark"] label {
    color: var(--text-primary) !important;
}

/* Input fields, textarea, select */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="tel"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background-color: var(--bg-secondary) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Placeholder text */
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--text-muted) !important;
}

/* Select options */
[data-theme="dark"] select option {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary) !important;
}

/* Checkbox */
[data-theme="dark"] input[type="checkbox"] {
    accent-color: var(--primary-color) !important;
}

[data-theme="dark"] label[for="newsletter"] {
    color: var(--text-secondary) !important;
}

/* Office location cards */
[data-theme="dark"] .bg-white.p-6.rounded-xl.border {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-white.p-6.rounded-xl.border h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white.p-6.rounded-xl.border p {
    color: var(--text-secondary) !important;
}

/* FAQ cards */
[data-theme="dark"] .bg-white.p-4.rounded-lg.border {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

[data-theme="dark"] .bg-white.p-4.rounded-lg.border h4 {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .bg-white.p-4.rounded-lg.border p {
    color: var(--text-secondary) !important;
}

/* Contact information text */
[data-theme="dark"] .text-gray-600 {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-900.font-bold {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-900.font-medium {
    color: var(--text-primary) !important;
}

/* Section titles */
[data-theme="dark"] h2.text-2xl.font-bold.text-gray-900,
[data-theme="dark"] h3.text-xl.font-semibold.text-gray-900 {
    color: var(--text-primary) !important;
}

/* Larger paragraph text */
.text-gray-600,
p {
    font-size: 1.125rem !important;  /* 18px - slightly larger than default */
    line-height: 1.6 !important;      /* Better readability */
}

/* Make the benefits section paragraphs even more prominent if desired */
.max-w-3xl.mx-auto.text-gray-600 p {
    font-size: 1.25rem !important;    /* 20px - even larger for your benefits text */
    line-height: 1.6 !important;
}

/* Hero section text */
.text-gray-700.text-xl {
    font-size: 1.5rem !important;     /* 24px - even larger for hero */
    line-height: 1.5 !important;
}

/* If you want to target it more specifically */
.hero-section p, 
section.bg-gradient-to-br p.text-xl {
    font-size: 1.5rem !important;
    line-height: 1.5 !important;
}

/* Hero section width control - Adjust these values as needed */
section.bg-gradient-to-br .max-w-3xl {
    max-width: 1200px !important;  /* Controls the container */
}

section.bg-gradient-to-br p.max-w-2xl {
    max-width: 1000px !important;  /* Controls the paragraph text */
}

/* ===== FINAL DROPDOWN STYLES ===== */

/* Navigation container */
custom-navigation {
    position: relative;
    z-index: 999999 !important;
}

/* Dropdown container */
.process-dropdown {
    position: relative !important;
    z-index: 999999 !important;
}

/* Dropdown menu */
.dropdown-menu {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;
    margin-top: 12px !important;
    width: 280px !important;
    background: white !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 10px 10px -5px rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #e5e7eb !important;
    z-index: 1000000 !important;
    
    /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.2s ease !important;
}

/* Show on hover */
.process-dropdown:hover .dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Small arrow on top */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 14px;
    height: 14px;
    background: white;
    border-left: 1px solid #e5e7eb;
    border-top: 1px solid #e5e7eb;
    border-radius: 4px;
    z-index: -1;
}

/* Dropdown links */
.dropdown-menu a {
    display: block !important;
    padding: 14px 20px !important;
    color: #374151 !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    text-align: center !important;
    text-decoration: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    background: white !important;
    transition: all 0.2s ease !important;
    z-index: 1000001 !important;
}

.dropdown-menu a:first-child {
    border-radius: 16px 16px 0 0 !important;
}

.dropdown-menu a:last-child {
    border-bottom: none !important;
    border-radius: 0 0 16px 16px !important;
}

.dropdown-menu a:hover {
    background-color: #f97316 !important;
    color: white !important;
    padding-left: 28px !important; /* Slight move on hover */
}

/* Dark mode */
[data-theme="dark"] .dropdown-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .dropdown-menu::before {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .dropdown-menu a {
    color: #f3f4f6 !important;
    border-bottom-color: #374151 !important;
    background: #1f2937 !important;
}

[data-theme="dark"] .dropdown-menu a:hover {
    background-color: #f97316 !important;
    color: white !important;
}

/* Chevron rotation */
.process-dropdown:hover .dropdown-icon {
    transform: rotate(180deg) !important;
}

.dropdown-icon {
    transition: transform 0.2s ease !important;
}

/* Mobile dropdown */
.mobile-dropdown-menu {
    transition: all 0.3s ease !important;
    background: rgba(249, 115, 22, 0.03) !important;
    border-radius: 12px !important;
    margin: 8px 0 !important;
}

.mobile-dropdown-menu a {
    display: block !important;
    padding: 12px 20px !important;
    color: #4b5563 !important;
    font-size: 16px !important;
    border-left: 3px solid transparent !important;
    transition: all 0.2s ease !important;
}

.mobile-dropdown-menu a:hover {
    color: #f97316 !important;
    border-left-color: #f97316 !important;
    background: rgba(249, 115, 22, 0.05) !important;
    padding-left: 28px !important;
}

[data-theme="dark"] .mobile-dropdown-menu {
    background: rgba(249, 115, 22, 0.1) !important;
}

[data-theme="dark"] .mobile-dropdown-menu a {
    color: #d1d5db !important;
}

[data-theme="dark"] .mobile-dropdown-menu a:hover {
    color: #f97316 !important;
    background: rgba(249, 115, 22, 0.15) !important;
}

/* ===== LOGO TOOLTIP STYLES ===== */

/* The container for the logo and tooltip */
.logo-container {
    position: relative !important;
    display: inline-block !important;  /* This ensures the container wraps the logo */
}

/* Make sure the parent link doesn't interfere */
#desktopLogoLink {
    display: block !important;
    position: relative !important;
}

/* The tooltip itself */
.logo-tooltip {
    position: absolute !important;
    
    /* Position it below the logo */
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 100% !important;  /* This places it right below the logo */
    margin-top: 8px !important;  /* Small gap between logo and tooltip */
    
    /* Styling */
    background: #f97316 !important;
    color: white !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 5px 12px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    z-index: 9999999 !important;
    pointer-events: none !important;
    
    /* Hidden by default */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.2s ease, visibility 0.2s ease !important;
}

/* Small arrow on tooltip */
.logo-tooltip::before {
    content: '' !important;
    position: absolute !important;
    top: -4px !important;
    left: 50% !important;
    transform: translateX(-50%) rotate(45deg) !important;
    width: 8px !important;
    height: 8px !important;
    background: #f97316 !important;
    border-radius: 2px !important;
}

/* Show tooltip on hover */
.logo-container:hover .logo-tooltip {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide tooltip on homepage */
.logo-tooltip.hide-tooltip {
    display: none !important;
}

/* Dark mode */
[data-theme="dark"] .logo-tooltip {
    background: #f97316 !important;
    color: white !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .logo-tooltip::before {
    background: #f97316 !important;
}

/* ===== FIX DUPLICATE LOGO ON MOBILE ===== */
@media (max-width: 767px) {
    /* Force hide desktop logo container on mobile */
    #desktopLogoContainer {
        display: none !important;
    }
    
    /* Ensure mobile logo is visible on mobile */
    #mobileLogoContainer {
        display: block !important;
    }
}

@media (min-width: 768px) {
    /* On desktop, hide mobile logo */
    #mobileLogoContainer {
        display: none !important;
    }
    
    /* On desktop, show desktop logo */
    #desktopLogoContainer {
        display: block !important;
    }
}

/* ===== LIGHTBOX / POPUP STYLES ===== */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

.lightbox-content img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.lightbox-overlay.active .lightbox-content img {
    opacity: 1;
    transform: scale(1);
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    background: #f97316;
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    transition: all 0.2s ease;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    z-index: 10;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.2s ease 0.1s, transform 0.2s ease 0.1s, background 0.2s ease;
}

.lightbox-overlay.active .lightbox-close {
    opacity: 1;
    transform: scale(1);
}

.lightbox-close svg {
    width: 20px;
    height: 20px;
    stroke: white;
    stroke-width: 2.5;
}

.lightbox-close:hover {
    background: #ea580c;
    transform: scale(1.1) !important;
}

/* For mobile screens */
@media (max-width: 768px) {
    .lightbox-close {
        width: 36px;
        height: 36px;
        top: 8px;
        right: 8px;
    }
    
    .lightbox-close svg {
        width: 18px;
        height: 18px;
    }
}

/* Dark mode adjustments */
[data-theme="dark"] .lightbox-overlay {
    background: rgba(0, 0, 0, 0.98);
}

/* Make images clickable */
.project-card img {
    cursor: pointer;
}

/* ===== VIDEO BACKGROUND THEME ADJUSTMENTS ===== */
[data-theme="light"] .hero-video {
    opacity: 0.5; /* Your current light mode opacity */
}

[data-theme="dark"] .hero-video {
    opacity: 8; /* More visible in dark mode */
    filter: brightness(1.8); /* Make video brighter */
}

/* ===== SMOOTH ACCORDION WITH JS ===== */
.accordion-item {
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    background-color: var(--bg-primary);
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.accordion-header:hover {
    background-color: var(--bg-hover);
}

.accordion-header .feather-chevron-down {
    transition: transform 0.5s ease;
    color: var(--primary-color);
}

.accordion-header.active .feather-chevron-down {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border-top: 1px solid transparent;
}

.accordion-content.active {
    border-top-color: var(--border-color);
}

/* Inner content styling - separate from animation */
.accordion-inner {
    padding: 1.5rem;
    opacity: 1;
}

/* Remove default marker */
.accordion-header::-webkit-details-marker {
    display: none;
}

/* ===== MOBILE TABLE SCROLL FIX ===== */
.accordion-content .overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    margin: 0 -1px; /* Small adjustment to prevent border cutoff */
}

.accordion-content table {
    min-width: 650px; /* Forces table to be wider than mobile screen */
}

/* Optional: Add scroll indicator for better UX */
@media (max-width: 640px) {
    .accordion-content .overflow-x-auto {
        cursor: grab;
        background: linear-gradient(to right, var(--bg-primary) 30%, transparent),
                    linear-gradient(to left, var(--bg-primary) 30%, transparent);
        background-repeat: no-repeat;
        background-size: 40px 100%, 40px 100%;
        background-position: left, right;
        background-attachment: local, local;
    }
}

/* ===== MOBILE LANDSCAPE NAVIGATION FIX ===== */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Fix navigation container */
    .theme-bg-nav {
        min-height: auto !important;
        height: auto !important;
    }
    
    /* Fix the flex container */
    .flex.justify-between.items-center {
        flex-wrap: wrap !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    /* Adjust desktop navigation items for landscape */
    .hidden.md\:flex.items-center {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Fix navigation links spacing */
    .hidden.md\:flex.items-center a,
    .hidden.md\:flex.items-center .process-dropdown {
        margin: 0.25rem 0.5rem !important;
    }
    
    /* Ensure theme toggle stays in place */
    .flex.items-center.space-x-3.ml-auto {
        align-self: center !important;
    }
    
    /* Fix any overflow issues */
    .container.mx-auto.px-4 {
        overflow: visible !important;
    }
    
    /* Remove any extra spacing */
    .h-24.md\:h-28 {
        height: auto !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }
    
    /* Ensure mobile menu is hidden in landscape when desktop nav shows */
    #mobileMenu {
        display: none !important;
    }
    
    /* Make sure desktop nav is visible */
    .hidden.md\:flex {
        display: flex !important;
    }
}

/* ===== DROPDOWN FIX FOR LANDSCAPE ===== */
@media (max-width: 1024px) and (orientation: landscape) {
    .dropdown-menu {
        left: 0 !important;
        transform: none !important;
        top: 100% !important;
    }
    
    .process-dropdown {
        position: relative !important;
    }
}

/* ===== DROPDOWN TOUCH FIX FOR LANDSCAPE ===== */
@media (max-width: 1024px) and (orientation: landscape) {
    /* Disable hover effects in landscape */
    .process-dropdown:hover .dropdown-menu {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    .process-dropdown:hover .dropdown-icon {
        transform: rotate(0deg) !important;
    }
    
    /* Let JS control visibility */
    .process-dropdown .dropdown-menu[style*="visible"] {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    .process-dropdown .dropdown-menu[style*="hidden"] {
        opacity: 0 !important;
        visibility: hidden !important;
    }
    
    /* Active state for the button */
    .process-dropdown .nav-link.active {
        color: var(--primary-color) !important;
    }
    
    .process-dropdown .nav-link.active::after {
        width: 100% !important;
    }
}

/* ===== MOBILE DROPDOWN SMOOTH ANIMATIONS ===== */
.mobile-dropdown-menu {
    transition: all 0.3s ease-in-out !important;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
}

.mobile-dropdown-menu:not(.hidden) {
    max-height: 300px; /* Large enough to contain all items */
    opacity: 1;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    margin: 0.5rem 0 !important;
    transition: all 0.4s ease-in-out !important;
}

/* Individual menu items animation */
.mobile-dropdown-menu a {
    transform: translateX(-10px);
    opacity: 0;
    transition: all 0.3s ease-in-out;
    transition-delay: 0s;
}

.mobile-dropdown-menu:not(.hidden) a {
    transform: translateX(0);
    opacity: 1;
}

/* Stagger the animations for each item */
.mobile-dropdown-menu:not(.hidden) a:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-dropdown-menu:not(.hidden) a:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-dropdown-menu:not(.hidden) a:nth-child(3) {
    transition-delay: 0.2s;
}

/* Chevron rotation animation */
.mobile-dropdown-icon {
    transition: transform 0.3s ease-in-out;
}

/* Remove the old hidden class behavior but keep for JS */
.mobile-dropdown-menu.hidden {
    display: block !important; /* Override display: none */
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin: 0 !important;
    visibility: hidden;
}

.mobile-dropdown-menu.hidden a {
    transform: translateX(-10px);
    opacity: 0;
    transition-delay: 0s !important;
}

/* ===== ACTIVE NAVIGATION INDICATOR ===== */
.nav-link.active-nav,
#processDropdownBtn.active-nav,
#mobileProcessBtn.active-nav,
.mobile-menu a.active-nav {
    color: var(--primary-color) !important;
    font-weight: 700 !important;
}

.nav-link.active-nav::after,
#processDropdownBtn.active-nav::after {
    width: 100% !important;
    background: linear-gradient(135deg, #f97316 0%, #f97316 100%) !important;
}

/* Ensure mobile menu items also show active state */
.mobile-menu a.active-nav {
    border-left: 3px solid var(--primary-color) !important;
    background-color: rgba(249, 115, 22, 0.1) !important;
    padding-left: 1.7rem !important;
}

/* Dark mode adjustments */
[data-theme="dark"] .nav-link.active-nav,
[data-theme="dark"] #processDropdownBtn.active-nav,
[data-theme="dark"] #mobileProcessBtn.active-nav,
[data-theme="dark"] .mobile-menu a.active-nav {
    color: var(--primary-color) !important;
}

[data-theme="dark"] .mobile-menu a.active-nav {
    background-color: rgba(249, 115, 22, 0.2) !important;
}

/* Override any conflicting styles */
.nav-link.active-nav,
#processDropdownBtn.active-nav {
    position: relative !important;
}

/* ===== DROPDOWN ITEM ACTIVE STATE ===== */
.dropdown-menu a.active-nav,
.mobile-dropdown-menu a.active-nav {
    background-color: var(--primary-color) !important;
    color: white !important;
    padding-left: 28px !important;
}

[data-theme="dark"] .dropdown-menu a.active-nav,
[data-theme="dark"] .mobile-dropdown-menu a.active-nav {
    background-color: var(--primary-color) !important;
    color: white !important;
}

/* Ensure the active state overrides hover */
.dropdown-menu a.active-nav:hover,
.mobile-dropdown-menu a.active-nav:hover {
    background-color: var(--primary-color) !important;
    color: white !important;
    opacity: 0.9;
}

/* ===== TABLE SCROLL INDICATOR - PURE CSS DOUBLE CHEVRONS ===== */
.overflow-x-auto {
    position: relative;
}

.scroll-indicator {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    z-index: 20;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
    height: 30px;
    width: 40px;
    animation: swing-glow 1s infinite ease-in-out;
}

.chevron {
    width: 16px;
    height: 16px;
    border-right: 3px solid #f97316;
    border-bottom: 3px solid #f97316;
    transform: rotate(-45deg);
    filter: drop-shadow(0 0 8px #f97316);
    transition: all 0.3s ease;
    position: relative;
}

.chevron:first-child {
    right: -5px;
    animation: chevron-glow-1 2s infinite ease-in-out;
}

.chevron:last-child {
    left: -5px;
    animation: chevron-glow-2 2s infinite ease-in-out;
}

.scroll-indicator:hover .chevron {
    border-color: #ffa500;
    filter: drop-shadow(0 0 15px #f97316) drop-shadow(0 0 25px #f97316);
    transform: rotate(-45deg) scale(1.1);
}

@keyframes swing-glow {
    0% {
        transform: translateY(-50%) translateX(0);
    }
    50% {
        transform: translateY(-50%) translateX(25px);
    }
    100% {
        transform: translateY(-50%) translateX(0);
    }
}

@keyframes chevron-glow-1 {
    0%, 100% {
        opacity: 0.9;
        filter: drop-shadow(0 0 4px #f97316);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 15px #f97316) drop-shadow(0 0 25px #f97316);
    }
}

@keyframes chevron-glow-2 {
    0%, 100% {
        opacity: 0.9;
        filter: drop-shadow(0 0 4px #f97316);
    }
    50% {
        opacity: 1;
        filter: drop-shadow(0 0 15px #f97316) drop-shadow(0 0 30px #f97316);
    }
}

/* Fade out edge to indicate more content */
.overflow-x-auto::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 70px;
    background: linear-gradient(to right, transparent, var(--bg-primary) 90%);
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    z-index: 15;
}

/* When scrolled to the end, hide the indicator and fade */
.overflow-x-auto.scrolled-end::after {
    opacity: 0;
}

.overflow-x-auto.scrolled-end .scroll-indicator {
    opacity: 0;
    animation: none;
    pointer-events: none;
}

/* Hide indicator on desktop where no overflow */
@media (min-width: 768px) {
    .scroll-indicator {
        display: none;
    }
    
    .overflow-x-auto::after {
        display: none;
    }
}

/* Dark mode adjustment for the fade */
[data-theme="dark"] .overflow-x-auto::after {
    background: linear-gradient(to right, transparent, var(--bg-primary) 90%);
}