/* Additional CSS for browser compatibility */

/* Ensure flexbox works in older browsers */
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.flex-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.justify-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* Ensure grid works in older browsers with fallbacks */
@supports not (display: grid) {
  .services-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .services-grid > * {
    flex: 1 1 300px;
    margin: 1rem;
  }
  
  .footer-grid {
    display: flex;
    flex-wrap: wrap;
  }
  
  .footer-grid > * {
    flex: 1 1 250px;
    margin: 1rem;
  }
}

/* Ensure gradients work in older browsers */
.bg-gradient-hero {
  background: var(--color-navy);
  background: -webkit-linear-gradient(135deg, var(--color-navy) 0%, var(--color-purple) 100%);
  background: -moz-linear-gradient(135deg, var(--color-navy) 0%, var(--color-purple) 100%);
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-purple) 100%);
}

.bg-gradient-tech {
  background: var(--color-deep-purple);
  background: -webkit-linear-gradient(135deg, var(--color-deep-purple) 0%, var(--color-navy) 100%);
  background: -moz-linear-gradient(135deg, var(--color-deep-purple) 0%, var(--color-navy) 100%);
  background: linear-gradient(135deg, var(--color-deep-purple) 0%, var(--color-navy) 100%);
}

/* Ensure backdrop-filter works with fallbacks */
@supports not (backdrop-filter: blur(10px)) {
  .navbar {
    background-color: rgba(10, 10, 26, 0.95);
  }
  
  .glass-card {
    background: rgba(18, 18, 18, 0.9);
  }
}

/* Fix for older Safari versions */
.button {
  -webkit-appearance: none;
  appearance: none;
}

/* Fix for IE11 */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .container-custom {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .hero {
    height: 100vh;
    position: relative;
  }
  
  .hero-content {
    position: relative;
    z-index: 2;
  }
  
  .service-card {
    display: block;
    position: relative;
  }
}

/* Ensure form elements are consistent across browsers */
input, textarea, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Fix for Firefox focus styles */
::-moz-focus-inner {
  border: 0;
}

/* Ensure animations work in older browsers */
@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }
}

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

.animate-fadeIn {
  -webkit-animation: fadeIn 0.5s ease forwards;
  animation: fadeIn 0.5s ease forwards;
}

/* Fix for Edge */
@supports (-ms-ime-align: auto) {
  .hero-3d-element {
    right: 0;
    width: 50%;
    height: 100%;
  }
}

/* Ensure SVG compatibility */
svg {
  width: 100%;
  height: auto;
}

/* Fix for older mobile browsers */
@media screen and (max-width: 480px) {
  html {
    -webkit-text-size-adjust: 100%;
  }
}

/* Ensure CSS variables work in older browsers */
@supports not (--color-teal: #00e6b8) {
  :root {
    /* Fallback colors for browsers that don't support CSS variables */
  }
  
  body {
    color: #f8f9fa;
    background-color: #0a0a1a;
  }
  
  .button-primary {
    background-color: #00e6b8;
    color: #0a0a1a;
  }
  
  .button-secondary {
    border-color: #00e6b8;
    color: #f8f9fa;
  }
  
  .service-icon {
    color: #00e6b8;
  }
}

/* Fix for browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
  .navbar {
    background-color: rgba(10, 10, 26, 0.95);
  }
  
  .glass-card {
    background-color: rgba(18, 18, 18, 0.9);
  }
  
  .contact-form-container {
    background-color: rgba(26, 26, 46, 0.9);
  }
}

/* Fix for browsers that don't support CSS grid */
@supports not (display: grid) {
  .services-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .service-card {
    flex: 0 0 300px;
    margin: 1rem;
  }
}

/* Ensure smooth scrolling works in all browsers */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}