:root {
  --Fontheading: "Inter", sans-serif;
  --Fontbody: "Outfit", sans-serif;
  --bxbr: 3px solid #000;
  --bxbra : 8px;
  --bxsh: 0px 4px 10px rgba(37, 47, 63, 0.1);
  --bxshover: 0 4px 60px 0px rgba(0 0 0 / 20%);
  --bstras: 0 4px 60px 0px rgba(0 0 0 / 20%);
  --grid-columns: 4;
  --rotale: 0deg;
  --icon-rotale: 0deg;
  --h-line-height: 1.3;
  --h-letter-spacing: -0.45px;
  --h1-font-size: 34px;
  --h2-font-size: 32px;
  --h3-font-size: 28px;
  --h5-font-size: 20px;
  --h6-font-size: 16px;
  --body-font-size: 18px;
  --body-line-height: 1.6;
  --hd-title-font-size: 40px;
  --hd-title-line-height: 1.3;
  --hd-tagline-font-size: 16px;
  --hd-tagline-line-height: 1.3;
  --ft-title-font-size: 40px;
  --ft-title-line-height: 1.3;
  --ft-tagline-font-size: 16px;
  --ft-tagline-line-height: 1.3;
  --menu-font-size: 16px;
  --menu-line-height: 1.3;
  --dropdown-font-size: 16px;
  --dropdown-line-height: 1.3;

  --single-text-font-size: 18px;
  --single-text-line-height: 1.6;
  --single-text-letter-spacing: 1.3px;
}
@media (prefers-reduced-motion: no-preference) {
	:root {
	  scroll-behavior: smooth;
	}
}
@mixin directional-one($property, $value) {
  & {
    #{$property}-left: $value;
  }
  .rtl & {
    #{$property}-right: $value;
  }
}
@mixin directional-two($property, $value1, $value2) {
  & {
    #{$property}: $value1;
  }
  .rtl & {
    #{$property}: $value2;
  }
}