:root {
  --color-one: #2f3690;
  --color-two: #27aae2;
  --color-three: #53aa47;
  --color-black: #07080a;
  --color-background: #f5f5f5;
  --color-text-light: #f1f5f9;
  --color-text-dark: #1e293b;
  --color-success: #4caf50;
  --color-warning: #ff9800;
  --agency-one: #07162d;
  --agency-two: #9e1428;
}

.card-modern {
  @apply shadow-lg hover:shadow-xl transition-all duration-300 border border-[var(--color-background)] bg-white;
}

@keyframes float {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(1deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.float-animation {
  animation: float 6s ease-in-out infinite;
}

#mobile-menu-overlay {
  clip-path: circle(0% at 100% 0%);
  transition: clip-path 0.6s ease-in-out;
}

#mobile-menu-overlay.active {
  clip-path: circle(150% at 100% 0%);
}

.mobile-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.mobile-submenu.active {
  max-height: 500px;
}