/* ProLanding Template - Custom Styles */

/* Prevent horizontal scroll on all elements */
* {
  max-width: 100vw;
  box-sizing: border-box;
}

/* Additional overflow protection */
body,
html {
  overflow-x: hidden;
}

/* Remove focus borders on mobile for nav and theme buttons */
@media (max-width: 768px) {
  #mobile-menu-btn:focus:not(:hover),
  #mobile-menu-btn:active:not(:hover),
  #theme-toggle-mobile:focus:not(:hover),
  #theme-toggle-mobile:active:not(:hover) {
    outline: none !important;
    border: 1px solid rgb(209 213 219) !important; /* Keep original border color */
  }

  .dark #mobile-menu-btn:focus:not(:hover),
  .dark #mobile-menu-btn:active:not(:hover),
  .dark #theme-toggle-mobile:focus:not(:hover),
  .dark #theme-toggle-mobile:active:not(:hover) {
    border: 1px solid rgb(75 85 99) !important; /* Keep original dark border color */
  }

  /* Ensure hover states work properly */
  #mobile-menu-btn:hover,
  #theme-toggle-mobile:hover {
    background-color: rgb(243 244 246) !important;
  }

  .dark #mobile-menu-btn:hover,
  .dark #theme-toggle-mobile:hover {
    background-color: rgb(31 41 55) !important;
  }
}

/* Prevent layout shifts and visual artifacts */
#theme-toggle,
#theme-toggle-mobile {
  /* Ensure consistent sizing to prevent layout shifts */
  min-width: fit-content;
  white-space: nowrap;
}

/* Prevent white bars/artifacts on hover and animations */
button:hover,
.feature-card:hover,
[data-aos] {
  /* Prevent background bleeding and artifacts */
  isolation: isolate;
  transform-style: preserve-3d;
}

/* Fix for AOS animation artifacts */
[data-aos="slide-down"] {
  /* Prevent overflow and white bars during animation */
  overflow: hidden;
  will-change: transform, opacity;
}

/* Ensure smooth hover transitions without artifacts */
.transition-colors,
.transition-shadow,
.transition-all {
  /* Hardware acceleration for smooth transitions */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Navigation specific fixes to prevent white bars */
nav,
nav * {
  /* Prevent any background bleeding */
  background-clip: padding-box;
  position: relative;
}

/* Theme toggle specific fixes */
#theme-toggle {
  /* Prevent layout shift on hover */
  transform: translateZ(0);
  will-change: background-color, color;
  /* Ensure no white space appears */
  background-clip: padding-box;
  outline: none;
}

#theme-toggle:hover {
  /* Force proper background rendering */
  background-color: rgb(243 244 246) !important;
}

.dark #theme-toggle:hover {
  background-color: rgb(31 41 55) !important;
}

/* Prevent white bar artifacts around buttons */
button {
  /* Ensure proper rendering */
  position: relative;
  isolation: isolate;
  background-clip: padding-box;
}

/* Fix for navigation flex container */
.hidden.md\\:flex.items-center.space-x-4 {
  /* Prevent any layout shifts */
  min-height: fit-content;
  align-items: center;
}

/* AOS animation container fixes */
[data-aos] {
  /* Prevent white bars during animations */
  background-clip: padding-box;
  position: relative;
}

/* Dashboard specific fixes */
.bg-white.dark\\:bg-gray-800 {
  /* Ensure clean background rendering */
  background-clip: padding-box;
  isolation: isolate;
}

/* CRITICAL: Fix for white bar near Get Started button */
.hidden.md\\:flex.items-center.space-x-4 {
  /* Remove any potential margin/padding issues */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  /* Ensure proper spacing only through space-x-4 */
  gap: 0 !important;
}

.hidden.md\\:flex.items-center.space-x-4 > * {
  /* Ensure no background bleeding on children */
  background-clip: padding-box;
  position: relative;
  z-index: 1;
}

/* Fix theme toggle specifically */
#theme-toggle {
  /* Reset any problematic styles */
  margin: 0 !important;
  /* Ensure proper sizing */
  flex-shrink: 0;
  /* Prevent background issues */
  background-clip: border-box !important;
}

/* Navigation container fixes */
.nav-container,
.nav-inner,
.nav-content {
  background-clip: padding-box !important;
  position: relative;
  isolation: isolate;
}

/* Additional fix for the specific layout issue */
.space-x-4 > * + * {
  /* Override any margin issues */
  margin-left: 1rem !important;
}

/* Comprehensive white bar prevention */
* {
  /* Prevent any background bleed */
  background-clip: padding-box;
}

button:hover {
  /* Force clean hover transitions */
  background-clip: padding-box !important;
  transform: translateZ(0) !important;
}

/* Smoo/* Animation classes disabled for better readability */
/*
.animate-on-scroll {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.animate-left {
  opacity: 0;
  animation: fadeInLeft 0.8s ease forwards;
}

.animate-right {
  opacity: 0;
  animation: fadeInRight 0.8s ease forwards;
}
*/
or the entire page */ html {
  scroll-behavior: smooth;
}

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

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

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Float animation disabled to prevent icon movement */
/*
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}
*/

/* Apply animations to elements when they come into view */
.animate-on-scroll {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-left {
  opacity: 0;
  animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-right {
  opacity: 0;
  animation: fadeInRight 0.8s ease-out forwards;
}

/* Floating animation for hero icons - DISABLED 
.float-animation {
  animation: float 3s ease-in-out infinite;
}
*/

/* Enhanced hover effects for cards */
.feature-card {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.feature-card:hover {
  transform: translateY(-5px);
  border-color: #e5e7eb;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

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

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

/* Enhanced navigation styles */
.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 50%;
  background-color: #2563eb;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

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

/* Custom button styles */
.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

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

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

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}

/* Enhanced form styles */
.form-input {
  transition: all 0.3s ease;
  border: 2px solid #e5e7eb;
}

.form-input:focus {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(37, 99, 235, 0.1);
}

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

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

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Mobile menu animation */
.mobile-menu-enter {
  animation: slideDown 0.3s ease-out;
}

.mobile-menu-exit {
  animation: slideUp 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* Loading animation for form submission */
.loading {
  position: relative;
  pointer-events: none;
}

.loading::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
}

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

/* Success message styles */
.success-message {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  animation: fadeInUp 0.5s ease-out;
}

.error-message {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  animation: fadeInUp 0.5s ease-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.5rem;
    line-height: 1.2;
  }

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

  .feature-card,
  .service-card {
    margin-bottom: 1rem;
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  .container {
    width: 100% !important;
    max-width: none !important;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .feature-card,
  .service-card {
    border: 2px solid #000;
  }

  .btn-primary {
    border: 2px solid #000;
  }
}

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

  html {
    scroll-behavior: auto;
  }
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles here if needed */
}

/* Custom utilities */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.backdrop-blur {
  backdrop-filter: blur(10px);
}

.gradient-text {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Focus styles for accessibility */
button:focus,
a:focus,
input:focus,
textarea:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: #2563eb;
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 1000;
}

.skip-link:focus {
  top: 6px;
}

/* Dark Mode Enhancements */
.dark .feature-card {
  background-color: #1f2937;
  border-color: #374151;
}

.dark .service-card {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.dark .feature-card:hover,
.dark .service-card:hover {
  border-color: #4b5563;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3),
    0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Theme transition for smooth color changes */
* {
  transition: background-color 0.3s ease, border-color 0.3s ease,
    color 0.3s ease;
}

/* Enhanced backdrop blur with Safari support */
.backdrop-blur {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Dark mode form styles */
.dark .form-input {
  background-color: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

.dark .form-input:focus {
  border-color: #2563eb;
  background-color: #4b5563;
}

/* Dark mode navigation improvements */
.dark nav {
  border-color: #374151;
}

/* Dark mode scroll to top button */
.dark .scroll-to-top {
  background-color: #2563eb;
}

.dark .scroll-to-top:hover {
  background-color: #1d4ed8;
}

/* Theme toggle button styles */
#theme-toggle,
#theme-toggle-mobile {
  transition: all 0.3s ease;
}

#theme-toggle:hover,
#theme-toggle-mobile:hover {
  transform: scale(1.1);
}

/* Dark mode improvements for better contrast */
.dark .text-gray-600 {
  color: #d1d5db;
}

.dark .text-gray-700 {
  color: #f3f4f6;
}

.dark .bg-gray-50 {
  background-color: #111827;
}

/* Dark mode gradient adjustments */
.dark .bg-gradient-to-br.from-blue-50.to-indigo-100 {
  background: linear-gradient(to bottom right, #1e3a8a, #312e81);
}

.dark .bg-gradient-to-br.from-green-50.to-emerald-100 {
  background: linear-gradient(to bottom right, #064e3b, #022c22);
}

.dark .bg-gradient-to-br.from-purple-50.to-violet-100 {
  background: linear-gradient(to bottom right, #581c87, #3c1361);
}

/* Enhanced dark mode support for contact section */
.dark #contact {
  background-color: #111827;
}

/* Improved dark mode for footer */
.dark footer {
  background-color: #030712;
}

/* ========== AGGRESSIVE WHITE BAR ELIMINATION ========== */
/* These rules target the persistent white bar issue */

/* Universal background clip and isolation */
*,
*::before,
*::after {
  background-clip: padding-box !important;
  isolation: isolate !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  contain: layout style paint !important;
}

/* Force hardware acceleration on all elements */
html {
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  -webkit-perspective: 1000px !important;
  perspective: 1000px !important;
}

/* Navigation absolute positioning fix */
nav {
  contain: layout style !important;
  will-change: transform !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Theme toggle absolute isolation */
#theme-toggle {
  contain: layout style paint !important;
  will-change: background-color, transform !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  position: relative !important;
  z-index: 10 !important;
  background-clip: border-box !important;
  border: none !important;
  outline: none !important;
}

/* Hover state forcing */
#theme-toggle:hover {
  -webkit-transform: translate3d(0, 0, 0) scale(1) !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  background-color: rgb(243 244 246) !important;
  isolation: isolate !important;
}

.dark #theme-toggle:hover {
  background-color: rgb(31 41 55) !important;
}

/* Business Analytics card isolation */
.bg-white.dark\\:bg-gray-800 {
  contain: layout style paint !important;
  will-change: transform !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  isolation: isolate !important;
  position: relative !important;
  z-index: 1 !important;
}

/* AOS animation container forcing */
[data-aos] {
  contain: layout style !important;
  will-change: transform, opacity !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  isolation: isolate !important;
  background-clip: border-box !important;
}

/* Get Started button isolation */
.bg-primary {
  contain: layout style paint !important;
  will-change: background-color, transform !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  isolation: isolate !important;
  position: relative !important;
  z-index: 5 !important;
}

/* Force repaint on hover */
button:hover,
a:hover {
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  will-change: background-color, color, transform !important;
  contain: layout style paint !important;
}

/* Navigation container forcing */
.nav-container,
.nav-inner,
.nav-content {
  contain: layout style !important;
  will-change: transform !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  isolation: isolate !important;
  background-clip: border-box !important;
}

/* Flexbox container forcing */
.hidden.md\\:flex {
  contain: layout style !important;
  will-change: transform !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  isolation: isolate !important;
}

/* Space utility class forcing */
.space-x-4 > * + * {
  margin-left: 1rem !important;
  contain: layout style !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Browser-specific fixes */
@supports (-webkit-appearance: none) {
  /* WebKit/Blink specific fixes */
  * {
    -webkit-backface-visibility: hidden !important;
    -webkit-transform: translateZ(0) !important;
    -webkit-perspective: 1000px !important;
  }
}

@supports (contain: layout) {
  /* Modern browser containment */
  nav,
  button,
  [data-aos],
  .bg-primary {
    contain: layout style paint !important;
  }
}

/* CSS Grid and Flexbox forcing */
.grid,
.flex {
  contain: layout !important;
  will-change: transform !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
}

/* Transition overrides to prevent artifacts */
.transition-colors,
.transition-all,
.transition-shadow {
  will-change: background-color, color, box-shadow, transform !important;
  contain: layout style !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  isolation: isolate !important;
}

/* Force clean rendering on body */
body {
  contain: layout style !important;
  will-change: transform !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;
  isolation: isolate !important;
}

/* ========== TARGETED WHITE BAR FIXES ========== */
/* Specific fixes for reported problem areas */

/* Target the exact theme toggle button area */
#theme-toggle {
  /* Force complete isolation */
  position: relative !important;
  z-index: 999 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  overflow: hidden !important;
}

#theme-toggle:hover {
  /* Completely override hover state */
  background-color: rgb(243 244 246) !important;
  color: rgb(37 99 235) !important;
  border: none !important;
  outline: none !important;
  transform: none !important;
}

.dark #theme-toggle:hover {
  background-color: rgb(31 41 55) !important;
  color: rgb(37 99 235) !important;
}

/* Target the Business Analytics dashboard specifically */
h4:contains("Business Analytics"),
.text-lg.font-semibold.text-gray-900.dark\\:text-white {
  isolation: isolate !important;
  position: relative !important;
  z-index: 10 !important;
  background-clip: border-box !important;
}

/* Parent container of Business Analytics */
.flex.items-center.space-x-3 {
  isolation: isolate !important;
  contain: layout style paint !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Dashboard card container */
.bg-white.dark\\:bg-gray-800.p-4.sm\\:p-6.rounded-2xl {
  isolation: isolate !important;
  contain: layout style paint !important;
  position: relative !important;
  z-index: 5 !important;
  overflow: hidden !important;
  background-clip: border-box !important;
}

/* Navigation right section (theme toggle + Get Started) */
.hidden.md\\:flex.items-center.space-x-4 {
  isolation: isolate !important;
  contain: layout !important;
  position: relative !important;
  z-index: 50 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Get Started button specific */
a[href="#contact"].bg-primary {
  isolation: isolate !important;
  position: relative !important;
  z-index: 60 !important;
  contain: layout style paint !important;
  overflow: hidden !important;
}

/* Force repaint trigger on problem elements */
#theme-toggle,
.bg-white.dark\\:bg-gray-800,
.bg-primary {
  /* Force browser repaint */
  outline: 1px solid transparent !important;
  outline-offset: -1px !important;
}