@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --primary: #0015ff;
  --black: #03021d;
  --text-para: #8f969e;
  --background: #fff;
  --landing-background: #060536;
  --grey: #f5f5f5;
}

:root {
  --font-family: "Poppins", sans-serif;
  --second-family: "Inter", sans-serif;
}

body {
  font-family: var(--second-family);
  font-weight: 400;
}
.max-width {
  max-width: 1300px;
}
.text-black {
  color: var(--black);
}

.text-primary {
  color: var(--primary);
}

h1,
h2,
h3,
a,
input {
  font-family: var(--font-family);
}

.nav-menu {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
}

.active-btn {
  border-color: #6b7280; /* Tailwind gray-500 */
  color: black;
}
.inactive-btn {
  border-color: #d1d5db; /* Tailwind gray-300 */
  color: #4b5563; /* Tailwind gray-600 */
}

p {
  font-family: "Inter", sans-serif !important;
  fwont-weight: 400;
}

.text-color {
  color: var(--text);
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}
.phone-shadow {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.1);
}

/* animation */

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
}

.fade-in-delayed {
  animation: fadeIn 1s ease-out forwards;
  animation-delay: 0.5s;
}

.float {
  animation: float 3s ease-in-out infinite;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}
.animate-float-slow {
  animation: float 6s ease-in-out infinite;
}
.animate-float-fast {
  animation: float 2s ease-in-out infinite;
}