/* ! Tailwind css styles will generate buy tailwind cli using npm */

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

@layer components {
  /* * ### Typography */
  /* --------------------------- */
  .heading-1 {
    @apply font-extrablack lg:text-6xl md:text-5xl text-4xl leading-normal text-center text-neutral-100;
  }
  .heading-2 {
    @apply font-black md:text-4xl text-3xl text-secondary-main;
  }
  .heading-3 {
    @apply text-2xl font-extrablack sm:text-3xl text-secondary-main;
  }
  .heading-4 {
    @apply font-black text-xl md:text-2xl text-neutral-100;
  }
  .heading-5 {
    @apply font-black text-xl text-secondary-main;
  }
  .heading-6 {
    @apply font-extrablack text-base xs:text-lg md:text-xl text-secondary-main;
  }
  .paragraph {
    @apply text-sm font-normal lg:text-xl sm:text-lg xs:text-base lg:leading-8 leading-7 text-secondary-main;
  }
  /* --------------------------- */

  /* * ### Utilities */
  /* --------------------------- */
  .custom-input {
    @apply border-2 border-zinc-300/50 dark:border-neutral-700/50 rounded-lg bg-neutral-400 dark:bg-neutral-800 p-2 w-full placeholder:text-zinc-400/75 dark:placeholder:text-zinc-500/75 !ring-0 focus:border-zinc-300/90 focus:dark:border-neutral-700 dark:text-neutral-100;
  }
  .custom-button {
    @apply mt-3 max-w-fit bg-secondary-main transition-transform duration-500 hover:scale-105 rounded-2xl px-6 py-2 sm:px-8 sm:py-[10px] text-neutral-200 font-bold dark:font-black sm:text-xl text-lg disabled:opacity-60 dark:disabled:opacity-40 disabled:scale-100;
  }
  .custom-outline-button {
    @apply transition-colors duration-500  border-2 bg-transparent;
  }
  .custom-checkbox {
    @apply h-5 w-5 rounded-md bg-neutral-400 border-zinc-300 dark:border-zinc-700 text-accent-main focus:!ring-transparent !ring-offset-0 !ring-0 !shadow-none focus:!outline-none;
  }
  /* --------------------------- */

  .item-hover {
    @apply relative after:transition-all after:duration-500 after:absolute after:-bottom-1 after:left-0 after:w-0 hover:after:w-full after:h-[3px] after:rounded-xl after:bg-[#D5FFAA];
  }

  .section-spacing {
    @apply md:space-y-24 md:mt-28 mt-16 space-y-12;
  }

  .container-padding {
    @apply sm:px-10 xs:px-6 px-4;
  }

  .map-utilities {
    @apply transition-opacity duration-300;
  }

  .pages-hero-area {
    @apply md:h-[390px] h-[350px];
  }
  .pages-hero-area__image {
    @apply h-[99%] max-lg:scale-[1.2] max-lg:h-[89%] max-md:scale-[1.4] max-md:h-[81%] max-sm:scale-[1.6] max-sm:h-[74%] max-xs:scale-[1.8] max-xs:h-[69%];
  }
}

@layer base {
  html {
    font-family: "yekan-bakh", sans-serif;
    background: var(--neutral-200-color);
    overflow-x: hidden;
  }

  body {
    /* scroll-behavior: smooth; */
    overflow: hidden;
  }

  /* * ### Scroll Bar style */
  /* --------------------------- */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--secondary-main-color) transparent;
  }
  /* width */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  /* Track */
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  /* Handle */
  ::-webkit-scrollbar-thumb {
    background: var(--secondary-main-color);
    border-radius: 10px;
  }
  /* --------------------------- */

  /* * ### Autofill style */
  /* --------------------------- */
  input:-webkit-autofill,
  input:-webkit-autofill:hover,
  input:-webkit-autofill:focus,
  input:-webkit-autofill:active,
  textarea:-webkit-autofill,
  textarea:-webkit-autofill:hover,
  textarea:-webkit-autofill:focus,
  textarea:-webkit-autofill:active {
    box-shadow: 0 0 0 30px var(--autofill-background-color) inset !important;
    -webkit-text-fill-color: var(--autofill-text-color) !important;
    border: 2px solid var(--autofill-border-color) !important;
  }
  /* --------------------------- */

  /* * ### Disable Input Number increment and decrement arrows */
  /* --------------------------- */
  /* Chrome, Safari, Edge, Opera */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  /* Firefox */
  input[type="number"] {
    -moz-appearance: textfield;
  }
  /* --------------------------- */

  /* * ### Disable Anchor and Button gray highlight in touch */
  /* --------------------------- */
  a,
  button {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }
  /* --------------------------- */

  /* * ### Prevent select and blue highlight */
  /* --------------------------- */
  img,
  button,
  a,
  svg {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
  }
  /* --------------------------- */

  *:focus-visible {
    outline: none;
  }
}