.elementor-222 .elementor-element.elementor-element-c433f7d{--display:flex;}/* Start custom CSS for container, class: .elementor-element-c433f7d */<!-- Tailwind CSS CDN (Required for styles to render properly) -->
<script src="https://cdn.tailwindcss.com"></script>

<footer class="bg-gradient-to-b from-blue-50/50 via-blue-50/20 to-blue-100/40 text-slate-700 py-16 px-6 md:px-16 font-sans w-full">
  <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-5 gap-10">
    
    <!-- Column 1: Brand / Description -->
    <div class="md:col-span-1 space-y-6">
      <div class="flex items-center gap-1">
        <span class="text-teal-400 font-bold text-2xl tracking-tighter">m</span>
        <span class="text-slate-800 font-bold text-2xl tracking-tight">moveyou</span>
      </div>
      
      <p class="text-xs text-slate-600 leading-relaxed">
        Delivering parking, charging and connected fleet API's, as well as white label platforms and apps to expand your propositions in the mobility domain.
      </p>

      <div class="flex items-center gap-3">
        <div class="w-10 h-10 rounded-full border border-slate-300 flex items-center justify-center text-[9px] font-semibold text-slate-500 bg-white shadow-sm">DNV</div>
        <div class="w-10 h-10 rounded-full border border-slate-300 flex items-center justify-center text-[9px] font-semibold text-slate-500 bg-white shadow-sm">DNV</div>
        <div class="w-10 h-10 rounded-full border border-slate-300 flex items-center justify-center text-[9px] font-semibold text-slate-500 bg-white shadow-sm">DNV</div>
      </div>

      <div class="flex items-center gap-2 text-xs text-slate-700 font-medium pt-2">
        <span class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></span>
        Platform Online
      </div>
    </div>

    <!-- Column 2: Contact -->
    <div class="space-y-4">
      <h3 class="font-bold text-slate-900 text-lg">Contact</h3>
      <div class="text-xs text-slate-600 space-y-3 leading-relaxed">
        <p class="flex items-start gap-2">
          <svg class="w-4 h-4 text-slate-500 shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
          <span>Het Want 3<br>8802 PV Franeker<br>The Netherlands</span>
        </p>
        <p class="flex items-center gap-2">
          <svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path></svg>
          <a href="mailto:info@moveyou.com" class="text-cyan-500 hover:underline">info@moveyou.com</a>
        </p>
        <p class="font-semibold text-slate-800 pt-1">+31 088 100 9877</p>
      </div>
    </div>

    <!-- Column 3: Platform -->
    <div class="space-y-4">
      <h3 class="font-bold text-slate-900 text-lg">Platform</h3>
      <ul class="text-xs space-y-2.5 text-slate-600">
        <li><a href="#" class="hover:text-slate-900">Customer Management</a></li>
        <li><a href="#" class="hover:text-slate-900">Card Management</a></li>
        <li><a href="#" class="text-cyan-500 font-medium hover:underline">Order Management</a></li>
        <li><a href="#" class="hover:text-slate-900">Plans and Subscriptions</a></li>
        <li><a href="#" class="hover:text-slate-900">Collecting and invoicing</a></li>
        <li><a href="#" class="hover:text-slate-900">Payments</a></li>
        <li><a href="#" class="hover:text-slate-900">Price Management</a></li>
        <li><a href="#" class="hover:text-slate-900">Loyalty</a></li>
        <li><a href="#" class="hover:text-slate-900">White label mobility apps</a></li>
        <li><a href="#" class="hover:text-slate-900">Mobility Offering</a></li>
        <li><a href="#" class="hover:text-slate-900">Energy Devices and Chargers</a></li>
        <li><a href="#" class="hover:text-slate-900">Connected Fleet</a></li>
        <li><a href="#" class="hover:text-slate-900">Forecourt Management</a></li>
        <li><a href="#" class="hover:text-slate-900">Wallets & Vouchers</a></li>
      </ul>
    </div>

    <!-- Column 4: Industries -->
    <div class="space-y-4">
      <h3 class="font-bold text-slate-900 text-lg">Industries</h3>
      <ul class="text-xs space-y-2.5 text-slate-600">
        <li><a href="#" class="hover:text-slate-900">Fuel Retailer</a></li>
        <li><a href="#" class="hover:text-slate-900">e-Mobility Provider</a></li>
        <li><a href="#" class="hover:text-slate-900">Charge Point Operator (CPO)</a></li>
        <li><a href="#" class="hover:text-slate-900">Others</a></li>
      </ul>

      <div class="pt-4">
        <div class="inline-flex items-center justify-between bg-white border border-slate-200 rounded-full py-1.5 px-3 text-xs w-36 shadow-sm cursor-pointer hover:border-slate-300">
          <div class="flex items-center gap-2">
            <span class="text-sm">🇺🇸</span>
            <span class="font-medium text-slate-700">EN</span>
          </div>
          <svg class="w-3.5 h-3.5 text-slate-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
        </div>
      </div>

      <div>
        <button class="bg-cyan-400 hover:bg-cyan-500 text-white font-medium text-xs py-2 px-5 rounded-full shadow-sm transition-colors">
          Newsletter
        </button>
      </div>
    </div>

    <!-- Column 5: API -->
    <div class="space-y-4">
      <h3 class="font-bold text-slate-900 text-lg">API</h3>
      <ul class="text-xs space-y-2.5 text-slate-600">
        <li><a href="#" class="hover:text-slate-900">Developers</a></li>
        <li><a href="#" class="hover:text-slate-900">Integrations</a></li>
      </ul>
    </div>

  </div>

  <!-- Footer Bottom Bar -->
  <div class="max-w-7xl mx-auto mt-16 pt-6 border-t border-slate-200/60 flex flex-col md:flex-row items-center justify-between text-xs text-slate-500 gap-4">
    <div>
      © All rights reserved • Moveyou • 2026
    </div>
    
    <div class="flex items-center gap-6">
      <a href="#" class="hover:text-slate-800">Privacy</a>
      <a href="#" class="hover:text-slate-800">Cookie Policy (EU)</a>
      <a href="#" class="hover:text-slate-800">Terms and conditions</a>
    </div>

    <div>
      <a href="#" class="w-7 h-7 bg-cyan-600 hover:bg-cyan-700 text-white rounded flex items-center justify-center transition-colors">
        <svg class="w-4 h-4 fill-current" viewBox="0 0 24 24"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
      </a>
    </div>
  </div>
</footer>/* End custom CSS */