/* System fonts as primary, Google Fonts as optional fallback */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

:root {
  /* THEME: HYDRO PRO (Day) */
  /* Vibe: Professional, Trustworthy, Clean Water */
  --primary: #0284c7; /* Wave Blue */
  --secondary: #0f172a; /* Deep Navy */
  --accent: #f97316; /* Alert Orange / Copper Pipe */

  --success: #10b981; /* Verified Green */
  --warning: #f59e0b; /* Caution Gold */
  --purple: #6366f1; /* Tech Indigo */
  --danger: #ef4444; /* Emergency Red */

  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc; /* Crisp Light Blue/Grey */
  --bg-tertiary: #e2e8f0;

  --text-primary: #0f172a; /* Slate 900 */
  --text-secondary: #475569; /* Slate 600 */
  --text-muted: #94a3b8; /* Slate 400 */

  --border-color: #e2e8f0;
  --navbar-height: 90px;
  --border-radius-lg: 1.5rem;
  --transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

  --shadow-sm: 0 4px 6px -1px rgba(15, 23, 42, 0.05);
  --shadow-lg: 0 10px 40px -10px rgba(2, 132, 199, 0.15);
}

[data-theme="dark"] {
  /* THEME: MIDNIGHT FLOW (Dark) */
  --primary: #38bdf8; /* Bright Sky Blue */
  --secondary: #0ea5e9; /* Azure */
  --accent: #fdba74; /* Soft Copper */

  --success: #34d399;
  --warning: #fbbf24;
  --purple: #818cf8;
  --danger: #f87171;

  --bg-primary: #020617; /* Deepest Water */
  --bg-secondary: #0f172a; /* Navy Depth */
  --bg-tertiary: #1e293b;

  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #64748b;

  --border-color: #334155;

  --shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  transition: var(--transition);
  overflow-x: hidden;
  position: relative;
  width: 100%;
  max-width: 100vw;
}

body.no-scroll {
  overflow: hidden !important;
  height: 100vh;
}

html {
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

/* Animated Background */
/* Live Animated Background for Day Mode */
/* New Fresh Background: Aurora Wave */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 10% 10%, rgba(232, 54, 78, 0.06), transparent 50%),
    radial-gradient(circle at 90% 90%, rgba(108, 92, 231, 0.06), transparent 50%),
    linear-gradient(45deg, rgba(0, 184, 148, 0.03) 25%, transparent 25%, transparent 75%, rgba(0, 184, 148, 0.03) 75%);
  background-size: 100% 100%, 100% 100%, 60px 60px;
  animation: auroraFlow 20s ease-in-out infinite alternate;
  z-index: -1;
  pointer-events: none;
}

[data-theme="dark"] body::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(162, 155, 254, 0.12), transparent 60%),
    linear-gradient(to right, rgba(108, 92, 231, 0.1), rgba(255, 107, 129, 0.08));
  background-size: 100% 100%;
  animation: oceanPulse 10s ease-in-out infinite;
  opacity: 0.4;
}

@keyframes auroraFlow {
  0% {
    transform: scale(1);
    background-position: 0% 0%, 0% 0%, 0 0;
  }

  100% {
    transform: scale(1.05);
    background-position: 10% 10%, -10% -10%, 30px 30px;
  }
}

@keyframes oceanPulse {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.02);
  }

  100% {
    opacity: 0.4;
    transform: scale(1);
  }
}

@keyframes backgroundRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

body>* {
  position: relative;
  z-index: 1;
}

/* Morphing Gradient Background */
.morph-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
  transition: background 0.5s ease;
}

/* Particle Container */
.particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.particle {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

/* Animated Background Shapes */
.animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  pointer-events: none;
  z-index: -1;
}

.animated-bg .shape {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  opacity: 0.3;
  animation: floatShape 20s ease-in-out infinite;
}

.animated-bg .shape:nth-child(1) {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, rgba(232, 54, 78, 0.3), rgba(108, 92, 231, 0.3));
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.animated-bg .shape:nth-child(2) {
  width: 250px;
  height: 250px;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.3), rgba(0, 184, 148, 0.3));
  top: 60%;
  right: 10%;
  animation-delay: 5s;
}

.animated-bg .shape:nth-child(3) {
  width: 200px;
  height: 200px;
  background: linear-gradient(135deg, rgba(0, 184, 148, 0.3), rgba(232, 54, 78, 0.3));
  bottom: 10%;
  left: 50%;
  animation-delay: 10s;
}

@keyframes floatShape {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(50px, -50px) scale(1.1);
  }

  50% {
    transform: translate(-30px, 30px) scale(0.9);
  }

  75% {
    transform: translate(30px, 50px) scale(1.05);
  }
}

/* Scroll Reveal Elements */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.9);
  transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Parallax Layers */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s ease-out;
}

/* Advanced Transform Elements */
.advanced-transform {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Morph Shape */
.morph-shape {
  transition: clip-path 2s ease-in-out;
}

/* Float Physics */
.float-physics {
  position: absolute;
  will-change: transform;
}

body[dir="rtl"] {
  direction: rtl;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Fixed Floating Navbar with Safe Centering */
.navbar {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  position: fixed;
  top: 1.5rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  /* True Centering */
  width: 95%;
  max-width: 1400px;
  z-index: 2000;
  height: 80px;
  border-radius: 1rem;
  /* Clean Tech Radius */
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transition: var(--transition);
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
}

@media (min-width: 769px) {
  .navbar {
    width: fit-content;
    max-width: 83%;
    padding: 0 1.5rem;
  }
}

[data-theme="dark"] .navbar {
  background: rgba(10, 10, 26, 0.95);
  /* Deep Obsidian Opaque */
  backdrop-filter: blur(10px);
  border-color: rgba(162, 155, 254, 0.2);
}

.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  padding: 0;
  gap: 4rem;
}

/* Global Brand Styling Update */
.navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: 1.6rem !important;
    transition: var(--transition);
}

.brand-hexagon {
    width: 32px !important;
    height: 36px !important;
    background: linear-gradient(180deg, #0284c7 0%, #0F172A 100%) !important;
    padding: 3px !important;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.brand-hexagon::after {
    content: '';
    width: 100%;
    height: 100%;
    background: var(--bg-primary);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.brand-text {
    color: #0284c7 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    -webkit-text-fill-color: initial !important;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.brand-text-dark {
    color: #0F172A !important;
    margin-left: 6px;
}

[data-theme="dark"] .brand-text-dark {
    color: #f1f5f9 !important;
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0 auto;
}

/* Consolidated mobile menu styles below in late media queries */

.navbar-item {
  position: relative;
}

.navbar-link {
  color: var(--text-primary);
  font-weight: 500;
  padding: 0.5rem 0;
  transition: var(--transition);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.navbar-link:hover,
.navbar-link.active {
  color: var(--primary);
}

.navbar-controls {
  flex-shrink: 0;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: var(--transition);
  list-style: none;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

body[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
}

.navbar-item:hover .dropdown-menu,
.navbar-item.active .dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .dropdown-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    display: none;
    padding-left: 1.5rem;
    width: 100%;
    margin-top: 0;
  }

  .navbar-item.active .dropdown-menu {
    display: block;
  }

  .navbar-link i {
    transition: transform 0.3s ease;
  }

  .navbar-item.active .navbar-link i {
    transform: rotate(180deg);
  }
}

.dropdown-item {
  display: block;
  padding: 0.75rem 1.5rem;
  transition: var(--transition);
  color: var(--text-primary);
  font-weight: 500;
  white-space: nowrap;
}

.dropdown-item:hover {
  background: var(--bg-secondary);
  color: var(--primary);
}

.navbar-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.theme-toggle,
.rtl-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  color: var(--text-primary);
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.25rem;
  line-height: 1;
}

@media (max-width: 768px) {

  .navbar-controls .theme-toggle,
  .navbar-controls .rtl-toggle {
    display: none;
  }
}

/* Removed redundant mobile menu controls */

.theme-toggle:hover,
.rtl-toggle:hover {
  background: var(--bg-tertiary);
  transform: scale(1.1);
}

.mobile-menu-toggle {
  display: none;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--text-primary);
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  z-index: 4001; /* Above the menu drawer */
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex;
  }
}

.hero {
  min-height: 65vh;
  display: flex;
  align-items: center;
  padding-top: var(--navbar-height);
  position: relative;
  overflow: hidden;
}

/* Ensure the container inside hero takes full width to allow internal centering */
.hero .container {
  width: 100%;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0, 204, 255, 0.05), transparent 70%);
  z-index: 0;
}

@keyframes heroBackground {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  50% {
    transform: translate(20px, -20px) scale(1.05);
    opacity: 0.8;
  }
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  margin: 0 auto;
  /* Centered */
  text-align: center;
  /* Centered Text */
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Centered Items */
}


/* Ensure buttons are center-aligned */
.hero-content>div[style*="display: flex"] {
  justify-content: center;
}

/* RTL Support: Flip background elements so dense icons stay opposite to text */
[dir="rtl"] .hero-animated-elements {
  transform: scaleX(-1);
}

[dir="rtl"] .hero-animated-elements .floating-icon i {
  transform: scaleX(-1);
  /* Unflip the actual icons */
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.gradient-text {
  color: var(--primary);
  font-weight: 600;
}

@keyframes shimmer {
  to {
    background-position: 200% center;
  }
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 600px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  transition: var(--transition);
  cursor: pointer;
  border: none;
  font-size: 1rem;
  min-height: 48px;
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem;
  min-height: 38px;
  border-radius: 2rem;
}

.navbar-cta {
  display: none;
}

@media (min-width: 769px) {
  .navbar-cta {
    display: inline-flex;
  }
}

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  box-shadow: 0 4px 0 var(--accent);
  /* Physical Button Look */
  position: relative;
  overflow: hidden;
  border: none;
  border-radius: 2rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1rem 2rem;
  transition: all 0.2s;
}

.btn-primary:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--accent);
}

.btn-primary::after {
  content: '';
  position: absolute;
  top: -50%;
  left: 50%;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  transform: translate(-50%, 0) scale(0);
}

.btn-primary:hover::after {
  animation: drip 0.6s ease-out infinite;
}

@keyframes drip {
  0% {
    top: -20px;
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }

  100% {
    top: 120%;
    transform: translate(-50%, 0) scale(0.5);
    opacity: 0;
  }
}



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

.btn-secondary:hover {
  background: var(--primary);
  color: white;
}

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

.btn-outline:hover {
  background: var(--bg-secondary);
  border-color: var(--primary);
}

.section {
  padding: 5rem 0;
}

.section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 4rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.125rem;
  color: var(--text-secondary);
}

.grid {
  display: grid;
  gap: 2rem;
}

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

.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Varied Section UI Styles */
.section-alt {
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

.section-glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}

.section-tech {
  background: var(--bg-primary);
  color: var(--text-primary);
  position: relative;
}

.section-tech .card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
}

.section-tech .card:hover {
  box-shadow: 0 8px 20px -3px rgba(108, 92, 231, 0.15);
  border-color: var(--border-color);
}

.section-soft {
  background: var(--bg-primary);
}

.section-soft .card {
  box-shadow:
    20px 20px 60px rgba(0, 0, 0, 0.05),
    -20px -20px 60px rgba(255, 255, 255, 0.8);
  border: none;
  background: var(--bg-primary);
}

[data-theme="dark"] .section-soft .card {
  box-shadow:
    5px 5px 10px rgba(0, 0, 0, 0.2),
    -5px -5px 10px rgba(255, 255, 255, 0.05);
  background: var(--bg-secondary);
}

/* Card Styles */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  padding: 2.5rem;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
}

/* Water Fill Card Effect */
.water-fill-card {
  position: relative;
}

.water-fill-card .card-content {
  position: relative;
  z-index: 2;
}

.water-fill-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.12), rgba(232, 54, 78, 0.08));
  border-radius: 1.5rem;
  transition: height 0.3s ease;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.water-fill-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(90deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.3) 2px,
      rgba(255, 255, 255, 0.3) 4px);
  animation: waterWave 3s linear infinite;
}

@keyframes waterWave {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(10px);
  }
}

.water-fill-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  filter: blur(1px);
  animation: waterWave 2s linear infinite reverse;
}

.water-fill-card:hover .water-fill-container {
  height: 100%;
}

.water-fill-card.water-animated .water-fill-container {
  height: 100%;
}

/* ========================================
   WATER SPLASH EFFECTS - NEW
   ======================================== */

/* Splash burst animation - water particles shooting outward */
@keyframes splashBurst {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translate(var(--tx), var(--ty)) scale(0);
    opacity: 0;
  }
}

/* Bubble rising animation - bubbles float up from water */
@keyframes bubbleRise {
  0% {
    transform: translateY(0) translateX(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-80px) translateX(var(--bx)) scale(0.8);
    opacity: 0;
  }
}

/* Water splash particle effect */
.water-splash-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.6), rgba(232, 54, 78, 0.4));
  box-shadow: 0 2px 8px rgba(108, 92, 231, 0.4);
  will-change: transform, opacity;
}

/* Bubble particle effect - rising water bubbles */
.bubble-particle {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8), rgba(108, 92, 231, 0.3));
  border: 1px solid rgba(255, 255, 255, 0.4);
  will-change: transform, opacity;
  box-shadow: 0 2px 6px rgba(108, 92, 231, 0.2);
}

/* Water droplet trail - falling droplets */
.water-droplet-trail {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.8), rgba(13, 148, 136, 0.6));
  will-change: transform, opacity;
  animation: dropletFall 1s ease-in forwards;
}

/* Droplet falling animation */
@keyframes dropletFall {
  0% {
    opacity: 1;
    transform: translateY(-100px) scale(1);
  }

  100% {
    opacity: 0;
    transform: translateY(0) scale(0.5);
  }
}

/* Ensure card-content stays on top */
.water-fill-card .card-content {
  position: relative;
  z-index: 2;
}

/* Card Styling */
.card::after {
  content: '';
  display: none;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px -3px rgba(108, 92, 231, 0.15);
  border-color: var(--border-color);
}

.stats-card {
  background: #e8364e;
  color: white;
  text-align: center;
  padding: 2.5rem 2rem;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(232, 54, 78, 0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.stats-number {
  font-size: 3.5rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(135deg, #fff, rgba(255, 255, 255, 0.8));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stats-number span {
  display: inline-block;
}

.stats-label {
  font-size: 1rem;
  font-weight: 600;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  background: rgba(232, 54, 78, 0.08);
  color: var(--primary);
}

.card-title {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.card-text {
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Base stats card styles handled above */

/* Footer - Always Dark Theme for Consistency */
.footer {
  background: #0a0a1a;
  /* Obsidian */
  border-top: 1px solid #1e1e3a;
  /* Violet line */
  padding: 4rem 0 2rem;
  margin-top: 5rem;
  width: 100% !important;
  max-width: 100vw !important;
  color: #f8fafc;
  /* Light text for dark background */
}

.footer .container {
  max-width: 1400px;
  padding: 0 2rem;
  margin: 0 auto;
}

/* Dark theme footer - same as base (already dark) */
[data-theme="dark"] .footer {
  background: #0a0a1a;
  border-color: #1e1e3a;
  color: #f1f1f8;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
  margin-bottom: 3rem;
  text-align: left;
}

/* Force footer paragraph text (description) to be light in all themes */
.footer-content p {
  color: #cbd5e1 !important;
  /* Slate 300 */
  margin-top: 0.5rem;
  line-height: 1.6;
}

.footer-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: #ff6b81;
  /* Coral - always visible on dark */
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-links {
  list-style: none;
}

.footer-links li {
  margin-bottom: 0.75rem;
  color: #cbd5e1;
  /* Slate 300 - light text on dark bg */
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-links a {
  color: #cbd5e1;
  /* Slate 300 */
  transition: all 0.2s;
  text-decoration: none;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.footer-links a:hover {
  color: #ff6b81;
  /* Coral on hover */
  transform: translateX(3px);
}

.footer-links i {
  color: #a29bfe;
  /* Lavender - bright icons */
  width: 18px;
  text-align: center;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid #2a2a4a;
  /* Deep Border */
  color: #8585a8;
  /* Muted Lavender */
  font-size: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.footer .social-links {
  margin-top: 0.5rem;
}

.footer .social-link {
  background: #12122a;
  /* Midnight Indigo */
  color: #f1f1f8;
  border: 1px solid #2a2a4a;
  /* Deep Border */
}

.footer .social-link:hover {
  background: #e8364e;
  color: #ffffff;
  border-color: #e8364e;
}

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

.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: var(--text-primary);
}

.form-control {
  width: 100%;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--border-color);
  border-radius: 0.5rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: 1rem;
  transition: var(--transition);
}

.form-control:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

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

.dashboard-container {
  padding-top: calc(var(--navbar-height) + 2rem);
  min-height: 100vh;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

[data-theme="dark"] .dashboard-container {
  background: linear-gradient(135deg, #0a0a1a, #1a1a3e);
}

.dashboard-header {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  padding: 2rem;
  border-radius: 1rem;
  margin-bottom: 2rem;
  box-shadow: var(--shadow-lg);
}

[data-theme="dark"] .dashboard-header {
  background: linear-gradient(135deg, #1a1a3e, #2a2a5e);
}

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

.dashboard-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}

[data-theme="dark"] .dashboard-card {
  background: #12122a !important;
  /* Force dark background */
  border-color: #2a2a4a;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .dashboard-card-title {
  color: #94a3b8 !important;
  /* Ensure readable title */
}

[data-theme="dark"] .dashboard-card-value {
  color: #f8fafc !important;
  /* Ensure bright value */
}

.dashboard-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.dashboard-card-title {
  font-size: 0.875rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.dashboard-card-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-primary);
}

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.05), rgba(99, 102, 241, 0.05));
}

.login-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 1.5rem;
  padding: 3rem;
  max-width: 450px;
  width: 100%;
  box-shadow: var(--shadow-xl);
}

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

.login-title {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.login-subtitle {
  color: var(--text-secondary);
}

.login-divider {
  text-align: center;
  margin: 1.5rem 0;
  color: var(--text-muted);
  position: relative;
}

.login-divider::before,
.login-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: var(--border-color);
}

.login-divider::before {
  left: 0;
}

.login-divider::after {
  right: 0;
}

.error-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  text-align: center;
}

.error-code {
  font-size: clamp(6rem, 15vw, 12rem);
  font-weight: 800;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 1rem;
}

.error-title {
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  margin-bottom: 1rem;
}

.error-text {
  color: var(--text-secondary);
  font-size: 1.125rem;
  margin-bottom: 2rem;
  max-width: 500px;
}

.social-links {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
}

.social-link {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  font-size: 1.25rem;
  transition: var(--transition);
  border: 2px solid transparent;
}

.social-link:hover {
  background: linear-gradient(135deg, var(--primary), var(--accent));
  color: white;
  transform: translateY(-3px) scale(1.1);
  box-shadow: var(--shadow-lg);
}

/* Nebula Mist Background */
.animated-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.animated-bg .shape {
  position: absolute;
  filter: blur(80px);
  /* Heavy blur for mist effect */
  opacity: 0.4;
  animation: nebulaFloat 30s infinite ease-in-out alternate;
  border-radius: 50%;
  mix-blend-mode: overlay;
}

[data-theme="dark"] .animated-bg .shape {
  opacity: 0.25;
  mix-blend-mode: screen;
}

.animated-bg .shape:nth-child(1) {
  width: 60vw;
  height: 60vh;
  background: var(--primary);
  top: -10%;
  left: -10%;
  animation-delay: 0s;
}

.animated-bg .shape:nth-child(2) {
  width: 50vw;
  height: 50vh;
  background: var(--secondary);
  bottom: -10%;
  right: -10%;
  animation-delay: -10s;
}

.animated-bg .shape:nth-child(3) {
  width: 40vw;
  height: 40vh;
  background: var(--accent);
  top: 40%;
  left: 40%;
  animation-delay: -5s;
}

.animated-bg .shape:nth-child(4) {
  display: none;
  /* Reduce complexity */
}

@keyframes nebulaFloat {
  0% {
    transform: translate(0, 0) scale(1) rotate(0deg);
    opacity: 0.4;
  }

  33% {
    transform: translate(50px, -50px) scale(1.1) rotate(5deg);
    opacity: 0.5;
  }

  66% {
    transform: translate(-30px, 40px) scale(0.95) rotate(-5deg);
    opacity: 0.3;
  }

  100% {
    transform: translate(20px, 60px) scale(1.05) rotate(3deg);
    opacity: 0.4;
  }
}

.pulse-dot {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.5);
    opacity: 0.5;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.status-panel {
  background: rgba(15, 23, 42, 0.95);
  /* Dark Navy HUD */
  border: 1px solid rgba(108, 92, 231, 0.3);
  border-radius: 1rem;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(108, 92, 231, 0.2);
}

.status-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--cyan), transparent);
  animation: scanline 3s linear infinite;
}

@keyframes scanline {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(34, 197, 94, 0.1);
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--success);
  border: 1px solid rgba(34, 197, 94, 0.3);
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 0 10px rgba(34, 197, 94, 0.2);
}

.status-indicator::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse-glow 2s infinite;
}

@keyframes pulse-glow {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }

  50% {
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
  }
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.metric-card {
  background: #12122a;
  /* Darker background for contrast */
  border: 1px solid rgba(108, 92, 231, 0.2);
  /* Violet border for visibility */
  border-radius: 0.5rem;
  padding: 1.5rem;
  position: relative;
  transition: all 0.3s ease;
  opacity: 1 !important;
  visibility: visible !important;
}

.metric-card:hover {
  background: #1e1e3a;
  border-color: #a29bfe;
  box-shadow: 0 0 15px rgba(108, 92, 231, 0.15);
  transform: translateY(-2px);
}

/* HUD-style Dark Panels (Force light text even in light mode) */
.status-panel,
.status-panel *,
.tech-badge {
  color: #05080b;
  /* Slate 50 */
}

.status-panel h1,
.status-panel h2,
.status-panel h3,
.status-panel h4,
.status-panel h5,
.status-panel h6 {
  color: #f8fafc !important;
  /* Slate 50 */
}

.metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.status-panel .metric-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #ffffff !important;
  /* Forced Pure White */
  opacity: 0.9;
  font-weight: 700;
  /* Bolder */
  margin-bottom: 0.5rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.metric-value {
  font-size: 2.25rem;
  font-weight: 800;
  /* Extra Bold */
  color: #a29bfe !important;
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px rgba(162, 155, 254, 0.5);
  /* Violet Glow */
}

.status-panel .metric-unit {
  font-size: 1rem;
  color: #94a3b8 !important;
  /* Forced Slate 400 */
  margin-left: 0.25rem;
}

.tech-badge {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  background: rgba(6, 182, 212, 0.1);
  border: 1px solid rgba(6, 182, 212, 0.3);
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a29bfe !important;
  /* Forced Lavender */
  /* Forced Lavender */
  font-family: 'Courier New', monospace;
}

.terminal-text {
  font-family: 'Courier New', monospace;
  font-size: 0.75rem;
  color: #a29bfe !important;
  /* Lavender */
  letter-spacing: 1px;
  font-weight: 600;
  text-transform: uppercase;
}

.compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.75rem;
  margin: 1.5rem 0;
}

.system-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  background: var(--bg-secondary);
  border-radius: 0.5rem;
  border-left: 3px solid var(--success);
  margin-bottom: 0.75rem;
}

.status-key {
  font-weight: 600;
  color: var(--text-primary);
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}

.status-value {
  color: var(--text-secondary);
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
}

.operations-card {
  background: linear-gradient(135deg, rgba(108, 92, 231, 0.05), rgba(232, 54, 78, 0.05));
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.operations-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  height: 4px;
  background: linear-gradient(90deg, var(--secondary), var(--purple));
  border-radius: 1rem 1rem 0 0;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
  border-bottom: 1px solid var(--border-color);
}

.stat-row:last-child {
  border-bottom: none;
}

.phase-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 0.75rem;
  padding: 2rem;
  position: relative;
  padding-left: 3.5rem;
}

.phase-card::before {
  content: attr(data-phase);
  position: absolute;
  left: 1.5rem;
  top: 1.5rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.terminal-text {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem;
  color: var(--success);
  background: var(--bg-primary);
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid var(--border-color);
}

.uptime-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(6, 182, 212, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 2rem;
  font-weight: 700;
  color: var(--success);
}

.certified-seal {
  position: relative;
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 0.75rem;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.certified-seal::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px dashed var(--primary);
  opacity: 0.5;
  animation: rotate 20s linear infinite;
}

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

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-content {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Comprehensive Responsive Design */
@media (max-width: 1400px) {
  .container {
    max-width: 1200px;
  }
}

@media (max-width: 1200px) {
  .container {
    max-width: 100%;
    padding: 0 2rem;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }

  .hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
  }

  .section-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Fix dashboard layouts */
  .dashboard-container>.container>div[style*="grid-template-columns: 1.5fr 1fr"],
  .dashboard-container>.container>div[style*="grid-template-columns: 2fr 1fr"],
  .dashboard-container>.container>div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  table {
    font-size: 0.875rem;
  }

  table th,
  table td {
    padding: 0.75rem !important;
  }
}

@media (max-width: 768px) {
  .container {
    padding: 0 1.5rem;
  }

  .navbar-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--bg-primary);
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    padding: 1rem 0;
    transform: translateY(-20px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1000;
    box-shadow: var(--shadow-lg);
    border-radius: 1rem;
    border: 1px solid var(--border-color);
  }

  .navbar-menu.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  /* RTL support for mobile menu - reset transform */
  body[dir="rtl"] .navbar-menu {
    transform: translateY(-20px);
  }

  body[dir="rtl"] .navbar-menu.active {
    transform: translateY(0);
  }

  .navbar-item {
    width: 100%;
    height: auto !important;
  }

  .navbar-link {
    padding: 0.6rem 1.5rem;
    width: 100%;
    font-size: 1rem;
    height: auto !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    justify-content: flex-start !important;
  }

  .dropdown-menu {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    display: none;
    padding: 0;
    margin: 0;
    width: 100% !important;
    background: var(--bg-secondary) !important;
  }

  .navbar-item.active .dropdown-menu {
    display: block !important;
  }

  .dropdown-item {
    padding: 0.6rem 2.5rem;
    border-bottom: 1px solid rgba(0,0,0,0.02);
    font-size: 0.9rem;
  }

  /* Extreme small screen (360px) optimization */
  @media (max-width: 480px) {
    .navbar {
      top: 10px !important;
      width: calc(100% - 15px) !important;
      height: 60px !important;
      padding: 0 0.75rem !important;
    }

    .navbar-brand {
      font-size: 1.1rem !important;
      gap: 5px !important;
    }

    .brand-hexagon {
      width: 22px !important;
      height: 26px !important;
      border-width: 2px !important;
    }

    .brand-text-dark {
      margin-left: 2px !important;
    }

    .navbar-controls {
      gap: 0.3rem !important;
    }

    .icon-btn {
      width: 30px !important;
      height: 30px !important;
      font-size: 0.75rem !important;
    }

    .nav-divider {
      height: 14px !important;
      margin: 0 0.1rem !important;
    }
  }

  .mobile-menu-toggle {
    display: block;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

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

  .hero {
    padding: calc(var(--navbar-height) + 2rem) 0 2rem;
    min-height: auto;
  }

  .section {
    padding: 3rem 0;
  }

  .login-card {
    padding: 2rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem;
  }

  .dashboard-header {
    padding: 2rem 1.5rem !important;
  }

  .dashboard-header h1 {
    font-size: 1.75rem !important;
  }

  .dashboard-card {
    padding: 1.5rem;
  }

  .dashboard-card-value {
    font-size: 2rem !important;
  }

  /* Fix all grid layouts */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Charts responsive */
  canvas {
    max-width: 100% !important;
    /* height: auto !important; - REMOVED to fix Chart.js collapse */
    min-height: 200px;
  }

  #revenueChart,
  #serviceChart,
  #jobsChart,
  #monthlyChart,
  #customerChart,
  #requestsChart {
    height: 250px !important;
  }

  /* Tables responsive */
  /* Tables responsive */
  div[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    display: block;
  }

  table {
    width: 100%;
    white-space: nowrap;
    display: table !important;
  }

  /* Cards responsive */
  .card,
  .dashboard-card {
    padding: 1rem !important;
    /* Reduce padding for more space */
    text-align: center !important;
    min-width: 0;
    /* Critical: allows grid item to shrink below content size */
    width: 100%;
    box-sizing: border-box;
  }

  /* Tables responsive - strict scrolling wrapper */
  div[style*="overflow-x: auto"] {
    -webkit-overflow-scrolling: touch;
    width: 100%;
    display: block;
    overflow-x: auto !important;
    /* Force scrollbar */
    padding-bottom: 0.5rem;
    /* Space for scrollbar */
  }

  table {
    width: 100%;
    white-space: nowrap;
    display: table !important;
  }

  /* Buttons responsive */
  .btn {
    width: 100%;
    justify-content: center;
  }

  /* Service area map */
  #serviceAreasMap {
    grid-template-columns: 1fr !important;
  }

  /* Testimonials */
  .testimonial-card {
    margin-bottom: 1.5rem;
  }

  /* Stats cards */
  .stats-card {
    margin-bottom: 1.5rem;
  }

  /* MOBILE CENTERING STYLES - Applied to all pages */
  .hero-content,
  .section-header,
  .dashboard-header {
    text-align: center !important;
  }

  .hero-content>div,
  .hero-content>* {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-title,
  .hero-subtitle,
  .section-title,
  .section-subtitle {
    text-align: center !important;
  }

  /* Center all card content */
  .card,
  .dashboard-card {
    text-align: center !important;
  }

  /* Center flex containers */
  div[style*="display: flex"] {
    justify-content: center !important;
    text-align: center !important;
    flex-wrap: wrap !important;
  }

  /* Center grid items */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .dashboard-grid {
    text-align: center !important;
  }

  /* Center service cards */
  .service-card,
  .feature-card,
  .process-step,
  .home2-feature-card {
    text-align: center !important;
  }

  /* Center footer content */
  .footer-content,
  .footer-column {
    text-align: center !important;
  }

  /* Center navbar items when menu is open */
  .navbar-menu.active .navbar-item,
  .navbar-menu.active .navbar-link {
    text-align: center !important;
    justify-content: center !important;
  }

  /* Center login/register forms */
  .login-card,
  .login-header {
    text-align: center !important;
  }

  /* Center form elements */
  .form-group {
    text-align: left !important;
  }

  /* Center buttons container */
  div[style*="display: flex"] button,
  div[style*="display: flex"] .btn {
    margin: 0 auto !important;
  }

  /* Center hero images and visual elements */
  .hero-image-wrapper,
  .home2-hero-image {
    text-align: center !important;
    margin: 2rem auto !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Override inline styles for mobile centering */
  div[style*="text-align: left"],
  div[style*="text-align: right"] {
    text-align: center !important;
  }

  /* Center stats and metrics */
  .stats-card,
  .dashboard-card-value,
  .dashboard-card-title {
    text-align: center !important;
  }

  /* Center process steps */
  .process-timeline,
  .process-step {
    text-align: center !important;
  }

  /* Center testimonial content */
  .testimonial-card {
    text-align: center !important;
  }

  /* Center pricing cards */
  .pricing-card {
    text-align: center !important;
  }

  /* ADDITIONAL SPECIFIC CENTERING FOR SERVICES AND CONTACT PAGES */

  /* Contact page two-column form layout */
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Contact information cards */
  div[style*="display: flex"][style*="align-items: start"] {
    text-align: center !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Override inline text-align styles */
  h2[style*="font-size"],
  h3[style*="font-size"],
  h4[style*="font-size"],
  p[style*="font-size"] {
    text-align: center !important;
  }

  /* Center all divs with inline styles */
  div[style*="display: grid"],
  div[style*="max-width"] {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center icon containers */
  div[style*="width: 50px"],
  div[style*="width: 60px"],
  div[style*="width: 70px"],
  div[style*="width: 80px"],
  div[style*="width: 100px"] {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Override justify-content for mobile */
  div[style*="justify-content: space-between"] {
    justify-content: center !important;
    flex-direction: column !important;
    gap: 0.5rem;
  }

  /* Center all card titles and content */
  .card h2,
  .card h3,
  .card h4,
  .card p {
    text-align: center !important;
  }

  /* Center service cards */
  .card .card-icon,
  .card .card-title,
  .card .card-text {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center image containers */
  .image-zoom-container {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center process cards */
  .process-step-card {
    text-align: center !important;
  }

  /* Override all left/right text alignment */
  *[style*="text-align: left"],
  *[style*="text-align: right"] {
    text-align: center !important;
  }

  /* Center all buttons */
  button,
  .btn {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center form labels but keep inputs left-aligned */
  .form-label {
    text-align: center !important;
  }

  .form-control {
    text-align: left !important;
  }

  /* Center SVG and map containers */
  #interactiveMap,
  #mapSvg,
  .interactive-map-container {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Center all list items */
  ul,
  ol {
    text-align: center !important;
    list-style-position: inside !important;
  }

  /* Center flex containers */
  div[style*="gap: 1rem"],
  div[style*="gap: 1.5rem"],
  div[style*="gap: 2rem"] {
    justify-content: center !important;
  }



  /* Ensure cards are centered */
  .card {
    margin-left: auto !important;
    margin-right: auto !important;
    direction: ltr !important;
  }

  /* Ensure buttons are centered */
  .btn,
  button {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    direction: ltr !important;
  }
}

@media (max-width: 576px) {
  .container {
    padding: 0 1rem;
  }

  .hero-title {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .section-title {
    font-size: clamp(1.5rem, 5vw, 2rem);
  }

  .section-subtitle {
    font-size: 0.9rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
    font-size: 0.9rem;
    margin-bottom: 0.75rem;
  }

  .stats-number {
    font-size: 2rem;
  }

  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .dashboard-card {
    padding: 1.25rem;
  }

  .dashboard-card-value {
    font-size: 1.75rem !important;
  }

  .card {
    padding: 1.25rem;
  }

  .card-title {
    font-size: 1.125rem;
  }

  .card-text {
    font-size: 0.875rem;
  }

  /* Navigation */
  .navbar-brand {
    font-size: 1.25rem;
  }

  .navbar-link {
    font-size: 0.9rem;
    padding: 0.875rem 1.5rem;
  }

  /* Hero section */
  .hero-subtitle {
    font-size: 1rem;
  }

  /* Footer */
  .footer {
    padding: 3rem 0 2rem;
  }

  .footer-title {
    font-size: 1.125rem;
  }

  /* Charts */
  canvas {
    height: 200px !important;
    min-height: 180px;
  }

  #revenueChart,
  #serviceChart,
  #jobsChart,
  #monthlyChart,
  #customerChart,
  #requestsChart {
    height: 200px !important;
  }

  /* Tables */
  table {
    font-size: 0.8rem;
  }

  table th,
  table td {
    padding: 0.5rem !important;
  }

  /* Forms */
  input,
  textarea,
  select {
    font-size: 0.9rem;
    padding: 0.75rem;
  }

  /* Icons */
  i[class*="fa-"] {
    font-size: 1rem;
  }

  /* Quote badges */
  .quote-icon-badge {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.5rem !important;
  }

  /* Process numbers */
  .process-number {
    width: 50px !important;
    height: 50px !important;
    font-size: 1.25rem !important;
  }
}

@media (max-width: 375px) {
  .container {
    padding: 0 0.75rem;
  }

  .hero-title {
    font-size: 1.5rem;
  }

  .section-title {
    font-size: 1.375rem;
  }

  .card {
    padding: 1rem;
  }

  .btn {
    padding: 0.75rem 1.25rem;
    font-size: 0.875rem;
  }

  .dashboard-card {
    padding: 1rem;
  }

  .dashboard-card-value {
    font-size: 1.5rem !important;
  }
}

.service-option {
  transition: all 0.3s ease;
}

.service-option:hover {
  background: rgba(102, 126, 234, 0.1) !important;
  transform: translateX(5px);
}

.service-option input[type="radio"]:checked+div {
  color: #667eea;
  font-weight: 700;
}

@media (max-width: 768px) {
  .home2-hero-grid {
    grid-template-columns: 1fr !important;
  }

  .process-step {
    grid-template-columns: 60px 1fr !important;
    gap: 1rem !important;
  }

  .process-number {
    width: 60px !important;
    height: 60px !important;
    font-size: 1.5rem !important;
  }

  .dashboard-header {
    padding: 2rem !important;
  }

  #serviceAreasMap {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 1024px) {
  .home2-hero-grid {
    gap: 2rem;
  }

  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Advanced Animation Styles */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }

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

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-60px);
  }

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

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }

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

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }

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

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }

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

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(100px);
  }

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

@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-180deg) scale(0.5);
  }

  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
  }

  70% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }

  100% {
    background-position: 1000px 0;
  }
}

@keyframes gradientShift {

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

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

@keyframes floatUp {

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

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

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

  to {
    transform: rotate(360deg);
  }
}

@keyframes pageLoad {
  from {
    opacity: 0;
    transform: scale(1.05);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pageExit {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.95);
  }
}

/* Page animations removed */
body.page-loading {
  opacity: 1;
}

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

/* Animation Classes Disabled */
.animate-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.animate-on-scroll.fade-in-up,
.animate-on-scroll.fade-in-down,
.animate-on-scroll.fade-in-left,
.animate-on-scroll.fade-in-right,
.animate-on-scroll.fade-in-scale {
  transform: none !important;
}

.animate-on-scroll.animated {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* Staggering disabled */
.stagger-1,
.stagger-2,
.stagger-3,
.stagger-4,
.stagger-5,
.stagger-6 {
  transition-delay: 0s !important;
}

/* Hover Animations */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

.hover-scale {
  transition: transform 0.3s ease;
}

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

.hover-rotate {
  transition: transform 0.3s ease;
}

.hover-rotate:hover {
  transform: rotate(5deg) scale(1.05);
}

/* Parallax Elements */
.parallax-element {
  transition: transform 0.3s ease-out;
}

/* Loading Spinner */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid var(--border-color);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spinSlow 1s linear infinite;
}

/* Image Loading Animation */
img {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

img.loading {
  opacity: 0;
  transform: scale(0.95);
}

img.loaded {
  opacity: 1;
  transform: scale(1);
}

/* Enhanced Card Animations */
.card {
  position: relative;
  overflow: hidden;
}

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

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

/* Text Reveal Animation */
.text-reveal {
  overflow: hidden;
}

.text-reveal span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: fadeInUp 0.6s ease forwards;
}

/* Progress Bar Animation */
.progress-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  z-index: 10000;
  transition: width 0.3s ease;
}

/* Enhanced Button Animations */
.btn {
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.btn:hover::after {
  width: 300px;
  height: 300px;
}

.btn span {
  position: relative;
  z-index: 1;
}

/* Ripple Effect */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Navbar Scroll Animation */
.navbar.scrolled {
  box-shadow: var(--shadow-lg);
  background: var(--bg-primary);
  backdrop-filter: blur(10px);
  opacity: 0.98;
}

/* Counter Animation */
.counter {
  display: inline-block;
}

/* Image Zoom on Hover */
.image-zoom-container {
  overflow: hidden;
  border-radius: 0.75rem;
}

.image-zoom-container img {
  transition: transform 0.5s ease;
}

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

/* Section Divider Animation */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
  margin: 4rem 0;
  position: relative;
}

.section-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Interactive Map Styles */
.interactive-map-container {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
}

.map-building {
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
}

.map-building:hover {
  opacity: 0.9;
}

.map-marker {
  cursor: pointer;
  transition: transform 0.3s ease;
}

.map-marker:hover {
  transform: scale(1.2);
}

.pulse-ring {
  animation: pulseRing 2s ease-in-out infinite;
}

.pulse-ring-delayed {
  animation: pulseRing 2s ease-in-out infinite;
  animation-delay: 1s;
}

@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.2;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.1;
  }

  100% {
    transform: scale(1);
    opacity: 0.2;
  }
}

.floating-sun {
  animation: floatSun 8s ease-in-out infinite;
}

@keyframes floatSun {

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

  25% {
    transform: translateY(-10px) translateX(5px);
  }

  50% {
    transform: translateY(-15px) translateX(0);
  }

  75% {
    transform: translateY(-10px) translateX(-5px);
  }
}

.marker-label {
  pointer-events: none;
}

.testimonial-card {
  transition: all 0.3s ease;
  position: relative;
}

.testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.05), rgba(118, 75, 162, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

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

.testimonial-avatar {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  border: 3px solid transparent;
}

.testimonial-avatar:hover {
  transform: scale(1.15) rotate(10deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  border-color: var(--primary);
}

.quote-icon-badge {
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
}

.quote-icon-badge::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
}

.quote-icon-badge:hover::before {
  width: 200px;
  height: 200px;
}

.quote-icon-badge:hover {
  transform: rotate(15deg) scale(1.15) translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.quote-icon-badge i {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}

.quote-icon-badge:hover i {
  transform: scale(1.2);
}

/* Enhanced Floating Animations */
@keyframes floatGentle {

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

  33% {
    transform: translateY(-15px) rotate(2deg);
  }

  66% {
    transform: translateY(-10px) rotate(-2deg);
  }
}

.floating-element {
  animation: floatGentle 4s ease-in-out infinite;
}

/* Home2 Unique Styles */
.home2-hero-image {
  position: relative;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home2-hero-image:hover {
  transform: scale(1.05) rotate(2deg);
}

.home2-feature-card {
  position: relative;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.home2-feature-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(102, 126, 234, 0.2);
  border-image: linear-gradient(135deg, #667eea, #764ba2) 1;
}

/* Service Area Cards Unique Animation */
.service-area-card {
  position: relative;
  overflow: hidden;
}

.service-area-card::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(102, 126, 234, 0.2), transparent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s ease, height 0.6s ease;
  pointer-events: none;
}

.service-area-card:hover::after {
  width: 300px;
  height: 300px;
}

/* CTA Banner Enhancements */
.cta-banner {
  position: relative;
  overflow: hidden;
}

.cta-banner::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
}

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

  to {
    transform: rotate(360deg);
  }
}

/* Interactive Map Enhancements */
.map-marker {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

.map-building:hover {
  filter: brightness(1.1);
}

/* Real-Time Dashboard Styles */
#currentTime {
  font-family: 'Courier New', monospace;
  color: #22c55e;
  font-weight: 700;
  animation: pulseGlow 2s ease-in-out infinite;
}

@keyframes pulseGlow {

  0%,
  100% {
    text-shadow: 0 0 5px rgba(34, 197, 94, 0.5);
  }

  50% {
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.8);
  }
}

/* Additional Floating Animations */
.floating {
  animation: floatGentle 6s ease-in-out infinite;
}

@keyframes floatGentle {

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

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

.floating-slow {
  animation: floatSlow 8s ease-in-out infinite;
}

@keyframes floatSlow {

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

  33% {
    transform: translateY(-15px) translateX(10px);
  }

  66% {
    transform: translateY(-10px) translateX(-10px);
  }
}

.floating-fast {
  animation: floatFast 4s ease-in-out infinite;
}

@keyframes floatFast {

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

  50% {
    transform: translateY(-25px) rotate(5deg);
  }
}

/* Enhanced Hover Effects */
.card.hover-lift:hover {
  transform: translateY(-15px) scale(1.02);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.hover-scale:hover {
  transform: scale(1.1);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Magnetic Effect */
.magnetic-element {
  transition: transform 0.1s ease-out;
}

/* Glowing Effects */
.glow-on-hover:hover {
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.5);
  transition: box-shadow 0.3s ease;
}

/* Scroll Progress Indicator Enhancement */
.progress-bar {
  height: 4px;
  background: linear-gradient(90deg, var(--primary), var(--secondary), var(--accent));
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  z-index: 10000;
  transition: width 0.2s ease;
  box-shadow: 0 2px 10px rgba(102, 126, 234, 0.5);
}

/* Loading State Styles */
.loading-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

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

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

/* Enhanced Card Glow on Hover */
.card:hover {
  position: relative;
}

.card:hover::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--primary), var(--secondary), var(--accent));
  border-radius: 1rem;
  z-index: -1;
  opacity: 0.1;
  filter: blur(10px);
  transition: opacity 0.3s ease;
}

/* Service Area Card Enhancements */
.service-area-card {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.service-area-card:hover {
  transform: translateY(-15px) scale(1.05);
  border-color: rgba(102, 126, 234, 0.5) !important;
}

/* Testimonial Card Enhancements */
.testimonial-card:hover {
  border-color: var(--primary);
  background: linear-gradient(135deg, rgba(255, 107, 53, 0.02), rgba(99, 102, 241, 0.02));
}

/* Home2 Specific Enhancements */
.home2-hero-image i {
  animation: rotateIcon 20s linear infinite;
}

@keyframes rotateIcon {
  from {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.1);
  }

  to {
    transform: rotate(360deg) scale(1);
  }
}

/* Process Number Enhancements */
.process-number {
  position: relative;
  overflow: visible;
}

.process-number::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea, #764ba2);
  opacity: 0.3;
  filter: blur(10px);
  animation: pulseGlow 3s ease-in-out infinite;
}

/* Real-Time Dashboard Enhancements */
#currentTime {
  animation: blink 2s ease-in-out infinite;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

/* Hero Empty Space Animations */
@keyframes floatRotate {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  25% {
    transform: translate(30px, -30px) rotate(90deg) scale(1.1);
  }

  50% {
    transform: translate(-20px, 20px) rotate(180deg) scale(0.9);
  }

  75% {
    transform: translate(20px, 30px) rotate(270deg) scale(1.05);
  }
}

.floating-icon {
  filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
  will-change: transform;
}

.animated-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawPath 5s ease-in-out infinite;
}

@keyframes drawPath {
  to {
    stroke-dashoffset: 0;
  }
}

.pulse-circle {
  animation: pulseCircle 3s ease-in-out infinite;
}

@keyframes pulseCircle {

  0%,
  100% {
    r: 30;
    opacity: 0.3;
  }

  50% {
    r: 50;
    opacity: 0.6;
  }
}

/* Fix service area card text visibility on dark backgrounds */
.service-area-card h4,
.service-area-card p {
  color: white !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.service-area-card h4 {
  font-weight: 700;
}

.service-area-card>div>div {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 600;
}

/* Fix dashboard cards on dark background */
.dashboard-card {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
}

@media (max-width: 1200px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 992px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-animated-elements {
    opacity: 0.3;
    transform: scale(0.8);
  }

  .status-panel {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: block;
  }

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .hero {
    min-height: 50vh;
    padding: 6rem 0 3rem;
  }

  .hero-content {
    max-width: 100%;
    text-align: center;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin: 0 auto 1.5rem;
  }

  .hero-animated-elements {
    display: none;
  }

  .footer-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .footer-links {
    margin-bottom: 2rem;
  }

  .compliance-grid {
    justify-content: center;
  }

  .stats-card {
    padding: 1.5rem;
  }

  .stats-number {
    font-size: 2.25rem !important;
    /* Slightly smaller for mobile if needed */
  }

  .metric-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Fix dashboard header on mobile */
  .dashboard-header h1 {
    font-size: 1.5rem !important;
  }

  .dashboard-header p {
    font-size: 0.9rem !important;
  }

  /* Fix table overflow */
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 0.8rem;
    min-width: 500px;
  }

  /* Service area cards fix */
  .service-area-card {
    padding: 1.5rem !important;
  }

  .service-area-card h4 {
    font-size: 1.1rem !important;
  }

  .service-area-card p {
    font-size: 0.85rem !important;
  }
}

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

  .hero-title {
    font-size: 1.85rem;
  }

  .section-title {
    font-size: 1.6rem;
  }

  .btn {
    width: 100%;
    justify-content: center;
    padding: 0.875rem 1.5rem;
  }

  .metric-grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 1.5rem;
  }

  .navbar-brand {
    font-size: 1.25rem;
  }
}

/* Fix for extreme small screens (360px and below) */
@media (max-width: 400px) {
  .navbar-brand {
    font-size: 1.15rem;
    gap: 0.5rem;
  }

  .brand-logo-box {
    width: 34px;
    height: 34px;
    font-size: 1.4rem;
  }
}

/* Reduce Motion for Accessibility */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Dashboard Animated Background */
.dashboard-container {
  position: relative;
  overflow: hidden;
}

.dashboard-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.08) 0%, transparent 50%);
  animation: dashboardBackground 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes dashboardBackground {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  33% {
    transform: translate(40px, -40px) scale(1.1);
    opacity: 0.7;
  }

  66% {
    transform: translate(-30px, 30px) scale(0.9);
    opacity: 0.8;
  }
}

.dashboard-container>.container {
  position: relative;
  z-index: 1;
}

/* Print Styles */
@media print {

  .navbar,
  .footer,
  .btn,
  .mobile-menu-toggle,
  .theme-toggle,
  .rtl-toggle {
    display: none !important;
  }

  body {
    padding: 0;
  }

  .section {
    page-break-inside: avoid;
  }
}

/* Loading Spinner Fix */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-primary);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Login Page Centering Fix with Scroll Support */
/* Login Page Centering Fix with Scroll Support */
.login-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  z-index: 900;
  transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.6s ease;
  /* We remove alignment here and let margin: auto on the child handle it */
}

/* Ensure cards are centered */
.login-card {
  margin: auto;
  /* Centers vertically and horizontally, safe for overflow */
  width: 100%;
  max-width: 450px;
  position: relative;
  /* Ensure z-index works */
}

/* Animation States */
.login-container.hidden-left {
  transform: translateX(-100%) scale(0.9);
  opacity: 0;
  pointer-events: none;
}

.login-container.hidden-right {
  transform: translateX(100%) scale(0.9);
  opacity: 0;
  pointer-events: none;
}

.login-container.active {
  transform: translateX(0) scale(1);
  opacity: 1;
  pointer-events: all;
}

/* Login Page Mobile Responsive Fixes */
@media (max-width: 576px) {
  .login-container {
    padding: 1rem !important;
    padding-top: calc(var(--navbar-height) + 2rem) !important;
    /* Clear navbar */
  }

  /* Override inline 3rem padding on register card */
  .login-card {
    padding: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Testimonial Quote Badges */
.quote-badge {
  position: absolute;
  top: -20px;
  left: 2rem;
  width: 60px;
  height: 60px;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10;
}

.quote-badge-primary {
  background: linear-gradient(135deg, #e8364e, #ff6b81);
  box-shadow: 0 4px 12px rgba(232, 54, 78, 0.3);
}

.quote-badge-secondary {
  background: linear-gradient(135deg, #6c5ce7, #a29bfe);
  box-shadow: 0 4px 12px rgba(108, 92, 231, 0.3);
}

.quote-badge-success {
  background: linear-gradient(135deg, #00b894, #55efc4);
  box-shadow: 0 4px 12px rgba(0, 184, 148, 0.3);
}

@media (max-width: 768px) {
  .quote-badge {
    left: 50%;
    transform: translateX(-50%);
  }
}

.quote-badge-home2 {
  background: linear-gradient(135deg, #667eea, #764ba2);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}


/* Dashboard Layout System */
.dashboard-container {
  padding-top: var(--navbar-height);
  min-height: 100vh;
  display: flex;
  background: var(--bg-tertiary);
}

.dashboard-sidebar {
  width: 260px;
  background: var(--bg-primary);
  border-right: 1px solid var(--border-color);
  padding: 2rem 1rem;
  position: fixed;
  top: var(--navbar-height);
  bottom: 0;
  left: 0;
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 90;
  transition: var(--transition);
}

.dashboard-main {
  flex: 1;
  padding: 2rem;
  margin-left: 260px;
  /* Offset for fixed sidebar */
  width: calc(100% - 260px);
}

.sidebar-nav {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.875rem 1rem;
  color: var(--text-secondary);
  border-radius: 0.75rem;
  transition: var(--transition);
  font-weight: 500;
}

.sidebar-link:hover,
.sidebar-link.active {
  background: linear-gradient(90deg, rgba(232, 54, 78, 0.1), transparent);
  color: var(--primary);
  border-left: 3px solid var(--primary);
}

.sidebar-link i {
  width: 24px;
  text-align: center;
  font-size: 1.1rem;
}

.sidebar-section {
  font-size: 0.75rem;
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  font-weight: 700;
  margin: 1.5rem 0 0.75rem 1rem;
}

@media (max-width: 1024px) {
  .dashboard-sidebar {
    width: 80px;
    padding: 2rem 0.5rem;
  }

  .sidebar-link span,
  .sidebar-section {
    display: none;
  }

  .dashboard-main {
    margin-left: 80px;
    width: calc(100% - 80px);
  }

  .sidebar-link {
    justify-content: center;
    padding: 0.875rem 0;
    border-radius: 0.5rem;
  }

  .sidebar-link:hover,
  .sidebar-link.active {
    border-left: none;
    background: rgba(232, 54, 78, 0.1);
  }
}

@media (max-width: 768px) {
  .dashboard-sidebar {
    transform: translateX(-100%);
    width: 260px;
  }

  .dashboard-sidebar.active {
    transform: translateX(0);
  }

  .dashboard-main {
    margin-left: 0;
    width: 100%;
    padding: 1.5rem 1rem;
  }
}


/* Adjust footer for dashboard layout */
.dashboard-container+.footer {
  margin-left: 260px;
  width: calc(100% - 260px);
  margin-top: 0;
  /* Dashboard main has padding */
}

@media (max-width: 1024px) {
  .dashboard-container+.footer {
    margin-left: 80px;
    width: calc(100% - 80px);
  }
}

@media (max-width: 768px) {
  .dashboard-container+.footer {
    margin-left: 0;
    width: 100%;
  }
}

/* =========================================
   Robust Grid System for Dashboard Alignment
   ========================================= */

/* Desktop defaults */
.grid {
  display: grid;
  gap: 1.5rem;
  width: 100%;
}

.grid-2 {
  grid-template-columns: repeat(2, 1fr) !important;
}

.grid-3 {
  grid-template-columns: repeat(3, 1fr) !important;
}

.grid-4 {
  grid-template-columns: repeat(4, 1fr) !important;
}

/* Tablet Responsive */
@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }

  /* Ensure charts and cards don't overflow */
  .card,
  .dashboard-card {
    min-width: 0;
  }
}

.quote-badge {
  position: relative;
  top: auto;
  left: auto;
  width: 100%;
  height: auto;
  border-radius: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  box-shadow: none;
  font-size: 2.5rem;
  z-index: 1;
  margin-bottom: 1rem;
  opacity: 1;
}

.quote-badge i {
  display: block;
}

.quote-badge-primary {
  color: #e8364e;
  background: none;
  box-shadow: none;
}

.quote-badge-secondary {
  color: #6c5ce7;
  background: none;
  box-shadow: none;
}

.quote-badge-success {
  color: #00b894;
  background: none;
  box-shadow: none;
}

/* Remove the centering media query as it's now always centered */
@media (max-width: 768px) {
  .quote-badge {
    left: auto;
    transform: none;
  }
}

.quote-badge-home2 {
  color: #6c5ce7;
  background: none;
  box-shadow: none;
}

/* Pricing Card Enhancements */
.pricing-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  border: 2px solid transparent !important;
  background: var(--bg-primary);
  position: relative;
  overflow: visible !important;
  backface-visibility: hidden;
  transform: translateZ(0);
  z-index: 1;
}

/* Pseudo-element for smooth gradient fade */
.pricing-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.pricing-card .btn {
  transition: all 0.3s ease;
}

/* Basic Plan - Bronze Hover */
.pricing-card.basic-plan:hover {
  border-color: #CD7F32 !important;
  box-shadow: 0 20px 40px rgba(205, 127, 50, 0.15);
  transform: translateY(-5px);
}

.pricing-card.basic-plan::before {
  background: linear-gradient(135deg, rgba(205, 127, 50, 0.1), rgba(184, 115, 51, 0.05));
  border-radius: 0.75rem;
  /* Match card radius if needed, usually inherit works but being safe */
}

.pricing-card.basic-plan:hover::before {
  opacity: 1;
}

.pricing-card.basic-plan:hover .btn {
  background: #CD7F32;
  color: white;
}

/* Premium Plan - Silver Hover */
.pricing-card.premium-plan:hover {
  border-color: #C0C0C0 !important;
  box-shadow: 0 20px 60px rgba(192, 192, 192, 0.3);
  transform: translateY(-5px);
}

.pricing-card.premium-plan::before {
  background: linear-gradient(135deg, rgba(192, 192, 192, 0.15), rgba(169, 169, 169, 0.08));
}

.pricing-card.premium-plan:hover::before {
  opacity: 1;
}

.pricing-card.premium-plan:hover .btn {
  background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
  color: white;
}

/* Enterprise Plan - Gold Hover */
.pricing-card.enterprise-plan:hover {
  border-color: #FFD700 !important;
  box-shadow: 0 20px 40px rgba(255, 215, 0, 0.2);
  transform: translateY(-5px);
}

.pricing-card.enterprise-plan::before {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.15), rgba(255, 223, 0, 0.08));
}

.pricing-card.enterprise-plan:hover::before {
  opacity: 1;
}

.pricing-card.enterprise-plan:hover .btn {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: white;
}

/* Fix for Most Popular Badge */
.most-popular-badge {
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #C0C0C0, #A9A9A9);
  color: white;
  padding: 0.5rem 2rem;
  border-radius: 2rem;
  font-weight: 700;
  font-size: 0.875rem;
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.4);
  z-index: 10;
  width: max-content;
}

/* Fix for Testimonial Quote Badges visibility */
.testimonial-card,
.card.testimonial-card,
.home2-feature-card,
.process-step {
  overflow: visible !important;
}

.testimonial-card,
.card.testimonial-card {
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.testimonial-card>div[style*="display: flex"],
.card.testimonial-card>div[style*="display: flex"] {
  justify-content: center !important;
  width: 100% !important;
}

/* Ensure text is readable and centered */
.testimonial-card .card-text,
.card.testimonial-card .card-text {
  text-align: center !important;
  margin-bottom: 2rem !important;
}

/* Service Process Step Fix */
.process-step-card {
  overflow: visible !important;
  margin-top: 1.5rem;
}

.step-number {
  position: absolute;
  top: -25px;
  left: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  z-index: 5;
}

/* Grid Fixes - Restored */
.grid-2-1 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
}

/* Ensure Dashboard Content Visibility */
.dashboard-view.active .card,
.dashboard-view.active .dashboard-card,
.dashboard-view.active .grid div {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Floating Trigger Fix - Corrected Position and Size */
.mobile-floating-trigger {
  position: fixed;
  left: 0;
  top: 110px !important;
  /* Move down below navbar */
  width: 28px !important;
  /* Narrower for semi-circle effect */
  height: 36px !important;
  /* Shorter vertical height */
  background: var(--primary);
  color: white;
  border-radius: 0 50% 50% 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  cursor: pointer;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  border: none;
  font-size: 14px;
  /* Adjust icon size */
}

@media (min-width: 993px) {
  .mobile-floating-trigger {
    display: none !important;
  }
}

.terminal-text {
  color: #a29bfe;
  /* Lavender */
  font-family: monospace;
}


/* -------------------------------------------------------------------------- */
/* RTL / LTR Global Functionality Enhancements                                */
/* -------------------------------------------------------------------------- */

/* Base RTL Direction */
[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

[dir="ltr"] {
  direction: ltr;
  text-align: left;
}

/* Reset and flip margins/paddings for common utilities */
[dir="rtl"] .mr-1,
[dir="rtl"] .mr-2,
[dir="rtl"] .mr-3,
[dir="rtl"] .mr-4,
[dir="rtl"] .mr-5 {
  margin-right: 0 !important;
  margin-left: 0.25rem !important;
}

[dir="rtl"] .ml-1,
[dir="rtl"] .ml-2,
[dir="rtl"] .ml-3,
[dir="rtl"] .ml-4,
[dir="rtl"] .ml-5 {
  margin-left: 0 !important;
  margin-right: 0.25rem !important;
}

[dir="rtl"] .pr-1,
[dir="rtl"] .pr-2,
[dir="rtl"] .pr-3,
[dir="rtl"] .pr-4,
[dir="rtl"] .pr-5 {
  padding-right: 0 !important;
  padding-left: 0.25rem !important;
}

[dir="rtl"] .pl-1,
[dir="rtl"] .pl-2,
[dir="rtl"] .pl-3,
[dir="rtl"] .pl-4,
[dir="rtl"] .pl-5 {
  padding-left: 0 !important;
  padding-right: 0.25rem !important;
}

[dir="rtl"] .text-right {
  text-align: left !important;
}

[dir="rtl"] .text-left {
  text-align: right !important;
}

[dir="rtl"] .float-right {
  float: left !important;
}

[dir="rtl"] .float-left {
  float: right !important;
}

/* Flexbox Direction Flip */
[dir="rtl"] .navbar-menu,
[dir="rtl"] .navbar-controls,
[dir="rtl"] .hero-content>div[style*="display: flex"],
[dir="rtl"] .footer-content,
[dir="rtl"] .grid,
[dir="rtl"] .sub-navbar {
  flex-direction: row-reverse;
}

/* Fix for mobile menu in RTL - Ensure it stays vertical */
@media (max-width: 768px) {
  [dir="rtl"] .navbar-menu {
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
  }
}

/* Keep certain flex containers unchanged */
[dir="rtl"] .navbar .container {
  flex-direction: row-reverse;
}

/* Cards and content alignment */
[dir="rtl"] .card,
[dir="rtl"] .dashboard-card,
[dir="rtl"] .home2-feature-card,
[dir="rtl"] .process-content,
[dir="rtl"] .testimonial-card .card-text,
[dir="rtl"] p,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  text-align: right;
}

/* Section headers center alignment should remain */
[dir="rtl"] .section-header,
[dir="rtl"] .section-header h2,
[dir="rtl"] .section-header p {
  text-align: center;
}

/* Flip border directions */
[dir="rtl"] .sidebar-link.active {
  border-left: none;
  border-right: 3px solid var(--primary);
}

[dir="rtl"] div[style*="border-left:"],
[dir="rtl"] div[style*="border-left :"] {
  border-left: none !important;
}

/* Icon positioning flip for buttons and links */
[dir="rtl"] .btn i,
[dir="rtl"] .sidebar-link i,
[dir="rtl"] .navbar-link i {
  margin-left: 0.5rem;
  margin-right: 0;
}

/* Dropdown menu positioning */
[dir="rtl"] .dropdown-menu {
  left: auto;
  right: 0;
}

/* Dashboard sidebar */
[dir="rtl"] .dashboard-sidebar {
  left: auto;
  right: 0;
  border-right: none;
  border-left: 1px solid var(--border-color);
}

[dir="rtl"] .dashboard-main {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Desktop specific - no sidebar margin */
@media (min-width: 993px) {
  [dir="rtl"] .dashboard-container {
    overflow-x: hidden;
    max-width: 100vw;
  }

  [dir="rtl"] .dashboard-main {
    margin: 0 auto !important;
    width: 100% !important;
  }
}

/* Stats and flex item layouts */
[dir="rtl"] .stats-card,
[dir="rtl"] .dashboard-card-header {
  flex-direction: row-reverse;
}

/* Hero section */
[dir="rtl"] .hero-content {
  text-align: right;
  align-items: flex-end;
}

[dir="rtl"] .home2-hero-grid {
  direction: rtl;
}

[dir="rtl"] .home2-hero h1 {
  text-align: right;
}

/* Process steps */
[dir="rtl"] .process-step {
  direction: rtl;
}

[dir="rtl"] .process-number {
  order: 2;
}

[dir="rtl"] .process-content {
  order: 1;
}

/* Table alignment */
[dir="rtl"] table,
[dir="rtl"] th,
[dir="rtl"] td {
  text-align: right;
}

/* Form elements */
[dir="rtl"] .form-control,
[dir="rtl"] input,
[dir="rtl"] textarea,
[dir="rtl"] select {
  text-align: right;
}

/* Footer */
[dir="rtl"] .footer-content {
  direction: rtl;
}

[dir="rtl"] .footer-links {
  text-align: right;
}

/* Feature cards with icons */
[dir="rtl"] .home2-feature-card>div[style*="display: flex"],
[dir="rtl"] .card>div[style*="display: flex"] {
  flex-direction: row-reverse;
}

/* Service area cards */
[dir="rtl"] .service-area-card {
  text-align: right;
}

/* Chevron icons flip */
[dir="rtl"] .fa-chevron-right::before {
  content: "\f053";
}

[dir="rtl"] .fa-chevron-left::before {
  content: "\f054";
}

[dir="rtl"] .fa-arrow-right::before {
  content: "\f060";
}

[dir="rtl"] .fa-arrow-left::before {
  content: "\f061";
}

/* Mobile menu adjustments */
@media (max-width: 992px) {
  [dir="rtl"] .dashboard-sidebar {
    transform: translateX(100%);
    right: 0;
    left: auto;
  }

  [dir="rtl"] .dashboard-sidebar.active {
    transform: translateX(0);
  }

  [dir="rtl"] .dashboard-main {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }

  [dir="rtl"] .dashboard-container {
    overflow-x: hidden;
    width: 100%;
  }
}

/* Dashboard Mobile Sidebar and Layout Styles */

/* Base Styles for Mobile Dashboard */
@media (max-width: 992px) {
  .dashboard-container {
    flex-direction: column;
    position: relative;
  }

  /* Fixed Sidebar */
  .dashboard-sidebar {
    position: fixed;
    top: 0;
    left: -200px;
    height: 100vh;
    width: 200px;
    z-index: 99999 !important;
    /* High z-index */
    transition: left 0.3s ease-in-out;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    background-color: var(--bg-primary, #ffffff) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dashboard-sidebar.active {
    left: 0;
  }

  /* Main Content Area adjustments */
  .dashboard-main {
    width: 100%;
    margin-left: 0;
    padding: 1.5rem 1rem;
    min-height: 100vh;
    box-sizing: border-box;
  }

  /* Overlay */
  .dashboard-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    /* Just below sidebar */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }

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

  /* Header Controls */
  .sidebar-toggle-btn {
    display: none !important;
    /* Hide original hamburger */
  }

  /* Floating Arrow Trigger */
  .mobile-floating-trigger {
    position: fixed;
    left: 0;
    top: 130px;
    /* Offset from top header */
    width: 40px;
    height: 40px;
    background: var(--primary);
    /* Adjust color as needed */
    color: white;
    border-radius: 0 50% 50% 0;
    /* Semi-circle on right */
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    cursor: pointer;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
    border: none;
    transition: left 0.3s ease;
  }

  /* Sidebar Header with Close Button */
  .mobile-close {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    background: #000;
    /* Black header like screenshot */
    color: white;
    border-bottom: 1px solid var(--border-color);
  }

  .mobile-close h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
  }

  .mobile-close button {
    background: white;
    color: black;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    /* Square with rounded corners */
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Responsive Grid System Override */
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .dashboard-grid,
  .grid-2-1 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }

  /* Force inline-styled grids to collapse */
  div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  /* Handle Chart Containers */
  /* Ensure charts don't overflow or collapse */
  .card canvas,
  .dashboard-card canvas {
    max-width: 100% !important;
    width: 100% !important;
    /* height: auto !important; - REMOVED to fix Chart.js collapse */
    min-height: 250px !important;
  }

  /* Ensure Tables are scrollable */
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  /* Ensure Sidebar Link Text Visibility */
  .sidebar-link span {
    display: inline-block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Fix dashboard view visibility animations */
  .dashboard-view {
    opacity: 1 !important;
    /* Force visibility overrides */
    transform: none !important;
  }

  .scroll-reveal {
    opacity: 1 !important;
    /* disable scroll reveal on mobile to prevent hidden content */
    transform: none !important;
  }
}

/* Ensure toggle button hidden on desktop */
@media (min-width: 993px) {
  .sidebar-toggle-btn {
    display: none !important;
  }

  .mobile-floating-trigger {
    display: none !important;
  }

  .mobile-close {
    display: none !important;
  }

  .dashboard-overlay {
    display: none !important;
  }
}

/* RTL Support for Mobile Dashboard */
[dir="rtl"] .dashboard-sidebar {
  left: auto;
  right: -200px;
  transition: right 0.3s ease-in-out;
}

[dir="rtl"] .dashboard-sidebar.active {
  left: auto;
  right: 0;
}

[dir="rtl"] .mobile-floating-trigger {
  left: auto;
  right: 0;
  border-radius: 50% 0 0 50%;
  transform: rotate(180deg);
  box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.2);
}

[dir="rtl"] .mobile-close button i {
  transform: rotate(180deg);
}

/* RTL Support for Pricing Cards */
[dir="rtl"] .pricing-card ul {
  text-align: right !important;
}

[dir="rtl"] .pricing-card .sidebar-link.active {
  border-left: none;
  border-right: 3px solid var(--primary);
}

/* Mobile Responsive Pricing Cards */
@media (max-width: 768px) {
  .pricing-card {
    margin-bottom: 2rem;
  }

  .pricing-card ul {
    font-size: 0.95rem;
  }

  .pricing-card ul li {
    padding: 0.6rem 0 !important;
  }

  .most-popular-badge {
    font-size: 0.75rem;
    padding: 0.4rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .pricing-card h3 {
    font-size: 1.25rem !important;
  }

  .pricing-card div[style*="font-size: 2.5rem"] {
    font-size: 2rem !important;
  }
}

/* Dashboard Layout Fixes for Desktop */
@media (min-width: 993px) {
  .dashboard-container {
    display: flex !important;
    min-height: calc(100vh - var(--navbar-height));
    padding-top: var(--navbar-height);
    position: relative;
  }

  .dashboard-sidebar {
    width: 280px;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    height: calc(100vh - var(--navbar-height));
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    overflow-y: auto;
    z-index: 100;
    padding-bottom: 2rem;
  }

  .dashboard-main {
    flex: 1;
    margin-left: 0;
    /* Sidebar removed */
    padding: 2rem;
    background: var(--bg-secondary);
    min-height: calc(100vh - var(--navbar-height));
    width: 100%;
  }

  /* Fix Sidebar Navigation Styling */
  .sidebar-nav {
    list-style: none;
    padding: 1.5rem 1rem;
  }

  .sidebar-section {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 1.5rem 0 0.5rem 1rem;
  }

  .sidebar-section:first-child {
    margin-top: 0;
  }

  .sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    color: var(--text-secondary);
    transition: var(--transition);
    font-weight: 500;
    margin-bottom: 0.25rem;
  }

  .sidebar-link:hover {
    background: var(--bg-secondary);
    color: var(--primary);
  }

  .sidebar-link.active {
    background: linear-gradient(90deg, rgba(232, 54, 78, 0.1), transparent);
    color: var(--primary);
    border-left: 3px solid var(--primary);
  }

  .sidebar-link i {
    width: 20px;
    text-align: center;
    font-size: 1.1rem;
  }
}

/* Text Scramble Cursor (Optional blinking cursor if needed) */
.scramble-cursor {
  display: inline-block;
  width: 10px;
  height: 1em;
  background: var(--primary);
  margin-left: 5px;
  animation: blink 1s infinite;
}

/* Ensure content visibility */
.dashboard-view {
  width: 100%;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

/* Utility Animations Disabled */
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right,
.fade-in-scale {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

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

/* Staggering disabled */
.stagger-1,
.stagger-2,
.stagger-3 {
  animation-delay: 0s !important;
}

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

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

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

/* Image Pixel Reveal Animation */
.pixel-image-wrapper {
  position: relative;
  overflow: hidden;
  display: block;
  line-height: 0;
}

.pixel-mask-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  pointer-events: none;
}

.pixel-block {
  background-color: var(--bg-primary);
  /* Default for white sections */
  width: 10%;
  height: 10%;
  transition: opacity 0.4s ease, transform 0.4s ease;
  will-change: opacity;
}

/* Match Section Backgrounds */
.section-soft .pixel-block {
  background-color: var(--bg-secondary);
}

.section-tech .pixel-block {
  background-color: #0f172a;
  /* Tech section dark bg */
}

.section-alt .pixel-block {
  background-color: var(--bg-primary);
  /* Often white, but check */
}

.section-glass .pixel-block {
  /* Glass sections usually have complex backgrounds, but the card is on top. 
      Ideally the pixel block should match the CARD background if it's inside the card.
      But here the mask covers the card content. 
      If the mask is same color as page background, it looks like a hole.
      If it is same color as CARD background, it looks like card is forming.
      "Pixel Reveal" usually means "appearing from nothing".
      So "nothing" = page background.
    */
  background-color: transparent;
  /* No, must be opaque to hide content. */
  background-color: var(--bg-primary);
}

[data-theme="dark"] .pixel-block {
  background-color: #0a0a1a;
  /* Dark theme default */
}

/* For cards that have specific backgrounds (gradient stats cards) 
   The pixel block should probably be the PAGE background color to look like "revealing".
*/

.pixel-revealed .pixel-block {
  opacity: 0;
  transform: scale(0.5);
}


/* Ensure cards can support the pixel mask */
.card,
.stats-card,
.service-card,
.feature-card,
.dashboard-card,
.testimonial-card,
.process-step,
.pricing-card {
  position: relative !important;
  z-index: 1;
}

/* Ensure mask is above card content initially */
.card .pixel-mask-grid {
  z-index: 20;
}

/* Water Fill Animation - Home 1 Only */
.water-fill-card {
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* Ensure background is compatible */
  background: var(--bg-primary);
}

/* The Water Wave Pseudo */
.water-fill-card::after {
  content: "";
  position: absolute;
  bottom: -100%;
  /* Start well below */
  left: -50%;
  width: 200%;
  /* Wide enough to cover rotation */
  height: 200%;
  background-color: rgba(108, 92, 231, 0.08);
  /* Very subtle violet */
  border-radius: 45%;
  /* Smooth rounded corners for wave simulation */
  z-index: -1;
  /* Behind text */
  pointer-events: none;
}

[data-theme="dark"] .water-fill-card::after {
  background-color: rgba(108, 92, 231, 0.15);
  /* Stronger in dark mode */
}

/* Triggered Entrances */
.water-fill-card.water-filled {
  animation: waterCardReveal 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.water-fill-card.water-filled::after {
  bottom: -50%;
  /* Rise up to cover content area */
  animation: liquid-fill-rotate 6s infinite linear;
  transition: bottom 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes waterCardReveal {
  0% {
    opacity: 0;
    transform: scale(0.2) translateY(50px);
    border-radius: 50%;
    filter: blur(8px);
  }

  40% {
    opacity: 1;
    transform: scale(1.05) translateY(-10px);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(2px);
  }

  70% {
    transform: scale(0.95);
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    filter: none;
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
    border-radius: var(--target-radius, 1rem);
    /* Resolves to captured radius */
    filter: none;
  }
}

@keyframes liquid-fill-rotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Water Droplet Trail Effect */
.water-droplet-trail {
  position: absolute;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  animation: dropletFade 1s linear forwards;
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.8),
    inset -2px -2px 5px rgba(0, 0, 0, 0.1),
    2px 2px 5px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  will-change: transform, opacity;
}

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

  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.2);
  }
}

.droplet-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 70%);
  transform: scale(0);
  animation: rippleExpand 0.6s linear;
  pointer-events: none;
  z-index: 99;
}

@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Brand Text - Visible in all themes */
[data-theme='dark'] .brand-text {
  display: inline;
  /* Ensure visibility in dark mode */
  color: var(--text-primary);
  /* Use theme-appropriate text color */
}

/* AQUAFLOW PROFESSIONAL LOADER */
#aqua-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--bg-primary);
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

#aqua-loader.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.1);
}

.loader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.faucet-icon {
  font-size: 4rem;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 6px rgba(13, 148, 136, 0.2));
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.water-drip {
  width: 12px;
  height: 12px;
  background: var(--primary);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  position: absolute;
  top: 55px;
  left: 50%;
  margin-left: -5px;
  opacity: 0;
  animation: drip-drop 2s infinite ease-in-out;
}

.ripple-puddle {
  width: 40px;
  height: 10px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  position: absolute;
  top: 90px;
  opacity: 0;
  transform: scale(0);
  animation: ripple-expand-loader 2s infinite ease-out;
  animation-delay: 0.8s;
}

.loading-text {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  margin-top: 1rem;
  text-transform: uppercase;
  display: flex;
  gap: 4px;
}

.loading-text span {
  animation: text-wave 1.5s infinite ease-in-out;
}

.loading-text span:nth-child(2) {
  animation-delay: 0.1s;
}

.loading-text span:nth-child(3) {
  animation-delay: 0.2s;
}

.loading-text span:nth-child(4) {
  animation-delay: 0.3s;
}

.loading-text span:nth-child(5) {
  animation-delay: 0.4s;
}

.loading-text span:nth-child(6) {
  animation-delay: 0.5s;
}

.loading-text span:nth-child(7) {
  animation-delay: 0.6s;
}

.loading-text span:nth-child(8) {
  animation-delay: 0.7s;
}

@keyframes drip-drop {
  0% {
    top: 55px;
    opacity: 1;
    transform: rotate(-45deg) scale(0.5);
  }

  40% {
    top: 55px;
    opacity: 1;
    transform: rotate(-45deg) scale(1);
  }

  90% {
    top: 90px;
    opacity: 1;
    transform: rotate(-45deg) scale(0.8);
  }

  100% {
    top: 90px;
    opacity: 0;
    transform: rotate(-45deg) scale(0.2);
  }
}

@keyframes ripple-expand-loader {
  0% {
    opacity: 1;
    transform: scale(0);
    border-width: 2px;
  }

  100% {
    opacity: 0;
    transform: scale(2);
    border-width: 0px;
  }
}

@keyframes text-wave {

  0%,
  100% {
    transform: translateY(0);
    color: var(--text-primary);
  }

  50% {
    transform: translateY(-4px);
    color: var(--primary);
  }
}

/* HERO VISUAL ANIMATIONS (HOME 1) */
.hero-visual {
  display: none;
  /* Hidden on mobile by default */
  position: relative;
  width: 450px;
  height: 450px;
  margin-right: 2rem;
}

@media (min-width: 992px) {
  .hero-visual {
    display: block;
  }
}

/* Glass Panel Cards */
.glass-panel {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  position: absolute;
  transition: transform 0.3s ease;
  animation: floatCard 6s ease-in-out infinite;
  cursor: default;
}

.glass-panel:hover {
  transform: scale(1.05) !important;
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
}

.card-top {
  top: 10%;
  left: -10%;
  animation-delay: 0s;
}

.card-right {
  top: 40%;
  right: -10%;
  animation-delay: 2s;
}

.card-bottom {
  bottom: 10%;
  left: 10%;
  animation-delay: 4s;
}

/* Icons in cards */
.card-icon-box {
  width: 45px;
  height: 45px;
  border-radius: 12px;
  background: rgba(232, 54, 78, 0.2);
  /* Primary transparent */
  color: #ff6b81;
  /* Coral-ish for dark bg */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.card-icon-box.success {
  background: rgba(34, 197, 94, 0.2);
  color: #86efac;
}

.card-icon-box.warning {
  background: rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.card-info {
  display: flex;
  flex-direction: column;
}

.card-info .label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-info .value {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}

/* Orbit Animation */
.hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  border: 1px dashed rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: spinOrbit 20s linear infinite;
}

.orbit-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(232, 54, 78, 0.2) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(20px);
  animation: pulseGlow 4s ease-in-out infinite;
}

.orbit-icon {
  position: absolute;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Positioning icons on orbit */
.orbit-icon.i1 {
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
}

.orbit-icon.i2 {
  bottom: 30px;
  left: 20px;
}

.orbit-icon.i3 {
  bottom: 30px;
  right: 20px;
}

/* Invert rotation for icons so they stay upright */
.orbit-icon i {
  animation: counterSpin 20s linear infinite;
}

/* Animations */
@keyframes floatCard {

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

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

@keyframes spinOrbit {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

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

  to {
    transform: rotate(-360deg);
  }
}

@keyframes pulseGlow {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.5;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
}

/* Pulse animation for icons */
.pulse-anim i {
  animation: iconPulse 2s infinite;
}

.delay-1 i {
  animation-delay: 0.5s;
}

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

@keyframes iconPulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

/* ENHANCED HOME HERO BACKGROUND */
.home-hero-enhanced {
  position: relative;
  height: 100vh;
  min-height: 800px;
  padding-top: 130px;
  overflow: hidden;
  /* Fallback image with blend */
  background:
    linear-gradient(to right, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 0.7) 50%, rgba(15, 23, 42, 0.4) 100%),
    url('assets/images/plumber_hero_cinematic.png') no-repeat center center/cover;
  background-attachment: fixed;
}

/* Animated Gradient Overlay */
.hero-bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 50%, rgba(232, 54, 78, 0.15), transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(108, 92, 231, 0.15), transparent 50%);
  animation: pulseOverlay 8s ease-in-out infinite alternate;
  z-index: 1;
}

/* Floating Particles Container */
.hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Individual Particle (created via JS) */
.hero-particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  pointer-events: none;
  animation: floatUp linear infinite;
}

/* Wave Decoration at Bottom */
.hero-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23f8f9fc' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 2;
  opacity: 0.9;
}

[data-theme="dark"] .hero-wave {
  /* Dark mode wave color matching dark bg */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%230a0a1a' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,112C672,96,768,96,864,112C960,128,1056,160,1152,160C1248,160,1344,128,1392,112L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E");
}

@keyframes pulseOverlay {
  0% {
    opacity: 0.5;
    transform: scale(1);
  }

  100% {
    opacity: 0.8;
    transform: scale(1.1);
  }
}

@keyframes floatUp {
  0% {
    transform: translateY(100vh) scale(0);
    opacity: 0;
  }

  10% {
    opacity: 0.8;
  }

  90% {
    opacity: 0.4;
  }

  100% {
    transform: translateY(-100px) scale(1);
    opacity: 0;
  }
}

/* VISUAL ENHANCEMENTS FOR EMPTY SECTIONS */

/* Subtle Grid Pattern for White Sections */
.home-standard .section:not([style*="background"]) {
  background-image: radial-gradient(#d5d8e3 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: #f8f9fc;
}

[data-theme="dark"] .home-standard .section:not([style*="background"]) {
  background-image: radial-gradient(#2a2a4a 1px, transparent 1px);
  background-size: 24px 24px;
  background-color: var(--bg-primary);
}

/* Innovation Roadmap Timeline Line */
.home-standard .section:nth-of-type(8) .grid-3 {
  /* Targeting Roadmap Section specifically */
  position: relative;
}

@media (min-width: 992px) {
  .home-standard .section:nth-of-type(8) .grid-3::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
    z-index: 0;
    transform: translateY(-50%);
    opacity: 0.3;
  }
}

/* Enhanced Phase Cards */
.phase-card {
  background: var(--bg-primary) !important;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  z-index: 1;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.phase-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border-color: var(--primary);
}

/* Trusted Partners Enhancement */
.tech-badge {
  background: white !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.tech-badge:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  border-color: var(--primary) !important;
  color: var(--primary) !important;
}

[data-theme="dark"] .tech-badge {
  background: #12122a !important;
  border-color: #2a2a4a !important;
  color: #8585a8 !important;
}



/* Footer Brand Standardization - Always Dark */
.footer-title {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 1rem;
  color: #ff6b81;
  /* Coral - consistent on dark footer */
  background: none;
  -webkit-text-fill-color: initial;
}

/* Testimonial Card Alignment Fix */
.grid-3 {
  align-items: stretch;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonial-card .card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.testimonial-card .card-text {
  flex: 1;
}

/* Equal height for all grid cards */
.grid .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid .card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Testimonial Card Alignment Fix */
.grid-3 {
  align-items: stretch;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.testimonial-card .card-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.testimonial-card .card-text {
  flex: 1;
}

/* Equal height for all grid cards */
.grid .card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.grid .card .card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Fix alignment 2 column grids */
.grid-2 {
  align-items: stretch;
}

/* Ensure footer sticks to bottom in cards with Content + Footer structure */
.grid-2 .card>div:first-child:nth-last-child(2) {
  flex: 1;
}

/* =========================================
   Chart.js Chart Card Styles
   Ensures proper rendering of dashboard charts
   ========================================= */

/* Chart Card Container */
.chart-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Ensure visibility */
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
  /* CRITICAL: Allow chart content to render properly */
  overflow: visible;
}

.chart-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Dark theme support */
[data-theme="dark"] .chart-card {
  background: var(--bg-secondary);
}

/* Chart Container - Let Chart.js control canvas sizing */
.chart-container {
  position: relative;
  height: 250px;
  min-height: 250px;
  width: 100%;
}

/* Canvas crisp rendering - Fix blurry charts */
.chart-container canvas {
  /* Ensure crisp pixel rendering */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  /* Prevent any blur filters */
  filter: none !important;
  -webkit-filter: none !important;
  /* Ensure no transform blur */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Chart Card Title */
.chart-card h3 {
  margin-bottom: 1rem;
  text-align: center;
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
}

/* Responsive adjustments for charts */
@media (max-width: 768px) {
  .chart-card {
    padding: 1rem;
  }

  .chart-container {
    height: 200px;
    min-height: 200px;
  }
}

/* Chart Grid Layout */
.chart-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (max-width: 640px) {
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

/* Prevent pixel reveal from affecting charts */
.chart-card .pixel-mask-grid {
  display: none !important;
}

/* ==========================================================================
   HYDRO PRO REDESIGN STYLES
   ========================================================================== */

body {
    font-family: 'Outfit', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.plumb-hero {
    position: relative;
    padding: calc(var(--navbar-height) + 4rem) 0 6rem;
    min-height: 90vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}

.plumb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.5;
    z-index: 0;
}

.plumb-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .plumb-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.plumb-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(2, 132, 199, 0.1);
    color: var(--primary);
    border-radius: 2rem;
    font-weight: 600;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(2, 132, 199, 0.2);
}

.plumb-hero-title {
    font-size: clamp(3rem, 5vw, 4.5rem);
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: var(--text-primary);
}

.plumb-hero-title span {
    color: var(--primary);
}

.plumb-hero-subtitle {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin-bottom: 2.5rem;
    line-height: 1.6;
    max-width: 500px;
}

@media (max-width: 768px) {
    .plumb-hero-subtitle {
        margin-inline: auto !important;
    }
    .plumb-hero-actions {
        justify-content: center;
    }
}

.plumb-hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.plumb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.plumb-btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 10px 20px -10px var(--primary);
}

.plumb-btn-primary:hover {
    transform: translateY(-2px);
    background: var(--secondary);
    box-shadow: 0 15px 25px -10px var(--secondary);
    color: white;
}

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

.plumb-btn-secondary:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.plumb-hero-image-wrapper {
    position: relative;
    border-radius: 2rem;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    aspect-ratio: 4/4;
}

.plumb-hero-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.plumb-floating-card {
    position: absolute;
    bottom: -2rem;
    inset-inline-start: -2rem;
    background: var(--bg-primary);
    padding: 1.5rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
    z-index: 3;
    animation: float 6s ease-in-out infinite;
}

.plumb-floating-icon {
    width: 48px;
    height: 48px;
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
}

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

.plumb-stats {
    background: var(--secondary);
    color: white;
    padding: 3rem 0;
    margin-top: -2rem;
    position: relative;
    z-index: 10;
}

.plumb-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    text-align: center;
}

@media (max-width: 768px) {
    .plumb-stats-grid { grid-template-columns: 1fr 1fr; }
}

.plumb-stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary);
    margin-bottom: 0.5rem;
}

.plumb-stat-label {
    font-size: 1rem;
    color: rgba(255,255,255,0.8);
    font-weight: 500;
}

.plumb-section {
    padding: 6rem 0;
    background: var(--bg-primary);
}

.plumb-section-alt {
    background: var(--bg-secondary);
}

.plumb-section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 4rem;
}

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

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

@media (max-width: 768px) {
    .plumb-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .plumb-services-grid { grid-template-columns: 1fr; }
}

.plumb-service-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    padding: 2.5rem;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.plumb-service-card:hover {
    transform: translateY(-5px);
    border-color: var(--primary);
    box-shadow: var(--shadow-lg);
}

.plumb-service-icon {
    width: 60px;
    height: 60px;
    background: rgba(2, 132, 199, 0.1);
    color: var(--primary);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1.5rem;
    transition: var(--transition);
}

.plumb-service-card:hover .plumb-service-icon {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.plumb-service-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.plumb-service-text {
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.plumb-service-link {
    color: var(--primary);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

[dir="rtl"] .plumb-service-link i {
    transform: scaleX(-1);
}

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

@media (max-width: 768px) {
    .plumb-about-grid { grid-template-columns: 1fr; }
}

.plumb-about-image {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
}

.plumb-about-image img {
    width: 100%;
    border-radius: 1.5rem;
}

.plumb-list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem 0;
}

.plumb-list li {
    position: relative;
    padding-inline-start: 2rem;
    margin-bottom: 1rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.plumb-list li::before {
    content: '\f058';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: var(--success);
    position: absolute;
    inset-inline-start: 0;
    top: 2px;
    font-size: 1.25rem;
}

.plumb-cta {
    background: var(--primary);
    color: white;
    padding: 5rem 0;
    text-align: center;
    border-radius: 2rem;
    margin: 4rem 2rem;
    position: relative;
    overflow: hidden;
}

.plumb-cta::after {
    content: '\f043';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    font-size: 20rem;
    opacity: 0.05;
    bottom: -5rem;
    inset-inline-end: 2rem;
    transform: rotate(-15deg);
}

.plumb-cta-title {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: white;
}

.plumb-cta p {
    font-size: 1.25rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.plumb-cta-btn {
    background: white;
    color: var(--primary);
    padding: 1rem 2.5rem;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 1.125rem;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: var(--transition);
}

.plumb-cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}