/* ===== CROSS-BROWSER COMPATIBILITY FIXES ===== */
/* Browsers: Chrome, Firefox, Safari, Edge, Opera, Brave, Samsung Internet, UC Browser */

/* ─── backdrop-filter: Safari needs -webkit- prefix ─── */
.header.scrolled,
.mobile-overlay,
.chatbot-window,
.process-card,
.service-card,
.team-card,
.why-card,
.blog-card,
.portfolio-item,
.testimonial-card,
.job-item,
.cookie-consent {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}

/* Fallback for browsers without backdrop-filter (IE, old Edge) */
@supports not (backdrop-filter: blur(1px)) {
  .header.scrolled {
    background: rgba(12,5,32,0.98);
  }
  .mobile-overlay {
    background: rgba(0,0,0,0.7);
  }
  .chatbot-window {
    background: rgba(255,255,255,0.98);
  }
}

/* ─── Gradient text fallback ─── */
.gradient-text,
.section-title h2 span,
.hero-content h1 span,
.hero-brand-tagline,
.hero-brand-tagline2,
.text-gradient {
  background: var(--gradient-main);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@supports not (background-clip: text) {
  .gradient-text,
  .section-title h2 span,
  .hero-content h1 span,
  .hero-brand-tagline,
  .hero-brand-tagline2,
  .text-gradient {
    -webkit-text-fill-color: var(--primary);
    color: var(--primary);
  }
}

/* ─── CSS Variables fallback for IE11 ─── */
:root {
  --primary: #5B3CC4;
  --primary-dark: #4A2EA3;
  --primary-light: #7B5ED4;
  --blue: #2D8CFF;
  --cyan: #18D4FF;
  --dark: #222;
  --darker: #111;
  --light: #F7F7F7;
  --white: #FFFFFF;
  --gray: #6c757d;
}

/* ─── object-fit fallback for IE ─── */
.blog-card-image img,
.team-card-photo img,
.portfolio-item img,
.about-image img,
.service-hero-image img,
.gallery-item img {
  object-fit: cover;
}

@supports not (object-fit: cover) {
  .blog-card-image img,
  .team-card-photo img,
  .portfolio-item img,
  .about-image img,
  .service-hero-image img,
  .gallery-item img {
    height: auto;
    min-height: 100%;
    width: 100%;
  }
}

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

/* ─── Flex gap fallback for Safari < 14.1 ─── */
.nav-menu,
.footer-social,
.footer-links li a,
.service-features-list li,
.tag-list,
.form-row,
.hero-buttons,
.hero-stats,
.breadcrumb,
.blog-card-meta,
.job-meta,
.contact-detail,
.cookie-buttons,
.testimonial-controls,
.chatbot-footer {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

.nav-menu > li > a,
.dropdown-menu li a,
.btn,
.footer-contact-item {
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
}

/* ─── Grid fallback for very old browsers ─── */
@supports not (display: grid) {
  .services-grid,
  .industries-grid,
  .portfolio-grid,
  .blog-grid,
  .team-grid,
  .why-grid,
  .process-steps,
  .counters-grid,
  .footer-grid,
  .sitemap-grid,
  .contact-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  .services-grid > *,
  .industries-grid > *,
  .portfolio-grid > *,
  .blog-grid > *,
  .team-grid > *,
  .why-grid > *,
  .process-steps > *,
  .counters-grid > *,
  .footer-grid > *,
  .sitemap-grid > *,
  .contact-grid > * {
    width: 100%;
    max-width: 400px;
    margin: 10px auto;
  }
}

/* ─── SVG animation fix for older browsers ─── */
.hero-icon-item {
  -webkit-animation: iconOrbit 40s linear infinite;
  animation: iconOrbit 40s linear infinite;
}

@-webkit-keyframes iconOrbit {
  0%   { -webkit-transform: rotate(0deg)   translateY(-165px) rotate(0deg); transform: rotate(0deg)   translateY(-165px) rotate(0deg); }
  12.5% { -webkit-transform: rotate(45deg)  translateY(-165px) rotate(-45deg); transform: rotate(45deg)  translateY(-165px) rotate(-45deg); }
  25%  { -webkit-transform: rotate(90deg)  translateY(-165px) rotate(-90deg); transform: rotate(90deg)  translateY(-165px) rotate(-90deg); }
  37.5% { -webkit-transform: rotate(135deg) translateY(-165px) rotate(-135deg); transform: rotate(135deg) translateY(-165px) rotate(-135deg); }
  50%  { -webkit-transform: rotate(180deg) translateY(-165px) rotate(-180deg); transform: rotate(180deg) translateY(-165px) rotate(-180deg); }
  62.5% { -webkit-transform: rotate(225deg) translateY(-165px) rotate(-225deg); transform: rotate(225deg) translateY(-165px) rotate(-225deg); }
  75%  { -webkit-transform: rotate(270deg) translateY(-165px) rotate(-270deg); transform: rotate(270deg) translateY(-165px) rotate(-270deg); }
  87.5% { -webkit-transform: rotate(315deg) translateY(-165px) rotate(-315deg); transform: rotate(315deg) translateY(-165px) rotate(-315deg); }
  100% { -webkit-transform: rotate(360deg) translateY(-165px) rotate(-360deg); transform: rotate(360deg) translateY(-165px) rotate(-360deg); }
}

.hero-icon-item:nth-child(1) { -webkit-animation-delay: 0s; animation-delay: 0s; }
.hero-icon-item:nth-child(2) { -webkit-animation-delay: -5s; animation-delay: -5s; }
.hero-icon-item:nth-child(3) { -webkit-animation-delay: -10s; animation-delay: -10s; }
.hero-icon-item:nth-child(4) { -webkit-animation-delay: -15s; animation-delay: -15s; }
.hero-icon-item:nth-child(5) { -webkit-animation-delay: -20s; animation-delay: -20s; }
.hero-icon-item:nth-child(6) { -webkit-animation-delay: -25s; animation-delay: -25s; }
.hero-icon-item:nth-child(7) { -webkit-animation-delay: -30s; animation-delay: -30s; }
.hero-icon-item:nth-child(8) { -webkit-animation-delay: -35s; animation-delay: -35s; }

/* ─── Animation keyframes with vendor prefixes ─── */
@-webkit-keyframes trailFade {
  0% { opacity: 0.8; -webkit-transform: translate(-50%, -50%) scale(1); transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; -webkit-transform: translate(-50%, -50%) scale(0.2); transform: translate(-50%, -50%) scale(0.2); }
}

@-webkit-keyframes pulse-ring {
  0% { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0.7; }
  50% { -webkit-transform: scale(1.05); transform: scale(1.05); opacity: 1; }
  100% { -webkit-transform: scale(0.95); transform: scale(0.95); opacity: 0.7; }
}

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

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

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

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

@-webkit-keyframes badgePulse {
  0%, 100% { -webkit-transform: scale(1); transform: scale(1); }
  50% { -webkit-transform: scale(1.1); transform: scale(1.1); }
}

@-webkit-keyframes loadingBar {
  0% { left: -50%; }
  100% { left: 150%; }
}

/* ─── Smooth scrolling for older browsers ─── */
@media screen and (prefers-reduced-motion: reduce) {
  * {
    -webkit-animation-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── Safari/iOS input fix ─── */
input, textarea, select, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 8px;
}

input[type="search"] {
  -webkit-appearance: textfield;
  appearance: textfield;
}

/* ─── iOS tap highlight fix ─── */
* {
  -webkit-tap-highlight-color: rgba(91, 60, 196, 0.15);
}

/* ─── Firefox scrollbar fix ─── */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(91,60,196,0.3) transparent;
}

/* ─── Safari/iOS safe area for fixed elements ─── */
.whatsapp-float,
.chatbot-toggle,
.back-to-top {
  bottom: max(20px, env(safe-area-inset-bottom, 20px));
}

.chatbot-window {
  bottom: max(145px, calc(env(safe-area-inset-bottom, 0px) + 145px));
}

/* ─── IE11 hidden input close button ─── */
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

/* ─── Image rendering for all browsers ─── */
img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: bicubic;
}

/* ─── Button tap highlight on mobile ─── */
button, a, .hamburger, .suggestion-chip {
  -webkit-touch-callout: none;
}

/* ─── Prevent font boosting on mobile ─── */
body {
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ─── 3D transform fallback ─── */
.hero-circle,
.hero-icon-item,
.team-card:hover,
.service-card:hover,
.btn:hover {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}