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

@layer components {

  .jb-section {
    @apply w-full px-4 py-6 md:px-6 md:py-6 lg:px-2 bg-[#2c2c2c] flex items-center min-h-[calc(100vh-120px)] lg:min-h-[calc(100vh-100px)];
  }

  .jb-container {
    @apply relative max-w-[1480px] md:max-w-[1480px] lg:max-w-[1780px] mx-auto rounded-[30px] md:rounded-[54px] border border-[#f08719]
           shadow-[0_0_60px_rgba(192,35,35,0.43)] my-12 px-6 py-8 md:px-10 md:py-10 xl:py-14;
  }

  .jb-container-alt {
    @apply relative max-w-[1480px] md:max-w-[1480px] lg:max-w-[1780px] mx-auto rounded-[30px] md:rounded-[54px] border border-[#c02323]
           shadow-[0_0_60px_rgba(192,35,35,0.43)] my-12 px-6 py-8 md:px-10 md:py-10 xl:py-14;
  }

  .jb-grid {
    @apply grid grid-cols-1 md:grid-cols-2 items-center gap-3 md:gap-0 h-full;
  }

  .jb-text-right {
    @apply text-center md:text-right mt-6 md:mt-0;
  }

  .jb-text-left {
    @apply text-left mt-6 md:mt-0;
  }

  .jb-heading {
    @apply text-[#cfcfcf] font-extrabold text-[48px] md:text-[72px] leading-[1.6] mb-8;
  }

  .jb-paragraph {
    @apply text-[#d9d9d9] text-[18px] md:text-[24px] leading-[1.6];
  }

  .jb-video-wrapper {
    @apply relative w-full max-w-[360px] md:max-w-[530px] aspect-[11/10] mx-auto;
  }

  .jb-video {
    @apply relative w-full h-full object-cover rounded-[28px] md:rounded-[54px];
  }

  .jb-video-trial {
    @apply relative w-full h-full object-cover rounded-[28px] md:rounded-[54px];
  }

}