html {
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease-out;
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.bg-abstract {
  position: relative;
}

.bg-abstract::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.07) 1.2px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.07) 1.2px, transparent 1px),
    linear-gradient(to right, rgba(0, 0, 0, 0.03) 1.2px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1.2px, transparent 1px);
  background-size: 64px 56px, 64px 56px, 16px 14px, 16px 14px;
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    black 60%,
    transparent 100%
  );
  background-position-y: var(--bg-y, 0px);
}

.dark .bg-abstract::before {
  background-image: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.07) 1.2px,
      transparent 1px
    ),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.07) 1.2px, transparent 1px),
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1.2px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1.2px, transparent 1px);
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

@keyframes ripple-glow {
  0% {
    box-shadow: 0 0 0 0 rgba(76, 118, 59, 0.7), 0 0 15px #4c763b;
  }

  70% {
    box-shadow: 0 0 0 20px rgba(76, 118, 59, 0), 0 0 15px #4c763b;
  }

  100% {
    box-shadow: 0 0 0 0 rgba(76, 118, 59, 0), 0 0 15px #4c763b;
  }
}

.animate-ripple-glow {
  animation: ripple-glow 2s infinite;
}

:root {
  --ripple-color-start: rgba(76, 118, 59, 0.6);
  --ripple-color-end: rgba(76, 118, 59, 0);
}

.dark {
  --ripple-color-start: rgba(156, 163, 175, 0.6);
  --ripple-color-end: rgba(156, 163, 175, 0);
}

@keyframes icon-ripple {
  0% {
    box-shadow: 0 0 0 0 var(--ripple-color-start);
  }

  100% {
    box-shadow: 0 0 0 8px var(--ripple-color-end);
  }
}

.animate-icon-ripple {
  animation: icon-ripple 3s infinite;
}

.glass-card {
  transition: all 0.3s ease;
}

.glass-card:hover {
  border-color: rgba(4, 57, 21, 0.3) !important;
  box-shadow: 0 0 20px rgba(4, 57, 21, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.5) !important;
}

.dark .glass-card:hover {
  border-color: rgba(255, 255, 255, 0.8) !important;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.4),
    inset 0 0 20px rgba(255, 255, 255, 0.1) !important;
}

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

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

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

.animate-gradient {
  background-size: 300% 300%;
  animation: gradient-shift 30s ease-in-out infinite;
}