@tailwind base;
@tailwind components;
@tailwind utilities;

body {
    font-family: 'Inter', sans-serif;
}

#mobileMenu {
    max-width: 100%;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
    z-index: 50;
    overflow-y: auto;
  }

  #mobileMenu.open {
    transform: translateX(0);
  }

  .clip-circle {
    clip-path: ellipse(50% 100% at 50% 100%);
  }

  @media (max-width: 640px) {
    .hero .relative.bg-blue-900 {
      height: 15rem;
    }
  }

  @media (min-width: 768px) {
    .services-image-clip {
      clip-path: inset(50% 50% 50% 0);
    }
  }