@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Poppins:wght@300;400;500;600;700;800&display=swap');

@font-face {
  font-family: 'BALIBOLD';
  src: local('BALIBOLD'), local('Bali Bold'), local('Bali-Bold'),
       url('https://db.onlinewebfonts.com/t/b48fe8ff2b9de7bf3bc4d7e0085a8553.woff2') format('woff2'),
       url('https://db.onlinewebfonts.com/t/b48fe8ff2b9de7bf3bc4d7e0085a8553.woff') format('woff'),
       url('https://db.onlinewebfonts.com/t/b48fe8ff2b9de7bf3bc4d7e0085a8553.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #0C3556;
}
::-webkit-scrollbar-thumb {
  background: #03607E;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0482ab;
}

/* Metal reflection swipe animation effect on hover */
.metal-reflection {
  position: relative;
  overflow: hidden;
}
.metal-reflection::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  transition: 0.85s;
}
.metal-reflection:hover::after {
  left: 150%;
}

/* Custom scanline scroll for the monitor or background */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
.scanline-effect::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(3, 96, 126, 0) 0%,
    rgba(3, 96, 126, 0.08) 10%,
    rgba(3, 96, 126, 0) 20%
  );
  animation: scanline 8s linear infinite;
  pointer-events: none;
}

/* Custom centered flex-wrap services grid with exact spacing */
#services_section .grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  gap: 2rem !important; /* gap-8 */
}
#services_section .grid > div {
  width: 100% !important;
  max-width: 24rem !important; /* max-w-sm */
}
@media (min-width: 640px) {
  #services_section .grid > div {
    width: calc(50% - 1rem) !important;
    max-width: none !important;
  }
}
@media (min-width: 1024px) {
  #services_section .grid > div {
    width: calc(33.333% - 1.334rem) !important;
    max-width: none !important;
  }
}

/* Hide Bottom Banner */
#services_section .mt-16.p-8.rounded-2xl {
  display: none !important;
}

/* Seamless Marquee Banner */
@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
.animate-marquee {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 35s linear infinite;
}
.animate-marquee:hover {
  animation-play-state: paused;
}