@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

body {
  font-family: 'Inter', sans-serif;
}


  .tab-button.active {
      opacity: 1;
      font-weight: 600;
  }

  .tab-button:not(.active) {
      opacity: 0.6;
  }

  .tab-button:hover {
      opacity: 0.9;
  }

  body {
      font-family: 'Inter', sans-serif;
      font-size: 16px;
      line-height: 1.5;
  }

  .swiper {
      padding: 40px 0;
  }

  .swiper-slide {
      width: 300px;
      opacity: 0.4;
      transition: all 0.4s ease-in-out;
      transform: scale(0.9);
  }

  .swiper-slide-active {
      opacity: 1 !important;
      transform: scale(1.05);
      z-index: 10;
  }

  .swiper-wrapper {
      align-items: center;
  }

  @media (max-width: 768px) {
      .swiper-slide {
          width: 240px;
      }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
      font-weight: 600;
      line-height: 1.3;
  }

  /* Tailwind utilities already cover most things;
   these two tiny helpers keep the markup cleaner */


  .nav-link {
      @apply text-black hover:text-blue-600 transition-colors duration-200;
  }

  .dropdown-item {
      @apply flex justify-between items-center px-4 py-2 hover:bg-gray-100;
  }