/* Tailwind CSS directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Tailwind utilities and components from the main styles */
@layer base {
  .active-link {
    @apply px-3 py-2 rounded-full bg-primary text-white;
  }

  .h1 {
    @apply text-[48px] leading-tight md:text-[55px] md:leading-[1.3] mb-4 font-bold;
  }

  .h2 {
    @apply text-[33px] leading-tight md:text-[46px] md:leading-[1.3] mb-4 font-bold;
  }

  .h3 {
    @apply text-[26px] leading-tight md:text-[36px] md:leading-[1.3] mb-4 font-semibold;
  }

  p {
    @apply leading-[1.3] text-gray-30 text-[14px];
  }
}

@layer utilities {
  /* Container utilities */
  .max-container {
    @apply mx-auto max-w-[1440px];
  }

  .padding-container {
    @apply px-6 lg:px-14 3xl:px-0;
  }

  .max-padd-container {
    @apply mx-auto max-w-[1440px] px-5 lg:px-14 3xl:px-0;
  }
  
  .max-padd-container-none {
    @apply mx-auto max-w-[1440px] px-0 lg:px-0 3xl:px-0;
  }
  
  .max-padd-container2 {
    @apply mx-auto max-w-[1440px] px-6 lg:px-7 3xl:px-0;
  }

  /* Flex utilities */
  .flexCenter {
    @apply flex items-center justify-center;
  }

  .flexBetween {
    @apply flex items-center justify-between;
  }

  .flexStart {
    @apply flex items-center justify-start;
  }

  .flexEnd {
    @apply flex items-center justify-end;
  }
}