/* Custom styles for Website For Less *//* Fix for mobile horizontal overflow */html{overflow-x: hidden; max-width: 100%;}body{overflow-x: hidden; max-width: 100vw; position: relative; padding-top: 80px !important; /* Fixed padding for navigation bar */}*{box-sizing: border-box;}/* Ensure hero sections don't cause horizontal overflow */.hero-section{overflow: hidden; position: relative; width: 100%; max-width: 100vw;}/* Prevent Tailwind containers from causing overflow */.container{max-width: 100%; overflow-x: hidden; width: 100%;}/* Additional overflow prevention for all major containers */section, div, main, article, aside, header, footer{max-width: 100vw;}/* Exception for navigation - ensure mobile menu button is always visible */nav{max-width: 100vw; /* Removed position: relative to prevent conflicts with fixed positioning */}nav .container{position: relative; display: flex; align-items: center;}/* Add more space between logo and navigation items */nav .flex.justify-between{justify-content: space-between; width: 100%;}nav .flex.items-center:first-child{margin-right: 2rem; /* Add space after logo */}nav .hidden.md\:flex{margin-left: auto; /* Push navigation items to the right */ gap: 1.5rem; /* Increase space between nav items */}/* Enhanced Navigation Styling - Fixed for all devices */#main-nav{background-color: white !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; position: fixed !important; /* Fixed position */ top: 0 !important; left: 0 !important; right: 0 !important; z-index: 10000 !important; /* Higher z-index for navigation */ width: 100% !important; transform: none !important; /* Prevent any transforms that could hide the nav */ visibility: visible !important; opacity: 1 !important; display: block !important; transition: transform 0.3s ease !important; /* Smooth transition for scroll behavior */ will-change: transform; /* Optimize for animations */ overflow: visible !important; /* Allow dropdown to extend beyond nav boundaries */}/* Ensure dropdown container has proper positioning */#main-nav .relative{position: relative !important; z-index: 10001 !important; /* Even higher for dropdown container */ overflow: visible !important; /* Allow dropdown to extend beyond container */}/* Ensure navigation container allows dropdown overflow */#main-nav .container{overflow: visible !important;}/* Ensure main navigation flex containers allow overflow */#main-nav .flex{overflow: visible !important;}/* Fix for dropdown menu to appear above all content */.dropdown-menu,#main-nav .dropdown-menu.dropdown-active{z-index: 99999 !important; /* Maximum z-index for dropdown */ position: absolute !important; top: 100% !important;}/* Add class for scroll behavior */#main-nav.nav-scrolled{box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;}/* Ensure navigation is always visible when scrolling */html.scrolling #main-nav{transform: translateY(0) !important;}/* Navigation padding handled above in main body rule *//* Ensure mobile menu button is always visible and properly styled */#menu-btn{z-index: 1001 !important; position: relative !important; align-items: center !important; justify-content: center !important; min-width: 44px !important; min-height: 44px !important; background-color: transparent !important; border: none !important; cursor: pointer !important;}/* Mobile menu button visibility fix */@media (max-width: 767px){#menu-btn{visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;}.md\\:hidden{}}/* Mobile menu styling improvements */#mobile-menu{background-color: white !important; box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important; position: absolute !important; top: 100% !important; left: 0 !important; right: 0 !important; z-index: 999 !important; width: 100% !important;}/* When mobile menu is visible */#mobile-menu.visible{display: block !important;}/* Navigation link styling */.nav-link{position: relative; transition: all 0.3s ease;}.nav-link:hover{transform: translateY(-1px);}/* Specific fix for moving background overflow */.moving-background{max-width: 100vw !important; overflow: hidden !important;}/* Footer logo responsive sizing */@media (max-width: 640px){footer .flex.items-center img{height: 2rem !important; /* h-8 instead of h-12 */ width: auto !important; min-width: 32px !important; max-width: 32px !important;}footer .flex.items-center{gap: 0.5rem !important; /* Smaller gap on mobile */}footer .flex.items-center h3{font-size: 1rem !important; /* Smaller text on mobile */ line-height: 1.2 !important; white-space: nowrap !important;}}/* Color Variables */:root{--primary-color: #0d8b9c; /* Teal/turquoise from the logo */ --secondary-color: #0a3b5c; /* Dark navy blue from the logo text */ --accent-color: #e6f7ff; /* Light blue from the logo background */ --text-light: #ffffff; --text-dark: #333333; --bg-light: #f8f9fa; --bg-dark: #0a3b5c;}/* Fix for footer - using stronger selectors to override any conflicts */body > footer{display: block !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; height: auto !important; min-height: 200px !important; z-index: 50 !important; background-color: #0a3b5c !important; position: relative !important;}body > footer > .container{display: grid !important; visibility: visible !important; opacity: 1 !important;}body > footer .grid{display: grid !important; visibility: visible !important; opacity: 1 !important; gap: 1rem !important;}body > footer .bg-opacity-10{background-color: rgba(255, 255, 255, 0.1) !important; visibility: visible !important; opacity: 1 !important; display: block !important; padding: 0.75rem !important;}body > footer p,body > footer h3,body > footer h4,body > footer a,body > footer div,body > footer i{color: white !important; visibility: visible !important; opacity: 1 !important;}/* Dropdown menu styles */.dropdown-active{display: block !important;}/* Chevron rotation for dropdown */.rotate-180{transform: rotate(180deg);}/* Fixed dropdown menu styling with higher z-index */.dropdown-menu{display: none; z-index: 9999; /* Much higher z-index to ensure it appears above ALL content */ position: absolute; top: 100%; left: 0; min-width: 200px; background-color: white; border-radius: 0.375rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); border: 1px solid rgba(0, 0, 0, 0.1); overflow: hidden; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease;}.dropdown-menu.dropdown-active{display: block !important; opacity: 1 !important; visibility: visible !important; animation: fadeIn 0.2s ease-out;}/* Ensure dropdown is visible when active */.industries-dropdown-btn:focus + .dropdown-menu,.industries-dropdown-btn:active + .dropdown-menu{display: block !important; opacity: 1 !important; visibility: visible !important;}@keyframes fadeIn{from{opacity: 0; transform: translateY(-10px);}to{opacity: 1; transform: translateY(0);}}/* Improve dropdown menu items */.dropdown-menu a{padding: 0.75rem 1rem; transition: all 0.2s ease; display: block;}.dropdown-menu a:hover{background-color: rgba(42, 127, 131, 0.1); color: #2A7F83;}/* Hero section with moving background */.hero-section{position: relative; overflow: hidden;}/* Moving background styling */.moving-background{position: absolute; top: -20px; /* Extra space for movement */ left: -20px; /* Extra space for movement */ width: calc(100% + 40px); /* Extra space for movement */ height: calc(100% + 40px); /* Extra space for movement */ background-image: url('https://page.gensparksite.com/v1/base64_upload/6b0fa0934b4f5682f76defa26a5f633a'); /* AI automation themed background image */ background-size: cover; background-position: center; z-index: -1; animation: backgroundMove 40s ease-in-out infinite alternate;}/* Background animation - more subtle for detailed image */@keyframes backgroundMove{0%{transform: translate(0, 0) scale(1.02);}50%{transform: translate(-5px, -5px) scale(1.05);}100%{transform: translate(5px, 5px) scale(1.02);}}/* Background overlay for text readability */.background-overlay{position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(10, 59, 92, 0.7) 0%, rgba(13, 139, 156, 0.6) 50%, rgba(10, 59, 92, 0.8) 100%); /* Enhanced gradient overlay for AI background */ z-index: 0;}/* Special styling for wellness page */.wellness-hero .background-overlay{background: linear-gradient(135deg, rgba(10, 59, 92, 0.6) 0%, rgba(13, 139, 156, 0.5) 50%, rgba(10, 59, 92, 0.7) 100%); /* Enhanced gradient overlay for healthcare background */}/* Hero headline and subheadline styles */.hero-headline{text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 16px rgba(10, 59, 92, 0.6); color: white; font-weight: bold; position: relative;}.hero-subheadline{color: #F7FAFC; text-shadow: 2px 2px 6px rgba(0,0,0,0.7), 0 0 12px rgba(10, 59, 92, 0.5); position: relative;}/* Ensure hero content is above the background */#home .container{position: relative; z-index: 10;}/* CTA Button styles */.primary-cta{background-color: #2A7F83; /* Updated teal color */ color: white; border: 2px solid #2A7F83; border-radius: 25px; padding: 15px 30px; transition: all 0.3s ease; position: relative; font-weight: bold; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(42, 127, 131, 0.4);}.primary-cta:hover{background-color: #236e72; /* Slightly darker than primary color */ border-color: #236e72; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25);}.primary-cta:focus{outline: none; box-shadow: 0 0 0 3px rgba(42, 127, 131, 0.5);}/* Hero section secondary CTA - white styling to match hero theme */.hero-section .secondary-cta{background-color: transparent !important; color: white !important; border: 2px solid white !important; border-radius: 25px; padding: 15px 30px !important; /* Match primary button padding */ transition: all 0.3s ease; position: relative; font-weight: bold; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.2); font-size: 1rem; /* Match primary button size */ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; text-decoration: none !important; min-height: 56px; /* Ensure same height as primary button */}.hero-section .secondary-cta:hover{background-color: white !important; color: #2A7F83 !important; border-color: white !important; transform: translateY(-2px); box-shadow: 0 6px 8px rgba(0, 0, 0, 0.25);}.hero-section .secondary-cta:focus{outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5);}/* General secondary CTA for other sections */.secondary-cta{background-color: transparent; color: #2A7F83; border: 2px solid #2A7F83; border-radius: 25px; padding: 15px 30px; transition: all 0.3s ease; position: relative; font-weight: bold;}.secondary-cta:hover{background-color: #e0f7f8; border-width: 3px; transform: translateY(-2px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}.secondary-cta:focus{outline: none; box-shadow: 0 0 0 3px rgba(42, 127, 131, 0.5);}/* Service card hover effects */.service-card{transition: transform 0.3s ease, box-shadow 0.3s ease;}.service-card:hover{transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}/* Portfolio item hover effects */.portfolio-item{position: relative; overflow: hidden;}.portfolio-overlay{background: rgba(13, 139, 156, 0.9); /* Teal with opacity */ transition: opacity 0.3s ease; opacity: 0;}.portfolio-item:hover .portfolio-overlay{opacity: 1;}/* Navigation link hover effects */.nav-link{position: relative; transition: color 0.3s ease;}.nav-link::after{content: ''; display: block; width: 0; height: 2px; background: #2A7F83; transition: width 0.3s;}.nav-link:hover::after{width: 100%;}.nav-link:focus{outline: none;}.nav-link:focus-visible{outline: 2px solid #2A7F83; outline-offset: 2px;}/* FAQ accordion icon rotation */.faq-question i{transition: transform 0.3s ease;}.faq-question i.rotate-180{transform: rotate(180deg);}/* Animations for scroll effects */.animate-on-scroll{opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; /* Reduced failsafe delay to match home page timing */ animation: forceVisible 0.6s forwards 0.2s;}@keyframes forceVisible{to{opacity: 1; transform: translateY(0);}}.animate-on-scroll.animated{opacity: 1; transform: translateY(0); animation: none; /* Cancel the forceVisible animation if element is properly animated */}/* Staggered animation delays for lists - faster timing to match home page */.stagger-animation > *:nth-child(1){transition-delay: 0.1s;}.stagger-animation > *:nth-child(2){transition-delay: 0.2s;}.stagger-animation > *:nth-child(3){transition-delay: 0.3s;}.stagger-animation > *:nth-child(4){transition-delay: 0.4s;}.stagger-animation > *:nth-child(5){transition-delay: 0.5s;}.stagger-animation > *:nth-child(6){transition-delay: 0.6s;}/* Hero section specific animations - keeping same timing for consistency */#home .container .animate-on-scroll:nth-child(1){transition-delay: 0.2s;}#home .container .animate-on-scroll:nth-child(2){transition-delay: 0.4s;}#home .container .animate-on-scroll:nth-child(3){transition-delay: 0.6s;}/* Apply same fast timing to all hero sections on other pages */.hero-section .container .animate-on-scroll:nth-child(1){transition-delay: 0.2s;}.hero-section .container .animate-on-scroll:nth-child(2){transition-delay: 0.4s;}.hero-section .container .animate-on-scroll:nth-child(3){transition-delay: 0.6s;}@keyframes fadeIn{from{opacity: 0; transform: translateY(10px);}to{opacity: 1; transform: translateY(0);}}/* Dark mode styles */.dark-mode{--bg-primary: #1a202c; --bg-secondary: #2d3748; --text-primary: #f7fafc; --text-secondary: #e2e8f0; --accent: var(--primary-color);}/* Ensure form elements have proper contrast in dark mode */.dark-mode .contact-form-panel label{color: #f7fafc;}.dark-mode .form-group input,.dark-mode .form-group textarea,.dark-mode .form-group select{background-color: #2d3748; color: #f7fafc; border-color: #4a5568;}.dark-mode .form-group input::placeholder,.dark-mode .form-group textarea::placeholder{color: #a0aec0;}/* Make section titles more visible in dark mode */.dark-mode h2,.dark-mode h3,.dark-mode .text-3xl,.dark-mode .text-2xl{color: #f7fafc;}/* Fix pricing display in dark mode */.dark-mode .pricing-card .text-4xl,.dark-mode .pricing-card .text-gray-600{color: #f7fafc;}/* Fix "Need something custom?" section in dark mode */.dark-mode .mt-16.bg-accent{background-color: #2d3748; border: 1px solid #4a5568;}.dark-mode .mt-16.bg-accent h3,.dark-mode .mt-16.bg-accent p{color: #f7fafc;}.dark-mode body{background-color: var(--bg-primary); color: var(--text-primary);}.dark-mode .bg-white{background-color: var(--bg-secondary);}.dark-mode .text-gray-700,.dark-mode .text-gray-800,.dark-mode .text-gray-600,.dark-mode label,.dark-mode .form-group label{color: var(--text-secondary);}.dark-mode .bg-gray-50,.dark-mode .bg-gray-100{background-color: var(--bg-secondary);}.dark-mode .border-gray-200,.dark-mode .border-gray-300{border-color: #4a5568;}/* Theme toggle switch */.theme-switch-wrapper{display: flex; align-items: center;}.theme-switch{display: inline-block; height: 24px; position: relative; width: 48px;}.theme-switch input{display: none;}.slider{background-color: #ccc; bottom: 0; cursor: pointer; left: 0; position: absolute; right: 0; top: 0; transition: .4s; border-radius: 34px;}.slider:before{background-color: white; bottom: 4px; content: ""; height: 16px; left: 4px; position: absolute; transition: .4s; width: 16px; border-radius: 50%;}input:checked + .slider{background-color: var(--primary-color);}input:checked + .slider:before{transform: translateX(24px);}/* Testimonial slider styles */.testimonial-slider{position: relative; overflow: hidden;}.testimonial-slide{transition: transform 0.5s ease;}.testimonial-controls{display: flex; justify-content: center; margin-top: 20px;}.testimonial-dot{width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.5); margin: 0 5px; cursor: pointer; transition: background-color 0.3s ease;}.testimonial-dot.active{background-color: white;}/* Portfolio filter styles */.portfolio-filter{display: flex; justify-content: center; margin-bottom: 30px; flex-wrap: wrap;}.filter-btn{background: none; border: none; padding: 8px 16px; margin: 0 5px 10px; cursor: pointer; font-weight: 500; color: #4a5568; border-radius: 20px; transition: all 0.3s ease;}.filter-btn:hover{color: var(--primary-color);}.filter-btn.active{background-color: var(--primary-color); color: white;}/* Loading animation for form submission */.loading-spinner{display: inline-block; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 1s ease-in-out infinite;}@keyframes spin{to{transform: rotate(360deg);}}/* Scroll to top button */.scroll-top{position: fixed; bottom: 20px; right: 20px; background-color: #2A7F83; color: white; width: 40px; height: 40px; border-radius: 50%; display: flex; justify-content: center; align-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; z-index: 100; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}.scroll-top.visible{opacity: 1; visibility: visible;}.scroll-top:hover{background-color: #236e72; transform: translateY(-2px);}.scroll-top:focus{outline: none; box-shadow: 0 0 0 3px rgba(42, 127, 131, 0.5);}/* Responsive adjustments */@media (max-width: 768px){.portfolio-filter{flex-direction: column; align-items: center;}.filter-btn{margin-bottom: 8px;}/* Mobile-specific adjustments */ .hero-headline{font-size: 2.5rem; padding: 0 1rem;}.hero-subheadline{font-size: 1.25rem; padding: 0 1rem;}/* Stack CTA buttons on mobile */ #home .container .flex{flex-direction: column; align-items: center;}.primary-cta, .secondary-cta{width: 100%;}}/* Blog section styles */.blog-post{transition: transform 0.3s ease, box-shadow 0.3s ease;}.blog-post:hover{transform: translateY(-5px);}/* Blog post modal styles */.blog-post-modal{animation: fadeIn 0.3s ease;}/* Blog post category badges */.blog-category{background-color: var(--primary-color); color: white; font-size: 0.75rem; font-weight: bold; padding: 0.25rem 0.75rem; border-radius: 0.25rem; display: inline-block;}/* Blog post date */.blog-date{color: #6b7280; font-size: 0.875rem;}/* Blog post title */.blog-title{font-size: 1.25rem; font-weight: bold; color: var(--secondary-color); margin: 0.75rem 0; transition: color 0.3s ease;}.blog-title:hover{color: var(--primary-color);}/* Blog post excerpt */.blog-excerpt{color: #4b5563; margin-bottom: 1rem; line-height: 1.5;}/* Blog post read more link */.blog-read-more{color: var(--primary-color); font-weight: bold; text-decoration: none; transition: color 0.3s ease;}.blog-read-more:hover{text-decoration: underline;}/* Blog post loading animation */@keyframes pulse{0%{opacity: 0.6;}50%{opacity: 1;}100%{opacity: 0.6;}}.animate-pulse{animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;}/* Responsive adjustments for mobile */@media (max-width: 768px){/* Reduce padding on mobile */ section{padding: 2rem 1rem;}/* Center text on mobile */ .text-center-mobile{text-align: center;}}/* Logo styles */.logo-container{display: flex; align-items: center; margin-right: 15px;}.logo-icon{width: 40px; height: 40px; background-color: var(--accent-color); border-radius: 5px; position: relative; margin-right: 10px; display: flex; justify-content: center; align-items: center;}.logo-icon:before{content: ''; position: absolute; width: 28px; height: 22px; background-color: var(--primary-color); border-radius: 3px;}.logo-icon:after{content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid var(--accent-color); border-radius: 50%; z-index: 1;}/* Utility classes for logo colors */.text-primary{color: var(--primary-color);}.text-secondary{color: var(--secondary-color);}.bg-primary{background-color: var(--primary-color);}/* Accessibility improvements */a:focus, button:focus, input:focus, textarea:focus, select:focus{outline: 2px solid #2A7F83; outline-offset: 2px;}/* Ensure proper contrast for text */.text-gray-400{color: #a0aec0; /* Ensuring WCAG 2.1 contrast ratio */}.text-gray-600{color: #718096; /* Ensuring WCAG 2.1 contrast ratio */}/* Add focus styles for interactive elements */.focus-visible:focus{outline: 2px solid #2A7F83; outline-offset: 2px;}/* Screen reader only class */.sr-only{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;}/* Sticky header transition */#main-nav{transition: all 0.3s ease;}#main-nav img{transition: height 0.3s ease;}.bg-secondary{background-color: var(--secondary-color);}.bg-accent{background-color: var(--accent-color);}/* Pricing Cards Styles */.pricing-card{transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column;}.pricing-card:hover{transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}.pricing-card-header{padding: 1.5rem; border-bottom: 1px solid rgba(0, 0, 0, 0.05);}/* Popular badge positioning and styling */.pricing-card .bg-yellow-400{position: relative; top: -5px; right: -5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}/* Ensure consistent height for feature lists */.pricing-card ul{flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start;}/* Responsive adjustments for pricing cards */@media (max-width: 768px){.pricing-card.transform.scale-105{transform: scale(1);}.pricing-card{margin-bottom: 2rem;}}/* Design Process Section Styles */.process-step-card{transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; display: flex; flex-direction: column;}.process-step-card:hover{transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}.process-icon-container{width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background-color: var(--accent-color); border-radius: 50%; margin-bottom: 1rem; position: relative; transition: transform 0.3s ease;}.process-step-card:hover .process-icon-container{transform: scale(1.1);}.process-icon{color: var(--primary-color);}.process-icon .text-primary{stroke: var(--primary-color);}.process-icon .text-accent{stroke: var(--secondary-color);}/* The fifth step (Support & Growth) is centered on all screen sizes */@media (min-width: 768px){.process-step-card.md\:col-span-2{grid-column: span 2;}}@media (min-width: 1024px){.process-step-card.lg\:col-span-4{grid-column: span 4;}}/* Responsive adjustments for process steps */@media (max-width: 768px){.process-steps{grid-template-columns: 1fr;}.process-step-card{margin-bottom: 1.5rem;}.process-step-card.md\:col-span-2{max-width: 100%;}}/* Our Commitment Section Styles */.commitment-item{transition: transform 0.3s ease, box-shadow 0.3s ease; height: 100%; display: flex; flex-direction: column; align-items: center;}.commitment-item:hover{transform: translateY(-10px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);}.commitment-icon-container{width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; background-color: var(--accent-color); border-radius: 50%; margin-bottom: 1rem; position: relative; transition: transform 0.3s ease;}.commitment-item:hover .commitment-icon-container{transform: scale(1.1);}.commitment-icon{color: var(--primary-color);}.commitment-icon .text-primary{stroke: var(--primary-color);}.commitment-icon .text-accent{stroke: var(--secondary-color);}.commitment-title{margin-top: 1rem; margin-bottom: 0.5rem; color: var(--secondary-color); font-weight: bold; transition: color 0.3s ease;}.commitment-item:hover .commitment-title{color: var(--primary-color);}.commitment-description{color: #4A5568; line-height: 1.6;}/* Responsive adjustments for commitment items */@media (max-width: 768px){.commitment-container{grid-template-columns: 1fr;}.commitment-item{margin-bottom: 1.5rem;}.commitment-item.md\:col-span-2{grid-column: span 1;}}/* Contact Section Styles */.contact-card{box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); border-radius: 12px; overflow: hidden; transition: box-shadow 0.3s ease; font-family: 'Inter', 'Segoe UI', sans-serif;}.contact-card:hover{box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);}.contact-info-panel{position: relative; overflow: hidden; letter-spacing: 0.01em; line-height: 1.6;}.contact-info-panel::before{content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='rgba(255,255,255,0.05)' fill-rule='evenodd'/%3E%3C/svg%3E"); opacity: 0.3; z-index: 0;}.contact-detail{position: relative; z-index: 1;}/* Icon animation */.contact-icon{display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.1); border-radius: 50%; transition: all 0.3s ease;}.contact-detail:hover .contact-icon{transform: scale(1.1) rotate(5deg); background-color: rgba(255, 255, 255, 0.2); box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);}/* Form styling with improved spacing */.contact-form-panel .form-group{margin-bottom: 1.75rem;}.contact-form-panel label{margin-bottom: 0.5rem; font-weight: 500; color: #4a5568;}.contact-form-panel input,.contact-form-panel select,.contact-form-panel textarea{transition: all 0.3s ease; font-size: 1rem; padding: 0.75rem 1rem; border-radius: 0.375rem; border: 1px solid #e2e8f0; background-color: #fff; width: 100%; color: #4a5568; line-height: 1.5;}.contact-form-panel input:focus,.contact-form-panel select:focus,.contact-form-panel textarea:focus{border-color: var(--primary-color); box-shadow: 0 0 0 3px rgba(13, 139, 156, 0.2); outline: none;}/* Validation styling */.contact-form-panel input.border-red-500,.contact-form-panel textarea.border-red-500{border-color: #f56565;}.validation-message{color: #f56565; font-size: 0.875rem; margin-top: 0.25rem;}/* Button with loading spinner */.contact-form-panel button{position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0.75rem 1.5rem; font-weight: 600; border-radius: 0.375rem; transition: all 0.3s ease; background-color: var(--primary-color); color: white; border: none; cursor: pointer;}.contact-form-panel button:hover{background-color: var(--secondary-color); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(13, 139, 156, 0.2);}.contact-form-panel button:active{transform: translateY(0);}.contact-form-panel button:disabled{opacity: 0.7; cursor: not-allowed;}/* Loading spinner animation */.loading-spinner{display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite;}@keyframes spin{to{transform: rotate(360deg);}}/* Success message styling */#formSuccess{animation: fadeIn 0.5s ease; border-radius: 0.5rem; padding: 1.5rem; text-align: center;}/* File upload styling */.contact-form-panel input[type="file"]{display: none;}/* WhatsApp secondary contact option */.contact-info-panel a.group{display: flex; align-items: center; padding: 0.75rem 0; color: white; text-decoration: none; transition: all 0.3s ease;}.contact-info-panel a.group:hover{color: var(--accent-color);}.contact-info-panel a.group svg{margin-right: 0.75rem; transition: transform 0.3s ease;}.contact-info-panel a.group:hover svg{transform: scale(1.1);}/* Accessibility improvements */.contact-form-panel input:focus-visible,.contact-form-panel select:focus-visible,.contact-form-panel textarea:focus-visible,.contact-form-panel button:focus-visible{outline: 2px solid var(--primary-color); outline-offset: 2px;}/* Responsive adjustments for contact section */@media (max-width: 768px){.contact-info-panel{border-radius: 12px 12px 0 0;}.contact-form-panel{border-radius: 0 0 12px 12px;}.contact-form-panel .form-group{margin-bottom: 1.25rem;}.contact-form-panel input, .contact-form-panel select, .contact-form-panel textarea{font-size: 16px; /* Prevents zoom on mobile */ padding: 0.75rem;}/* Increase tap target sizes for mobile */ .contact-form-panel button{padding: 0.875rem 1.5rem;}}/* About section enhancements */.checkmark-icon{animation: pulse 2s infinite; transition: all 0.3s ease;}/* Subtle pulse animation for the checkmark icon */@keyframes pulse{0%{transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 139, 156, 0.4);}70%{transform: scale(1.05); box-shadow: 0 0 0 10px rgba(13, 139, 156, 0);}100%{transform: scale(1); box-shadow: 0 0 0 0 rgba(13, 139, 156, 0);}}/* Fade-in animation for the checkmark on scroll */.checkmark-icon{opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease;}.checkmark-icon.animated{opacity: 1; transform: translateY(0); animation-delay: 0.3s;}/* Footer Styles */footer{position: relative; overflow: hidden;}/* Footer card hover effects */footer .bg-opacity-10{transition: transform 0.5s ease, box-shadow 0.5s ease;}footer .bg-opacity-10:hover{transform: translateY(-8px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);}/* Social icon animations */.social-icon-link .group{transition: all 0.3s ease;}.social-icon-link .group:hover{transform: scale(1.1);}@keyframes bounce{0%, 100%{transform: translateY(0);}50%{transform: translateY(-10px);}}.animate-bounce{animation: bounce 1s ease;}/* Industry-specific hero backgrounds */.restaurant-hero .moving-background{background-image: url('https://images.unsplash.com/photo-1414235077428-338989a2e8c0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') !important;}.professional-hero .moving-background{background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') !important;}.wellness-hero .moving-background{background-image: url('https://page.gensparksite.com/v1/base64_upload/8a75ca088449ab1dec79a21defed6f93') !important;}.business-hero .moving-background{background-image: url('https://images.unsplash.com/photo-1531482615713-2afd69097998?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') !important;}.webdesign-hero .moving-background{background-image: url('https://images.unsplash.com/photo-1460925895917-afdab827c52f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2015&q=80') !important;}/* Newsletter form styles */#newsletter-form input{background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease;}#newsletter-form input:focus{background-color: rgba(255, 255, 255, 0.15); border-color: var(--primary-color); box-shadow: 0 0 0 2px rgba(13, 139, 156, 0.3);}#newsletter-form button{transition: all 0.3s ease;}#newsletter-form button:hover{transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}/* Footer accessibility improvements */footer a:focus{outline: 2px solid var(--primary-color); outline-offset: 2px;}/* Footer fade-in animation on scroll */footer .container{opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease;}footer .container.animated{opacity: 1; transform: translateY(0);}/* Footer mobile responsiveness */@media (max-width: 768px){footer .grid{grid-template-columns: 1fr;}footer .lg\:col-span-2{grid-column: span 1;}footer .p-6{padding: 1.25rem;}/* Larger tap targets on mobile */ footer a, footer button{padding: 0.5rem 0; display: inline-block;}footer .social-icon-link .group{width: 3rem; height: 3rem;}}/* Enhanced Blog Post Content Styling */.rich-text-content{font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.7; color: #374151; max-width: 100%; overflow-wrap: break-word;}.rich-text-content h1,.rich-text-content h2,.rich-text-content h3,.rich-text-content h4,.rich-text-content h5,.rich-text-content h6{margin-top: 1.5em; margin-bottom: 0.5em; font-weight: 700; color: #0a3b5c; line-height: 1.3;}.rich-text-content h1{font-size: 2.25rem;}.rich-text-content h2{font-size: 1.875rem;}.rich-text-content h3{font-size: 1.5rem;}.rich-text-content h4{font-size: 1.25rem;}.rich-text-content h5{font-size: 1.125rem;}.rich-text-content h6{font-size: 1rem;}.rich-text-content p{margin-bottom: 1.5em; line-height: 1.7;}.rich-text-content ul{list-style-type: disc; margin-left: 1.5em; margin-bottom: 1.5em;}.rich-text-content ol{list-style-type: decimal; margin-left: 1.5em; margin-bottom: 1.5em;}.rich-text-content li{margin-bottom: 0.5em;}.rich-text-content a{color: #0d8b9c; text-decoration: underline;}.rich-text-content a:hover{color: #0a3b5c;}.rich-text-content blockquote{border-left: 4px solid #0d8b9c; padding-left: 1em; margin-left: 0; margin-right: 0; margin-top: 1.5em; margin-bottom: 1.5em; font-style: italic; color: #4b5563;}.rich-text-content hr{border: 0; border-top: 1px solid #e5e7eb; margin: 2em 0;}.rich-text-content code{font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; background-color: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25em; font-size: 0.875em; color: #0d8b9c;}/* Preserve whitespace for better readability */.rich-text-content{white-space: pre-line;}/* Dark mode adjustments */.dark-mode .rich-text-content{color: #e5e7eb;}.dark-mode .rich-text-content h1,.dark-mode .rich-text-content h2,.dark-mode .rich-text-content h3,.dark-mode .rich-text-content h4,.dark-mode .rich-text-content h5,.dark-mode .rich-text-content h6{color: #f3f4f6;}.dark-mode .rich-text-content a{color: #38b2ac;}.dark-mode .rich-text-content a:hover{color: #4fd1c5;}.dark-mode .rich-text-content blockquote{color: #9ca3af; border-left-color: #38b2ac;}.dark-mode .rich-text-content code{background-color: #374151; color: #38b2ac;}/* Blog content styling */.prose{font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; line-height: 1.7; color: #374151;}.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6{color: #1a202c; font-weight: 700; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.3;}.prose h1{font-size: 2.25em;}.prose h2{font-size: 1.875em;}.prose h3{font-size: 1.5em;}.prose p{margin-top: 1.25em; margin-bottom: 1.25em;}.prose a{color: #0d8b9c; text-decoration: underline; font-weight: 500;}.prose a:hover{color: #0a3b5c;}.prose ul, .prose ol{margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em;}.prose ul{list-style-type: disc;}.prose ol{list-style-type: decimal;}.prose li{margin-top: 0.5em; margin-bottom: 0.5em;}.prose blockquote{font-style: italic; border-left: 4px solid #0d8b9c; padding-left: 1em; margin-left: 0; margin-right: 0; margin-top: 1.25em; margin-bottom: 1.25em;}.prose img{margin-top: 2em; margin-bottom: 2em; border-radius: 0.375rem;}.prose code{font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 0.875em; color: #0d8b9c; background-color: #f3f4f6; padding: 0.2em 0.4em; border-radius: 0.25em;}.prose pre{background-color: #1a202c; border-radius: 0.375rem; color: #e5e7eb; font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; overflow-x: auto; padding: 0.8571429em 1.1428571em;}.prose pre code{background-color: transparent; border-width: 0; border-radius: 0; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; padding: 0;}.dark-mode .prose{color: #e5e7eb;}.dark-mode .prose h1,.dark-mode .prose h2,.dark-mode .prose h3,.dark-mode .prose h4,.dark-mode .prose h5,.dark-mode .prose h6{color: #f3f4f6;}.dark-mode .prose a{color: #38b2ac;}.dark-mode .prose a:hover{color: #4fd1c5;}.dark-mode .prose code{color: #38b2ac; background-color: #374151;}/* Enhanced Contact Panel Styling */.contact-panel{position: relative; background: linear-gradient(135deg, #0d8b9c 0%, #0a3b5c 100%) !important; box-shadow: 0 20px 40px rgba(13, 139, 156, 0.3); transition: all 0.3s ease; overflow: hidden;}.contact-panel:hover{transform: translateY(-2px); box-shadow: 0 25px 50px rgba(13, 139, 156, 0.4);}/* Contact panel decorative elements */.contact-panel::before{content: ''; position: absolute; top: -50%; right: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); animation: float 6s ease-in-out infinite; pointer-events: none; z-index: 1;}@keyframes float{0%, 100%{transform: translateY(0px) rotate(0deg);}50%{transform: translateY(-10px) rotate(5deg);}}/* Enhanced contact icons */.contact-panel .contact-icon{background: rgba(255, 255, 255, 0.15) !important; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); transition: all 0.3s ease; position: relative; z-index: 2;}.contact-panel .contact-icon:hover{background: rgba(255, 255, 255, 0.25) !important; transform: scale(1.1) rotate(5deg); box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);}/* Ensure content is above decorative elements */.contact-panel .relative.z-10{position: relative; z-index: 10;}/* Contact panel responsive improvements */@media (max-width: 768px){.contact-panel{margin-bottom: 2rem;}.contact-panel::before{animation: none; /* Disable animation on mobile for performance */}}/* Contact detail hover effects */.contact-panel .flex.items-start:hover{transform: translateX(5px); transition: transform 0.3s ease;}.contact-panel .flex.items-start:hover .contact-icon{background: rgba(255, 255, 255, 0.3) !important;}/* Enhanced AI Solutions Industry Cards Animations */.industry-card{position: relative; overflow: hidden; transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); transform-origin: center;}.industry-card::before{content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(42, 127, 131, 0.1), transparent); transition: left 0.5s ease; z-index: 1;}.industry-card:hover::before{left: 100%;}.industry-card:hover{transform: translateY(-12px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}.industry-card .relative.overflow-hidden{transition: all 0.3s ease;}.industry-card:hover .relative.overflow-hidden{transform: scale(1.05);}/* Enhanced service card animations */.service-card{position: relative; overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);}.service-card::after{content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: radial-gradient(circle, rgba(42, 127, 131, 0.1) 0%, transparent 70%); transition: all 0.6s ease; transform: translate(-50%, -50%); z-index: 0;}.service-card:hover::after{width: 300px; height: 300px;}.service-card:hover{transform: translateY(-15px) rotate(2deg); box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.25);}.service-card > *{position: relative; z-index: 1;}/* Icon bounce animation for service cards */.service-card:hover .fas{animation: iconBounce 0.6s ease-in-out;}@keyframes iconBounce{0%, 20%, 50%, 80%, 100%{transform: translateY(0);}40%{transform: translateY(-10px);}60%{transform: translateY(-5px);}}/* Pulse animation for "Learn More" buttons */.industry-card a:hover i{animation: pulse 1s infinite;}@keyframes pulse{0%{transform: scale(1);}50%{transform: scale(1.1);}100%{transform: scale(1);}}/* Enhanced hover effect for navigation links */.nav-link{position: relative; transition: all 0.3s ease;}.nav-link:hover{transform: translateY(-2px);}/* Smooth scroll behavior for anchor links */html{scroll-behavior: smooth;}/* AI Solutions overview cards enhanced animations */.bg-white.rounded-xl.shadow-lg.hover\:shadow-xl.transition-shadow.duration-300{transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); position: relative; overflow: hidden;}.bg-white.rounded-xl.shadow-lg.hover\:shadow-xl.transition-shadow.duration-300:hover{transform: translateY(-10px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);}/* Process step cards enhanced animations */.process-step{transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94); position: relative; overflow: hidden;}.process-step::before{content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(42, 127, 131, 0.05), transparent); transition: left 0.5s ease;}.process-step:hover::before{left: 100%;}.process-step:hover{transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.2);}/* Mobile responsive adjustments for enhanced animations */@media (max-width: 768px){.industry-card:hover, .service-card:hover{transform: translateY(-5px) scale(1.01);}.industry-card::before, .service-card::after{display: none;}}/* Ensure no page titles are accidentally displayed on screen */title{display: none !important;}/* Hide any elements that might accidentally display the title */*[content*="AIniseFlow | AI Automation & Workflow Solutions"]::before,*[content*="AIniseFlow | AI Automation & Workflow Solutions"]::after{display: none !important;}/* Prevent any title text from appearing below navigation */nav + *::before{content: none !important;}body::before,body::after{content: none !important;}/* Hide any potential title display elements */.page-title,.site-title,.document-title{display: none !important;}/* Ensure navigation area has proper spacing and no unwanted content */#main-nav + *{margin-top: 0 !important; padding-top: 0 !important;}/* Hide any accessibility or SEO elements that might render visually */[aria-label*="AIniseFlow | AI Automation"],[title*="AIniseFlow | AI Automation"]{position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important;}/* Specifically hide any text that contains the full title */*:contains("AIniseFlow | AI Automation & Workflow Solutions"){display: none !important;}/* Hide browser chrome elements if they leak into page */iframe,embed,object{max-height: 0 !important; overflow: hidden !important;}/* Force hide any top-level text nodes */body > *:first-child:not(nav):not(section):not(header):not(main){display: none !important;}/* Additional safety nets */.browser-ui,.page-header,.document-header,.site-header:not(#main-nav){display: none !important;}/* Aggressive approach - hide anything at the very top that's not our navigation */body > *:first-child:not(nav){position: relative !important;}body > *:first-child:not(nav):before{content: none !important;}/* Hide any potential browser frame content */body:before,html:before{content: none !important; display: none !important;}/* Ensure body starts correctly positioned */body{margin: 0 !important; padding: 0 !important; position: relative !important;}/* Force navigation to be the topmost element */#main-nav{position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; z-index: 9999 !important; height: 80px !important; /* Fixed navigation height */}/* Standardize navigation layout and prevent shifting */#main-nav .container{max-width: 1200px !important; margin: 0 auto !important; padding-left: 1rem !important; padding-right: 1rem !important;}#main-nav .flex{justify-content: space-between !important; align-items: center !important; height: 80px !important; /* Consistent height */ padding: 0 !important; /* Remove padding variations */}/* Logo container - fixed size and position */#main-nav .flex.items-center:first-child{flex-shrink: 0 !important; min-width: fit-content !important;}#main-nav .flex.items-center:first-child a{align-items: center !important; gap: 12px !important; /* Fixed gap */ text-decoration: none !important;}/* Logo image - consistent size */#main-nav img[alt*="AIniseFlow Logo"]{height: 48px !important; /* Fixed height */ width: auto !important; flex-shrink: 0 !important; object-fit: contain !important;}/* Brand text - consistent size and prevent wrapping */#main-nav span.font-bold{font-size: 1.5rem !important; /* Fixed font size */ font-weight: 700 !important; white-space: nowrap !important; line-height: 1 !important; flex-shrink: 0 !important;}/* Navigation links container */#main-nav .hidden.md\\:flex{align-items: center !important; gap: 2rem !important; /* Fixed spacing between nav items */ flex-shrink: 0 !important;}/* Individual navigation links */#main-nav .nav-link{font-size: 1rem !important; font-weight: 500 !important; white-space: nowrap !important; padding: 0.5rem 0 !important; /* Consistent vertical padding */ line-height: 1 !important; transition: color 0.3s ease !important;}/* Dropdown button consistency */#main-nav .industries-dropdown-btn{font-size: 1rem !important; font-weight: 500 !important; white-space: nowrap !important; padding: 0.5rem 0 !important; line-height: 1 !important; align-items: center !important; gap: 0.5rem !important;}/* Mobile menu button - consistent sizing */#menu-btn{width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; flex-shrink: 0 !important;}/* Prevent layout shifts */body{padding-top: 80px !important; /* Account for fixed nav height */}/* Ensure all pages have consistent top spacing */.hero-section,section:first-of-type{margin-top: 0 !important; padding-top: 5rem !important;}/* Prevent any elements from affecting navigation layout */*{box-sizing: border-box !important;}/* Responsive adjustments */@media (max-width: 768px){#main-nav img[alt*="AIniseFlow Logo"]{height: 40px !important;}#main-nav span.font-bold{font-size: 1.25rem !important;}body{padding-top: 70px !important;}}/* Additional stability for navigation */#main-nav *{flex-shrink: 0 !important;}#main-nav .container > div{width: 100% !important; max-width: 100% !important;}/* Explore AI Solutions Button Styling */.explore-ai-btn{background: linear-gradient(135deg, #0d8b9c 0%, #2A7F83 50%, #0a6b75 100%) !important; border: 2px solid white !important; border-radius: 2rem !important; color: white !important; font-weight: 700 !important; padding: 1rem 2rem !important; align-items: center !important; justify-content: center !important; gap: 0.5rem !important; transition: all 0.3s ease !important; text-decoration: none !important; box-shadow: 0 4px 15px rgba(42, 127, 131, 0.3) !important;}.explore-ai-btn:hover{background: linear-gradient(135deg, #0a7a8a 0%, #236e72 50%, #085a63 100%) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(42, 127, 131, 0.4) !important;}.explore-ai-btn i{color: white !important; font-size: 1rem !important;}/* Gear icons spacing */.explore-ai-btn i.fa-cog:first-of-type{margin-right: 0.25rem !important;}/* Fix mobile menu button visibility - ensure it's hidden on desktop */@media (min-width: 768px){#menu-btn, .md\\:hidden{display: none !important;}/* Ensure desktop navigation is visible */ .hidden.md\\:flex{}}/* Mobile menu button should only show on mobile */@media (max-width: 767px){#menu-btn{}/* Hide desktop navigation on mobile */ .hidden.md\\:flex{display: none !important;}}/* Explore AI Solutions Button - Enhanced Design with Dual Gears */.explore-ai-btn{/* Pill shape with specific styling */ border-radius: 50px !important; border: 2px solid rgba(255, 255, 255, 0.9) !important; background: linear-gradient(135deg, #0d8b9c 0%, #2A7F83 50%, #0a6b75 100%) !important; color: white !important; font-weight: 700 !important; font-size: 1rem !important; padding: 16px 32px !important; text-decoration: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: all 0.3s ease !important; backdrop-filter: blur(2px) !important; min-width: 260px !important; white-space: nowrap !important; box-shadow: 0 4px 15px rgba(42, 127, 131, 0.3) !important;}.explore-ai-btn:hover{background: linear-gradient(135deg, #0a7a8a 0%, #236e72 50%, #085a63 100%) !important; border-color: rgba(255, 255, 255, 1) !important; transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(42, 127, 131, 0.4) !important;}/* Gear icons styling */.explore-ai-btn i{font-size: 1rem !important; color: white !important; flex-shrink: 0 !important; animation: slowRotate 8s linear infinite !important;}/* Different rotation speeds for each gear */.explore-ai-btn i:first-child{animation: slowRotate 6s linear infinite !important;}.explore-ai-btn i:last-child{animation: slowRotate 8s linear infinite reverse !important;}/* Gear rotation animation */@keyframes slowRotate{from{transform: rotate(0deg);}to{transform: rotate(360deg);}}/* Text styling */.explore-ai-btn span{font-weight: 700 !important; letter-spacing: 0.5px !important;}.explore-ai-btn:focus{outline: none !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.5) !important;}/* Mobile responsive styling */@media (max-width: 768px){.explore-ai-btn{padding: 14px 24px !important; font-size: 0.95rem !important; min-width: 240px !important; gap: 6px !important;}.explore-ai-btn i{font-size: 0.9rem !important;}}/* Extra small screens */@media (max-width: 480px){.explore-ai-btn{padding: 12px 20px !important; font-size: 0.9rem !important; min-width: 220px !important;}}/* CRITICAL FIX: Mobile menu button should be hidden on desktop */@media (min-width: 768px){#menu-btn{display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important;}/* Ensure desktop nav is visible */ nav .hidden.md\\:flex{display: flex !important;}}@media (max-width: 767px){#menu-btn{display: flex !important; visibility: visible !important; opacity: 1 !important;}/* Hide desktop nav on mobile */ nav .hidden.md\\:flex{display: none !important;}}/* Brand Color Utility Classes - Ensuring proper colors regardless of Tailwind version */.text-brand-teal{color: #0d8b9c !important; /* Teal for icons and main titles */}.text-brand-green{color: #2A7F83 !important; /* Green for "Key Features" text */}.text-brand-navy{color: #0a3b5c !important; /* Dark navy blue */}.bg-brand-light-blue{background-color: #dbeafe !important; /* Light blue for impact sections */}.bg-brand-teal{background-color: #0d8b9c !important;}.bg-brand-navy{background-color: #0a3b5c !important;}.border-brand-teal{border-color: #0d8b9c !important;}/* =================================== *//* COMPREHENSIVE MOBILE OPTIMIZATIONS *//* =================================== *//* Mobile Navigation Improvements */@media (max-width: 767px){/* Ensure mobile menu button is always visible and properly sized */ #menu-btn{align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; min-width: 44px; border: none; background: transparent; cursor: pointer; z-index: 1060 !important; /* Increased z-index to ensure visibility */ position: relative; padding: 8px; border-radius: 6px; transition: all 0.3s ease; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important;}/* Ensure navigation container has proper spacing on mobile */ nav .flex.justify-between{padding: 0.5rem 1rem;}/* Improve mobile menu appearance */ #mobile-menu{max-height: 80vh; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 0 0 8px 8px; box-shadow: 0 8px 16px rgba(0,0,0,0.15); margin-top: 0 !important;}/* Ensure mobile menu is visible when active */ #mobile-menu.visible{display: block !important; animation: slideDown 0.3s ease-out;}@keyframes slideDown{from{opacity: 0; transform: translateY(-10px);}to{opacity: 1; transform: translateY(0);}}/* Mobile body padding handled by main body rule */ #menu-btn:hover, #menu-btn:focus{background-color: rgba(42, 127, 131, 0.1); transform: scale(1.05);}#menu-btn i{font-size: 20px !important; color: #0a3b5c; transition: all 0.3s ease;}/* Mobile menu improvements */ #mobile-menu{background: rgba(255, 255, 255, 0.98); backdrop-filter: blur(10px); border-radius: 8px; margin-top: 12px; padding: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); border: 1px solid rgba(42, 127, 131, 0.2);}#mobile-menu a{padding: 12px 16px !important; border-radius: 6px; margin: 4px 0; display: block; transition: all 0.3s ease; min-height: 44px; display: flex; align-items: center;}#mobile-menu a:hover, #mobile-menu a:focus{background-color: rgba(42, 127, 131, 0.1); transform: translateX(4px);}/* Logo scaling on mobile */ nav .logo img, nav img[alt*="Logo"]{height: 60px !important; max-height: 60px;}nav .text-2xl{font-size: 1.25rem !important;}}/* Enhanced Mobile Breakpoints *//* Extra Small Devices (phones, 480px and down) */@media (max-width: 480px){.container{padding-left: 1rem !important; padding-right: 1rem !important;}/* Logo even smaller on very small screens */ nav .logo img, nav img[alt*="Logo"]{height: 50px !important;}nav .text-2xl{font-size: 1.125rem !important;}/* Hero section mobile optimization */ .hero-headline{font-size: 2rem !important; line-height: 1.2 !important; margin-bottom: 1rem !important;}.hero-subheadline{font-size: 1.125rem !important; line-height: 1.4 !important;}}/* Small Devices (landscape phones, 640px and down) */@media (max-width: 640px){/* Typography improvements */ h1{font-size: 2.25rem !important;}h2{font-size: 1.875rem !important;}h3{font-size: 1.5rem !important;}h4{font-size: 1.25rem !important;}/* Button improvements - ensure minimum touch target */ .btn, button, .primary-cta, .secondary-cta, input[type="submit"], input[type="button"]{min-height: 44px !important; min-width: 44px; padding: 12px 20px !important; font-size: 1rem !important;}/* CTA button stack */ .flex.gap-4{flex-direction: column !important; gap: 1rem !important;}/* Cards and sections */ .grid{grid-template-columns: 1fr !important; gap: 1.5rem !important;}/* Section spacing */ section{padding-top: 3rem !important; padding-bottom: 3rem !important;}/* Form optimization */ input[type="text"], input[type="email"], input[type="tel"], textarea, select{min-height: 44px !important; padding: 12px 16px !important; font-size: 16px !important; /* Prevents zoom on iOS */ border-radius: 6px;}textarea{min-height: 120px !important;}}/* Medium Devices (tablets, 768px and down) */@media (max-width: 768px){/* Navigation improvements */ .hidden.md\\:flex{display: none !important;}.md\\:hidden{display: block !important;}/* Ensure proper spacing */ .px-6{padding-left: 1.5rem !important; padding-right: 1.5rem !important;}/* Image responsiveness */ img{max-width: 100% !important; height: auto !important;}/* Video responsiveness */ video, iframe{width: 100% !important; height: auto !important; max-width: 100% !important;}/* Table responsiveness */ table{width: 100% !important; overflow-x: auto !important; display: block !important; white-space: nowrap !important;}}/* Large Devices (desktops, 1024px and up) */@media (min-width: 1024px){/* Ensure desktop navigation is properly shown */ .hidden.md\\:flex{}.md\\:hidden{display: none !important;}/* Optimize for larger screens */ .container{max-width: 1200px;}}/* Touch Device Optimizations */@media (hover: none) and (pointer: coarse){/* Remove hover effects on touch devices */ .hover\\:scale-105:hover{transform: none !important;}/* Increase touch targets */ button, .btn, a, input, select, textarea{min-height: 44px !important; min-width: 44px;}/* Add touch feedback */ button:active, .btn:active, a:active{transform: scale(0.95); transition: transform 0.1s ease;}}/* High DPI Display Optimizations */@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi){/* Crisp text rendering */ *{-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}}/* Landscape Mobile Optimization */@media (max-height: 480px) and (orientation: landscape){/* Compact header on landscape mobile */ nav{padding-top: 0.5rem !important; padding-bottom: 0.5rem !important;}nav img[alt*="Logo"]{height: 40px !important;}/* Reduce hero section height */ .hero-section{padding-top: 2rem !important; padding-bottom: 2rem !important;}.hero-headline{font-size: 1.875rem !important; margin-bottom: 0.75rem !important;}}/* Accessibility Improvements for Mobile */@media (max-width: 768px){/* Focus indicators */ button:focus, a:focus, input:focus, select:focus, textarea:focus{outline: 2px solid #0d8b9c !important; outline-offset: 2px !important; border-radius: 4px;}/* Skip link for keyboard navigation */ .skip-link{position: absolute; top: -40px; left: 6px; background: #0d8b9c; color: white; padding: 8px; text-decoration: none; border-radius: 4px; z-index: 1000;}.skip-link:focus{top: 6px;}}/* Performance Optimizations for Mobile */@media (max-width: 768px){/* Reduce animations on mobile for better performance */ *{animation-duration: 0.3s !important;}/* Optimize background images */ .moving-background{animation-duration: 60s !important; will-change: transform;}/* Lazy loading optimization */ img[loading="lazy"]{opacity: 0; transition: opacity 0.3s;}img[loading="lazy"].loaded{opacity: 1;}}/* Touch feedback styles */.touch-active{transform: scale(0.95); opacity: 0.8; transition: all 0.1s ease !important;}/* Mobile device specific styles */.mobile-device{-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}/* Enhanced Industries Dropdown Styling */.dropdown-menu{position: absolute !important; top: 100% !important; left: 0 !important; z-index: 99999 !important; min-width: 240px !important; background-color: white !important; border-radius: 0.5rem !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; margin-top: 0.5rem !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-10px) scale(0.95) !important; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; backdrop-filter: blur(8px); display: block !important;}/* Show dropdown on hover for desktop */@media (min-width: 768px){.group:hover .dropdown-menu, .relative:hover .dropdown-menu, nav .group:hover .dropdown-menu, #main-nav .group:hover .dropdown-menu{opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; display: block !important;}.group:hover .industries-dropdown-btn i, .relative:hover .industries-dropdown-btn i, nav .group:hover .industries-dropdown-btn i, #main-nav .group:hover .industries-dropdown-btn i, .industries-dropdown-btn[aria-expanded="true"] i{transform: rotate(180deg) !important;}}/* Active state for dropdown */.dropdown-menu.show,nav .dropdown-menu.show,#main-nav .dropdown-menu.show{opacity: 1 !important; visibility: visible !important; transform: translateY(0) scale(1) !important; display: block !important;}/* Dropdown menu items */.dropdown-menu a{display: flex; align-items: center; padding: 0.75rem 1rem; color: #4a5568; text-decoration: none; transition: all 0.15s ease; font-size: 0.875rem; font-weight: 500; border-radius: 0.25rem; margin: 0.125rem 0.5rem;}.dropdown-menu a:hover,.dropdown-menu a:focus{background-color: rgba(42, 127, 131, 0.08); color: #2A7F83; transform: translateX(4px);}.dropdown-menu a i{width: 16px; font-size: 0.875rem; color: #2A7F83; transition: transform 0.2s ease;}.dropdown-menu a:hover i{transform: scale(1.1);}/* Industries dropdown button styling */.industries-dropdown-btn{cursor: pointer; user-select: none; border: none; background: none; font: inherit;}.industries-dropdown-btn i{transition: transform 0.3s ease;}/* Ensure dropdown appears above other content */.relative{position: relative;}/* Mobile dropdown styles */@media (max-width: 767px){.dropdown-menu{position: static !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; background-color: rgba(248, 250, 252, 0.95) !important; backdrop-filter: none !important; margin: 0.5rem 0 !important; padding: 0.5rem !important; min-width: auto !important; width: 100% !important; transform: none !important; opacity: 1 !important; visibility: visible !important; max-height: 0 !important; overflow: hidden !important; transition: all 0.3s ease !important; display: none !important;}.dropdown-menu.show{opacity: 1 !important; max-height: 300px !important; padding: 1rem 0.5rem !important; display: block !important;}.dropdown-menu a{margin: 0.25rem 0; padding: 0.75rem; border-radius: 0.375rem; font-size: 1rem;}.dropdown-menu a:hover{transform: none;}}.mobile-device *{-webkit-tap-highlight-color: rgba(42, 127, 131, 0.2);}/* Print Styles for Mobile */@media print{#mobile-menu, #menu-btn, .theme-switch-wrapper{display: none !important;}*{color: black !important; background: white !important;}}/* ============================================ *//* CRITICAL MOBILE DROPDOWN FIX *//* ============================================ *//* Force mobile dropdown to always be visible when mobile menu is open */@media (max-width: 767px){/* Mobile menu container improvements */ #mobile-menu{z-index: 99999 !important; background-color: rgba(255, 255, 255, 0.98) !important; backdrop-filter: blur(10px); border-radius: 0 0 12px 12px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2) !important; border: 1px solid rgba(42, 127, 131, 0.1) !important; border-top: none !important;}/* Industries dropdown section in mobile menu */ #mobile-menu .py-2{background-color: rgba(248, 250, 252, 0.8) !important; border-radius: 8px !important; margin: 0.75rem 0 !important; padding: 0.5rem !important; border: 1px solid rgba(42, 127, 131, 0.1) !important;}/* Industries dropdown button in mobile */ #mobile-menu .industries-dropdown-btn{width: 100% !important; text-align: left !important; background-color: rgba(42, 127, 131, 0.05) !important; border-radius: 6px !important; padding: 0.75rem 1rem !important; font-weight: 600 !important; color: #2A7F83 !important; border: 1px solid rgba(42, 127, 131, 0.2) !important; margin-bottom: 0.5rem !important;}/* FORCE dropdown menu to always be visible in mobile */ #mobile-menu .dropdown-menu{position: static !important; display: block !important; visibility: visible !important; opacity: 1 !important; transform: none !important; box-shadow: none !important; background-color: white !important; border-radius: 6px !important; border: 1px solid rgba(42, 127, 131, 0.1) !important; margin: 0 !important; padding: 0.5rem !important; max-height: none !important; overflow: visible !important; width: 100% !important;}/* Mobile dropdown items styling */ #mobile-menu .dropdown-menu a{display: flex !important; align-items: center !important; padding: 0.75rem 1rem !important; margin: 0.125rem 0 !important; border-radius: 4px !important; font-size: 0.95rem !important; font-weight: 500 !important; color: #4a5568 !important; text-decoration: none !important; transition: all 0.2s ease !important; min-height: 44px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;}#mobile-menu .dropdown-menu a:last-child{border-bottom: none !important;}#mobile-menu .dropdown-menu a:hover, #mobile-menu .dropdown-menu a:focus{background-color: rgba(42, 127, 131, 0.1) !important; color: #2A7F83 !important; transform: translateX(4px) !important;}#mobile-menu .dropdown-menu a i{margin-right: 0.75rem !important; color: #2A7F83 !important; font-size: 1rem !important; width: 18px !important; text-align: center !important; flex-shrink: 0 !important;}}/* ============================================ *//* ENHANCED MOBILE HERO SECTION OPTIMIZATIONS *//* ============================================ */@media (max-width: 768px){/* Hero section mobile-first approach */ .hero-section{min-height: 100vh !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 2rem 1rem !important; text-align: center !important;}.hero-section .container{max-width: 100% !important; width: 100% !important; padding: 0 !important;}/* Hero text scaling for mobile */ .hero-section h1, .hero-section .text-5xl, .hero-section .text-4xl{font-size: 2rem !important; line-height: 1.1 !important; margin-bottom: 1rem !important; font-weight: 700 !important;}.hero-section .text-3xl{font-size: 1.75rem !important;}.hero-section .text-2xl{font-size: 1.5rem !important;}.hero-section .text-xl{font-size: 1.25rem !important;}/* Hero paragraph text */ .hero-section p{font-size: 1.125rem !important; line-height: 1.6 !important; margin-bottom: 2rem !important; max-width: none !important;}/* Hero buttons mobile optimization */ .hero-section .flex{flex-direction: column !important; gap: 1rem !important; align-items: stretch !important; width: 100% !important; max-width: 400px !important; margin: 0 auto !important;}.hero-section .flex > *{width: 100% !important; justify-content: center !important;}/* Button sizing for mobile */ .hero-section button, .hero-section .btn, .hero-section a[class*="btn"]{padding: 1rem 2rem !important; font-size: 1rem !important; min-height: 48px !important; border-radius: 12px !important; font-weight: 600 !important; text-align: center !important; display: flex !important; align-items: center !important; justify-content: center !important;}/* Specific mobile styling for explore AI button */ .explore-ai-btn{width: 100% !important; max-width: 350px !important; margin: 0 auto !important; padding: 1rem 2rem !important; font-size: 1rem !important; gap: 0.5rem !important; min-width: 300px !important;}.explore-ai-btn i{font-size: 1rem !important;}.explore-ai-btn span{flex: 1 !important; text-align: center !important;}}/* ============================================ *//* MOBILE NAVIGATION FINAL FIXES *//* ============================================ */@media (max-width: 767px){/* Force navigation container sizing */ #main-nav{height: 70px !important; min-height: 70px !important;}#main-nav .container{height: 100% !important; padding: 0 1rem !important;}#main-nav .flex.justify-between{height: 100% !important; align-items: center !important;}/* Mobile logo sizing */ #main-nav img{height: 40px !important; width: auto !important; object-fit: contain !important;}/* Brand text mobile */ #main-nav .text-2xl, #main-nav .text-xl{font-size: 1.125rem !important; line-height: 1 !important; white-space: nowrap !important;}/* Mobile menu button final positioning */ #menu-btn{position: relative !important; z-index: 1002 !important; display: flex !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; align-items: center !important; justify-content: center !important; background: transparent !important; border: none !important; cursor: pointer !important; border-radius: 6px !important; transition: background-color 0.2s ease !important;}#menu-btn:hover, #menu-btn:focus{background-color: rgba(42, 127, 131, 0.1) !important;}#menu-btn i{font-size: 20px !important; color: #2A7F83 !important; transition: transform 0.3s ease !important;}/* Adjust body padding for mobile nav height */ body{padding-top: 70px !important;}}/* Mobile Menu Clean Styling - Remove boxes and borders */@media (max-width: 767px){#mobile-menu .dropdown-menu{position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; margin-top: 0 !important; background-color: transparent !important; min-width: auto !important; backdrop-filter: none !important; padding: 0 !important;}/* Clean mobile menu styling - remove all boxes and borders */ #mobile-menu{border: none !important; box-shadow: none !important;}#mobile-menu .nav-link{border: none !important; border-radius: 0 !important; background-color: transparent !important;}#mobile-menu .nav-link:hover{background-color: transparent !important; border-radius: 0 !important;}#mobile-menu a{border: none !important; border-radius: 0 !important; background-color: transparent !important;}#mobile-menu a:hover{background-color: transparent !important; border-radius: 0 !important;}}