.font-poppins {
    font-family: 'Poppins', sans-serif;
  }

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

  @keyframes floatText {

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

    50% {
      transform: translateY(-6px);
    }
  }

  @keyframes fadeSlideUp {
    from {
      opacity: 0;
      transform: translateY(30px);
    }

    to {
      opacity: 1;
      transform: translateY(0px);
    }
  }

  @keyframes pulseGlow {

    0%,
    100% {
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }

    50% {
      box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
    }
  }

  @keyframes scrollGrid {
    0% {
      background-position: 0 0;
    }

    100% {
      background-position: 24px 24px;
    }
  }

  .animated-float {
    animation: floatText 4s ease-in-out infinite;
  }

  .fade-in-up {
    opacity: 0;
    animation: fadeSlideUp 1s ease-out forwards;
  }

  .badge-glow {
    animation: pulseGlow 2.5s ease-in-out infinite;
  }

  .animated-grid {
    animation: scrollGrid 30s linear infinite;
  }

  @keyframes rippleOut {
    from {
      width: 0;
      height: 0;
      opacity: 0.8;
    }

    to {
      width: 300%;
      height: 300%;
      opacity: 1;
    }
  }

  .ripple {
    opacity: 0;
  }

  .group:hover .ripple {
    animation: rippleOut 0.6s ease-out forwards;
    opacity: 1;
  }

  .group:hover svg {
    animation: moveRight 0.6s ease-out forwards;
  }

  @keyframes moveRight {
    0% {
      transform: translateX(0);
    }

    50% {
      transform: translateX(6px);
    }

    100% {
      transform: translateX(4px);
    }
  }

  .nav-grid {
    position: relative;
  }

  .nav-grid::before {
    content: "";
    position: absolute;
    inset: -8px;
    background-image: linear-gradient(#4f46e510 1px, transparent 1px),
      linear-gradient(to right, #4f46e510 1px, transparent 1px);
    background-size: 8px 8px;
    border-radius: 4px;
    pointer-events: none;
  }

  .doodle-underline {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' viewBox='0 0 124 12' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' stroke='%233b82f6' stroke-width='2' fill='none'%3e%3cpath d='M2,9 C8.8,9 8.8,3 15.6,3 C22.4,3 22.4,9 29.2,9 C36,9 36,3 42.8,3 C49.6,3 49.6,9 56.4,9 C63.2,9 63.2,3 70,3 C76.8,3 76.8,9 83.6,9 C90.4,9 90.4,3 97.2,3 C104,3 104,9 110.8,9 C117.6,9 117.6,3 122,3'/%3e%3c/svg%3e");
    background-repeat: repeat-x;
    background-position: 0 100%;
    background-size: 160px 14px;
    padding-bottom: 6px;
  }

  .highlight-yellow {
    position: relative;
    display: inline-block;
    z-index: 1;
  }

  .highlight-yellow::after {
    content: "";
    position: absolute;
    width: 103%;
    height: 60%;
    bottom: 4px;
    left: -4%;
    background-color: #fef08a;
    z-index: -1;
    transform: rotate(-2deg);
    transition: all 0.3s ease;
  }

  .highlight-pink {
    position: relative;
    display: inline-block;
    z-index: 1;
  }

  .highlight-pink::after {
    content: "";
    position: absolute;
    width: 101%;
    height: 60%;
    bottom: 5px;
    left: -1%;
    background-color: #ffa4d8;
    z-index: -1;
    transform: rotate(1deg);
    transition: all 0.3s ease;
  }

  .highlight-blue {
    position: relative;
    display: inline-block;
    z-index: 1;
  }

  .highlight-blue::after {
    content: "";
    position: absolute;
    width: 108%;
    height: 60%;
    bottom: 6px;
    left: -4%;
    background-color: #8cbfff;
    z-index: -1;
    transform: rotate(-1deg);
    transition: all 0.3s ease;
  }

  .highlight-yellow:hover::after,
  .highlight-pink:hover::after,
  .highlight-blue:hover::after {
    height: 90%;
    transform: rotate(0deg);
  }

  @keyframes gradient-pan {
    from {
      background-position: 0% center;
    }

    to {
      background-position: -200% center;
    }
  }

  .animate-gradient-pan {
    background-size: 200%;
    animation: gradient-pan 8s linear infinite;
    background-image: linear-gradient(90deg,
        hsl(240deg 100% 20%),
        hsl(217deg 100% 50%),
        hsl(189deg 100% 50%),
        hsl(217deg 100% 50%),
        hsl(240deg 100% 20%));
  }

  @keyframes pulse {
    0% {
      box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4);
    }

    70% {
      box-shadow: 0 0 0 10px rgba(79, 70, 229, 0);
    }

    100% {
      box-shadow: 0 0 0 0 rgba(79, 70, 229, 0);
    }
  }

  /* Commenting out the floating button animation
    .fixed.bottom-8.right-8 a {
      animation: pulse 2s infinite;
    }
    */

  @keyframes gradient-x {
    0% {
      background-position: 0% 50%;
    }

    50% {
      background-position: 100% 50%;
    }

    100% {
      background-position: 0% 50%;
    }
  }

  .animate-gradient-x {
    background-size: 200% 100%;
    animation: gradient-x 15s ease infinite;
  }

  .fixed.top-0 {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }

  #stickyBanner {
    transition: transform 0.3s ease-in-out;
    backdrop-filter: blur(8px);
  }

  #stickyBanner.translate-y-0 {
    transform: translateY(0);
  }

  #stickyBanner.-translate-y-full {
    transform: translateY(-100%);
  }

  @media screen and (max-width: 1200px) {

    .absolute.left-\[174px\],
    .absolute.left-\[66rem\] {
      display: none;
    }
  }

  @keyframes slideIn {
    from {
      transform: translateX(100%);
      opacity: 0;
    }

    to {
      transform: translateX(0);
      opacity: 1;
    }
  }

  .toast-enter {
    animation: slideIn 0.3s ease-out forwards;
  }

  .success-checkmark {
    animation: checkmark 0.3s ease-out forwards;
  }

  @keyframes checkmark {
    from {
      transform: scale(0);
      opacity: 0;
    }

    to {
      transform: scale(1);
      opacity: 1;
    }
  }