body {
  font-family: "Roboto", sans-serif;
  overflow-x: hidden !important;
  scroll-behavior: smooth;
}
.hero-text {
  font-family: "Playfair Display", serif;
}
.earth-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.8;
}
.product-card:hover {
  /* transform: translateY(-10px); */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.counter {
  font-size: 3rem;
  font-weight: bold;
  color: #4caf50;
}
.service-card {
  transition: all 0.3s ease;
}
.service-card:hover {
  background-color: #f0fff4;
}
.testimonial-slider .swiper-pagination-bullet-active {
  background-color: #4caf50 !important;
}
.nav-link {
  position: relative;
}
.nav-link:after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #4caf50;
  transition: width 0.3s ease;
}
.nav-link:hover:after {
  width: 100%;
}
.floating {
  animation: floating 3s ease-in-out infinite;
}
@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}
/* Video background inside section without touching HTML */
section.py-16 {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

/* Background video positioning */
section.py-16::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* background: black; */
}

/* Attach video using ::after with <video> background via pseudo */
section.py-16::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("");
}

/* Inject background video using <video> element directly in CSS */
section.py-16::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: black; */
  z-index: -2;
  pointer-events: none;
}

section.py-16 video.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -2;
  opacity: 0.7; /* adjust as needed */
  pointer-events: none;
}
@keyframes scrollProductsAlternate {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes scrollProducts {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
.animate-scroll-products-alternate {
  animation: scrollProductsAlternate 30s linear infinite;
}
.animate-scroll-products {
  animation: scrollProducts 30s linear infinite;
}
.group-hover\:pause-scroll:hover {
  animation-play-state: paused;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* testimonial */

.swiper {
  width: 100%;
  padding-bottom: 40px;
}

#bubbleCanvas div {
  position: absolute;
  background: white;
  opacity: 0.5;
  filter: blur(4px);
  animation: float 20s infinite;
}
#contactBubbles {
  height: 300px;
  width: 100%;
  display: block;
}

/* contact page */
#particles-js {
  background: linear-gradient(135deg, #4a9d3f, #0b2b4a);
}

/* About Page */

/* Animation for the glass-morphism cards */
.backdrop-blur-sm {
  backdrop-filter: blur(8px);
}

.team-slider {
  display: flex;
  gap: 1.5rem;
  overflow-x: hidden;
  animation: auto-scroll 40s linear infinite;
  width: max-content;
}

@keyframes auto-scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

.team-slider:hover {
  animation-play-state: paused;
}