body {
      overflow-x: hidden;
      background-color: #f8fafc;
  }

  /* ThreeJS Canvas Container */
  #canvas-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      pointer-events: none;
      overflow: hidden;
  }

  /* Glassmorphism effects */
  .glass-nav {
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }

  .glass-card {
      background: rgba(255, 255, 255, 0.7);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
      border: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* Hide Scrollbar but keep functionality */
  ::-webkit-scrollbar {
      width: 8px;
  }

  ::-webkit-scrollbar-track {
      background: #f1f1f1;
  }

  ::-webkit-scrollbar-thumb {
      background: #cbd5e1;
      border-radius: 4px;
  }

  ::-webkit-scrollbar-thumb:hover {
      background: #94a3b8;
  }

  /* Accordion Transitions */
  .accordion-content {
      transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out, padding 0.4s ease-in-out;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
  }

  .accordion-content.active {
      max-height: 500px;
      opacity: 1;
  }

  .accordion-icon {
      transition: transform 0.3s ease;
  }

  .accordion-button.active .accordion-icon {
      transform: rotate(180deg);
  }

  /* Floating Medical Icons Background */
  @keyframes floatMedical {
      0% {
          transform: translateY(50px) rotate(0deg);
          opacity: 0;
      }

      10% {
          opacity: 0.06;
      }

      90% {
          opacity: 0.06;
      }

      100% {
          transform: translateY(-1500px) rotate(360deg);
          opacity: 0;
      }
  }

  .medical-icon-float {
      position: absolute;
      bottom: -50px;
      color: #3b82f6;
      /* primary-500 */
      opacity: 0;
      animation: floatMedical linear infinite;
      z-index: 0;
  }

  /* Carousel Marquee Animations */
  @keyframes marquee {
      0% {
          transform: translateX(0%);
      }

      100% {
          transform: translateX(calc(-100% - 2rem));
      }

      /* -100% width minus the gap-8 (2rem) */
  }

  .animate-marquee {
      animation: marquee 25s linear infinite;
  }

  .carousel-container:hover .animate-marquee {
      animation-play-state: paused;
  }