/* Prevent white flash on page load in dark mode */ html { background-color: #f9fafb; /* light mode bg */ } html.dark { background-color: #111827; /* dark mode bg */ } body { background-color: #f9fafb; min-height: 100vh; transition: background-color 0.3s ease; } html.dark body { background-color: #111827; } /* Theme Helper Classes - Consistent theming across entire site */ /* These classes automatically adapt to light/dark mode based on .dark class on */ /* Surface colors (cards, containers, backgrounds) */ .ui-surface { background-color: #ffffff; color: #111827; transition: background-color 0.3s ease, color 0.3s ease; } html.dark .ui-surface { background-color: #1f2937; color: #f9fafb; } .ui-surface-muted { background-color: #f9fafb; color: #111827; transition: background-color 0.3s ease, color 0.3s ease; } html.dark .ui-surface-muted { background-color: #111827; color: #f9fafb; } /* Text colors */ .ui-text { color: #111827; transition: color 0.3s ease; } html.dark .ui-text { color: #f9fafb; } .ui-text-muted { color: #6b7280; transition: color 0.3s ease; } html.dark .ui-text-muted { color: #9ca3af; } /* Policy Content Styling - For HTML content rendered from Firestore */ .policy-content { line-height: 1.75; } .policy-content h1, .policy-content h2, .policy-content h3, .policy-content h4, .policy-content h5, .policy-content h6 { font-weight: 700; margin-top: 1.5em; margin-bottom: 0.75em; color: #111827; } html.dark .policy-content h1, html.dark .policy-content h2, html.dark .policy-content h3, html.dark .policy-content h4, html.dark .policy-content h5, html.dark .policy-content h6 { color: #f9fafb; } .policy-content h1 { font-size: 2em; } .policy-content h2 { font-size: 1.5em; } .policy-content h3 { font-size: 1.25em; } .policy-content p { margin-bottom: 1em; } .policy-content ul, .policy-content ol { margin-bottom: 1em; padding-left: 1.5em; } .policy-content ul { list-style-type: disc; } .policy-content ol { list-style-type: decimal; } .policy-content li { margin-bottom: 0.5em; } .policy-content strong { font-weight: 700; } .policy-content a { color: #2563eb; text-decoration: underline; } .policy-content a:hover { color: #1d4ed8; } html.dark .policy-content a { color: #60a5fa; } html.dark .policy-content a:hover { color: #93c5fd; } .policy-content blockquote { border-left: 4px solid #e5e7eb; padding-left: 1em; margin-left: 0; margin-bottom: 1em; font-style: italic; } html.dark .policy-content blockquote { border-left-color: #4b5563; } .policy-content code { background-color: #f3f4f6; padding: 0.125em 0.25em; border-radius: 0.25rem; font-family: monospace; font-size: 0.875em; } html.dark .policy-content code { background-color: #374151; } .policy-content pre { background-color: #f3f4f6; padding: 1em; border-radius: 0.5rem; overflow-x: auto; margin-bottom: 1em; } html.dark .policy-content pre { background-color: #374151; } .policy-content pre code { background-color: transparent; padding: 0; } /* Prose class for better typography (if using Tailwind prose) */ .prose { max-width: 65ch; } .prose p { margin-bottom: 1.25em; } .prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 700; margin-top: 2em; margin-bottom: 1em; } .prose ul, .prose ol { margin-bottom: 1.25em; padding-left: 1.625em; } .prose li { margin-bottom: 0.5em; } html.dark .prose { color: #d1d5db; } html.dark .prose h1, html.dark .prose h2, html.dark .prose h3, html.dark .prose h4 { color: #f9fafb; } /* Border colors */ .ui-border { border-color: #e5e7eb; transition: border-color 0.3s ease; } html.dark .ui-border { border-color: #374151; } .ui-border-muted { border-color: #d1d5db; transition: border-color 0.3s ease; } html.dark .ui-border-muted { border-color: #4b5563; } /* Page background */ .ui-page { background-color: #f9fafb; transition: background-color 0.3s ease; } html.dark .ui-page { background-color: #111827; } /* Input/Form elements */ .ui-input { background-color: #ffffff; color: #111827; border-color: #d1d5db; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } html.dark .ui-input { background-color: #374151; color: #f9fafb; border-color: #4b5563; } .ui-input::placeholder { color: #9ca3af; } html.dark .ui-input::placeholder { color: #6b7280; } /* Card/Container */ .ui-card { background-color: #ffffff; border-color: #e5e7eb; transition: background-color 0.3s ease, border-color 0.3s ease; } html.dark .ui-card { background-color: #1f2937; border-color: #374151; } /* Hover states */ .ui-hover-bg:hover { background-color: #f9fafb; transition: background-color 0.2s ease; } html.dark .ui-hover-bg:hover { background-color: #374151; } /* Loading Spinner */ .spinner { border: 4px solid #f3f4f6; border-top: 4px solid #3b82f6; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; } .spinner-lg { width: 60px; height: 60px; border-width: 6px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Fade in animation */ .fade-in { animation: fadeIn 0.6s ease-in; } /* Skeleton Loader */ .skeleton { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: skeleton-loading 1.5s ease-in-out infinite; border-radius: 4px; } html.dark .skeleton { background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%); background-size: 200% 100%; } @keyframes skeleton-loading { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .skeleton-card { @apply bg-white dark:bg-gray-800 rounded-lg shadow-md p-4; } .skeleton-image { @apply w-full h-48 rounded-lg mb-4; } .skeleton-text { @apply h-4 rounded mb-2; } .skeleton-title { @apply h-6 rounded mb-3 w-3/4; } .skeleton-button { @apply h-10 rounded w-24; } /* Loading Overlay */ .loading-overlay { @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center; } .loading-spinner-container { @apply bg-white dark:bg-gray-800 rounded-lg p-8 shadow-xl flex flex-col items-center gap-4; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Premium Booking Form Animations */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } .premium-shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%); background-size: 1000px 100%; animation: shimmer 2s infinite; } .shadow-3xl { box-shadow: 0 35px 60px -12px rgba(0, 0, 0, 0.25); } /* Slide in animation */ .slide-in { animation: slideIn 0.5s ease-out; } @keyframes slideIn { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* Mobile menu animation - default hidden, opens with .open class */ .mobile-menu { max-height: 0 !important; overflow: hidden !important; opacity: 0 !important; display: none !important; visibility: hidden !important; transition: max-height 0.3s ease-out, opacity 0.3s ease-out, visibility 0.3s ease-out; } .mobile-menu.open { max-height: 1000px !important; opacity: 1 !important; display: block !important; visibility: visible !important; } /* Premium Animations for Bank Details */ .animate-fade-in { animation: fadeIn 0.6s ease-in; } .animate-slide-down { animation: slideDown 0.4s ease-out; } .animate-slide-in { animation: slideInRight 0.5s ease-out; } .animate-pulse-slow { animation: pulseSlow 2s ease-in-out infinite; } /* Premium VIP Animations */ @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes floatReverse { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(10px); } } @keyframes glow { 0%, 100% { box-shadow: 0 0 20px rgba(59, 130, 246, 0.3), 0 0 40px rgba(59, 130, 246, 0.2); } 50% { box-shadow: 0 0 30px rgba(59, 130, 246, 0.5), 0 0 60px rgba(59, 130, 246, 0.3); } } @keyframes shimmerPremium { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes scaleInBounce { 0% { opacity: 0; transform: scale(0.8) translateY(20px); } 60% { transform: scale(1.05) translateY(-5px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } @keyframes rotateGradient { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes zoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } } @keyframes slideUpFade { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes errorGlow { 0%, 100% { box-shadow: 0 0 20px rgba(239, 68, 68, 0.4), 0 0 40px rgba(239, 68, 68, 0.3), 0 0 60px rgba(236, 72, 153, 0.2); } 50% { box-shadow: 0 0 30px rgba(239, 68, 68, 0.6), 0 0 60px rgba(239, 68, 68, 0.4), 0 0 90px rgba(236, 72, 153, 0.3); } } @keyframes pulseError { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.05); } } @keyframes fadeOutScale { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } } .animate-float { animation: float 3s ease-in-out infinite; } .animate-float-reverse { animation: floatReverse 3s ease-in-out infinite; } .animate-glow { animation: glow 2s ease-in-out infinite; } .animate-shimmer-premium { background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100% ); background-size: 200% 100%; animation: shimmerPremium 3s infinite; } .animate-scale-in-bounce { animation: scaleInBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55); } .animate-fade-in-up { animation: fadeInUp 0.8s ease-out; } .animate-fade-in-down { animation: fadeInDown 0.8s ease-out; } .animate-zoom-in { animation: zoomIn 0.6s ease-out; } .animate-slide-up-fade { animation: slideUpFade 0.8s ease-out; } .animate-error-glow { animation: errorGlow 2s ease-in-out infinite; } .animate-pulse-error { animation: pulseError 2s ease-in-out infinite; } .animate-fade-out-scale { animation: fadeOutScale 0.4s ease-out forwards; } /* Premium Card Hover Effects */ .premium-card { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .premium-card::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; } .premium-card:hover::before { left: 100%; } .premium-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.1); } /* Premium Gradient Background Animation */ .premium-gradient-bg { background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab); background-size: 400% 400%; animation: rotateGradient 15s ease infinite; } .premium-gradient-bg-blue { background: linear-gradient(-45deg, #667eea, #764ba2, #f093fb, #4facfe); background-size: 400% 400%; animation: rotateGradient 15s ease infinite; } .premium-gradient-bg-teal { background: linear-gradient(-45deg, #11998e, #38ef7d, #f093fb, #4facfe); background-size: 400% 400%; animation: rotateGradient 15s ease infinite; } /* Stagger Animation Delays */ .animate-delay-100 { animation-delay: 0.1s; } .animate-delay-200 { animation-delay: 0.2s; } .animate-delay-300 { animation-delay: 0.3s; } .animate-delay-400 { animation-delay: 0.4s; } .animate-delay-500 { animation-delay: 0.5s; } .animate-delay-600 { animation-delay: 0.6s; } .animate-delay-700 { animation-delay: 0.7s; } .animate-delay-800 { animation-delay: 0.8s; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); max-height: 0; } to { opacity: 1; transform: translateY(0); max-height: 1000px; } } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } @keyframes pulseSlow { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.05); } } @keyframes slideOutRight { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } .animate-bounce-slow { animation: bounceSlow 2s ease-in-out infinite; } @keyframes bounceSlow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } .animate-count-up { animation: countUp 0.8s ease-out; } @keyframes countUp { from { opacity: 0; transform: translateY(10px) scale(0.8); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Star Rating Animation */ .rating-star { transition: transform 0.2s ease; } .rating-star:hover { transform: scale(1.1); } .rating-star i, .rating-star svg { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .rating-star.animate-bounce { animation: starBounce 0.4s ease; } @keyframes starBounce { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } .rating-star.animate-pulse-star { animation: starPulse 0.3s ease; } @keyframes starPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } } /* Login Success Animation Keyframes */ @keyframes scaleIn { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes fadeInScale { from { opacity: 0; transform: scale(0.5); } to { opacity: 1; transform: scale(1); } } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* Premium VIP Animations */ @keyframes slideInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } .animate-slide-up { animation: slideUp 0.6s ease-out forwards; opacity: 0; } .animate-slide-in-right { animation: slideInRight 0.6s ease-out forwards; opacity: 0; } .animate-fade-in { animation: fadeIn 0.8s ease-out forwards; opacity: 0; } .animate-pulse-slow { animation: pulseSlow 3s ease-in-out infinite; } /* Autocomplete Styles */ .autocomplete-suggestions { max-height: none; /* Show all suggestions without height limit */ overflow-y: visible; /* No scrolling - show all items */ z-index: 50; } .autocomplete-suggestion { border-bottom: 1px solid #e5e7eb; transition: background-color 0.2s; } .autocomplete-suggestion:last-child { border-bottom: none; } .autocomplete-suggestion:hover, .autocomplete-suggestion.bg-blue-50 { background-color: #eff6ff; } /* Filter Chips Styles */ .filter-chip { cursor: default; user-select: none; } .filter-chip-remove { cursor: pointer; transition: background-color 0.2s; } .filter-chip-remove:hover { background-color: rgba(0, 0, 0, 0.1); } /* Dark mode support for autocomplete and filter chips */ html.dark .autocomplete-suggestions { background-color: #1f2937; border-color: #374151; } html.dark .autocomplete-suggestion { border-color: #374151; color: #f3f4f6; } html.dark .autocomplete-suggestion:hover, html.dark .autocomplete-suggestion.bg-blue-50 { background-color: #1e3a8a; } html.dark .filter-chip { background-color: #374151; border-color: #4b5563; color: #f3f4f6; } /* Advanced Loading Screen */ .advanced-loader-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); backdrop-filter: blur(10px); z-index: 9999; display: flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; /* Safety: never block the UI longer than 3 seconds */ animation: loaderAutoFadeOut 0.25s ease 3s forwards; } @keyframes loaderAutoFadeOut { to { opacity: 0; visibility: hidden; pointer-events: none; } } .advanced-loader-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; padding: 3rem; max-width: 400px; width: 90%; } /* Simple Spinner */ .simple-spinner { width: 60px; height: 60px; border: 4px solid rgba(255, 255, 255, 0.2); border-top: 4px solid #3b82f6; border-radius: 50%; animation: spin 1s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Dark mode adjustments */ html.dark .advanced-loader-overlay { background: rgba(0, 0, 0, 0.9); } /* Force hide all old loading screen elements */ .advanced-loader-logo, .logo-circle, .logo-text, .logo-inner, .advanced-loader-message, .advanced-loader-dots, .dot, .water-container-wrapper, .water-container, .water-fill, .logo-fill-wrapper, .logo-image-container, .logo-base-image, .logo-fill-overlay, .logo-water-surface, .logo-water-wave, .water-progress-text, .premium-particle-container, .premium-particle, .premium-wave-container, .premium-wave, .logo-letter, .logo-progress-line-wrapper, .logo-progress-line, .logo-progress-line-fill, .advanced-loader-progress-container, .advanced-loader-progress-bar, .advanced-loader-progress-fill, .advanced-loader-progress-text { display: none !important; visibility: hidden !important; opacity: 0 !important; height: 0 !important; width: 0 !important; margin: 0 !important; padding: 0 !important; position: absolute !important; left: -9999px !important; top: -9999px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(100%) !important; } /* Header Link Gradient Hover Effect */ .header-link-gradient-hover { transition: all 0.3s ease; position: relative; } .header-link-gradient-hover:hover { background: linear-gradient(135deg, #9333ea 0%, #ec4899 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Dark mode support for gradient hover */ html.dark .header-link-gradient-hover:hover { background: linear-gradient(135deg, #a855f7 0%, #f472b6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Service Card Animations */ @keyframes doorOpenClose { 0% { transform: rotate(0deg); } 25% { transform: rotate(-90deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } @keyframes foodPreparePack { 0% { transform: scale(1) rotate(0deg); } 25% { transform: scale(1.2) rotate(-8deg); } 50% { transform: scale(0.9) rotate(8deg); } 75% { transform: scale(1.15) rotate(-5deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes carDrive { 0% { transform: translateX(0px); } 25% { transform: translateX(12px); } 50% { transform: translateX(0px); } 75% { transform: translateX(-12px); } 100% { transform: translateX(0px); } } /* Animation Classes */ .service-animation-door { display: flex; align-items: center; justify-content: flex-start; width: 100%; height: 100%; position: relative; } .service-animation-door i, .service-animation-door svg { animation: doorOpenClose 3s ease-in-out infinite; transform-origin: 0% 50%; display: block; position: absolute; left: 0; top: calc(50% - 20px); width: 40px; height: 40px; } .service-animation-food { display: inline-flex; align-items: center; justify-content: center; } .service-animation-food i, .service-animation-food svg { animation: foodPreparePack 2.5s ease-in-out infinite; transform-origin: center center; display: inline-block; } .service-animation-car { display: inline-flex; align-items: center; justify-content: center; } .service-animation-car i, .service-animation-car svg { animation: carDrive 2s ease-in-out infinite; display: inline-block; } /* Search Form Container with Gradient Border Outline - Only Border Visible */ .search-form-container { position: relative; border-radius: 36px; /* Container is completely transparent */ background: transparent; padding: 0; } /* Create gradient border using pseudo-element with CSS mask */ .search-form-container::before { content: ''; position: absolute; inset: 0; border-radius: 36px; padding: 3px; background: linear-gradient(to right, #9333ea, #a855f7, #ec4899); /* Mask technique: creates a "hole" in the middle, leaving only border */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; z-index: 0; } .search-form-inner { position: relative; z-index: 1; background: transparent; border-radius: 33px; width: 100%; height: 100%; /* Complete transparency - banner/video will show through */ background: transparent !important; background-color: transparent !important; background-image: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Premium Route Card Animations */ @keyframes slideDown { from { opacity: 0; max-height: 0; transform: translateY(-10px); } to { opacity: 1; max-height: 1000px; transform: translateY(0); } } .route-map-container { animation: slideDown 0.3s ease-out; } .route-map-container.hidden { display: none; } /* Premium card hover effects */ .premium-route-card { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .premium-route-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } /* Map container smooth transitions */ [id^="map-container-"] { transition: all 0.3s ease-in-out; } /* Line clamp utility */ .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Policy Content Styling (for dynamically loaded HTML) */ .policy-content h1, .policy-content h2, .policy-content h3, .policy-content h4, .policy-content h5, .policy-content h6 { @apply text-gray-900 dark:text-white font-bold mt-6 mb-3; } .policy-content h1 { @apply text-3xl; } .policy-content h2 { @apply text-2xl; } .policy-content h3 { @apply text-xl; } .policy-content p { @apply text-gray-700 dark:text-gray-300 mb-4 leading-relaxed; } .policy-content ul, .policy-content ol { @apply list-inside mb-4 pl-5; } .policy-content ul { @apply list-disc; } .policy-content ol { @apply list-decimal; } .policy-content li { @apply text-gray-700 dark:text-gray-300 mb-2; } .policy-content strong { @apply font-semibold text-gray-800 dark:text-gray-200; } .policy-content a { @apply text-blue-600 dark:text-blue-400 hover:underline; } .policy-content pre { @apply bg-gray-100 dark:bg-gray-700 p-4 rounded-lg overflow-x-auto text-sm font-mono text-gray-800 dark:text-gray-200 mb-4; } .policy-content code { @apply bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded text-sm font-mono text-gray-800 dark:text-gray-200; } .policy-content blockquote { @apply border-l-4 border-blue-500 pl-4 italic text-gray-600 dark:text-gray-400 mb-4; } /* Admin Content Management - Sidebar Navigation */ .section-nav-btn { @apply transition-all duration-200; } .section-nav-btn:hover { @apply bg-gray-50 dark:bg-gray-700/50 transform translate-x-1; } .section-nav-btn.active { @apply bg-blue-50 dark:bg-blue-900/30 border-l-4 border-blue-500 shadow-md; } .section-content { animation: fadeInSlide 0.3s ease-in-out; } @keyframes fadeInSlide { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: translateX(0); } } /* Driver Marker Pulse Animation for Real-time Tracking */ @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.2); opacity: 0.8; } } .driver-marker { animation: pulse 2s infinite; }