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

@layer base {
  * {
    @apply box-border font-opensans;
  }
  /* padding */
  .section-padding {
    @apply relative px-6 py-10 mx-auto sm:px-20 sm:py-16 max-w-7xl xl:px-28 xl:container;
  }
  .section-padding-x {
    @apply px-6 mx-auto sm:px-16 max-w-7xl xl:px-28 xl:container;
  }
  .section-padding-y {
    @apply py-6 mx-auto sm:py-16 max-w-7xl;
  }

  /* button */
  .button-border-white {
    @apply lg:px-9 lg:py-3 px-6 py-2 border-2 border-white rounded-[50px] text-white transition-all hover:text-secondary  hover:bg-white bg-transparent;
  }
  .button-border-purple {
    @apply lg:px-9 lg:py-3 px-6 py-2 border-2 border-primary rounded-[50px] text-primary transition-all hover:text-white  hover:bg-primary bg-transparent;
  }
  .button-purple {
    @apply lg:px-9 lg:py-3 px-6 py-2 border-2  border-primary rounded-[50px] text-white transition-all hover:text-primary  hover:bg-transparent bg-primary;
  }

  /* text */
  .heroHeadText {
    @apply lg:text-[66px] md:text-[56px] sm:text-[46px] text-[36px];
  }
  .sectionSecondaryText {
    @apply sectionSemiLargeText tracking-[3.5px] font-medium font-poppins uppercase;
  }

  .sectionLargeText {
    @apply lg:text-[20px] sm:text-[18px] text-[16px] sm:leading-8 leading-7 lg:leading-9;
  }
  .sectionSemiLargeText {
    @apply lg:text-[18px] md:text-[16px] text-[14px] sm:leading-7 leading-6 lg:leading-8;
  }
  .sectionMediumText {
    @apply lg:text-[16px] md:text-[14px] text-[12px] sm:leading-6 leading-5 lg:leading-7;
  }
  .sectionNormalText {
    @apply lg:text-[14px] md:text-[12px] text-[10px] sm:leading-5 leading-4 lg:leading-6;
  }
  .sectionSmallText {
    @apply lg:text-[12px] md:text-[11px] sm:text-[10px] text-[8px] leading-4 md:leading-5;
  }
  /* heading */
  h1 {
    @apply lg:text-[44px] md:text-[40px] sm:text-[36px] text-[30px];
  }
  h2 {
    @apply lg:text-[40px] md:text-[36px] sm:text-[30px] text-[26px];
  }
  h3 {
    @apply lg:text-[36px] md:text-[32px] sm:text-[28px] text-[24px];
  }
  h4 {
    @apply lg:text-[32px] md:text-[28px] sm:text-[26px] text-[22px];
  }
  h5 {
    @apply lg:text-[28px] md:text-[24px] sm:text-[22px] text-[18px];
  }

  h6 {
    @apply lg:text-[24px] md:text-[22px] text-[16px];
  }

  /* splide button */
  .splide-button {
    @apply border-2 bg-transparent border-secondary !important;
  }
}