@use "common" as *;
/* Default Css */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

html, body {
  &::-webkit-scrollbar {
    width: 10px;
  }

  &::-webkit-scrollbar-track {
    background: #c1c1c1;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #222;
    outline: none;
  }

  &::-webkit-scrollbar-thumb:active {
    background: $theme-color;
  }
}

body {
  color: $body-color;
  font-size: $body-fz;
  font-family: $body-fonts;
  font-weight: 400;
}

img {
  max-width: 100%;
  @include transition(0.3s);
}

a {
  text-decoration: none;
  @include transition(0.3s);

  &:active,
  &:hover {
    text-decoration: none;
  }
}

button,
.btn {
  @include transition(0.3s);

  &:active,
  &:hover,
  &:focus {
    outline: 0;
  }
}

button:focus,
input:focus,
input:focus,
textarea,
textarea:focus,
.btn:focus {
  outline: 0;
  box-shadow: none;
}

.form-control:focus {
  color: $heading-color;
  background-color: transparent;
  outline: 0;
  box-shadow: none;
}

.btn:hover,
.btn:focus {
  outline: 0;
  box-shadow: none;
  color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: $header-fonts;
  color: $heading-color;
  font-weight: $head-fw;
  margin-bottom: 20px;
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
  color: inherit;
}

h1 {
  font-size: 48px;
  line-height: 1.3;
}

h2 {
  font-size: 36px;
  line-height: 1.3;
}

h3 {
  font-size: 28px;
  line-height: 1.3;
}

h4 {
  font-size: 24px;
  line-height: 1.2;
}

h5 {
  font-size: 20px;
  line-height: 1.2;
}

h6 {
  font-size: 16px;
  line-height: 1.2;
}

hr {
  margin: 20px 0;
  border-color: $hr-color;
}

ol {
  list-style: decimal;
}

p {
  &:last-child {
    margin-bottom: 0;
  }
}

/* Form */

label {
  color: $gray;
  cursor: pointer;
  font-size: $body-fz;
  font-weight: 400;
}

*::-moz-selection {
  background: $theme-color;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: $theme-color;
  color: #fff;
  text-shadow: none;
}

::selection {
  background: $theme-color;
  color: #fff;
  text-shadow: none;
}

/* Placeholder */

*::-moz-placeholder {
  color: $body-color;
  font-size: $body-fz;
  opacity: 1;
}

*::placeholder {
  color: $body-color;
  font-size: $body-fz;
  opacity: 1;
}

/* Button */

.btn-theme {
  color: #fff;
  border-color: $theme-color;
  background: $theme-color;

  &:hover {
    background: $theme-color;
    color: #fff;
    border-color: $theme-color;
  }
}

.btn-rounded {
  border-radius: 100% !important;
}

.btn-square {
  border-radius: 0 !important;
}

/* Bg Color */

.bg-gray {
  background: $gray;
}

.bg-white {
  background: #fff;
}

.bg-black {
  background: #000;
}

.bg-theme {
  background: $theme-color;
}

.bg-dark {
  background-color: $dark !important;
}

.bg-off-white {
  background-color: #f8f8f8;
}

.bg-off-white-2 {
  background-color: #f6f6f6;
}

.bg-off-white-3 {
  background-color: #fdfdfd!important;
}

.bg-blue {
  background-color: #4c87ff !important;
}

.bg-yellow {
  background-color: #fea116 !important;
}

.bg-pink {
  background-color: #fc4557 !important;
}

.bg-egg-blue {
  background-color: #1cb5a3 !important;
}

.bg-purple {
  background-color: #5851a7 !important;
}

/* Text Color */

.gray-color {
  background: $gray;
}

.white-color {
  color: #fff;
}

.black-color {
  color: #000;
}

.theme-color {
  color: $theme-color;
}

/* Others Common Css Here :) */

.table-row {
  display: table;
  width: 100%;
  height: 100%;
}

.table-cell {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.f-left {
  float: left;
}

.f-right {
  float: right;
}

.fix {
  overflow: hidden;
}

.separator {
  border-top: 1px solid #f2f2f2;
}