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

:root {
  --foreground-rgb: 0, 0, 0;
  --background-start-rgb: 214, 219, 220;
  --background-end-rgb: 255, 255, 255;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 0, 0, 0;
    --background-end-rgb: 0, 0, 0;
  }
}

* { margin: 0%;padding: 0%;box-sizing: border-box; }
html { font-size: 100%;scroll-behavior: smooth; }
body { font-size: 1rem;color: #7a7a7a;font-weight: 500;text-rendering: optimizeLegibility;font-display: swap;font-family: var(--font-mont); }

.container { max-width: calc(100% - 40px);margin-left: auto;margin-right: auto; }
 
@media(min-width:768px) {
  .container { max-width: 720px;margin-left: auto;margin-right: auto; }
}
@media(min-width:992px) {
  .container { max-width: 900px;margin-left: auto;margin-right: auto; }
}
@media(min-width:1200px) {
  .container { max-width: 1140px;margin-left: auto;margin-right: auto; }
}
@media(min-width:1400px) {
  .container { max-width: 1280px;margin-left: auto;margin-right: auto; }
}

.h2 {
  font-family: var(--font-righteous);
  @apply xl:text-5xl lg:text-4xl md:text-3xl sm:text-2xl text-xl font-semibold
}
.h3 {
  @apply text-3xl font-semibold
}
.h4 { @apply lg:text-2xl md:text-xl sm:text-lg text-lg  }
.h5 { @apply text-xl  }

.btn-primary {   
  line-height: 1.3;border: 1px solid transparent;
  transition: all .3s ease-in-out;
  @apply text-lg px-4 py-3  border-primary bg-primary text-white 
}
.btn-primary.large { @apply  md:px-5 md:py-4 px-4 py-2 text-base lg:text-xl }
.btn-primary:hover {
  background-color: transparent; 

  @apply text-primary border-primary
}
 
.active { @apply bg-primary text-white }

.heading-line-height { line-height: 1.3 !important; }
 

@media (max-width:576px) {
  p { font-size: .875rem; }
}