@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .container {
    @apply w-[90%] max-w-screen-xl mx-auto;
  }

  .button {
    @apply bg-primary text-white block w-max py-3 px-10;
  }

  .button-primary {
    @apply button bg-red-700 text-white;
  }

  .button-secondary {
    @apply button bg-red-500 text-white;
  }

  .button-sm {
    @apply py-2 px-4 text-xs;
  }

  .highligth {
    @apply bg-primary text-white py-2 inline-block;
  }

  .marquee {
    @apply overflow-hidden text-[16px] uppercase bg-yellow-400;
  }

  .marquee__inner {
    @apply flex;
  }

  .marquee__line {
    @apply flex-shrink-0 m-0 px-4 py-1 whitespace-nowrap max-w-full;
    animation: marqueeLine 5s ease-in-out infinite;
  }

  @keyframes marqueeLine {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .service-item {
    @apply flex flex-col items-center justify-start text-center mt-6;
  }
  .service-item-caption {
    @apply mt-0 text-primary text-2xl font-bold max-w-[215px] break-words;
  }

  .line {
    @apply w-full h-[1px] bg-white my-10;
  }

  .scroll-link {
    @apply cursor-pointer;
  }

  .swiper-button-next {
    @apply text-primary;
  }
  .swiper-button-prev {
    @apply text-primary;
  }

  :root {
    --swiper-pagination-color: #d4181b;
    --swiper-pagination-bullet-width: 12px;
    --swiper-pagination-bullet-size: 12px;
  }
}