.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Hero Slider Navigation Buttons */
.hero-nav-btn {
  position: absolute;
  top: 52%;
  transform: translateY(-50%);
  z-index: 10;
  width: 35px;
  height: 35px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #374151;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.hero-nav-btn:hover {
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

.hero-nav-prev {
  left: 30px;
}

.hero-nav-next {
  right: 30px;
}
.hero-nav-btn svg {
    width: 25px;
    height: 215px;
  }

/* Hide default swiper buttons */
.swiper-button-next:after,
.swiper-button-prev:after {
  display: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-nav-btn {
    width: 30px;
    height: 30px;
  }

  .hero-nav-btn svg {
    width: 15px;
    height: 15px;
  }

  .hero-nav-prev {
    left: 10px;
  }

  .hero-nav-next {
    right: 10px;
  }
}

.blog-card:hover, .video-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Gut Health Icons Animation */
.gut-health-icon {
  position: absolute;
  font-size: 2rem;
  opacity: 0.6;
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
  transition: all 0.3s ease;
}

.gut-health-icon:hover {
  opacity: 0.9;
  transform: scale(1.2);
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}

/* Individual icon positions and animations */
.icon-1 {
  top: 10%;
  left: 5%;
  animation-name: float-1;
  animation-delay: 0s;
}

.icon-2 {
  top: 20%;
  right: 10%;
  animation-name: float-2;
  animation-delay: -2s;
}

.icon-3 {
  top: 40%;
  left: 8%;
  animation-name: float-3;
  animation-delay: -4s;
}

.icon-4 {
  top: 60%;
  right: 15%;
  animation-name: float-4;
  animation-delay: -6s;
}

.icon-5 {
  top: 80%;
  left: 12%;
  animation-name: float-5;
  animation-delay: -8s;
}

.icon-6 {
  top: 15%;
  left: 50%;
  animation-name: float-6;
  animation-delay: -10s;
}

.icon-7 {
  top: 70%;
  right: 5%;
  animation-name: float-7;
  animation-delay: -12s;
}

.icon-8 {
  top: 35%;
  right: 40%;
  animation-name: float-8;
  animation-delay: -14s;
}

.icon-9 {
  top: 85%;
  right: 30%;
  animation-name: float-9;
  animation-delay: -1s;
}

.icon-10 {
  top: 25%;
  left: 25%;
  animation-name: float-10;
  animation-delay: -3s;
}

/* Keyframe animations for floating effect */
@keyframes float-1 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(5deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
  75% { transform: translateY(-25px) rotate(2deg); }
}

@keyframes float-2 {
  0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  25% { transform: translateX(-15px) translateY(-15px) rotate(-5deg); }
  50% { transform: translateX(-5px) translateY(-30px) rotate(3deg); }
  75% { transform: translateX(-20px) translateY(-10px) rotate(-2deg); }
}

@keyframes float-3 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(4deg); }
  66% { transform: translateY(-25px) rotate(-4deg); }
}

@keyframes float-4 {
  0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  20% { transform: translateX(10px) translateY(-20px) rotate(3deg); }
  40% { transform: translateX(-5px) translateY(-15px) rotate(-3deg); }
  60% { transform: translateX(15px) translateY(-25px) rotate(5deg); }
  80% { transform: translateX(-10px) translateY(-10px) rotate(-2deg); }
}

@keyframes float-5 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-30px) rotate(6deg); }
}

@keyframes float-6 {
  0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  25% { transform: translateX(20px) translateY(-10px) rotate(-4deg); }
  50% { transform: translateX(-10px) translateY(-20px) rotate(4deg); }
  75% { transform: translateX(15px) translateY(-15px) rotate(-3deg); }
}

@keyframes float-7 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  30% { transform: translateY(-18px) rotate(3deg); }
  70% { transform: translateY(-12px) rotate(-3deg); }
}

@keyframes float-8 {
  0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  40% { transform: translateX(-12px) translateY(-22px) rotate(5deg); }
  80% { transform: translateX(8px) translateY(-8px) rotate(-4deg); }
}

@keyframes float-9 {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-25px) rotate(-5deg); }
  75% { transform: translateY(-15px) rotate(3deg); }
}

@keyframes float-10 {
  0%, 100% { transform: translateX(0px) translateY(0px) rotate(0deg); }
  33% { transform: translateX(-18px) translateY(-12px) rotate(4deg); }
  66% { transform: translateX(12px) translateY(-28px) rotate(-4deg); }
}

/* Responsive adjustments for icons */
@media (max-width: 768px) {
  .gut-health-icon {
    font-size: 1.5rem;
    opacity: 0.4;
  }
  
  .gut-health-icon:hover {
    opacity: 0.7;
  }
}

@media (max-width: 480px) {
  .gut-health-icon {
    font-size: 1.2rem;
    opacity: 0.3;
  }
}