@import "tailwindcss";

@custom-variant dark (&:is(.dark *));

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  padding: 0;
  height: 100%;
}

button::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background-color: #FE4300; 
  transition: height 0.3s ease;
  z-index: 0;
}

button:hover::before {
  height: 100%;
}

.wave {
  animation-name: wave-animation;
  animation-duration: 2.5s;
  animation-iteration-count: infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

@keyframes wave-animation {
    0% { transform: rotate( 0.0deg) }
   10% { transform: rotate(14.0deg) }  
   20% { transform: rotate(-8.0deg) }
   30% { transform: rotate(14.0deg) }
   40% { transform: rotate(-4.0deg) }
   50% { transform: rotate(10.0deg) }
   60% { transform: rotate( 0.0deg) } 
  100% { transform: rotate( 0.0deg) }
}





@theme {
  --color-primary: #FE4300;
  --color-secondary: #868686;
  --color-softGray: #F0F0F0;
  --color-mistGray: #D7DCDD;
  --color-gray: #C0D8E0;

  --breakpoint-xs: 425px;
}

@layer utilities {
  .container {
    @apply w-full max-w-[80rem] mx-auto mt-0 mb-0 py-0 sm:px-7 px-5;
  }
  .label {
    @apply text-secondary text-sm font-normal;
  }
  .input {
    @apply w-full border-b border-gray focus:border-primary focus:outline-none py-2;
  }
}

@layer base {
  h1 {
    @apply text-4xl md:text-5xl xl:text-7xl 2xl:text-[85px] font-semibold leading-tight;
  }

  h2 {
    @apply text-3xl md:text-5xl lg:text-6xl xl:text-[65px] font-semibold;
  }

  h3 {
    @apply text-2xl md:text-3xl lg:text-4xl xl:text-5xl font-semibold;
  }

  h4 {
    @apply text-4xl;
  }

  h5 {
    @apply text-xl xl:text-2xl;
  }

  h6 {
    @apply text-sm md:text-base xl:text-xl;
  }

  p {
    @apply text-base text-secondary;
  }
}

@media print {
  body {
    background: white !important;
    color: black !important;
  }

  header, footer, .navbar, .no-print {
    display: none !important;
  }

  main {
    padding: 0;
    margin: 0;
    width: 100%;
  }

  * {
    box-shadow: none !important;
    background: transparent !important;
  }

  html, body {
    height: auto;
    overflow: visible;
  }

  .hero-section{
    padding-top: 35px;
  }

  .break-page {
    break-before: page;
    page-break-before: always;
  }
}