:root {
  --primary-light-color: #70d6ff;
  --primary-color: #0eb5f7;
  --primary-dark-color: #0077b6;
  --small-font-size: 0.9rem;
  --small-secondary-font-size: 0.8rem;
}

@font-face {
  font-family: "IRANSans";
  font-style: normal;
  font-weight: normal;
  src: url("../assets/fonts/YekanBakhFaNum-Regular.woff") format("woff"),
    url("../assets/fonts/YekanBakhFaNum-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "IRANSans";
  font-style: normal;
  font-weight: bold;
  src: url("../assets/fonts/YekanBakhFaNum-Bold.woff") format("woff"),
    url("../assets/fonts/YekanBakhFaNum-Bold.woff2") format("woff2");
}

*,
*:not(i)::after,
*:not(i)::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
  direction: rtl;
  font-family: "IRANSans";
}

html,
body,
#root {
  width: 100%;
  height: 100dvh;
  background: #fff;
  display: block;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
}

ul,
ol,
li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

html[data-theme="dark"] {
  & body,
  & .page-content,
  & #root,
  & section,
  & article,
  & div,
  & header,
  & footer,
  & a[class] {
    background: #000 !important;
  }

  & div,
  & a,
  & p,
  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6 {
    color: #fff !important;
  }
}

@media (max-width: 1000px) {
  html, body, #root {
    font-size: var(--small-font-size);
  }
}

@media (max-width: 400px) {
  html, body, #root {
    font-size: var(--small-secondary-font-size);
  }

  .feature-box {
    padding-right: 30px;
    padding-left: 30px;
  }
}